431 lines
14 KiB
CSS
431 lines
14 KiB
CSS
<style>
|
|
/* Farben und Grundvariablen */
|
|
:root {
|
|
--primary-bg: #000000; /* Schwarz */
|
|
--secondary-bg: #1a1a1a; /* Dunkles Grau/Schwarz */
|
|
--accent-color: #d89904; /* Gold-/Kupferton */
|
|
--text-color: #ffffff; /* Weiß für Schrift */
|
|
--card-bg-opacity: 0.15; /* Opazität für Form-Karten-Hintergrund */
|
|
}
|
|
|
|
/* Seitenhintergrund: Farbverlauf */
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: "Segoe UI", Tahoma, Arial, sans-serif;
|
|
background: linear-gradient(120deg, #000000 0%, #1a1a1a 100%);
|
|
background-repeat: no-repeat;
|
|
background-attachment: fixed;
|
|
background-size: cover;
|
|
min-height: 100vh;
|
|
color: #ffffff;
|
|
}
|
|
|
|
/************************************************************************
|
|
* Links / Anker-Tags
|
|
************************************************************************/
|
|
a,
|
|
a:visited {
|
|
text-decoration: none;
|
|
transition: color 0.2s ease, background-color 0.2s ease;
|
|
}
|
|
a:hover,
|
|
a:focus {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.info-link,
|
|
.info-link:visited {
|
|
color: #d89904;
|
|
text-decoration: none; /* Unterstreichung entfernen (wie schon bei 'a') */
|
|
/* !important ist hier wahrscheinlich nicht mehr nötig, da die Klasse spezifischer ist als 'a' */
|
|
}
|
|
|
|
.info-link:hover {
|
|
/* z.B. Helligkeit ändern oder doch unterstreichen */
|
|
filter: brightness(1.2);
|
|
/* text-decoration: underline; */
|
|
}
|
|
|
|
/************************************************************************
|
|
* Navigation (Sticky Top Bar)
|
|
************************************************************************/
|
|
nav {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
backdrop-filter: blur(6px);
|
|
padding: 10px 0;
|
|
text-align: center;
|
|
position: sticky;
|
|
top: 0;
|
|
/* <b style='color: #FFCC00;'>WICHTIG:</b>: z-index erhöhen, damit das X-Icon klickbar bleibt */
|
|
z-index: 1000;
|
|
position: relative; /* Basis für absolute Positionierung von Kindern */
|
|
}
|
|
|
|
/* Wrapper für die Navigationslinks */
|
|
.nav-links {
|
|
display: inline;
|
|
}
|
|
|
|
/* Desktop Navigationslinks */
|
|
.nav-links a {
|
|
color: #fff;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
margin: 0 10px;
|
|
padding: 10px 20px;
|
|
border-radius: 8px;
|
|
transition: background 0.3s ease, color 0.3s ease;
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Desktop Hover/Focus/Active States */
|
|
.nav-links a:hover,
|
|
.nav-links a:focus,
|
|
.nav-links a:active,
|
|
.nav-links a.active {
|
|
background: #d89904;
|
|
color: #000000;
|
|
}
|
|
|
|
/* Hamburger-Icon / Close-Icon Styling */
|
|
.hamburger {
|
|
display: none;
|
|
font-size: 30px; /* Etwas größer für bessere Klickbarkeit */
|
|
font-weight: bold; /* Macht das 'X' oft etwas klarer */
|
|
line-height: 1;
|
|
position: absolute;
|
|
/* NEU: Anpassung - weiter nach unten verschoben */
|
|
top: calc(50% + 25px); /* Passe '25px' nach Bedarf an */
|
|
transform: translateY(-50%);
|
|
right: 20px;
|
|
color: #ffffff;
|
|
cursor: pointer;
|
|
padding: 5px; /* Etwas Padding für größere Klickfläche */
|
|
z-index: 1001; /* Sicherstellen, dass der Button über dem Overlay liegt */
|
|
}
|
|
.hamburger:hover {
|
|
color: #ddd;
|
|
}
|
|
|
|
|
|
/************************************************************************
|
|
* Formulare (Card-Design, Glas-Effekt)
|
|
************************************************************************/
|
|
form {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
backdrop-filter: blur(8px);
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
margin: 20px auto;
|
|
width: 90%;
|
|
max-width: 600px;
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* Überschriften */
|
|
h1 {
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
font-size: 2rem;
|
|
}
|
|
h3 {
|
|
margin-top: 0;
|
|
font-weight: 600;
|
|
padding-bottom: 3px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
/* Labels */
|
|
label {
|
|
display: block;
|
|
margin: 10px 0 5px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/************************************************************************
|
|
* Eingabefelder (Inputs, Select, Textarea) MIT FOKUS-EFFEKT
|
|
************************************************************************/
|
|
input[type="text"],
|
|
input[type="password"],
|
|
select,
|
|
textarea {
|
|
width: auto;
|
|
min-width: 200px;
|
|
max-width: 300px;
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
color: #ffffff;
|
|
border: 1px solid #555; /* Standard-Rand */
|
|
border-radius: 8px;
|
|
padding: 10px;
|
|
box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
/* Fokus-Effekt FÜR ALLE INPUTS/SELECT/TEXTAREA */
|
|
input[type="text"]:focus,
|
|
input[type="password"]:focus,
|
|
select:focus,
|
|
textarea:focus {
|
|
outline: none;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
/* Orangener Rand und Schein bei Fokus */
|
|
border-color: #d89904;
|
|
box-shadow: 0 0 8px rgba(216, 153, 4, 0.3);
|
|
}
|
|
|
|
/************************************************************************
|
|
* Buttons
|
|
************************************************************************/
|
|
input[type="submit"],
|
|
button {
|
|
background: #d89904;
|
|
color: #000000;
|
|
border: none;
|
|
border-radius: 30px;
|
|
padding: 10px 20px;
|
|
margin-top: 12px;
|
|
width: auto;
|
|
min-width: 100px;
|
|
max-width: 200px;
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
box-shadow: 0 4px 12px rgba(216, 153, 4, 0.3);
|
|
transition: all 0.3s ease;
|
|
}
|
|
input[type="submit"]:hover,
|
|
button:hover {
|
|
opacity: 0.85;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* NEU: Style für Danger-Button (Werkseinstellungen) */
|
|
button.danger {
|
|
background: #dc3545; /* Roter Hintergrund */
|
|
color: #ffffff; /* Weiße Schrift */
|
|
box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3); /* Roter Schatten */
|
|
}
|
|
button.danger:hover {
|
|
background: #c82333; /* Dunkleres Rot bei Hover */
|
|
opacity: 1; /* Opazität zurücksetzen, da Hintergrund dunkler wird */
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/************************************************************************
|
|
* Fehlermeldungen / Sensorfehler
|
|
************************************************************************/
|
|
.sensor-error-message {
|
|
color: #FFCC00; /* Auffälliges Gelb/Gold für Warnungen im Dark Mode */
|
|
text-align: center;
|
|
margin-top: 5px; /* Weniger Abstand nach oben */
|
|
margin-bottom: 15px; /* Abstand zum Chart-Container */
|
|
padding: 8px 10px;
|
|
background-color: rgba(255, 204, 0, 0.1); /* Sehr dezenter gelber Hintergrund */
|
|
border: 1px solid rgba(255, 204, 0, 0.2); /* Sehr dezenter gelber Rand */
|
|
border-radius: 8px;
|
|
font-weight: 500; /* Etwas fetter als normal */
|
|
font-size: 0.9em;
|
|
max-width: 600px; /* Verhindert zu breite Box auf großen Screens */
|
|
margin-left: auto; /* Zentriert die Box selbst */
|
|
margin-right: auto;
|
|
}
|
|
|
|
|
|
/************************************************************************
|
|
* Responsive Design - MOBILE OVERLAY HIER IMPLEMENTIERT
|
|
************************************************************************/
|
|
@media (max-width: 768px) {
|
|
.hamburger {
|
|
display: block; /* Hamburger anzeigen */
|
|
}
|
|
|
|
/* Der Link-Wrapper wird zum absolut positionierten Overlay */
|
|
.nav-links {
|
|
display: none;
|
|
position: absolute;
|
|
top: 100%; /* Unter der Nav-Leiste */
|
|
left: 0;
|
|
width: 100%;
|
|
background: rgba(26, 26, 26, 0.95);
|
|
backdrop-filter: blur(8px);
|
|
padding: 10px 0;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
/* <b style='color: #FFCC00;'>WICHTIG:</b>: z-index niedriger als der Hamburger/Close-Button */
|
|
z-index: 1000;
|
|
}
|
|
|
|
/* Wenn Menü aktiv, Wrapper sichtbar */
|
|
nav.active .nav-links {
|
|
display: block;
|
|
}
|
|
|
|
/* Styling der Links im mobilen Overlay */
|
|
nav .nav-links a {
|
|
display: block;
|
|
margin: 0;
|
|
padding: 15px 25px;
|
|
text-align: center; /* Links zentrieren */
|
|
border-radius: 0;
|
|
color: #eee;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
|
}
|
|
nav .nav-links a:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* Hover/Active für mobile Links */
|
|
nav .nav-links a:hover,
|
|
nav .nav-links a:active,
|
|
nav .nav-links a.active {
|
|
background: #d89904;
|
|
color: #000000;
|
|
}
|
|
|
|
} /* Ende @media (max-width: 768px) */
|
|
|
|
|
|
@media (max-width: 480px) {
|
|
h1 {
|
|
font-size: 1.4rem;
|
|
}
|
|
/* Buttons auf 100% Breite */
|
|
input[type="submit"],
|
|
button {
|
|
width: 100%;
|
|
max-width: none;
|
|
}
|
|
/* Eingabefelder evtl. auch anpassen */
|
|
input[type="text"],
|
|
input[type="password"],
|
|
select,
|
|
textarea {
|
|
max-width: 90%;
|
|
min-width: 150px;
|
|
}
|
|
} /* Ende @media (max-width: 480px) */
|
|
|
|
|
|
|
|
/************************************************************************
|
|
* Temperatur-Chart
|
|
************************************************************************/
|
|
/* Body und Haupt-Wrapper für Flexbox */
|
|
html { height: 100%; }
|
|
body {
|
|
margin: 0; display: flex; flex-direction: column; min-height: 100vh;
|
|
}
|
|
main.chart-page-content { /* Neuer Wrapper */
|
|
flex: 1; display: flex; flex-direction: column; padding: 15px;
|
|
box-sizing: border-box; overflow: hidden; max-width: 1600px;
|
|
margin-left: auto; margin-right: auto; width: 100%;
|
|
}
|
|
h1.chart-title {
|
|
text-align: center; color: #efefef; margin-top: 20px; margin-bottom: 10px;
|
|
font-weight: 300; font-size: 1.8rem;
|
|
}
|
|
/* *** NEU: Gemeinsamer Container für Selektoren *** */
|
|
.chart-selectors-container {
|
|
display: flex;
|
|
flex-wrap: wrap; /* Umbruch auf kleinen Bildschirmen */
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 20px; /* Abstand zwischen den Selektoren */
|
|
margin: 10px auto 20px auto;
|
|
}
|
|
/* Styles für einzelne Selektoren (Update Rate & Data Points) */
|
|
.update-rate-selector, .datapoint-limit-selector {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px; /* Kleinerer Abstand innerhalb eines Selektors */
|
|
}
|
|
.update-rate-selector label, .datapoint-limit-selector label {
|
|
color: #ccc; font-size: 0.95em;
|
|
}
|
|
.update-rate-selector select, .datapoint-limit-selector select {
|
|
background: #252525; color: #e0e0e0; border: 1px solid #555;
|
|
padding: 8px 12px; border-radius: 8px; font-size: 0.9em; cursor: pointer;
|
|
transition: border-color 0.2s ease, box-shadow 0.2s ease; min-width: 80px; /* Mindestbreite */
|
|
}
|
|
.update-rate-selector select:focus, .datapoint-limit-selector select:focus {
|
|
outline: none; border-color: #d89904;
|
|
box-shadow: 0 0 8px rgba(216, 153, 4, 0.3);
|
|
}
|
|
.chart-container {
|
|
width: 95%; height: 65vh; min-height: 350px;
|
|
margin: 15px auto; background: rgba(0, 0, 0, 0.2);
|
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); border-radius: 15px;
|
|
position: relative; border: 1px solid rgba(255, 255, 255, 0.1);
|
|
padding: 20px; box-sizing: border-box;
|
|
}
|
|
.chart-container canvas { width: 100% !important; height: 100% !important; }
|
|
.sensor-error-message { /* Unverändert */
|
|
color: #FFCC00; text-align: center; margin-top: 5px; margin-bottom: 15px;
|
|
padding: 8px 10px; background-color: rgba(255, 204, 0, 0.1);
|
|
border: 1px solid rgba(255, 204, 0, 0.2); border-radius: 8px;
|
|
font-weight: 500; font-size: 0.9em; max-width: 600px;
|
|
margin-left: auto; margin-right: auto;
|
|
}
|
|
.chart-error-box { /* Unverändert */
|
|
margin: 20px auto; padding: 20px; max-width: 600px;
|
|
background-color: rgba(255, 221, 221, 0.9); border: 1px solid #dc3545;
|
|
color: #333; border-radius: 8px; text-align: center;
|
|
}
|
|
.chart-error-box h2 { color: #dc3545; margin-bottom: 10px;}
|
|
.chart-error-box a { color: #0056b3; text-decoration: underline; }
|
|
|
|
@media (max-width: 600px) { /* Unverändert */
|
|
h1.chart-title { font-size: 1.5rem; }
|
|
.chart-container { width: 98%; padding: 10px; height: 60vh; }
|
|
/* Selektoren untereinander anordnen */
|
|
.chart-selectors-container { flex-direction: column; gap: 10px; }
|
|
.update-rate-selector, .datapoint-limit-selector { width: 100%; justify-content: center;}
|
|
.sensor-error-message { width: 90%; font-size: 0.85em; }
|
|
.chart-error-box { width: 90%; padding: 15px;}
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
<script>
|
|
// NEU: Angepasste JavaScript-Funktion für Icon-Wechsel
|
|
function toggleMenu() {
|
|
var nav = document.querySelector('nav');
|
|
var hamburger = document.querySelector('.hamburger');
|
|
nav.classList.toggle('active');
|
|
|
|
// Prüfen, ob das Menü JETZT aktiv ist und Icon entsprechend ändern
|
|
if (nav.classList.contains('active')) {
|
|
hamburger.innerHTML = '×'; // Ändert zu einem 'X' (Schließen-Symbol)
|
|
} else {
|
|
hamburger.innerHTML = '☰'; // Ändert zurück zum Hamburger-Symbol
|
|
}
|
|
}
|
|
|
|
// OPTIONAL: Schließen des Menüs bei Klick außerhalb (Verbessert Usability)
|
|
document.addEventListener('click', function(event) {
|
|
var nav = document.querySelector('nav');
|
|
var hamburger = document.querySelector('.hamburger');
|
|
var navLinks = document.querySelector('.nav-links');
|
|
|
|
// Prüfen ob Menü überhaupt offen ist
|
|
if (nav.classList.contains('active')) {
|
|
// Prüfen ob Klick außerhalb des Menüs UND außerhalb des Buttons war
|
|
var isClickInsideNavLinks = navLinks.contains(event.target);
|
|
var isClickOnHamburger = hamburger.contains(event.target);
|
|
|
|
if (!isClickInsideNavLinks && !isClickOnHamburger) {
|
|
toggleMenu(); // Schließe das Menü
|
|
}
|
|
}
|
|
});
|
|
|
|
// NEU: Bestätigungsdialog für Werkseinstellungen
|
|
function confirmResetDefaults() {
|
|
return confirm("Sicher, dass Sie alle Einstellungen auf die Werkseinstellungen geladen werden sollen?");
|
|
}
|
|
|
|
</script> |