115 lines
4.5 KiB
HTML
115 lines
4.5 KiB
HTML
<!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> |