Update offline version for local video use; remove news

This commit is contained in:
Nicolò P 2021-11-18 17:55:37 +01:00
parent 5a6167e26c
commit 939a3bd169
8 changed files with 49 additions and 227 deletions

View File

@ -21,14 +21,14 @@
<div class="hide-sm column col-lg-5 col-sm-12 col-md-10 nav-menu" id="links"> <div class="hide-sm column col-lg-5 col-sm-12 col-md-10 nav-menu" id="links">
<a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a> <a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a> <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
<a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
<a href="credits.html" title="Credits del progetto">Credits</a> <a href="credits.html" title="Credits del progetto">Credits</a>
</div> </div>
<nav class="d-hide side-nav bg-white opensans"> <nav class="d-hide side-nav bg-white opensans">
<p id="close-nav"><i class="icon-close"></i></p> <p id="close-nav"><i class="icon-close"></i></p>
<a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a> <a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a> <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
<a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
<a href="credits.html" title="Credits del progetto">Credits</a> <a href="credits.html" title="Credits del progetto">Credits</a>
</nav> </nav>
</div> </div>

View File

@ -21,14 +21,14 @@
<div class="hide-sm column col-lg-5 col-sm-10 col-md-10 nav-light nav-menu" id="links"> <div class="hide-sm column col-lg-5 col-sm-10 col-md-10 nav-light nav-menu" id="links">
<a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a> <a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a> <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
<a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
<a href="credits.html" title="Credits del progetto">Credits</a> <a href="credits.html" title="Credits del progetto">Credits</a>
</div> </div>
<nav class="d-hide side-nav bg-white opensans"> <nav class="d-hide side-nav bg-white opensans">
<p id="close-nav"><i class="icon-close"></i></p> <p id="close-nav"><i class="icon-close"></i></p>
<a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a> <a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a> <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
<a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
<a href="credits.html" title="Credits del progetto">Credits</a> <a href="credits.html" title="Credits del progetto">Credits</a>
</nav> </nav>
</div> </div>

View File

@ -21,14 +21,14 @@
<div class="hide-sm column col-lg-5 col-sm-10 col-md-10 nav-menu" id="links"> <div class="hide-sm column col-lg-5 col-sm-10 col-md-10 nav-menu" id="links">
<a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a> <a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a> <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
<a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
<a href="credits.html" title="Credits del progetto">Credits</a> <a href="credits.html" title="Credits del progetto">Credits</a>
</div> </div>
<nav class="d-hide side-nav bg-white opensans"> <nav class="d-hide side-nav bg-white opensans">
<p id="close-nav"><i class="icon-close"></i></p> <p id="close-nav"><i class="icon-close"></i></p>
<a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a> <a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a> <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
<a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
<a href="credits.html" title="Credits del progetto">Credits</a> <a href="credits.html" title="Credits del progetto">Credits</a>
</nav> </nav>
</div> </div>

View File

