196 lines
9.1 KiB
HTML
196 lines
9.1 KiB
HTML
<!doctype html>
|
|
<html lang="pl">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Albumik</title>
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
<body>
|
|
<div id="login" class="login-shell hidden">
|
|
<div class="login-card">
|
|
<div class="brand-badge">A</div>
|
|
<h1>Albumik</h1>
|
|
<p>Lekki prywatny album zdjęć na Twoim serwerze.</p>
|
|
<form id="loginForm">
|
|
<label>Login</label>
|
|
<input name="username" autocomplete="username" placeholder="admin" required />
|
|
<label>Hasło</label>
|
|
<input name="password" type="password" autocomplete="current-password" placeholder="Hasło" required />
|
|
<button type="submit">Zaloguj</button>
|
|
<div id="loginError" class="error-line"></div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="app" class="app hidden">
|
|
<aside class="sidebar">
|
|
<div class="logo-row">
|
|
<div class="logo-mark">A</div>
|
|
<div>
|
|
<div class="logo-title">Albumik</div>
|
|
<div class="logo-subtitle">foto.serwer</div>
|
|
</div>
|
|
</div>
|
|
<nav>
|
|
<button class="nav-item active" data-view="photos"><span>Galeria</span></button>
|
|
<button class="nav-item" data-view="pending"><span>Do akceptacji</span><em id="pendingBubble">0</em></button>
|
|
<button class="nav-item" data-view="folders"><span>Katalogi</span></button>
|
|
<button class="nav-item" data-view="tags"><span>Tagi</span></button>
|
|
<button class="nav-item admin-only" data-view="users"><span>Użytkownicy</span></button>
|
|
<button class="nav-item admin-only" data-view="logs"><span>Dziennik</span></button>
|
|
</nav>
|
|
<div class="sidebar-footer">
|
|
<div id="currentUser" class="current-user"></div>
|
|
<button id="logoutBtn" class="ghost-btn">Wyloguj</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<main class="main">
|
|
<header class="topbar">
|
|
<div class="searchbox">
|
|
<span>⌕</span>
|
|
<input id="searchInput" placeholder="Szukaj po nazwie, katalogu, tagu..." />
|
|
</div>
|
|
<div class="filters compact">
|
|
<input id="dateFrom" type="date" title="Od daty" />
|
|
<input id="dateTo" type="date" title="Do daty" />
|
|
<select id="tagFilter"><option value="">Wszystkie tagi</option></select>
|
|
<select id="statusFilter"><option value="approved">Zaakceptowane</option><option value="pending">Do akceptacji</option><option value="all">Wszystkie</option></select>
|
|
</div>
|
|
<button id="uploadOpenBtn" class="primary-btn">Dodaj zdjęcia</button>
|
|
</header>
|
|
|
|
<section class="stats-grid">
|
|
<div class="stat-card"><span>Zdjęcia</span><strong id="statPhotos">0</strong><small>zaakceptowane</small></div>
|
|
<div class="stat-card"><span>Do akceptacji</span><strong id="statPending">0</strong><small>od gości</small></div>
|
|
<div class="stat-card"><span>Katalogi</span><strong id="statFolders">0</strong><small>z dostępem</small></div>
|
|
<div class="stat-card"><span>Zajęte miejsce</span><strong id="statBytes">0 MB</strong><small>oryginały</small></div>
|
|
</section>
|
|
|
|
<section id="viewPhotos" class="view active-view">
|
|
<div class="section-head">
|
|
<div>
|
|
<h2>Zdjęcia</h2>
|
|
<p id="folderBreadcrumb">Wszystkie dostępne katalogi</p>
|
|
</div>
|
|
<div class="action-row">
|
|
<button id="newFolderBtn" class="soft-btn">Nowy katalog</button>
|
|
<button id="refreshBtn" class="soft-btn">Odśwież</button>
|
|
</div>
|
|
</div>
|
|
<div id="photoGrid" class="photo-grid"></div>
|
|
</section>
|
|
|
|
<section id="viewPending" class="view">
|
|
<div class="section-head">
|
|
<div><h2>Zdjęcia do akceptacji</h2><p>Goście wrzucają, admin lub uprawniony użytkownik zatwierdza.</p></div>
|
|
</div>
|
|
<div id="pendingGrid" class="photo-grid"></div>
|
|
</section>
|
|
|
|
<section id="viewFolders" class="view">
|
|
<div class="section-head">
|
|
<div><h2>Katalogi i podkatalogi</h2><p>Drzewo katalogów z głęboką strukturą.</p></div>
|
|
<button id="newFolderBtn2" class="primary-btn">Nowy katalog</button>
|
|
</div>
|
|
<div class="panel-card"><div id="folderTree" class="folder-tree"></div></div>
|
|
</section>
|
|
|
|
<section id="viewTags" class="view">
|
|
<div class="section-head"><div><h2>Tagi</h2><p>Szybkie tagowanie i filtrowanie zdjęć.</p></div><button id="newTagBtn" class="primary-btn">Nowy tag</button></div>
|
|
<div id="tagCloud" class="tag-cloud panel-card"></div>
|
|
</section>
|
|
|
|
<section id="viewUsers" class="view admin-only">
|
|
<div class="section-head"><div><h2>Użytkownicy i goście</h2><p>Admin, użytkownicy oraz goście z dostępem do wybranych katalogów.</p></div><button id="newUserBtn" class="primary-btn">Nowe konto</button></div>
|
|
<div id="usersTable" class="panel-card table-wrap"></div>
|
|
</section>
|
|
|
|
<section id="viewLogs" class="view admin-only">
|
|
<div class="section-head"><div><h2>Dziennik zdarzeń</h2><p>Kto, co i kiedy zrobił.</p></div></div>
|
|
<div id="logsList" class="panel-card logs-list"></div>
|
|
</section>
|
|
</main>
|
|
|
|
<aside class="rightbar">
|
|
<div class="side-card">
|
|
<h3>Katalogi</h3>
|
|
<div id="miniFolderTree" class="mini-tree"></div>
|
|
</div>
|
|
<div class="side-card">
|
|
<h3>Szybkie tagi</h3>
|
|
<div id="quickTags" class="quick-tags"></div>
|
|
</div>
|
|
<div class="side-card">
|
|
<h3>Aktywność</h3>
|
|
<div id="activityMini" class="activity-mini">Brak danych</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
|
|
<dialog id="uploadDialog" class="modal">
|
|
<form id="uploadForm" method="dialog">
|
|
<h3>Dodaj zdjęcia / filmy</h3>
|
|
<label>Katalog</label>
|
|
<select name="folder_id" id="uploadFolderSelect" required></select>
|
|
<label>Tagi, po przecinku</label>
|
|
<input name="tags" placeholder="wakacje, rodzina, morze" />
|
|
<label>Data utworzenia / wykonania</label>
|
|
<input name="taken_at" type="datetime-local" />
|
|
<label>Pliki</label>
|
|
<input name="file" type="file" multiple accept="image/*,video/*" required />
|
|
<div class="modal-actions"><button type="button" class="ghost-btn" data-close="uploadDialog">Anuluj</button><button class="primary-btn" type="submit">Wyślij</button></div>
|
|
<div id="uploadStatus" class="hint"></div>
|
|
</form>
|
|
</dialog>
|
|
|
|
<dialog id="folderDialog" class="modal">
|
|
<form id="folderForm" method="dialog">
|
|
<h3>Nowy katalog / podkatalog</h3>
|
|
<label>Nazwa</label><input name="name" placeholder="Lubiatowo 2024" required />
|
|
<label>Katalog nadrzędny</label><select name="parent_id" id="folderParentSelect"></select>
|
|
<label class="check"><input name="inherit_permissions" type="checkbox" checked /> Dziedzicz uprawnienia z nadrzędnego</label>
|
|
<div class="modal-actions"><button type="button" class="ghost-btn" data-close="folderDialog">Anuluj</button><button class="primary-btn" type="submit">Utwórz</button></div>
|
|
</form>
|
|
</dialog>
|
|
|
|
<dialog id="userDialog" class="modal">
|
|
<form id="userForm" method="dialog">
|
|
<h3>Nowe konto</h3>
|
|
<label>Login</label><input name="username" required />
|
|
<label>Nazwa wyświetlana</label><input name="display_name" />
|
|
<label>Hasło</label><input name="password" placeholder="Puste = wygeneruj" />
|
|
<label>Rola</label><select name="role"><option value="user">Użytkownik</option><option value="guest">Gość</option><option value="admin">Admin</option></select>
|
|
<label class="check"><input name="can_create_folders" type="checkbox" /> Może tworzyć katalogi</label>
|
|
<label class="check"><input name="can_upload" type="checkbox" /> Może wysyłać zdjęcia</label>
|
|
<label class="check"><input name="can_tag" type="checkbox" /> Może tagować</label>
|
|
<label>Konto ważne do</label><input name="expires_at" type="date" />
|
|
<div class="modal-actions"><button type="button" class="ghost-btn" data-close="userDialog">Anuluj</button><button class="primary-btn" type="submit">Utwórz</button></div>
|
|
<div id="userCreateResult" class="hint"></div>
|
|
</form>
|
|
</dialog>
|
|
|
|
<dialog id="photoDialog" class="modal wide-modal">
|
|
<div class="photo-detail">
|
|
<div class="photo-preview-wrap"><img id="photoPreview" alt="Podgląd" /></div>
|
|
<div class="photo-info">
|
|
<h3 id="photoTitle">Zdjęcie</h3>
|
|
<p id="photoMeta"></p>
|
|
<label>Tagi</label><input id="photoTagsInput" placeholder="tag1, tag2" />
|
|
<label>Przenieś do katalogu</label><select id="moveFolderSelect"></select>
|
|
<div class="modal-actions stack-actions">
|
|
<button id="saveTagsBtn" class="soft-btn">Zapisz tagi</button>
|
|
<button id="movePhotoBtn" class="soft-btn">Przenieś</button>
|
|
<button id="approvePhotoBtn" class="primary-btn">Akceptuj</button>
|
|
<button id="rejectPhotoBtn" class="danger-btn">Odrzuć</button>
|
|
<button type="button" class="ghost-btn" data-close="photoDialog">Zamknij</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</dialog>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|