262 lines
7.8 KiB
Text
262 lines
7.8 KiB
Text
<!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/activityModal.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">
|
||
|
||
<!-- 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">
|
||
|
||
<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 class="photos">
|
||
|
||
<div id="authLoader">Caricamento…</div>
|
||
|
||
<div id="app" style="display:none">
|
||
|
||
<!-- HEADER -->
|
||
<header class="topbar">
|
||
<h1>Galleria</h1>
|
||
|
||
<!-- TOGGLE PHOTOS / ACTIVITIES -->
|
||
<div id="modeToggle" class="mode-toggle">
|
||
<button type="button" data-mode="photos" class="active">Foto</button>
|
||
<button type="button" data-mode="activities">Attività</button>
|
||
</div>
|
||
|
||
<div class="top-buttons">
|
||
<label>
|
||
<input type="checkbox" id="showDeleted">
|
||
Mostra cancellate
|
||
</label>
|
||
|
||
<button id="openMapBtn" class="icon-btn" type="button" aria-label="Apri mappa">🗺️</button>
|
||
|
||
<button class="icon-btn" id="optionsBtn" type="button" aria-label="Apri opzioni">⋮</button>
|
||
|
||
<button class="icon-btn" id="configBtn" type="button" aria-label="Apri configurazione">
|
||
⚙️
|
||
</button>
|
||
|
||
<button
|
||
class="icon-btn logout-btn"
|
||
id="logoutBtn"
|
||
type="button"
|
||
data-logout
|
||
data-redirect="/login"
|
||
aria-label="Logout"
|
||
>
|
||
<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 FOTO E VIDEO -->
|
||
<div id="modal" class="modal" aria-hidden="true">
|
||
<button id="modalClose" class="modal-close" type="button" aria-label="Chiudi">×</button>
|
||
<div id="modalMediaContainer" class="modal-media"></div>
|
||
<button id="modalPrev" class="modal-nav-btn prev hidden" type="button" aria-label="Elemento precedente">‹</button>
|
||
<button id="modalNext" class="modal-nav-btn next hidden" type="button" aria-label="Elemento successivo">›</button>
|
||
</div>
|
||
|
||
<!-- MODAL ATTIVITÀ INDIPENDENTE -->
|
||
<div id="activityModal" aria-hidden="true">
|
||
<button
|
||
id="activityModalClose"
|
||
class="modal-close"
|
||
type="button"
|
||
aria-label="Chiudi attività"
|
||
>
|
||
×
|
||
</button>
|
||
|
||
<div id="activityModalContent"></div>
|
||
</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" type="button" data-sort="asc">Data ↑</button>
|
||
<button class="sheet-btn" type="button" data-sort="desc">Data ↓</button>
|
||
|
||
<h3>Raggruppamento</h3>
|
||
<button class="sheet-btn" type="button" data-group="auto">Automatico</button>
|
||
<button class="sheet-btn" type="button" data-group="day">Giorno</button>
|
||
<button class="sheet-btn" type="button" data-group="month">Mese</button>
|
||
<button class="sheet-btn" type="button" data-group="year">Anno</button>
|
||
|
||
<h3>Filtri</h3>
|
||
<button class="sheet-btn" type="button" data-filter="">Tutto</button>
|
||
<button class="sheet-btn" type="button" data-filter="folder">Con cartella</button>
|
||
<button class="sheet-btn" type="button" data-filter="location">Con GPS</button>
|
||
<button class="sheet-btn" type="button" data-filter="type">Solo immagini</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- OVERLAY -->
|
||
<div id="sheetOverlay" class="sheet-overlay"></div>
|
||
|
||
</div>
|
||
|
||
<!-- 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 applicazione -->
|
||
<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/mapPhotosLayer.js"></script>
|
||
<script src="/js/mapActivitiesLayer.js"></script>
|
||
<script src="/js/mapGlobal.js"></script>
|
||
<script src="/js/modal.js"></script>
|
||
<script src="/js/activityModal.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;
|
||
}
|
||
|
||
const authLoader = document.getElementById("authLoader");
|
||
const app = document.getElementById("app");
|
||
|
||
if (authLoader) authLoader.style.display = "none";
|
||
if (app) app.style.display = "block";
|
||
|
||
document.body.classList.add("authenticated");
|
||
});
|
||
|
||
|
||
document.getElementById("configBtn")?.addEventListener("click", () => {
|
||
window.location.href = "/admin.html";
|
||
});
|
||
</script>
|
||
|
||
<!-- TOGGLE PHOTOS / ACTIVITIES -->
|
||
<script>
|
||
document.addEventListener("DOMContentLoaded", () => {
|
||
const modeButtons = document.querySelectorAll("#modeToggle button");
|
||
|
||
function updateModeUI(mode) {
|
||
modeButtons.forEach(button => {
|
||
button.classList.toggle("active", button.dataset.mode === mode);
|
||
});
|
||
|
||
document.body.classList.remove("photos", "activities");
|
||
document.body.classList.add(mode);
|
||
}
|
||
|
||
modeButtons.forEach(button => {
|
||
button.addEventListener("click", async () => {
|
||
const mode = button.dataset.mode;
|
||
|
||
window.closeBottomSheet?.();
|
||
window.closeActivityModal?.();
|
||
window.closeInfoPanel?.();
|
||
|
||
updateModeUI(mode);
|
||
|
||
if (typeof window.setGalleryMode === "function") {
|
||
window.setGalleryMode(mode);
|
||
} else {
|
||
window.state.mode = mode;
|
||
window.loadLocalState?.();
|
||
window.refreshGallery?.();
|
||
}
|
||
|
||
if (typeof window.progressiveSync === "function") {
|
||
await window.progressiveSync(mode);
|
||
}
|
||
|
||
window.refreshGallery?.();
|
||
|
||
const mapDiv = document.getElementById("globalMap");
|
||
|
||
if (mapDiv?.classList.contains("open")) {
|
||
window.redrawGlobalMap?.();
|
||
}
|
||
});
|
||
});
|
||
|
||
updateModeUI(window.state?.mode || "photos");
|
||
});
|
||
</script>
|
||
|
||
<!-- Debug mobile -->
|
||
<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
|
||
<script>
|
||
if (window.eruda) {
|
||
window.eruda.init();
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|