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*
|
*_bak*
|
||||||
# Ignore videos in online version
|
# Ignore videos in online version
|
||||||
vid_*.mp4
|
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;
|
line-height: 1.3rem;
|
||||||
font-size: 12pt;
|
font-size: 12pt;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1280px) {
|
@media (min-width: 1280px) {
|
||||||
section .container {
|
section .container {
|
||||||
width: 1280px;
|
width: 1280px;
|
||||||
@ -369,7 +370,8 @@ section .container ul {
|
|||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
}
|
}
|
||||||
section .container img {
|
section .container img,
|
||||||
|
.modal img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
section.prj-logos img {
|
section.prj-logos img {
|
||||||
@ -407,10 +409,16 @@ section.poi h3 {
|
|||||||
color: var(--lilac);
|
color: var(--lilac);
|
||||||
}
|
}
|
||||||
/** Modals **/
|
/** Modals **/
|
||||||
#mod-vid .modal-overlay {
|
#mod-vid {
|
||||||
background-color: #555;
|
background-color: #555;
|
||||||
}
|
}
|
||||||
/** Temp **/
|
|
||||||
|
.modal-container div {
|
||||||
|
font-family: 'roboto_slablight', sans-serif;
|
||||||
|
line-height: 1.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Temp
|
||||||
.placeholder {
|
.placeholder {
|
||||||
background-color: rgba(0,0,0,.03);
|
background-color: rgba(0,0,0,.03);
|
||||||
height: 70%;
|
height: 70%;
|
||||||
@ -420,11 +428,11 @@ section.poi h3 {
|
|||||||
top: 0;
|
top: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
/*****/
|
|
||||||
canvas {
|
canvas {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
*/
|
||||||
/** Videos **/
|
/** Videos **/
|
||||||
video, .open-vid {
|
video, .open-vid {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -433,12 +441,28 @@ video, .open-vid {
|
|||||||
color: var(--white);
|
color: var(--white);
|
||||||
margin-top: 0.9rem;
|
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... **/
|
/** Slideshow... **/
|
||||||
.hide, .slide {
|
.hide, .slide {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.show {
|
.show {
|
||||||
display: block;
|
display: block !important;
|
||||||
}
|
}
|
||||||
/* Fading animation */
|
/* Fading animation */
|
||||||
.fadein {
|
.fadein {
|
||||||
|
|||||||
@ -2597,9 +2597,7 @@ summary.accordion-header::-webkit-details-marker {
|
|||||||
|
|
||||||
.modal.modal-lg .modal-container {
|
.modal.modal-lg .modal-container {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
/* Custom max-width*/
|
max-width: 960px;
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100vh;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-container {
|
.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="container">
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column col-lg-6 col-sm-12 col-md-12 of-hidden">
|
<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">
|
<a href="map.html">
|
||||||
<!-- <canvas></canvas> -->
|
<img src="img/mappa.png" title="Apri la mappa interattiva" alt="Mappa dei percorsi a Fara Sabina" id="map">
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="column col-lg-6 col-sm-12 col-md-12 pl-xl roboto-slab-l" id="itin-c">
|
<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>
|
<h2>Il borgo storico in tappe</h2>
|
||||||
@ -101,7 +102,7 @@
|
|||||||
<img src="img/thumbs/thumb_viaggiatore.jpg" alt="Viaggiatore #1">
|
<img src="img/thumbs/thumb_viaggiatore.jpg" alt="Viaggiatore #1">
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</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">
|
<h3 class="lilac mb-2 text-italic text-bold">
|
||||||
Il viaggiatore #1
|
Il viaggiatore #1
|
||||||
</h3>
|
</h3>
|
||||||
@ -467,25 +468,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</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>
|
</main>
|
||||||
<footer class="roboto">
|
<footer class="roboto">
|
||||||
<p id="copy">© Avviso pubblico Beni Culturali e Turismo POR FESR Lazio 2014-2020</p>
|
<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