402 lines
12 KiB
HTML
402 lines
12 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>
|
||
|
||
<!-- Configurazione iniziale -->
|
||
<script>
|
||
window.BASE_URL = "";
|
||
|
||
window.AppConfig = window.AppConfig || {
|
||
ready: false,
|
||
};
|
||
</script>
|
||
|
||
<!-- CSS applicazione -->
|
||
<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-base.css" />
|
||
<link rel="stylesheet" href="/css/map-photos.css" />
|
||
<link rel="stylesheet" href="/css/map-activities.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 e MarkerCluster -->
|
||
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.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"
|
||
/>
|
||
<!-- Mapbox GL JS per Terrain 3D -->
|
||
<link
|
||
href="https://api.mapbox.com/mapbox-gl-js/v3.15.0/mapbox-gl.css"
|
||
rel="stylesheet"
|
||
/>
|
||
|
||
<style>
|
||
#authLoader {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 9999;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #fff;
|
||
font-size: 1.4rem;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body class="photos">
|
||
<div id="authLoader">Caricamento…</div>
|
||
|
||
<div id="app" style="display: none">
|
||
<!-- HEADER -->
|
||
<header class="topbar">
|
||
<h1>Galleria</h1>
|
||
|
||
<!-- Pulsante singolo: mostra la modalità corrente e passa all'altra -->
|
||
<button
|
||
id="modeToggle"
|
||
class="mode-toggle"
|
||
type="button"
|
||
aria-label="Passa alle attività"
|
||
title="Passa alle attività"
|
||
>
|
||
📷
|
||
</button>
|
||
|
||
<div class="top-buttons">
|
||
<div class="deleted-toggle">
|
||
<input
|
||
type="checkbox"
|
||
id="showDeleted"
|
||
class="visually-hidden"
|
||
aria-hidden="true"
|
||
tabindex="-1"
|
||
/>
|
||
|
||
<button
|
||
id="showDeletedBtn"
|
||
class="icon-btn deleted-toggle-btn is-hidden"
|
||
type="button"
|
||
aria-label="Mostra foto cancellate"
|
||
aria-pressed="false"
|
||
title="Mostra foto cancellate"
|
||
>
|
||
<span class="eye-icon" aria-hidden="true">👁️</span>
|
||
</button>
|
||
</div>
|
||
|
||
<button
|
||
id="openMapBtn"
|
||
class="icon-btn"
|
||
type="button"
|
||
aria-label="Apri mappa"
|
||
title="Mappa"
|
||
>
|
||
🗺️
|
||
</button>
|
||
<button
|
||
id="terrain3dBtn"
|
||
class="icon-btn"
|
||
type="button"
|
||
title="Terrain 3D"
|
||
>
|
||
🏔️
|
||
</button>
|
||
|
||
<button
|
||
id="optionsBtn"
|
||
class="icon-btn"
|
||
type="button"
|
||
aria-label="Apri opzioni"
|
||
title="Opzioni"
|
||
>
|
||
⋮
|
||
</button>
|
||
|
||
<button
|
||
id="configBtn"
|
||
class="icon-btn"
|
||
type="button"
|
||
aria-label="Apri configurazione"
|
||
title="Configurazione"
|
||
>
|
||
⚙️
|
||
</button>
|
||
|
||
<button
|
||
id="logoutBtn"
|
||
class="icon-btn logout-btn"
|
||
type="button"
|
||
data-logout
|
||
data-redirect="/login"
|
||
aria-label="Logout"
|
||
title="Logout"
|
||
>
|
||
<img src="/logout.png" class="logout-icon" alt="" />
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- GALLERIA -->
|
||
<main id="gallery"></main>
|
||
|
||
<!-- MAPPA -->
|
||
<div id="globalMap" class="global-map"></div>
|
||
|
||
<div id="terrainMap" class="global-map terrain-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À -->
|
||
<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>
|
||
|
||
<div id="sheetOverlay" class="sheet-overlay"></div>
|
||
</div>
|
||
|
||
<!-- ========================================= -->
|
||
<!-- LIBRERIE ESTERNE -->
|
||
<!-- ========================================= -->
|
||
|
||
<!-- Leaflet -->
|
||
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
||
|
||
<!-- Leaflet MarkerCluster -->
|
||
<script src="https://unpkg.com/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
|
||
|
||
|
||
<!-- ========================================= -->
|
||
<!-- VENDOR -->
|
||
<!-- ========================================= -->
|
||
|
||
<script src="/vendor/rbush.min.js"></script>
|
||
|
||
<!-- Bridge librerie -->
|
||
<script src="/js/lib/vendor.js"></script>
|
||
|
||
|
||
<!-- ========================================= -->
|
||
<!-- CONFIG / AUTENTICAZIONE -->
|
||
<!-- ========================================= -->
|
||
|
||
<script src="/js/config.js"></script>
|
||
<script src="/js/auth.js"></script>
|
||
<script src="/js/logout.js"></script>
|
||
|
||
|
||
<!-- ========================================= -->
|
||
<!-- CORE APPLICAZIONE -->
|
||
<!-- ========================================= -->
|
||
|
||
<script src="/js/api.js"></script>
|
||
<script src="/js/state.js"></script>
|
||
<script src="/js/sync.js"></script>
|
||
|
||
<script src="/js/galleryUtils.js"></script>
|
||
<script src="/js/activityThumbs.js"></script>
|
||
<script src="/js/galleryRenderer.js"></script>
|
||
<script src="/js/gallery.js"></script>
|
||
|
||
|
||
<!-- ========================================= -->
|
||
<!-- MAPPA CORE -->
|
||
<!-- ========================================= -->
|
||
|
||
<script src="/js/map/spatialIndex.js"></script>
|
||
<script src="/js/map/clusterIcons.js"></script>
|
||
<script src="/js/map/markerFactory.js"></script>
|
||
<script src="/js/map/layerManager.js"></script>
|
||
|
||
<script src="/js/map/photosLayer.js"></script>
|
||
<script src="/js/map/activitiesLayer.js"></script>
|
||
|
||
<script src="/js/map/baseLayers.js"></script>
|
||
<script src="/js/map/engine.js"></script>
|
||
<script src="/js/map/globalMap.js"></script>
|
||
|
||
|
||
<!-- ========================================= -->
|
||
<!-- MAPBOX GL JS -->
|
||
<!-- ========================================= -->
|
||
|
||
<script src="https://api.mapbox.com/mapbox-gl-js/v3.15.0/mapbox-gl.js"></script>
|
||
|
||
|
||
<!-- ========================================= -->
|
||
<!-- MAPBOX PHOTOS -->
|
||
<!-- ========================================= -->
|
||
|
||
<!-- 1. Source -->
|
||
<script src="/js/map/photos/photoSource.js"></script>
|
||
|
||
<!-- 2. Cluster -->
|
||
<script src="/js/map/photos/photoClusters.js"></script>
|
||
|
||
<!-- 3. Marker -->
|
||
<script src="/js/map/photos/photoMarkers.js"></script>
|
||
|
||
<!-- 4. Spiderfy -->
|
||
<script src="/js/map/photos/photoSpiderfy.js"></script>
|
||
|
||
|
||
<!-- ========================================= -->
|
||
<!-- MAPBOX ACTIVITIES -->
|
||
<!-- ========================================= -->
|
||
|
||
<!-- 1. Source -->
|
||
<script src="/js/map/activities/activitySource.js"></script>
|
||
|
||
<!-- 2. Cluster -->
|
||
<script src="/js/map/activities/activityClusters.js"></script>
|
||
|
||
<!-- 3. Marker -->
|
||
<script src="/js/map/activities/activityMarkers.js"></script>
|
||
|
||
|
||
<!-- ========================================= -->
|
||
<!-- MAPBOX CONTROLLER -->
|
||
<!-- ========================================= -->
|
||
|
||
<!-- Deve essere DOPO tutti i moduli sopra -->
|
||
<script src="/js/map/mapboxMarkers.js"></script>
|
||
|
||
|
||
<!-- ========================================= -->
|
||
<!-- TERRAIN 3D -->
|
||
<!-- ========================================= -->
|
||
|
||
<script src="/js/map/terrain3d.js"></script>
|
||
|
||
|
||
<!-- ========================================= -->
|
||
<!-- MODALI -->
|
||
<!-- ========================================= -->
|
||
|
||
<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>
|
||
|
||
|
||
<!-- ========================================= -->
|
||
<!-- DEBUG -->
|
||
<!-- ========================================= -->
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
|
||
|
||
<script>
|
||
if (window.eruda) {
|
||
window.eruda.init();
|
||
}
|
||
</script>
|
||
|
||
|
||
<!-- ========================================= -->
|
||
<!-- CONTROLLI PAGINA -->
|
||
<!-- ========================================= -->
|
||
|
||
<script src="/js/pageControls.js"></script>
|
||
</body>
|
||
</html>
|