3D-Druck/Filaman
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 110 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
Show Stats 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>
<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

2
html/rfid.html
View File

@ -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()">

9
html/rfid.js
View File

@ -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 = `

250
html/style.css
View File

@ -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;
color: var(--inner-text-color);
text-decoration: none;
font-weight: bold;
transition: background 0.3s, color 0.3s;
cursor: pointer !important; /* Wichtig: cursor-Definition für Nav-Links */
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;
}