3D-Druck/Filaman
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 184 Wiki Activity

remove unused headings from RFID interface and update tray display styles

Browse Source
This commit is contained in:
Manuel Weiser
2025-02-13 12:20:29 +01:00
parent c46553434b
commit be0a23e736
5 changed files with 194 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
data/.gitkeep
View File

43
html/header.html
View File

@@ -6,39 +6,22 @@
<title>FilaMan - Filament Management Tool</title> <title>FilaMan - Filament Management Tool</title>
<link rel="icon" type="image/png" href="/favicon.ico"> <link rel="icon" type="image/png" href="/favicon.ico">
<link rel="stylesheet" href="style.css"> <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> </head>
<body> <body>
<div class="navbar"> <div class="navbar">
<img src="/logo.png" alt="FilaMan Logo" class="logo"> <div style="display: flex; align-items: center; gap: 2rem;">
<a href="/">Start</a> <img src="/logo.png" alt="FilaMan Logo" class="logo">
<a href="/waage">Scale</a> <div class="logo-text">
<a href="/spoolman">Spoolman/Bambu</a> <h1>FilaMan</h1>
<a href="/about">About</a> <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-container">
<div class="status-item"> <div class="status-item">
<span class="status-dot" id="bambuDot"></span>B <span class="status-dot" id="bambuDot"></span>B

2
html/rfid.html
View File

@@ -64,7 +64,6 @@
<div class="column"> <div class="column">
<div class="feature-box"> <div class="feature-box">
<h2>Spoolman Spools</h2> <h2>Spoolman Spools</h2>
<h2>1. select Manufacturer</h2>
<label for="vendorSelect">Manufacturer:</label> <label for="vendorSelect">Manufacturer:</label>
<div style="display: flex; justify-content: space-between; align-items: center;"> <div style="display: flex; justify-content: space-between; align-items: center;">
<select id="vendorSelect" class="styled-select"> <select id="vendorSelect" class="styled-select">
@@ -78,7 +77,6 @@
</div> </div>
<div id="filamentSection" class="feature-box hidden"> <div id="filamentSection" class="feature-box hidden">
<h2>2. Select Spool</h2>
<label>Spool / Filament:</label> <label>Spool / Filament:</label>
<div class="custom-dropdown"> <div class="custom-dropdown">
<div class="dropdown-button" onclick="toggleFilamentDropdown()"> <div class="dropdown-button" onclick="toggleFilamentDropdown()">

9
html/rfid.js
View File

@@ -247,7 +247,7 @@ function displayAmsData(amsData) {
if (!hasAnyContent) { if (!hasAnyContent) {
return ` return `
<div class="tray"> <div class="tray">
<p><b>Tray ${tray.id}</b></p> <p class="tray-head">Tray ${tray.id}</p>
<p>Empty</p> <p>Empty</p>
</div> </div>
<hr>`; <hr>`;
@@ -256,7 +256,7 @@ function displayAmsData(amsData) {
// Nur für nicht-leere Trays den Button-HTML erstellen // Nur für nicht-leere Trays den Button-HTML erstellen
const buttonHtml = ` const buttonHtml = `
<button class="spool-button" onclick="handleSpoolIn(${ams.ams_id}, ${tray.id})" <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; background: none; border: none; padding: 0;
cursor: pointer; display: none;"> cursor: pointer; display: none;">
<img src="spool_in.png" alt="Spool In" style="width: 48px; height: 48px;"> <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 class="tray" ${tray.tray_color ? `style="border-left: 4px solid #${tray.tray_color};"` : 'style="border-left: 4px solid #007bff;"'}>
<div style="position: relative;"> <div style="position: relative;">
${buttonHtml} ${buttonHtml}
<p><b>${trayDisplayName}</b></p> <p class="tray-head">${trayDisplayName}</p>
${typeWithColor} ${typeWithColor}
${trayDetails} ${trayDetails}
${tempHTML} ${tempHTML}
</div> </div>
</div> </div>`;
<hr>`;
}).join(''); }).join('');
const amsInfo = ` const amsInfo = `

