Interactive POIs - first part
This commit is contained in:
177
map.html
177
map.html
@@ -10,8 +10,8 @@
|
||||
<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
|
||||
<image href="img/mappa.png" height="200" width="200"/>
|
||||
<!--<rect
|
||||
onclick="openModal()"
|
||||
y="35.578873"
|
||||
x="15.127975"
|
||||
@@ -20,18 +20,96 @@
|
||||
id="prologo"
|
||||
style="fill:rgba(155,155,155,0.29);
|
||||
stroke:none;stroke-width:0.3;paint-order:fill markers stroke"
|
||||
/>
|
||||
/>-->
|
||||
<g id="prologo" style="cursor: pointer" onclick="openModal(this.id)">
|
||||
<circle
|
||||
r="2.817522"
|
||||
cy="35.578873"
|
||||
cx="26.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="37"
|
||||
x="25.1"
|
||||
id="tspan835"
|
||||
sodipodi:role="line">0</tspan></text>
|
||||
</g>
|
||||
<g id="viaggiatore" style="cursor: pointer" onclick="openModal(this.id)">
|
||||
<circle
|
||||
r="2.817522"
|
||||
cy="69.578873"
|
||||
cx="111.127975"
|
||||
id="path833"
|
||||
style="fill:#c96abe;fill-opacity:1;stroke-width:0.215147;paint-order:fill markers stroke" />
|
||||
<text
|
||||
y="45.578873"
|
||||
x="50.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="71"
|
||||
x="110"
|
||||
id="tspan835"
|
||||
sodipodi:role="line">1</tspan></text>
|
||||
</g>
|
||||
<g id="faresi" style="cursor: pointer" onclick="openModal(this.id)">
|
||||
<circle
|
||||
r="2.817522"
|
||||
cy="69.578873"
|
||||
cx="85.127975"
|
||||
id="path833"
|
||||
style="fill:#c96abe;fill-opacity:1;stroke-width:0.215147;paint-order:fill markers stroke" />
|
||||
<text
|
||||
y="45.578873"
|
||||
x="50.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="71"
|
||||
x="84"
|
||||
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"
|
||||
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="48"
|
||||
x="82"
|
||||
id="tspan835"
|
||||
sodipodi:role="line">3</tspan></text>
|
||||
</g>
|
||||
</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 class="modal-title h5 roboto"></div>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="modal-body of-scroll">
|
||||
<div class="container roboto-slab" id="mod-cont">
|
||||
<div class="columns">
|
||||
<div class="columns hide" id="col-prologo">
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12">
|
||||
<h3 class="lilac mb-2 text-italic text-bold">
|
||||
Prologo - Annunciazione
|
||||
@@ -43,8 +121,91 @@
|
||||
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 class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="t-prologo">
|
||||
<img src="img/thumbs/thumb_prologo.jpg" alt="Prologo" style="cursor: pointer;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-viaggiatore">
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12">
|
||||
<h3 class="lilac mb-2 text-italic text-bold">
|
||||
Il Viaggiatore #1
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Un viaggiatore, arrivato a Fara Sabina, incontra una strano personaggio
|
||||
che si offre di guidarlo in un viaggio attraverso il borgo che lo
|
||||
porterà a riscoprire il senso della meraviglia.
|
||||
Si comincia dal teatro dove gli attori, attraverso i personaggi
|
||||
che hanno creato in tanti anni di spettacoli,
|
||||
si stanno preparando a rappresentare la "Fara invisibile".
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="t-viaggiatore">
|
||||
<img src="img/thumbs/thumb_viaggiatore.jpg" alt="Il viaggiatore" style="cursor: pointer;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-faresi">
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12">
|
||||
<h3 class="lilac mb-2 text-italic text-bold">
|
||||
Sul carattere dei Faresi #2
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Trilussa, poeta romano ma ormai di casa qui a Fara Sabina, e Ariel, spirito del vento prestato
|
||||
dalla commedia shakespeariana “La Tempesta”, si affrontano in una piazzetta.
|
||||
Ariel, l'eterno spiritello sognatore è sospeso sui tetti e guarda il mondo dall'alto,
|
||||
osserva la forma della città e le abitudini dei suoi abitanti, fa magie.
|
||||
Trilussa ha i piedi ben piantati per terra ed esorta Ariel a scendere e prendere
|
||||
contatto con il mondo.
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="t-faresi">
|
||||
<img src="img/thumbs/thumb_faresi.jpg" alt="Sul carattere dei Faresi" style="cursor: pointer;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-piazza1">
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12">
|
||||
<h3 class="lilac mb-2 text-italic text-bold">
|
||||
Piazza Forcina #3
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Trilussa, accompagnato da un angelo, racconta la storia di questa piazza che si chiamava
|
||||
piazza Forcina per via delle prigioni che vi si affacciavano fino a dopo l'unità d'Italia.
|
||||
Immagina il lamento di quei poveri disgraziati a cui solo la luna teneva compagnia.
|
||||
Ma poi tutto è cambiato, botteghe artigiane, il trasporto pubblico... è arrivata la modernità!
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="t-piazza1">
|
||||
<img src="img/thumbs/thumb_piazza.jpg" alt="Piazza Forcina" style="cursor: pointer;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-piazza2">
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12">
|
||||
<h3 class="lilac mb-2 text-italic text-bold">
|
||||
Antonio #3a
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Antonio è un artigiano restauratore del legno, di Fara Sabina.
|
||||
La sua bottega si affaccia su Piazza Garibaldi dove lo troviamo
|
||||
al lavoro, allietato dal canto degli uccelli.
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="t-piazza2">
|
||||
<img src="img/thumbs/thumb_antonio.jpg" alt="Piazza Forcina" style="cursor: pointer;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns hide" id="col-piazza3">
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12">
|
||||
<h3 class="lilac mb-2 text-italic text-bold">
|
||||
Francesco #3b
|
||||
</h3>
|
||||
<p class="text-small">
|
||||
Francesco appartiene ad un'antica famiglia di Fara,
|
||||
negli anni ha raccolto nella sua casa una collezione
|
||||
di oggetti dell'800 e del primo ‘900 che ci
|
||||
raccontano una cultura ormai scomparsa.
|
||||
</p>
|
||||
</div>
|
||||
<div class="column col-lg-6 col-md-6 col-sm-12 vid-thumb" id="t-piazza3">
|
||||
<img src="img/thumbs/thumb_francesco.jpg" alt="Piazza Forcina" style="cursor: pointer;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user