From 74e3eaefcf62df101a739ea608d674288cc9b07c Mon Sep 17 00:00:00 2001 From: Florian Wathling Date: Sat, 21 Mar 2026 19:08:31 +0100 Subject: [PATCH] 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 --- newtab.html | 492 +++++++++++++++++---------------- src/css/STYLE_GUIDE.md | 101 +++++++ src/css/main.css | 598 ++++++++++++++++++++++++++++++----------- src/js/settings.js | 82 +++++- 4 files changed, 878 insertions(+), 395 deletions(-) create mode 100644 src/css/STYLE_GUIDE.md diff --git a/newtab.html b/newtab.html index 7facb38..97c2b5f 100644 --- a/newtab.html +++ b/newtab.html @@ -3,10 +3,7 @@ - Hellion NewTab - - - + Hellion Dashboard @@ -38,6 +35,10 @@ Note + +
+
+
+ Compact mode + Reduce spacing to show more bookmarks +
+
-
- Crescent - Crescent - ✓ -
-
- Event Horizon - Event Horizon - ✓ -
-
- Merchantman - Merchantman - ✓ -
-
- Julia & Jin - Julia & Jin - ✓ -
-
- SC Sunset - SC Sunset - ✓ -
-
- Hellion HUD - HUD - ✓ -
-
- Hellion Energy - Energy - ✓ +
+
+ Shorten long titles + Shorten title to one line with "…" +
+
+ -

APPEARANCE

- -
-
- Compact mode - Reduce spacing to show more bookmarks + +
+ +
+
+
+ Open links in new tab + Open bookmarks in a new browser tab +
+
- -
- -
-
- Shorten long titles - Shorten title to one line with "…" +
+
+ Show bookmark descriptions + Display saved descriptions below bookmark titles +
+ +
+
+
+ Hide extra bookmarks in long boards + Automatically hides extra bookmarks in long boards +
+ +
+
+
+ Visible bookmarks before hide + Choose how many bookmarks are shown +
+ +
+
+
+ Suchleiste anzeigen + Suchleiste unter dem Header ein/aus +
+
-
+
+ +
+ +
+
+
+ Export Boards + Alle Boards als JSON sichern +
+ +
+
+
+ Import Boards + JSON-Backup wiederherstellen +
+ + +
+
+
+ + +
+ +
+
+
+ Onboarding wiederholen + Willkommens-Tour erneut anzeigen +
+ +
+
+
+ + +
+ +
+
+ +
Version 1.5.2 · by Hellion Online Media
+ +
+ + + Impressum + + + + hellion-media.de + +
+ +
+ +
+ Entwickler + Florian Wathling +
+
+ Unternehmen + Hellion Online Media +
+
+ Lizenz + CC BY-NC-SA 4.0 +
+
+ Datenspeicherung + 100% lokal · Kein Server · Kein Account +
+ +
+ +
+ Bug Report / Feedback + + + kontakt@hellion-media.de + +
+ +
+ Kompatible Browser +
+ Chrome + Edge + Firefox + Opera + Opera GX + Brave + Vivaldi +
+
+
+
+
+ + +
+ +
+
+
+ Reset all data + Deletes all boards and bookmarks +
+ +
+
+
+ +
+ + + + + +
+
+
+ + + @@ -394,6 +434,8 @@ + + diff --git a/src/css/STYLE_GUIDE.md b/src/css/STYLE_GUIDE.md new file mode 100644 index 0000000..1719486 --- /dev/null +++ b/src/css/STYLE_GUIDE.md @@ -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 diff --git a/src/css/main.css b/src/css/main.css index dc66a86..da56360 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -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); - --toggle-on-bg: rgba(78,207,207,0.22); - --logo-shadow: rgba(78,207,207,0.55); + --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(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); - --toggle-on-bg: rgba(91,159,255,0.22); - --logo-shadow: rgba(91,159,255,0.55); + --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(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); - --toggle-on-bg: rgba(34,204,68,0.20); - --logo-shadow: rgba(34,204,68,0.50); + --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(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%; } diff --git a/src/js/settings.js b/src/js/settings.js index 4e48f1b..543a8c5 100644 --- a/src/js/settings.js +++ b/src/js/settings.js @@ -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',