- Start
- Scale
- Spoolman/Bambu
- About
+
+
+
+
+
+
+ FilaMan
+Filament Management Tool
+
B
diff --git a/html/rfid.html b/html/rfid.html
index ec34f37..5202581 100644
--- a/html/rfid.html
+++ b/html/rfid.html
@@ -64,7 +64,6 @@
Spoolman Spools
-1. select Manufacturer
-
2. Select Spool
diff --git a/html/rfid.js b/html/rfid.js
index 675b2c4..cb04cc5 100644
--- a/html/rfid.js
+++ b/html/rfid.js
@@ -247,7 +247,7 @@ function displayAmsData(amsData) {
if (!hasAnyContent) {
return `
`; @@ -256,7 +256,7 @@ function displayAmsData(amsData) { // Nur für nicht-leere Trays den Button-HTML erstellen const buttonHtml = `
`;
}).join('');
const amsInfo = `
diff --git a/html/style.css b/html/style.css
index 0902859..5d03825 100644
--- a/html/style.css
+++ b/html/style.css
@@ -1,53 +1,144 @@
/* Allgemeine Stile */
+:root {
+ --primary-color: #63bb67; /* Hauptfarbe Grün */
+ --primary-light: #8cd590; /* Helleres Grün */
+ --background-green: #28902D; /* Dunkleres Hintergrund-Grün */
+ --text-color: #1e293b; /* Dunkelgrau für Text */
+ --inner-box-bg: #63bb67; /* Grüner Hintergrund für innere Boxen */
+ --inner-text-color: #ffffff; /* Weißer Text in Boxen */
+ --stat-value-color: #ffd700; /* Gelber Text für Werte */
+ --header-bg: #28902D; /* Hintergrundfarbe für den Header */
+ --header-border: #f7208c; /* Pinke Randfarbe für den Header */
+ --accent-color: #d51274; /* Pink für Akzentfarben */
+ --header-text: #40e8b7; /* Türkisfarbener Text */
+ --background-light: #63bb67; /* Helleres Grün für Container */
+ --border-color: rgba(255, 255, 255, 0.1); /* Subtile Borders */
+ --card-background: rgba(255, 255, 255, 0.15);
+ --card-shadow: 0 4px 15px rgba(31, 41, 55, 0.1);
+ --glass-bg: rgba(255, 255, 255, 0.15);
+ --glass-border: 1px solid rgba(255, 255, 255, 0.2);
+ --glass-blur: blur(12px);
+ --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
+}
+
body {
- font-family: Arial, sans-serif;
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
margin: 0;
padding: 0;
- background-color: #f8f9fa;
- color: #333;
+ background: var(--background-green);
+ background-image: radial-gradient(circle at center, var(--primary-color) 0%, var(--background-green) 100%);
+ color: var(--text-color);
display: flex;
flex-direction: column;
- align-items: center;
min-height: 100vh;
- text-align: center;
+}
+
+/* Header und Navigation */
+.navbar {
+ background: var(--header-bg);
+ border: 2px solid var(--header-border);
+ width: calc(100% - 4rem);
+ max-width: 1400px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 1.5rem;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ position: fixed;
+ top: 1rem;
+ left: 50%;
+ transform: translateX(-50%);
+ z-index: 1000;
+ border-radius: 1rem;
+ height: 80px;
}
.logo {
- height: 40px; /* Anpassen an die Navbar-Höhe */
+ height: 70px;
width: auto;
margin-right: 15px;
- margin-left: 10px;
-}
-
-/* Navigationsleiste */
-.navbar {
- background-color: #007bff;
- width: 100%;
- display: flex;
- justify-content: center; /* Zentriert die Navigation */
- padding: 10px 0;
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
- position: fixed;
- top: 0;
- left: 0;
- z-index: 1000;
}
.navbar a {
- display: inline-block;
- color: white;
- text-align: center;
- padding: 14px 20px;
- text-decoration: none;
- font-weight: bold;
- transition: background 0.3s, color 0.3s;
- cursor: pointer !important; /* Wichtig: cursor-Definition für Nav-Links */
+ color: var(--inner-text-color);
+ text-decoration: none;
+ font-weight: 600;
+ padding: 0.5rem 1rem;
+ border-radius: 0.75rem;
+ background: rgba(255, 255, 255, 0.05);
+ border: 1px solid transparent;
+ transition: all 0.3s;
}
.navbar a:hover {
- background-color: #0056b3;
- color: #fff;
- cursor: pointer !important;
+ background-color: rgba(255, 255, 255, 0.1);
+ transform: translateY(-1px);
+}
+
+/* Logo und Text im Header */
+.logo-text {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ justify-content: center;
+}
+
+.logo-text h4 {
+ font-size: 1rem;
+ color: var(--header-text);
+ margin: 0 !important;
+}
+
+.logo-text h1 {
+ font-size: 1.75rem;
+ font-weight: 600;
+ color: var(--header-border);
+ margin: 5px !important;
+ text-shadow: 1px 1px 0 var(--accent-color);
+}
+
+/* Status Container in der Navbar */
+.status-container {
+ background: var(--inner-box-bg) !important;
+ border-radius: 1rem;
+ padding: 0.5rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+}
+
+.status-item {
+ background: rgba(0, 0, 0, 0.1) !important;
+ color: var(--inner-text-color) !important;
+ padding: 0.25rem 0.75rem;
+ border-radius: 0.5rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.status-dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ display: inline-block;
+ margin-right: 4px;
+}
+
+.online {
+ background-color: #63bb67;
+}
+
+.offline {
+ background-color: #dc2626;
+}
+
+.ram-status {
+ color: var(--inner-text-color);
+ font-size: 0.9em;
+ padding: 0.25rem 0.75rem;
+ background: rgba(99, 187, 103, 0.1);
+ border-radius: 0.5rem;
}
/* Inhalt */
@@ -68,11 +159,12 @@ h1 {
}
h3 {
- color: #007bff;
+ color: #007bff !important;
font-size: 24px;
margin-top: 5px;
margin-bottom: 5px;
font-weight: bold;
+ text-align: center;
}
/* Formulare */
@@ -145,11 +237,11 @@ button:hover {
}
.feature {
flex: 1;
- padding: 20px;
- background-color: #f9f9f9;
+ padding: 0 20px;
border-radius: 8px;
- margin: 0 10px;
+ margin: 0 10px 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
+ border: var(--glass-border);
}
.feature h3 {
font-size: 1.4rem;
@@ -158,7 +250,7 @@ button:hover {
}
.feature p {
font-size: 1rem;
- color: #555;
+ color: #ffffff;
}
p {
@@ -247,7 +339,7 @@ a:hover {
display: flex;
justify-content: space-between;
gap: 20px;
- margin-top: 20px;
+ margin-top: 5px;
width: 100%;
}
@@ -257,17 +349,21 @@ a:hover {
}
.feature-box {
- background: white;
- padding: 5px 20px 20px 20px;
- border-radius: 8px;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
- margin-bottom: 20px;
+ background: var(--inner-box-bg);
+ border: 1px solid rgba(99, 187, 103, 0.2);
+ border-radius: 0.5rem;
+ padding: 1rem;
+ color: var(--inner-text-color);
+ margin: 10px 0 0 0;
}
.feature-box h2 {
- color: #007bff;
+ color: var(--inner-text-color);
font-size: 1.4rem;
- margin-bottom: 15px;
+ margin-bottom: 1rem;
+ margin-top: 0;
+ color: var(--accent-color);
+ text-align: center;
}
.feature-box ul {
@@ -285,27 +381,24 @@ a:hover {
width: 95%;
max-width: 1400px;
margin: 0 auto;
- padding-top: 60px;
+ padding-top: 100px;
padding-bottom: 20px;;
}
.tray {
- background: #ffffff;
+ border-radius: 8px;
padding: 15px;
margin: 10px 0;
+ color: var(--inner-text-color);
+ background: var(--background-green);
+ border: 1px solid var(--border-color);
border-radius: 8px;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
- border-left: 4px solid #ffffff;
}
.tray p {
margin: 5px 0;
}
-.tray b {
- color: #007bff;
-}
-
/* Responsive Design */
@media (max-width: 1024px) {
.three-column-layout {
@@ -345,7 +438,7 @@ a:hover {
.nfc-data {
padding: 10px;
- background-color: #f8f9fa;
+ background-color: var(--primary-color);
border-radius: 4px;
margin-top: 5px;
width: 100%;
@@ -387,6 +480,7 @@ a:hover {
margin: 0;
grid-column: 2;
text-align: center;
+ color: var(--accent-color);
}
.nfc-header .status-circle {
@@ -567,6 +661,7 @@ a:hover {
width: 100%;
font-family: inherit;
cursor: default; /* Container selbst soll normalen Cursor haben */
+ color: black;
}
.dropdown-button {
@@ -677,23 +772,20 @@ a:hover {
/* Neue Styles für die Statistiken */
.statistics-grid {
display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 20px;
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+ gap: 1rem;
margin-top: 15px;
}
.statistics-column {
- background: #f8f9fa;
- padding: 0;
- border-radius: 8px;
- box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+ background: var(--inner-box-bg);
+ border: 1px solid rgba(99, 187, 103, 0.2);
+ border-radius: 0.5rem;
}
.statistics-column h3 {
- color: #007bff;
- margin-bottom: 5px;
- padding-bottom: 8px;
- border-bottom: 2px solid #e9ecef;
+ color: var(--inner-text-color);
+ border-bottom: 1px solid rgba(99, 187, 103, 0.2);
font-size: 1.1rem;
}
@@ -706,8 +798,8 @@ a:hover {
.statistics-list li {
display: flex;
justify-content: space-between;
- padding: 8px 5px 0 5px;
- border-bottom: 1px solid #e9ecef;
+ padding: 0.5rem;
+ border-bottom: 1px solid rgba(99, 187, 103, 0.1);
}
.statistics-list li:last-child {
@@ -715,13 +807,12 @@ a:hover {
}
.stat-label {
- color: #495057;
- font-weight: 500;
+ color: var(--inner-text-color);
}
.stat-value {
- font-weight: bold;
- color: #007bff;
+ color: var(--stat-value-color);
+ font-weight: 500;
}
/* Responsive Design Anpassung */
@@ -772,17 +863,18 @@ a:hover {
display: flex;
align-items: center;
gap: 8px;
+ background: var(--inner-box-bg);
+ border: 1px solid rgba(99, 187, 103, 0.2);
+ border-radius: 0.5rem;
}
.spool-stat .stat-label {
- color: #495057;
- font-weight: 500;
- white-space: nowrap;
+ color: var(--inner-text-color);
}
.spool-stat .stat-value {
- font-weight: bold;
- color: #007bff;
+ color: var(--stat-value-color);
+ font-weight: 500;
}
/* Buttons und klickbare Elemente */
@@ -877,11 +969,21 @@ input[type="submit"]:disabled,
justify-content: center;
}
+.amsData {
+ border-color: black !important;
+ border-width: 1px !important;
+}
.tray {
position: relative;
}
+.tray-head {
+ color: var(--stat-value-color) !important;
+ text-align: center !important;
+ font-weight: bold !important;
+}
+
.spool-button:hover {
opacity: 0.8;
}
\ No newline at end of file
-
Tray ${tray.id}
+Tray ${tray.id}
Empty
`; @@ -256,7 +256,7 @@ function displayAmsData(amsData) { // Nur für nicht-leere Trays den Button-HTML erstellen const buttonHtml = `