@ -123,7 +123,7 @@ export function menuKeys()
let menuK = { let menuK = {
'1' : 'itinerario.html', '1' : 'itinerario.html',
'2' : 'progetto.html', '2' : 'progetto.html',
'3' : 'news.html',
'4': 'credits.html', '4': 'credits.html',
}; };
@ -176,63 +176,33 @@ export function mobileNav()
* Get video source for given * Get video source for given
* link and open video page * link and open video page
*/ */
export function openVideo(a) export function openVideo(a)
{ {
let aNodes = a.childNodes; let aNodes = a.childNodes;
// Hacky?? // Hacky??
let title = a.parentElement let title = a.parentElement
.nextElementSibling .nextElementSibling
.firstElementChild .firstElementChild
.innerHTML .innerHTML
.trim(); .trim();
let vStr = ''; let vStr = '';
let vimeoVids = {
'thumb_prologo' : '478632535', aNodes.forEach(n => {
'thumb_viaggiatore' : '562518107', if (n.src) {
'thumb_faresi' : '562529310', vStr = n.src;
'thumb_piazza' : '443587380', vStr = vStr.substr(vStr.lastIndexOf('/')+1, vStr.length)
'thumb_antonio' : '606341398', .replace(/thumb_(.*)\.\w+$/, 'vid_$1.mp4');
'thumb_francesco' : '471773781', }
'thumb_nobili' : '562534835', });
'thumb_rocco' : '606346781',
'thumb_alberto' : '606372910', localStorage.setItem('vidURI', vStr);
'thumb_disputa' : '471537982', localStorage.setItem('vidTitle', title);
'thumb_duomo' : '606343917', /**
'thumb_loredana' : '513080769', * Go to video page
'thumb_pietro' : '455576197', */
'thumb_castello' : '562536148', window.location.href = 'video.html';
'thumb_sabini' : '542321131', }
'thumb_monumento' : '606362546',
'thumb_eva' : '606352547',
'thumb_toto' : '606348670',
'thumb_fuori' : '606358668',
'thumb_carro' : '562262086',
};
let vimeoLink = 'https://player.vimeo.com/video/';
aNodes.forEach(n => {
if (n.src) {
vStr = n.src;
vStr = vStr.substr(vStr.lastIndexOf('/')+1, vStr.length)
.replace(/thumb_(.*)\.\w+$/, 'vid_$1.mp4');
vimeoLink += vimeoVids[n.src.substr(n.src.lastIndexOf('/')+1, n.src.length)
.replace(/\.(png|jpg)/, '')];
vimeoLink += '?autoplay=1';
}
});
localStorage.setItem('vidURI', vStr);
localStorage.setItem('vimeo', vimeoLink);
localStorage.setItem('vidTitle', title);
/**
* Go to video page
*/
window.location.href = 'video.html';
}
/** /**
* Activate background on scroll for nav only * Activate background on scroll for nav only
* if not small screen * if not small screen

View File

@ -23,7 +23,6 @@ if (!window.location.href.includes('video')) {
} }
/** /**
* For itinerario.html... * For itinerario.html...
* @todo What about the interactive map?!?
*/ */
if (window.location.href.includes('itinerario')) { if (window.location.href.includes('itinerario')) {
let vidLinks = document.querySelectorAll('.open-vid'); let vidLinks = document.querySelectorAll('.open-vid');
@ -42,9 +41,9 @@ if (window.location.href.includes('itinerario')) {
/** /**
* For videos... * For videos...
*/ */
if (window.location.href.includes('video')) { if (window.location.href.includes('video')) {
document.addEventListener('readystatechange', () => { document.addEventListener('readystatechange', () => {
let vimeoLink = localStorage.getItem('vimeo'); let vStr = localStorage.getItem('vidURI');
let vidTitle = localStorage.getItem('vidTitle'); let vidTitle = localStorage.getItem('vidTitle');
document.querySelector('h1').innerHTML = vidTitle; document.querySelector('h1').innerHTML = vidTitle;
@ -57,12 +56,12 @@ if (window.location.href.includes('video')) {
window.history.go(-1); window.history.go(-1);
}); });
let iframe = document.querySelector('iframe'); let source = document.querySelector('source');
//let video = source.parentNode; let video = source.parentNode;
iframe.src = vimeoLink; source.src = `assets/video/${vStr}`;
//video.load(); video.load();
}); });
} }
/** /**

112
news.html
View File

@ -1,112 +0,0 @@
<!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 src="js/ui.js" type="module"></script>
<title>News & Eventi | Nel cielo di Fara</title>
</head>
<body>
<header class="main-header news">
<div class="container">
<div class="columns text-gray" id="nav">
<div class="column col-lg-7 col-sm-10 col-md-2">
<a href="/"><img class="of-hidden" src="img/loghi/InnovaPatrimonio_logo_transparent_bg_150x98.png" alt="Logo InnovaPatrimonio" id="logo"></a>
</div>
<div class="column col-sm-2 show-sm text-right">
<i class="icon icon-menu icon-2x"></i>
</div>
<div class="hide-sm column col-lg-5 col-sm-10 col-md-10 nav-light nav-menu" id="links">
<a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
<a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
<a href="credits.html" title="Credits del progetto">Credits</a>
</div>
<nav class="d-hide side-nav bg-white opensans">
<p id="close-nav"><i class="icon-close"></i></p>
<a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
<a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
<a href="credits.html" title="Credits del progetto">Credits</a>
</nav>
</div>
</div>
<div id="title" class="text-center">
<h1 class="arvo">News & Eventi</h1>
</div>
</header>
<main>
<section class="news-sec">
<div class="container">
<div class="columns">
<div class="col-lg-4 col-md-12 col-sm-12 column ml-2">
<p><img src="img/news_6.png"></p>
<h2 class="text-center">Prima proiezione pubblica nel borgo, Fara Sabina, 3 settembre 2021</h2>
<p class="text-center">
La sera del 3 settembre abbiamo proiettato il docufilm "Nel Cielo di Fara, pietre e ali d'angelo"
in piazza Duomo, alla presenza di tutta la popolazione del borgo e del Sindaco.
&Egrave; stato un bellissimo momento. Grazie al teatro Potlach.</strong>
</p>
</div>
<div class="col-lg-4 col-md-12 col-sm-12 column ml-2">
<p><img src="img/news_5.jpg"></p>
<h2 class="text-center">Simulazione interattiva 360° del projection mapping</h2>
<p class="text-center">
&Egrave; stata realizzata
<a href="https://www.youtube.com/watch?v=E2PKV9fJYw4" title="Guarda il video su YouTube">
una simulazione 360° interattiva del Video Projection Mapping
</a>
"I Sabini Ieri e Oggi". Grazie ad Enzo d'Annibale.
</p>
</div>
<div class="col-lg-4 col-md-12 col-sm-12 column">
<p><img src="img/news_4.jpg"></p>
<h2 class="text-center">Fara Film Festival, Fara Sabina, 25 luglio 2021</h2>
<p class="text-center">
Al Fara Film Festival 2021, il 25 luglio alle ore 21:00, è stato fatto il lancio del film "Nel Cielo di Fara, pietre e ali d'angelo"
ed è stato mostrato un breve estratto.<br>
(<a href="https://vimeo.com/578170143" title="Guarda il video su Vimeo">Video su Vimeo</a>).
</p>
</div>
</div>
<div class="columns">
<div class="col-lg-4 col-md-12 col-sm-12 column ml-2">
<p><img src="img/news_2.jpg"></p>
<h2 class="text-center">Conferenza 15th International Technology, Education and Development Conference INTED2021, Valencia 7-8 marzo 2021</h2>
<p class="text-center">
Contributo di Eva Pietroni (CNR ISPC),
<strong>A new narrative approach to valorize historical villages,
between dramaturgy and mixed reality. The “Innova Patrimonio” project.</strong>
<br>
Published by IATED Academy, pp: 8386-8395. ISBN: 978-84-09-27666-0
</p>
</div>
<div class="col-lg-4 col-md-12 col-sm-12 column ml-2">
<p><img src="img/news_3.jpg"></p>
<h2 class="text-center">Volume “Il digital storytelling come strumento di marketing culturale e turistico” a cura di Elisa Bonacini, Dario Flaccovio Editore, 2021</h2>
<p class="text-center">
Contributo di Eva Pietroni (CNR ISPC),
<strong>Una nuova forma narrativa per i borghi storici, tra drammaturgia e mixed reality. Il progetto “Innova Patrimonio”</strong>
</p>
</div>
<div class="col-lg-4 col-md-12 col-sm-12 column">
<p><img src="img/news_1.jpg"></p>
<h2 class="text-center">Virtual Reality Experience Festival, Roma, 16 ottobre 2020</h2>
<p class="text-center">
Partecipazione alliniziativa con una presentazione del progetto e del trailer.
A cura di <strong>Eva Pietroni</strong> (CNR ISPC) e <strong>Pino di Buduo</strong> (Teatro Potlach)
</p>
</div>
</div>
</div>
</section>
</main>
<footer class="roboto">
<p id="copy">&copy; Avviso pubblico Beni Culturali e Turismo POR FESR Lazio 2014-2020</p>
<p><img src="img/loghi_ispc_potlach.png" class="logos" alt="Loghi ISPC Potlach"></p>
<p><img src="img/FESR_BARRA_BENEFICIARI_DEF.jpg" class="logos" alt="Loghi enti beneficiari"></p>
</footer>
</body>
</html>

View File

@ -21,14 +21,14 @@
<div class="hide-sm column col-lg-5 col-sm-10 col-md-10 nav-light nav-menu" id="links"> <div class="hide-sm column col-lg-5 col-sm-10 col-md-10 nav-light nav-menu" id="links">
<a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a> <a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a> <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
<a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
<a href="credits.html" title="Credits del progetto">Credits</a> <a href="credits.html" title="Credits del progetto">Credits</a>
</div> </div>
<nav class="d-hide side-nav bg-white opensans"> <nav class="d-hide side-nav bg-white opensans">
<p id="close-nav"><i class="icon-close"></i></p> <p id="close-nav"><i class="icon-close"></i></p>
<a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a> <a href="itinerario.html" title="Vai all'itinerario">L'itinerario</a>
<a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a> <a href="progetto.html" title="Vai alla descrizione del progetto">Il progetto</a>
<a href="news.html" title="Leggi news ed eventi">News & Eventi</a>
<a href="credits.html" title="Credits del progetto">Credits</a> <a href="credits.html" title="Credits del progetto">Credits</a>
</nav> </nav>
</div> </div>
@ -43,7 +43,7 @@
<div class="columns"> <div class="columns">
<div class="column col-lg-7 col-sm-12 col-md-12 of-hidden"> <div class="column col-lg-7 col-sm-12 col-md-12 of-hidden">
<!-- What about this for offline?? --> <!-- What about this for offline?? -->
<iframe src="https://player.vimeo.com/video/464788316" <iframe src="assets/video/vid_trailer.mp4"
width="640" height="360" frameborder="0" allowfullscreen></iframe> width="640" height="360" frameborder="0" allowfullscreen></iframe>
</div> </div>
<div class="column col-lg-5 col-sm-12 col-md-12 pl-lg"> <div class="column col-lg-5 col-sm-12 col-md-12 pl-lg">
@ -86,43 +86,12 @@
</ul> </ul>
</div> </div>
<div class="column col-lg-7 col-sm-12 col-md-12 of-hidden"> <div class="column col-lg-7 col-sm-12 col-md-12 of-hidden">
<iframe src="https://player.vimeo.com/video/578170143" <iframe src="assets/video/vid_estratti.mp4"
width="640" height="360" frameborder="0" allowfullscreen></iframe> width="640" height="360" frameborder="0" allowfullscreen></iframe>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<<<<<<< HEAD
=======
<!-- Solo versione online -->
<section class="odd-stripe">
<div class="container">
<div class="columns mb-2">
<div class="col-12 mb-2">
<h2>Output tecnologici (a cura di Orpheo)</h2>
</div>
<div class="column col-lg-3 col-sm-12 col-md-12 of-hidden mt-2 mb-2 pr-lg">
<p class="text-left text-uppercase mb-0 mt-2 robot-slab-b">Sito web</p>
<a href="https://www.innovapatrimonio.com/" title="Vai al sito di InnovaPatrimonio">
<img class="mt-2" src="img/innova.png" alt="Sito di InnovaPatrimonio">
</a>
</div>
<div class="column col-lg-3 col-sm-12 col-md-12 of-hidden mt-2 mb-2 pr-lg">
<p class="text-left text-uppercase mb-0 mt-2 robot-slab-b">Piattaforma web</p>
<a href="https://cms.innovapatrimonio.com/" title="Vai alla piattaforma web">
<img class="mt-2" src="img/sito_ip.PNG" alt="Piattaforma InnovaPatrimonio">
</a>
</div>
<div class="column col-lg-3 col-sm-12 col-md-12 mt-2 mb-2 pr-lg">
<p class="text-left text-uppercase mb-0 mt-2 robot-slab-b">Web app</p>
<a href="https://pwa.innovapatrimonio.com/" title="Vai alla web app di InnovaPatrimonio">
<img class="mt-2" src="img/webapp.PNG" alt="Web App InnovaPatrimonio">
</a>
</div>
</div>
</section>
<!-- Fine (versione online) -->
>>>>>>> 975bfd2756d7370dfe5e3f98c410d3363bd4d890
<section class="prj-logos"> <section class="prj-logos">
<div class="container"> <div class="container">
<div class="columns mb-2"> <div class="columns mb-2">

View File

@ -20,16 +20,12 @@
</div> </div>
</div> </div>
<div class="container"> <div class="container">
<<<<<<< HEAD <div>
<video class="video-responsive" disablePictureInPicture oncontextmenu="return false;" controls autoplay controlsList="nodownload"> <video class="video-responsive" disablePictureInPicture oncontextmenu="return false;" controls autoplay controlsList="nodownload">
<source src="" type="video/mp4"> <source src="" type="video/mp4">
Il browser non supporta i video integrati Il browser non supporta i video integrati
</video> </video>
=======
<div class="video-responsive">
<iframe src="" frameborder="0" allowfullscreen allow="autoplay"></iframe>
</div> </div>
>>>>>>> 975bfd2756d7370dfe5e3f98c410d3363bd4d890
</div> </div>
</div> </div>
</main> </main>