alequa 2 years ago
parent
commit
f69ec57853
4 changed files with 463 additions and 88 deletions
  1. 175 88
      public/index.html
  2. 232 0
      style/styles.css
  3. 9 0
      style/styles.css.map
  4. 47 0
      style/styles.scss

+ 175 - 88
public/index.html

@@ -1,89 +1,176 @@
+
 <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Welcome to Firebase Hosting</title>
-
-    <!-- update the version number as needed -->
-    <script defer src="/__/firebase/9.1.0/firebase-app-compat.js"></script>
-    <!-- include only the Firebase features as you need -->
-    <script defer src="/__/firebase/9.1.0/firebase-auth-compat.js"></script>
-    <script defer src="/__/firebase/9.1.0/firebase-database-compat.js"></script>
-    <script defer src="/__/firebase/9.1.0/firebase-firestore-compat.js"></script>
-    <script defer src="/__/firebase/9.1.0/firebase-functions-compat.js"></script>
-    <script defer src="/__/firebase/9.1.0/firebase-messaging-compat.js"></script>
-    <script defer src="/__/firebase/9.1.0/firebase-storage-compat.js"></script>
-    <script defer src="/__/firebase/9.1.0/firebase-analytics-compat.js"></script>
-    <script defer src="/__/firebase/9.1.0/firebase-remote-config-compat.js"></script>
-    <script defer src="/__/firebase/9.1.0/firebase-performance-compat.js"></script>
-    <!-- 
-      initialize the SDK after all desired features are loaded, set useEmulator to false
-      to avoid connecting the SDK to running emulators.
-    -->
-    <script defer src="/__/firebase/init.js?useEmulator=true"></script>
-
-    <style media="screen">
-      body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
-      #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px; }
-      #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
-      #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
-      #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
-      #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
-      #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
-      #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
-      @media (max-width: 600px) {
-        body, #message { margin-top: 0; background: white; box-shadow: none; }
-        body { border-top: 16px solid #ffa100; }
-      }
-    </style>
-  </head>
-  <body>
-    <div id="message">
-      <h2>Welcome</h2>
-      <h1>Firebase Hosting Setup Complete</h1>
-      <p>You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!</p>
-      <a target="_blank" href="https://firebase.google.com/docs/hosting/">Open Hosting Documentation</a>
-    </div>
-    <p id="load">Firebase SDK Loading&hellip;</p>
-
-    <script>
-      document.addEventListener('DOMContentLoaded', function() {
-        const loadEl = document.querySelector('#load');
-        // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
-        // // The Firebase SDK is initialized and available here!
-        //
-        // firebase.auth().onAuthStateChanged(user => { });
-        // firebase.database().ref('/path/to/ref').on('value', snapshot => { });
-        // firebase.firestore().doc('/foo/bar').get().then(() => { });
-        // firebase.functions().httpsCallable('yourFunction')().then(() => { });
-        // firebase.messaging().requestPermission().then(() => { });
-        // firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
-        // firebase.analytics(); // call to activate
-        // firebase.analytics().logEvent('tutorial_completed');
-        // firebase.performance(); // call to activate
-        //
-        // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
-
-        try {
-          let app = firebase.app();
-          let features = [
-            'auth', 
-            'database', 
-            'firestore',
-            'functions',
-            'messaging', 
-            'storage', 
-            'analytics', 
-            'remoteConfig',
-            'performance',
-          ].filter(feature => typeof app[feature] === 'function');
-          loadEl.textContent = `Firebase SDK loaded with ${features.join(', ')}`;
-        } catch (e) {
-          console.error(e);
-          loadEl.textContent = 'Error loading the Firebase SDK, check the console.';
-        }
-      });
-    </script>
-  </body>
-</html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title>Women scientists for climate justice</title>
+        <meta name="description" content="Women scientists for climate justice videos">
+        <meta name="keywords" content="science, indigenous, knowledge   ">
+        <meta name="viewport" content="minimal-ui, width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
+        <link rel="stylesheet" href="../style/styles.css">
+
+        <script src="../js/jquery-3.6.0.min.js"></script>
+        <script src="../js/jquery-ui.min.js"></script>
+        <script src="../js/application.js"></script>
+
+    </head>
+    <body>
+          <!-- <button class="openbtn" onclick="openNav()">☰ Toggle Sidepanel</button>   -->
+        <img  class="openbtn" onclick="openNav()" id="logotsz" src="../pictures/logotsz.png" alt="Logo The Science Zone">
+
+          <!-- Add font awesome icons
+          <a href="#" class="fa fa-linkedin"></a>
+          <a href="#" class="fa fa-pinterest"></a>
+          <a href="#" class="fa fa-reddit"></a> -->
+
+          <div id="mySidepanel" class="sidepanel">
+            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
+            <a href="https://thesciencezoneblog.wordpress.com/">The Science Zone blog</a>
+            <a href="#">Facebook</a>
+            <a href="#">Instagram</a>
+            <a href="#">Email</a>
+          </div>
+          
+        <div class="languageSwitch">
+                    <button id="enButton" >EN</button><button id="itButton" >IT</button>
+        </div>
+        <!-- <div class="container"> -->
+
+        <span id="en" class="en language">
+            <div class="text">
+                <h1 class="title"> Women scientists for environmental justice</h1>
+                <h3>Indigenous knowledge and science for a truly sustainable future.</h3>
+                <img id="worldmap" src="../pictures/worldmap.png" alt="World map">
+                Over the last century, humanity has seen an explosion of scientific progress and commodities production.                 Correspondigly, part of the world population experienced an improvement of life conditions. This transformation happened, and still does, at the expense of people and territories located far from the urban metropoles, where most of the resources are consumed. 
+                <br>
+                In these remote places, countless living organisms have adapted in equilibrium with their ecosystems. So did human indigenous populations, these ancestral communities thrived for centuries, living in harmony with Nature, depending on it in a respectfull and sustainaible relationshion. The abrupt changes that Earth faces today threaten ecosystems survival as well as indigenous populations life and legacy.
+                <br>
+                <br>
+                The contemporary and exponentially increasing technological power, that originates from and is boosted by scientific knowledge and progress, allows to extract resources at extremely fast and unsustainable rates. The price to pay for such a seemingly unlimited growth is poverty and inequity for large part of the global population, together with environmental degradation, pollution and anthropogenic climate change.
+                Indigenous populations and rural communities living in close contact with Nature pay the highest price for contemporary development. They are the most vulnerable and exposed to the effects of climate change, resource predation, and unsustainable growth.  
+                These people are forced to change their lifestyles, to resettle, relocate and even migrate or die because of their homes and living source being compromised and disrupted by the greed of post-industrial economical powers.
+                
+                <br>
+                In this scenario, science can become a transformative force if used in cooperation and respect of traditional knowledge. Decolonizing science is a crucial step in the long way to environmental and social justice.
+                <br>
+                <br>
+                In this interviews series, we speak with women scientists and activists that work every day in close contact with indigenous populations to let science and law be an instrument to achieve environmental, gender and social justice. Women that live in first person the risks and the damages caused by resource predation and anthropogenic climate change. Women that fight every day from the local to the global scale for human and environmental rights to limit and stop the extractive machine.
+                <br>
+                <br>
+
+                <div class="container">
+                    <div class=videos>
+                        <iframe width="150" height="80" src="https://www.youtube.com/embed/OjapsV-Tcgc" title="YouTube video player" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+                    </div>
+                    <div class="description">
+                     <b> Introduction</b> <br> </a>
+                     Science and activism for environmental and gender justice.<br>
+                    </div>
+                    <br>
+                </div>
+                    <br>
+
+                <div class="container">
+                    <div class=videos>
+                        <iframe width="150" height="80" src="https://www.youtube.com/embed/OjapsV-Tcgc" title="YouTube video player" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+                    </div>
+                    <div class="description">
+                        <b>Forests and supermarkets</b><br>                                                                                                                                                                                                  
+                        Why is the lifestyle of indigenous populations truly sustainable?<br>                                                                                                                                                               
+                    </div>
+                    <br>
+                </div>
+                    <br>
+
+                <div class="container">
+                    <div class=videos>
+                        <iframe width="150" height="80" src="https://www.youtube.com/embed/OjapsV-Tcgc" title="YouTube video player" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+                    </div>
+                    <div class="description">
+                        <b>Rich lands but poor people</b><br>                                                                                                                                                                                                
+                        How do extractivism and climate change threaten life of indigenous population and rural communities.<br>                                                                                                                            
+                    </div>
+                    <br>
+                </div>
+                    <br>
+
+                <div class="container">
+                    <div class=videos>
+                        <iframe width="150" height="80" src="https://www.youtube.com/embed/OjapsV-Tcgc" title="YouTube video player" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+                    </div>
+                    <div class="description">
+                        <b>Another science is possible</b><br>                                                                                                                                                                                               
+                        Taking action on a changing Earth.                                                                                                                                                                                                  
+                        <br>                                                                                                                                                                                                                                 
+                    </div>
+                    <br>
+                </div>
+                    <br>
+
+                <div class="container">
+                    <div class=videos>
+                        <iframe width="150" height="80" src="https://www.youtube.com/embed/OjapsV-Tcgc" title="YouTube video player" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+                    </div>
+                    <div class="description">
+                        <b>Conclusions.</b><br>                                                                                                                                                                                                              
+                        Pathways for sustainable futures.<br>                                                                                                                                                                                               
+                    </div>
+                    <br>
+                </div>
+                    <br>
+            All interviews have been carried out by The Scienze Zone, within the european project Boosting Green Education at School (KA2 strategic partnership). Editing and video production by Laboratorio Fujakkà.
+
+            </div>
+            <div class="title">Women Scientist for climate justice</div>
+        </span>
+        <span id="it" class="language">
+            <div class="text">
+                <h1 class="title"> Scienziate per la giustizia ambientale</h1>
+                <h3> Saperi indigeni tradizionali e conoscenza scientifica per un futuro sostenibile.</h3>
+                <img id="worldmap" src="../pictures/worldmap.png" alt="World map">
+                                
+                Nell'ultimo secolo vi è stata un'esplosione del progresso scientifico e della produzione di merci e, per parte della popolazione mondiale, questo ha significato un generale miglioramento delle condizioni di vita. 
+                Queste trasformazioni sono avvenute, ed avvengono tuttora, a spese di territori ed ecosistemi lontani dalle città e dalle popolazioni che ne beneficiano. Le foreste, i fiumi, le montagne, le praterie e gli oceani che forniscono le materie prime necessarie al benessere delle nazioni sviluppate sono le stesse che ospitano la più grande varietà di specie animali e vegetali sul pianeta. Ecosistemi che hanno raggiunto un florido equilibrio vitale e per secoli hanno offerto riparo e nutrimento a migliaia di popolazioni indigene in tutto il mondo. Ecosistemi che sono sul punto di scomparire, assieme agli esseri viventi che li abitano.
+
+                    <br>                                                                                                                                                                                                                                 
+                    <br>                                                                                                                                                                                                                                 
+
+                La potenza tecnologica moderna ha permesso di estrarre risorse da questi luoghi a ritmi insostenibili per la natura, lasciando dietro di sé un'infertile povertà e aggravando gli effetti dei cambiamenti climatici in atto su scala globale.
+                D'altra parte, la stessa conoscenza scientifica, se svestita dei suoi soliti abiti coloniali ed usata in cooperazione con le conoscenze delle popolazioni locali, può aiutare a ristabilire la giustizia sociale e ambientale. 
+                    <br>                                                                                                                                                                                                                                 
+                    <br>                                                                                                                                                                                                                                 
+
+                In questa serie di interviste abbiamo parlato con scienziate e attiviste che collaborano quotidianemente con alcune comunità indigene per porre la scienza e la legge al servizio degli ecosistemi e degli esseri viventi che li abitano.
+                Donne che vivono in prima persona i disastri ambientali causati dalla predazione delle risorse e si battono a livello locale e globale per arginare la voracità della macchina capitalista.
+                    <br>                                                                                                                                                                                                                                 
+                    <br>                                                                                                                                                                                                                                 
+
+
+                Abbiamo diviso questo mini documentario in 5 capitoli:
+                1. Introduzione. Scienza e attivismo per la giustizia ambientale.
+                2. La foresta è il nostro supermercato. Perché lo stile di vita indigeno è sostenibile?
+                3. Schiavi delle nostre risorse: Come la predazione delle risorse e i cambiamenti climatici mettono a rischio la vita delle comunità indigene.
+                4. Un'altra scienza è possible: Cambiare la legge e la cultura scientifica per un futuro sostenibile.
+                5. Conclusioni: Obiettivi per un futuro sostenibile.
+                <br>
+                <br>
+
+                Le interviste sono state realizzate da The Science Zone nella cornice del progetto Boosting Green Education at School (KA2 strategic partnership), montaggio a cura del Laboratorio Fujakkà.
+ 
+            </div>
+            <div class="title">Women Scientist for climate justice</div>
+        </span>
+
+        <div id="closing">
+        <!-- <div> <b> Laboratorio <br>Fujakkà </b> </div> -->
+        <a href="https://thesciencezoneblog.wordpress.com/" title="The Science Zone blog" ><img id="riferimenti" src="../pictures/intestata.png" alt="Riferimenti tsz"> </a>
+        <a href="https://www.facebook.com/fujakkacinema"> <img   id="fujakka" src="../pictures/fujakka.png" title="Laboratorio Fujakkà" alt="Laboratorio Fujakkà"> </a>
+        <img id="boosting" src="../pictures/Boosting.jpg" alt="Boosting Green Science"> 
+        <img id="erasmus" src="../pictures/erasmus.png" alt="Erasmus+"> 
+        </div>
+        <!-- </div> -->
+
+
+    </body>
+</html>

+ 232 - 0
style/styles.css

@@ -0,0 +1,232 @@
+* {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+  font-smooth: never;
+  -moz-font-smooth: never;
+  box-sizing: border-box;
+}
+
+@font-face {
+  font-family: 'Helvetica';
+  src: url("fonts/HelveticaLTStd-Roman.otf") format("opentype");
+}
+
+html {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  background: darkgreen;
+  /* overflow: hidden; */
+}
+
+.title{
+  font-size: 40px;
+  text-align: center;
+  color:darkgreen;
+  padding-bottom: 24px;
+}
+
+.text{
+  position: relative;
+  width: 70%;
+  height: 100%;
+  top: 30%;
+  left:50%;
+  transform: translate(-50%,0%);
+  margin-top:9%;
+
+  background: white;
+
+  font-size: 24px;
+  text-align: justify;
+  padding: 8%;
+  line-height: 1.25cm;
+  border-radius: 8px;
+  padding-top: 5%;
+}
+
+.language{
+  display: block;
+}
+
+
+.button{
+    color:white;
+    position: center;
+}
+/*# sourceMappingURL=styles.css.map */
+
+
+.languageSwitch{
+  position: fixed;
+  right:5%;
+  top:5%;
+  /* font-size: 40px; */
+  text-align: right;
+}
+
+#logotsz{
+  position: fixed;
+  left:3%;
+  top:2%;
+  width:9%
+}
+
+button {
+  /* font-family: Arial,Helvetica,sans-serif; */
+  width: inherit;
+  font-size: 2.1vw;
+  background: white;
+  color: darkgreen;
+  border-radius: 8px;
+  cursor: pointer;
+ }
+
+ #worldmap{
+  float:right;
+  width:50%;
+  padding: 2%;
+  /* height:; */
+ }
+
+ .video{
+  /* float:right; */
+  width:50%;
+  padding: 5%;
+  /* height:; */
+ }
+
+ #closing{
+   background: white;
+   position: relative;
+  /* font-size: 24px; */
+   bottom: 5%;
+   height: 25%;
+   padding-left: 2%;
+ }
+
+ #erasmus{
+   background: inherit;
+   float: right;
+   width: 30%;
+   margin-right: 2%;
+   margin-top:1%;
+ }
+
+ #riferimenti{
+   background: inherit;
+   /* float: right; */
+   width: 38%;
+ }
+
+ #fujakka{
+   background: inherit;
+   /* float: left; */
+   width: 10.5%;
+ }
+/* Style all font awesome icons */
+.fa {
+  /* padding: 10px; */
+  /* width: 9%;
+  height: 9%; */
+  /* width: 50px; */
+  /* padding: 20px;
+  font-size: 30px;
+  width: 30px;
+  text-align: center;
+  text-decoration: none; */ 
+  /* padding: 20px; */
+  border-radius: 8%;
+  /* font-size: 240px; */
+  width: 2vw;
+  height: 2vw;
+  text-decoration: none;
+  text-align: center;
+  margin: 5px 80px;
+  right:1%;
+  border: 1vw;
+}
+
+/* Add a hover effect if you want */
+.fa:hover {
+  opacity: 0.7;
+}
+
+/* Set a specific color for each brand */
+
+/* Facebook */
+.fa-facebook {
+  background: #3B5998;
+  color: white;
+  position: fixed;
+}
+
+/* Twitter */
+.fa-instagram {
+  position: fixed;
+  font-size: 35%;
+  background: #c04eb1;
+  color: black;
+} 
+.sidepanel  {
+  width: 0;
+  position: fixed;
+  z-index: 1;
+  height: 37vh;
+  top: 0;
+  left: 0;
+  background-color: #111;
+  overflow-x: hidden;
+  transition: 0.5s;
+  padding-top: 60px;
+}
+
+.sidepanel a {
+  padding: 8px 8px 8px 32px;
+  text-decoration: none;
+  font-size: 25px;
+  color: #818181;
+  display: block;
+  transition: 0.3s;
+}
+
+.sidepanel a:hover {
+  color: #f1f1f1;
+}
+
+.sidepanel .closebtn {
+  position: absolute;
+  top: 0;
+  right: 25px;
+  font-size: 36px;
+}
+
+.openbtn {
+  cursor: pointer;
+}
+
+ #boosting{
+   background: inherit;
+   width: 13%;
+   margin-left: 3%;
+ }
+
+ .container {
+  display: flex;
+}
+
+.description{
+  margin-left: 4%;
+}
+
+.videos{
+  margin-top: 1%;
+}

