Add first interactive map attempt

2021-10-18 12:31:24 +02:00
parent 8945c2fcd7
commit 23cb5b2ec5
6 changed files with 183 additions and 72 deletions
--- a/map.html
+++ b/map.html
@@ -0,0 +1,115 @@
+<!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">
+    </head>
+    <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
+                    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" 
+                />
+            </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>
+            <div class="modal-body">
+                <div class="container roboto-slab" id="mod-cont">
+                    <div class="columns">
+                        <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&hellip;
+                            </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>
+                    </div>
+                </div>
+            </div>
+            </div>
+        </div>       
+    </body>
+    <script type="text/javascript">
+        document.addEventListener('readystatechange', () => {
+            let close = document.querySelector('#mod-vid a[href="#close"]');
+            let mod = document.querySelector('#mod-vid');
+
+            close.addEventListener('click', () => {
+                mod.classList.remove('active');
+            });
+            
+        });
+
+        function openModal() {
+            let modal = document.querySelector('#mod-vid');
+            modal.classList.add('active');
+
+            let thumb = document.querySelector('.vid-thumb');
+
+            thumb.addEventListener('click', () => {
+                openVid(thumb.id);
+            });
+            //modal.style = 'opacity: 1';            
+        }
+
+        const openVid = (id) => {
+
+            let titles = {
+                'prologo' : 'Prologo - Annunciazione',
+            }
+            
+            let vimeoVids = {
+                'prologo'     : '478632535',
+                'viaggiatore' : '562518107',
+                'faresi'      : '562529310',
+                'piazza'      : '443587380',
+                'antonio'     : '606341398',
+                'francesco'   : '471773781',
+                'nobili'      : '562534835',
+                'rocco'       : '606346781',
+                'alberto'     : '606372910',
+                'disputa'     : '471537982',
+                'duomo'       : '606343917',
+                'loredana'    : '513080769',
+                'pietro'      : '455576197',
+                'castello'    : '562536148',
+                'sabini'      : '542321131',
+                'monumento'   : '606362546',
+                'eva'         : '606352547',
+                'toto'        : '606348670',
+                'fuori'       : '606358668',
+                'carro'       : '562262086',
+            };
+
+            let vimeoLink = 'https://player.vimeo.com/video/'+vimeoVids[id]+'?autoplay=1';
+
+            localStorage.setItem('vidURI', 'vid_'+id+'.mp4');
+            localStorage.setItem('vimeo', vimeoLink);
+            localStorage.setItem('vidTitle', titles[id]);
+
+            window.location.href = 'video.html';
+        }
+    </script>
+</html>