Meik/PostTracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

reworked site

Browse Source
This commit is contained in:
Meik
2025-11-16 13:02:05 +01:00
parent 339f03e38e
commit f9d8fc5b82
8 changed files with 628 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

284
web/index.html
View File

@@ -3,161 +3,159 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Post Tracker - Web Interface</title>
<title>Post Tracker</title>
<link rel="icon" type="image/png" sizes="32x32" href="assets/app-icon-64.png">
<link rel="icon" type="image/png" sizes="192x192" href="assets/app-icon-192.png">
<link rel="apple-touch-icon" href="assets/app-icon-192.png">
<link rel="stylesheet" href="style.css">
<style>
body {
margin: 0;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
background: #f4f5f7;
color: #111827;
}
.shell {
min-height: 100vh;
display: flex;
flex-direction: column;
background: #f4f5f7;
}
.site-header {
background: #ffffff;
border-bottom: 1px solid #e5e7eb;
padding: 16px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
}
.site-header__brand h1 {
margin: 0;
font-size: 20px;
}
.site-header__nav {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.site-header__nav-btn {
border: 1px solid transparent;
background: transparent;
padding: 10px 18px;
border-radius: 999px;
font-size: 14px;
font-weight: 600;
color: #111827;
cursor: pointer;
transition: all 0.2s;
}
.site-header__nav-btn:hover {
background: #eef2ff;
border-color: #c7d2fe;
}
.site-header__nav-btn.active {
background: #111827;
color: #ffffff;
border-color: #111827;
}
.shell-main {
flex: 1;
min-height: 0;
}
#appFrame {
width: 100%;
height: calc(100vh - 72px);
border: none;
}
@media (max-width: 640px) {
.site-header {
flex-direction: column;
align-items: flex-start;
}
#appFrame {
height: calc(100vh - 140px);
}
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="header-main">
<div class="shell">
<header class="site-header">
<div class="site-header__brand">
<h1>📋 Post Tracker</h1>
<div class="header-links">
<a href="?view=dashboard" class="btn btn-secondary">Dashboard</a>
<a href="settings.html" class="btn btn-secondary">⚙️ Einstellungen</a>
<div class="bookmark-inline">
<button type="button" class="btn btn-secondary bookmark-inline__toggle" id="bookmarkPanelToggle" aria-expanded="false" aria-controls="bookmarkPanel">🔖 Bookmarks</button>
<div id="bookmarkPanel" class="bookmark-panel" role="dialog" aria-modal="false" hidden>
<div class="bookmark-panel__header">
<h2 class="bookmark-panel__title">🔖 Bookmarks</h2>
<button type="button" class="bookmark-panel__close" id="bookmarkPanelClose" aria-label="Schließen">×</button>
</div>
<div id="bookmarksList" class="bookmark-list" role="list" aria-live="polite"></div>
<form id="bookmarkForm" class="bookmark-form" autocomplete="off">
<div class="bookmark-form__fields">
<label class="bookmark-form__field">
<span>Titel</span>
<input type="text" id="bookmarkName" maxlength="40" placeholder="Optionaler Titel">
</label>
<label class="bookmark-form__field">
<span>Keyword *</span>
<input type="text" id="bookmarkQuery" required placeholder="z.B. gewinnspiel">
</label>
</div>
<div class="bookmark-form__actions">
<button type="submit" class="btn btn-primary">Speichern</button>
<button type="button" class="btn btn-secondary" id="bookmarkCancelBtn">Zurücksetzen</button>
</div>
<p class="bookmark-form__hint">Öffnet für das Keyword drei Suchen (… Gewinnspiel / … gewinnen / … verlosen) mit Filter auf die letzten 4 Wochen.</p>
</form>
</div>
</div>
<button type="button" class="btn btn-primary" id="openManualPostModalBtn">Beitrag hinzufügen</button>
</div>
</div>
<div class="header-controls">
<div class="control-group">
<label for="profileSelect">Dein Profil:</label>
<select id="profileSelect" class="control-select">
<option value="1">Profil 1</option>
<option value="2">Profil 2</option>
<option value="3">Profil 3</option>
<option value="4">Profil 4</option>
<option value="5">Profil 5</option>
</select>
</div>
<div class="control-group">
<label class="switch">
<input type="checkbox" id="autoRefreshToggle" checked>
<span>Auto-Refresh</span>
</label>
<select id="autoRefreshInterval" class="control-select">
<option value="15000">15 s</option>
<option value="30000">30 s</option>
<option value="60000">1 min</option>
<option value="120000">2 min</option>
<option value="300000">5 min</option>
</select>
<button type="button" id="manualRefreshBtn" class="refresh-btn" aria-label="Aktualisieren" title="Aktualisieren">🔄</button>
</div>
<div class="control-group">
<label for="sortMode">Sortierung:</label>
<div class="sort-controls">
<select id="sortMode" class="control-select">
<option value="created">Erstelldatum</option>
<option value="deadline">Deadline</option>
<option value="lastCheck">Letzte Teilnahme</option>
<option value="lastChange">Letzte Änderung</option>
<option value="smart">Smart (Dringlichkeit)</option>
</select>
<button type="button" id="sortDirectionToggle" class="sort-direction-toggle" aria-label="Absteigend" aria-pressed="false" title="Absteigend">
<span class="sort-direction-toggle__icon" aria-hidden="true">▼</span>
</button>
</div>
</div>
<p style="margin: 0; font-size: 13px; color: #6b7280;">Alle Bereiche über diese Navigation laden</p>
</div>
<nav class="site-header__nav">
<button type="button" class="site-header__nav-btn" data-view-target="posts">Beiträge</button>
<button type="button" class="site-header__nav-btn" data-view-target="dashboard">Dashboard</button>
<button type="button" class="site-header__nav-btn" data-view-target="settings">⚙️ Einstellungen</button>
<button type="button" class="site-header__nav-btn" data-view-target="bookmarks">🔖 Bookmarks</button>
</nav>
</header>
<div class="tabs-section">
<div class="tabs">
<button class="tab-btn active" data-tab="pending">Offene Beiträge</button>
<button class="tab-btn" data-tab="expired">Abgelaufen/Abgeschlossen</button>
<button class="tab-btn" data-tab="all">Alle Beiträge</button>
</div>
<div class="search-container">
<input type="text" id="searchInput" class="search-input" placeholder="Beiträge durchsuchen...">
</div>
</div>
<div id="loading" class="loading">Lade Beiträge...</div>
<div id="error" class="error" style="display: none;"></div>
<div id="postsContainer" class="posts-container"></div>
<main class="shell-main">
<iframe id="appFrame" src="" title="Post Tracker Inhalt" loading="lazy"></iframe>
</main>
</div>
<div id="screenshotModal" class="screenshot-modal" hidden>
<div id="screenshotModalBackdrop" class="screenshot-modal__backdrop" aria-hidden="true"></div>
<div id="screenshotModalContent" class="screenshot-modal__content" role="dialog" aria-modal="true">
<button type="button" id="screenshotModalClose" class="screenshot-modal__close" aria-label="Schließen">×</button>
<img id="screenshotModalImage" alt="Screenshot zum Beitrag" />
</div>
</div>
<script>
(function () {
const frame = document.getElementById('appFrame');
const buttons = Array.from(document.querySelectorAll('[data-view-target]'));
const viewUrls = {
posts: 'posts.html',
dashboard: 'dashboard.html',
settings: 'settings.html',
bookmarks: 'bookmarks.html'
};
<div id="manualPostModal" class="modal" hidden>
<div id="manualPostModalBackdrop" class="modal__backdrop" aria-hidden="true"></div>
<div id="manualPostModalContent" class="modal__content" role="dialog" aria-modal="true" aria-labelledby="manualPostModalTitle" tabindex="-1">
<button type="button" id="manualPostModalClose" class="modal__close" aria-label="Schließen">×</button>
<h2 id="manualPostModalTitle">Beitrag hinzufügen</h2>
<form id="manualPostForm" novalidate>
<div class="form-grid">
<label class="form-field">
<span>Direktlink *</span>
<input type="url" id="manualPostUrl" placeholder="https://www.facebook.com/..." required>
</label>
<label class="form-field">
<span>Titel</span>
<input type="text" id="manualPostTitle" placeholder="Kurzbeschreibung" maxlength="200">
</label>
<label class="form-field">
<span>Benötigte Profile *</span>
<select id="manualPostTarget" required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</label>
<label class="form-field">
<span>Erstellt von (Facebook-Name)</span>
<input type="text" id="manualPostCreatorName" placeholder="z.B. Max Mustermann">
</label>
<label class="form-field">
<span>Deadline</span>
<input type="datetime-local" id="manualPostDeadline">
</label>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary" id="manualPostSubmitBtn">Speichern</button>
<button type="button" class="btn btn-secondary" id="manualPostReset">Zurücksetzen</button>
</div>
<div id="manualPostMessage" class="form-message" role="status" aria-live="polite"></div>
</form>
</div>
</div>
const queryParams = new URLSearchParams(window.location.search);
const initial = queryParams.get('view');
const defaultView = initial && viewUrls[initial] ? initial : 'posts';
<script src="app.js"></script>
function setView(view) {
buttons.forEach((button) => {
button.classList.toggle('active', button.dataset.viewTarget === view);
});
const targetUrl = viewUrls[view] || viewUrls.posts;
if (frame.src !== targetUrl) {
frame.src = targetUrl;
}
const params = new URLSearchParams(window.location.search);
if (view === 'posts') {
params.delete('view');
} else {
params.set('view', view);
}
const url = params.toString() ? `?${params.toString()}` : window.location.pathname;
window.history.replaceState({}, document.title, url);
}
buttons.forEach((button) => {
button.addEventListener('click', () => {
setView(button.dataset.viewTarget);
});
});
setView(defaultView);
})();
</script>
</body>
</html>