175 lines
5.3 KiB
HTML
175 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="it">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>Galleria Foto</title>
|
||
|
||
<!-- 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/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/map.css">
|
||
<link rel="stylesheet" href="css/utils.css">
|
||
<link rel="stylesheet" href="css/login.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" />
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<!-- =============================== -->
|
||
<!-- BARRA SUPERIORE -->
|
||
<!-- =============================== -->
|
||
<header>
|
||
<h1>Galleria Foto</h1>
|
||
|
||
<div class="top-buttons">
|
||
<button id="openMapBtn" class="icon-btn">🗺️</button>
|
||
<button id="optionsBtn" class="icon-btn">⋮</button>
|
||
<button id="settingsBtn" class="icon-btn">⚙️</button>
|
||
<button
|
||
id="logoutBtn"
|
||
class="icon-btn logout-btn"
|
||
type="button"
|
||
data-logout
|
||
data-redirect="/"
|
||
title="Logout"
|
||
aria-label="Logout">
|
||
|
||
<!-- Icona PNG -->
|
||
<img
|
||
class="logout-icon"
|
||
src="img/switch.png"
|
||
alt=""
|
||
aria-hidden="true"
|
||
width="22" height="22">
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<div id="gallery" class="gallery"></div>
|
||
|
||
<!-- Mappa globale -->
|
||
<div id="globalMap" class="global-map"></div>
|
||
</main>
|
||
|
||
<!-- =============================== -->
|
||
<!-- MODAL FOTO/VIDEO -->
|
||
<!-- =============================== -->
|
||
<div id="modal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-close" id="modalClose">×</div>
|
||
|
||
<!-- Frecce navigazione -->
|
||
<button class="modal-nav-btn prev" id="modalPrev" type="button" aria-label="Precedente"><</button>
|
||
<button class="modal-nav-btn next" id="modalNext" type="button" aria-label="Successiva">></button>
|
||
|
||
<div id="modalMediaContainer"></div>
|
||
|
||
<div class="modal-info-btn" id="modalInfoBtn">ℹ️</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- =============================== -->
|
||
<!-- PANNELLO INFO -->
|
||
<!-- =============================== -->
|
||
<div id="infoPanel" class="info-panel"></div>
|
||
|
||
<!-- =============================== -->
|
||
<!-- PANNELLO OVERLAY -->
|
||
<!-- =============================== -->
|
||
<div id="sheetOverlay" class="sheet-overlay"></div>
|
||
|
||
<!-- =============================== -->
|
||
<!-- BOTTOM SHEET FOTO (MAPPA) -->
|
||
<!-- =============================== -->
|
||
<div id="bottomSheet" class="bottom-sheet photo-strip">
|
||
<div class="sheet-header"></div>
|
||
<div class="sheet-gallery" id="sheetGallery"></div>
|
||
</div>
|
||
|
||
<!-- =============================== -->
|
||
<!-- BOTTOM SHEET OPZIONI (⋮) -->
|
||
<!-- =============================== -->
|
||
<div id="optionsSheet" class="bottom-sheet options-sheet">
|
||
<div class="sheet-header"></div>
|
||
|
||
<div class="sheet-content">
|
||
|
||
<h3>Ordinamento</h3>
|
||
<button class="sheet-btn" data-sort="desc">Più recenti prima</button>
|
||
<button class="sheet-btn" data-sort="asc">Più vecchie prima</button>
|
||
|
||
<h3>Raggruppamento</h3>
|
||
<button class="sheet-btn" data-group="auto">Automatico (Oggi, Ieri…)</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="folder">Per cartella</button>
|
||
<button class="sheet-btn" data-filter="location">Per luogo</button>
|
||
<button class="sheet-btn" data-filter="type">Per tipo</button>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- LOGIN MODAL -->
|
||
<div id="loginModal" class="login-modal">
|
||
<div class="login-box">
|
||
<h2>Login</h2>
|
||
|
||
<input id="loginEmail" type="text" placeholder="Email">
|
||
<input id="loginPassword" type="password" placeholder="Password">
|
||
|
||
<div id="loginError" class="login-error"></div>
|
||
|
||
<button id="loginSubmit">Accedi</button>
|
||
</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>
|
||
|
||
<!-- Eruda Debug Console -->
|
||
<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
|
||
<script>
|
||
eruda.init();
|
||
console.log("Eruda inizializzato");
|
||
</script>
|
||
|
||
<!-- Debug immediato -->
|
||
<script>
|
||
console.log("Caricamento pagina OK");
|
||
</script>
|
||
|
||
<!-- App -->
|
||
<script src="js/config.js"></script>
|
||
<script src="js/data.js"></script>
|
||
<script src="js/gallery.js"></script>
|
||
<script src="js/modal.js"></script>
|
||
<script src="js/infoPanel.js"></script>
|
||
|
||
<!-- DEVE ESSERE PRIMA DI mapGlobal.js -->
|
||
<script src="js/bottomSheet.js"></script>
|
||
|
||
<script src="js/mapGlobal.js"></script>
|
||
<script src="js/logout.js"></script>
|
||
<script src="js/main.js"></script>
|
||
|
||
</body>
|
||
</html>
|