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*
# Ignore videos in online version
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',
'faresi' : 'Itinerario - #2',
'piazza' : 'Itinerario - #3',
'nobili' : 'Itinerario - #4',
'rocco' : 'Itinerario - #5',
}
document.querySelector('.modal-title').innerHTML = modTitles[id];
@ -26,7 +28,8 @@ function openModal(id) {
modChildren.forEach(c => {
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');
}
else {
@ -70,7 +73,9 @@ const openVid = (id) => {
'faresi' : 'Sul carattere dei Faresi #2',
'piazza' : 'Piazza Forcina #3',
'antonio' : 'Antonio #3a',
'francesco' : 'Antonio #3b',
'francesco' : 'Francesco #3b',
'nobili' : 'I Nobili di Fara #4',
'rocco' : 'Rocco si è svegliato #5',
}
const vimeoVids = {
'prologo' : '478632535',

103
map.html
View File

@ -24,20 +24,20 @@
<g id="prologo" style="cursor: pointer" onclick="openModal(this.id)">
<circle
r="2.817522"
cy="35.578873"
cx="26.127975"
cy="24.578873"
cx="31.127975"
id="path833"
style="fill:#c96abe;fill-opacity:1;stroke-width:0.215147;paint-order:fill markers stroke" />
<text
id="text837"
y="35.578873"
y="25.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="37"
x="25.1"
y="26"
x="30.1"
id="tspan835"
sodipodi:role="line">0</tspan></text>
</g>
@ -45,7 +45,7 @@
<circle
r="2.817522"
cy="69.578873"
cx="111.127975"
cx="121.127975"
id="path833"
style="fill:#c96abe;fill-opacity:1;stroke-width:0.215147;paint-order:fill markers stroke" />
<text
@ -56,7 +56,7 @@
style="font-style:italic;font-size:4px;font-family:Caladea;
fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
y="71"
x="110"
x="120"
id="tspan835"
sodipodi:role="line">1</tspan></text>
</g>
@ -64,7 +64,7 @@
<circle
r="2.817522"
cy="69.578873"
cx="85.127975"
cx="95.127975"
id="path833"
style="fill:#c96abe;fill-opacity:1;stroke-width:0.215147;paint-order:fill markers stroke" />
<text
@ -75,15 +75,15 @@
style="font-style:italic;font-size:4px;font-family:Caladea;
fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
y="71"
x="84"
x="94"
id="tspan835"
sodipodi:role="line">2</tspan></text>
</g>
<g id="piazza" style="cursor: pointer" onclick="openModal(this.id)">
<circle
r="2.817522"
cy="46.578873"
cx="83.127975"
cy="48.578873"
cx="93.127975"
id="path833"
style="fill:#c96abe;fill-opacity:1;stroke-width:0.215147;paint-order:fill markers stroke" />
<text
@ -94,11 +94,51 @@
xml:space="preserve"><tspan
style="font-style:italic;font-size:4px;font-family:Caladea;
fill:#ffffff;fill-opacity:1;stroke-width:0.264583"
y="48"
x="82"
y="50"
x="92"
id="tspan835"
sodipodi:role="line">3</tspan></text>
</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>
</div>
<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;">
</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>