Initiale Bereitstellung
Initiale Bereitstellung der aktuellen Version auf Gitea
This commit is contained in:
raw-designs
@@ -0,0 +1,12 @@
|
||||
<nav>
|
||||
<span class="hamburger" onclick="toggleMenu()">☰</span>
|
||||
<div class="nav-links"> <a href="/">PID-Einstellung</a>
|
||||
<a href="/PID-Tuning">PID-Tuning</a>
|
||||
<a href="/Profile">Profile</a>
|
||||
<a href="/Charts">Temperaturverlauf</a>
|
||||
<a href="/Fast-Heat-Up">Fast-Heat-Up</a>
|
||||
<a href="/ECO">Eco</a>
|
||||
<a href="/Info">Info</a>
|
||||
<a href="/Netzwerk">WiFi</a>
|
||||
<a href="/Firmware">Firmware</a>
|
||||
<a href="/Dateimanager">Dateimanager</a> </div> </nav>
|
||||
@@ -0,0 +1,37 @@
|
||||
// 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 && nav.classList.contains('active')) { // Prüfen ob nav existiert
|
||||
// Prüfen ob Klick außerhalb des Menüs UND außerhalb des Buttons war
|
||||
// Sicherstellen, dass navLinks und hamburger existieren, bevor contains aufgerufen wird
|
||||
var isClickInsideNavLinks = navLinks && navLinks.contains(event.target);
|
||||
var isClickOnHamburger = hamburger && hamburger.contains(event.target);
|
||||
|
||||
if (!isClickInsideNavLinks && !isClickOnHamburger) {
|
||||
toggleMenu(); // Schließe das Menü
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Bestätigungsdialog für Werkseinstellungen
|
||||
function confirmResetDefaults() {
|
||||
return confirm("Sicher, dass Sie alle Einstellungen auf die Werkseinstellungen zurücksetzen möchten? Netzwerk, Betriebszeit und Shotzähler bleiben erhalten."); // Text angepasst
|
||||
}
|
||||
@@ -0,0 +1,295 @@
|
||||
/* 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;
|
||||
}
|
||||
|
||||
/************************************************************************
|
||||
* 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;
|
||||
/* WICHTIG: 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: var(--accent-color);
|
||||
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: var(--text-color);
|
||||
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, var(--card-bg-opacity));
|
||||
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: var(--text-color);
|
||||
}
|
||||
|
||||
/* Überschriften */
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
font-size: 2rem;
|
||||
}
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
font-weight: 600;
|
||||
padding-bottom: 5px;
|
||||
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: 15px;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
color: var(--text-color);
|
||||
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: var(--accent-color, #d89904);
|
||||
box-shadow: 0 0 8px rgba(216, 153, 4, 0.3);
|
||||
}
|
||||
|
||||
/************************************************************************
|
||||
* Buttons
|
||||
************************************************************************/
|
||||
input[type="submit"],
|
||||
button {
|
||||
background: var(--accent-color);
|
||||
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);
|
||||
/* WICHTIG: 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: var(--accent-color);
|
||||
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) */
|
||||
Reference in New Issue
Block a user