From be0a23e7368775b855d6d981b487a0f2abb5bdcf Mon Sep 17 00:00:00 2001
From: Manuel Weiser <manuel.weiser@me.com>
Date: Thu, 13 Feb 2025 12:20:29 +0100
Subject: [PATCH] remove unused headings from RFID interface and update tray
 display styles

---
 data/.gitkeep    |   0
 html/header.html |  43 +++-----
 html/rfid.html   |   2 -
 html/rfid.js     |   9 +-
 html/style.css   | 252 +++++++++++++++++++++++++++++++++--------------
 5 files changed, 194 insertions(+), 112 deletions(-)
 delete mode 100644 data/.gitkeep
diff --git a/data/.gitkeep b/data/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/html/header.html b/html/header.html
index c18a426..81eaff7 100644
--- a/html/header.html
+++ b/html/header.html
@@ -6,39 +6,22 @@
     <title>FilaMan - Filament Management Tool</title>
     <link rel="icon" type="image/png" href="/favicon.ico">
     <link rel="stylesheet" href="style.css">
-    <style>
-        .status-container {
-            float: right;
-            display: flex;
-            gap: 10px;
-            align-items: center;
-            margin-right: 10px;
-        }
-        .status-dot {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            display: inline-block;
-            margin-right: 4px;
-        }
-        .status-item {
-            display: flex;
-            align-items: center;
-            font-size: 0.8em;
-            color: #fff;
-        }
-        .online { background-color: #2ecc71; }
-        .offline { background-color: #e74c3c; }
-        .ram-status { color: #fff; font-size: 0.8em; }
-    </style>
 </head>
 <body>
     <div class="navbar">
-        <img src="/logo.png" alt="FilaMan Logo" class="logo">
-        <a href="/">Start</a>
-        <a href="/waage">Scale</a>
-        <a href="/spoolman">Spoolman/Bambu</a>
-        <a href="/about">About</a>
+        <div style="display: flex; align-items: center; gap: 2rem;">
+            <img src="/logo.png" alt="FilaMan Logo" class="logo">
+            <div class="logo-text">
+                <h1>FilaMan</h1>
+                <h4>Filament Management Tool</h4>
+            </div>
+        </div>
+        <nav style="display: flex; gap: 1rem;">
+            <a href="/">Start</a>
+            <a href="/waage">Scale</a>
+            <a href="/spoolman">Spoolman/Bambu</a>
+            <a href="/rfid">RFID</a>
+        </nav>
         <div class="status-container">
             <div class="status-item">
                 <span class="status-dot" id="bambuDot"></span>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 @@
         <div class="column">
             <div class="feature-box">
                 <h2>Spoolman Spools</h2>
-                <h2>1. select Manufacturer</h2>
                 <label for="vendorSelect">Manufacturer:</label>
                 <div style="display: flex; justify-content: space-between; align-items: center;">
                     <select id="vendorSelect" class="styled-select">
@@ -78,7 +77,6 @@
             </div>
 
             <div id="filamentSection" class="feature-box hidden">
-                <h2>2. Select Spool</h2>
                 <label>Spool / Filament:</label>
                 <div class="custom-dropdown">
                     <div class="dropdown-button" onclick="toggleFilamentDropdown()">
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 `
                     <div class="tray">
-                        <p><b>Tray ${tray.id}</b></p>
+                        <p class="tray-head">Tray ${tray.id}</p>
                         <p>Empty</p>
                     </div>
                     <hr>`;
@@ -256,7 +256,7 @@ function displayAmsData(amsData) {
             // Nur für nicht-leere Trays den Button-HTML erstellen
             const buttonHtml = `
                 <button class="spool-button" onclick="handleSpoolIn(${ams.ams_id}, ${tray.id})" 
-                        style="position: absolute; top: 5px; left: 5px; 
+                        style="position: absolute; top: -35px; left: -15px; 
                                background: none; border: none; padding: 0; 
                                cursor: pointer; display: none;">
                     <img src="spool_in.png" alt="Spool In" style="width: 48px; height: 48px;">
@@ -304,13 +304,12 @@ function displayAmsData(amsData) {
                 <div class="tray" ${tray.tray_color ? `style="border-left: 4px solid #${tray.tray_color};"` : 'style="border-left: 4px solid #007bff;"'}>
                     <div style="position: relative;">
                         ${buttonHtml}
-                        <p><b>${trayDisplayName}</b></p>
+                        <p class="tray-head">${trayDisplayName}</p>
                         ${typeWithColor}
                         ${trayDetails}
                         ${tempHTML}
                     </div>
-                </div>
-                <hr>`;
+                </div>`;
         }).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
