UI revamp; additional features (draft)

This commit is contained in:
2024-06-11 15:53:04 +02:00
parent 9c635112d7
commit 7e25ece9e0
8 changed files with 222 additions and 34 deletions

View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="it" data-text="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" />
@@ -9,42 +9,56 @@
<title>Carta Archeologica di Capri</title>
</head>
<body>
<header class="navbar mt-2 p-2">
<section class="navbar-section">
<span class="navbar-brand">
<img loading="eager" alt="Logo" class="img-fit-contain" src="./img/logo.svg" height="62"/>
<nav class="navbar mb-2" role="navigation">
<div class="navbar-brand">
<span class="navbar-item is-size-3">
Carta archeologica di Capri
</span>
</section>
<section class="navbar-section">
<span class="navbar-center text-center text-large">
Capri - Carta archeologica
</span>
</section>
<section class="navbar-section">
<a href="about.html" class="btn btn-link" title="About">ABOUT</a>
<a href="progetto.html" class="btn btn-link" title="Progetto">PROGETTO</a>
</section>
</header>
</div>
<hr class="navbar-divider">
<div class="navbar-menu ml-3">
<button class="navbar-item button is-size-5 is-white" role="button" id="siti">
<i class="fa fa-list mr-2"></i> Siti indagati
</button>
</div>
<div class="navbar-end">
<a class="navbar-item" href="about.html" class="btn btn-link" title="About">About</a>
</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">
<div id="map" class="map-lg map-sm"></div>
<div class="main columns">
<div class="column is-hidden" id="menu">
<aside class="menu ml-4">
<p class="menu-label">Siti indagati</p>
<ul class="menu-list">
<li>
<a class="button" id="gradola">
Villa di Gradola
</a>
<a class="button" id="matermania">
Grotta di Matermania
</a>
<a class="button" id="arsenale">
Grotta dell'Arsenale
</a>
</li>
</ul>
</aside>
</div>
<div class="column is-full">
<div id="map" class="map-lg map-sm"></div>
</div>
</div>
<div class="modal">
<div class="modal-background"></div>
<div class="modal-content has-background-white">
<!-- Any other Bulma elements you want -->
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
<footer class="container text-center p-2 mt-2 navbar">
<section class="navbar-section mt-2">
<a class="navbar-brand" title="Vai alla home page di ISPC CNR" href="https://www.ispc.cnr.it" data-text="linkispc">
<img loading="eager" alt="Logo ISPC CNR" class="img-fit-contain" src="./img/logo_ispc.svg" height="72"/>
</a>
</section>
<section class="navbar-center">
<p class="mt-2 pt-2">
<a href="credits.html" data-text="credits">Crediti</a>
</p>
</section>
</footer>
</body>
</html>