nicolo/scaenae
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restructure to use separate scenes

Browse Source 
Uses pseudo-router logic...
This commit is contained in:
Nicolò P.
2026-01-14 16:42:39 +01:00
parent 8c1da5e4e2
commit e85bd4f959
13 changed files with 307 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
index.html
View File

@@ -27,10 +27,10 @@
<link rel="manifest" href="app.webmanifest">
<!-- Web-app ID -->
<meta name="aton:appid" content="app_template">
<meta name="aton:appid" content="scaenae">
<meta name="title" content="SCAENE">
<meta name="description" content="__APPDESC__">
<meta name="description" content="Web App 3D per il progetto PRINN 'SCAENAE'">
<!-- Add meta theme-color -->
<meta name="theme-color" content="#000000" />
@@ -39,6 +39,7 @@
<link rel="stylesheet" type="text/css" href="/vendors/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/vendors/bootstrap/css/bootstrap-icons/font/bootstrap-icons.min.css">
<link rel="stylesheet" type="text/css" href="/res/css/main.css">
<link rel="stylesheet" type="text/css" href="./css/app.css">
<link rel="stylesheet" href="./vendor/leaflet/dist/leaflet.css">
<!-- Vendors -->
@@ -46,103 +47,13 @@
<script type="text/javascript" src="/vendors/bootstrap/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="/dist/THREE.bundle.js"></script>
<script type="text/javascript" src="./vendor/three/examples/js/controls/DragControls.js"></script>
<script type="text/javascript" src="/dist/ATON.min.js"></script>
<script type="text/javascript" src="./vendor/leaflet/dist/leaflet-src.js"></script>
<!-- Main js entry -->
<script type="module" src="js/main.js"></script>
<style>
body {
height: 100vh;
}
.c-hand {
cursor: pointer;
}
input[type="checkbox"] {
cursor: pointer;
}
#clipper-bar .btn {
background-repeat: no-repeat;
background-position: center;
background-size: 80%;
}
#clipX {
background-image: url('assets/icons/section_x.png');
}
#clipY {
background-image: url('assets/icons/section_y.png');
}
#clipZ {
background-image: url('assets/icons/section_z.png');
}
</style>
</head>
<body data-bs-theme="light">
<div class="map" id="map" style="height: 100%;"></div>
<div class="d-none" id="scene">
<div id="toolbar" class="aton-toolbar-top w-100">
<a class="btn aton-btn fs-5" id="back" title="Torna alla mappa">
<i class="bi bi-map-fill"></i>
</a>
<a class="btn aton-btn fs-5" id="settings" title="Impostazioni">
<i class="bi bi-gear-fill"></i>
</a>
<a class="btn aton-btn fs-5" id="clipper" title="Attiva / disattiva sezionamento">
<i class="bi bi-scissors"></i>
</a>
<div class="d-none w-25
position-absolute
top-0 start-50
translate-middle bg-light
px-4 pt-2 pb-2 bg-opacity-50
rounded-bottom-3
mt-4 text-dark text-center"
id="clipper-bar">
<span class="pt-5 pb-2 d-block fw-bold">Sezionamento</span>
<button class="btn aton-btn d-inline px-4 py-4 me-5" id="clipX" title="Sezione X"></button>
<button class="btn aton-btn d-inline px-4 py-4 me-5" id="clipY" title="Sezione Y"></button>
<button class="btn aton-btn d-inline px-4 py-4" id="clipZ" title="Sezione Z"></button>
</div>
<a class="btn aton-btn fs-5 float-end" id="menu" title="Menu">
<i class="bi bi-list"></i>
</a>
</div>
<!-- TODO CSS-only popover -->
<div class="card d-none" id="shadows-popover" popover>Disabilitare le ombre può migliorare le prestazioni</div>
<div class="aton-poweredby" >
<a href="https://aton.ispc.cnr.it/site/" target="_blank"><img src="/res/aton-logo.png"></a>
</div>
</div>
<!-- Info / media modal -->
<div class="modal fade" id="audio1" tabindex="-1" aria-labelledby="audio1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-4 text-center" id="exampleModalLabel">Che fiero costume</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h2 class="fs-5 font-bold text-center">Informazioni</h2>
<p class="mt-2">
L'aria "Che fiero costume" bla bla...
</p>
<p>
Lorem ipsum dolor...
</p>
<h2 class="fs-5 mt-4 text-center font-bold">Ascolta</h2>
<audio class="w-100 p-2 mt-1" src="./assets/bt_TracciaAudio_ Che fiero costume.mp3" controls></audio>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
<div class="map" id="map"></div>
</body>