293 lines
16 KiB
HTML
293 lines
16 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="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="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="26"
|
||
x="30.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="121.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="120"
|
||
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="95.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="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="48.578873"
|
||
cx="93.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="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">
|
||
<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 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>
|
||
</body>
|
||
</html> |