137 lines
6.0 KiB
HTML
137 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Post Tracker - Web Interface</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">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header>
|
||
<div class="header-main">
|
||
<h1>📋 Post Tracker</h1>
|
||
<div style="display: flex; gap: 10px;">
|
||
<a href="?view=dashboard" class="btn btn-secondary">Dashboard</a>
|
||
<a href="settings.html" class="btn btn-secondary">⚙️ Einstellungen</a>
|
||
<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>
|
||
</div>
|
||
</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>
|
||
</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>
|
||
|
||
<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>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|