JonKazama-Hellion/Hellion-NewTab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 8 Wiki Activity

Compare commits

base: JonKazama-Hellion/Hellion-NewTab:v1.2.0
Branches Tags
JonKazama-Hellion/Hellion-NewTab:master JonKazama-Hellion/Hellion-NewTab:renovate/configure
JonKazama-Hellion/Hellion-NewTab:v2.1.0 JonKazama-Hellion/Hellion-NewTab:v2.0.0 JonKazama-Hellion/Hellion-NewTab:v1.11.0 JonKazama-Hellion/Hellion-NewTab:v1.11.1 JonKazama-Hellion/Hellion-NewTab:v1.9.0 JonKazama-Hellion/Hellion-NewTab:v1.8.0 JonKazama-Hellion/Hellion-NewTab:v1.7.1 JonKazama-Hellion/Hellion-NewTab:v1.7.0 JonKazama-Hellion/Hellion-NewTab:v1.6.0 JonKazama-Hellion/Hellion-NewTab:v1.5.3 JonKazama-Hellion/Hellion-NewTab:v1.5.2 JonKazama-Hellion/Hellion-NewTab:v1.2.0
...
compare: JonKazama-Hellion/Hellion-NewTab:v1.5.3
Branches Tags
JonKazama-Hellion/Hellion-NewTab:master JonKazama-Hellion/Hellion-NewTab:renovate/configure
JonKazama-Hellion/Hellion-NewTab:v2.1.0 JonKazama-Hellion/Hellion-NewTab:v2.0.0 JonKazama-Hellion/Hellion-NewTab:v1.11.0 JonKazama-Hellion/Hellion-NewTab:v1.11.1 JonKazama-Hellion/Hellion-NewTab:v1.9.0 JonKazama-Hellion/Hellion-NewTab:v1.8.0 JonKazama-Hellion/Hellion-NewTab:v1.7.1 JonKazama-Hellion/Hellion-NewTab:v1.7.0 JonKazama-Hellion/Hellion-NewTab:v1.6.0 JonKazama-Hellion/Hellion-NewTab:v1.5.3 JonKazama-Hellion/Hellion-NewTab:v1.5.2 JonKazama-Hellion/Hellion-NewTab:v1.2.0

6 Commits
v1.2.0 ... v1.5.3

Author SHA1 Message Date
JonKazama-Hellion ed11827321 chore(meta): Ko-fi-Link einbauen und v2-Planung aus Git ausschliessen 
- README: Ko-fi Badge und Link in Impressum-Tabelle
- newtab.html: Ko-fi-Link in About-Section mit Kaffeetassen-Icon
- .gitignore: v2-planning.md ausschliessen
 2026-03-21 19:17:07 +01:00
JonKazama-Hellion 6172332be7 docs(release): CHANGELOG, README und GitHub Actions aktualisieren 
- CHANGELOG.md mit v1.5.2 Eintrag erstellt
- README.md Architektur-Baum aktualisiert (dialog.js, onboarding.js, opera/)
- release.yml erstellt 3 ZIP-Pakete (Chrome, Firefox, Opera)
- quality.yml prueft alle 3 Manifests auf V3 und Versions-Konsistenz
 2026-03-21 19:08:45 +01:00
JonKazama-Hellion 74e3eaefcf 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
 2026-03-21 19:08:31 +01:00
JonKazama-Hellion 00baa0231b feat(ui): Custom Dialog-System, Onboarding und Backup-Reminder 
- HellionDialog.alert/confirm ersetzt alle nativen confirm() und alert() Aufrufe
- 6-stufiger Onboarding-Flow beim ersten Start (Boards, Themes, Features, Backup)
- Backup-Reminder erinnert alle 7 Tage an JSON-Export
- innerHTML komplett durch createElement/createElementNS ersetzt (XSS-Schutz)
- Drag & Drop Inline-Styles durch CSS-Klassen ersetzt
 2026-03-21 19:08:17 +01:00
JonKazama-Hellion 36bf38a92c feat(compat): Opera GX Workaround, Firefox MV3, lokale Fonts und Icon-Update 
- manifest.opera.json mit Service Worker und Content Script fuer Opera GX Speed Dial
- src/js/opera/background.js und redirect.js fuer Tab-Uebernahme
- manifest.firefox.json auf Manifest V3 migriert mit Gecko-ID
- Fonts von Google Fonts API auf lokale WOFF2-Dateien umgestellt (DSGVO)
- Extension-Icons aktualisiert
- SECURITY.md und DISCLAIMER.md ueberarbeitet
 2026-03-21 19:08:03 +01:00
