177 lines
5.5 KiB
HTML
177 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="it">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Galleria</title>
|
||
|
||
<!-- Inizializzazione BASE_URL -->
|
||
<script>
|
||
window.BASE_URL = "";
|
||
window.AppConfig = { ready: true };
|
||
window.dispatchEvent(new Event("config:ready"));
|
||
</script>
|
||
|
||
<!-- CSS -->
|
||
<link rel="stylesheet" href="/css/base.css">
|
||
<link rel="stylesheet" href="/css/header.css">
|
||
<link rel="stylesheet" href="/css/gallery.css">
|
||
<link rel="stylesheet" href="/css/map.css">
|
||
<link rel="stylesheet" href="/css/modal.css">
|
||
<link rel="stylesheet" href="/css/infoPanel.css">
|
||
<link rel="stylesheet" href="/css/bottomSheet.css">
|
||
<link rel="stylesheet" href="/css/optionsSheet.css">
|
||
<link rel="stylesheet" href="/css/utils.css">
|
||
|
||
<style>
|
||
#authLoader {
|
||
position: fixed;
|
||
inset: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #fff;
|
||
font-size: 1.4rem;
|
||
z-index: 9999;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div id="authLoader">Caricamento…</div>
|
||
|
||
<div id="app" style="display:none">
|
||
|
||
<!-- HEADER -->
|
||
<header class="topbar">
|
||
<h1>Galleria</h1>
|
||
|
||
<div class="top-buttons">
|
||
|
||
<label>
|
||
<input type="checkbox" id="showDeleted">
|
||
Mostra foto eliminate
|
||
</label>
|
||
|
||
<button id="openMapBtn" class="icon-btn">🗺️</button>
|
||
|
||
<button class="icon-btn" id="optionsBtn">⋮</button>
|
||
|
||
<button class="icon-btn" id="configBtn">
|
||
⚙️
|
||
</button>
|
||
|
||
<button class="icon-btn logout-btn" id="logoutBtn" data-logout data-redirect="/login">
|
||
<img src="logout.png" class="logout-icon" alt="Logout">
|
||
</button>
|
||
|
||
</div>
|
||
</header>
|
||
|
||
<!-- GALLERY -->
|
||
<div id="gallery"></div>
|
||
|
||
<!-- MAPPA -->
|
||
<div id="globalMap" class="global-map"></div>
|
||
|
||
<!-- MODAL -->
|
||
<div id="modal" class="modal" aria-hidden="true">
|
||
<button id="modalClose" class="modal-close">×</button>
|
||
<div id="modalMediaContainer" class="modal-media"></div>
|
||
<button id="modalPrev" class="modal-nav-btn hidden">‹</button>
|
||
<button id="modalNext" class="modal-nav-btn hidden">›</button>
|
||
</div>
|
||
|
||
<!-- INFO PANEL -->
|
||
<aside id="infoPanel" class="info-panel" aria-hidden="true"></aside>
|
||
|
||
<!-- BOTTOM SHEET (MAPPA) -->
|
||
<div id="bottomSheet" class="bottom-sheet">
|
||
<div class="sheet-header"></div>
|
||
<div id="sheetGallery" class="sheet-gallery"></div>
|
||
</div>
|
||
|
||
<!-- OPTIONS SHEET -->
|
||
<div id="optionsSheet" class="options-sheet">
|
||
<div class="sheet-header"></div>
|
||
<div class="sheet-content">
|
||
<h3>Ordinamento</h3>
|
||
<button class="sheet-btn" data-sort="asc">Data ↑</button>
|
||
<button class="sheet-btn" data-sort="desc">Data ↓</button>
|
||
|
||
<h3>Raggruppamento</h3>
|
||
<button class="sheet-btn" data-group="auto">Automatico</button>
|
||
<button class="sheet-btn" data-group="day">Giorno</button>
|
||
<button class="sheet-btn" data-group="month">Mese</button>
|
||
<button class="sheet-btn" data-group="year">Anno</button>
|
||
|
||
<h3>Filtri</h3>
|
||
<button class="sheet-btn" data-filter="">Tutto</button>
|
||
<button class="sheet-btn" data-filter="folder">Con cartella</button>
|
||
<button class="sheet-btn" data-filter="location">Con GPS</button>
|
||
<button class="sheet-btn" data-filter="type">Solo immagini</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- OVERLAY -->
|
||
<div id="sheetOverlay" class="sheet-overlay"></div>
|
||
|
||
</div>
|
||
|
||
<!-- Leaflet CSS -->
|
||
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
|
||
|
||
<!-- MarkerCluster CSS -->
|
||
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.css" />
|
||
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.Default.css" />
|
||
|
||
<!-- Leaflet JS -->
|
||
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
||
|
||
<!-- MarkerCluster JS -->
|
||
<script src="https://unpkg.com/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
|
||
|
||
<!-- Script -->
|
||
<script src="/js/config.js"></script>
|
||
<script src="/js/auth.js"></script>
|
||
<script src="/js/logout.js"></script>
|
||
|
||
<script src="/js/api.js"></script>
|
||
<script src="/js/state.js"></script>
|
||
<script src="/js/sync.js"></script>
|
||
<script src="/js/gallery.js"></script>
|
||
<script src="/js/mapGlobal.js"></script>
|
||
<script src="/js/modal.js"></script>
|
||
<script src="/js/infoPanel.js"></script>
|
||
<script src="/js/bottomSheet.js"></script>
|
||
<script src="/js/optionsSheet.js"></script>
|
||
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", () => {
|
||
const token = localStorage.getItem("token");
|
||
|
||
if (!token) {
|
||
window.location.assign("/login?redirect=/");
|
||
return;
|
||
}
|
||
|
||
document.getElementById("authLoader").style.display = "none";
|
||
document.getElementById("app").style.display = "block";
|
||
document.body.classList.add("authenticated");
|
||
});
|
||
|
||
document.getElementById("openMapBtn").addEventListener("click", () => {
|
||
document.getElementById("globalMap").classList.toggle("visible");
|
||
});
|
||
|
||
document.getElementById("configBtn").addEventListener("click", () => {
|
||
window.location.href = "/admin.html";
|
||
});
|
||
</script>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
|
||
<script>eruda.init();</script>
|
||
|
||
</body>
|
||
</html>
|