Finished interactive POIs
This commit is contained in:
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>
|
||||
|
||||
Reference in New Issue
Block a user