252
html/style.css
View File

@@ -1,53 +1,144 @@
/* Allgemeine Stile */ /* 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 { body {
font-family: Arial, sans-serif; font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: #f8f9fa; background: var(--background-green);
color: #333; background-image: radial-gradient(circle at center, var(--primary-color) 0%, var(--background-green) 100%);
color: var(--text-color);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
min-height: 100vh; 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 { .logo {
height: 40px; /* Anpassen an die Navbar-Höhe */ height: 70px;
width: auto; width: auto;
margin-right: 15px; 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 { .navbar a {
display: inline-block; color: var(--inner-text-color);
color: white; text-decoration: none;
text-align: center; font-weight: 600;
padding: 14px 20px; padding: 0.5rem 1rem;
text-decoration: none; border-radius: 0.75rem;
font-weight: bold; background: rgba(255, 255, 255, 0.05);
transition: background 0.3s, color 0.3s; border: 1px solid transparent;
cursor: pointer !important; /* Wichtig: cursor-Definition für Nav-Links */ transition: all 0.3s;
} }
.navbar a:hover { .navbar a:hover {
background-color: #0056b3; background-color: rgba(255, 255, 255, 0.1);
color: #fff; transform: translateY(-1px);
cursor: pointer !important; }
/* 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 */ /* Inhalt */
@@ -68,11 +159,12 @@ h1 {
} }
h3 { h3 {
color: #007bff; color: #007bff !important;
font-size: 24px; font-size: 24px;
margin-top: 5px; margin-top: 5px;
margin-bottom: 5px; margin-bottom: 5px;
font-weight: bold; font-weight: bold;
text-align: center;
} }
/* Formulare */ /* Formulare */
@@ -145,11 +237,11 @@ button:hover {
} }
.feature { .feature {
flex: 1; flex: 1;
padding: 20px; padding: 0 20px;
background-color: #f9f9f9;
border-radius: 8px; border-radius: 8px;
margin: 0 10px; margin: 0 10px 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
border: var(--glass-border);
} }
.feature h3 { .feature h3 {
font-size: 1.4rem; font-size: 1.4rem;
@@ -158,7 +250,7 @@ button:hover {
} }
.feature p { .feature p {
font-size: 1rem; font-size: 1rem;
color: #555; color: #ffffff;
} }
p { p {
@@ -247,7 +339,7 @@ a:hover {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
gap: 20px; gap: 20px;
margin-top: 20px; margin-top: 5px;
width: 100%; width: 100%;
} }
@@ -257,17 +349,21 @@ a:hover {
} }
.feature-box { .feature-box {
background: white; background: var(--inner-box-bg);
padding: 5px 20px 20px 20px; border: 1px solid rgba(99, 187, 103, 0.2);
border-radius: 8px; border-radius: 0.5rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding: 1rem;
margin-bottom: 20px; color: var(--inner-text-color);
margin: 10px 0 0 0;
} }
.feature-box h2 { .feature-box h2 {
color: #007bff; color: var(--inner-text-color);
font-size: 1.4rem; font-size: 1.4rem;
margin-bottom: 15px; margin-bottom: 1rem;
margin-top: 0;
color: var(--accent-color);
text-align: center;
} }
.feature-box ul { .feature-box ul {
@@ -285,27 +381,24 @@ a:hover {
width: 95%; width: 95%;
max-width: 1400px; max-width: 1400px;
margin: 0 auto; margin: 0 auto;
padding-top: 60px; padding-top: 100px;
padding-bottom: 20px;; padding-bottom: 20px;;
} }
.tray { .tray {
background: #ffffff; border-radius: 8px;
padding: 15px; padding: 15px;
margin: 10px 0; margin: 10px 0;
color: var(--inner-text-color);
background: var(--background-green);
border: 1px solid var(--border-color);
border-radius: 8px; border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
border-left: 4px solid #ffffff;
} }
.tray p { .tray p {
margin: 5px 0; margin: 5px 0;
} }
.tray b {
color: #007bff;
}
/* Responsive Design */ /* Responsive Design */
@media (max-width: 1024px) { @media (max-width: 1024px) {
.three-column-layout { .three-column-layout {
@@ -345,7 +438,7 @@ a:hover {
.nfc-data { .nfc-data {
padding: 10px; padding: 10px;
background-color: #f8f9fa; background-color: var(--primary-color);
border-radius: 4px; border-radius: 4px;
margin-top: 5px; margin-top: 5px;
width: 100%; width: 100%;
@@ -387,6 +480,7 @@ a:hover {
margin: 0; margin: 0;
grid-column: 2; grid-column: 2;
text-align: center; text-align: center;
color: var(--accent-color);
} }
.nfc-header .status-circle { .nfc-header .status-circle {
@@ -567,6 +661,7 @@ a:hover {
width: 100%; width: 100%;
font-family: inherit; font-family: inherit;
cursor: default; /* Container selbst soll normalen Cursor haben */ cursor: default; /* Container selbst soll normalen Cursor haben */
color: black;
} }
.dropdown-button { .dropdown-button {
@@ -677,23 +772,20 @@ a:hover {
/* Neue Styles für die Statistiken */ /* Neue Styles für die Statistiken */
.statistics-grid { .statistics-grid {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px; gap: 1rem;
margin-top: 15px; margin-top: 15px;
} }
.statistics-column { .statistics-column {
background: #f8f9fa; background: var(--inner-box-bg);
padding: 0; border: 1px solid rgba(99, 187, 103, 0.2);
border-radius: 8px; border-radius: 0.5rem;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
} }
.statistics-column h3 { .statistics-column h3 {
color: #007bff; color: var(--inner-text-color);
margin-bottom: 5px; border-bottom: 1px solid rgba(99, 187, 103, 0.2);
padding-bottom: 8px;
border-bottom: 2px solid #e9ecef;
font-size: 1.1rem; font-size: 1.1rem;
} }
@@ -706,8 +798,8 @@ a:hover {
.statistics-list li { .statistics-list li {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 8px 5px 0 5px; padding: 0.5rem;
border-bottom: 1px solid #e9ecef; border-bottom: 1px solid rgba(99, 187, 103, 0.1);
} }
.statistics-list li:last-child { .statistics-list li:last-child {
@@ -715,13 +807,12 @@ a:hover {
} }
.stat-label { .stat-label {
color: #495057; color: var(--inner-text-color);
font-weight: 500;
} }
.stat-value { .stat-value {
font-weight: bold; color: var(--stat-value-color);
color: #007bff; font-weight: 500;
} }
/* Responsive Design Anpassung */ /* Responsive Design Anpassung */
@@ -772,17 +863,18 @@ a:hover {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
background: var(--inner-box-bg);
border: 1px solid rgba(99, 187, 103, 0.2);
border-radius: 0.5rem;
} }
.spool-stat .stat-label { .spool-stat .stat-label {
color: #495057; color: var(--inner-text-color);
font-weight: 500;
white-space: nowrap;
} }
.spool-stat .stat-value { .spool-stat .stat-value {
font-weight: bold; color: var(--stat-value-color);
color: #007bff; font-weight: 500;
} }
/* Buttons und klickbare Elemente */ /* Buttons und klickbare Elemente */
@@ -877,11 +969,21 @@ input[type="submit"]:disabled,
justify-content: center; justify-content: center;
} }
.amsData {
border-color: black !important;
border-width: 1px !important;
}
.tray { .tray {
position: relative; position: relative;
} }
.tray-head {
color: var(--stat-value-color) !important;
text-align: center !important;
font-weight: bold !important;
}
.spool-button:hover { .spool-button:hover {
opacity: 0.8; opacity: 0.8;
} }