refactor(settings): Theme-Modal auslagern, Accordion-Sektionen
- Theme-Picker als eigenes Modal mit Header-Button aus Settings entfernt - Background-Optionen (URL + Upload) ins Theme-Modal verschoben - Alle Settings-Sektionen einklappbar mit Chevron-Animation - About und Danger Zone standardmaessig eingeklappt - Suchleisten-Toggle von DATA nach BEHAVIOR verschoben - Quick Save Placeholder-Element entfernt - STYLE_GUIDE.md fuer Theme-System hinzugefuegt
This commit is contained in:
+165
-123
@@ -3,10 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Hellion NewTab</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Inter:wght@300;400;500&display=swap" rel="stylesheet" />
|
||||
<title>Hellion Dashboard</title>
|
||||
<link rel="stylesheet" href="src/css/main.css" />
|
||||
</head>
|
||||
<body>
|
||||
@@ -38,6 +35,10 @@
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
|
||||
Note
|
||||
</button>
|
||||
<button class="btn-icon" id="btnTheme" title="Theme wählen">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2a10 10 0 100 20 4 4 0 01-1-7.9 1 1 0 011-.1h1a2 2 0 002-2V7a5 5 0 00-3-4.5"/><circle cx="7" cy="10" r="1.5"/><circle cx="13" cy="6" r="1.5"/><circle cx="17" cy="10" r="1.5"/><circle cx="9" cy="17" r="1.5"/></svg>
|
||||
Theme
|
||||
</button>
|
||||
<button class="btn-icon" id="btnSettings" title="Einstellungen">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
|
||||
Settings
|
||||
@@ -76,7 +77,7 @@
|
||||
</main>
|
||||
|
||||
<!-- HIDDEN FILE INPUT FOR IMPORT -->
|
||||
<input type="file" id="importInput" accept=".html,.htm" style="display:none" />
|
||||
<input type="file" id="importInput" accept=".html,.htm" class="hidden" />
|
||||
|
||||
<!-- SETTINGS PANEL -->
|
||||
<div class="panel-overlay" id="settingsOverlay"></div>
|
||||
@@ -88,54 +89,12 @@
|
||||
<div class="panel-body">
|
||||
|
||||
<!-- APPEARANCE -->
|
||||
<section class="settings-section">
|
||||
<!-- THEME PICKER -->
|
||||
<h3 class="settings-section-title">THEME</h3>
|
||||
<div class="theme-grid">
|
||||
<div class="theme-card active" data-value="nebula">
|
||||
<img class="theme-card-img" src="assets/themes/bg-nebula.jpg" alt="Nebula" />
|
||||
<span class="theme-card-label">Nebula</span>
|
||||
<span class="theme-card-check">✓</span>
|
||||
</div>
|
||||
<div class="theme-card" data-value="crescent">
|
||||
<img class="theme-card-img" src="assets/themes/bg-crescent.jpg" alt="Crescent" />
|
||||
<span class="theme-card-label">Crescent</span>
|
||||
<span class="theme-card-check">✓</span>
|
||||
</div>
|
||||
<div class="theme-card" data-value="event-horizon">
|
||||
<img class="theme-card-img" src="assets/themes/bg-event-horizon.jpg" alt="Event Horizon" />
|
||||
<span class="theme-card-label">Event Horizon</span>
|
||||
<span class="theme-card-check">✓</span>
|
||||
</div>
|
||||
<div class="theme-card" data-value="merchantman">
|
||||
<img class="theme-card-img" src="assets/themes/bg-merchantman.webp" alt="Merchantman" />
|
||||
<span class="theme-card-label">Merchantman</span>
|
||||
<span class="theme-card-check">✓</span>
|
||||
</div>
|
||||
<div class="theme-card" data-value="julia-jin">
|
||||
<img class="theme-card-img" src="assets/themes/bg-julia-jin.png" alt="Julia & Jin" />
|
||||
<span class="theme-card-label">Julia & Jin</span>
|
||||
<span class="theme-card-check">✓</span>
|
||||
</div>
|
||||
<div class="theme-card" data-value="sc-sunset">
|
||||
<img class="theme-card-img" src="assets/themes/bg-sc-sunset.jpg" alt="SC Sunset" />
|
||||
<span class="theme-card-label">SC Sunset</span>
|
||||
<span class="theme-card-check">✓</span>
|
||||
</div>
|
||||
<div class="theme-card" data-value="hellion-hud">
|
||||
<img class="theme-card-img" src="assets/themes/bg-hellion-hud.png" alt="Hellion HUD" />
|
||||
<span class="theme-card-label">HUD</span>
|
||||
<span class="theme-card-check">✓</span>
|
||||
</div>
|
||||
<div class="theme-card" data-value="hellion-energy">
|
||||
<img class="theme-card-img" src="assets/themes/bg-hellion-energy.jpg" alt="Hellion Energy" />
|
||||
<span class="theme-card-label">Energy</span>
|
||||
<span class="theme-card-check">✓</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="settings-section-title">APPEARANCE</h3>
|
||||
|
||||
<section class="settings-section" data-section="appearance">
|
||||
<button class="settings-section-title" type="button">
|
||||
<span class="section-chevron">▸</span>
|
||||
APPEARANCE
|
||||
</button>
|
||||
<div class="section-content">
|
||||
<div class="setting-row">
|
||||
<div class="setting-info">
|
||||
<span class="setting-label">Compact mode</span>
|
||||
@@ -143,7 +102,6 @@
|
||||
</div>
|
||||
<label class="toggle"><input type="checkbox" id="settingCompact" /><span class="slider"></span></label>
|
||||
</div>
|
||||
|
||||
<div class="setting-row">
|
||||
<div class="setting-info">
|
||||
<span class="setting-label">Shorten long titles</span>
|
||||
@@ -151,35 +109,16 @@
|
||||
</div>
|
||||
<label class="toggle"><input type="checkbox" id="settingShorten" /><span class="slider"></span></label>
|
||||
</div>
|
||||
|
||||
<div class="setting-row">
|
||||
<div class="setting-info">
|
||||
<span class="setting-label">Background image</span>
|
||||
<span class="setting-desc">Custom wallpaper URL or upload</span>
|
||||
</div>
|
||||
<button class="btn-small" id="btnChangeBg">Change</button>
|
||||
</div>
|
||||
|
||||
<div class="setting-row" id="bgInputRow" style="display:none">
|
||||
<input type="text" class="text-input full-width" id="bgUrlInput" placeholder="https://... or leave empty for default" />
|
||||
<button class="btn-small" id="btnApplyBg">Apply</button>
|
||||
</div>
|
||||
|
||||
<div class="setting-row">
|
||||
<div class="setting-info">
|
||||
<span class="setting-label">Background file upload</span>
|
||||
<span class="setting-desc">Use a local image as background</span>
|
||||
</div>
|
||||
<button class="btn-small" id="btnBgFile">Upload</button>
|
||||
<input type="file" id="bgFileInput" accept="image/*" style="display:none" />
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- BEHAVIOR -->
|
||||
<section class="settings-section">
|
||||
<h3 class="settings-section-title">BEHAVIOR</h3>
|
||||
|
||||
<section class="settings-section" data-section="behavior">
|
||||
<button class="settings-section-title" type="button">
|
||||
<span class="section-chevron">▸</span>
|
||||
BEHAVIOR
|
||||
</button>
|
||||
<div class="section-content">
|
||||
<div class="setting-row">
|
||||
<div class="setting-info">
|
||||
<span class="setting-label">Open links in new tab</span>
|
||||
@@ -187,7 +126,6 @@
|
||||
</div>
|
||||
<label class="toggle"><input type="checkbox" id="settingNewTab" checked /><span class="slider"></span></label>
|
||||
</div>
|
||||
|
||||
<div class="setting-row">
|
||||
<div class="setting-info">
|
||||
<span class="setting-label">Show bookmark descriptions</span>
|
||||
@@ -195,7 +133,6 @@
|
||||
</div>
|
||||
<label class="toggle"><input type="checkbox" id="settingShowDesc" /><span class="slider"></span></label>
|
||||
</div>
|
||||
|
||||
<div class="setting-row">
|
||||
<div class="setting-info">
|
||||
<span class="setting-label">Hide extra bookmarks in long boards</span>
|
||||
@@ -203,7 +140,6 @@
|
||||
</div>
|
||||
<label class="toggle"><input type="checkbox" id="settingHideExtra" /><span class="slider"></span></label>
|
||||
</div>
|
||||
|
||||
<div class="setting-row" id="visibleCountRow">
|
||||
<div class="setting-info">
|
||||
<span class="setting-label">Visible bookmarks before hide</span>
|
||||
@@ -215,24 +151,68 @@
|
||||
<option value="20">20</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="setting-row">
|
||||
<div class="setting-info">
|
||||
<span class="setting-label">Quick Save shortcut</span>
|
||||
<span class="setting-desc">Save current page to a board quickly</span>
|
||||
<span class="setting-label">Suchleiste anzeigen</span>
|
||||
<span class="setting-desc">Suchleiste unter dem Header ein/aus</span>
|
||||
</div>
|
||||
<span class="setting-badge" id="quickSaveBadge">Not set</span>
|
||||
<label class="toggle"><input type="checkbox" id="settingShowSearch" checked /><span class="slider"></span></label>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- DATA -->
|
||||
<section class="settings-section" data-section="data">
|
||||
<button class="settings-section-title" type="button">
|
||||
<span class="section-chevron">▸</span>
|
||||
DATA
|
||||
</button>
|
||||
<div class="section-content">
|
||||
<div class="setting-row">
|
||||
<div class="setting-info">
|
||||
<span class="setting-label">Export Boards</span>
|
||||
<span class="setting-desc">Alle Boards als JSON sichern</span>
|
||||
</div>
|
||||
<button class="btn-small" id="btnExportJSON">Export</button>
|
||||
</div>
|
||||
<div class="setting-row">
|
||||
<div class="setting-info">
|
||||
<span class="setting-label">Import Boards</span>
|
||||
<span class="setting-desc">JSON-Backup wiederherstellen</span>
|
||||
</div>
|
||||
<button class="btn-small" id="btnImportJSON">Import</button>
|
||||
<input type="file" id="jsonImportInput" accept=".json" class="hidden" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- HELP -->
|
||||
<section class="settings-section" data-section="help">
|
||||
<button class="settings-section-title" type="button">
|
||||
<span class="section-chevron">▸</span>
|
||||
HELP
|
||||
</button>
|
||||
<div class="section-content">
|
||||
<div class="setting-row">
|
||||
<div class="setting-info">
|
||||
<span class="setting-label">Onboarding wiederholen</span>
|
||||
<span class="setting-desc">Willkommens-Tour erneut anzeigen</span>
|
||||
</div>
|
||||
<button class="btn-small" id="btnRestartOnboarding">Start</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ABOUT / IMPRESSUM -->
|
||||
<section class="settings-section">
|
||||
<h3 class="settings-section-title">ABOUT</h3>
|
||||
|
||||
<section class="settings-section" data-section="about">
|
||||
<button class="settings-section-title" type="button">
|
||||
<span class="section-chevron">▸</span>
|
||||
ABOUT
|
||||
</button>
|
||||
<div class="section-content">
|
||||
<div class="about-block">
|
||||
<div class="about-logo">⬡ HELLION NEWTAB</div>
|
||||
<div class="about-version">Version 1.2.0 · by Hellion Online Media</div>
|
||||
<div class="about-version">Version 1.5.2 · by Hellion Online Media</div>
|
||||
|
||||
<div class="about-links">
|
||||
<a href="https://hellion-media.de/impressum" target="_blank" class="about-link">
|
||||
@@ -257,7 +237,7 @@
|
||||
</div>
|
||||
<div class="about-info-row">
|
||||
<span class="about-info-label">Lizenz</span>
|
||||
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" class="about-info-value" style="color:var(--text-secondary);text-decoration:none">CC BY-NC-SA 4.0</a>
|
||||
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" class="about-info-value about-link-subtle">CC BY-NC-SA 4.0</a>
|
||||
</div>
|
||||
<div class="about-info-row">
|
||||
<span class="about-info-label">Datenspeicherung</span>
|
||||
@@ -267,7 +247,7 @@
|
||||
<div class="about-divider"></div>
|
||||
|
||||
<div class="about-bugreport">
|
||||
<span class="about-info-label" style="display:block;margin-bottom:6px">Bug Report / Feedback</span>
|
||||
<span class="about-info-label about-info-label-block">Bug Report / Feedback</span>
|
||||
<a href="mailto:kontakt@hellion-media.de?subject=Hellion NewTab – Bug Report" class="about-link-mail">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
|
||||
kontakt@hellion-media.de
|
||||
@@ -275,7 +255,7 @@
|
||||
</div>
|
||||
|
||||
<div class="about-browsers">
|
||||
<span class="about-info-label" style="display:block;margin-bottom:6px">Kompatible Browser</span>
|
||||
<span class="about-info-label about-info-label-block">Kompatible Browser</span>
|
||||
<div class="about-browser-tags">
|
||||
<span class="browser-tag">Chrome</span>
|
||||
<span class="browser-tag">Edge</span>
|
||||
@@ -287,38 +267,16 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- DATA -->
|
||||
<section class="settings-section">
|
||||
<h3 class="settings-section-title">DATA</h3>
|
||||
<div class="setting-row">
|
||||
<div class="setting-info">
|
||||
<span class="setting-label">Export Boards</span>
|
||||
<span class="setting-desc">Alle Boards als JSON sichern</span>
|
||||
</div>
|
||||
<button class="btn-small" id="btnExportJSON">Export</button>
|
||||
</div>
|
||||
<div class="setting-row">
|
||||
<div class="setting-info">
|
||||
<span class="setting-label">Import Boards</span>
|
||||
<span class="setting-desc">JSON-Backup wiederherstellen</span>
|
||||
</div>
|
||||
<button class="btn-small" id="btnImportJSON">Import</button>
|
||||
<input type="file" id="jsonImportInput" accept=".json" style="display:none" />
|
||||
</div>
|
||||
<div class="setting-row">
|
||||
<div class="setting-info">
|
||||
<span class="setting-label">Suchleiste anzeigen</span>
|
||||
<span class="setting-desc">Suchleiste unter dem Header ein/aus</span>
|
||||
</div>
|
||||
<label class="toggle"><input type="checkbox" id="settingShowSearch" checked /><span class="slider"></span></label>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- DANGER ZONE -->
|
||||
<section class="settings-section">
|
||||
<h3 class="settings-section-title danger">DANGER ZONE</h3>
|
||||
<section class="settings-section" data-section="danger">
|
||||
<button class="settings-section-title danger" type="button">
|
||||
<span class="section-chevron">▸</span>
|
||||
DANGER ZONE
|
||||
</button>
|
||||
<div class="section-content">
|
||||
<div class="setting-row">
|
||||
<div class="setting-info">
|
||||
<span class="setting-label">Reset all data</span>
|
||||
@@ -326,11 +284,86 @@
|
||||
</div>
|
||||
<button class="btn-danger" id="btnResetAll">Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- THEME PICKER MODAL -->
|
||||
<div class="modal-overlay" id="themeOverlay">
|
||||
<div class="theme-modal" id="themeModal">
|
||||
<div class="modal-header">
|
||||
<span>Theme wählen</span>
|
||||
<button class="btn-close" id="btnCloseTheme">✕</button>
|
||||
</div>
|
||||
<div class="theme-grid">
|
||||
<div class="theme-card active" data-value="nebula">
|
||||
<img class="theme-card-img" src="assets/themes/bg-nebula.jpg" alt="Nebula" />
|
||||
<span class="theme-card-label">Nebula</span>
|
||||
<span class="theme-card-check">✓</span>
|
||||
</div>
|
||||
<div class="theme-card" data-value="crescent">
|
||||
<img class="theme-card-img" src="assets/themes/bg-crescent.jpg" alt="Crescent" />
|
||||
<span class="theme-card-label">Crescent</span>
|
||||
<span class="theme-card-check">✓</span>
|
||||
</div>
|
||||
<div class="theme-card" data-value="event-horizon">
|
||||
<img class="theme-card-img" src="assets/themes/bg-event-horizon.jpg" alt="Event Horizon" />
|
||||
<span class="theme-card-label">Event Horizon</span>
|
||||
<span class="theme-card-check">✓</span>
|
||||
</div>
|
||||
<div class="theme-card" data-value="merchantman">
|
||||
<img class="theme-card-img" src="assets/themes/bg-merchantman.webp" alt="Merchantman" />
|
||||
<span class="theme-card-label">Merchantman</span>
|
||||
<span class="theme-card-check">✓</span>
|
||||
</div>
|
||||
<div class="theme-card" data-value="julia-jin">
|
||||
<img class="theme-card-img" src="assets/themes/bg-julia-jin.png" alt="Julia & Jin" />
|
||||
<span class="theme-card-label">Julia & Jin</span>
|
||||
<span class="theme-card-check">✓</span>
|
||||
</div>
|
||||
<div class="theme-card" data-value="sc-sunset">
|
||||
<img class="theme-card-img" src="assets/themes/bg-sc-sunset.jpg" alt="SC Sunset" />
|
||||
<span class="theme-card-label">SC Sunset</span>
|
||||
<span class="theme-card-check">✓</span>
|
||||
</div>
|
||||
<div class="theme-card" data-value="hellion-hud">
|
||||
<img class="theme-card-img" src="assets/themes/bg-hellion-hud.png" alt="Hellion HUD" />
|
||||
<span class="theme-card-label">HUD</span>
|
||||
<span class="theme-card-check">✓</span>
|
||||
</div>
|
||||
<div class="theme-card" data-value="hellion-energy">
|
||||
<img class="theme-card-img" src="assets/themes/bg-hellion-energy.jpg" alt="Hellion Energy" />
|
||||
<span class="theme-card-label">Energy</span>
|
||||
<span class="theme-card-check">✓</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="theme-modal-section">
|
||||
<h3 class="settings-section-title">BACKGROUND</h3>
|
||||
<div class="setting-row">
|
||||
<div class="setting-info">
|
||||
<span class="setting-label">Background image URL</span>
|
||||
<span class="setting-desc">Custom wallpaper URL</span>
|
||||
</div>
|
||||
<button class="btn-small" id="btnChangeBg">Change</button>
|
||||
</div>
|
||||
<div class="setting-row hidden" id="bgInputRow">
|
||||
<input type="text" class="text-input full-width" id="bgUrlInput" placeholder="https://... or leave empty for default" />
|
||||
<button class="btn-small" id="btnApplyBg">Apply</button>
|
||||
</div>
|
||||
<div class="setting-row">
|
||||
<div class="setting-info">
|
||||
<span class="setting-label">Background file upload</span>
|
||||
<span class="setting-desc">Use a local image as background</span>
|
||||
</div>
|
||||
<button class="btn-small" id="btnBgFile">Upload</button>
|
||||
<input type="file" id="bgFileInput" accept="image/*" class="hidden" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ADD BOARD MODAL -->
|
||||
<div class="modal-overlay" id="addBoardOverlay">
|
||||
<div class="modal">
|
||||
@@ -356,8 +389,8 @@
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<input type="text" class="text-input full-width" id="newBmTitle" placeholder="Title..." maxlength="60" />
|
||||
<input type="url" class="text-input full-width" id="newBmUrl" placeholder="https://..." style="margin-top:8px" />
|
||||
<input type="text" class="text-input full-width" id="newBmDesc" placeholder="Description (optional)" style="margin-top:8px" />
|
||||
<input type="url" class="text-input full-width modal-input-spaced" id="newBmUrl" placeholder="https://..." />
|
||||
<input type="text" class="text-input full-width modal-input-spaced" id="newBmDesc" placeholder="Description (optional)" />
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn-primary" id="btnConfirmBookmark">Add</button>
|
||||
@@ -381,10 +414,17 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ONBOARDING -->
|
||||
<div class="dialog-overlay" id="onboardingOverlay">
|
||||
<div class="onboarding-modal" id="onboardingModal"></div>
|
||||
</div>
|
||||
|
||||
<!-- Storage muss zuerst -->
|
||||
<script src="src/js/storage.js"></script>
|
||||
<!-- State & Hilfsfunktionen -->
|
||||
<script src="src/js/state.js"></script>
|
||||
<!-- Dialog-System (vor Features, wird überall gebraucht) -->
|
||||
<script src="src/js/dialog.js"></script>
|
||||
<!-- Theme-System -->
|
||||
<script src="src/js/themes.js"></script>
|
||||
<!-- Features -->
|
||||
@@ -394,6 +434,8 @@
|
||||
<script src="src/js/search.js"></script>
|
||||
<script src="src/js/sticky.js"></script>
|
||||
<script src="src/js/data.js"></script>
|
||||
<!-- Onboarding -->
|
||||
<script src="src/js/onboarding.js"></script>
|
||||
<!-- Einstiegspunkt zuletzt -->
|
||||
<script src="src/js/app.js"></script>
|
||||
</body>
|
||||
|
||||
@@ -0,0 +1,101 @@
|
||||
# ⬡ Hellion Dashboard — Design & Theme-System
|
||||
|
||||
Leitfaden für das visuelle Design des Hellion Dashboards. Definiert wie Themes aufgebaut
|
||||
sind und welche Patterns konsistent eingehalten werden — für eine immersive, fokussierte
|
||||
Nutzererfahrung.
|
||||
|
||||
---
|
||||
|
||||
## Design-Säulen
|
||||
|
||||
| Säule | Beschreibung |
|
||||
|---|---|
|
||||
| **Immersion** | Das Interface wirkt wie ein HUD das über der Szenerie schwebt — kein Fremdkörper |
|
||||
| **Visual Clarity** | Gezielter `blur`-Einsatz trennt UI und Hintergrundbild — reduziert Reizüberflutung |
|
||||
| **Harmonie** | Jedes Theme zieht seine Farben aus den dominanten Lichtquellen des Hintergrundbildes |
|
||||
|
||||
---
|
||||
|
||||
## Anatomie eines Themes
|
||||
|
||||
Jedes Theme folgt dieser Variablen-Struktur in `main.css`.
|
||||
Für ein neues Theme diesen Block kopieren und anpassen:
|
||||
|
||||
```css
|
||||
[data-theme="dein-theme-name"] {
|
||||
/* 1. AKZENTE — Die Lichtquelle */
|
||||
--accent: #HEXCODE; /* Hauptfarbe (Neon/Licht) */
|
||||
--accent-dim: rgba(R, G, B, 0.12); /* Subtiler Hintergrund */
|
||||
--accent-glow: rgba(R, G, B, 0.08); /* Glow für Logo & Uhr */
|
||||
--border-accent: rgba(R, G, B, 0.25); /* Fokus-Rahmen */
|
||||
|
||||
/* 2. BASIS — Das Fundament */
|
||||
--bg-primary: #HEXCODE; /* Dunkelster Punkt im Bild */
|
||||
--bg-board: rgba(R, G, B, 0.55); /* Glas-Effekt der Boards */
|
||||
|
||||
/* 3. TEXT — Kontrast */
|
||||
--text-primary: #FFFFFF; /* Klar lesbar, leicht getönt */
|
||||
--text-secondary: #A0A0A0; /* Entsättigt für weniger Rauschen */
|
||||
|
||||
/* 4. OVERLAY — Vignette */
|
||||
--overlay-bg: radial-gradient(
|
||||
circle at center,
|
||||
transparent 0%,
|
||||
var(--bg-primary) 100%
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## UI-Patterns
|
||||
|
||||
### Frosted Glass
|
||||
|
||||
Hardware-beschleunigter Blur für Lesbarkeit auf komplexen Hintergründen:
|
||||
|
||||
```css
|
||||
backdrop-filter: blur(8px);
|
||||
```
|
||||
|
||||
Erzeugt Tiefe und visuelle Ruhe hinter Text und UI-Elementen.
|
||||
|
||||
### Typografie-Hierarchie
|
||||
|
||||
| Font | Einsatz |
|
||||
|---|---|
|
||||
| **Rajdhani** | Display — Uhr, Titel, Logo. Alles was nach "System" aussieht |
|
||||
| **Inter** | Body — Bookmark-Titel, Listen, interaktive Elemente |
|
||||
| **Cinzel** | Fantasy — Exklusiv für Themes mit majestätischem oder antikem Vibe (Crescent, Julia & Jin) |
|
||||
|
||||
---
|
||||
|
||||
## Theme-Übersicht
|
||||
|
||||
| Theme | Akzentfarbe | Stimmung |
|
||||
|---|---|---|
|
||||
| Nebula | `#b359ff` Magenta | Chill, Cosmic |
|
||||
| Crescent | `#d4bd8a` Gold | Luxury, Night |
|
||||
| Event Horizon | `#9d5cff` Purple | Deep Space, Void |
|
||||
| Merchantman | `#2eb8b8` Emerald | Industrial, Alien |
|
||||
| Julia & Jin | `#7db3ff` Aetherial Blue | FFXIV Night |
|
||||
| SC Sunset | `#ff8c3d` Amber | Emotional, Horizon |
|
||||
| Hellion HUD | `#32ff6a` Neon Green | Tactical, Admin |
|
||||
| Hellion Energy | `#1eff8e` Acid Green | Overdrive, Power |
|
||||
|
||||
---
|
||||
|
||||
## ADHS-Optimierung
|
||||
|
||||
Bei Hintergrundbildern mit vielen Details (z.B. Julia & Jin) den Board-Alpha erhöhen
|
||||
und den Blur verstärken — das dimmt das Hintergrundrauschen und lässt das Gehirn
|
||||
schneller die relevanten Informationen erfassen:
|
||||
|
||||
```css
|
||||
--bg-board: rgba(R, G, B, 0.65);
|
||||
backdrop-filter: blur(12px);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Entwickelt von **[Hellion Online Media — Florian Wathling](https://hellion-media.de)** — JonKazama-Hellion
|
||||
+437
-155
@@ -1,22 +1,60 @@
|
||||
/* =============================================
|
||||
HELLION NEWTAB — Theme System
|
||||
Themes: nebula | crescent | event-horizon
|
||||
HELLION Dashboard — Theme System
|
||||
Themes: nebula | crescent | event-horizon | merchantman | julia-jin | sc-sunset | hellion-hud | hellion-energy
|
||||
============================================= */
|
||||
/* =============================================
|
||||
Lokale Schriftarten
|
||||
(für schnelleren Zugriff und Offline-Verfügbarkeit sowie DSGVO-Konformität)
|
||||
- Rajdhani: Hauptschriftart für Überschriften und UI-Elemente
|
||||
- Inter: Fließtext und allgemeine Lesbarkeit
|
||||
- Cinzel: Alternative Display-Schriftart für bestimmte Themes
|
||||
============================================= */
|
||||
/* Rajdhani - Lokal */
|
||||
@font-face {
|
||||
font-family: 'Rajdhani';
|
||||
src: url('../../assets/fonts/Rajdhani-Regular.woff2') format('woff2');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Inter:wght@300;400;500&family=Cinzel:wght@400;600&display=swap');
|
||||
@font-face {
|
||||
font-family: 'Rajdhani';
|
||||
src: url('../../assets/fonts/Rajdhani-Bold.woff2') format('woff2');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* Inter - Lokal */
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('../../assets/fonts/Inter-VariableFont_opsz,wght.woff2') format('woff2');
|
||||
font-weight: 300 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* Cinzel - Lokal */
|
||||
@font-face {
|
||||
font-family: 'Cinzel';
|
||||
src: url('../../assets/fonts/Cinzel-VariableFont_wght.woff2') format('woff2');
|
||||
font-weight: 400 900;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
/* ---- BASE VARIABLES (Nebula = Default) ---- */
|
||||
:root {
|
||||
--accent: #d65cff;
|
||||
--accent-dim: rgba(214, 92, 255, 0.15);
|
||||
--accent-glow: rgba(214, 92, 255, 0.08);
|
||||
--border-accent: rgba(214, 92, 255, 0.35);
|
||||
--bg-primary: #0a060e;
|
||||
--bg-board: rgba(12, 8, 18, 0.48);
|
||||
--accent: #b359ff;
|
||||
--accent-dim: rgba(179, 89, 255, 0.12);
|
||||
--accent-glow: rgba(179, 89, 255, 0.05);
|
||||
--border-accent: rgba(179, 92, 255, 0.25);
|
||||
--bg-primary: #050308;
|
||||
--bg-board: rgba(10, 6, 14, 0.55);
|
||||
--border: rgba(255, 255, 255, 0.06);
|
||||
--text-primary: #e0d8f0;
|
||||
--text-secondary: #8a7a9e;
|
||||
--text-muted: #4a3860;
|
||||
--text-primary: #e5dff2;
|
||||
--text-secondary: #a395b8;
|
||||
--text-muted: #5a4a75;
|
||||
--danger: #e05555;
|
||||
--font-display: 'Rajdhani', sans-serif;
|
||||
--font-body: 'Inter', sans-serif;
|
||||
@@ -25,34 +63,34 @@
|
||||
--board-width: 240px;
|
||||
--spacing: 10px;
|
||||
--spacing-compact: 5px;
|
||||
--overlay-bg: linear-gradient(180deg, rgba(10,6,14,0.85) 0%, rgba(10,6,14,0.42) 45%, rgba(10,6,14,0.90) 100%);
|
||||
--overlay-bg: radial-gradient(circle at center, rgba(10,6,14,0.3) 0%, rgba(5,3,8,0.85) 100%);
|
||||
--header-bg: rgba(10,6,14,0.90);
|
||||
--board-hover-border: rgba(214,92,255,0.22);
|
||||
--board-hover-border: rgba(179,89,255,0.18);
|
||||
--toggle-on-bg: rgba(214,92,255,0.22);
|
||||
--logo-shadow: rgba(214,92,255,0.45);
|
||||
--logo-shadow: rgba(179,89,255,0.35);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
THEME: NEBULA (magenta / cosmic nebula)
|
||||
============================================ */
|
||||
[data-theme="nebula"] {
|
||||
--accent: #d65cff;
|
||||
--accent-dim: rgba(214, 92, 255, 0.14);
|
||||
--accent-glow: rgba(214, 92, 255, 0.06);
|
||||
--border-accent: rgba(214, 92, 255, 0.32);
|
||||
--bg-primary: #0a060e;
|
||||
--bg-board: rgba(12, 8, 18, 0.48);
|
||||
--accent: #b359ff;
|
||||
--accent-dim: rgba(179, 89, 255, 0.12);
|
||||
--accent-glow: rgba(179, 89, 255, 0.05);
|
||||
--border-accent: rgba(179, 92, 255, 0.25);
|
||||
--bg-primary: #050308;
|
||||
--bg-board: rgba(10, 6, 14, 0.55);
|
||||
--border: rgba(255, 255, 255, 0.055);
|
||||
--text-primary: #e0d8f0;
|
||||
--text-secondary: #8a7a9e;
|
||||
--text-muted: #4a3860;
|
||||
--text-primary: #e5dff2;
|
||||
--text-secondary: #a395b8;
|
||||
--text-muted: #5a4a75;
|
||||
--font-display: 'Rajdhani', sans-serif;
|
||||
--font-body: 'Inter', sans-serif;
|
||||
--overlay-bg: linear-gradient(180deg, rgba(10,6,14,0.88) 0%, rgba(10,6,14,0.35) 45%, rgba(10,6,14,0.92) 100%);
|
||||
--overlay-bg: radial-gradient(circle at center, rgba(10,6,14,0.3) 0%, rgba(5,3,8,0.85) 100%);
|
||||
--header-bg: rgba(10,6,14,0.92);
|
||||
--board-hover-border: rgba(214,92,255,0.22);
|
||||
--board-hover-border: rgba(179,89,255,0.18);
|
||||
--toggle-on-bg: rgba(214,92,255,0.22);
|
||||
--logo-shadow: rgba(214,92,255,0.50);
|
||||
--logo-shadow: rgba(179,89,255,0.35);
|
||||
}
|
||||
[data-theme="nebula"] .board { border-color: rgba(214,92,255,0.10); }
|
||||
[data-theme="nebula"] .bm-item:hover { background: rgba(214,92,255,0.05); }
|
||||
@@ -61,23 +99,24 @@
|
||||
THEME: CRESCENT (gold / minimalist night)
|
||||
============================================ */
|
||||
[data-theme="crescent"] {
|
||||
--accent: #c8a84a;
|
||||
--accent-dim: rgba(200, 168, 74, 0.16);
|
||||
--accent-glow: rgba(200, 168, 74, 0.07);
|
||||
--border-accent: rgba(200, 168, 74, 0.35);
|
||||
--bg-primary: #080a12;
|
||||
--bg-board: rgba(10, 14, 26, 0.50);
|
||||
--border: rgba(200, 168, 74, 0.09);
|
||||
--text-primary: #d8dce8;
|
||||
--text-secondary: #6a7090;
|
||||
--text-muted: #363c55;
|
||||
--accent: #d4bd8a;
|
||||
--accent-dim: rgba(212, 189, 138, 0.12);
|
||||
--accent-glow: rgba(212, 189, 138, 0.05);
|
||||
--border-accent: rgba(212, 189, 138, 0.25);
|
||||
--bg-primary: #06080f;
|
||||
--bg-board: rgba(8, 12, 22, 0.45);
|
||||
--border: rgba(212, 189, 138, 0.10);
|
||||
--text-primary: #e2e6f0;
|
||||
--text-secondary: #7a84a5;
|
||||
--text-muted: #3d4563;
|
||||
--font-display: 'Cinzel', serif;
|
||||
--font-body: 'Inter', sans-serif;
|
||||
--overlay-bg: linear-gradient(180deg, rgba(8,10,18,0.88) 0%, rgba(8,10,18,0.30) 50%, rgba(8,10,18,0.92) 100%);
|
||||
--header-bg: rgba(8,10,18,0.93);
|
||||
--board-hover-border: rgba(200,168,74,0.26);
|
||||
--overlay-bg: radial-gradient(circle at center, rgba(6,8,15,0.2) 0%, rgba(6,8,15,0.9) 100%);
|
||||
--header-bg: rgba(6,8,15,0.95);
|
||||
--board-hover-border: rgba(212, 189, 138, 0.20);
|
||||
--toggle-on-bg: rgba(200,168,74,0.22);
|
||||
--logo-shadow: rgba(200,168,74,0.55);
|
||||
--logo-shadow: rgba(212, 189, 138, 0.40);
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
[data-theme="crescent"] .logo { font-family: 'Cinzel', serif; letter-spacing: 4px; }
|
||||
@@ -87,158 +126,177 @@
|
||||
[data-theme="crescent"] .board { border-color: rgba(200,168,74,0.10); }
|
||||
|
||||
/* ============================================
|
||||
THEME: EVENT HORIZON (orange-violet / deep space)
|
||||
THEME: EVENT HORIZON (Cosmic Purple / deep space)
|
||||
============================================ */
|
||||
[data-theme="event-horizon"] {
|
||||
--accent: #e08030;
|
||||
--accent-dim: rgba(224, 128, 48, 0.15);
|
||||
--accent-glow: rgba(224, 128, 48, 0.07);
|
||||
--border-accent: rgba(224, 128, 48, 0.35);
|
||||
--bg-primary: #06050c;
|
||||
--bg-board: rgba(8, 6, 16, 0.52);
|
||||
--border: rgba(224, 128, 48, 0.08);
|
||||
--text-primary: #d8d0e8;
|
||||
--text-secondary: #7a6898;
|
||||
--text-muted: #3c3058;
|
||||
--accent: #9d5cff;
|
||||
--accent-dim: rgba(157, 92, 255, 0.12);
|
||||
--accent-glow: rgba(157, 92, 255, 0.08);
|
||||
--border-accent: rgba(157, 92, 255, 0.28);
|
||||
--bg-primary: #040308;
|
||||
--bg-board: rgba(8, 5, 15, 0.45);
|
||||
--border: rgba(157, 92, 255, 0.12);
|
||||
--text-primary: #e6e0f5;
|
||||
--text-secondary: #9284b0;
|
||||
--text-muted: #4a3d66;
|
||||
--font-display: 'Rajdhani', sans-serif;
|
||||
--font-body: 'Inter', sans-serif;
|
||||
--overlay-bg: linear-gradient(180deg, rgba(6,5,12,0.90) 0%, rgba(6,5,12,0.38) 50%, rgba(6,5,12,0.94) 100%);
|
||||
--header-bg: rgba(6,5,12,0.93);
|
||||
--board-hover-border: rgba(224,128,48,0.26);
|
||||
--overlay-bg: radial-gradient(circle at center, rgba(4,3,8,0.2) 0%, rgba(4,3,8,0.95) 100%);
|
||||
--header-bg: rgba(4,3,8,0.96);
|
||||
--board-hover-border: rgba(157, 92, 255, 0.22);
|
||||
--toggle-on-bg: rgba(224,128,48,0.22);
|
||||
--logo-shadow: rgba(224,128,48,0.55);
|
||||
--logo-shadow: rgba(157, 92, 255, 0.45);
|
||||
}
|
||||
[data-theme="event-horizon"] .board { border-color: rgba(224,128,48,0.10); }
|
||||
[data-theme="event-horizon"] .bm-item:hover { background: rgba(224,128,48,0.05); }
|
||||
[data-theme="event-horizon"] .board { border-color: rgba(157, 92, 255, 0.15); }
|
||||
[data-theme="event-horizon"] .bm-item:hover { background: rgba(157, 92, 255, 0.08); }
|
||||
|
||||
|
||||
/* ============================================
|
||||
THEME: MERCHANTMAN (teal / industrial sci-fi)
|
||||
THEME: MERCHANTMAN (Emerald / industrial sci-fi)
|
||||
============================================ */
|
||||
[data-theme="merchantman"] {
|
||||
--accent: #4ecfcf;
|
||||
--accent-dim: rgba(78, 207, 207, 0.14);
|
||||
--accent-glow: rgba(78, 207, 207, 0.07);
|
||||
--border-accent: rgba(78, 207, 207, 0.32);
|
||||
--bg-primary: #060d0d;
|
||||
--bg-board: rgba(6, 14, 16, 0.50);
|
||||
--border: rgba(78, 207, 207, 0.09);
|
||||
--text-primary: #c8e8e8;
|
||||
--text-secondary: #5a8888;
|
||||
--text-muted: #2e5050;
|
||||
--accent: #2eb8b8;
|
||||
--accent-dim: rgba(46, 184, 184, 0.12);
|
||||
--accent-glow: rgba(46, 184, 184, 0.06);
|
||||
--border-accent: rgba(46, 184, 184, 0.25);
|
||||
--bg-primary: #040808;
|
||||
--bg-board: rgba(6, 10, 10, 0.58);
|
||||
--border: rgba(46, 184, 184, 0.10);
|
||||
--text-primary: #d1e8e8;
|
||||
--text-secondary: #6a8f8f;
|
||||
--text-muted: #344f4f;
|
||||
--font-display: 'Rajdhani', sans-serif;
|
||||
--font-body: 'Inter', sans-serif;
|
||||
--overlay-bg: linear-gradient(160deg, rgba(6,13,13,0.88) 0%, rgba(6,13,13,0.40) 50%, rgba(6,13,13,0.92) 100%);
|
||||
--header-bg: rgba(6,13,13,0.93);
|
||||
--board-hover-border: rgba(78,207,207,0.26);
|
||||
--overlay-bg: radial-gradient(circle at 30% 40%, rgba(4,8,8,0.2) 0%, rgba(4,8,8,0.92) 100%);
|
||||
--header-bg: rgba(4,8,8,0.95);
|
||||
--board-hover-border: rgba(46, 184, 184, 0.20);
|
||||
--toggle-on-bg: rgba(78,207,207,0.22);
|
||||
--logo-shadow: rgba(78,207,207,0.55);
|
||||
--logo-shadow: rgba(46, 184, 184, 0.45);
|
||||
}
|
||||
[data-theme="merchantman"] .board { border-color: rgba(78,207,207,0.10); }
|
||||
[data-theme="merchantman"] .bm-item:hover { background: rgba(78,207,207,0.05); }
|
||||
[data-theme="merchantman"] .board { border-color: rgba(46, 184, 184, 0.12); }
|
||||
[data-theme="merchantman"] .bm-item:hover { background: rgba(46, 184, 184, 0.06); }
|
||||
|
||||
/* ============================================
|
||||
THEME: JULIA & JIN (blue night / FFXIV)
|
||||
THEME: JULIA & JIN (Aetherial Night / FFXIV)
|
||||
============================================ */
|
||||
[data-theme="julia-jin"] {
|
||||
--accent: #5b9fff;
|
||||
--accent-dim: rgba(91, 159, 255, 0.15);
|
||||
--accent-glow: rgba(91, 159, 255, 0.07);
|
||||
--border-accent: rgba(91, 159, 255, 0.35);
|
||||
--bg-primary: #06080f;
|
||||
--bg-board: rgba(8, 12, 26, 0.52);
|
||||
--border: rgba(91, 159, 255, 0.09);
|
||||
--text-primary: #ccd8f8;
|
||||
--text-secondary: #5c72a8;
|
||||
--text-muted: #2e3a60;
|
||||
--accent: #7db3ff;
|
||||
--accent-dim: rgba(125, 179, 255, 0.12);
|
||||
--accent-glow: rgba(125, 179, 255, 0.08);
|
||||
--border-accent: rgba(125, 179, 255, 0.30);
|
||||
--bg-primary: #03050a;
|
||||
--bg-board: rgba(7, 10, 20, 0.60);
|
||||
--border: rgba(125, 179, 255, 0.12);
|
||||
--text-primary: #eef2ff;
|
||||
--text-secondary: #8ba0d1;
|
||||
--text-muted: #465685;
|
||||
--font-display: 'Cinzel', serif;
|
||||
--font-body: 'Inter', sans-serif;
|
||||
--overlay-bg: linear-gradient(180deg, rgba(6,8,15,0.85) 0%, rgba(6,8,15,0.38) 50%, rgba(6,8,15,0.90) 100%);
|
||||
--header-bg: rgba(6,8,15,0.92);
|
||||
--board-hover-border: rgba(91,159,255,0.26);
|
||||
--overlay-bg: linear-gradient(180deg, rgba(3,5,10,0.85) 0%, rgba(3,5,10,0.25) 50%, rgba(3,5,10,0.92) 100%);
|
||||
--header-bg: rgba(3,5,10,0.94);
|
||||
--board-hover-border: rgba(125, 179, 255, 0.22);
|
||||
--toggle-on-bg: rgba(91,159,255,0.22);
|
||||
--logo-shadow: rgba(91,159,255,0.55);
|
||||
--logo-shadow: rgba(125, 179, 255, 0.50);
|
||||
}
|
||||
[data-theme="julia-jin"] .logo { font-family: 'Cinzel', serif; letter-spacing: 4px; }
|
||||
[data-theme="julia-jin"] .clock { font-family: 'Cinzel', serif; }
|
||||
[data-theme="julia-jin"] .board-title { letter-spacing: 2px; }
|
||||
[data-theme="julia-jin"] .board { border-color: rgba(91,159,255,0.10); }
|
||||
[data-theme="julia-jin"] .bm-item:hover { background: rgba(91,159,255,0.06); }
|
||||
[data-theme="julia-jin"] .logo { font-family: 'Cinzel', serif; letter-spacing: 5px; text-transform: uppercase; }
|
||||
[data-theme="julia-jin"] .clock { font-family: 'Cinzel', serif; font-weight: 600; }
|
||||
[data-theme="julia-jin"] .board-title { letter-spacing: 2px; font-weight: 500; }
|
||||
[data-theme="julia-jin"] .board { border-color: rgba(125, 179, 255, 0.15); backdrop-filter: blur(4px); }
|
||||
[data-theme="julia-jin"] .bm-item:hover { background: rgba(125, 179, 255, 0.08); }
|
||||
|
||||
/* ============================================
|
||||
THEME: SC SUNSET (amber / planet-side)
|
||||
THEME: SC Sunset - Horizon Glow
|
||||
============================================ */
|
||||
[data-theme="sc-sunset"] {
|
||||
--accent: #f07c30;
|
||||
--accent-dim: rgba(240, 124, 48, 0.15);
|
||||
--accent-glow: rgba(240, 124, 48, 0.07);
|
||||
--border-accent: rgba(240, 124, 48, 0.35);
|
||||
--bg-primary: #0c0805;
|
||||
--bg-board: rgba(18, 10, 5, 0.50);
|
||||
--border: rgba(240, 124, 48, 0.09);
|
||||
--text-primary: #f0dcc8;
|
||||
--text-secondary: #906050;
|
||||
--text-muted: #503828;
|
||||
--accent: #ff8c3d;
|
||||
--accent-dim: rgba(255, 140, 61, 0.12);
|
||||
--accent-glow: rgba(255, 140, 61, 0.08);
|
||||
--border-accent: rgba(255, 140, 61, 0.28);
|
||||
--bg-primary: #080503;
|
||||
--bg-board: rgba(15, 10, 8, 0.55);
|
||||
--border: rgba(255, 140, 61, 0.10);
|
||||
--text-primary: #fce8d5;
|
||||
--text-secondary: #b08568;
|
||||
--text-muted: #634a3a;
|
||||
--font-display: 'Rajdhani', sans-serif;
|
||||
--font-body: 'Inter', sans-serif;
|
||||
--overlay-bg: linear-gradient(180deg, rgba(12,8,5,0.90) 0%, rgba(12,8,5,0.35) 50%, rgba(12,8,5,0.92) 100%);
|
||||
--header-bg: rgba(12,8,5,0.93);
|
||||
--board-hover-border: rgba(240,124,48,0.26);
|
||||
--overlay-bg: radial-gradient(circle at 50% 60%, rgba(8,5,3,0.1) 0%, rgba(8,5,3,0.92) 100%);
|
||||
--header-bg: rgba(8,5,3,0.94);
|
||||
--board-hover-border: rgba(255, 140, 61, 0.22);
|
||||
--toggle-on-bg: rgba(240,124,48,0.22);
|
||||
--logo-shadow: rgba(240,124,48,0.55);
|
||||
--logo-shadow: rgba(255, 140, 61, 0.45);
|
||||
}
|
||||
[data-theme="sc-sunset"] .board { border-color: rgba(240,124,48,0.10); }
|
||||
[data-theme="sc-sunset"] .bm-item:hover { background: rgba(240,124,48,0.05); }
|
||||
[data-theme="sc-sunset"] .board {
|
||||
border-color: rgba(255, 140, 61, 0.15);
|
||||
backdrop-filter: blur(6px);}
|
||||
[data-theme="sc-sunset"] .bm-item:hover {
|
||||
background: rgba(255, 140, 61, 0.08); }
|
||||
|
||||
/* ============================================
|
||||
THEME: HELLION HUD (circuit board / red+green)
|
||||
============================================ */
|
||||
[data-theme="hellion-hud"] {
|
||||
--accent: #22cc44;
|
||||
--accent-dim: rgba(34, 204, 68, 0.14);
|
||||
--accent-glow: rgba(34, 204, 68, 0.07);
|
||||
--border-accent: rgba(34, 204, 68, 0.30);
|
||||
--bg-primary: #080a08;
|
||||
--bg-board: rgba(8, 12, 8, 0.50);
|
||||
--border: rgba(34, 204, 68, 0.09);
|
||||
--text-primary: #c8e8cc;
|
||||
--text-secondary: #507050;
|
||||
--text-muted: #2c402c;
|
||||
--accent: #32ff6a;
|
||||
--accent-dim: rgba(50, 255, 106, 0.10);
|
||||
--accent-glow: rgba(50, 255, 106, 0.05);
|
||||
--border-accent: rgba(50, 255, 106, 0.25);
|
||||
--bg-primary: #030503;
|
||||
--bg-board: rgba(5, 8, 5, 0.65);
|
||||
--border: rgba(50, 255, 106, 0.12);
|
||||
--text-primary: #d4ffd9;
|
||||
--text-secondary: #6e9975;
|
||||
--text-muted: #334d38;
|
||||
--font-display: 'Rajdhani', sans-serif;
|
||||
--font-body: 'Inter', sans-serif;
|
||||
--overlay-bg: linear-gradient(160deg, rgba(8,10,8,0.88) 0%, rgba(8,10,8,0.42) 50%, rgba(8,10,8,0.92) 100%);
|
||||
--header-bg: rgba(8,10,8,0.93);
|
||||
--board-hover-border: rgba(34,204,68,0.24);
|
||||
--overlay-bg: radial-gradient(circle at center, rgba(3,5,3,0.15) 0%, rgba(3,5,3,0.95) 100%);
|
||||
--header-bg: rgba(3,5,3,0.96);
|
||||
--board-hover-border: rgba(50, 255, 106, 0.20);
|
||||
--toggle-on-bg: rgba(34,204,68,0.20);
|
||||
--logo-shadow: rgba(34,204,68,0.50);
|
||||
--logo-shadow: rgba(50, 255, 106, 0.40);
|
||||
--danger: #ff4d4d;
|
||||
}
|
||||
[data-theme="hellion-hud"] .board {
|
||||
border-color: rgba(50, 255, 106, 0.15);
|
||||
backdrop-filter: blur(8px) brightness(1.1);
|
||||
}
|
||||
|
||||
[data-theme="hellion-hud"] .clock {
|
||||
font-family: 'Rajdhani', sans-serif;
|
||||
font-weight: 700;
|
||||
text-shadow: 0 0 10px var(--accent-glow);
|
||||
}
|
||||
[data-theme="hellion-hud"] .board { border-color: rgba(34,204,68,0.10); }
|
||||
[data-theme="hellion-hud"] .bm-item:hover { background: rgba(34,204,68,0.05); }
|
||||
|
||||
/* ============================================
|
||||
THEME: HELLION ENERGY (matrix / tactical green)
|
||||
============================================ */
|
||||
[data-theme="hellion-energy"] {
|
||||
--accent: #00e87a;
|
||||
--accent-dim: rgba(0, 232, 122, 0.13);
|
||||
--accent-glow: rgba(0, 232, 122, 0.06);
|
||||
--border-accent: rgba(0, 232, 122, 0.28);
|
||||
--bg-primary: #040a06;
|
||||
--bg-board: rgba(4, 12, 6, 0.52);
|
||||
--border: rgba(0, 232, 122, 0.08);
|
||||
--text-primary: #b8f0d0;
|
||||
--text-secondary: #3a7050;
|
||||
--text-muted: #1e3a28;
|
||||
--accent: #1eff8e;
|
||||
--accent-dim: rgba(30, 255, 142, 0.12);
|
||||
--accent-glow: rgba(30, 255, 142, 0.08);
|
||||
--border-accent: rgba(30, 255, 142, 0.30);
|
||||
--bg-primary: #020503;
|
||||
--bg-board: rgba(4, 7, 5, 0.60);
|
||||
--border: rgba(30, 255, 142, 0.12);
|
||||
--text-primary: #e0ffef;
|
||||
--text-secondary: #5e997a;
|
||||
--text-muted: #2a4d3a;
|
||||
--font-display: 'Rajdhani', sans-serif;
|
||||
--font-body: 'Inter', sans-serif;
|
||||
--overlay-bg: linear-gradient(180deg, rgba(4,10,6,0.90) 0%, rgba(4,10,6,0.40) 50%, rgba(4,10,6,0.94) 100%);
|
||||
--header-bg: rgba(4,10,6,0.94);
|
||||
--board-hover-border: rgba(0,232,122,0.22);
|
||||
--overlay-bg: radial-gradient(circle at center, rgba(2,5,3,0.1) 0%, rgba(2,5,3,0.95) 100%);
|
||||
--header-bg: rgba(2,5,3,0.96);
|
||||
--board-hover-border: rgba(30, 255, 142, 0.25);
|
||||
--toggle-on-bg: rgba(0,232,122,0.18);
|
||||
--logo-shadow: rgba(0,232,122,0.50);
|
||||
--logo-shadow: rgba(30, 255, 142, 0.60);
|
||||
}
|
||||
[data-theme="hellion-energy"] .board {
|
||||
border-color: rgba(30, 255, 142, 0.15);
|
||||
backdrop-filter: blur(10px) saturate(1.2);
|
||||
}
|
||||
|
||||
[data-theme="hellion-energy"] .bm-item:hover {
|
||||
background: rgba(30, 255, 142, 0.10);
|
||||
box-shadow: inset 0 0 10px rgba(30, 255, 142, 0.05);
|
||||
}
|
||||
[data-theme="hellion-energy"] .board { border-color: rgba(0,232,122,0.09); }
|
||||
[data-theme="hellion-energy"] .bm-item:hover { background: rgba(0,232,122,0.05); }
|
||||
|
||||
/* ============================================
|
||||
BASE STYLES
|
||||
@@ -485,6 +543,9 @@ body.show-desc .bm-desc { display: block; }
|
||||
.settings-section-title {
|
||||
font-family: var(--font-display); font-size: 10px; font-weight: 700;
|
||||
letter-spacing: 2px; color: var(--text-muted); padding: 10px 18px 6px; text-transform: uppercase;
|
||||
cursor: pointer; user-select: none;
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
background: none; border: none; width: 100%;
|
||||
}
|
||||
.settings-section-title.danger { color: var(--danger); }
|
||||
|
||||
@@ -537,14 +598,18 @@ body.show-desc .bm-desc { display: block; }
|
||||
text-align: center; text-transform: uppercase;
|
||||
}
|
||||
|
||||
.theme-card[data-value="nebula"] .theme-card-label { color: #d65cff; }
|
||||
.theme-card[data-value="crescent"] .theme-card-label { color: #c8a84a; }
|
||||
.theme-card[data-value="event-horizon"] .theme-card-label { color: #e08030; }
|
||||
.theme-card[data-value="merchantman"] .theme-card-label { color: #4ecfcf; }
|
||||
.theme-card[data-value="julia-jin"] .theme-card-label { color: #5b9fff; }
|
||||
.theme-card[data-value="sc-sunset"] .theme-card-label { color: #f07c30; }
|
||||
.theme-card[data-value="hellion-hud"] .theme-card-label { color: #22cc44; }
|
||||
.theme-card[data-value="hellion-energy"] .theme-card-label { color: #00e87a; }
|
||||
.theme-card[data-value="nebula"] .theme-card-label { color: #b359ff; } /* Deep Magenta */
|
||||
.theme-card[data-value="crescent"] .theme-card-label { color: #d4bd8a; } /* Champagne Gold */
|
||||
.theme-card[data-value="event-horizon"] .theme-card-label { color: #9d5cff; } /* Cosmic Purple */
|
||||
.theme-card[data-value="merchantman"] .theme-card-label { color: #2eb8b8; } /* Emerald Teal */
|
||||
.theme-card[data-value="julia-jin"] .theme-card-label { color: #7db3ff; } /* Aether Blue */
|
||||
.theme-card[data-value="sc-sunset"] .theme-card-label { color: #ff8c3d; } /* Amber Sunset */
|
||||
.theme-card[data-value="hellion-hud"] .theme-card-label { color: #32ff6a; } /* Neon Green */
|
||||
.theme-card[data-value="hellion-energy"] .theme-card-label { color: #1eff8e; } /* Acid Green */
|
||||
.theme-card:hover .theme-card-label {
|
||||
text-shadow: 0 0 8px currentColor;
|
||||
transition: text-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.theme-card-check {
|
||||
position: absolute; top: 5px; right: 5px;
|
||||
@@ -606,12 +671,13 @@ body.show-desc .bm-desc { display: block; }
|
||||
.btn-primary:hover { filter: brightness(1.15); box-shadow: 0 0 18px var(--accent-glow); }
|
||||
|
||||
.btn-danger {
|
||||
padding: 5px 12px; background: rgba(224,85,85,0.1);
|
||||
padding: 7px 16px; background: rgba(224,85,85,0.15);
|
||||
border: 1px solid rgba(224,85,85,0.3); border-radius: var(--radius-sm);
|
||||
color: var(--danger); font-family: var(--font-body); font-size: 12px;
|
||||
color: var(--danger); font-family: var(--font-display); font-size: 12px;
|
||||
font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
|
||||
cursor: pointer; transition: all 0.15s;
|
||||
}
|
||||
.btn-danger:hover { background: rgba(224,85,85,0.2); }
|
||||
.btn-danger:hover { background: rgba(224,85,85,0.25); border-color: rgba(224,85,85,0.5); }
|
||||
|
||||
.btn-close {
|
||||
background: none; border: none; color: var(--text-muted); font-size: 14px;
|
||||
@@ -906,6 +972,220 @@ body.show-desc .bm-desc { display: block; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
|
||||
|
||||
/* ============================================
|
||||
CUSTOM DIALOG SYSTEM
|
||||
============================================ */
|
||||
.dialog-overlay {
|
||||
position: fixed; inset: 0; z-index: 400;
|
||||
background: rgba(0,0,0,0.65); backdrop-filter: blur(7px);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
opacity: 0; pointer-events: none; transition: opacity 0.2s;
|
||||
}
|
||||
.dialog-overlay.active { opacity: 1; pointer-events: all; }
|
||||
|
||||
.dialog-box {
|
||||
background: rgba(10,9,20,0.98); border: 1px solid var(--border);
|
||||
border-radius: var(--radius); width: 340px; max-width: 90vw;
|
||||
backdrop-filter: blur(28px);
|
||||
transform: translateY(8px) scale(0.98); transition: transform 0.2s;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.7);
|
||||
}
|
||||
.dialog-overlay.active .dialog-box { transform: translateY(0) scale(1); }
|
||||
|
||||
.dialog-header {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 14px 16px 12px; border-bottom: 1px solid var(--border);
|
||||
font-family: var(--font-display); font-size: 14px; font-weight: 600;
|
||||
letter-spacing: 1.5px; color: var(--text-primary); text-transform: uppercase;
|
||||
}
|
||||
|
||||
.dialog-icon {
|
||||
width: 20px; height: 20px; flex-shrink: 0;
|
||||
}
|
||||
.dialog-icon.type-info { color: var(--accent); }
|
||||
.dialog-icon.type-success { color: #4ade80; }
|
||||
.dialog-icon.type-warning { color: #f59e0b; }
|
||||
.dialog-icon.type-danger { color: var(--danger); }
|
||||
|
||||
.dialog-body {
|
||||
padding: 16px;
|
||||
font-family: var(--font-body); font-size: 13px; line-height: 1.6;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.dialog-actions {
|
||||
padding: 10px 16px 14px;
|
||||
display: flex; justify-content: flex-end; gap: 8px;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: transparent; border: 1px solid var(--border);
|
||||
color: var(--text-secondary); padding: 7px 16px;
|
||||
border-radius: var(--radius-sm); font-family: var(--font-display);
|
||||
font-size: 12px; font-weight: 600; letter-spacing: 1px;
|
||||
text-transform: uppercase; cursor: pointer;
|
||||
transition: background 0.15s, border-color 0.15s;
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255,255,255,0.04); border-color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
ONBOARDING
|
||||
============================================ */
|
||||
.onboarding-modal {
|
||||
background: rgba(10,9,20,0.98); border: 1px solid var(--border);
|
||||
border-radius: 12px; width: 460px; max-width: 92vw;
|
||||
backdrop-filter: blur(28px);
|
||||
transform: translateY(8px) scale(0.98); transition: transform 0.25s;
|
||||
box-shadow: 0 24px 80px rgba(0,0,0,0.7);
|
||||
overflow: hidden;
|
||||
}
|
||||
.dialog-overlay.active .onboarding-modal { transform: translateY(0) scale(1); }
|
||||
|
||||
.onboarding-skip {
|
||||
position: absolute; top: 14px; right: 16px;
|
||||
background: none; border: none; color: var(--text-muted);
|
||||
font-family: var(--font-body); font-size: 12px;
|
||||
cursor: pointer; letter-spacing: 0.5px;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.onboarding-skip:hover { color: var(--text-secondary); }
|
||||
|
||||
.onboarding-slide {
|
||||
padding: 32px 28px 20px; text-align: center;
|
||||
animation: onboardingFadeIn 0.3s ease;
|
||||
}
|
||||
@keyframes onboardingFadeIn {
|
||||
from { opacity: 0; transform: translateX(12px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
.onboarding-hero {
|
||||
font-size: 48px; margin-bottom: 16px; line-height: 1;
|
||||
}
|
||||
|
||||
.onboarding-title {
|
||||
font-family: var(--font-display); font-size: 20px; font-weight: 700;
|
||||
letter-spacing: 2px; text-transform: uppercase;
|
||||
color: var(--text-primary); margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.onboarding-text {
|
||||
font-family: var(--font-body); font-size: 13px; line-height: 1.7;
|
||||
color: var(--text-secondary); max-width: 360px; margin: 0 auto;
|
||||
}
|
||||
|
||||
.onboarding-feature-list {
|
||||
list-style: none; padding: 0; margin: 14px auto 0;
|
||||
text-align: left; max-width: 320px;
|
||||
}
|
||||
.onboarding-feature-list li {
|
||||
font-family: var(--font-body); font-size: 13px;
|
||||
color: var(--text-secondary); padding: 5px 0;
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
}
|
||||
.onboarding-feature-list li::before {
|
||||
content: ''; width: 6px; height: 6px; border-radius: 50%;
|
||||
background: var(--accent); flex-shrink: 0;
|
||||
}
|
||||
|
||||
.onboarding-theme-grid {
|
||||
display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
.onboarding-theme-chip {
|
||||
padding: 6px 4px; border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border); background: rgba(255,255,255,0.03);
|
||||
font-family: var(--font-body); font-size: 11px; color: var(--text-secondary);
|
||||
text-align: center; cursor: default;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.onboarding-footer {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 14px 28px 20px; border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.onboarding-dots {
|
||||
display: flex; gap: 6px;
|
||||
}
|
||||
.onboarding-dot {
|
||||
width: 8px; height: 8px; border-radius: 50%;
|
||||
background: var(--border); transition: background 0.2s, transform 0.2s;
|
||||
}
|
||||
.onboarding-dot.active {
|
||||
background: var(--accent); transform: scale(1.25);
|
||||
}
|
||||
|
||||
.onboarding-nav {
|
||||
display: flex; gap: 8px;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
THEME PICKER MODAL
|
||||
============================================ */
|
||||
.theme-modal {
|
||||
background: rgba(8,8,16,0.96);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
backdrop-filter: blur(28px);
|
||||
max-width: 520px; width: 90%;
|
||||
max-height: 85vh; overflow-y: auto;
|
||||
scrollbar-width: thin; scrollbar-color: var(--border) transparent;
|
||||
}
|
||||
.theme-modal .theme-grid {
|
||||
padding: 12px 16px 16px;
|
||||
}
|
||||
.theme-modal-section {
|
||||
border-top: 1px solid var(--border);
|
||||
padding: 0 16px 16px;
|
||||
}
|
||||
.theme-modal-section .settings-section-title {
|
||||
padding: 12px 0 8px;
|
||||
cursor: default; user-select: auto;
|
||||
}
|
||||
.theme-modal-section .setting-row {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
ACCORDION SETTINGS
|
||||
============================================ */
|
||||
.section-chevron {
|
||||
font-size: 10px;
|
||||
transition: transform 0.2s ease;
|
||||
color: var(--text-muted);
|
||||
display: inline-block;
|
||||
}
|
||||
.settings-section.open .section-chevron {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.section-content {
|
||||
max-height: 0; overflow: hidden;
|
||||
transition: max-height 0.3s ease-out;
|
||||
}
|
||||
.settings-section.open .section-content {
|
||||
max-height: 800px;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
UTILITY CLASSES
|
||||
============================================ */
|
||||
.hidden { display: none; }
|
||||
.accent-text { color: var(--accent); }
|
||||
.dim { opacity: 0.4; }
|
||||
.drag-ghost {
|
||||
position: fixed; opacity: 0.75; pointer-events: none; z-index: 9999;
|
||||
transform: rotate(1.5deg) scale(1.02);
|
||||
box-shadow: 0 12px 40px rgba(0,0,0,0.6);
|
||||
}
|
||||
.bm-item.drag-over { background: rgba(255,160,50,0.07); }
|
||||
.bm-item.dragging-source { opacity: 0.4; }
|
||||
.about-info-label-block { display: block; margin-bottom: 6px; }
|
||||
.about-link-subtle { color: var(--text-secondary); text-decoration: none; }
|
||||
.modal-input-spaced { margin-top: 8px; }
|
||||
|
||||
/* ============================================
|
||||
RESPONSIVE — Mobile & Tablet
|
||||
============================================ */
|
||||
@@ -928,6 +1208,7 @@ body.show-desc .bm-desc { display: block; }
|
||||
|
||||
.settings-panel { width: 320px; }
|
||||
.theme-grid { grid-template-columns: 1fr 1fr; }
|
||||
.theme-modal { max-width: 400px; }
|
||||
|
||||
.search-bar { max-width: 400px; }
|
||||
}
|
||||
@@ -955,6 +1236,7 @@ body.show-desc .bm-desc { display: block; }
|
||||
|
||||
.settings-panel { width: 100%; }
|
||||
.theme-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
|
||||
.theme-modal { max-width: 100%; width: calc(100vw - 32px); }
|
||||
|
||||
.search-bar-wrapper { padding: 6px 10px; }
|
||||
.search-bar { max-width: 100%; }
|
||||
|
||||
+70
-12
@@ -1,8 +1,9 @@
|
||||
/* =============================================
|
||||
HELLION NEWTAB — settings.js
|
||||
Settings Panel: Toggles, Hintergrund, Theme-Picker
|
||||
Settings Panel, Theme-Modal, Accordion, Toggles
|
||||
============================================= */
|
||||
|
||||
// ---- SETTINGS PANEL ----
|
||||
function openSettings() {
|
||||
document.getElementById('settingsPanel').classList.add('open');
|
||||
document.getElementById('settingsOverlay').classList.add('active');
|
||||
@@ -12,6 +13,43 @@ function closeSettings() {
|
||||
document.getElementById('settingsOverlay').classList.remove('active');
|
||||
}
|
||||
|
||||
// ---- THEME MODAL ----
|
||||
function openThemeModal() {
|
||||
const overlay = document.getElementById('themeOverlay');
|
||||
overlay.classList.add('active');
|
||||
}
|
||||
function closeThemeModal() {
|
||||
const overlay = document.getElementById('themeOverlay');
|
||||
overlay.classList.remove('active');
|
||||
}
|
||||
|
||||
// ---- ACCORDION ----
|
||||
function initAccordion() {
|
||||
const defaultOpen = new Set(['appearance', 'behavior', 'data', 'help']);
|
||||
const sections = document.querySelectorAll('.settings-section[data-section]');
|
||||
|
||||
sections.forEach(section => {
|
||||
const name = section.dataset.section;
|
||||
const title = section.querySelector('.settings-section-title');
|
||||
|
||||
if (defaultOpen.has(name)) {
|
||||
section.classList.add('open');
|
||||
}
|
||||
|
||||
title.addEventListener('click', () => {
|
||||
section.classList.toggle('open');
|
||||
});
|
||||
|
||||
title.addEventListener('keydown', e => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
section.classList.toggle('open');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// ---- APPLY SETTINGS ----
|
||||
function applySettings() {
|
||||
const body = document.body;
|
||||
body.classList.toggle('compact', settings.compact);
|
||||
@@ -24,7 +62,7 @@ function applySettings() {
|
||||
document.getElementById('settingShowDesc').checked = settings.showDesc;
|
||||
document.getElementById('settingHideExtra').checked = settings.hideExtra;
|
||||
document.getElementById('settingVisibleCount').value = String(settings.visibleCount);
|
||||
document.getElementById('visibleCountRow').style.opacity = settings.hideExtra ? '1' : '0.4';
|
||||
document.getElementById('visibleCountRow').classList.toggle('dim', !settings.hideExtra);
|
||||
|
||||
// showSearch: undefined (alter Save) → true
|
||||
if (settings.showSearch === undefined) settings.showSearch = true;
|
||||
@@ -40,13 +78,21 @@ function applySettings() {
|
||||
}
|
||||
}
|
||||
|
||||
// ---- BIND EVENTS ----
|
||||
function bindSettingsEvents() {
|
||||
// Panel
|
||||
// Settings Panel
|
||||
document.getElementById('settingsOverlay').addEventListener('click', closeSettings);
|
||||
document.getElementById('btnCloseSettings').addEventListener('click', closeSettings);
|
||||
document.getElementById('btnSettings').addEventListener('click', openSettings);
|
||||
|
||||
// Theme-Picker
|
||||
// Theme Modal
|
||||
document.getElementById('btnTheme').addEventListener('click', openThemeModal);
|
||||
document.getElementById('btnCloseTheme').addEventListener('click', closeThemeModal);
|
||||
document.getElementById('themeOverlay').addEventListener('click', e => {
|
||||
if (e.target === document.getElementById('themeOverlay')) closeThemeModal();
|
||||
});
|
||||
|
||||
// Theme-Picker (Cards im Theme-Modal)
|
||||
document.querySelectorAll('.theme-card').forEach(card => {
|
||||
card.addEventListener('click', async () => {
|
||||
const name = card.dataset.value;
|
||||
@@ -59,6 +105,9 @@ function bindSettingsEvents() {
|
||||
});
|
||||
});
|
||||
|
||||
// Accordion initialisieren
|
||||
initAccordion();
|
||||
|
||||
// Toggles
|
||||
const toggleMap = {
|
||||
settingCompact: v => { settings.compact = v; document.body.classList.toggle('compact', v); },
|
||||
@@ -67,7 +116,7 @@ function bindSettingsEvents() {
|
||||
settingShowDesc: v => { settings.showDesc = v; document.body.classList.toggle('show-desc', v); },
|
||||
settingHideExtra: v => {
|
||||
settings.hideExtra = v;
|
||||
document.getElementById('visibleCountRow').style.opacity = v ? '1' : '0.4';
|
||||
document.getElementById('visibleCountRow').classList.toggle('dim', !v);
|
||||
renderBoards();
|
||||
},
|
||||
settingShowSearch: v => {
|
||||
@@ -92,20 +141,19 @@ function bindSettingsEvents() {
|
||||
renderBoards();
|
||||
});
|
||||
|
||||
// Background URL
|
||||
// Background URL (im Theme-Modal)
|
||||
document.getElementById('btnChangeBg').addEventListener('click', () => {
|
||||
const row = document.getElementById('bgInputRow');
|
||||
row.style.display = row.style.display === 'none' ? 'flex' : 'none';
|
||||
document.getElementById('bgInputRow').classList.toggle('hidden');
|
||||
});
|
||||
document.getElementById('btnApplyBg').addEventListener('click', async () => {
|
||||
const url = document.getElementById('bgUrlInput').value.trim();
|
||||
settings.bgUrl = url;
|
||||
document.getElementById('bgLayer').style.backgroundImage = url ? `url('${url}')` : '';
|
||||
await saveSettings();
|
||||
document.getElementById('bgInputRow').style.display = 'none';
|
||||
document.getElementById('bgInputRow').classList.add('hidden');
|
||||
});
|
||||
|
||||
// Background File Upload
|
||||
// Background File Upload (im Theme-Modal)
|
||||
document.getElementById('btnBgFile').addEventListener('click', () => {
|
||||
document.getElementById('bgFileInput').click();
|
||||
});
|
||||
@@ -119,14 +167,24 @@ function bindSettingsEvents() {
|
||||
await saveSettings();
|
||||
};
|
||||
reader.onerror = () => {
|
||||
alert('Fehler beim Lesen der Datei. Bitte eine andere Datei wählen.');
|
||||
HellionDialog.alert('Fehler beim Lesen der Datei. Bitte eine andere Datei wählen.', { type: 'danger', title: 'Dateifehler' });
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
|
||||
// Onboarding wiederholen
|
||||
document.getElementById('btnRestartOnboarding').addEventListener('click', () => {
|
||||
closeSettings();
|
||||
Onboarding.start();
|
||||
});
|
||||
|
||||
// Reset All
|
||||
document.getElementById('btnResetAll').addEventListener('click', async () => {
|
||||
if (!confirm('Wirklich alle Boards und Einstellungen löschen? Nicht rückgängig machbar.')) return;
|
||||
const ok = await HellionDialog.confirm(
|
||||
'Wirklich alle Boards und Einstellungen löschen? Das kann nicht rückgängig gemacht werden.',
|
||||
{ type: 'danger', title: 'Alles zurücksetzen', confirmText: 'Alles löschen' }
|
||||
);
|
||||
if (!ok) return;
|
||||
boards = [];
|
||||
settings = { compact: false, shortenTitles: false, newTab: true, showDesc: false,
|
||||
hideExtra: false, visibleCount: 10, bgUrl: '', theme: 'nebula',
|
||||
|
||||
Reference in New Issue
Block a user