nicolo/fara-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Interactive POIs - to n. 5

Browse Source
This commit is contained in:
Nicolò P 2021-10-27 11:47:22 +02:00
parent 7a133bafc6
commit 6dd77d06d5
4 changed files with 99 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@ -5,4 +5,5 @@ 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
*.xcf

BIN
img/mappa.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 MiB

After

Width:  |  Height:  |  Size: 2.2 MiB

9
js/ui-map.js
View File

@ -16,6 +16,8 @@ function openModal(id) {
'viaggiatore' : 'Itinerario - #1', 'viaggiatore' : 'Itinerario - #1',
'faresi' : 'Itinerario - #2', 'faresi' : 'Itinerario - #2',
'piazza' : 'Itinerario - #3', 'piazza' : 'Itinerario - #3',
'nobili' : 'Itinerario - #4',
'rocco' : 'Itinerario - #5',
} }
document.querySelector('.modal-title').innerHTML = modTitles[id]; document.querySelector('.modal-title').innerHTML = modTitles[id];
@ -26,7 +28,8 @@ function openModal(id) {
modChildren.forEach(c => { modChildren.forEach(c => {
if (c.classList.contains('columns')) { if (c.classList.contains('columns')) {
if (c.id === 'col-'+id || c.id.includes('piazza')) { if (c.id === 'col-'+id ||
(c.id.includes('piazza') && id.includes('piazza'))) {
c.classList.remove('hide'); c.classList.remove('hide');
} }
else { else {
@ -70,7 +73,9 @@ const openVid = (id) => {
'faresi' : 'Sul carattere dei Faresi #2', 'faresi' : 'Sul carattere dei Faresi #2',
'piazza' : 'Piazza Forcina #3', 'piazza' : 'Piazza Forcina #3',
'antonio' : 'Antonio #3a', 'antonio' : 'Antonio #3a',
'francesco' : 'Antonio #3b', 'francesco' : 'Francesco #3b',
'nobili' : 'I Nobili di Fara #4',
'rocco' : 'Rocco si è svegliato #5',
} }
const vimeoVids = { const vimeoVids = {
'prologo' : '478632535', 'prologo' : '478632535',

103
map.html
View File

@ -24,20 +24,20 @@
<g id="prologo" style="cursor: pointer" onclick="openModal(this.id)"> <g id="prologo" style="cursor: pointer" onclick="openModal(this.id)">
<circle <circle
r="2.817522" r="2.817522"
cy="35.578873" cy="24.578873"
cx="26.127975" cx="31.127975"
id="path833" id="path833"
style="fill:#c96abe;fill-opacity:1;stroke-width:0.215147;paint-order:fill markers stroke" /> style="fill:#c96abe;fill-opacity:1;stroke-width:0.215147;paint-order:fill markers stroke" />
<text <text
id="text837" id="text837"
y="35.578873" y="25.578873"
x="15.127975" x="15.127975"
style="font-size:5px;line-height:1.25;font-family:serif;-inkscape-font-specification:serif;stroke-width:0.264583" style="font-size:5px;line-height:1.25;font-family:serif;-inkscape-font-specification:serif;stroke-width:0.264583"
xml:space="preserve"><tspan xml:space="preserve"><tspan
style="font-style:italic;font-size:4px;font-family:Caladea; style="font-style:italic;font-size:4px;font-family:Caladea;
fill:#ffffff;fill-opacity:1;stroke-width:0.264583" fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
y="37" y="26"
x="25.1" x="30.1"
id="tspan835" id="tspan835"
sodipodi:role="line">0</tspan></text> sodipodi:role="line">0</tspan></text>
</g> </g>
@ -45,7 +45,7 @@
<circle <circle
r="2.817522" r="2.817522"
cy="69.578873" cy="69.578873"
cx="111.127975" cx="121.127975"
id="path833" id="path833"
style="fill:#c96abe;fill-opacity:1;stroke-width:0.215147;paint-order:fill markers stroke" /> style="fill:#c96abe;fill-opacity:1;stroke-width:0.215147;paint-order:fill markers stroke" />
<text <text
@ -56,7 +56,7 @@
style="font-style:italic;font-size:4px;font-family:Caladea; style="font-style:italic;font-size:4px;font-family:Caladea;
fill:#ffffff;fill-opacity:1;stroke-width:0.264583" fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
y="71" y="71"
x="110" x="120"
id="tspan835" id="tspan835"
sodipodi:role="line">1</tspan></text> sodipodi:role="line">1</tspan></text>
</g> </g>
@ -64,7 +64,7 @@
<circle <circle
r="2.817522" r="2.817522"
cy="69.578873" cy="69.578873"
cx="85.127975" cx="95.127975"
id="path833" id="path833"
style="fill:#c96abe;fill-opacity:1;stroke-width:0.215147;paint-order:fill markers stroke" /> style="fill:#c96abe;fill-opacity:1;stroke-width:0.215147;paint-order:fill markers stroke" />
<text <text
@ -75,15 +75,15 @@
style="font-style:italic;font-size:4px;font-family:Caladea; style="font-style:italic;font-size:4px;font-family:Caladea;
fill:#ffffff;fill-opacity:1;stroke-width:0.264583" fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
y="71" y="71"
x="84" x="94"
id="tspan835" id="tspan835"
sodipodi:role="line">2</tspan></text> sodipodi:role="line">2</tspan></text>
</g> </g>
<g id="piazza" style="cursor: pointer" onclick="openModal(this.id)"> <g id="piazza" style="cursor: pointer" onclick="openModal(this.id)">
<circle <circle
r="2.817522" r="2.817522"
cy="46.578873" cy="48.578873"
cx="83.127975" cx="93.127975"
id="path833" id="path833"
style="fill:#c96abe;fill-opacity:1;stroke-width:0.215147;paint-order:fill markers stroke" /> style="fill:#c96abe;fill-opacity:1;stroke-width:0.215147;paint-order:fill markers stroke" />
<text <text
@ -94,11 +94,51 @@
xml:space="preserve"><tspan xml:space="preserve"><tspan
style="font-style:italic;font-size:4px;font-family:Caladea; style="font-style:italic;font-size:4px;font-family:Caladea;
fill:#ffffff;fill-opacity:1;stroke-width:0.264583" fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
y="48" y="50"
x="82" x="92"
id="tspan835" id="tspan835"
sodipodi:role="line">3</tspan></text> sodipodi:role="line">3</tspan></text>
</g> </g>
<g id="nobili" style="cursor: pointer" onclick="openModal(this.id)">
<circle
r="2.817522"
cy="34.578873"
cx="89.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:#ffffff;fill-opacity:1;stroke-width:0.264583"
y="36"
x="88"
id="tspan835"
sodipodi:role="line">4</tspan></text>
</g>
<g id="rocco" style="cursor: pointer" onclick="openModal(this.id)">
<circle
r="2.817522"
cy="44.578873"
cx="82.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:#ffffff;fill-opacity:1;stroke-width:0.264583"
y="46"
x="81"
id="tspan835"
sodipodi:role="line">5</tspan></text>
</g>
</svg> </svg>
</div> </div>
<div class="modal modal-lg modal-fullheight" id="mod-vid"> <div class="modal modal-lg modal-fullheight" id="mod-vid">
@ -208,6 +248,43 @@
<img src="img/thumbs/thumb_francesco.jpg" alt="Piazza Forcina" style="cursor: pointer;"> <img src="img/thumbs/thumb_francesco.jpg" alt="Piazza Forcina" style="cursor: pointer;">
</div> </div>
</div> </div>
<div class="columns hide" id="col-nobili">
<div class="column col-lg-6 col-md-6 col-sm-12">
<h3 class="lilac mb-2 text-italic text-bold">
I Nobili di Fara #4
</h3>
<p class="text-small">
Trilussa, accompagnata dall'angelo, racconta e mostra
i molti palazzi nobiliari a Fara, appartenuti alle famiglie
romane degli Orsini, dei Farnese, dei Barberini...
da queste potenti famiglie baronali
provenivano gli abati commendatari della vicina e
potentissima Abbazia di Farfa che hanno lasciato
la loro impronta nel borgo.
</p>
</div>
<div class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="t-nobili">
<img src="img/thumbs/thumb_nobili.jpg" alt="I nobili di Fara" style="cursor: pointer;">
</div>
</div>
<div class="columns hide" id="col-rocco">
<div class="column col-lg-6 col-md-6 col-sm-12">
<h3 class="lilac mb-2 text-italic text-bold">
Rocco si è svegliato #5
</h3>
<p class="text-small">
Rocco era un abitante di Fara in Sabina morto nel 1987 e vissuto in
un momento di fervore della vita del paese e della sua comunità.
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.
</p>
</div>
<div class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="t-rocco">
<img src="img/thumbs/thumb_rocco.jpg" alt="Rocco si è svegliato" style="cursor: pointer;">
</div>
</div>
</div> </div>
</div> </div>
</div> </div>