From 274762c825a847d2f43284d03e969111ef839c71 Mon Sep 17 00:00:00 2001 From: Meik Date: Sun, 16 Nov 2025 13:44:11 +0100 Subject: [PATCH] reworked site --- web/app.js | 62 +--- web/bookmarks.html | 65 +--- web/dashboard.html | 274 +--------------- web/dashboard.js | 22 +- web/index.html | 798 +++++++++++++++++++++++++++++++++++++-------- web/posts.html | 134 +------- web/settings.html | 197 +---------- web/settings.js | 2 + web/style.css | 37 +++ 9 files changed, 775 insertions(+), 816 deletions(-) diff --git a/web/app.js b/web/app.js index 4119280..49a76bd 100644 --- a/web/app.js +++ b/web/app.js @@ -1,27 +1,12 @@ const API_URL = 'https://fb.srv.medeba-media.de/api'; let initialViewParam = null; - -// Normalize incoming routing parameters without leaving the index view -(function normalizeViewRouting() { - try { - const params = new URLSearchParams(window.location.search); - const view = params.get('view'); - if (!view) { - return; - } - - if (view === 'dashboard') { - initialViewParam = view; - params.delete('view'); - const remaining = params.toString(); - const newUrl = `${window.location.pathname}${remaining ? `?${remaining}` : ''}${window.location.hash}`; - window.history.replaceState({}, document.title, newUrl); - } - } catch (error) { - console.warn('Konnte view-Parameter nicht verarbeiten:', error); - } -})(); +try { + const params = new URLSearchParams(window.location.search); + initialViewParam = params.get('view'); +} catch (error) { + console.warn('Konnte view-Parameter nicht auslesen:', error); +} let focusPostIdParam = null; let focusPostUrlParam = null; @@ -145,9 +130,6 @@ function scheduleUpdatesReconnect() { } function startUpdatesStream() { - if (isBookmarksPage) { - return; - } if (typeof EventSource === 'undefined') { console.warn('EventSource wird von diesem Browser nicht unterstützt. Fallback auf Polling.'); return; @@ -253,7 +235,6 @@ const bookmarkSearchInput = document.getElementById('bookmarkSearchInput'); const bookmarkSortSelect = document.getElementById('bookmarkSortSelect'); const bookmarkSortDirectionToggle = document.getElementById('bookmarkSortDirectionToggle'); const profileSelectElement = document.getElementById('profileSelect'); -const isBookmarksPage = document.body.classList.contains('bookmarks-page'); const REFRESH_SETTINGS_KEY = 'trackerRefreshSettings'; const SORT_SETTINGS_KEY = 'trackerSortSettings'; @@ -2414,10 +2395,6 @@ function applyAutoRefreshSettings() { : ''; } - if (isBookmarksPage) { - return; - } - if (!autoRefreshSettings.enabled) { return; } @@ -2730,10 +2707,8 @@ function applyProfileNumber(profileNumber, { fromBackend = false } = {}) { pushProfileState(currentProfile); } - if (!isBookmarksPage) { - resetVisibleCount(); - renderPosts(); - } + resetVisibleCount(); + renderPosts(); } // Load profile from localStorage @@ -2809,9 +2784,6 @@ if (autoRefreshToggle) { autoRefreshSettings.enabled = !!autoRefreshToggle.checked; saveAutoRefreshSettings(); applyAutoRefreshSettings(); - if (isBookmarksPage) { - return; - } if (autoRefreshSettings.enabled && updatesStreamHealthy) { console.info('Live-Updates sind aktiv; automatisches Refresh bleibt pausiert.'); } @@ -4119,9 +4091,7 @@ function checkAutoCheck() { } catch (error) { console.warn('Konnte check-Parameter nicht entfernen:', error); } - if (!isBookmarksPage) { - fetchPosts({ showLoader: false }); - } + fetchPosts({ showLoader: false }); }).catch(console.error); } } @@ -4190,12 +4160,10 @@ loadAutoRefreshSettings(); initializeFocusParams(); initializeTabFromUrl(); loadSortMode(); -if (!isBookmarksPage) { - resetManualPostForm(); - loadProfile(); - startProfilePolling(); - fetchPosts(); - checkAutoCheck(); - startUpdatesStream(); -} +resetManualPostForm(); +loadProfile(); +startProfilePolling(); +fetchPosts(); +checkAutoCheck(); +startUpdatesStream(); applyAutoRefreshSettings(); diff --git a/web/bookmarks.html b/web/bookmarks.html index 69f1ccb..4f8e4f5 100644 --- a/web/bookmarks.html +++ b/web/bookmarks.html @@ -2,61 +2,20 @@ + Bookmarks – Post Tracker - Post Tracker – Bookmarks - - - + - -
-
-
-
-

