Add first interactive map attempt
This commit is contained in:
parent
8945c2fcd7
commit
23cb5b2ec5
2
.gitignore
vendored
2
.gitignore
vendored
@ -5,4 +5,4 @@ spectre*/
|
||||
*_bak*
|
||||
# Ignore videos in online version
|
||||
vid_*.mp4
|
||||
assets/video/vid_*.mp4
|
||||
assets/video/vid_*.mp4
|
||||
34
css/main.css
34
css/main.css
@ -343,6 +343,7 @@ section .container {
|
||||
line-height: 1.3rem;
|
||||
font-size: 12pt;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
section .container {
|
||||
width: 1280px;
|
||||
@ -369,7 +370,8 @@ section .container ul {
|
||||
margin-left: 0;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
section .container img {
|
||||
section .container img,
|
||||
.modal img {
|
||||
width: 100%;
|
||||
}
|
||||
section.prj-logos img {
|
||||
@ -407,10 +409,16 @@ section.poi h3 {
|
||||
color: var(--lilac);
|
||||
}
|
||||
/** Modals **/
|
||||
#mod-vid .modal-overlay {
|
||||
#mod-vid {
|
||||
background-color: #555;
|
||||
}
|
||||
/** Temp **/
|
||||
|
||||
.modal-container div {
|
||||
font-family: 'roboto_slablight', sans-serif;
|
||||
line-height: 1.3rem;
|
||||
}
|
||||
|
||||
/** Temp
|
||||
.placeholder {
|
||||
background-color: rgba(0,0,0,.03);
|
||||
height: 70%;
|
||||
@ -420,11 +428,11 @@ section.poi h3 {
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
/*****/
|
||||
canvas {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
*/
|
||||
/** Videos **/
|
||||
video, .open-vid {
|
||||
cursor: pointer;
|
||||
@ -433,12 +441,28 @@ video, .open-vid {
|
||||
color: var(--white);
|
||||
margin-top: 0.9rem;
|
||||
}
|
||||
/*
|
||||
.vid-thumb::before {
|
||||
content: "";
|
||||
border-left:rgba(75, 99, 207, 0.658) 85px solid;
|
||||
border-top: 60px solid transparent;
|
||||
border-bottom: 60px solid transparent;
|
||||
visibility: visible;
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
left: 70vh;
|
||||
top: 15vh;
|
||||
cursor: pointer;
|
||||
}
|
||||
*/
|
||||
/** Slideshow... **/
|
||||
.hide, .slide {
|
||||
display: none;
|
||||
}
|
||||
.show {
|
||||
display: block;
|
||||
display: block !important;
|
||||
}
|
||||
/* Fading animation */
|
||||
.fadein {
|
||||
|
||||
@ -2597,9 +2597,7 @@ summary.accordion-header::-webkit-details-marker {
|
||||
|
||||
.modal.modal-lg .modal-container {
|
||||
box-shadow: none;
|
||||
/* Custom max-width*/
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
|
||||
74
img/map.svg
74
img/map.svg
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 697 KiB After Width: | Height: | Size: 697 KiB |
@ -42,8 +42,9 @@
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column col-lg-6 col-sm-12 col-md-12 of-hidden">
|
||||
<img src="img/mappa.png" title="Apri la mappa interattiva" alt="Mappa dei percorsi a Fara Sabina" id="map">
|
||||
<!-- <canvas></canvas> -->
|
||||
<a href="map.html">
|
||||
<img src="img/mappa.png" title="Apri la mappa interattiva" alt="Mappa dei percorsi a Fara Sabina" id="map">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-6 col-sm-12 col-md-12 pl-xl roboto-slab-l" id="itin-c">
|
||||
<h2>Il borgo storico in tappe</h2>
|
||||
@ -101,7 +102,7 @@
|
||||
<img src="img/thumbs/thumb_viaggiatore.jpg" alt="Viaggiatore #1">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<h3 class="lilac mb-2 text-italic text-bold">
|
||||
Il viaggiatore #1
|
||||
</h3>
|
||||
@ -467,25 +468,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="modal modal-lg modal-fullheight" id="mod-vid">
|
||||
<a href="#close" class="modal-overlay" aria-label="Close"></a>
|
||||
<div class="modal-container">
|
||||
<div class="modal-header">
|
||||
<a href="#close" class="btn btn-clear float-right" title="Close" aria-label="Close"></a>
|
||||
<div class="modal-title h5"></div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="content" id="mod-cont">
|
||||
<video controls>
|
||||
<source src="assets/video/vid_prologo.mp4" type="video/mp4">
|
||||
Il browser non supporta i video integrati.
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="modal-footer">
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="roboto">
|
||||
<p id="copy">© Avviso pubblico Beni Culturali e Turismo POR FESR Lazio 2014-2020</p>
|
||||
|
||||
115
map.html
Normal file
115
map.html
Normal file
@ -0,0 +1,115 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="it">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
<link rel="stylesheet" href="css/spectre-icons.css">
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" style="max-height: 100%;">
|
||||
<image href="img/map.svg" height="200" width="200"/>
|
||||
<rect
|
||||
onclick="openModal()"
|
||||
y="35.578873"
|
||||
x="15.127975"
|
||||
height="10.607142"
|
||||
width="15.985119"
|
||||
id="prologo"
|
||||
style="fill:rgba(155,155,155,0.29);
|
||||
stroke:none;stroke-width:0.3;paint-order:fill markers stroke"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="modal modal-lg modal-fullheight" id="mod-vid">
|
||||
<div class="modal-container">
|
||||
<div class="modal-header">
|
||||
<a href="#close" class="btn btn-clear float-right" title="Close" aria-label="Close"></a>
|
||||
<div class="modal-title h5 roboto">Itinerario - #0 Prologo</div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="container roboto-slab" id="mod-cont">
|
||||
<div class="columns">
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12">
|
||||
<h3 class="lilac mb-2 text-italic text-bold">
|
||||
Prologo - Annunciazione
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Un angelo compare a un eremita all'inizio dei tempi, sul Monte Acuziano.
|
||||
Gli annuncia che sulla collina antistante sorgerà una città
|
||||
che si chiamerà Fara, dove si vivrà in pace e in armonia con la natura,
|
||||
in attesa di un re che farà ritorno…
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="prologo">
|
||||
<img src="img/thumbs/thumb_prologo.jpg" alt="Prologo">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script type="text/javascript">
|
||||
document.addEventListener('readystatechange', () => {
|
||||
let close = document.querySelector('#mod-vid a[href="#close"]');
|
||||
let mod = document.querySelector('#mod-vid');
|
||||
|
||||
close.addEventListener('click', () => {
|
||||
mod.classList.remove('active');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
function openModal() {
|
||||
let modal = document.querySelector('#mod-vid');
|
||||
modal.classList.add('active');
|
||||
|
||||
let thumb = document.querySelector('.vid-thumb');
|
||||
|
||||
thumb.addEventListener('click', () => {
|
||||
openVid(thumb.id);
|
||||
});
|
||||
//modal.style = 'opacity: 1';
|
||||
}
|
||||
|
||||
const openVid = (id) => {
|
||||
|
||||
let titles = {
|
||||
'prologo' : 'Prologo - Annunciazione',
|
||||
}
|
||||
|
||||
let vimeoVids = {
|
||||
'prologo' : '478632535',
|
||||
'viaggiatore' : '562518107',
|
||||
'faresi' : '562529310',
|
||||
'piazza' : '443587380',
|
||||
'antonio' : '606341398',
|
||||
'francesco' : '471773781',
|
||||
'nobili' : '562534835',
|
||||
'rocco' : '606346781',
|
||||
'alberto' : '606372910',
|
||||
'disputa' : '471537982',
|
||||
'duomo' : '606343917',
|
||||
'loredana' : '513080769',
|
||||
'pietro' : '455576197',
|
||||
'castello' : '562536148',
|
||||
'sabini' : '542321131',
|
||||
'monumento' : '606362546',
|
||||
'eva' : '606352547',
|
||||
'toto' : '606348670',
|
||||
'fuori' : '606358668',
|
||||
'carro' : '562262086',
|
||||
};
|
||||
|
||||
let vimeoLink = 'https://player.vimeo.com/video/'+vimeoVids[id]+'?autoplay=1';
|
||||
|
||||
localStorage.setItem('vidURI', 'vid_'+id+'.mp4');
|
||||
localStorage.setItem('vimeo', vimeoLink);
|
||||
localStorage.setItem('vidTitle', titles[id]);
|
||||
|
||||
window.location.href = 'video.html';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user