216 lines
12 KiB
HTML
216 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="it">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width">
|
||
<link rel="stylesheet" href="css/main.css">
|
||
<link rel="stylesheet" href="css/spectre-icons.css">
|
||
<script type="text/javascript" src="js/ui-map.js"></script>
|
||
</head>
|
||
<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"
|
||
/>-->
|
||
<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"></div>
|
||
</div>
|
||
<div class="modal-body of-scroll">
|
||
<div class="container roboto-slab" id="mod-cont">
|
||
<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
|
||
</h3>
|
||
<p class="text-small">
|
||
Un angelo compare a un eremita all'inizio dei tempi, sul Monte Acuziano.
|
||
Gli annuncia che sulla collina antistante sorgerà una città
|
||
che si chiamerà Fara, dove si vivrà in pace e in armonia con la natura,
|
||
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="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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html> |