Folder structure and first implementation of changes...
3
.gitignore
vendored
@ -1,5 +1,4 @@
|
||||
spectre*/
|
||||
*.zip
|
||||
*.ttf
|
||||
*_old*
|
||||
README.md
|
||||
*_old*
|
||||
8
README.md
Normal file
@ -0,0 +1,8 @@
|
||||
# _Nel cielo di Fara_ Front End Wep App...
|
||||
|
||||
This project includes two versions of the same HTML5 app:
|
||||
|
||||
- offline local installation (tracked by `master`)
|
||||
- online website _nelcielodifara.cnr.it_ (tracked by `online-site` branch)
|
||||
|
||||
Let's hope this never happens again...
|
||||
88
credits.html
@ -13,23 +13,21 @@
|
||||
<div class="container">
|
||||
<div class="columns bg-white" id="nav">
|
||||
<div class="column col-lg-7 col-sm-10 col-md-2">
|
||||
<img class="of-hidden" src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
|
||||
<img class="of-hidden" src="img/loghi/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
|
||||
</div>
|
||||
<div class="column col-sm-2 show-sm text-right">
|
||||
<i class="icon icon-menu icon-2x"></i>
|
||||
</div>
|
||||
<div class="hide-sm column col-lg-5 col-sm-12 col-md-10 nav-menu" id="links">
|
||||
<a href="index.html" title="Torna alla home page">Home</a>
|
||||
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
|
||||
<a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
|
||||
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
|
||||
<a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
|
||||
<a href="credits.html" title="Credits del progetto">Credits</a>
|
||||
</div>
|
||||
<nav class="d-hide side-nav bg-white opensans">
|
||||
<p id="close-nav"><i class="icon-close"></i></p>
|
||||
<a href="index.html" title="Torna alla home page">Home</a>
|
||||
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
|
||||
<a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
|
||||
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
|
||||
<a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
|
||||
<a href="credits.html" title="Credits del progetto">Credits</a>
|
||||
</nav>
|
||||
@ -124,43 +122,49 @@
|
||||
</section>
|
||||
<section>
|
||||
<div class="container">
|
||||
<h2>Informazioni sul sito web</h2>
|
||||
<p class="text-bold mb-1">
|
||||
Titolare del Sito, Concezione, Web Design e sviluppo:
|
||||
</p>
|
||||
<p>CNR ISPC - Istituto di Scienze del Patrimonio Culturale, sede di Roma<br>
|
||||
Via Salaria km 29, 300<br>
|
||||
00015 - Monterotondo St. (Roma)
|
||||
</p>
|
||||
<p>
|
||||
<strong>Concezione e testi:</strong> Eva Pietroni<br>
|
||||
<strong>Grafica e layout:</strong> Alfonsina Pagano, Nicolò Paraciani, Eva Pietroni<br>
|
||||
<strong>Sviluppo:</strong> Nicolò Paraciani<br>
|
||||
</p>
|
||||
<p>
|
||||
<strong>E-mail contatti:</strong> eva.pietroni@cnr.it
|
||||
</p>
|
||||
|
||||
<h3 class="ochre-dark text-bold">Cookie e Privacy Policy</h3>
|
||||
<p>
|
||||
Il sito web <span class="text-bold">https://nelcielodifara.cnr.it</span> non utilizza cookie di terze parti di nessun tipo né sistemi
|
||||
di analitica o tracciamento, ma solo cookie tecnici strettamente necessari al corretto funzionamento del sito stesso.</p>
|
||||
<p>
|
||||
I video <em>embedded</em> sono ospitati sulle piattaforme <strong>YouTube</strong> e <strong>Vimeo</strong>, per le rispettive privacy policy fare riferimento
|
||||
alle seguenti pagine web:
|
||||
<ul class="mt-1">
|
||||
<li><a href="https://policies.google.com/privacy?hl=it">YouTube Privacy Policy (Google)</a></li>
|
||||
<li><a href="https://vimeo.com/privacy">Vimeo</a></li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h2>© Copyright, diritto d'autore e dei segni distintivi</h2>
|
||||
<p>
|
||||
Tutto il contenuto di questo sito web è protetto da copyright e non può
|
||||
essere riprodotto o utilizzato in altre pubblicazioni stampate,
|
||||
elettroniche o informatiche senza l'espressa autorizzazione degli autori.
|
||||
</p>
|
||||
|
||||
<div class="columns">
|
||||
<div class="col-lg-2 col-sm-12 col-md-12 column">
|
||||
<img src="img/Prologo-Annunciazione01.jpg">
|
||||
</div>
|
||||
<div class="col-lg-2 col-sm-12 col-md-12 column ml-lg">
|
||||
<h2>Informazioni sul sito web</h2>
|
||||
<p class="text-bold mb-1">
|
||||
Titolare del Sito, Concezione, Web Design e sviluppo:
|
||||
</p>
|
||||
<p>CNR ISPC - Istituto di Scienze del Patrimonio Culturale, sede di Roma<br>
|
||||
Via Salaria km 29, 300<br>
|
||||
00015 - Monterotondo St. (Roma)
|
||||
</p>
|
||||
<p>
|
||||
<strong>Concezione e testi:</strong> Eva Pietroni<br>
|
||||
<strong>Grafica e layout:</strong> Alfonsina Pagano, Nicolò Paraciani, Eva Pietroni<br>
|
||||
<strong>Sviluppo:</strong> Nicolò Paraciani<br>
|
||||
</p>
|
||||
<p>
|
||||
<strong>E-mail contatti:</strong> eva.pietroni@cnr.it
|
||||
</p>
|
||||
|
||||
<h3 class="ochre-dark text-bold">Cookie e Privacy Policy</h3>
|
||||
<p>
|
||||
Il sito web <span class="text-bold">https://nelcielodifara.cnr.it</span> non utilizza cookie di terze parti di nessun tipo né sistemi
|
||||
di analitica o tracciamento, ma solo cookie tecnici strettamente necessari al corretto funzionamento del sito stesso.</p>
|
||||
<p>
|
||||
I video <em>embedded</em> sono ospitati sulle piattaforme <strong>YouTube</strong> e <strong>Vimeo</strong>, per le rispettive privacy policy fare riferimento
|
||||
alle seguenti pagine web:
|
||||
<ul class="mt-1">
|
||||
<li><a href="https://policies.google.com/privacy?hl=it">YouTube Privacy Policy (Google)</a></li>
|
||||
<li><a href="https://vimeo.com/privacy">Vimeo</a></li>
|
||||
</ul>
|
||||
</p>
|
||||
|
||||
<h2>© Copyright, diritto d'autore e dei segni distintivi</h2>
|
||||
<p>
|
||||
Tutto il contenuto di questo sito web è protetto da copyright e non può
|
||||
essere riprodotto o utilizzato in altre pubblicazioni stampate,
|
||||
elettroniche o informatiche senza l'espressa autorizzazione degli autori.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
39
css/main.css
@ -14,6 +14,21 @@
|
||||
html {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
/**
|
||||
* Hack to preload background images
|
||||
* Not working in Firefox!!
|
||||
**/
|
||||
div#preload {
|
||||
/*display: none;*/
|
||||
width: 0;
|
||||
height: 0;
|
||||
z-index: -10;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
div#preload img {
|
||||
opacity: 0;
|
||||
display: inline;
|
||||
}
|
||||
/** General utils **/
|
||||
.of-hidden {
|
||||
overflow: hidden;
|
||||
@ -48,9 +63,11 @@ html {
|
||||
font-size: 14pt;
|
||||
}
|
||||
video {
|
||||
max-width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
#mod-cont {
|
||||
overflow: hidden;
|
||||
}
|
||||
/** Font classes **/
|
||||
.arvo {
|
||||
font-family: 'arvoregular'/*Fallback??*/;
|
||||
@ -103,7 +120,7 @@ header {
|
||||
padding: 0;
|
||||
}
|
||||
.main-header.home {
|
||||
min-height: 930px;
|
||||
min-height: 80vh;
|
||||
}
|
||||
.main-header.prog {
|
||||
min-height: 60vh;
|
||||
@ -122,7 +139,7 @@ header {
|
||||
}
|
||||
.main-header.itin {
|
||||
background: none;
|
||||
min-height: 25vh;
|
||||
min-height: 40vh;
|
||||
}
|
||||
@media (max-width: 840px) {
|
||||
.main-header.itin {
|
||||
@ -226,15 +243,17 @@ header {
|
||||
font-weight:bold;
|
||||
}
|
||||
#nav {
|
||||
max-height: 50px;
|
||||
max-height: 90px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
#nav > div {
|
||||
vertical-align: middle;
|
||||
line-height: 2.3rem;
|
||||
@media (min-width: 860px) {
|
||||
#nav {
|
||||
vertical-align: middle;
|
||||
line-height: 90px;
|
||||
}
|
||||
}
|
||||
#nav i {
|
||||
padding-top: 2rem;
|
||||
@ -281,8 +300,9 @@ header {
|
||||
border-bottom: 1px solid rgba(204,204,204,1);
|
||||
}
|
||||
#logo {
|
||||
max-height: 41%;
|
||||
padding: 7px 0 10px 20px;
|
||||
max-height: 55%;
|
||||
padding-left: 10px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.nav-light a:hover {
|
||||
color: #fff;
|
||||
@ -402,6 +422,7 @@ section.poi h3 {
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
/*****/
|
||||
canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@ -2570,7 +2570,7 @@ summary.accordion-header::-webkit-details-marker {
|
||||
|
||||
.modal:target .modal-overlay,
|
||||
.modal.active .modal-overlay {
|
||||
background: rgba(247, 248, 249, .75);
|
||||
background: rgba(91, 96, 100, 0.75);
|
||||
bottom: 0;
|
||||
cursor: default;
|
||||
display: block;
|
||||
@ -2597,11 +2597,14 @@ summary.accordion-header::-webkit-details-marker {
|
||||
|
||||
.modal.modal-lg .modal-container {
|
||||
box-shadow: none;
|
||||
max-width: 960px;
|
||||
/* Custom max-width*/
|
||||
max-width: 100%;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.modal-container {
|
||||
background: #fff;
|
||||
/*background: #fff;*/
|
||||
color: #fff;
|
||||
border-radius: .1rem;
|
||||
box-shadow: 0 .2rem .5rem rgba(48, 55, 66, .3);
|
||||
display: -ms-flexbox;
|
||||
@ -2619,12 +2622,12 @@ summary.accordion-header::-webkit-details-marker {
|
||||
}
|
||||
|
||||
.modal-container .modal-header {
|
||||
color: #303742;
|
||||
/*color: #303742;*/
|
||||
padding: .8rem;
|
||||
}
|
||||
|
||||
.modal-container .modal-body {
|
||||
overflow-y: auto;
|
||||
overflow: hidden;
|
||||
padding: .8rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
Before Width: | Height: | Size: 928 KiB |
|
Before Width: | Height: | Size: 218 KiB |
|
Before Width: | Height: | Size: 944 KiB |
|
Before Width: | Height: | Size: 4.3 MiB |
|
Before Width: | Height: | Size: 266 KiB |
|
Before Width: | Height: | Size: 625 KiB |
|
Before Width: | Height: | Size: 938 KiB |
|
Before Width: | Height: | Size: 1.3 MiB |
|
Before Width: | Height: | Size: 1.5 MiB |
|
Before Width: | Height: | Size: 1.2 MiB |
|
Before Width: | Height: | Size: 1.6 MiB |
|
Before Width: | Height: | Size: 376 KiB |
|
Before Width: | Height: | Size: 921 KiB |
|
Before Width: | Height: | Size: 6.0 KiB After Width: | Height: | Size: 6.0 KiB |
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 63 KiB |
|
Before Width: | Height: | Size: 128 KiB After Width: | Height: | Size: 128 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 9.2 KiB After Width: | Height: | Size: 9.2 KiB |
BIN
img/lp-bg/fara_bg_1.jpg
Normal file
|
After Width: | Height: | Size: 821 KiB |
BIN
img/lp-bg/fara_bg_2.jpg
Normal file
|
After Width: | Height: | Size: 815 KiB |
BIN
img/lp-bg/fara_bg_3.jpg
Normal file
|
After Width: | Height: | Size: 452 KiB |
BIN
img/lp-bg/fara_bg_4.jpg
Normal file
|
After Width: | Height: | Size: 1.5 MiB |
BIN
img/lp-bg/fara_bg_5.jpg
Normal file
|
After Width: | Height: | Size: 762 KiB |
|
Before Width: | Height: | Size: 760 KiB After Width: | Height: | Size: 556 KiB |
|
Before Width: | Height: | Size: 152 KiB |
|
Before Width: | Height: | Size: 148 KiB |
|
Before Width: | Height: | Size: 317 KiB |
|
Before Width: | Height: | Size: 221 KiB |
BIN
img/slider/slide_1.jpg
Normal file
|
After Width: | Height: | Size: 563 KiB |
BIN
img/slider/slide_2.jpg
Normal file
|
After Width: | Height: | Size: 162 KiB |
BIN
img/slider/slide_3.jpg
Normal file
|
After Width: | Height: | Size: 758 KiB |
BIN
img/slider/slide_4.jpg
Normal file
|
After Width: | Height: | Size: 522 KiB |
BIN
img/slider/slide_5.jpg
Normal file
|
After Width: | Height: | Size: 456 KiB |
|
Before Width: | Height: | Size: 194 KiB |
|
Before Width: | Height: | Size: 128 KiB |
|
Before Width: | Height: | Size: 147 KiB |
|
Before Width: | Height: | Size: 251 KiB |
|
Before Width: | Height: | Size: 298 KiB |
|
Before Width: | Height: | Size: 128 KiB |
|
Before Width: | Height: | Size: 243 KiB |
|
Before Width: | Height: | Size: 180 KiB |
|
Before Width: | Height: | Size: 162 KiB |
|
Before Width: | Height: | Size: 209 KiB |
|
Before Width: | Height: | Size: 135 KiB |
|
Before Width: | Height: | Size: 237 KiB |
|
Before Width: | Height: | Size: 367 KiB |
|
Before Width: | Height: | Size: 147 KiB |
|
Before Width: | Height: | Size: 376 KiB |
|
Before Width: | Height: | Size: 236 KiB |
|
Before Width: | Height: | Size: 164 KiB |
|
Before Width: | Height: | Size: 126 KiB |
|
Before Width: | Height: | Size: 211 KiB |
|
Before Width: | Height: | Size: 938 KiB |
BIN
img/thumbs/thumb_alberto.jpg
Normal file
|
After Width: | Height: | Size: 694 KiB |
BIN
img/thumbs/thumb_antonio.jpg
Normal file
|
After Width: | Height: | Size: 146 KiB |
BIN
img/thumbs/thumb_carro.jpg
Normal file
|
After Width: | Height: | Size: 144 KiB |
BIN
img/thumbs/thumb_castello.jpg
Normal file
|
After Width: | Height: | Size: 612 KiB |
BIN
img/thumbs/thumb_disputa.jpg
Normal file
|
After Width: | Height: | Size: 358 KiB |
BIN
img/thumbs/thumb_duomo.jpg
Normal file
|
After Width: | Height: | Size: 351 KiB |
BIN
img/thumbs/thumb_eva.jpg
Normal file
|
After Width: | Height: | Size: 274 KiB |
BIN
img/thumbs/thumb_faresi.jpg
Normal file
|
After Width: | Height: | Size: 459 KiB |
BIN
img/thumbs/thumb_francesco.jpg
Normal file
|
After Width: | Height: | Size: 348 KiB |
BIN
img/thumbs/thumb_fuori.jpg
Normal file
|
After Width: | Height: | Size: 476 KiB |
BIN
img/thumbs/thumb_loredana.jpg
Normal file
|
After Width: | Height: | Size: 939 KiB |
BIN
img/thumbs/thumb_monumento.jpg
Normal file
|
After Width: | Height: | Size: 534 KiB |
BIN
img/thumbs/thumb_nobili.jpg
Normal file
|
After Width: | Height: | Size: 961 KiB |
BIN
img/thumbs/thumb_piazza.jpg
Normal file
|
After Width: | Height: | Size: 906 KiB |
BIN
img/thumbs/thumb_pietro.jpg
Normal file
|
After Width: | Height: | Size: 543 KiB |
BIN
img/thumbs/thumb_prologo.jpg
Normal file
|
After Width: | Height: | Size: 465 KiB |
BIN
img/thumbs/thumb_rocco.jpg
Normal file
|
After Width: | Height: | Size: 625 KiB |
BIN
img/thumbs/thumb_sabini.jpg
Normal file
|
After Width: | Height: | Size: 674 KiB |
BIN
img/thumbs/thumb_toto.jpg
Normal file
|
After Width: | Height: | Size: 399 KiB |
BIN
img/thumbs/thumb_viaggiatore.jpg
Normal file
|
After Width: | Height: | Size: 753 KiB |
19
index.html
@ -8,28 +8,26 @@
|
||||
<script src="js/ui.js" type="module"></script>
|
||||
<title>Nel cielo di Fara</title>
|
||||
</head>
|
||||
<body>
|
||||
<body>
|
||||
<header class="main-header home">
|
||||
<div class="container">
|
||||
<div class="columns text-gray" id="nav">
|
||||
<div class="column col-lg-7 col-sm-10 col-md-2">
|
||||
<img class="of-hidden" src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
|
||||
<img class="of-hidden" src="img/loghi/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
|
||||
</div>
|
||||
<div class="column col-sm-2 show-sm text-right">
|
||||
<i class="icon icon-menu icon-2x"></i>
|
||||
</div>
|
||||
<div class="hide-sm column col-lg-5 col-sm-10 col-md-10 nav-light nav-menu" id="links">
|
||||
<a href="index.html" title="Torna alla home page">Home</a>
|
||||
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
|
||||
<a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
|
||||
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
|
||||
<a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
|
||||
<a href="credits.html" title="Credits del progetto">Credits</a>
|
||||
</div>
|
||||
<nav class="d-hide side-nav bg-white opensans">
|
||||
<p id="close-nav"><i class="icon-close"></i></p>
|
||||
<a href="index.html" title="Torna alla home page">Home</a>
|
||||
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
|
||||
<a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
|
||||
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
|
||||
<a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
|
||||
<a href="credits.html" title="Credits del progetto">Credits</a>
|
||||
</nav>
|
||||
@ -37,7 +35,7 @@
|
||||
</div>
|
||||
<div id="title" class="text-center">
|
||||
<h1 class="arvo">Nel cielo di Fara</h1>
|
||||
<button>Entra</button>
|
||||
<a href="itinerario.html"><button>Entra</button></a>
|
||||
</div>
|
||||
</header>
|
||||
<main></main>
|
||||
@ -46,5 +44,12 @@
|
||||
<p><img src="img/loghi_ispc_potlach.png" class="logos" alt="Loghi ISPC Potlach"></p>
|
||||
<p><img src="img/FESR_BARRA_BENEFICIARI_DEF.jpg" class="logos" alt="Loghi enti beneficiari"></p>
|
||||
</footer>
|
||||
<div id="preload">
|
||||
<img src="img/lp-bg/fara_bg_1.jpg" />
|
||||
<img src="img/lp-bg/fara_bg_2.jpg" />
|
||||
<img src="img/lp-bg/fara_bg_3.jpg" />
|
||||
<img src="img/lp-bg/fara_bg_4.jpg" />
|
||||
<img src="img/lp-bg/fara_bg_5.jpg" />
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
105
itinerario.html
@ -13,23 +13,21 @@
|
||||
<div class="container">
|
||||
<div class="columns bg-white" id="nav">
|
||||
<div class="column col-lg-7 col-sm-10 col-md-2">
|
||||
<img class="of-hidden" src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
|
||||
<img class="of-hidden" src="img/loghi/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
|
||||
</div>
|
||||
<div class="column col-sm-2 show-sm text-right">
|
||||
<i class="icon icon-menu icon-2x"></i>
|
||||
</div>
|
||||
<div class="hide-sm column col-lg-5 col-sm-10 col-md-10 nav-menu" id="links">
|
||||
<a href="index.html" title="Torna alla home page">Home</a>
|
||||
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
|
||||
<a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
|
||||
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
|
||||
<a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
|
||||
<a href="credits.html" title="Credits del progetto">Credits</a>
|
||||
</div>
|
||||
<nav class="d-hide side-nav bg-white opensans">
|
||||
<p id="close-nav"><i class="icon-close"></i></p>
|
||||
<a href="index.html" title="Torna alla home page">Home</a>
|
||||
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
|
||||
<a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
|
||||
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
|
||||
<a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
|
||||
<a href="credits.html" title="Credits del progetto">Credits</a>
|
||||
</nav>
|
||||
@ -84,7 +82,7 @@
|
||||
<div class="columns mb-2">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="#open-vid" title="Guarda il video">
|
||||
<img src="img/thumb_prologo.jpg" alt="Prologo">
|
||||
<img src="img/thumbs/thumb_prologo.jpg" alt="Prologo">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
@ -100,7 +98,7 @@
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="#open-vid" title="Guarda il video del viaggiatore">
|
||||
<img src="img/thumb_viaggiatore.jpg" alt="Viaggiatore #1">
|
||||
<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">
|
||||
@ -122,8 +120,8 @@
|
||||
<div class="container">
|
||||
<div class="columns mb-2">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="" title="Guarda il video">
|
||||
<img src="img/thumb_faresi.jpg" alt="Prologo">
|
||||
<a href="#open-vid" title="Guarda il video">
|
||||
<img src="img/thumbs/thumb_faresi.jpg" alt="Prologo">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
@ -140,8 +138,8 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="" title="Guarda il video del viaggiatore">
|
||||
<img src="img/thumb_piazza.jpg" alt="Viaggiatore #1">
|
||||
<a href="#open-vid" title="Guarda il video del viaggiatore">
|
||||
<img src="img/thumbs/thumb_piazza.jpg" alt="Viaggiatore #1">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
@ -161,8 +159,8 @@
|
||||
<div class="container">
|
||||
<div class="columns mb-2">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="" title="Guarda il video">
|
||||
<img src="img/thumb_antonio.jpg" alt="Antonio">
|
||||
<a href="#open-vid" title="Guarda il video">
|
||||
<img src="img/thumbs/thumb_antonio.jpg" alt="Antonio">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
@ -176,8 +174,8 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="" title="Guarda il video">
|
||||
<img src="img/thumb_francesco.jpg" alt="Francesco #3b">
|
||||
<a href="#open-vid" title="Guarda il video">
|
||||
<img src="img/thumbs/thumb_francesco.jpg" alt="Francesco #3b">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
@ -197,8 +195,8 @@
|
||||
<div class="container">
|
||||
<div class="columns mb-2">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="" title="Guarda il video">
|
||||
<img src="img/thumb_nobili.jpg" alt="I nobili di Fara">
|
||||
<a href="#open-vid" title="Guarda il video">
|
||||
<img src="img/thumbs/thumb_nobili.jpg" alt="I nobili di Fara">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
@ -216,8 +214,8 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="" title="Guarda il video">
|
||||
<img src="img/thumb_rocco.jpg" alt="Rocco si è svegliato #5">
|
||||
<a href="#open-vid" title="Guarda il video">
|
||||
<img src="img/thumbs/thumb_rocco.jpg" alt="Rocco si è svegliato #5">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
@ -230,7 +228,7 @@
|
||||
Passava tutto il tempo all'osteria del paese. Ora si è appena
|
||||
risvegliato dal lungo sonno e non riconosce più la sua Fara,
|
||||
tutta vuota e silenziosa. Ma Ariel compie una magia e gli mostra
|
||||
il borgo popolato come era allora
|
||||
il borgo popolato come era allora.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -239,8 +237,8 @@
|
||||
<div class="container">
|
||||
<div class="columns mb-2">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="" title="Guarda il video">
|
||||
<img src="img/thumb_alberto.jpg" alt="Alberto">
|
||||
<a href="#open-vid" title="Guarda il video">
|
||||
<img src="img/thumbs/thumb_alberto.jpg" alt="Alberto">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
@ -255,8 +253,8 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="" title="Guarda il video">
|
||||
<img src="img/thumb_disputa.jpg" alt="Disputa sui dialetti e sui saperi">
|
||||
<a href="#open-vid" title="Guarda il video">
|
||||
<img src="img/thumbs/thumb_disputa.jpg" alt="Disputa sui dialetti e sui saperi">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
@ -264,13 +262,11 @@
|
||||
Disputa sui dialetti e sui saperi #6
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Trilussa intrattiene con una piccola platea in una piazzetta,
|
||||
recitando poesie. Alberto, inizialmente seduto un po' in disparte,
|
||||
mal sopporta la lingua romanesca di Trilussa e improvvisamente
|
||||
si accende, accusando il poeta di essere un forestiero,
|
||||
un sabotatore in terra sabina. I due intraprendono una
|
||||
accesa disputa sui dialetti e sui saperi... finendo
|
||||
inevitabilmente per parlare di cucina.
|
||||
Trilussa recita poesie davanti una piccola platea in una piazzetta.
|
||||
Alberto, inizialmente seduto un po' in disparte, mal sopporta la
|
||||
lingua romanesca di Trilussa e improvvisamente si accende,
|
||||
accusando il poeta di essere un forestiero in terra sabina.
|
||||
I due intraprendono una accesa disputa sui dialetti e sui cibi.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -279,8 +275,8 @@
|
||||
<div class="container">
|
||||
<div class="columns mb-2">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="" title="Guarda il video">
|
||||
<img src="img/thumb_duomo.jpg" alt="Piazza Duomo">
|
||||
<a href="#open-vid" title="Guarda il video">
|
||||
<img src="img/thumbs/thumb_duomo.jpg" alt="Piazza Duomo">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
@ -297,8 +293,8 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="" title="Guarda il video">
|
||||
<img src="img/thumb_loredana.jpg" alt="Loredana">
|
||||
<a href="#open-vid" title="Guarda il video">
|
||||
<img src="img/thumbs/thumb_loredana.jpg" alt="Loredana">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
@ -320,8 +316,8 @@
|
||||
<div class="container">
|
||||
<div class="columns mb-2">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="" title="Guarda il video">
|
||||
<img src="img/thumb_pietro.jpg" alt="Pietro">
|
||||
<a href="#open-vid" title="Guarda il video">
|
||||
<img src="img/thumbs/thumb_pietro.jpg" alt="Pietro">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
@ -337,8 +333,8 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="" title="Guarda il video">
|
||||
<img src="img/thumb_castello.jpg" alt="Il castello">
|
||||
<a href="#open-vid" title="Guarda il video">
|
||||
<img src="img/thumbs/thumb_castello.jpg" alt="Il castello">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
@ -347,10 +343,9 @@
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Fara ha un castello di nobili origini, più volte espugnato e ricostruito.
|
||||
Un tempo ospitava la scuola di musica, l'ospedale, e tante attività del paese.
|
||||
Oggi è quasi in abbandono ma ci sono ancora dei tesori. Due imbonitori
|
||||
sui trampoli convincono la popolazione ad entrare nel castello,
|
||||
promettendo che lì dentro potrà trovare risposta a tutti i suoi desideri.
|
||||
Un tempo ospitava le tante attività del paese. Oggi è quasi in abbandono.
|
||||
Due imbonitori convincono la popolazione ad entrare, promettendo che lì
|
||||
dentro potrà trovare risposta a tutti i suoi desideri.
|
||||
Così gli abitanti cominciano a dar voce ai loro desideri, fin quando…
|
||||
</p>
|
||||
</div>
|
||||
@ -360,8 +355,8 @@
|
||||
<div class="container">
|
||||
<div class="columns mb-2">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="" title="Guarda il video">
|
||||
<img src="img/thumb_sabini.jpg" alt="I sabini ieri e oggi">
|
||||
<a href="#open-vid" title="Guarda il video">
|
||||
<img src="img/thumbs/thumb_sabini.jpg" alt="I sabini ieri e oggi">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
@ -377,8 +372,8 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="" title="Guarda il video">
|
||||
<img src="img/thumb_monumento.jpg" alt="Il monumento sacro">
|
||||
<a href="#open-vid" title="Guarda il video">
|
||||
<img src="img/thumbs/thumb_monumento.jpg" alt="Il monumento sacro">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
@ -399,8 +394,8 @@
|
||||
<div class="container">
|
||||
<div class="columns mb-2">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="" title="Guarda il video">
|
||||
<img src="img/thumb_eva.jpg" alt="Eva">
|
||||
<a href="#open-vid" title="Guarda il video">
|
||||
<img src="img/thumbs/thumb_eva.jpg" alt="Eva">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
@ -417,8 +412,8 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="" title="Guarda il video">
|
||||
<img src="img/thumb_toto.jpg" alt="Toto">
|
||||
<a href="#open-vid" title="Guarda il video">
|
||||
<img src="img/thumbs/thumb_toto.jpg" alt="Toto">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
@ -438,8 +433,8 @@
|
||||
<div class="container">
|
||||
<div class="columns mb-2">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="" title="Guarda il video">
|
||||
<img src="img/thumb_fuori.jpg" alt="Fuori Porta">
|
||||
<a href="#open-vid" title="Guarda il video">
|
||||
<img src="img/thumbs/thumb_fuori.jpg" alt="Fuori Porta">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
@ -455,8 +450,8 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2">
|
||||
<a href="" title="Guarda il video">
|
||||
<img src="img/thumb_carro.jpg" alt="Il ritorno del carro">
|
||||
<a href="#open-vid" title="Guarda il video">
|
||||
<img src="img/thumbs/thumb_carro.jpg" alt="Il ritorno del carro">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
|
||||
199
js/fara.js
@ -1,35 +1,49 @@
|
||||
//use strict;
|
||||
|
||||
export function slider(nextimage) {
|
||||
/**
|
||||
* 'Slide' background images
|
||||
* in landing page
|
||||
* @todo Preload iamges?? https://stackoverflow.com/questions/3646036/preloading-images-with-javascript
|
||||
*/
|
||||
export function sliderBg()
|
||||
{
|
||||
let nextimage = 0;
|
||||
let header = document.querySelector('header');
|
||||
slider();
|
||||
|
||||
function slider() {
|
||||
/*** Fade in??*/
|
||||
//opacity = 1;
|
||||
|
||||
let images = [
|
||||
'img/fara_background.jpg',
|
||||
//'img/fara_bg_2.jpg',
|
||||
'img/fara_bg_3.jpg',
|
||||
'img/fara_bg_4.jpg',
|
||||
'img/fara_bg_5.jpg',
|
||||
//'img/fara_bg_6.jpg',
|
||||
'img/fara_bg_7.jpg',
|
||||
'img/fara_bg_8.jpg',
|
||||
'img/fara_bg_9.jpg',
|
||||
'img/fara_bg_10.png',
|
||||
'img/fara_bg_11.jpg',
|
||||
];
|
||||
|
||||
'img/lp-bg/fara_bg_1.jpg',
|
||||
'img/lp-bg/fara_bg_2.jpg',
|
||||
'img/lp-bg/fara_bg_3.jpg',
|
||||
'img/lp-bg/fara_bg_4.jpg',
|
||||
'img/lp-bg/fara_bg_5.jpg',
|
||||
];
|
||||
|
||||
if (nextimage >= images.length) {
|
||||
nextimage = 0;
|
||||
nextimage = 0;
|
||||
}
|
||||
header.setAttribute('style', 'background-image : url("' + images[nextimage++] + '");');
|
||||
setTimeout(slider, 2000);
|
||||
}
|
||||
header.setAttribute('style', 'background-image : url("' +images[nextimage++] + '");');
|
||||
setTimeout(slider(nextimage), 2000);
|
||||
}
|
||||
|
||||
/**
|
||||
* @todo
|
||||
* Simple slideshow (Credits page)
|
||||
*/
|
||||
export function slideshow()
|
||||
{
|
||||
// Write me...
|
||||
}
|
||||
/**
|
||||
* @todo
|
||||
* The canvas should be drawn into an overlay
|
||||
* container (always fullscreen)
|
||||
*/
|
||||
export function interactiveMap() {
|
||||
export function interactiveMap()
|
||||
{
|
||||
let canvas = document.createElement('canvas');
|
||||
|
||||
let ctx = canvas.getContext('2d');
|
||||
@ -40,4 +54,149 @@ export function interactiveMap() {
|
||||
img.onload = () => {
|
||||
ctx.drawImage(img, 0, 0);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Menu keys for accessibility
|
||||
*/
|
||||
export function menuKeys()
|
||||
{
|
||||
document.addEventListener('keypress', e => {
|
||||
let keyCode = e.code;
|
||||
|
||||
if (keyCode.includes('Digit')) {
|
||||
let numCode = keyCode.replace('Digit', '');
|
||||
|
||||
let menuK = {
|
||||
'1' : 'itinerario.html',
|
||||
'2' : 'progetto.html',
|
||||
'3' : 'news.html',
|
||||
'4': 'credits.html',
|
||||
};
|
||||
|
||||
for (let k in menuK) {
|
||||
if (k === numCode)
|
||||
window.location.href = menuK[k];
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Apply active class to nav links
|
||||
* @todo Inefficient?
|
||||
*/
|
||||
export function activeNav()
|
||||
{
|
||||
let navlinks = Array.from(document.querySelectorAll('#links a'));
|
||||
|
||||
navlinks.forEach(element => {
|
||||
let ref = element.href.substr(element.href.lastIndexOf('/'), element.href.length);
|
||||
|
||||
if (window.location.href.includes(ref)) {
|
||||
element.setAttribute('class', 'active');
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Show vertical nav on mobile
|
||||
*/
|
||||
export function mobileNav()
|
||||
{
|
||||
let menu = document.querySelector('i');
|
||||
|
||||
if (menu) {
|
||||
menu.addEventListener('click', () => {
|
||||
document.querySelector('.side-nav').classList.remove('d-hide');
|
||||
document.querySelector('.side-nav').classList.remove('slide-out');
|
||||
document.querySelector('body').classList.add('opaque');
|
||||
});
|
||||
|
||||
let close = document.querySelector('#close-nav');
|
||||
|
||||
close.addEventListener('click', () => {
|
||||
document.querySelector('.side-nav').classList.add('d-hide');
|
||||
document.querySelector('body').classList.remove('opaque');
|
||||
});
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Open / close modal for videos
|
||||
* and apply video source
|
||||
*/
|
||||
export function openVideo(a)
|
||||
{
|
||||
/**
|
||||
let modal = document.querySelector('#mod-vid');
|
||||
let vidLinks = Array.from(document.querySelectorAll('a[href="#open-vid"]'));
|
||||
|
||||
* Dynamically change video source
|
||||
* Note naming convention...
|
||||
if (vidLinks.length) {
|
||||
vidLinks.forEach(a => {
|
||||
*/
|
||||
|
||||
let aNodes = a.childNodes;
|
||||
// Hacky??
|
||||
let title = a.parentElement
|
||||
.nextElementSibling
|
||||
.firstElementChild
|
||||
.innerHTML
|
||||
.trim();
|
||||
|
||||
console.log(aNodes);
|
||||
let vStr = '';
|
||||
|
||||
aNodes.forEach(n => {
|
||||
if (n.src) {
|
||||
vStr = n.src;
|
||||
vStr = vStr.substr(vStr.lastIndexOf('/')+1, vStr.length)
|
||||
.replace(/thumb_(.*)\.\w+$/, 'vid_$1.mp4');
|
||||
}
|
||||
});
|
||||
|
||||
localStorage.setItem('vidURI', vStr);
|
||||
localStorage.setItem('vidTitle', title);
|
||||
/**
|
||||
* Go to video page
|
||||
*/
|
||||
window.location.href = 'video.html';
|
||||
/* Close the modal when clicking on the
|
||||
modal.classList.add('active');
|
||||
document.querySelector('.modal-title').classList.add('roboto');
|
||||
document.querySelector('.modal-title').innerHTML = title;
|
||||
|
||||
let close = document.querySelectorAll('#mod-vid a[href="#close"]')[1];
|
||||
|
||||
close.addEventListener('click', () => {
|
||||
modal.classList.remove('active');
|
||||
});
|
||||
|
||||
* overlay
|
||||
overlay.addEventListener('click', () => {
|
||||
modal.classList.remove('active');
|
||||
})
|
||||
*/
|
||||
}
|
||||
/**
|
||||
* Activate background on scroll for nav only
|
||||
* if not small screen
|
||||
*/
|
||||
export function navOnScroll()
|
||||
{
|
||||
let nav = document.querySelector('#nav');
|
||||
let links = document.querySelector('#links');
|
||||
|
||||
if (window.pageYOffset !== 0) {
|
||||
nav.classList.add('bg-white', 'border');
|
||||
nav.classList.remove('text-gray');
|
||||
links.classList.add('nav-dark');
|
||||
links.classList.remove('nav-light');
|
||||
}
|
||||
else {
|
||||
if (!document.querySelector('header').classList.contains('itin')) {
|
||||
nav.classList.add('text-gray');
|
||||
links.classList.remove('nav-dark');
|
||||
links.classList.add('nav-light');
|
||||
}
|
||||
nav.classList.remove('bg-white', 'border');
|
||||
}
|
||||
}
|
||||
194
js/ui.js
@ -2,165 +2,59 @@
|
||||
|
||||
import * as Farapp from './fara.js';
|
||||
|
||||
let homeRE = new RegExp(/(https?:\S+\/$|index.html$)/);
|
||||
let landing = new RegExp(/(https?:\S+\/$|index.html$)/);
|
||||
|
||||
if (homeRE.test(window.location.href)) {
|
||||
if (landing.test(window.location.href)) {
|
||||
window.addEventListener('load', () => {
|
||||
Farapp.sliderBg();
|
||||
});
|
||||
}
|
||||
|
||||
if (!window.location.href.includes('video')) {
|
||||
document.addEventListener('readystatechange', () => {
|
||||
let nextimage = 0;
|
||||
let header = document.querySelector('header');
|
||||
slider();
|
||||
|
||||
function slider() {
|
||||
/*** Fade in??*/
|
||||
//opacity = 1;
|
||||
Farapp.activeNav();
|
||||
Farapp.menuKeys();
|
||||
Farapp.mobileNav();
|
||||
});
|
||||
|
||||
let images = [
|
||||
'img/fara_background.jpg',
|
||||
//'img/fara_bg_2.jpg',
|
||||
'img/fara_bg_3.jpg',
|
||||
'img/fara_bg_4.jpg',
|
||||
'img/fara_bg_5.jpg',
|
||||
//'img/fara_bg_6.jpg',
|
||||
'img/fara_bg_7.jpg',
|
||||
'img/fara_bg_8.jpg',
|
||||
'img/fara_bg_9.jpg',
|
||||
'img/fara_bg_10.png',
|
||||
'img/fara_bg_11.jpg',
|
||||
];
|
||||
|
||||
if (nextimage >= images.length) {
|
||||
nextimage = 0;
|
||||
}
|
||||
header.setAttribute('style', 'background-image : url("' + images[nextimage++] + '");');
|
||||
setTimeout(slider, 2000);
|
||||
}
|
||||
window.addEventListener('scroll', event => {
|
||||
Farapp.navOnScroll();
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Apply active class to selected link...
|
||||
* @todo Inefficient!!
|
||||
* For itinerario.html...
|
||||
* @todo What about the interactive map?!?
|
||||
*/
|
||||
document.addEventListener('readystatechange', () => {
|
||||
let navlinks = Array.from(document.querySelectorAll('#links a'));
|
||||
|
||||
navlinks.forEach(element => {
|
||||
let ref = element.href.substr(element.href.lastIndexOf('/'), element.href.length);
|
||||
|
||||
if (window.location.href.includes(ref)) {
|
||||
element.setAttribute('class', 'active');
|
||||
}
|
||||
if (homeRE.test(window.location.href)) {
|
||||
navlinks[0].setAttribute('class', 'active');
|
||||
}
|
||||
});
|
||||
});
|
||||
/**
|
||||
* Activate background on scroll for nav only
|
||||
* if not small screen
|
||||
*/
|
||||
window.addEventListener('scroll', event => {
|
||||
let nav = document.querySelector('#nav');
|
||||
let links = document.querySelector('#links');
|
||||
|
||||
if (window.pageYOffset !== 0) {
|
||||
nav.classList.add('bg-white', 'border');
|
||||
nav.classList.remove('text-gray');
|
||||
links.classList.add('nav-dark');
|
||||
links.classList.remove('nav-light');
|
||||
}
|
||||
else {
|
||||
if (!document.querySelector('header').classList.contains('itin')) {
|
||||
nav.classList.add('text-gray');
|
||||
links.classList.remove('nav-dark');
|
||||
links.classList.add('nav-light');
|
||||
}
|
||||
nav.classList.remove('bg-white', 'border');
|
||||
}
|
||||
});
|
||||
/**
|
||||
* Show horizontal nav on mobile
|
||||
*/
|
||||
document.addEventListener('readystatechange', () => {
|
||||
let menu = document.querySelector('i');
|
||||
|
||||
menu.addEventListener('click', () => {
|
||||
document.querySelector('.side-nav').classList.remove('d-hide');
|
||||
document.querySelector('.side-nav').classList.remove('slide-out');
|
||||
document.querySelector('body').classList.add('opaque');
|
||||
});
|
||||
|
||||
let close = document.querySelector('#close-nav');
|
||||
|
||||
close.addEventListener('click', () => {
|
||||
document.querySelector('.side-nav').classList.add('d-hide');
|
||||
document.querySelector('body').classList.remove('opaque');
|
||||
if (window.location.href.includes('itinerario')) {
|
||||
let vidLinks = document.querySelectorAll('a[href="#open-vid"]');
|
||||
vidLinks.forEach(a => {
|
||||
a.addEventListener('click', () => {
|
||||
Farapp.openVideo(a);
|
||||
});
|
||||
})
|
||||
})
|
||||
}
|
||||
/**
|
||||
* Open / close modal for videos
|
||||
* and apply video source
|
||||
* For videos...
|
||||
*/
|
||||
window.addEventListener('load', () => {
|
||||
let modal = document.querySelector('#mod-vid');
|
||||
let vidLinks = Array.from(document.querySelectorAll('a[href="#open-vid"]'));
|
||||
/**
|
||||
* Dynamically change video source
|
||||
* Note naming convention...
|
||||
*/
|
||||
if (vidLinks.length) {
|
||||
if (window.location.href.includes('video')) {
|
||||
document.addEventListener('readystatechange', () => {
|
||||
let vStr = localStorage.getItem('vidURI');
|
||||
let vidTitle = localStorage.getItem('vidTitle');
|
||||
|
||||
console.log(vStr, vidTitle);
|
||||
document.querySelector('h1').innerHTML = vidTitle;
|
||||
|
||||
let close = document.querySelector('a[title="Close"]');
|
||||
|
||||
close.addEventListener('click', () => {
|
||||
window.location.href = 'itinerario.html';
|
||||
});
|
||||
|
||||
let source = document.querySelector('source');
|
||||
let video = source.parentNode;
|
||||
let overlay = document.querySelector('.modal-overlay');
|
||||
|
||||
vidLinks.forEach(a => {
|
||||
let aNodes = a.childNodes;
|
||||
// Hacky??
|
||||
let title = a.parentElement
|
||||
.nextElementSibling
|
||||
.firstElementChild
|
||||
.innerHTML
|
||||
.trim();
|
||||
|
||||
a.addEventListener('click', () => {
|
||||
aNodes.forEach(n => {
|
||||
if (n.src) {
|
||||
let vStr = n.src
|
||||
.substr(n.src.lastIndexOf('/')+1, n.src.length)
|
||||
.replace(/thumb_(.*)\.\w+$/, 'vid_$1.mp4');
|
||||
|
||||
source.src = `assets/video/${vStr}`;
|
||||
|
||||
video.load();
|
||||
}
|
||||
});
|
||||
|
||||
modal.classList.add('active');
|
||||
document.querySelector('.modal-title').classList.add('roboto');
|
||||
document.querySelector('.modal-title').innerHTML = title;
|
||||
});
|
||||
});
|
||||
|
||||
let close = document.querySelectorAll('#mod-vid a[href="#close"]')[1];
|
||||
|
||||
close.addEventListener('click', () => {
|
||||
modal.classList.remove('active');
|
||||
});
|
||||
|
||||
/* Close the modal when clicking on the
|
||||
* overlay
|
||||
*/
|
||||
overlay.addEventListener('click', () => {
|
||||
modal.classList.remove('active');
|
||||
})
|
||||
}
|
||||
});
|
||||
/**
|
||||
* Draw interactive map in canvas...
|
||||
if (window.location.href.includes('itinerario')) {
|
||||
let mapImg = document.getElementById('map');
|
||||
|
||||
mapImg.addEventListener('click', () => {
|
||||
Farapp.interactiveMap();
|
||||
});
|
||||
}
|
||||
*/
|
||||
|
||||
source.src = `assets/video/${vStr}`;
|
||||
|
||||
video.load();
|
||||
});
|
||||
}
|
||||
@ -13,23 +13,21 @@
|
||||
<div class="container">
|
||||
<div class="columns text-gray" id="nav">
|
||||
<div class="column col-lg-7 col-sm-10 col-md-2">
|
||||
<img class="of-hidden" src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
|
||||
<img class="of-hidden" src="img/loghi/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
|
||||
</div>
|
||||
<div class="column col-sm-2 show-sm text-right">
|
||||
<i class="icon icon-menu icon-2x"></i>
|
||||
</div>
|
||||
<div class="hide-sm column col-lg-5 col-sm-10 col-md-10 nav-light nav-menu" id="links">
|
||||
<a href="index.html" title="Torna alla home page">Home</a>
|
||||
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
|
||||
<a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
|
||||
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
|
||||
<a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
|
||||
<a href="credits.html" title="Credits del progetto">Credits</a>
|
||||
</div>
|
||||
<nav class="d-hide side-nav bg-white opensans">
|
||||
<p id="close-nav"><i class="icon-close"></i></p>
|
||||
<a href="index.html" title="Torna alla home page">Home</a>
|
||||
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
|
||||
<a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
|
||||
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
|
||||
<a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
|
||||
<a href="credits.html" title="Credits del progetto">Credits</a>
|
||||
</nav>
|
||||
|
||||
@ -13,30 +13,28 @@
|
||||
<div class="container">
|
||||
<div class="columns text-gray" id="nav">
|
||||
<div class="column col-lg-7 col-sm-10 col-md-2">
|
||||
<img class="of-hidden" src="img/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
|
||||
<img class="of-hidden" src="img/loghi/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo">
|
||||
</div>
|
||||
<div class="column col-sm-2 show-sm text-right">
|
||||
<i class="icon icon-menu icon-2x"></i>
|
||||
</div>
|
||||
<div class="hide-sm column col-lg-5 col-sm-10 col-md-10 nav-light nav-menu" id="links">
|
||||
<a href="index.html" title="Torna alla home page">Home</a>
|
||||
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
|
||||
<a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
|
||||
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
|
||||
<a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
|
||||
<a href="credits.html" title="Credits del progetto">Credits</a>
|
||||
</div>
|
||||
<nav class="d-hide side-nav bg-white opensans">
|
||||
<p id="close-nav"><i class="icon-close"></i></p>
|
||||
<a href="index.html" title="Torna alla home page">Home</a>
|
||||
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
|
||||
<a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
|
||||
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
|
||||
<a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
|
||||
<a href="credits.html" title="Credits del progetto">Credits</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div id="title" class="text-center">
|
||||
<h1 class="roboto">Il progetto</h1>
|
||||
<h1 class="arvo">Il progetto</h1>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
@ -86,12 +84,14 @@
|
||||
<li>Un prodotto scalabile e ripetibile</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="column col-lg-5 col-sm-12 col-md-12" id="vagg">
|
||||
<img src="img/Prologo-Annunziazione_backst.jpg">
|
||||
</div>
|
||||
<div class="column col-lg-7 col-sm-12 col-md-12 of-hidden">
|
||||
<iframe src="https://player.vimeo.com/video/578170143"
|
||||
width="640" height="360" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Solo versione online -->
|
||||
<section class="odd-stripe">
|
||||
<div class="container">
|
||||
<div class="columns mb-2">
|
||||
@ -100,21 +100,19 @@
|
||||
</div>
|
||||
<div class="column col-lg-6 col-sm-12 col-md-12 of-hidden mt-2 mb-2 pr-lg">
|
||||
<p class="text-left text-uppercase mb-0 mt-2 robot-slab-b">Piattaforma web</p>
|
||||
<p class="text-left mb-2">
|
||||
Per la condivisione dei contenuti e la creazione gratuita di tour e visite guidate
|
||||
</p>
|
||||
<a href="https://cms.innovapatrimonio.com/" title="Vai al sito di InnovaPatrimonio">
|
||||
<img src="img/sito_ip.PNG" alt="Sito di InnovaPatrimonio">
|
||||
<img class="mt-2" src="img/sito_ip.PNG" alt="Sito di InnovaPatrimonio">
|
||||
</a>
|
||||
</div>
|
||||
<div class="column col-lg-6 col-sm-12 col-md-12 mt-2 mb-2 pr-lg">
|
||||
<p class="text-left text-uppercase mb-0 mt-2 robot-slab-b">Web app</p>
|
||||
<a href="https://pwa.innovapatrimonio.com/" title="Vai alla web app di InnovaPatrimonio">
|
||||
<img src="img/webapp.PNG" alt="Web App InnovaPatrimonio">
|
||||
<img class="mt-2" src="img/webapp.PNG" alt="Web App InnovaPatrimonio">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Fine (versione online) -->
|
||||
<section class="prj-logos">
|
||||
<div class="container">
|
||||
<div class="columns mb-2">
|
||||
@ -126,21 +124,21 @@
|
||||
<div class="col-2 col-sm-12 col-md-12"></div>
|
||||
<div class="col-3 col-sm-12 col-md-12 pl-2 pr-2">
|
||||
<figure class="figure">
|
||||
<img class="of-hidden" src="img/logo_theorema.png" alt="THEOREMA">
|
||||
<img class="of-hidden" src="img/loghi/logo_theorema.png" alt="THEOREMA">
|
||||
<figcaption class="figure-caption text-center opensans">THEOREMA</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="col-3 col-sm-12 col-md-12 pl-2 pr-2">
|
||||
<a href="https://orpheogroup.com">
|
||||
<figure class="figure">
|
||||
<img class="of-hidden" src="img/logo_orpheo.png" alt="ORPHEO">
|
||||
<img class="of-hidden" src="img/loghi/logo_orpheo.png" alt="ORPHEO">
|
||||
<figcaption class="figure-caption text-center opensans">ORPHEO</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-3 col-sm-12 col-md-12 pl-2 pr-2">
|
||||
<figure class="figure">
|
||||
<img class="of-hidden" src="img/logo_sillabe.jpg" alt="SILLABE">
|
||||
<img class="of-hidden" src="img/loghi/logo_sillabe.jpg" alt="SILLABE">
|
||||
<figcaption class="figure-caption text-center opensans">SILLABE</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
@ -159,7 +157,7 @@
|
||||
<div class="col-2 col-sm-12 col-md-12">
|
||||
<a href="https://www.teatropotlach.org" title="Vai al sito del Teatro Potlach">
|
||||
<figure class="figure">
|
||||
<img class="of-hidden" src="img/logo_potlach.jpg" alt="TEATRO POTLACH" id="potlach">
|
||||
<img class="of-hidden" src="img/loghi/logo_potlach.jpg" alt="TEATRO POTLACH" id="potlach">
|
||||
<figcaption class="figure-caption text-center opensans">TEATRO POTLACH</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
|
||||
30
video.html
Normal file
@ -0,0 +1,30 @@
|
||||
<!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">
|
||||
<script src="js/ui.js" type="module"></script>
|
||||
<title>Nel cielo di Fara</title>
|
||||
</head>
|
||||
<body class="bg-dark">
|
||||
<main>
|
||||
<div class="columns">
|
||||
<div class="column col-11">
|
||||
<h1 class="roboto-slab mb-2 mt-2 ml-2"></h1>
|
||||
</div>
|
||||
<div class="column col-1">
|
||||
<a href="#close" class="btn btn-clear float-right" title="Close" aria-label="Close"></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<video class="video-responsive" controls>
|
||||
<source src="" type="video/mp4">
|
||||
Il browser non supporta i video integrati
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||