caprigis/webgis/index.html

161 lines
7.0 KiB
HTML

<!DOCTYPE html>
<html lang="it" data-text="html" data-theme="light">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="js/vendor/leaflet/dist/leaflet.css" />
<link rel="stylesheet" href="../css/app.css" />
<link rel="stylesheet" href="js/vendor/spotlight.js/dist/css/spotlight.min.css" />
<link rel="stylesheet" href="js/vendor/@kalisio/leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css" />
<script src="js/vendor/leaflet/dist/leaflet.js"></script>
<script src="js/vendor/@kalisio/leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js"></script>
<script src="js/index.js" type="module"></script>
<title>WebGIS Isola di Capri</title>
</head>
<body>
<nav class="navbar mb-2" role="navigation">
<div class="navbar-brand">
<a href="/" class="navbar-item is-size-5 has-text-dark ml-4" title="Torna alla home page">
<span class="icon">
<i class="fa fa-home"></i>
</span>
</a>
<span class="navbar-item is-size-5">
Carta Archeologica dell'Isola di Capri - WebGIS
</span>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="nav-menu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<hr class="navbar-divider">
<div class="navbar-end" id="nav-menu">
<button class="navbar-item button is-size-5 is-white" role="button" id="siti">
Beni archeologici
</button>
<button class="navbar-item button is-size-5 is-white" role="button" id="non-conserv">
Beni non conservati
</button>
<button class="navbar-item button is-size-5 is-white" role="button" id="rinvenimenti">
Rinvenimenti
</button>
</div>
</nav>
<!-- TODO Loader -->
<div class="wait-lg text-center is-hidden" style="clear: both;">
<p>Loading...</p>
<div class="loading loading-lg"></div>
</div>
<div class="main columns">
<div class="column is-hidden is-overlay has-background-white" id="menu">
<aside class="menu ml-4">
<p class="menu-label">
Beni archeologici
<button title="Chiudi menu" class="button is-small is-pulled-right" id="close-menu">
<span class="icon is-small">
<i class="fa fa-chevron-left"></i>
</span>
</button>
</p>
<ul class="menu-list">
<li>
<a class="is-block button" title="Vai al sito Villa di Gradola" id="gradola">
Villa di Gradola
</a>
<a class="is-block button" title="Vai al sito Villa di Gradola" id="grotta_azzurra">
Grotta Azzurra
</a>
<a class="button" title="Vai al sito Villa di Damecuta" id="damecuta">
Villa di Damecuta
</a>
<a class="button" title="Vai al sito Grotta di Matermania" id="matermania">
Grotta di Matermania
</a>
<a class="button" id="arsenale">
Grotta dell'Arsenale
</a>
<a class="button" id="tiberio">
Bagni di Tiberio
</a>
<a class="button" id="mura">
Mura greche
</a>
<a class="button" id="san_michele">
Villa San Michele
</a>
<a class="button" id="scala_fenicia">
Scala Fenicia
</a>
</li>
</ul>
<p class="menu-label">
Beni non conservati
</p>
<ul class="menu-list" id="not-conserved"></ul>
</aside>
</div>
<div class="column is-full is-relative">
<div id="map" aria-describedby="map-progress" aria-busy="true" style="position: relative;">
<progress id="map-progress" class="p-2 progress is-medium is-link" aria-label="Map loading..." />
</div>
</div>
</div>
<!-- Sites data modal -->
<div class="modal" id="site-data">
<div class="modal-background"></div>
<div class="modal-content has-background-white" style="min-height: 95vh;">
<div class="tabs is-centered">
<ul>
<li class="is-active" id="for-short-sheet">
<a>
<span class="icon is-small"
><i class="fas fa-info-circle" aria-hidden="true"></i
></span>
<span>Scheda sintetica</span>
</a>
</li>
<li id="for-site-sheet">
<a>
<span class="icon is-small"
><i class="fas fa-info-circle" aria-hidden="true"></i
></span>
<span>Scheda dettagliata</span>
</a>
</li>
<li id="for-photos">
<a>
<span class="icon is-small"
><i class="fas fa-image" aria-hidden="true"></i
></span>
<span>Disegni e fotografie</span>
</a>
</li>
<li id="for-documents">
<a>
<span class="icon is-small"
><i class="far fa-file-alt" aria-hidden="true"></i
></span>
<span>Documenti</span>
</a>
</li>
</ul>
</div>
<div class="data-tabs" id="short-sheet"></div>
<div class="data-tabs is-hidden" id="site-sheet"></div>
<div class="data-tabs is-hidden" id="photos"></div>
<div class="data-tabs is-hidden" id="documents"></div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
<!-- Not conserved modal -->
<div class="modal" id="not-conser-data">
<div class="modal-background"></div>
<div class="modal-content has-background-white" style="min-height: 95vh;">
<div id="not-conser-sheet"></div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
</body>
</html>