JonKazama-Hellion b430b67df9 Manifestfile füe Mozilla Firefox endlich hinbekommen, das der Bot Check dort klappt 2026-03-21 01:01:22 +01:00
31 changed files with 1860 additions and 600 deletions
Expand all files Collapse all files
.github/workflows/quality.yml
+31 -12
View File
@@ -18,43 +18,56 @@ jobs:
- name: Checkout - name: Checkout
uses: actions/checkout@v4 uses: actions/checkout@v4
- name: HTML-Validierung (newtab.html existiert) - name: Projektstruktur prüfen
run: | run: |
echo "Prüfe Projektstruktur..." echo "Prüfe Projektstruktur..."
test -f manifest.json || (echo "FEHLER: manifest.json fehlt!" && exit 1) test -f manifest.json || (echo "FEHLER: manifest.json fehlt!" && exit 1)
test -f manifest.firefox.json || (echo "FEHLER: manifest.firefox.json fehlt!" && exit 1) test -f manifest.firefox.json || (echo "FEHLER: manifest.firefox.json fehlt!" && exit 1)
test -f manifest.opera.json || (echo "FEHLER: manifest.opera.json fehlt!" && exit 1)
test -f newtab.html || (echo "FEHLER: newtab.html fehlt!" && exit 1) test -f newtab.html || (echo "FEHLER: newtab.html fehlt!" && exit 1)
test -d src/js || (echo "FEHLER: src/js/ fehlt!" && exit 1) test -d src/js || (echo "FEHLER: src/js/ fehlt!" && exit 1)
test -d src/js/opera || (echo "FEHLER: src/js/opera/ fehlt!" && exit 1)
test -d src/css || (echo "FEHLER: src/css/ fehlt!" && exit 1) test -d src/css || (echo "FEHLER: src/css/ fehlt!" && exit 1)
test -d assets/icons || (echo "FEHLER: assets/icons/ fehlt!" && exit 1) test -d assets/icons || (echo "FEHLER: assets/icons/ fehlt!" && exit 1)
test -d assets/themes || (echo "FEHLER: assets/themes/ fehlt!" && exit 1) test -d assets/themes || (echo "FEHLER: assets/themes/ fehlt!" && exit 1)
test -d assets/fonts || (echo "FEHLER: assets/fonts/ fehlt!" && exit 1)
echo "Projektstruktur OK" echo "Projektstruktur OK"
- name: Manifest-Validierung - name: Manifest-Validierung (alle 3)
run: | run: |
echo "Prüfe manifest.json..." echo "Prüfe Manifests..."
python3 -c " python3 -c "
import json, sys import json, sys
with open('manifest.json') as f: with open('manifest.json') as f:
m = json.load(f) m = json.load(f)
assert m.get('manifest_version') == 3, 'Manifest V3 erwartet' assert m.get('manifest_version') == 3, 'Chrome: Manifest V3 erwartet'
assert m.get('name'), 'Name fehlt' assert m.get('name'), 'Chrome: Name fehlt'
assert m.get('version'), 'Version fehlt' assert m.get('version'), 'Chrome: Version fehlt'
assert 'storage' in m.get('permissions', []), 'Storage Permission fehlt' assert 'storage' in m.get('permissions', []), 'Chrome: Storage Permission fehlt'
print('manifest.json (V3) OK — Version:', m['version']) print('manifest.json (V3) OK — Version:', m['version'])
with open('manifest.firefox.json') as f: with open('manifest.firefox.json') as f:
mf = json.load(f) mf = json.load(f)
assert mf.get('manifest_version') == 2, 'Firefox Manifest V2 erwartet' assert mf.get('manifest_version') == 3, 'Firefox: Manifest V3 erwartet'
assert mf['version'] == m['version'], 'Versionen stimmen nicht überein!' assert mf['version'] == m['version'], 'Firefox: Version stimmt nicht mit Chrome überein!'
print('manifest.firefox.json (V2) OK — Version:', mf['version']) assert 'browser_specific_settings' in mf, 'Firefox: browser_specific_settings fehlt'
print('manifest.firefox.json (V3) OK — Version:', mf['version'])
with open('manifest.opera.json') as f:
mo = json.load(f)
assert mo.get('manifest_version') == 3, 'Opera: Manifest V3 erwartet'
assert mo['version'] == m['version'], 'Opera: Version stimmt nicht mit Chrome überein!'
assert 'tabs' in mo.get('permissions', []), 'Opera: Tabs Permission fehlt'
assert 'background' in mo, 'Opera: Background Service Worker fehlt'
print('manifest.opera.json (V3) OK — Version:', mo['version'])
" "
- name: JavaScript Syntax-Check - name: JavaScript Syntax-Check
run: | run: |
echo "Prüfe JavaScript-Syntax..." echo "Prüfe JavaScript-Syntax..."
ERRORS=0 ERRORS=0
for f in src/js/*.js; do for f in src/js/*.js src/js/opera/*.js; do
if ! node --check "$f" 2>&1; then if ! node --check "$f" 2>&1; then
echo "SYNTAX-FEHLER in $f" echo "SYNTAX-FEHLER in $f"
ERRORS=$((ERRORS + 1)) ERRORS=$((ERRORS + 1))
@@ -77,12 +90,18 @@ jobs:
run: | run: |
MANIFEST_VER=$(python3 -c "import json; print(json.load(open('manifest.json'))['version'])") MANIFEST_VER=$(python3 -c "import json; print(json.load(open('manifest.json'))['version'])")
FIREFOX_VER=$(python3 -c "import json; print(json.load(open('manifest.firefox.json'))['version'])") FIREFOX_VER=$(python3 -c "import json; print(json.load(open('manifest.firefox.json'))['version'])")
OPERA_VER=$(python3 -c "import json; print(json.load(open('manifest.opera.json'))['version'])")
HTML_VER=$(grep -oP 'Version \K[0-9]+\.[0-9]+\.[0-9]+' newtab.html || echo 'NICHT GEFUNDEN') HTML_VER=$(grep -oP 'Version \K[0-9]+\.[0-9]+\.[0-9]+' newtab.html || echo 'NICHT GEFUNDEN')
echo "manifest.json: $MANIFEST_VER" echo "manifest.json: $MANIFEST_VER"
echo "manifest.firefox.json: $FIREFOX_VER" echo "manifest.firefox.json: $FIREFOX_VER"
echo "manifest.opera.json: $OPERA_VER"
echo "newtab.html: $HTML_VER" echo "newtab.html: $HTML_VER"
if [ "$MANIFEST_VER" != "$FIREFOX_VER" ]; then if [ "$MANIFEST_VER" != "$FIREFOX_VER" ]; then
echo "FEHLER: Versionen in Manifests stimmen nicht überein!" echo "FEHLER: Chrome/Firefox Versionen stimmen nicht überein!"
exit 1
fi
if [ "$MANIFEST_VER" != "$OPERA_VER" ]; then
echo "FEHLER: Chrome/Opera Versionen stimmen nicht überein!"
exit 1 exit 1
fi fi
if [ "$MANIFEST_VER" != "$HTML_VER" ]; then if [ "$MANIFEST_VER" != "$HTML_VER" ]; then
.github/workflows/release.yml
+19 -10
View File
@@ -1,4 +1,4 @@
# Release — erstellt ZIP-Pakete für Chrome und Firefox bei neuem Tag # Release — erstellt ZIP-Pakete für Chrome, Firefox und Opera bei neuem Tag
name: Release name: Release
on: on:
@@ -25,18 +25,25 @@ jobs:
run: | run: |
mkdir -p dist mkdir -p dist
zip -r "dist/hellion-newtab-${{ steps.version.outputs.tag }}-chrome.zip" \ zip -r "dist/hellion-newtab-${{ steps.version.outputs.tag }}-chrome.zip" \
manifest.json newtab.html src/ assets/ \ manifest.json newtab.html src/js/*.js src/css/ assets/ \
-x "*.git*" "dist/*" ".github/*" -x "*.git*" "dist/*" ".github/*" "src/js/opera/*"
- name: Firefox ZIP erstellen (Manifest V2) - name: Firefox ZIP erstellen (Manifest V3)
run: | run: |
# manifest.firefox.json wird zu manifest.json für Firefox
cp manifest.json manifest.chrome-backup.json cp manifest.json manifest.chrome-backup.json
cp manifest.firefox.json manifest.json cp manifest.firefox.json manifest.json
zip -r "dist/hellion-newtab-${{ steps.version.outputs.tag }}-firefox.zip" \ zip -r "dist/hellion-newtab-${{ steps.version.outputs.tag }}-firefox.zip" \
manifest.json newtab.html src/ assets/ \ manifest.json newtab.html src/js/*.js src/css/ assets/ \
-x "*.git*" "dist/*" ".github/*" "manifest.chrome-backup.json" "manifest.firefox.json" -x "*.git*" "dist/*" ".github/*" "manifest.chrome-backup.json" "manifest.firefox.json" "src/js/opera/*"
# Wiederherstellen mv manifest.chrome-backup.json manifest.json
- name: Opera/Opera GX ZIP erstellen (Manifest V3 + Workaround)
run: |
cp manifest.json manifest.chrome-backup.json
cp manifest.opera.json manifest.json
zip -r "dist/hellion-newtab-${{ steps.version.outputs.tag }}-opera.zip" \
manifest.json newtab.html src/js/*.js src/js/opera/ src/css/ assets/ \
-x "*.git*" "dist/*" ".github/*" "manifest.chrome-backup.json" "manifest.opera.json"
mv manifest.chrome-backup.json manifest.json mv manifest.chrome-backup.json manifest.json
- name: SHA256 Checksummen erstellen - name: SHA256 Checksummen erstellen
@@ -53,8 +60,9 @@ jobs:
## Hellion NewTab ${{ steps.version.outputs.tag }} ## Hellion NewTab ${{ steps.version.outputs.tag }}
### Installation ### Installation
- **Chrome / Edge / Brave / Opera / Vivaldi:** `hellion-newtab-${{ steps.version.outputs.tag }}-chrome.zip` herunterladen und entpacken - **Chrome / Edge / Brave / Vivaldi:** `hellion-newtab-${{ steps.version.outputs.tag }}-chrome.zip`
- **Firefox:** `hellion-newtab-${{ steps.version.outputs.tag }}-firefox.zip` herunterladen und entpacken - **Firefox:** `hellion-newtab-${{ steps.version.outputs.tag }}-firefox.zip`
- **Opera / Opera GX:** `hellion-newtab-${{ steps.version.outputs.tag }}-opera.zip`
Siehe [README](README.md) für die vollständige Installationsanleitung. Siehe [README](README.md) für die vollständige Installationsanleitung.
@@ -63,5 +71,6 @@ jobs:
files: | files: |
dist/hellion-newtab-${{ steps.version.outputs.tag }}-chrome.zip dist/hellion-newtab-${{ steps.version.outputs.tag }}-chrome.zip
dist/hellion-newtab-${{ steps.version.outputs.tag }}-firefox.zip dist/hellion-newtab-${{ steps.version.outputs.tag }}-firefox.zip
dist/hellion-newtab-${{ steps.version.outputs.tag }}-opera.zip
dist/checksums-sha256.txt dist/checksums-sha256.txt
generate_release_notes: true generate_release_notes: true
.gitignore
+3 -1
View File
@@ -2,7 +2,7 @@
.DS_Store .DS_Store
Thumbs.db Thumbs.db
desktop.ini desktop.ini
CLAUDE.md
# Editor # Editor
.vscode/ .vscode/
.idea/ .idea/
@@ -14,6 +14,8 @@ dist/
*.zip *.zip
*.tar.gz *.tar.gz
node_modules/ node_modules/
/xpi/
v2-planning.md
# Persönliche Backup-Dateien (nicht ins Repo) # Persönliche Backup-Dateien (nicht ins Repo)
favorites_*.html favorites_*.html
CHANGELOG.md
+92
View File
@@ -0,0 +1,92 @@
# ⬡ Hellion Dashboard — Changelog
Alle relevanten Änderungen pro Version. Format basiert auf [Keep a Changelog](https://keepachangelog.com/de/1.0.0/).
---
### v1.5.2 — 21.03.2026
#### Neue Features
- **Custom Dialog-System** — Native `confirm()` und `alert()` durch Frosted-Glass-Dialoge ersetzt (`dialog.js`)
- **Onboarding** — 6-stufiger Willkommens-Flow beim ersten Start mit Boards, Themes, Features und Backup-Hinweis
- **Backup-Reminder** — Erinnert alle 7 Tage an JSON-Export, warnt vor Datenverlust bei Browser-Reset
- **Theme-Modal** — Theme-Picker als eigenes Modal aus Settings ausgelagert, eigener Header-Button
- **Accordion-Settings** — Alle Settings-Sektionen einklappbar mit Chevron (About/Danger Zone standardmäßig zu)
#### Verbesserungen
- Fonts von Google Fonts API auf lokale WOFF2-Dateien umgestellt (DSGVO)
- Ungenutzte Font-Dateien entfernt (~388 KB gespart)
- `innerHTML` komplett durch `createElement`/`createElementNS` ersetzt (XSS-Schutz)
- SVG-Icons via `createElementNS` statt Inline-HTML
- Drag & Drop: Inline-Styles durch CSS-Klassen ersetzt (`.drag-ghost`, `.drag-over`, `.dragging-source`)
- Suchleisten-Toggle von DATA nach BEHAVIOR verschoben
- Nicht implementiertes "Quick Save" UI-Element entfernt
- Onboarding wiederholbar über Settings → Help
#### Opera / Opera GX
- `manifest.opera.json` hinzugefügt (MV3 mit Workaround-Skripten)
- `src/js/opera/background.js` — Tab-Management gegen Opera Speed Dial
- `src/js/opera/redirect.js` — Content Script Redirect bei `document_start`
#### Firefox
- `manifest.firefox.json` auf Manifest V3 migriert
- `browser_specific_settings` mit Gecko-ID und `data_collection_permissions`
#### Build & CI
- GitHub Actions: Release erstellt jetzt 3 ZIP-Pakete (Chrome, Firefox, Opera)
- Quality-Check prüft alle 3 Manifests und Opera-Ordner
---
### v1.2.0 — 20.03.2026
- Projektstruktur in `src/js/`, `src/css/`, `assets/` aufgeteilt
- JS in 10 Module aufgeteilt (storage, state, themes, boards, drag, settings, search, sticky, data, app)
- Firefox-Kompatibilität (`manifest.firefox.json`, Manifest V3)
- Vivaldi bestätigt kompatibel
- Theme-Bildpfade korrigiert (Settings Preview)
- URL-Validierung bei Bookmark-Erstellung
- JSON-Import mit Board- und Bookmark-Struktur-Validierung
- XSS-Schutz: `createElement` statt `innerHTML` für Bookmarks
- Storage-Quota-Prüfung mit Warnung bei 8 MB+
- Event Delegation für Bookmark-Klicks (Performance)
- Responsive Design (Tablet 768px, Smartphone 480px)
- Sticky Note Header-Kollision behoben
- FileReader-Fehlerbehandlung für Hintergrundbild-Upload
- GitHub Actions: Security Scan, Code Quality, Release Automation
- 3 Themes ersetzt: Astronaut → Nebula, Cosmic Clock → Crescent, Void Mage → Event Horizon
- Alle Theme-Bilder lizenzrechtlich geprüft und dokumentiert
- LICENSE (CC BY-NC-SA 4.0), SECURITY.md und DISCLAIMER.md hinzugefügt
---
### v1.1.0 — 20.03.2026
- 5 neue Themes (Merchantman, Julia & Jin, SC Sunset, Hellion HUD, Hellion Energy)
- Suchleiste (Google / DuckDuckGo / Bing)
- Sticky Note Widget
- JSON Export & Import
- Datum neben der Uhr
- About / Impressum in Settings
- Board Blur-Funktion (Privat-Modus)
- Drag & Drop auf Pointer Events umgestellt
- Opera / Opera GX Kompatibilität
---
### v1.0.0 — 20.03.2026
- Initiales Release
- Boards & Bookmarks mit Drag & Drop
- 3 Themes (Nebula, Crescent, Event Horizon)
- HTML-Import (Browser-Lesezeichen)
- Settings Panel
---
**Hellion NewTab** — [Hellion Online Media](https://hellion-media.de) — JonKazama-Hellion
DISCLAIMER.md
+1 -1
View File
@@ -44,4 +44,4 @@ Der Entwickler behält sich das Recht vor, diese Extension jederzeit zu ändern,
--- ---
**Hellion NewTab** — [Hellion Online Media](https://hellion-media.de) — JonKazama-Hellion **Hellion NewTab** — [Hellion Online Media - Florian Wathing](https://hellion-media.de) — JonKazama-Hellion
README.md
+87 -99
View File
@@ -1,10 +1,11 @@
# ⬡ Hellion NewTab v1.2.0 # ⬡ Hellion Dashboard v1.5.2
![Version](https://img.shields.io/badge/Version-1.2.0-blue) ![Version](https://img.shields.io/badge/Version-1.5.2-blue)
![JavaScript](https://img.shields.io/badge/JavaScript-Vanilla%20ES2020-F7DF1E?logo=javascript&logoColor=black) ![JavaScript](https://img.shields.io/badge/JavaScript-Vanilla%20ES2020-F7DF1E?logo=javascript&logoColor=black)
![Manifest](https://img.shields.io/badge/Manifest-V3%20%7C%20V2-green) ![Manifest](https://img.shields.io/badge/Manifest-V3-green)
![License](https://img.shields.io/badge/License-CC%20BY--NC--SA%204.0-orange) ![License](https://img.shields.io/badge/License-CC%20BY--NC--SA%204.0-orange)
![Privacy](https://img.shields.io/badge/Privacy-100%25%20Lokal-448f45) ![Privacy](https://img.shields.io/badge/Privacy-100%25%20Lokal-448f45)
[![Ko-fi](https://img.shields.io/badge/Support-Ko--fi-ff5e5b?logo=ko-fi)](https://ko-fi.com/hellionmedia)
**Kein Account. Kein Abo. Keine Cloud. Alle Daten bleiben 100% lokal.** **Kein Account. Kein Abo. Keine Cloud. Alle Daten bleiben 100% lokal.**
@@ -12,7 +13,7 @@ Ein persönlicher Bookmark-Dashboard als Browser-Extension.
Boards, Drag & Drop, 8 Themes, Suchleiste, Sticky Notes — alles im Browser, alles offline. Boards, Drag & Drop, 8 Themes, Suchleiste, Sticky Notes — alles im Browser, alles offline.
Keine externe Datenübertragung, keine Tracker, keine Analytics, keine Werbung. Keine externe Datenübertragung, keine Tracker, keine Analytics, keine Werbung.
Entwickelt von **[Hellion Online Media](https://hellion-media.de)** — JonKazama-Hellion. Entwickelt von **[Hellion Online Media — Florian Wathling](https://hellion-media.de)** — JonKazama-Hellion.
--- ---
@@ -54,20 +55,20 @@ Was angezeigt wird, ist was gespeichert ist. Keine Magie.
### 8 Themes ### 8 Themes
| Theme | Akzent | Stil | | Theme | Akzent | Stil |
| --- | --- | --- | |---|---|---|
| Nebula | Magenta | Cosmic Nebula | | Nebula | `#b359ff` Magenta | Cosmic Nebula |
| Crescent | Gold | Minimalist Night | | Crescent | `#d4bd8a` Gold | Minimalist Night |
| Event Horizon | Orange | Deep Space | | Event Horizon | `#9d5cff` Purple | Deep Space |
| Merchantman | Teal | Industrial Sci-Fi | | Merchantman | `#2eb8b8` Emerald | Industrial Sci-Fi |
| Julia & Jin | Blau | FFXIV Night | | Julia & Jin | `#7db3ff` Aetherial Blue | FFXIV Night |
| SC Sunset | Amber | Planet-Side | | SC Sunset | `#ff8c3d` Amber | Planet-Side |
| Hellion HUD | Grün | Circuit Board | | Hellion HUD | `#32ff6a` Neon Green | Circuit Board |
| Hellion Energy | Matrix-Grün | Tactical | | Hellion Energy | `#1eff8e` Acid Green | Tactical |
### Bild-Credits ### Bild-Credits
| Theme | Quelle | Lizenz | | Theme | Quelle | Lizenz |
| --- | --- | --- | |---|---|---|
| Nebula | [Temel / mrwashingt0n](https://pixabay.com/de/users/mrwashingt0n-15745216/) auf Pixabay | Pixabay License (frei) | | Nebula | [Temel / mrwashingt0n](https://pixabay.com/de/users/mrwashingt0n-15745216/) auf Pixabay | Pixabay License (frei) |
| Crescent | [Daniil Silantev](https://unsplash.com) auf Unsplash | Unsplash License (frei) | | Crescent | [Daniil Silantev](https://unsplash.com) auf Unsplash | Unsplash License (frei) |
| Event Horizon | Eigenes Werk — Stillframe von [hellion-initiative.online](https://hellion-initiative.online) | Hellion Online Media | | Event Horizon | Eigenes Werk — Stillframe von [hellion-initiative.online](https://hellion-initiative.online) | Hellion Online Media |
@@ -77,55 +78,83 @@ Was angezeigt wird, ist was gespeichert ist. Keine Magie.
| Hellion HUD | Eigenes Werk — AI-generiert und nachbearbeitet für hellion-media.de | Hellion Online Media | | Hellion HUD | Eigenes Werk — AI-generiert und nachbearbeitet für hellion-media.de | Hellion Online Media |
| Hellion Energy | Eigenes Werk — AI-generiert für hellion-media.de | Hellion Online Media | | Hellion Energy | Eigenes Werk — AI-generiert für hellion-media.de | Hellion Online Media |
### Settings ### Onboarding & Dialoge
- 6-stufiger Willkommens-Flow beim ersten Start
- Custom Frosted-Glass-Dialoge statt nativer Browser-Popups
- Backup-Reminder alle 7 Tage (warnt vor Datenverlust bei Browser-Reset)
### Settings (Accordion)
- Einklappbare Sektionen mit Chevron — About/Danger Zone standardmäßig geschlossen
- Compact Mode — reduziert Abstände für mehr Bookmarks - Compact Mode — reduziert Abstände für mehr Bookmarks
- Shorten Titles — kürzt lange Titel auf eine Zeile - Shorten Titles — kürzt lange Titel auf eine Zeile
- Open in New Tab — Bookmarks in neuem Tab öffnen - Open in New Tab — Bookmarks in neuem Tab öffnen
- Show Descriptions — Beschreibungen unter Bookmarks anzeigen - Show Descriptions — Beschreibungen unter Bookmarks anzeigen
- Hide Extra Bookmarks — Boards ab 5/10/20 Bookmarks einklappen - Hide Extra Bookmarks — Boards ab 5/10/20 Bookmarks einklappen
- Hintergrundbild — URL oder lokaler Upload
- Suchleiste ein/ausblenden - Suchleiste ein/ausblenden
- JSON Export / Import - JSON Export / Import
- Onboarding wiederholbar
- Danger Zone — Reset aller Daten - Danger Zone — Reset aller Daten
### Theme-Picker (eigener Header-Button)
- 8 Themes als zentriertes Modal
- Hintergrundbild per URL oder lokaler Upload
--- ---
## Browser-Kompatibilität ## Browser-Kompatibilität
| Browser | Status | Manifest | | Browser | Status | Manifest |
| --- | --- | --- | |---|---|---|
| Chrome | Kompatibel | V3 (`manifest.json`) | | Chrome | ✅ Kompatibel | V3 (`manifest.json`) |
| Edge | Kompatibel | V3 (`manifest.json`) | | Edge | ✅ Kompatibel | V3 (`manifest.json`) |
| Brave | Kompatibel | V3 (`manifest.json`) | | Brave | ✅ Kompatibel | V3 (`manifest.json`) |
| Opera | Kompatibel | V3 (`manifest.json`) | | Opera | ✅ Kompatibel | V3 (`manifest.opera.json`) |
| Opera GX | Kompatibel | V3 (`manifest.json`) | | Opera GX | ✅ Kompatibel | V3 (`manifest.opera.json`) |
| Vivaldi | Kompatibel | V3 (`manifest.json`) | | Vivaldi | ✅ Kompatibel | V3 (`manifest.json`) |
| Firefox | Kompatibel | V2 (`manifest.firefox.json`) | | Firefox | ✅ Kompatibel | V3 (`manifest.firefox.json`) |
> **Firefox-Hinweis:** Firefox verwendet aktuell Manifest V2. Mozilla arbeitet an MV3-Support — > **Firefox-Hinweis:** Ab v1.2.0 läuft die Extension auf Manifest V3 — identisch zu Chrome/Edge.
> sobald stabil, wird die Extension migriert. MV2 wird von Mozilla weiterhin unterstützt. > `manifest.firefox.json` bleibt als separate Datei erhalten für Firefox-spezifische Anpassungen.
--- ---
## Installation ## Installation
### Chrome / Edge / Brave / Opera / Opera GX / Vivaldi ### Chrome / Edge / Brave / Vivaldi
```text ```text
1. Repository als ZIP herunterladen oder git clone 1. Repository als ZIP herunterladen oder git clone
2. chrome://extensions öffnen (oder edge:// / brave:// / opera://) 2. chrome://extensions öffnen (bzw. edge:// / brave://)
3. Entwicklermodus aktivieren 3. Entwicklermodus aktivieren
4. "Entpackte Erweiterung laden" → Ordner auswählen in dem manifest.json liegt 4. "Entpackte Erweiterung laden" → Ordner auswählen in dem manifest.json liegt
5. Neuen Tab öffnen 5. Neuen Tab öffnen
``` ```
### Firefox ### Opera / Opera GX
Firefox benötigt `manifest.json` im Format V2.
```bash ```bash
# manifest.json durch Firefox-Version ersetzen: # manifest.opera.json als manifest.json verwenden:
copy manifest.opera.json manifest.json # Windows
cp manifest.opera.json manifest.json # Linux/Mac
```
```text
1. opera://extensions öffnen
2. Entwicklermodus aktivieren
3. "Entpackte Erweiterung laden" → Ordner auswählen
4. Neuen Tab öffnen
```
> **Opera-Hinweis:** Opera GX priorisiert Speed Dial — der enthaltene Workaround
> übernimmt die New-Tab-Seite zuverlässig. Details: [src/js/opera/README.md](src/js/opera/README.md)
### Firefox
```bash
# manifest.firefox.json als manifest.json verwenden:
copy manifest.firefox.json manifest.json # Windows copy manifest.firefox.json manifest.json # Windows
cp manifest.firefox.json manifest.json # Linux/Mac cp manifest.firefox.json manifest.json # Linux/Mac
``` ```
@@ -144,7 +173,7 @@ cp manifest.firefox.json manifest.json # Linux/Mac
## Browser-Bookmarks exportieren & importieren ## Browser-Bookmarks exportieren & importieren
| Browser | Export-Pfad | | Browser | Export-Pfad |
| --- | --- | |---|---|
| Chrome / Edge | Einstellungen → Lesezeichen → Exportieren | | Chrome / Edge | Einstellungen → Lesezeichen → Exportieren |
| Firefox | Lesezeichen → Alle Lesezeichen → Importieren und Sichern → Als HTML exportieren | | Firefox | Lesezeichen → Alle Lesezeichen → Importieren und Sichern → Als HTML exportieren |
@@ -166,11 +195,11 @@ Die exportierte `.html`-Datei über den **Import**-Button in der Extension laden
## Tech-Stack ## Tech-Stack
| Komponente | Details | | Komponente | Details |
| --- | --- | |---|---|
| Sprache | JavaScript (Vanilla ES2020, keine Frameworks) | | Sprache | JavaScript (Vanilla ES2020, keine Frameworks) |
| Styling | CSS Custom Properties (Theme-System) | | Styling | CSS Custom Properties (Theme-System) |
| Fonts | Google Fonts (Rajdhani, Inter, Cinzel) | | Fonts | Lokale Fonts (Rajdhani, Inter, Cinzel) |
| Storage | chrome.storage.local / localStorage Fallback | | Storage | `chrome.storage.local` / `localStorage` Fallback |
| Favicons | Google Favicons API (`/s2/favicons`) | | Favicons | Google Favicons API (`/s2/favicons`) |
| Drag & Drop | Pointer Events API (nativ) | | Drag & Drop | Pointer Events API (nativ) |
| Build | Kein Build-Schritt — direkt lauffähig | | Build | Kein Build-Schritt — direkt lauffähig |
@@ -182,10 +211,12 @@ Die exportierte `.html`-Datei über den **Import**-Button in der Extension laden
```text ```text
hellion-newtab/ hellion-newtab/
├── manifest.json # Chrome, Edge, Brave, Opera, Vivaldi (MV3) ├── manifest.json # Chrome, Edge, Brave, Vivaldi (MV3)
├── manifest.firefox.json # Firefox (MV2) ├── manifest.firefox.json # Firefox (MV3)
├── manifest.opera.json # Opera / Opera GX (MV3 + Workaround)
├── newtab.html # Haupt-HTML (UI-Struktur, Modals, Settings Panel) ├── newtab.html # Haupt-HTML (UI-Struktur, Modals, Settings Panel)
├── LICENSE # CC BY-NC-SA 4.0 ├── LICENSE # CC BY-NC-SA 4.0
├── CHANGELOG.md # Versionshistorie
├── SECURITY.md # Sicherheitsrichtlinie und Meldeprozess ├── SECURITY.md # Sicherheitsrichtlinie und Meldeprozess
├── DISCLAIMER.md # Haftungsausschluss ├── DISCLAIMER.md # Haftungsausschluss
│ │
@@ -193,27 +224,25 @@ hellion-newtab/
│ ├── js/ │ ├── js/
│ │ ├── storage.js # Storage Abstraction + Quota-Prüfung │ │ ├── storage.js # Storage Abstraction + Quota-Prüfung
│ │ ├── state.js # Globaler State, Defaults, Hilfsfunktionen │ │ ├── state.js # Globaler State, Defaults, Hilfsfunktionen
│ │ ├── dialog.js # Custom Dialog-System (HellionDialog.alert/confirm)
│ │ ├── themes.js # Theme-Definitionen & Anwendungslogik │ │ ├── themes.js # Theme-Definitionen & Anwendungslogik
│ │ ├── boards.js # Board/Bookmark Rendering, Event Delegation, Modals │ │ ├── boards.js # Board/Bookmark Rendering, Event Delegation, Modals
│ │ ├── drag.js # Drag & Drop (Pointer Events, Board + Bookmark) │ │ ├── drag.js # Drag & Drop (Pointer Events, Board + Bookmark)
│ │ ├── settings.js # Settings Panel (Toggles, Theme-Picker, Background) │ │ ├── settings.js # Settings Panel, Theme-Modal, Accordion
│ │ ├── search.js # Suchleiste (Google, DuckDuckGo, Bing) │ │ ├── search.js # Suchleiste (Google, DuckDuckGo, Bing)
│ │ ├── sticky.js # Sticky Note Widget (Drag, Persist, Toggle) │ │ ├── sticky.js # Sticky Note Widget (Drag, Persist, Toggle)
│ │ ├── data.js # JSON Export / Import mit Validierung │ │ ├── data.js # JSON Export / Import mit Validierung
│ │ └── app.js # Init, Clock, globale Events (Einstiegspunkt) │ │ ├── onboarding.js # Mehrstufiger Willkommens-Flow
│ │ ├── app.js # Init, Clock, globale Events (Einstiegspunkt)
│ │ └── opera/ # Opera GX Workaround-Skripte
│ │ ├── background.js # Tab-Management gegen Speed Dial
│ │ └── redirect.js # Content Script Redirect
│ └── css/ │ └── css/
│ └── main.css # Styles + Theme-System + Responsive Breakpoints │ └── main.css # Styles + Theme-System + Responsive Breakpoints
│ │
├── assets/ ├── assets/
│ ├── fonts/ # Lokale Fonts (Rajdhani, Inter, Cinzel)
│ ├── themes/ # 8 Theme-Hintergrundbilder │ ├── themes/ # 8 Theme-Hintergrundbilder
│ │ ├── bg-nebula.jpg
│ │ ├── bg-crescent.jpg
│ │ ├── bg-event-horizon.jpg
│ │ ├── bg-merchantman.webp
│ │ ├── bg-julia-jin.png
│ │ ├── bg-sc-sunset.jpg
│ │ ├── bg-hellion-hud.png
│ │ └── bg-hellion-energy.jpg
│ └── icons/ │ └── icons/
│ ├── icon16.png │ ├── icon16.png
│ ├── icon48.png │ ├── icon48.png
@@ -223,16 +252,16 @@ hellion-newtab/
└── workflows/ └── workflows/
├── security.yml # CodeQL-Analyse + Dependency Review ├── security.yml # CodeQL-Analyse + Dependency Review
├── quality.yml # Struktur, Manifest, Syntax, Versions-Konsistenz ├── quality.yml # Struktur, Manifest, Syntax, Versions-Konsistenz
└── release.yml # ZIP-Pakete (Chrome + Firefox) + SHA256 Checksummen └── release.yml # ZIP-Pakete (Chrome + Firefox + Opera) + SHA256
``` ```
### Design-Prinzipien ### Design-Prinzipien
- **Zero Dependencies** — Kein npm, kein Build, kein Framework. Direkt lauffähig - **Zero Dependencies** — Kein npm, kein Build, kein Framework. Direkt lauffähig
- **Privacy First** — Alle Daten lokal, kein Server-Kontakt - **Privacy First** — Alle Daten lokal, kein Server-Kontakt
- **Modular** — 10 JS-Dateien mit klarer Zuständigkeit - **Modular** — 12 JS-Dateien mit klarer Zuständigkeit
- **Responsive** — Tablet (768px) und Smartphone (480px) Breakpoints - **Responsive** — Tablet (768px) und Smartphone (480px) Breakpoints
- **Secure** — createElement statt innerHTML, URL-Validierung, Storage-Fehlerbehandlung - **Secure** — `createElement` statt `innerHTML`, URL-Validierung, Storage-Fehlerbehandlung
- **Event Delegation** — Ein Listener pro Board-Liste statt pro Bookmark (Performance) - **Event Delegation** — Ein Listener pro Board-Liste statt pro Bookmark (Performance)
- **Theme-System** — CSS Custom Properties, 8 Themes, Custom-Background-Support - **Theme-System** — CSS Custom Properties, 8 Themes, Custom-Background-Support
@@ -257,14 +286,14 @@ hellion-newtab/
### Release (`release.yml`) ### Release (`release.yml`)
- **Trigger** — Bei Git-Tag (`v*`) - **Trigger** — Bei Git-Tag (`v*`)
- **Pakete** — Chrome-ZIP (MV3) + Firefox-ZIP (MV2) - **Pakete** — Chrome-ZIP + Firefox-ZIP + Opera-ZIP (alle MV3)
- **Checksummen** — SHA256 für alle Artefakte - **Checksummen** — SHA256 für alle Artefakte
- **GitHub Release** — Automatisch mit Installationsanleitung - **GitHub Release** — Automatisch mit Installationsanleitung
```bash ```bash
# Release erstellen: # Release erstellen:
git tag v1.2.0 git tag v1.5.2
git push origin v1.2.0 git push origin v1.5.2
# → GitHub Action erstellt automatisch Release mit ZIP-Dateien # → GitHub Action erstellt automatisch Release mit ZIP-Dateien
``` ```
@@ -304,57 +333,14 @@ Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International
Vollständige Lizenz: [LICENSE](LICENSE) | [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/) Vollständige Lizenz: [LICENSE](LICENSE) | [CC BY-NC-SA 4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/)
| | | | | |
| --- | --- | |---|---|
| **Entwickler** | Florian Wathling | | **Entwickler** | Florian Wathling |
| **Unternehmen** | Hellion Online Media | | **Unternehmen** | Hellion Online Media |
| **Web** | [hellion-media.de](https://hellion-media.de) | | **Web** | [hellion-media.de](https://hellion-media.de) |
| **Impressum** | [hellion-media.de/impressum](https://hellion-media.de/impressum) | | **Impressum** | [hellion-media.de/impressum](https://hellion-media.de/impressum) |
| **Bug Reports** | [kontakt@hellion-media.de](mailto:kontakt@hellion-media.de?subject=Hellion%20NewTab%20%E2%80%93%20Bug%20Report) | | **Bug Reports** | [kontakt@hellion-media.de](mailto:kontakt@hellion-media.de?subject=Hellion%20NewTab%20%E2%80%93%20Bug%20Report) |
| **Security** | [SECURITY.md](SECURITY.md) | | **Security** | [SECURITY.md](SECURITY.md) |
| **Support** | [Ko-fi](https://ko-fi.com/hellionmedia) |
---
## Changelog
### v1.2.0 — 20.03.2026
- Projektstruktur in `src/js/`, `src/css/`, `assets/` aufgeteilt
- JS in 10 Module aufgeteilt (storage, state, themes, boards, drag, settings, search, sticky, data, app)
- Firefox-Kompatibilität (`manifest.firefox.json`, Manifest V2)
- Vivaldi bestätigt kompatibel
- Theme-Bildpfade korrigiert (Settings Preview)
- URL-Validierung bei Bookmark-Erstellung
- JSON-Import mit Board- und Bookmark-Struktur-Validierung
- XSS-Schutz: createElement statt innerHTML für Bookmarks
- Storage-Quota-Prüfung mit Warnung bei 8 MB+
- Event Delegation für Bookmark-Klicks (Performance)
- Responsive Design (Tablet 768px, Smartphone 480px)
- Sticky Note Header-Kollision behoben
- FileReader-Fehlerbehandlung für Hintergrundbild-Upload
- GitHub Actions: Security Scan, Code Quality, Release Automation
- 3 Themes ersetzt: Astronaut → Nebula, Cosmic Clock → Crescent, Void Mage → Event Horizon
- Alle Theme-Bilder lizenzrechtlich geprüft und dokumentiert
- LICENSE (CC BY-NC-SA 4.0), SECURITY.md und DISCLAIMER.md hinzugefügt
### v1.1.0 — 20.03.2026
- 5 neue Themes (Merchantman, Julia & Jin, SC Sunset, Hellion HUD, Hellion Energy)
- Suchleiste (Google / DuckDuckGo / Bing)
- Sticky Note Widget
- JSON Export & Import
- Datum neben der Uhr
- About / Impressum in Settings
- Board Blur-Funktion (Privat-Modus)
- Drag & Drop auf Pointer Events umgestellt
- Opera / Opera GX Kompatibilität
### v1.0.0 — 20.03.2026
- Initiales Release
- Boards & Bookmarks mit Drag & Drop
- 3 Themes (Nebula, Crescent, Event Horizon)
- HTML-Import (Browser-Lesezeichen)
- Settings Panel
--- ---
@@ -364,4 +350,6 @@ AI (Claude Code, Opus 4.6 von Anthropic) wurde als Hilfsmittel eingesetzt — f
--- ---
> Vollständige Versionshistorie: [CHANGELOG.md](CHANGELOG.md)
**Hellion NewTab** — [Hellion Online Media](https://hellion-media.de) — JonKazama-Hellion **Hellion NewTab** — [Hellion Online Media](https://hellion-media.de) — JonKazama-Hellion
SECURITY.md
+1 -1
View File
@@ -73,4 +73,4 @@ Keine Permissions für: Tabs, History, Web Requests, Downloads, Clipboard oder H
--- ---
**Hellion NewTab** — [Hellion Online Media](https://hellion-media.de) — JonKazama-Hellion **Hellion Dashboard** — [Hellion Online Media - Florian Wathling](https://hellion-media.de) — JonKazama-Hellion
assets/fonts/Cinzel-VariableFont_wght.woff2
BIN
View File
Binary file not shown.
assets/fonts/Inter-VariableFont_opsz,wght.woff2
BIN
View File
Binary file not shown.
assets/fonts/Rajdhani-Bold.woff2
BIN
View File
Binary file not shown.
assets/fonts/Rajdhani-Regular.woff2
BIN
View File
Binary file not shown.
assets/icons/icon128.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 672 B

After

Width:  |  Height:  |  Size: 15 KiB

assets/icons/icon16.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 109 B

After

Width:  |  Height:  |  Size: 827 B

assets/icons/icon48.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 227 B

After

Width:  |  Height:  |  Size: 3.8 KiB

manifest.firefox.json
+18 -4
View File
@@ -1,23 +1,37 @@
{ {
"manifest_version": 2, "manifest_version": 3,
"name": "Hellion NewTab", "name": "Hellion NewTab",
"version": "1.2.0", "version": "1.5.2",
"description": "Personal bookmark dashboard — local, private, no account needed. By Hellion Online Media.", "description": "Personal bookmark dashboard — local, private, no account needed. By Hellion Online Media.",
"author": "Florian Wathling – hellion-media.de", "author": "Hellion Online Media - Florian Wathling",
"homepage_url": "https://hellion-media.de", "homepage_url": "https://hellion-media.de",
"chrome_url_overrides": { "chrome_url_overrides": {
"newtab": "newtab.html" "newtab": "newtab.html"
}, },
"permissions": [ "permissions": [
"storage", "storage",
"bookmarks" "bookmarks"
], ],
"browser_specific_settings": { "browser_specific_settings": {
"gecko": { "gecko": {
"id": "hellion-newtab@hellion-media.de", "id": "hellion-newtab@hellion-media.de",
"strict_min_version": "109.0" "strict_min_version": "142.0",
"data_collection_permissions": {
"required": [
"none"
]
}
} }
}, },
"web_accessible_resources": [
{
"resources": ["assets/fonts/*.woff2"],
"matches": ["<all_urls>"]
}
],
"icons": { "icons": {
"16": "assets/icons/icon16.png", "16": "assets/icons/icon16.png",
"48": "assets/icons/icon48.png", "48": "assets/icons/icon48.png",
manifest.json
+8 -2
View File
@@ -1,9 +1,9 @@
{ {
"manifest_version": 3, "manifest_version": 3,
"name": "Hellion NewTab", "name": "Hellion NewTab",
"version": "1.2.0", "version": "1.5.2",
"description": "Personal bookmark dashboard — local, private, no account needed. By Hellion Online Media.", "description": "Personal bookmark dashboard — local, private, no account needed. By Hellion Online Media.",
"author": "Florian Wathling – hellion-media.de", "author": "Hellion Online Media - Florian Wathling",
"homepage_url": "https://hellion-media.de", "homepage_url": "https://hellion-media.de",
"chrome_url_overrides": { "chrome_url_overrides": {
"newtab": "newtab.html" "newtab": "newtab.html"
@@ -12,6 +12,12 @@
"storage", "storage",
"bookmarks" "bookmarks"
], ],
"web_accessible_resources": [
{
"resources": ["assets/fonts/*.woff2"],
"matches": ["<all_urls>"]
}
],
"icons": { "icons": {
"16": "assets/icons/icon16.png", "16": "assets/icons/icon16.png",
"48": "assets/icons/icon48.png", "48": "assets/icons/icon48.png",
manifest.opera.json
+47
View File
@@ -0,0 +1,47 @@
{
"manifest_version": 3,
"name": "Hellion Dashboard (GX Native)",
"version": "1.5.2",
"description": "Ersetzt die Opera GX Startseite durch dein persönliches, leistungsoptimiertes Hellion Dashboard. Schnell, sauber und werbefrei.",
"author": "Hellion Online Media - Florian Wathling",
"homepage_url": "https://hellion-media.de",
"permissions": [
"tabs",
"storage",
"bookmarks"
],
"background": {
"service_worker": "src/js/opera/background.js"
},
"content_scripts": [
{
"matches": [
"https://*.opera.com/startpage*",
"http://*.opera.com/startpage*"
],
"js": ["src/js/opera/redirect.js"],
"run_at": "document_start",
"all_frames": true
}
],
"web_accessible_resources": [
{
"resources": ["assets/fonts/*.woff2"],
"matches": ["<all_urls>"]
}
],
"action": {
"default_title": "Hellion Dashboard"
},
"icons": {
"16": "assets/icons/icon16.png",
"48": "assets/icons/icon48.png",
"128": "assets/icons/icon128.png"
}
}
newtab.html
+275 -225
View File
@@ -3,10 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hellion NewTab</title> <title>Hellion Dashboard</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" />
<link rel="stylesheet" href="src/css/main.css" /> <link rel="stylesheet" href="src/css/main.css" />
</head> </head>
<body> <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> <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 Note
</button> </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"> <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> <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 Settings
@@ -76,7 +77,7 @@
</main> </main>
<!-- HIDDEN FILE INPUT FOR IMPORT --> <!-- 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 --> <!-- SETTINGS PANEL -->
<div class="panel-overlay" id="settingsOverlay"></div> <div class="panel-overlay" id="settingsOverlay"></div>
@@ -88,248 +89,288 @@
<div class="panel-body"> <div class="panel-body">
<!-- APPEARANCE --> <!-- APPEARANCE -->
<section class="settings-section"> <section class="settings-section" data-section="appearance">
<!-- THEME PICKER --> <button class="settings-section-title" type="button">
<h3 class="settings-section-title">THEME</h3> <span class="section-chevron">▸</span>
<div class="theme-grid"> APPEARANCE
<div class="theme-card active" data-value="nebula"> </button>
<img class="theme-card-img" src="assets/themes/bg-nebula.jpg" alt="Nebula" /> <div class="section-content">
<span class="theme-card-label">Nebula</span> <div class="setting-row">
<span class="theme-card-check">✓</span> <div class="setting-info">
<span class="setting-label">Compact mode</span>
<span class="setting-desc">Reduce spacing to show more bookmarks</span>
</div>
<label class="toggle"><input type="checkbox" id="settingCompact" /><span class="slider"></span></label>
</div> </div>
<div class="theme-card" data-value="crescent"> <div class="setting-row">
<img class="theme-card-img" src="assets/themes/bg-crescent.jpg" alt="Crescent" /> <div class="setting-info">
<span class="theme-card-label">Crescent</span> <span class="setting-label">Shorten long titles</span>
<span class="theme-card-check">✓</span> <span class="setting-desc">Shorten title to one line with "…"</span>
</div> </div>
<div class="theme-card" data-value="event-horizon"> <label class="toggle"><input type="checkbox" id="settingShorten" /><span class="slider"></span></label>
<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 &amp; 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> </div>
</section>
<h3 class="settings-section-title">APPEARANCE</h3> <!-- BEHAVIOR -->
<section class="settings-section" data-section="behavior">
<div class="setting-row"> <button class="settings-section-title" type="button">
<div class="setting-info"> <span class="section-chevron">▸</span>
<span class="setting-label">Compact mode</span> BEHAVIOR
<span class="setting-desc">Reduce spacing to show more bookmarks</span> </button>
<div class="section-content">
<div class="setting-row">
<div class="setting-info">
<span class="setting-label">Open links in new tab</span>
<span class="setting-desc">Open bookmarks in a new browser tab</span>
</div>
<label class="toggle"><input type="checkbox" id="settingNewTab" checked /><span class="slider"></span></label>
</div> </div>
<label class="toggle"><input type="checkbox" id="settingCompact" /><span class="slider"></span></label> <div class="setting-row">
</div> <div class="setting-info">
<span class="setting-label">Show bookmark descriptions</span>
<div class="setting-row"> <span class="setting-desc">Display saved descriptions below bookmark titles</span>
<div class="setting-info"> </div>
<span class="setting-label">Shorten long titles</span> <label class="toggle"><input type="checkbox" id="settingShowDesc" /><span class="slider"></span></label>
<span class="setting-desc">Shorten title to one line with "…"</span> </div>
<div class="setting-row">
<div class="setting-info">
<span class="setting-label">Hide extra bookmarks in long boards</span>
<span class="setting-desc">Automatically hides extra bookmarks in long boards</span>
</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>
<span class="setting-desc">Choose how many bookmarks are shown</span>
</div>
<select class="select-input" id="settingVisibleCount">
<option value="5">5</option>
<option value="10" selected>10</option>
<option value="20">20</option>
</select>
</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> </div>
<label class="toggle"><input type="checkbox" id="settingShorten" /><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" 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.5.2 · by Hellion Online Media</div>
<div class="about-links">
<a href="https://hellion-media.de/impressum" target="_blank" class="about-link">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
Impressum
</a>
<a href="https://hellion-media.de" target="_blank" class="about-link">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>
hellion-media.de
</a>
</div>
<div class="about-divider"></div>
<div class="about-info-row">
<span class="about-info-label">Entwickler</span>
<span class="about-info-value">Florian Wathling</span>
</div>
<div class="about-info-row">
<span class="about-info-label">Unternehmen</span>
<span class="about-info-value">Hellion Online Media</span>
</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 about-link-subtle">CC BY-NC-SA 4.0</a>
</div>
<div class="about-info-row">
<span class="about-info-label">Datenspeicherung</span>
<span class="about-info-value">100% lokal · Kein Server · Kein Account</span>
</div>
<div class="about-divider"></div>
<div class="about-bugreport">
<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
</a>
</div>
<div class="about-bugreport">
<span class="about-info-label about-info-label-block">Support</span>
<a href="https://ko-fi.com/hellionmedia" target="_blank" class="about-link">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8h1a4 4 0 010 8h-1"/><path d="M2 8h16v9a4 4 0 01-4 4H6a4 4 0 01-4-4V8z"/><line x1="6" y1="1" x2="6" y2="4"/><line x1="10" y1="1" x2="10" y2="4"/><line x1="14" y1="1" x2="14" y2="4"/></svg>
Ko-fi — hellionmedia
</a>
</div>
<div class="about-browsers">
<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>
<span class="browser-tag">Firefox</span>
<span class="browser-tag">Opera</span>
<span class="browser-tag">Opera GX</span>
<span class="browser-tag">Brave</span>
<span class="browser-tag">Vivaldi</span>
</div>
</div>
</div>
</div>
</section>
<!-- DANGER ZONE -->
<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>
<span class="setting-desc">Deletes all boards and bookmarks</span>
</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 &amp; Jin" />
<span class="theme-card-label">Julia &amp; 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-row">
<div class="setting-info"> <div class="setting-info">
<span class="setting-label">Background image</span> <span class="setting-label">Background image URL</span>
<span class="setting-desc">Custom wallpaper URL or upload</span> <span class="setting-desc">Custom wallpaper URL</span>
</div> </div>
<button class="btn-small" id="btnChangeBg">Change</button> <button class="btn-small" id="btnChangeBg">Change</button>
</div> </div>
<div class="setting-row hidden" id="bgInputRow">
<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" /> <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> <button class="btn-small" id="btnApplyBg">Apply</button>
</div> </div>
<div class="setting-row"> <div class="setting-row">
<div class="setting-info"> <div class="setting-info">
<span class="setting-label">Background file upload</span> <span class="setting-label">Background file upload</span>
<span class="setting-desc">Use a local image as background</span> <span class="setting-desc">Use a local image as background</span>
</div> </div>
<button class="btn-small" id="btnBgFile">Upload</button> <button class="btn-small" id="btnBgFile">Upload</button>
<input type="file" id="bgFileInput" accept="image/*" style="display:none" /> <input type="file" id="bgFileInput" accept="image/*" class="hidden" />
</div> </div>
</div>
</section>
<!-- BEHAVIOR -->
<section class="settings-section">
<h3 class="settings-section-title">BEHAVIOR</h3>
<div class="setting-row">
<div class="setting-info">
<span class="setting-label">Open links in new tab</span>
<span class="setting-desc">Open bookmarks in a new browser tab</span>
</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>
<span class="setting-desc">Display saved descriptions below bookmark titles</span>
</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>
<span class="setting-desc">Automatically hides extra bookmarks in long boards</span>
</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>
<span class="setting-desc">Choose how many bookmarks are shown</span>
</div>
<select class="select-input" id="settingVisibleCount">
<option value="5">5</option>
<option value="10" selected>10</option>
<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>
</div>
<span class="setting-badge" id="quickSaveBadge">Not set</span>
</div>
</section>
<!-- ABOUT / IMPRESSUM -->
<section class="settings-section">
<h3 class="settings-section-title">ABOUT</h3>
<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-links">
<a href="https://hellion-media.de/impressum" target="_blank" class="about-link">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
Impressum
</a>
<a href="https://hellion-media.de" target="_blank" class="about-link">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>
hellion-media.de
</a>
</div>
<div class="about-divider"></div>
<div class="about-info-row">
<span class="about-info-label">Entwickler</span>
<span class="about-info-value">Florian Wathling</span>
</div>
<div class="about-info-row">
<span class="about-info-label">Unternehmen</span>
<span class="about-info-value">Hellion Online Media</span>
</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>
</div>
<div class="about-info-row">
<span class="about-info-label">Datenspeicherung</span>
<span class="about-info-value">100% lokal · Kein Server · Kein Account</span>
</div>
<div class="about-divider"></div>
<div class="about-bugreport">
<span class="about-info-label" style="display:block;margin-bottom:6px">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
</a>
</div>
<div class="about-browsers">
<span class="about-info-label" style="display:block;margin-bottom:6px">Kompatible Browser</span>
<div class="about-browser-tags">
<span class="browser-tag">Chrome</span>
<span class="browser-tag">Edge</span>
<span class="browser-tag">Firefox</span>
<span class="browser-tag">Opera</span>
<span class="browser-tag">Opera GX</span>
<span class="browser-tag">Brave</span>
<span class="browser-tag">Vivaldi</span>
</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>
<div class="setting-row">
<div class="setting-info">
<span class="setting-label">Reset all data</span>
<span class="setting-desc">Deletes all boards and bookmarks</span>
</div>
<button class="btn-danger" id="btnResetAll">Reset</button>
</div>
</section>
</div> </div>
</aside> </div>
<!-- ADD BOARD MODAL --> <!-- ADD BOARD MODAL -->
<div class="modal-overlay" id="addBoardOverlay"> <div class="modal-overlay" id="addBoardOverlay">
@@ -356,8 +397,8 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
<input type="text" class="text-input full-width" id="newBmTitle" placeholder="Title..." maxlength="60" /> <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="url" class="text-input full-width modal-input-spaced" id="newBmUrl" placeholder="https://..." />
<input type="text" class="text-input full-width" id="newBmDesc" placeholder="Description (optional)" style="margin-top:8px" /> <input type="text" class="text-input full-width modal-input-spaced" id="newBmDesc" placeholder="Description (optional)" />
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button class="btn-primary" id="btnConfirmBookmark">Add</button> <button class="btn-primary" id="btnConfirmBookmark">Add</button>
@@ -381,10 +422,17 @@
</div> </div>
</div> </div>
<!-- ONBOARDING -->
<div class="dialog-overlay" id="onboardingOverlay">
<div class="onboarding-modal" id="onboardingModal"></div>
</div>
<!-- Storage muss zuerst --> <!-- Storage muss zuerst -->
<script src="src/js/storage.js"></script> <script src="src/js/storage.js"></script>
<!-- State & Hilfsfunktionen --> <!-- State & Hilfsfunktionen -->
<script src="src/js/state.js"></script> <script src="src/js/state.js"></script>
<!-- Dialog-System (vor Features, wird überall gebraucht) -->
<script src="src/js/dialog.js"></script>
<!-- Theme-System --> <!-- Theme-System -->
<script src="src/js/themes.js"></script> <script src="src/js/themes.js"></script>
<!-- Features --> <!-- Features -->
@@ -394,6 +442,8 @@
<script src="src/js/search.js"></script> <script src="src/js/search.js"></script>
<script src="src/js/sticky.js"></script> <script src="src/js/sticky.js"></script>
<script src="src/js/data.js"></script> <script src="src/js/data.js"></script>
<!-- Onboarding -->
<script src="src/js/onboarding.js"></script>
<!-- Einstiegspunkt zuletzt --> <!-- Einstiegspunkt zuletzt -->
<script src="src/js/app.js"></script> <script src="src/js/app.js"></script>
</body> </body>
src/css/STYLE_GUIDE.md
+101
View File
@@ -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
src/css/main.css
+440 -158
View File
@@ -1,22 +1,60 @@
/* ============================================= /* =============================================
HELLION NEWTAB — Theme System HELLION Dashboard — Theme System
Themes: nebula | crescent | event-horizon 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) ---- */ /* ---- BASE VARIABLES (Nebula = Default) ---- */
:root { :root {
--accent: #d65cff; --accent: #b359ff;
--accent-dim: rgba(214, 92, 255, 0.15); --accent-dim: rgba(179, 89, 255, 0.12);
--accent-glow: rgba(214, 92, 255, 0.08); --accent-glow: rgba(179, 89, 255, 0.05);
--border-accent: rgba(214, 92, 255, 0.35); --border-accent: rgba(179, 92, 255, 0.25);
--bg-primary: #0a060e; --bg-primary: #050308;
--bg-board: rgba(12, 8, 18, 0.48); --bg-board: rgba(10, 6, 14, 0.55);
--border: rgba(255, 255, 255, 0.06); --border: rgba(255, 255, 255, 0.06);
--text-primary: #e0d8f0; --text-primary: #e5dff2;
--text-secondary: #8a7a9e; --text-secondary: #a395b8;
--text-muted: #4a3860; --text-muted: #5a4a75;
--danger: #e05555; --danger: #e05555;
--font-display: 'Rajdhani', sans-serif; --font-display: 'Rajdhani', sans-serif;
--font-body: 'Inter', sans-serif; --font-body: 'Inter', sans-serif;
@@ -25,34 +63,34 @@
--board-width: 240px; --board-width: 240px;
--spacing: 10px; --spacing: 10px;
--spacing-compact: 5px; --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); --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); --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) THEME: NEBULA (magenta / cosmic nebula)
============================================ */ ============================================ */
[data-theme="nebula"] { [data-theme="nebula"] {
--accent: #d65cff; --accent: #b359ff;
--accent-dim: rgba(214, 92, 255, 0.14); --accent-dim: rgba(179, 89, 255, 0.12);
--accent-glow: rgba(214, 92, 255, 0.06); --accent-glow: rgba(179, 89, 255, 0.05);
--border-accent: rgba(214, 92, 255, 0.32); --border-accent: rgba(179, 92, 255, 0.25);
--bg-primary: #0a060e; --bg-primary: #050308;
--bg-board: rgba(12, 8, 18, 0.48); --bg-board: rgba(10, 6, 14, 0.55);
--border: rgba(255, 255, 255, 0.055); --border: rgba(255, 255, 255, 0.055);
--text-primary: #e0d8f0; --text-primary: #e5dff2;
--text-secondary: #8a7a9e; --text-secondary: #a395b8;
--text-muted: #4a3860; --text-muted: #5a4a75;
--font-display: 'Rajdhani', sans-serif; --font-display: 'Rajdhani', sans-serif;
--font-body: 'Inter', 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); --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); --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"] .board { border-color: rgba(214,92,255,0.10); }
[data-theme="nebula"] .bm-item:hover { background: rgba(214,92,255,0.05); } [data-theme="nebula"] .bm-item:hover { background: rgba(214,92,255,0.05); }
@@ -61,23 +99,24 @@
THEME: CRESCENT (gold / minimalist night) THEME: CRESCENT (gold / minimalist night)
============================================ */ ============================================ */
[data-theme="crescent"] { [data-theme="crescent"] {
--accent: #c8a84a; --accent: #d4bd8a;
--accent-dim: rgba(200, 168, 74, 0.16); --accent-dim: rgba(212, 189, 138, 0.12);
--accent-glow: rgba(200, 168, 74, 0.07); --accent-glow: rgba(212, 189, 138, 0.05);
--border-accent: rgba(200, 168, 74, 0.35); --border-accent: rgba(212, 189, 138, 0.25);
--bg-primary: #080a12; --bg-primary: #06080f;
--bg-board: rgba(10, 14, 26, 0.50); --bg-board: rgba(8, 12, 22, 0.45);
--border: rgba(200, 168, 74, 0.09); --border: rgba(212, 189, 138, 0.10);
--text-primary: #d8dce8; --text-primary: #e2e6f0;
--text-secondary: #6a7090; --text-secondary: #7a84a5;
--text-muted: #363c55; --text-muted: #3d4563;
--font-display: 'Cinzel', serif; --font-display: 'Cinzel', serif;
--font-body: 'Inter', sans-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%); --overlay-bg: radial-gradient(circle at center, rgba(6,8,15,0.2) 0%, rgba(6,8,15,0.9) 100%);
--header-bg: rgba(8,10,18,0.93); --header-bg: rgba(6,8,15,0.95);
--board-hover-border: rgba(200,168,74,0.26); --board-hover-border: rgba(212, 189, 138, 0.20);
--toggle-on-bg: rgba(200,168,74,0.22); --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; } [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); } [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"] { [data-theme="event-horizon"] {
--accent: #e08030; --accent: #9d5cff;
--accent-dim: rgba(224, 128, 48, 0.15); --accent-dim: rgba(157, 92, 255, 0.12);
--accent-glow: rgba(224, 128, 48, 0.07); --accent-glow: rgba(157, 92, 255, 0.08);
--border-accent: rgba(224, 128, 48, 0.35); --border-accent: rgba(157, 92, 255, 0.28);
--bg-primary: #06050c; --bg-primary: #040308;
--bg-board: rgba(8, 6, 16, 0.52); --bg-board: rgba(8, 5, 15, 0.45);
--border: rgba(224, 128, 48, 0.08); --border: rgba(157, 92, 255, 0.12);
--text-primary: #d8d0e8; --text-primary: #e6e0f5;
--text-secondary: #7a6898; --text-secondary: #9284b0;
--text-muted: #3c3058; --text-muted: #4a3d66;
--font-display: 'Rajdhani', sans-serif; --font-display: 'Rajdhani', sans-serif;
--font-body: 'Inter', 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%); --overlay-bg: radial-gradient(circle at center, rgba(4,3,8,0.2) 0%, rgba(4,3,8,0.95) 100%);
--header-bg: rgba(6,5,12,0.93); --header-bg: rgba(4,3,8,0.96);
--board-hover-border: rgba(224,128,48,0.26); --board-hover-border: rgba(157, 92, 255, 0.22);
--toggle-on-bg: rgba(224,128,48,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"] .board { border-color: rgba(157, 92, 255, 0.15); }
[data-theme="event-horizon"] .bm-item:hover { background: rgba(224,128,48,0.05); } [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"] { [data-theme="merchantman"] {
--accent: #4ecfcf; --accent: #2eb8b8;
--accent-dim: rgba(78, 207, 207, 0.14); --accent-dim: rgba(46, 184, 184, 0.12);
--accent-glow: rgba(78, 207, 207, 0.07); --accent-glow: rgba(46, 184, 184, 0.06);
--border-accent: rgba(78, 207, 207, 0.32); --border-accent: rgba(46, 184, 184, 0.25);
--bg-primary: #060d0d; --bg-primary: #040808;
--bg-board: rgba(6, 14, 16, 0.50); --bg-board: rgba(6, 10, 10, 0.58);
--border: rgba(78, 207, 207, 0.09); --border: rgba(46, 184, 184, 0.10);
--text-primary: #c8e8e8; --text-primary: #d1e8e8;
--text-secondary: #5a8888; --text-secondary: #6a8f8f;
--text-muted: #2e5050; --text-muted: #344f4f;
--font-display: 'Rajdhani', sans-serif; --font-display: 'Rajdhani', sans-serif;
--font-body: 'Inter', 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%); --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(6,13,13,0.93); --header-bg: rgba(4,8,8,0.95);
--board-hover-border: rgba(78,207,207,0.26); --board-hover-border: rgba(46, 184, 184, 0.20);
--toggle-on-bg: rgba(78,207,207,0.22); --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"] .board { border-color: rgba(46, 184, 184, 0.12); }
[data-theme="merchantman"] .bm-item:hover { background: rgba(78,207,207,0.05); } [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"] { [data-theme="julia-jin"] {
--accent: #5b9fff; --accent: #7db3ff;
--accent-dim: rgba(91, 159, 255, 0.15); --accent-dim: rgba(125, 179, 255, 0.12);
--accent-glow: rgba(91, 159, 255, 0.07); --accent-glow: rgba(125, 179, 255, 0.08);
--border-accent: rgba(91, 159, 255, 0.35); --border-accent: rgba(125, 179, 255, 0.30);
--bg-primary: #06080f; --bg-primary: #03050a;
--bg-board: rgba(8, 12, 26, 0.52); --bg-board: rgba(7, 10, 20, 0.60);
--border: rgba(91, 159, 255, 0.09); --border: rgba(125, 179, 255, 0.12);
--text-primary: #ccd8f8; --text-primary: #eef2ff;
--text-secondary: #5c72a8; --text-secondary: #8ba0d1;
--text-muted: #2e3a60; --text-muted: #465685;
--font-display: 'Cinzel', serif; --font-display: 'Cinzel', serif;
--font-body: 'Inter', sans-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%); --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(6,8,15,0.92); --header-bg: rgba(3,5,10,0.94);
--board-hover-border: rgba(91,159,255,0.26); --board-hover-border: rgba(125, 179, 255, 0.22);
--toggle-on-bg: rgba(91,159,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"] .logo { font-family: 'Cinzel', serif; letter-spacing: 5px; text-transform: uppercase; }
[data-theme="julia-jin"] .clock { font-family: 'Cinzel', serif; } [data-theme="julia-jin"] .clock { font-family: 'Cinzel', serif; font-weight: 600; }
[data-theme="julia-jin"] .board-title { letter-spacing: 2px; } [data-theme="julia-jin"] .board-title { letter-spacing: 2px; font-weight: 500; }
[data-theme="julia-jin"] .board { border-color: rgba(91,159,255,0.10); } [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(91,159,255,0.06); } [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"] { [data-theme="sc-sunset"] {
--accent: #f07c30; --accent: #ff8c3d;
--accent-dim: rgba(240, 124, 48, 0.15); --accent-dim: rgba(255, 140, 61, 0.12);
--accent-glow: rgba(240, 124, 48, 0.07); --accent-glow: rgba(255, 140, 61, 0.08);
--border-accent: rgba(240, 124, 48, 0.35); --border-accent: rgba(255, 140, 61, 0.28);
--bg-primary: #0c0805; --bg-primary: #080503;
--bg-board: rgba(18, 10, 5, 0.50); --bg-board: rgba(15, 10, 8, 0.55);
--border: rgba(240, 124, 48, 0.09); --border: rgba(255, 140, 61, 0.10);
--text-primary: #f0dcc8; --text-primary: #fce8d5;
--text-secondary: #906050; --text-secondary: #b08568;
--text-muted: #503828; --text-muted: #634a3a;
--font-display: 'Rajdhani', sans-serif; --font-display: 'Rajdhani', sans-serif;
--font-body: 'Inter', 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%); --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(12,8,5,0.93); --header-bg: rgba(8,5,3,0.94);
--board-hover-border: rgba(240,124,48,0.26); --board-hover-border: rgba(255, 140, 61, 0.22);
--toggle-on-bg: rgba(240,124,48,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"] .board {
[data-theme="sc-sunset"] .bm-item:hover { background: rgba(240,124,48,0.05); } 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) THEME: HELLION HUD (circuit board / red+green)
============================================ */ ============================================ */
[data-theme="hellion-hud"] { [data-theme="hellion-hud"] {
--accent: #22cc44; --accent: #32ff6a;
--accent-dim: rgba(34, 204, 68, 0.14); --accent-dim: rgba(50, 255, 106, 0.10);
--accent-glow: rgba(34, 204, 68, 0.07); --accent-glow: rgba(50, 255, 106, 0.05);
--border-accent: rgba(34, 204, 68, 0.30); --border-accent: rgba(50, 255, 106, 0.25);
--bg-primary: #080a08; --bg-primary: #030503;
--bg-board: rgba(8, 12, 8, 0.50); --bg-board: rgba(5, 8, 5, 0.65);
--border: rgba(34, 204, 68, 0.09); --border: rgba(50, 255, 106, 0.12);
--text-primary: #c8e8cc; --text-primary: #d4ffd9;
--text-secondary: #507050; --text-secondary: #6e9975;
--text-muted: #2c402c; --text-muted: #334d38;
--font-display: 'Rajdhani', sans-serif; --font-display: 'Rajdhani', sans-serif;
--font-body: 'Inter', 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%); --overlay-bg: radial-gradient(circle at center, rgba(3,5,3,0.15) 0%, rgba(3,5,3,0.95) 100%);
--header-bg: rgba(8,10,8,0.93); --header-bg: rgba(3,5,3,0.96);
--board-hover-border: rgba(34,204,68,0.24); --board-hover-border: rgba(50, 255, 106, 0.20);
--toggle-on-bg: rgba(34,204,68,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) THEME: HELLION ENERGY (matrix / tactical green)
============================================ */ ============================================ */
[data-theme="hellion-energy"] { [data-theme="hellion-energy"] {
--accent: #00e87a; --accent: #1eff8e;
--accent-dim: rgba(0, 232, 122, 0.13); --accent-dim: rgba(30, 255, 142, 0.12);
--accent-glow: rgba(0, 232, 122, 0.06); --accent-glow: rgba(30, 255, 142, 0.08);
--border-accent: rgba(0, 232, 122, 0.28); --border-accent: rgba(30, 255, 142, 0.30);
--bg-primary: #040a06; --bg-primary: #020503;
--bg-board: rgba(4, 12, 6, 0.52); --bg-board: rgba(4, 7, 5, 0.60);
--border: rgba(0, 232, 122, 0.08); --border: rgba(30, 255, 142, 0.12);
--text-primary: #b8f0d0; --text-primary: #e0ffef;
--text-secondary: #3a7050; --text-secondary: #5e997a;
--text-muted: #1e3a28; --text-muted: #2a4d3a;
--font-display: 'Rajdhani', sans-serif; --font-display: 'Rajdhani', sans-serif;
--font-body: 'Inter', 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%); --overlay-bg: radial-gradient(circle at center, rgba(2,5,3,0.1) 0%, rgba(2,5,3,0.95) 100%);
--header-bg: rgba(4,10,6,0.94); --header-bg: rgba(2,5,3,0.96);
--board-hover-border: rgba(0,232,122,0.22); --board-hover-border: rgba(30, 255, 142, 0.25);
--toggle-on-bg: rgba(0,232,122,0.18); --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 BASE STYLES
@@ -485,6 +543,9 @@ body.show-desc .bm-desc { display: block; }
.settings-section-title { .settings-section-title {
font-family: var(--font-display); font-size: 10px; font-weight: 700; 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; 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); } .settings-section-title.danger { color: var(--danger); }
@@ -537,14 +598,18 @@ body.show-desc .bm-desc { display: block; }
text-align: center; text-transform: uppercase; text-align: center; text-transform: uppercase;
} }
.theme-card[data-value="nebula"] .theme-card-label { color: #d65cff; } .theme-card[data-value="nebula"] .theme-card-label { color: #b359ff; } /* Deep Magenta */
.theme-card[data-value="crescent"] .theme-card-label { color: #c8a84a; } .theme-card[data-value="crescent"] .theme-card-label { color: #d4bd8a; } /* Champagne Gold */
.theme-card[data-value="event-horizon"] .theme-card-label { color: #e08030; } .theme-card[data-value="event-horizon"] .theme-card-label { color: #9d5cff; } /* Cosmic Purple */
.theme-card[data-value="merchantman"] .theme-card-label { color: #4ecfcf; } .theme-card[data-value="merchantman"] .theme-card-label { color: #2eb8b8; } /* Emerald Teal */
.theme-card[data-value="julia-jin"] .theme-card-label { color: #5b9fff; } .theme-card[data-value="julia-jin"] .theme-card-label { color: #7db3ff; } /* Aether Blue */
.theme-card[data-value="sc-sunset"] .theme-card-label { color: #f07c30; } .theme-card[data-value="sc-sunset"] .theme-card-label { color: #ff8c3d; } /* Amber Sunset */
.theme-card[data-value="hellion-hud"] .theme-card-label { color: #22cc44; } .theme-card[data-value="hellion-hud"] .theme-card-label { color: #32ff6a; } /* Neon Green */
.theme-card[data-value="hellion-energy"] .theme-card-label { color: #00e87a; } .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 { .theme-card-check {
position: absolute; top: 5px; right: 5px; 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-primary:hover { filter: brightness(1.15); box-shadow: 0 0 18px var(--accent-glow); }
.btn-danger { .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); 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; 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 { .btn-close {
background: none; border: none; color: var(--text-muted); font-size: 14px; 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-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } ::-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 RESPONSIVE — Mobile & Tablet
============================================ */ ============================================ */
@@ -928,6 +1208,7 @@ body.show-desc .bm-desc { display: block; }
.settings-panel { width: 320px; } .settings-panel { width: 320px; }
.theme-grid { grid-template-columns: 1fr 1fr; } .theme-grid { grid-template-columns: 1fr 1fr; }
.theme-modal { max-width: 400px; }
.search-bar { max-width: 400px; } .search-bar { max-width: 400px; }
} }
@@ -955,6 +1236,7 @@ body.show-desc .bm-desc { display: block; }
.settings-panel { width: 100%; } .settings-panel { width: 100%; }
.theme-grid { grid-template-columns: 1fr 1fr; gap: 6px; } .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-wrapper { padding: 6px 10px; }
.search-bar { max-width: 100%; } .search-bar { max-width: 100%; }
src/js/app.js
+57 -3
View File
@@ -19,6 +19,54 @@ async function init() {
initStickyNote(); initStickyNote();
initDataButtons(); initDataButtons();
Store.checkQuota(); Store.checkQuota();
// Onboarding beim ersten Start
const onboardingDone = await Store.get('onboardingDone');
if (!onboardingDone) {
Onboarding.start();
} else {
// Backup-Reminder (nur wenn Onboarding schon durch ist)
await checkBackupReminder();
}
}
// ---- BACKUP REMINDER ----
const BACKUP_INTERVAL_MS = 7 * 24 * 60 * 60 * 1000; // 7 Tage
async function checkBackupReminder() {
const lastReminder = await Store.get('lastBackupReminder');
const now = Date.now();
// Beim allerersten Mal: Timestamp setzen, aber noch nicht nerven
if (!lastReminder) {
await Store.set('lastBackupReminder', now);
return;
}
if (now - lastReminder < BACKUP_INTERVAL_MS) return;
// Nur erinnern wenn es Boards gibt die sich lohnen zu sichern
if (boards.length === 0) return;
const doBackup = await HellionDialog.confirm(
'Du hast seit über einer Woche kein Backup gemacht. Beim Löschen der Browserdaten gehen deine Boards verloren. Jetzt sichern?',
{ type: 'warning', title: 'Backup-Erinnerung', confirmText: 'Jetzt sichern', cancelText: 'Später' }
);
if (doBackup) {
// JSON-Export auslösen (gleiche Logik wie btnExportJSON)
const data = { version: '1.5.2', exported: new Date().toISOString(), boards, settings };
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'hellion-newtab-backup-' + new Date().toISOString().slice(0, 10) + '.json';
a.click();
URL.revokeObjectURL(url);
}
// Timestamp immer aktualisieren (egal ob gesichert oder "Später")
await Store.set('lastBackupReminder', now);
} }
// ---- CLOCK & DATE ---- // ---- CLOCK & DATE ----
@@ -50,12 +98,18 @@ function bindGlobalEvents() {
const file = e.target.files[0]; const file = e.target.files[0];
if (!file) return; if (!file) return;
const imported = parseBookmarkHtml(await file.text()); const imported = parseBookmarkHtml(await file.text());
if (imported.length === 0) { alert('Keine Bookmarks gefunden.'); return; } if (imported.length === 0) {
await HellionDialog.alert('Keine Bookmarks in dieser Datei gefunden.', { type: 'warning', title: 'Import' });
return;
}
boards = [...boards, ...imported]; boards = [...boards, ...imported];
await saveBoards(); await saveBoards();
renderBoards(); renderBoards();
e.target.value = ''; e.target.value = '';
alert(`✓ ${imported.length} Board(s) mit ${imported.reduce((s,b) => s + b.bookmarks.length, 0)} Bookmarks importiert.`); await HellionDialog.alert(
`${imported.length} Board(s) mit ${imported.reduce((s,b) => s + b.bookmarks.length, 0)} Bookmarks importiert.`,
{ type: 'success', title: 'Import erfolgreich' }
);
}); });
// Add Board Modal // Add Board Modal
@@ -86,7 +140,7 @@ function bindGlobalEvents() {
const url = document.getElementById('newBmUrl').value.trim(); const url = document.getElementById('newBmUrl').value.trim();
const desc = document.getElementById('newBmDesc').value.trim(); const desc = document.getElementById('newBmDesc').value.trim();
if (!title || !url) return; if (!title || !url) return;
try { new URL(url); } catch { alert('Ungültige URL. Bitte mit https:// beginnen.'); return; } try { new URL(url); } catch { await HellionDialog.alert('Ungültige URL. Bitte mit https:// beginnen.', { type: 'warning', title: 'URL ungültig' }); return; }
const board = boards.find(b => b.id === pendingBookmarkBoardId); const board = boards.find(b => b.id === pendingBookmarkBoardId);
if (!board) return; if (!board) return;
board.bookmarks.push({ id: uid(), title, url, desc }); board.bookmarks.push({ id: uid(), title, url, desc });
src/js/boards.js
+104 -32
View File
@@ -6,16 +6,67 @@
let pendingBookmarkBoardId = null; let pendingBookmarkBoardId = null;
let pendingRenameCallback = null; let pendingRenameCallback = null;
const SVG_NS = 'http://www.w3.org/2000/svg';
/**
* Erzeugt ein SVG-Element mit Attributen und Kinder-Elementen.
* @param {string} tag - SVG-Tag (z.B. 'svg', 'circle', 'line')
* @param {Object} attrs - Attribute als Key-Value
* @param {Array} children - Kind-Elemente
* @returns {SVGElement}
*/
function svgEl(tag, attrs, children) {
const el = document.createElementNS(SVG_NS, tag);
if (attrs) {
for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, v);
}
if (children) {
for (const child of children) el.appendChild(child);
}
return el;
}
/** Erzeugt das 6-Punkt Drag-Handle SVG */
function createDragHandleSvg() {
return svgEl('svg', { width: '10', height: '14', viewBox: '0 0 10 14', fill: 'currentColor' }, [
svgEl('circle', { cx: '2', cy: '2', r: '1.5' }),
svgEl('circle', { cx: '8', cy: '2', r: '1.5' }),
svgEl('circle', { cx: '2', cy: '7', r: '1.5' }),
svgEl('circle', { cx: '8', cy: '7', r: '1.5' }),
svgEl('circle', { cx: '2', cy: '12', r: '1.5' }),
svgEl('circle', { cx: '8', cy: '12', r: '1.5' }),
]);
}
/** Erzeugt das Plus-Icon SVG */
function createPlusSvg() {
return svgEl('svg', { width: '11', height: '11', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', 'stroke-width': '2' }, [
svgEl('line', { x1: '12', y1: '5', x2: '12', y2: '19' }),
svgEl('line', { x1: '5', y1: '12', x2: '19', y2: '12' }),
]);
}
// ---- RENDER ---- // ---- RENDER ----
function renderBoards() { function renderBoards() {
const wrapper = document.getElementById('boardsWrapper'); const wrapper = document.getElementById('boardsWrapper');
wrapper.innerHTML = ''; wrapper.replaceChildren();
if (boards.length === 0) { if (boards.length === 0) {
wrapper.innerHTML = `<div class="empty-state"> const empty = document.createElement('div');
No boards yet. Click <strong style="color:var(--accent)">+ Board</strong> to create one, empty.className = 'empty-state';
or use <strong style="color:var(--accent)">Import</strong> to load your browser bookmarks.
</div>`; const boardStrong = document.createElement('strong');
boardStrong.className = 'accent-text';
boardStrong.textContent = '+ Board';
const importStrong = document.createElement('strong');
importStrong.className = 'accent-text';
importStrong.textContent = 'Import';
empty.append(
'No boards yet. Click ', boardStrong, ' to create one, or use ', importStrong, ' to load your browser bookmarks.'
);
wrapper.appendChild(empty);
return; return;
} }
@@ -31,43 +82,59 @@ function createBoardEl(board) {
// Header // Header
const header = document.createElement('div'); const header = document.createElement('div');
header.className = 'board-header'; header.className = 'board-header';
header.innerHTML = `
<span class="board-drag-handle" title="Board verschieben"> const dragHandle = document.createElement('span');
<svg width="10" height="14" viewBox="0 0 10 14" fill="currentColor"> dragHandle.className = 'board-drag-handle';
<circle cx="2" cy="2" r="1.5"/><circle cx="8" cy="2" r="1.5"/> dragHandle.title = 'Board verschieben';
<circle cx="2" cy="7" r="1.5"/><circle cx="8" cy="7" r="1.5"/> dragHandle.appendChild(createDragHandleSvg());
<circle cx="2" cy="12" r="1.5"/><circle cx="8" cy="12" r="1.5"/>
</svg> const titleSpanHeader = document.createElement('span');
</span> titleSpanHeader.className = 'board-title';
<span class="board-title" title="${escHtml(board.title)}">${escHtml(board.title)}</span> titleSpanHeader.title = board.title;
<div class="board-actions"> titleSpanHeader.textContent = board.title;
<button class="board-action-btn btn-blur-board" title="${board.blurred ? 'Unblur' : 'Blur (privat)'}">🔒</button>
<button class="board-action-btn btn-rename-board" title="Umbenennen">✎</button> const actions = document.createElement('div');
<button class="board-action-btn btn-delete-board" title="Löschen">✕</button> actions.className = 'board-actions';
</div>
`; const btnBlur = document.createElement('button');
btnBlur.className = 'board-action-btn btn-blur-board';
btnBlur.title = board.blurred ? 'Unblur' : 'Blur (privat)';
btnBlur.textContent = '\uD83D\uDD12';
const btnRename = document.createElement('button');
btnRename.className = 'board-action-btn btn-rename-board';
btnRename.title = 'Umbenennen';
btnRename.textContent = '\u270E';
const btnDelete = document.createElement('button');
btnDelete.className = 'board-action-btn btn-delete-board';
btnDelete.title = 'Löschen';
btnDelete.textContent = '\u2715';
actions.append(btnBlur, btnRename, btnDelete);
header.append(dragHandle, titleSpanHeader, actions);
// Blur-Overlay // Blur-Overlay
const blurOverlay = document.createElement('div'); const blurOverlay = document.createElement('div');
blurOverlay.className = 'board-blur-overlay'; blurOverlay.className = 'board-blur-overlay';
div.appendChild(blurOverlay); div.appendChild(blurOverlay);
header.querySelector('.btn-blur-board').addEventListener('click', async e => { btnBlur.addEventListener('click', async e => {
e.stopPropagation(); e.stopPropagation();
board.blurred = !board.blurred; board.blurred = !board.blurred;
div.classList.toggle('blurred', board.blurred); div.classList.toggle('blurred', board.blurred);
e.currentTarget.title = board.blurred ? 'Unblur' : 'Blur (privat)'; btnBlur.title = board.blurred ? 'Unblur' : 'Blur (privat)';
await saveBoards(); await saveBoards();
}); });
blurOverlay.addEventListener('click', async () => { blurOverlay.addEventListener('click', async () => {
board.blurred = false; board.blurred = false;
div.classList.remove('blurred'); div.classList.remove('blurred');
header.querySelector('.btn-blur-board').title = 'Blur (privat)'; btnBlur.title = 'Blur (privat)';
await saveBoards(); await saveBoards();
}); });
header.querySelector('.btn-rename-board').addEventListener('click', e => { btnRename.addEventListener('click', e => {
e.stopPropagation(); e.stopPropagation();
openRenameModal(board.title, async newName => { openRenameModal(board.title, async newName => {
if (!newName.trim()) return; if (!newName.trim()) return;
@@ -77,11 +144,16 @@ function createBoardEl(board) {
}); });
}); });
header.querySelector('.btn-delete-board').addEventListener('click', e => { btnDelete.addEventListener('click', async e => {
e.stopPropagation(); e.stopPropagation();
if (confirm(`Board "${board.title}" löschen?`)) { const ok = await HellionDialog.confirm(
`Board "${board.title}" wirklich löschen?`,
{ type: 'danger', title: 'Board löschen', confirmText: 'Löschen' }
);
if (ok) {
boards = boards.filter(b => b.id !== board.id); boards = boards.filter(b => b.id !== board.id);
saveBoards().then(renderBoards); await saveBoards();
renderBoards();
} }
}); });
@@ -127,7 +199,8 @@ function createBoardEl(board) {
// Add Bookmark // Add Bookmark
const addBtn = document.createElement('button'); const addBtn = document.createElement('button');
addBtn.className = 'add-bm-btn'; addBtn.className = 'add-bm-btn';
addBtn.innerHTML = `<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> Add link`; addBtn.appendChild(createPlusSvg());
addBtn.append(' Add link');
addBtn.addEventListener('click', () => openAddBookmarkModal(board.id)); addBtn.addEventListener('click', () => openAddBookmarkModal(board.id));
div.appendChild(addBtn); div.appendChild(addBtn);
@@ -148,13 +221,12 @@ function createBmEl(bm) {
favicon.height = 14; favicon.height = 14;
favicon.src = getFaviconUrl(bm.url); favicon.src = getFaviconUrl(bm.url);
favicon.addEventListener('error', function() { favicon.addEventListener('error', function() {
this.style.display = 'none'; this.classList.add('hidden');
this.nextElementSibling.style.display = 'flex'; this.nextElementSibling.classList.remove('hidden');
}); });
const fallback = document.createElement('div'); const fallback = document.createElement('div');
fallback.className = 'bm-favicon-fallback'; fallback.className = 'bm-favicon-fallback hidden';
fallback.style.display = 'none';
fallback.textContent = bm.title.charAt(0).toUpperCase(); fallback.textContent = bm.title.charAt(0).toUpperCase();
const textDiv = document.createElement('div'); const textDiv = document.createElement('div');
src/js/data.js
+11 -4
View File
@@ -11,7 +11,7 @@ function initDataButtons() {
// Export // Export
btnExport.addEventListener('click', () => { btnExport.addEventListener('click', () => {
const data = { version: '1.2.0', exported: new Date().toISOString(), boards, settings }; const data = { version: '1.5.2', exported: new Date().toISOString(), boards, settings };
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }); const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
const url = URL.createObjectURL(blob); const url = URL.createObjectURL(blob);
const a = document.createElement('a'); const a = document.createElement('a');
@@ -42,13 +42,20 @@ function initDataButtons() {
return true; return true;
}); });
if (validBoards.length === 0) throw new Error('Keine gültigen Boards gefunden'); if (validBoards.length === 0) throw new Error('Keine gültigen Boards gefunden');
if (!confirm(`${validBoards.length} Boards importieren? Bestehende Daten bleiben erhalten.`)) return; const ok = await HellionDialog.confirm(
`${validBoards.length} Boards importieren? Bestehende Daten bleiben erhalten.`,
{ type: 'info', title: 'JSON Import' }
);
if (!ok) return;
boards = [...boards, ...validBoards]; boards = [...boards, ...validBoards];
await saveBoards(); await saveBoards();
renderBoards(); renderBoards();
alert(`✓ ${validBoards.length} Board(s) importiert.`); await HellionDialog.alert(
`${validBoards.length} Board(s) erfolgreich importiert.`,
{ type: 'success', title: 'Import erfolgreich' }
);
} catch (err) { } catch (err) {
alert('Fehler beim Import: ' + err.message); await HellionDialog.alert('Fehler beim Import: ' + err.message, { type: 'danger', title: 'Import fehlgeschlagen' });
} }
e.target.value = ''; e.target.value = '';
}); });
src/js/dialog.js
+154
View File
@@ -0,0 +1,154 @@
/* =============================================
HELLION NEWTAB — dialog.js
Custom Dialog System (ersetzt native alert/confirm)
============================================= */
const HellionDialog = {
/** SVG-Icons je nach Dialog-Typ */
_icons: {
info: '<circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/>',
success: '<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>',
warning: '<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>',
danger: '<circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/>'
},
/**
* Erzeugt das SVG-Icon-Element
* @param {string} type - info | success | warning | danger
* @returns {SVGElement}
*/
_createIcon(type) {
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width', '20');
svg.setAttribute('height', '20');
svg.setAttribute('viewBox', '0 0 24 24');
svg.setAttribute('fill', 'none');
svg.setAttribute('stroke', 'currentColor');
svg.setAttribute('stroke-width', '2');
svg.setAttribute('stroke-linecap', 'round');
svg.setAttribute('stroke-linejoin', 'round');
svg.className.baseVal = 'dialog-icon type-' + type;
// SVG-Pfade müssen per innerHTML gesetzt werden (kein User-Input, nur statische Pfade)
svg.innerHTML = this._icons[type] || this._icons.info;
return svg;
},
/**
* Erstellt und zeigt einen Dialog
* @param {Object} config
* @returns {Promise<boolean>}
*/
_show(config) {
return new Promise(resolve => {
const overlay = document.createElement('div');
overlay.className = 'dialog-overlay';
const box = document.createElement('div');
box.className = 'dialog-box';
// Header
const header = document.createElement('div');
header.className = 'dialog-header';
header.appendChild(this._createIcon(config.type));
const titleSpan = document.createElement('span');
titleSpan.textContent = config.title;
header.appendChild(titleSpan);
// Body
const body = document.createElement('div');
body.className = 'dialog-body';
body.textContent = config.message;
// Actions
const actions = document.createElement('div');
actions.className = 'dialog-actions';
function cleanup(result) {
overlay.classList.remove('active');
document.removeEventListener('keydown', keyHandler);
setTimeout(() => overlay.remove(), 200);
resolve(result);
}
// Cancel-Button (nur bei confirm)
if (config.isConfirm) {
const cancelBtn = document.createElement('button');
cancelBtn.className = 'btn-secondary';
cancelBtn.textContent = config.cancelText;
cancelBtn.addEventListener('click', () => cleanup(false));
actions.appendChild(cancelBtn);
}
// Confirm/OK-Button
const confirmBtn = document.createElement('button');
confirmBtn.className = config.type === 'danger' && config.isConfirm ? 'btn-danger' : 'btn-primary';
confirmBtn.textContent = config.confirmText;
confirmBtn.addEventListener('click', () => cleanup(config.isConfirm ? true : undefined));
actions.appendChild(confirmBtn);
box.append(header, body, actions);
overlay.appendChild(box);
// Overlay-Klick schließt
overlay.addEventListener('click', e => {
if (e.target === overlay) cleanup(config.isConfirm ? false : undefined);
});
// Keyboard
function keyHandler(e) {
if (e.key === 'Enter') {
e.preventDefault();
cleanup(config.isConfirm ? true : undefined);
}
if (e.key === 'Escape') {
e.preventDefault();
cleanup(config.isConfirm ? false : undefined);
}
}
document.addEventListener('keydown', keyHandler);
document.body.appendChild(overlay);
// Nächster Frame für CSS-Transition
requestAnimationFrame(() => {
overlay.classList.add('active');
confirmBtn.focus();
});
});
},
/**
* Zeigt einen Alert-Dialog (ersetzt window.alert)
* @param {string} message - Nachricht
* @param {Object} [options] - { title, confirmText, type }
* @returns {Promise<void>}
*/
alert(message, options) {
const opts = options || {};
return this._show({
message,
title: opts.title || 'Hinweis',
confirmText: opts.confirmText || 'OK',
cancelText: '',
type: opts.type || 'info',
isConfirm: false
});
},
/**
* Zeigt einen Confirm-Dialog (ersetzt window.confirm)
* @param {string} message - Nachricht
* @param {Object} [options] - { title, confirmText, cancelText, type }
* @returns {Promise<boolean>}
*/
confirm(message, options) {
const opts = options || {};
return this._show({
message,
title: opts.title || 'Bestätigung',
confirmText: opts.confirmText || 'OK',
cancelText: opts.cancelText || 'Abbrechen',
type: opts.type || 'info',
isConfirm: true
});
}
};
src/js/drag.js
+42 -31
View File
@@ -37,13 +37,11 @@ function initBoardDragDrop() {
// Ghost // Ghost
const ghost = boardEl.cloneNode(true); const ghost = boardEl.cloneNode(true);
ghost.style.cssText = ` ghost.className += ' drag-ghost';
position:fixed; left:${rect.left}px; top:${rect.top}px; ghost.style.left = rect.left + 'px';
width:${rect.width}px; height:${rect.height}px; ghost.style.top = rect.top + 'px';
opacity:0.75; pointer-events:none; z-index:9999; ghost.style.width = rect.width + 'px';
transform:rotate(1.5deg) scale(1.02); ghost.style.height = rect.height + 'px';
box-shadow:0 12px 40px rgba(0,0,0,0.6);
`;
document.body.appendChild(ghost); document.body.appendChild(ghost);
// Placeholder // Placeholder
@@ -104,29 +102,42 @@ function initBoardDragDrop() {
function initBookmarkDragDrop(listEl, board) { function initBookmarkDragDrop(listEl, board) {
let dragSrcBmId = null; let dragSrcBmId = null;
listEl.querySelectorAll('.bm-item').forEach(item => { listEl.addEventListener('dragstart', e => {
item.addEventListener('dragstart', e => { const item = e.target.closest('.bm-item');
dragSrcBmId = item.dataset.bmId; if (!item) return;
e.dataTransfer.effectAllowed = 'move'; dragSrcBmId = item.dataset.bmId;
setTimeout(() => item.style.opacity = '0.4', 0); e.dataTransfer.effectAllowed = 'move';
}); setTimeout(() => item.classList.add('dragging-source'), 0);
item.addEventListener('dragend', () => { item.style.opacity = ''; }); });
item.addEventListener('dragover', e => {
e.preventDefault(); listEl.addEventListener('dragend', e => {
item.style.background = 'rgba(255,160,50,0.07)'; const item = e.target.closest('.bm-item');
}); if (item) item.classList.remove('dragging-source');
item.addEventListener('dragleave', () => { item.style.background = ''; }); });
item.addEventListener('drop', async e => {
e.preventDefault(); e.stopPropagation(); listEl.addEventListener('dragover', e => {
item.style.background = ''; e.preventDefault();
const targetBmId = item.dataset.bmId; const item = e.target.closest('.bm-item');
if (!dragSrcBmId || dragSrcBmId === targetBmId) return; if (item) item.classList.add('drag-over');
const srcIdx = board.bookmarks.findIndex(b => b.id === dragSrcBmId); });
const tgtIdx = board.bookmarks.findIndex(b => b.id === targetBmId);
const [moved] = board.bookmarks.splice(srcIdx, 1); listEl.addEventListener('dragleave', e => {
board.bookmarks.splice(tgtIdx, 0, moved); const item = e.target.closest('.bm-item');
await saveBoards(); if (item) item.classList.remove('drag-over');
renderBoards(); });
});
listEl.addEventListener('drop', async e => {
e.preventDefault(); e.stopPropagation();
const item = e.target.closest('.bm-item');
if (!item) return;
item.classList.remove('drag-over');
const targetBmId = item.dataset.bmId;
if (!dragSrcBmId || dragSrcBmId === targetBmId) return;
const srcIdx = board.bookmarks.findIndex(b => b.id === dragSrcBmId);
const tgtIdx = board.bookmarks.findIndex(b => b.id === targetBmId);
const [moved] = board.bookmarks.splice(srcIdx, 1);
board.bookmarks.splice(tgtIdx, 0, moved);
await saveBoards();
renderBoards();
}); });
} }
src/js/onboarding.js
+207
View File
@@ -0,0 +1,207 @@
/* =============================================
HELLION NEWTAB — onboarding.js
Mehrstufiger Willkommens-Flow beim ersten Start
============================================= */
const Onboarding = {
currentSlide: 0,
slides: [
{
hero: '\u2B21',
title: 'Willkommen bei Hellion Dashboard',
text: 'Dein neuer Browser-Startbildschirm. Minimalistisch, schnell und vollst\u00E4ndig lokal \u2014 keine Cloud, kein Account, keine Datensammlung.'
},
{
hero: '\uD83D\uDCCB',
title: 'Boards & Bookmarks',
features: [
'Erstelle Boards mit dem \u201E+ Board\u201C Button oben',
'Importiere Browser-Lesezeichen \u00FCber den \u201EImport\u201C Button im Header',
'Drag & Drop zum Umsortieren von Boards und Links',
'Blur-Modus f\u00FCr private Boards (\uD83D\uDD12 Icon)'
]
},
{
hero: '\uD83C\uDFA8',
title: '8 handgefertigte Themes',
text: 'Klicke auf den „Theme" Button im Header um dein Theme zu wählen. Jedes hat seinen eigenen Stil und Farbpalette.',
showThemes: true
},
{
hero: '\u26A1',
title: 'Weitere Features',
features: [
'Suchleiste mit Google, DuckDuckGo oder Bing',
'Sticky Notes f\u00FCr schnelle Notizen',
'Funktioniert komplett offline \u2014 alles lokal gespeichert'
]
},
{
hero: '\uD83D\uDEE1\uFE0F',
title: 'Backups nicht vergessen!',
text: 'Deine Daten sind lokal im Browser gespeichert. Wenn du Browserdaten l\u00F6schst, gehen sie verloren! Sichere regelm\u00E4\u00DFig \u00FCber Settings \u2192 Data \u2192 Export. Wir erinnern dich alle 7 Tage daran.'
},
{
hero: '\uD83D\uDE80',
title: 'Bereit!',
text: 'Klicke auf \u201E+ Board\u201C um dein erstes Board zu erstellen, oder nutze den \u201EImport\u201C Button im Header um deine Browser-Lesezeichen zu importieren.'
}
],
/** Startet das Onboarding */
start() {
this.currentSlide = 0;
this._render();
this._bindKeyboard();
const overlay = document.getElementById('onboardingOverlay');
requestAnimationFrame(() => overlay.classList.add('active'));
},
/** Schlie\u00DFt das Onboarding und speichert den Status */
async _finish() {
const overlay = document.getElementById('onboardingOverlay');
overlay.classList.remove('active');
document.removeEventListener('keydown', this._keyHandler);
await Store.set('onboardingDone', true);
},
/** Rendert den aktuellen Slide */
_render() {
const modal = document.getElementById('onboardingModal');
modal.replaceChildren();
const slide = this.slides[this.currentSlide];
const isLast = this.currentSlide === this.slides.length - 1;
// Skip-Button (nicht auf letztem Slide)
if (!isLast) {
const skip = document.createElement('button');
skip.className = 'onboarding-skip';
skip.textContent = '\u00DCberspringen';
skip.addEventListener('click', () => this._finish());
modal.appendChild(skip);
}
// Slide-Content
const slideEl = document.createElement('div');
slideEl.className = 'onboarding-slide';
const hero = document.createElement('div');
hero.className = 'onboarding-hero';
hero.textContent = slide.hero;
slideEl.appendChild(hero);
const title = document.createElement('div');
title.className = 'onboarding-title';
title.textContent = slide.title;
slideEl.appendChild(title);
if (slide.text) {
const text = document.createElement('div');
text.className = 'onboarding-text';
text.textContent = slide.text;
slideEl.appendChild(text);
}
if (slide.features) {
const list = document.createElement('ul');
list.className = 'onboarding-feature-list';
slide.features.forEach(f => {
const li = document.createElement('li');
li.textContent = f;
list.appendChild(li);
});
slideEl.appendChild(list);
}
if (slide.showThemes) {
const grid = document.createElement('div');
grid.className = 'onboarding-theme-grid';
const themeNames = ['Nebula', 'Crescent', 'Event Horizon', 'Merchantman', 'Julia & Jin', 'SC Sunset', 'Hellion HUD', 'Hellion Energy'];
themeNames.forEach(name => {
const chip = document.createElement('div');
chip.className = 'onboarding-theme-chip';
chip.textContent = name;
grid.appendChild(chip);
});
slideEl.appendChild(grid);
}
modal.appendChild(slideEl);
// Footer
const footer = document.createElement('div');
footer.className = 'onboarding-footer';
// Dots
const dots = document.createElement('div');
dots.className = 'onboarding-dots';
for (let i = 0; i < this.slides.length; i++) {
const dot = document.createElement('div');
dot.className = 'onboarding-dot' + (i === this.currentSlide ? ' active' : '');
dots.appendChild(dot);
}
footer.appendChild(dots);
// Navigation
const nav = document.createElement('div');
nav.className = 'onboarding-nav';
if (this.currentSlide > 0) {
const backBtn = document.createElement('button');
backBtn.className = 'btn-secondary';
backBtn.textContent = 'Zur\u00FCck';
backBtn.addEventListener('click', () => {
this.currentSlide--;
this._render();
});
nav.appendChild(backBtn);
}
if (isLast) {
const startBtn = document.createElement('button');
startBtn.className = 'btn-primary';
startBtn.textContent = 'Los geht\u2019s!';
startBtn.addEventListener('click', () => this._finish());
nav.appendChild(startBtn);
} else {
const nextBtn = document.createElement('button');
nextBtn.className = 'btn-primary';
nextBtn.textContent = 'Weiter';
nextBtn.addEventListener('click', () => {
this.currentSlide++;
this._render();
});
nav.appendChild(nextBtn);
}
footer.appendChild(nav);
modal.appendChild(footer);
},
/** Keyboard-Navigation */
_bindKeyboard() {
this._keyHandler = (e) => {
if (e.key === 'ArrowRight' || e.key === 'Enter') {
e.preventDefault();
if (this.currentSlide < this.slides.length - 1) {
this.currentSlide++;
this._render();
} else {
this._finish();
}
}
if (e.key === 'ArrowLeft' && this.currentSlide > 0) {
e.preventDefault();
this.currentSlide--;
this._render();
}
if (e.key === 'Escape') {
e.preventDefault();
this._finish();
}
};
document.addEventListener('keydown', this._keyHandler);
}
};
src/js/opera/README.md
+47
View File
@@ -0,0 +1,47 @@
# ⬡ Opera GX — New-Tab Workaround
Opera GX priorisiert die eigene Speed Dial Seite und ignoriert `chrome_url_overrides`
für entpackte Erweiterungen. Um das Hellion Dashboard trotzdem als New-Tab-Seite
zu etablieren, kommen zwei zusätzliche Skripte zum Einsatz.
---
## Warum zwei extra Skripte?
| Browser | New-Tab Override | Zusatzaufwand |
|---|---|---|
| Chrome / Edge / Brave / Vivaldi | `chrome_url_overrides` | Keiner |
| Firefox | `chrome_url_overrides` (MV2) | Eigenes Manifest |
| Opera / Opera GX | Blockiert durch Speed Dial | Workaround nötig |
---
## Was passiert hier?
### `background.js` — Tab-Management
Überwacht Tab-Aktivitäten im Hintergrund und greift ein bevor Opera seine Startseite lädt.
- Erkennt `opera://startpage/` und `chrome://startpage/`
- Leitet per `chrome.tabs.update` auf `newtab.html` um
- Prüft zusätzlich bei `onActivated` — auch im Hintergrund geladene Tabs werden sofort aktualisiert
### `redirect.js` — In-Page Redirect
Einige Opera-Systemprozesse sind so isoliert dass ein externer Eingriff nicht zuverlässig greift.
- Wird als Content Script in Opera-Startseiten-Bereiche injiziert
- Löst den Redirect bei `document_start` aus — minimale Verzögerung, kein Flackern
---
## Datenschutz
Kein Tracking, keine Speicherung, keine externen Requests.
Ausschließlich Standard-Browser-APIs — `chrome.tabs` — um die Kontrolle über den New Tab zurückzugewinnen.
**100% lokal. 0% Analytics. Wie im gesamten Hellion NewTab Projekt.**
---
Entwickelt von **[Hellion Online Media — Florian Wathling](https://hellion-media.de)** — JonKazama-Hellion
src/js/opera/background.js
+34
View File
@@ -0,0 +1,34 @@
const dashboardUrl = chrome.runtime.getURL("newtab.html");
// Diese URLs wollen wir abfangen
const targetUrls = [
"chrome://startpage/",
"opera://startpage/",
"chrome://startpageshared/",
"about:blank"
];
function forceRedirect(tabId, url) {
if (url && targetUrls.some(target => url.startsWith(target))) {
chrome.tabs.update(tabId, { url: dashboardUrl });
}
}
// 1. Check beim Erstellen
chrome.tabs.onCreated.addListener((tab) => {
forceRedirect(tab.id, tab.pendingUrl || tab.url);
});
// 2. Check beim Aktualisieren (Wichtig für Opera GX!)
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
if (changeInfo.status === "loading" || changeInfo.url) {
forceRedirect(tabId, tab.url);
}
});
// 3. Intervall-Check: Falls Opera den Event verschluckt
chrome.tabs.onActivated.addListener((activeInfo) => {
chrome.tabs.get(activeInfo.tabId, (tab) => {
if (tab) forceRedirect(tab.id, tab.url);
});
});
src/js/opera/redirect.js
+6
View File
@@ -0,0 +1,6 @@
(function() {
const dashboardUrl = chrome.runtime.getURL("newtab.html");
if (window.location.href !== dashboardUrl) {
window.location.href = dashboardUrl;
}
})();
src/js/settings.js
+70 -12
View File
@@ -1,8 +1,9 @@
/* ============================================= /* =============================================
HELLION NEWTAB — settings.js HELLION NEWTAB — settings.js
Settings Panel: Toggles, Hintergrund, Theme-Picker Settings Panel, Theme-Modal, Accordion, Toggles
============================================= */ ============================================= */
// ---- SETTINGS PANEL ----
function openSettings() { function openSettings() {
document.getElementById('settingsPanel').classList.add('open'); document.getElementById('settingsPanel').classList.add('open');
document.getElementById('settingsOverlay').classList.add('active'); document.getElementById('settingsOverlay').classList.add('active');
@@ -12,6 +13,43 @@ function closeSettings() {
document.getElementById('settingsOverlay').classList.remove('active'); 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() { function applySettings() {
const body = document.body; const body = document.body;
body.classList.toggle('compact', settings.compact); body.classList.toggle('compact', settings.compact);
@@ -24,7 +62,7 @@ function applySettings() {
document.getElementById('settingShowDesc').checked = settings.showDesc; document.getElementById('settingShowDesc').checked = settings.showDesc;
document.getElementById('settingHideExtra').checked = settings.hideExtra; document.getElementById('settingHideExtra').checked = settings.hideExtra;
document.getElementById('settingVisibleCount').value = String(settings.visibleCount); 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 // showSearch: undefined (alter Save) → true
if (settings.showSearch === undefined) settings.showSearch = true; if (settings.showSearch === undefined) settings.showSearch = true;
@@ -40,13 +78,21 @@ function applySettings() {
} }
} }
// ---- BIND EVENTS ----
function bindSettingsEvents() { function bindSettingsEvents() {
// Panel // Settings Panel
document.getElementById('settingsOverlay').addEventListener('click', closeSettings); document.getElementById('settingsOverlay').addEventListener('click', closeSettings);
document.getElementById('btnCloseSettings').addEventListener('click', closeSettings); document.getElementById('btnCloseSettings').addEventListener('click', closeSettings);
document.getElementById('btnSettings').addEventListener('click', openSettings); 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 => { document.querySelectorAll('.theme-card').forEach(card => {
card.addEventListener('click', async () => { card.addEventListener('click', async () => {
const name = card.dataset.value; const name = card.dataset.value;
@@ -59,6 +105,9 @@ function bindSettingsEvents() {
}); });
}); });
// Accordion initialisieren
initAccordion();
// Toggles // Toggles
const toggleMap = { const toggleMap = {
settingCompact: v => { settings.compact = v; document.body.classList.toggle('compact', v); }, 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); }, settingShowDesc: v => { settings.showDesc = v; document.body.classList.toggle('show-desc', v); },
settingHideExtra: v => { settingHideExtra: v => {
settings.hideExtra = v; settings.hideExtra = v;
document.getElementById('visibleCountRow').style.opacity = v ? '1' : '0.4'; document.getElementById('visibleCountRow').classList.toggle('dim', !v);
renderBoards(); renderBoards();
}, },
settingShowSearch: v => { settingShowSearch: v => {
@@ -92,20 +141,19 @@ function bindSettingsEvents() {
renderBoards(); renderBoards();
}); });
// Background URL // Background URL (im Theme-Modal)
document.getElementById('btnChangeBg').addEventListener('click', () => { document.getElementById('btnChangeBg').addEventListener('click', () => {
const row = document.getElementById('bgInputRow'); document.getElementById('bgInputRow').classList.toggle('hidden');
row.style.display = row.style.display === 'none' ? 'flex' : 'none';
}); });
document.getElementById('btnApplyBg').addEventListener('click', async () => { document.getElementById('btnApplyBg').addEventListener('click', async () => {
const url = document.getElementById('bgUrlInput').value.trim(); const url = document.getElementById('bgUrlInput').value.trim();
settings.bgUrl = url; settings.bgUrl = url;
document.getElementById('bgLayer').style.backgroundImage = url ? `url('${url}')` : ''; document.getElementById('bgLayer').style.backgroundImage = url ? `url('${url}')` : '';
await saveSettings(); 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('btnBgFile').addEventListener('click', () => {
document.getElementById('bgFileInput').click(); document.getElementById('bgFileInput').click();
}); });
@@ -119,14 +167,24 @@ function bindSettingsEvents() {
await saveSettings(); await saveSettings();
}; };
reader.onerror = () => { 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); reader.readAsDataURL(file);
}); });
// Onboarding wiederholen
document.getElementById('btnRestartOnboarding').addEventListener('click', () => {
closeSettings();
Onboarding.start();
});
// Reset All // Reset All
document.getElementById('btnResetAll').addEventListener('click', async () => { 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 = []; boards = [];
settings = { compact: false, shortenTitles: false, newTab: true, showDesc: false, settings = { compact: false, shortenTitles: false, newTab: true, showDesc: false,
hideExtra: false, visibleCount: 10, bgUrl: '', theme: 'nebula', hideExtra: false, visibleCount: 10, bgUrl: '', theme: 'nebula',
src/js/storage.js
+2 -2
View File
@@ -23,7 +23,7 @@ const Store = {
chrome.storage.local.set({ [key]: value }, () => { chrome.storage.local.set({ [key]: value }, () => {
if (chrome.runtime.lastError) { if (chrome.runtime.lastError) {
console.error('Storage-Fehler:', chrome.runtime.lastError.message); console.error('Storage-Fehler:', chrome.runtime.lastError.message);
alert('Speicher voll! Bitte lösche alte Boards oder das Hintergrundbild, um Platz zu schaffen.'); HellionDialog.alert('Speicher voll! Bitte lösche alte Boards oder das Hintergrundbild, um Platz zu schaffen.', { type: 'danger', title: 'Speicher voll' });
reject(new Error(chrome.runtime.lastError.message)); reject(new Error(chrome.runtime.lastError.message));
return; return;
} }
@@ -35,7 +35,7 @@ const Store = {
resolve(); resolve();
} catch (e) { } catch (e) {
console.error('Storage-Fehler:', e.message); console.error('Storage-Fehler:', e.message);
alert('Speicher voll! Bitte lösche alte Boards oder das Hintergrundbild, um Platz zu schaffen.'); HellionDialog.alert('Speicher voll! Bitte lösche alte Boards oder das Hintergrundbild, um Platz zu schaffen.', { type: 'danger', title: 'Speicher voll' });
reject(e); reject(e);
} }
} }