1adf88d195
- Wallabag v2 API compatible (OAuth2, entries CRUD, tags) - Express + SQLite (better-sqlite3), zero extra deps - Gated web UI with session auth - PWA: service worker, manifest, offline support - Mobile-first design, dark mode, FAB + modal
90 lines
3.7 KiB
HTML
90 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
|
<title>bagg</title>
|
|
<link rel="stylesheet" href="/style.css">
|
|
<link rel="manifest" href="/manifest.json">
|
|
<meta name="theme-color" content="#2563eb" id="theme-color-meta">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
|
<meta name="apple-mobile-web-app-title" content="bagg">
|
|
<link rel="apple-touch-icon" href="/icons/icon-192.png">
|
|
</head>
|
|
<body>
|
|
|
|
<div class="offline-banner" id="offline-banner">You're offline — showing cached data</div>
|
|
|
|
<div id="app">
|
|
<nav class="navbar">
|
|
<div class="navbar-inner">
|
|
<span class="nav-brand">bagg</span>
|
|
<button class="nav-btn" id="btn-theme" title="Toggle theme" aria-label="Toggle theme">
|
|
<svg id="icon-sun" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
|
|
<svg id="icon-moon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" style="display:none"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
|
|
</button>
|
|
<button class="nav-btn" id="btn-logout" title="Sign out" aria-label="Sign out">
|
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="tabs">
|
|
<div class="tabs-inner">
|
|
<button class="tab-btn active" data-filter="all">All</button>
|
|
<button class="tab-btn" data-filter="unread">Unread</button>
|
|
<button class="tab-btn" data-filter="starred">Starred</button>
|
|
<button class="tab-btn" data-filter="archived">Archived</button>
|
|
</div>
|
|
</div>
|
|
|
|
<main class="content">
|
|
<div id="entries-container">
|
|
<div class="loading">
|
|
<div class="spinner"></div>
|
|
<p>Loading…</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- FAB -->
|
|
<button class="fab" id="btn-add" title="Save a link" aria-label="Save a link">
|
|
<svg width="22" height="22" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
|
|
</button>
|
|
|
|
<!-- Add link modal -->
|
|
<div class="modal-overlay" id="modal-add" role="dialog" aria-modal="true" aria-label="Save a link">
|
|
<div class="modal">
|
|
<h2>Save a link</h2>
|
|
<label for="input-url">URL</label>
|
|
<input
|
|
type="url"
|
|
id="input-url"
|
|
placeholder="https://example.com/article"
|
|
inputmode="url"
|
|
autocomplete="url"
|
|
autocapitalize="none"
|
|
autocorrect="off"
|
|
>
|
|
<label for="input-title">Title <span style="color:var(--text3);font-weight:400">(optional)</span></label>
|
|
<input
|
|
type="text"
|
|
id="input-title"
|
|
placeholder="Leave empty to use page title"
|
|
>
|
|
<div class="modal-actions">
|
|
<button class="btn-secondary" id="btn-modal-cancel">Cancel</button>
|
|
<button class="btn-primary-sm" id="btn-modal-save">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast container -->
|
|
<div class="toast-container" id="toasts"></div>
|
|
|
|
<script src="/app.js"></script>
|
|
</body>
|
|
</html>
|