Finished interactive POIs
This commit is contained in:
parent
b7a9d304af
commit
caf677e09a
66
img/map.svg
66
img/map.svg
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 697 KiB |
BIN
img/map_int.png
Normal file
BIN
img/map_int.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
BIN
img/mappa.png
BIN
img/mappa.png
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 MiB After Width: | Height: | Size: 514 KiB |
@ -43,7 +43,7 @@
|
||||
<div class="columns">
|
||||
<div class="column col-lg-6 col-sm-12 col-md-12 of-hidden">
|
||||
<a href="map.html">
|
||||
<img src="img/map.svg" title="Apri la mappa interattiva" alt="Mappa dei percorsi a Fara Sabina" id="map">
|
||||
<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">
|
||||
|
||||
29
js/ui-map.js
29
js/ui-map.js
@ -10,6 +10,19 @@ document.addEventListener('readystatechange', () => {
|
||||
|
||||
});
|
||||
|
||||
document.addEventListener('readystatechange', () => {
|
||||
let close = document.querySelector('#close-map');
|
||||
|
||||
close.addEventListener('click', () => {
|
||||
window.location.href = "itinerario.html";
|
||||
});
|
||||
|
||||
});
|
||||
/**
|
||||
* Open modal overlay
|
||||
* for each POI
|
||||
* @param {string} id
|
||||
*/
|
||||
function openModal(id) {
|
||||
const modTitles = {
|
||||
'prologo' : 'Itinerario - #0',
|
||||
@ -22,12 +35,16 @@ function openModal(id) {
|
||||
'duomo' : 'Itinerario - #7',
|
||||
'castello' : 'Itinerario - #8',
|
||||
'sabini' : 'Itinerario - #9',
|
||||
'monumento' : 'Itinerario - #10',
|
||||
'fuori' : 'Itinerario - #11',
|
||||
'carro' : 'Itinerario - #12',
|
||||
}
|
||||
|
||||
// The POI with more than one video
|
||||
const multiVid = {
|
||||
'piazza' : 3,
|
||||
'rocco' : 2,
|
||||
'duomo' : 3,
|
||||
'monumento' : 3,
|
||||
};
|
||||
|
||||
document.querySelector('.modal-title').innerHTML = modTitles[id];
|
||||
@ -71,7 +88,10 @@ function openModal(id) {
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Open video from thumbnail
|
||||
* @param {string} id
|
||||
*/
|
||||
const openVid = (id) => {
|
||||
|
||||
const titles = {
|
||||
@ -90,6 +110,11 @@ const openVid = (id) => {
|
||||
'pietro' : 'Pietro #7b',
|
||||
'castello' : 'Il castello #8',
|
||||
'sabini' : 'I Sabini ieri e oggi #9',
|
||||
'monumento' : 'Il monumento sacro #10',
|
||||
'eva' : 'Eva #10a',
|
||||
'toto' : 'Toto #10b',
|
||||
'fuori' : 'Fuori Porta #11',
|
||||
'carro' : 'Il ritorno del carro #12',
|
||||
}
|
||||
const vimeoVids = {
|
||||
'prologo' : '478632535',
|
||||
|
||||
189
map.html
189
map.html
@ -10,17 +10,20 @@
|
||||
<body>
|
||||
<div>
|
||||
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" style="max-height: 100%;">
|
||||
<image href="img/mappa.png" 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"
|
||||
/>-->
|
||||
<image href="img/map_int.png" height="200" width="200"/>
|
||||
<text
|
||||
id="text837"
|
||||
y="0"
|
||||
x="190"
|
||||
style="font-size:5px;line-height:1.25;font-family:serif;-inkscape-font-specification:serif;stroke-width:0.264583"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-size:6px;font-family:sans-serif;cursor:pointer;
|
||||
fill:#777;fill-opacity:1;stroke-width:0.264583"
|
||||
y="8"
|
||||
x="190"
|
||||
id="close-map"
|
||||
sodipodi:role="line">X</tspan>
|
||||
</text>
|
||||
<g id="prologo" style="cursor: pointer" onclick="openModal(this.id)">
|
||||
<circle
|
||||
r="2.817522"
|
||||
@ -35,7 +38,7 @@
|
||||
style="font-size:5px;line-height:1.25;font-family:serif;-inkscape-font-specification:serif;stroke-width:0.264583"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-style:italic;font-size:4px;font-family:Caladea;
|
||||
fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
|
||||
fill:#fff;fill-opacity:1;stroke-width:0.264583"
|
||||
y="26"
|
||||
x="30.1"
|
||||
id="tspan835"
|
||||
@ -54,7 +57,7 @@
|
||||
style="font-size:5px;line-height:1.25;font-family:serif;-inkscape-font-specification:serif;stroke-width:0.264583"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-style:italic;font-size:4px;font-family:Caladea;
|
||||
fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
|
||||
fill:#fff;fill-opacity:1;stroke-width:0.264583"
|
||||
y="71"
|
||||
x="120"
|
||||
id="tspan835"
|
||||
@ -73,7 +76,7 @@
|
||||
style="font-size:5px;line-height:1.25;font-family:serif;-inkscape-font-specification:serif;stroke-width:0.264583"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-style:italic;font-size:4px;font-family:Caladea;
|
||||
fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
|
||||
fill:#fff;fill-opacity:1;stroke-width:0.264583"
|
||||
y="71"
|
||||
x="94"
|
||||
id="tspan835"
|
||||
@ -93,7 +96,7 @@
|
||||
style="font-size:5px;line-height:1.25;font-family:serif;-inkscape-font-specification:serif;stroke-width:0.264583"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-style:italic;font-size:4px;font-family:Caladea;
|
||||
fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
|
||||
fill:#fff;fill-opacity:1;stroke-width:0.264583"
|
||||
y="50"
|
||||
x="92"
|
||||
id="tspan835"
|
||||
@ -113,7 +116,7 @@
|
||||
style="font-size:5px;line-height:1.25;font-family:serif;-inkscape-font-specification:serif;stroke-width:0.264583"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-style:italic;font-size:4px;font-family:Caladea;
|
||||
fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
|
||||
fill:#fff;fill-opacity:1;stroke-width:0.264583"
|
||||
y="36"
|
||||
x="88"
|
||||
id="tspan835"
|
||||
@ -133,7 +136,7 @@
|
||||
style="font-size:5px;line-height:1.25;font-family:serif;-inkscape-font-specification:serif;stroke-width:0.264583"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-style:italic;font-size:4px;font-family:Caladea;
|
||||
fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
|
||||
fill:#fff;fill-opacity:1;stroke-width:0.264583"
|
||||
y="46"
|
||||
x="81"
|
||||
id="tspan835"
|
||||
@ -153,7 +156,7 @@
|
||||
style="font-size:5px;line-height:1.25;font-family:serif;-inkscape-font-specification:serif;stroke-width:0.264583"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-style:italic;font-size:4px;font-family:Caladea;
|
||||
fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
|
||||
fill:#fff;fill-opacity:1;stroke-width:0.264583"
|
||||
y="70"
|
||||
x="59"
|
||||
id="tspan835"
|
||||
@ -173,7 +176,7 @@
|
||||
style="font-size:5px;line-height:1.25;font-family:serif;-inkscape-font-specification:serif;stroke-width:0.264583"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-style:italic;font-size:4px;font-family:Caladea;
|
||||
fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
|
||||
fill:#fff;fill-opacity:1;stroke-width:0.264583"
|
||||
y="95"
|
||||
x="88"
|
||||
id="tspan835"
|
||||
@ -193,7 +196,7 @@
|
||||
style="font-size:5px;line-height:1.25;font-family:serif;-inkscape-font-specification:serif;stroke-width:0.264583"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-style:italic;font-size:4px;font-family:Caladea;
|
||||
fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
|
||||
fill:#fff;fill-opacity:1;stroke-width:0.264583"
|
||||
y="97"
|
||||
x="103"
|
||||
id="tspan835"
|
||||
@ -213,12 +216,72 @@
|
||||
style="font-size:5px;line-height:1.25;font-family:serif;-inkscape-font-specification:serif;stroke-width:0.264583"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-style:italic;font-size:4px;font-family:Caladea;
|
||||
fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
|
||||
fill:#fff;fill-opacity:1;stroke-width:0.264583"
|
||||
y="89"
|
||||
x="87"
|
||||
id="tspan835"
|
||||
sodipodi:role="line">9</tspan></text>
|
||||
</g>
|
||||
<g id="monumento" style="cursor: pointer" onclick="openModal(this.id)">
|
||||
<circle
|
||||
r="2.817522"
|
||||
cy="158.578873"
|
||||
cx="154.127975"
|
||||
id="path833"
|
||||
style="fill:#c96abe;fill-opacity:1;stroke-width:0.215147;paint-order:fill markers stroke" />
|
||||
<text
|
||||
id="text837"
|
||||
y="35.578873"
|
||||
x="15.127975"
|
||||
style="font-size:5px;line-height:1.25;font-family:serif;-inkscape-font-specification:serif;stroke-width:0.264583"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-style:italic;font-size:4px;font-family:Caladea;
|
||||
fill:#fff;fill-opacity:1;stroke-width:0.264583"
|
||||
y="160"
|
||||
x="152"
|
||||
id="tspan835"
|
||||
sodipodi:role="line">10</tspan></text>
|
||||
</g>
|
||||
<g id="fuori" style="cursor: pointer" onclick="openModal(this.id)">
|
||||
<circle
|
||||
r="2.817522"
|
||||
cy="80.578873"
|
||||
cx="43.527975"
|
||||
id="path833"
|
||||
style="fill:#c96abe;fill-opacity:1;stroke-width:0.215147;paint-order:fill markers stroke" />
|
||||
<text
|
||||
id="text837"
|
||||
y="35.578873"
|
||||
x="15.527975"
|
||||
style="font-size:5px;line-height:1.25;font-family:serif;-inkscape-font-specification:serif;stroke-width:0.264583"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-style:italic;font-size:4px;font-family:Caladea;
|
||||
fill:#fff;fill-opacity:1;stroke-width:0.264583"
|
||||
y="82"
|
||||
x="41.5"
|
||||
id="tspan835"
|
||||
sodipodi:role="line">11</tspan></text>
|
||||
</g>
|
||||
<g id="carro" style="cursor: pointer" onclick="openModal(this.id)">
|
||||
<circle
|
||||
r="2.817522"
|
||||
cy="12.578873"
|
||||
cx="75.127975"
|
||||
id="path833"
|
||||
style="fill:#c96abe;fill-opacity:1;stroke-width:0.215147;paint-order:fill markers stroke" />
|
||||
<text
|
||||
id="text837"
|
||||
y="35.578873"
|
||||
x="15.127975"
|
||||
style="font-size:5px;line-height:1.25;font-family:serif;-inkscape-font-specification:serif;stroke-width:0.264583"
|
||||
xml:space="preserve"><tspan
|
||||
style="font-style:italic;font-size:4px;font-family:Caladea;
|
||||
fill:#fff;fill-opacity:1;stroke-width:0.264583"
|
||||
y="14"
|
||||
x="73"
|
||||
id="tspan835"
|
||||
sodipodi:role="line">12</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="modal modal-lg modal-fullheight" id="mod-vid">
|
||||
@ -485,6 +548,90 @@
|
||||
<img src="img/thumbs/thumb_sabini.jpg" alt="I sabini ieri e oggi">
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-monumento1">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
<h3 class="lilac mb-2 text-italic text-bold">
|
||||
Il monumento sacro #10
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Lo strano personaggio guida e l'angelo ci accompagnano attraverso la pineta,
|
||||
fino al monumento sacro dei caduti in guerra. Un tumulo recintato e scavato
|
||||
nel banco roccioso, dove gli abitanti del paese si prendono cura dei sentieri
|
||||
e dei fiori o cantano spensieratamente. Un luogo naturale fatto di roccia e memorie,
|
||||
all'ombra gentile dei lecci.
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 vid-thumb" id="t-monumento1">
|
||||
<img src="img/thumbs/thumb_monumento.jpg" alt="Il monumento sacro">
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-monumento2">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
<h3 class="green mb-2 text-italic text-bold">
|
||||
Eva #10a
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Eva viveva a Roma ma si è trasferita a Fara. Si chiede quanto a lungo
|
||||
resterà in questo luogo sospeso nello spazio e nel tempo.
|
||||
Ha voluto costruire questo inedito ritratto del borgo,
|
||||
con i nuovi compagni di viaggio protagonisti delle storie,
|
||||
cercando di vivere la bellezza e promuoverla come un valore
|
||||
sociale comune.
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 vid-thumb" id="t-monumento2">
|
||||
<img src="img/thumbs/thumb_eva.jpg" alt="Eva">
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-monumento3">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
<h3 class="green mb-2 text-italic text-bold">
|
||||
Toto #10b
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Toto quando era giovane faceva il fuochista alla Croce Rossa di Fara,
|
||||
come tante famiglie del borgo. Questo luogo era in origine un
|
||||
preventorio antitubercolare per bambini che venivano da tutta Italia.
|
||||
Oggi è in rovina ma è ancora pieno di fascino, in un paesaggio bellissimo.
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 vid-thumb" id="t-monumento3">
|
||||
<img src="img/thumbs/thumb_toto.jpg" alt="Toto">
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-fuori">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
<h3 class="lilac mb-2 text-italic text-bold">
|
||||
Fuori Porta #11
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Fuori porta è il luogo del pettegolezzo. Da qui passa obbligatoriamente
|
||||
chi entra e chi esce dal borgo, sottoposto agli inevitabili giudizi dei
|
||||
giocatori di carte e di coloro che bighellonano sul muretto.
|
||||
Il personaggio di Acab mette in scena una danza quasi tribale
|
||||
che rappresenta questo rito.
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 vid-thumb" id="t-fuori">
|
||||
<img src="img/thumbs/thumb_fuori.jpg" alt="Fuori Porta">
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-carro">
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pl-lg">
|
||||
<h3 class="lilac mb-2 text-italic text-bold">
|
||||
Il ritorno del carro #12
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
L'angelo e Ariel si trovano sul Belvedere e improvvisamente compare
|
||||
qualcosa nel cielo. È il presagio di qualcosa che si compie
|
||||
e che si celebrerà con il rito di ri-fondazione della città,
|
||||
all'insegna dell'immaginazione e della felicità.
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 vid-thumb" id="t-carro">
|
||||
<img src="img/thumbs/thumb_carro.jpg" alt="Fuori Porta">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user