🔖 Bookmarks

- Zurück zum Dashboard -
-

Über die Bookmarks kannst du auf einen Schlag mehrere relevante Suchanfragen öffnen.

-
- -
- - -
-
-
-
-
- - -
-
- - -
-

Öffnet drei Varianten (… Gewinnspiel / … gewinnen / … verlosen) mit Filter auf die letzten vier Wochen.

-
-
-
-
- + +

Weiterleitung zur Bookmarks-Ansicht…

diff --git a/web/dashboard.html b/web/dashboard.html index 0ee833c..1e5922a 100644 --- a/web/dashboard.html +++ b/web/dashboard.html @@ -2,272 +2,20 @@ + Dashboard – Post Tracker - Dashboard - Facebook Post Tracker - - - - + -
-
-
-

📊 Dashboard

-
-
-
- - -
-
- - -
- -
-
- -
Lade Statistiken...
- - - -
- - +

Weiterleitung zum Dashboard…

diff --git a/web/dashboard.js b/web/dashboard.js index b1b31d8..aa693c1 100644 --- a/web/dashboard.js +++ b/web/dashboard.js @@ -1,17 +1,6 @@ +(() => { const API_URL = 'https://fb.srv.medeba-media.de/api'; -// Check if we should redirect to posts view -(function checkViewRouting() { - const params = new URLSearchParams(window.location.search); - const view = params.get('view'); - if (view === 'posts') { - // Remove view parameter and keep other params - params.delete('view'); - const remainingParams = params.toString(); - window.location.href = 'index.html' + (remainingParams ? '?' + remainingParams : ''); - } -})(); - let posts = []; let filteredPosts = []; let currentTimeFilter = 'week'; @@ -323,21 +312,21 @@ function apiFetch(url, options = {}) { } function showLoading() { - const loading = document.getElementById('loading'); + const loading = document.getElementById('dashboardLoading'); if (loading) { loading.style.display = 'block'; } } function hideLoading() { - const loading = document.getElementById('loading'); + const loading = document.getElementById('dashboardLoading'); if (loading) { loading.style.display = 'none'; } } function showError(message) { - const error = document.getElementById('error'); + const error = document.getElementById('dashboardError'); if (error) { error.textContent = message; error.style.display = 'block'; @@ -345,7 +334,7 @@ function showError(message) { } function hideError() { - const error = document.getElementById('error'); + const error = document.getElementById('dashboardError'); if (error) { error.style.display = 'none'; } @@ -1579,3 +1568,4 @@ document.getElementById('refreshBtn')?.addEventListener('click', () => { // Initialize fetchPosts(); +})(); diff --git a/web/index.html b/web/index.html index aebc607..b43d19e 100644 --- a/web/index.html +++ b/web/index.html @@ -8,148 +8,675 @@ - + + - -
-
-
-
-
-

📋 Post Tracker

-

Alle Bereiche über diese Navigation laden

-
-
- - - - -
+ +
+
+
+
+
+

📋 Post Tracker

+

Alle Bereiche ohne Seitenwechsel erreichen

+
+
+ + + +
-
-
- +
+
+
+
+
+
+
+

📋 Post Tracker

+ +
+
+
+ + +
+
+ + + +
+
+ +
+ + +
+
+
+
+ +
+
+ + + +
+
+ +
+
+ +
Lade Beiträge...
+ + +
+
+ + + + +
+
+
+
+
+

📊 Dashboard

+
+
+
+ + +
+
+ + +
+ +
+
+ +
Lade Statistiken...
+ + + +
+
+
+
+ + + + + +
+ + +
+

AI-Anmeldedaten

+

+ Verwalte deine API-Schlüssel für verschiedene AI-Provider. Du kannst mehrere Credentials speichern und schnell zwischen ihnen wechseln. +

+ +
+ + +
+ + +
+

AI-Kommentar-Generator

+

+ Konfiguriere die automatische Generierung von Kommentaren durch KI. +

+ +
+
+ +
+ +
+ + +

+ Wähle welche API-Anmeldedaten verwendet werden sollen +

+
+ +
+ + +

+ Dieser Text wird vor dem eigentlichen Post-Text an die KI gesendet. Verwende {FREUNDE} als Platzhalter für Freundesnamen. +

+
+
+
+ + +
+

👥 Freundesnamen pro Profil

+

+ Gib für jedes Profil eine Liste von Freundesnamen an, die im Prompt verwendet werden können. +

+ +
+
+ + +
+
+ + +
+
+ +
+
+ + + + + + +
+
+
+
+
+
+

🔖 Bookmarks

+ Zurück zum Dashboard +
+

Über die Bookmarks kannst du auf einen Schlag mehrere relevante Suchanfragen öffnen.

+
+ +
+ + +
+
+
+
+
+ + +
+
+ + +
+

Öffnet drei Varianten (… Gewinnspiel / … gewinnen / … verlosen) mit Filter auf die letzten vier Wochen.

+
+
+
+
+
+ + + diff --git a/web/posts.html b/web/posts.html index 5a04f1f..267cde1 100644 --- a/web/posts.html +++ b/web/posts.html @@ -2,131 +2,21 @@ + Beiträge – Post Tracker - Post Tracker - Web Interface - - - + -
-
-
-

📋 Post Tracker

- -
-
-
- - -
-
- - - -
-
- -
- - -
-
-
-
- -
-
- - - -
-
- -
-
- -
Lade Beiträge...
- - -
-
- - - - - - +

Weiterleitung zur Beiträge-Ansicht…

diff --git a/web/settings.html b/web/settings.html index d2ca8b8..45be2fc 100644 --- a/web/settings.html +++ b/web/settings.html @@ -2,195 +2,20 @@ + Einstellungen – Post Tracker - Einstellungen - Facebook Post Tracker - - - - + -
- - - - - -
- - -
-

AI-Anmeldedaten

-

- Verwalte deine API-Schlüssel für verschiedene AI-Provider. Du kannst mehrere Credentials speichern und schnell zwischen ihnen wechseln. -

- -
- - -
- - -
-

AI-Kommentar-Generator

-

- Konfiguriere die automatische Generierung von Kommentaren durch KI. -

- -
-
- -
- -
- - -

- Wähle welche API-Anmeldedaten verwendet werden sollen -

-
- -
- - -

- Dieser Text wird vor dem eigentlichen Post-Text an die KI gesendet. Verwende {FREUNDE} als Platzhalter für Freundesnamen. -

-
-
-
- - -
-

👥 Freundesnamen pro Profil

-

- Gib für jedes Profil eine Liste von Freundesnamen an, die im Prompt verwendet werden können. -

- -
-
- - -
-
- - -
-
- -
-
- - - - - - - - +

Weiterleitung zu den Einstellungen…

diff --git a/web/settings.js b/web/settings.js index 5378e3b..a367e4c 100644 --- a/web/settings.js +++ b/web/settings.js @@ -1,3 +1,4 @@ +(() => { const API_URL = 'https://fb.srv.medeba-media.de/api'; const PROVIDER_MODELS = { @@ -792,3 +793,4 @@ document.getElementById('generateTestComment').addEventListener('click', generat // Initialize Promise.all([loadCredentials(), loadSettings(), loadProfileFriends()]).catch(err => showError(err.message)); +})(); diff --git a/web/style.css b/web/style.css index 4891fd3..97fbb80 100644 --- a/web/style.css +++ b/web/style.css @@ -11,6 +11,18 @@ body { line-height: 1.5; } +.shell { + min-height: 100vh; + display: flex; + flex-direction: column; + background: #f0f2f5; +} + +.shell-main { + flex: 1; + padding-bottom: 40px; +} + .container { max-width: 1200px; margin: 0 auto; @@ -29,6 +41,12 @@ header { gap: 12px; } +.site-header__subtitle { + margin: 0; + font-size: 13px; + color: #6b7280; +} + .page-toolbar { background: white; padding: 16px 18px; @@ -61,6 +79,17 @@ header { flex-wrap: wrap; } +.site-nav .btn { + border-radius: 999px; + padding-inline: 20px; +} + +.site-nav .btn.nav-active { + background: #111827; + color: #ffffff; + border-color: #111827; +} + .header-controls { display: flex; flex-wrap: wrap; @@ -155,6 +184,14 @@ header { transform: scale(0.95); } +.app-view { + display: none; +} + +.app-view--active { + display: block; +} + .control-group label { font-weight: 600; }