+ 9 - 0
style/styles.css.map

@@ -0,0 +1,9 @@
+{
+    "version": 3,
+    "mappings": "AAAA,AAAA,CAAC,CAAC;EACE,kBAAkB,EAAE,UAAU;EAC9B,eAAe,EAAE,UAAU;EAC3B,UAAU,EAAE,UAAU;EACtB,uBAAuB,EAAE,SAAS;EAClC,cAAc,EAAE,kBAAkB;EAClC,sBAAsB,EAAE,WAAW;EACnC,mBAAmB,EAAE,WAAW;EAChC,cAAc,EAAE,WAAW;EAC3B,WAAW,EAAE,KAAK;EAClB,gBAAgB,EAAE,KAAK;EACvB,UAAU,EAAE,UAAU;CACzB;;AAED,UAAU;EACN,WAAW,EAAE,WAAW;EACxB,GAAG,EAAK,qCAAqC,CAAC,kBAAkB;;;AAIpE,AAAA,IAAI,CAAA;EACA,MAAM,EAAE,IAAI;CACf;;AAED,AAAA,IAAI,CAAA;EACA,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,UAAU,EAAE,KAAK;EACjB,QAAQ,EAAE,MAAM;CACnB",
+    "sources": [
+        "styles.scss"
+    ],
+    "names": [],
+    "file": "styles.css"
+}

+ 47 - 0
style/styles.scss

@@ -0,0 +1,47 @@
+* {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-font-smoothing: antialiased;
+    font-smoothing: antialiased;
+    font-smooth: never;
+    -moz-font-smooth: never;
+    box-sizing: border-box;
+}
+
+@font-face {
+    font-family: 'URWBookman';
+    src:    url('fonts/URWBookman-Light.otf') format('opentype');
+}
+
+
+
+html{
+    height: 100%;
+}
+
+body{
+    margin: 0;
+    padding: 0;
+    background: black;
+    overflow: hidden;
+}
+
+.button{
+    color:white;
+}
+
+@media screen and (min-width: 1000px) {
+
+    
+}
+
+
+
+@media screen and (max-width: 999px) {
+ 
+
+}