eneuber/paramod-rust
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Darkmode eingeführt

Browse Source
This commit is contained in:
Eric Neuber 2026-01-14 18:41:57 +01:00
parent 195df9f260
commit 3fb6051e4a
4 changed files with 146 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
static/script.js
View File

@ -1,5 +1,11 @@
// Sortiere die Tabelle nach Adresse (addr) beim Laden der Seite
document.addEventListener('DOMContentLoaded', function() {
// Darkmode-Status aus localStorage übernehmen
if (localStorage.getItem('darkmode') === 'true') {
document.body.classList.add('darkmode');
} else {
document.body.classList.remove('darkmode');
}
const tableBody = document.getElementById('tableBody');
if (tableBody) {
// Extrahiere alle Zeilen und deren addr
@ -73,6 +79,7 @@ function addRow() {
tableBody.appendChild(newRow);
}
function deleteRow(button) {
const row = button.closest('tr');
if (confirm('Möchten Sie diese Zeile wirklich löschen?')) {

14
static/settings.js
View File

@ -69,3 +69,17 @@ async function saveSettings() {
messageDiv.textContent = '✗ Verbindungsfehler!';
}
}
// Darkmode Toggle
document.addEventListener('DOMContentLoaded', function() {
const btn = document.getElementById('darkmode-toggle');
if (!btn) return;
// Initialer Zustand aus LocalStorage
if (localStorage.getItem('darkmode') === 'true') {
document.body.classList.add('darkmode');
}
btn.addEventListener('click', function() {
document.body.classList.toggle('darkmode');
localStorage.setItem('darkmode', document.body.classList.contains('darkmode'));
});
});

155
static/style.css
View File

@ -4,11 +4,98 @@
box-sizing: border-box;
}
:root {
--background: #fff;
--background-alt: #f9f9f9;
--container-bg: #fff;
--header-bg: #fff;
--primary: #667eea;
--primary-dark: #764ba2;
--text: #111;
--text-light: #333;
--nav-link: #666;
--nav-link-hover: #f0f0f0;
--table-header: #667eea;
--table-header-border: #5568d3;
--table-row-hover: #f8f9ff;
--input-border: #e0e0e0;
--input-focus: #667eea;
--button-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--button-gradient-alt: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
--delete-btn: #f44336;
--delete-btn-hover: #da190b;
--success-bg: #d4edda;
--success-text: #155724;
--success-border: #c3e6cb;
--error-bg: #f8d7da;
--error-text: #721c24;
--error-border: #f5c6cb;
}
body.darkmode, body.darkmode :root {
--background: #181a1b;
--background-alt: #23272b;
--container-bg: #23272b;
--header-bg: #23272b;
--primary: #3399ff;
--primary-dark: #1a2a3a;
--text: #eee;
--text-light: #bbb;
--nav-link: #bbb;
--nav-link-hover: #222;
--table-header: #222e3a;
--table-header-border: #3399ff;
--table-row-hover: #23272b;
--input-border: #444;
--input-focus: #3399ff;
--button-gradient: linear-gradient(135deg, #3399ff 0%, #1a2a3a 100%);
--button-gradient-alt: linear-gradient(135deg, #388e3c 0%, #1b5e20 100%);
--delete-btn: #b71c1c;
--delete-btn-hover: #7f0000;
--success-bg: #234d2c;
--success-text: #b9f6ca;
--success-border: #388e3c;
--error-bg: #4a2323;
--error-text: #ff8a80;
--error-border: #b71c1c;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #181a1b;
--background-alt: #23272b;
--container-bg: #23272b;
--header-bg: #23272b;
--primary: #3399ff;
--primary-dark: #1a2a3a;
--text: #eee;
--text-light: #bbb;
--nav-link: #bbb;
--nav-link-hover: #222;
--table-header: #222e3a;
--table-header-border: #3399ff;
--table-row-hover: #23272b;
--input-border: #444;
--input-focus: #3399ff;
--button-gradient: linear-gradient(135deg, #3399ff 0%, #1a2a3a 100%);
--button-gradient-alt: linear-gradient(135deg, #388e3c 0%, #1b5e20 100%);
--delete-btn: #b71c1c;
--delete-btn-hover: #7f0000;
--success-bg: #234d2c;
--success-text: #b9f6ca;
--success-border: #388e3c;
--error-bg: #4a2323;
--error-text: #ff8a80;
--error-border: #b71c1c;
}
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background: var(--background);
min-height: 100vh;
padding-top: 80px;
color: var(--text);
}
/* Header Styles */
@ -17,7 +104,7 @@ body {
top: 0;
left: 0;
right: 0;
background: white;
background: var(--header-bg);
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
z-index: 1000;
}
@ -40,7 +127,7 @@ body {
.logo-text {
font-size: 20px;
font-weight: 700;
color: #333;
color: var(--text-light);
}
.nav {
@ -51,20 +138,20 @@ body {
.nav-link {
padding: 10px 20px;
text-decoration: none;
color: #666;
color: var(--nav-link);
border-radius: 6px;
transition: all 0.3s;
font-weight: 500;
}
.nav-link:hover {
background-color: #f0f0f0;
color: #333;
background-color: var(--nav-link-hover);
color: var(--text-light);
}
.nav-link.active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
background: var(--button-gradient);
color: #fff;
}
/* Container */
@ -72,23 +159,23 @@ body {
max-width: 1400px;
margin: 30px auto;
padding: 30px;
background-color: white;
background-color: var(--container-bg);
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}
h1 {
color: #333;
color: var(--text-light);
text-align: center;
margin-bottom: 30px;
font-size: 28px;
}
h2 {
color: #333;
color: var(--text-light);
margin-bottom: 20px;
font-size: 20px;
border-bottom: 2px solid #667eea;
border-bottom: 2px solid var(--primary);
padding-bottom: 10px;
}
@ -101,31 +188,31 @@ h2 {
table {
width: 100%;
border-collapse: collapse;
background-color: white;
background-color: var(--container-bg);
}
th {
background-color: #667eea;
color: white;
background-color: var(--table-header);
color: #fff;
padding: 15px;
text-align: left;
font-weight: 600;
border: 1px solid #5568d3;
border: 1px solid var(--table-header-border);
}
td {
border: 1px solid #e0e0e0;
border: 1px solid var(--input-border);
padding: 12px;
}
tr:hover {
background-color: #f8f9ff;
background-color: var(--table-row-hover);
}
.text-input {
width: 100%;
padding: 8px 12px;
border: 2px solid #e0e0e0;
border: 2px solid var(--input-border);
border-radius: 6px;
box-sizing: border-box;
font-size: 14px;
@ -134,7 +221,7 @@ tr:hover {
.text-input:focus {
outline: none;
border-color: #667eea;
border-color: var(--input-focus);
}
/* Toggle Switch */
@ -197,8 +284,8 @@ input:checked + .slider:before {
.save-btn, .add-btn {
padding: 14px 30px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
background: var(--button-gradient);
color: #fff;
border: none;
border-radius: 8px;
cursor: pointer;
@ -217,13 +304,13 @@ input:checked + .slider:before {
}
.add-btn {
background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
background: var(--button-gradient-alt);
}
.delete-btn {
padding: 8px 12px;
background-color: #f44336;
color: white;
background-color: var(--delete-btn);
color: #fff;
border: none;
border-radius: 6px;
cursor: pointer;
@ -232,7 +319,7 @@ input:checked + .slider:before {
}
.delete-btn:hover {
background-color: #da190b;
background-color: var(--delete-btn-hover);
}
/* Messages */
@ -246,16 +333,16 @@ input:checked + .slider:before {
}
.message.success {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
background-color: var(--success-bg);
color: var(--success-text);
border: 1px solid var(--success-border);
display: block;
}
.message.error {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
background-color: var(--error-bg);
color: var(--error-text);
border: 1px solid var(--error-border);
display: block;
}
@ -263,7 +350,7 @@ input:checked + .slider:before {
.settings-section {
margin-bottom: 40px;
padding: 20px;
background-color: #f9f9f9;
background-color: var(--background-alt);
border-radius: 8px;
}
@ -274,7 +361,7 @@ input:checked + .slider:before {
.form-group label {
display: block;
margin-bottom: 8px;
color: #333;
color: var(--text-light);
font-weight: 500;
}

4
templates/settings.html
View File

@ -27,6 +27,7 @@
<div class="container">
<h1>⚙️ Einstellungen</h1>
<div id="message" class="message"></div>
@ -41,6 +42,9 @@
<option value="ERROR">ERROR</option>
</select>
</div>
<div class="form-group" style="text-align:right;">
<button id="darkmode-toggle" class="add-btn" type="button">🌙 Darkmode umschalten</button>
</div>
</div>
<div class="settings-section">