137 lines
4.2 KiB
HTML
137 lines
4.2 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">
|
||
|
||
<!-- 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>
|
||
</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>
|
||
|
||
<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>
|
||
|
||
<!-- 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/main.js"></script>
|
||
|
||
</body>
|
||
</html>
|