index.html: Add social icons and disable zoom

Closes #48
viper-development · Sep 20, 2019 · c24a472 · c24a472
1 parent e101b64
commit c24a472
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 1 deletion.
diff --git a/css/main.css b/css/main.css
@@ -239,3 +239,9 @@ h4 {
     background: #eee;
     border-radius: 10px;
 }
+
+.social-icons .fab {
+    font-size: 1.5em;
+    color: black;
+    padding-right: 1em;
+}
diff --git a/index.html b/index.html
@@ -8,12 +8,13 @@
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
         <link href="https://fonts.googleapis.com/css?family=Raleway:700,800,900|Heebo:300,400&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
         <link rel="stylesheet" href="css/main.css">
 
         <meta name="description" content="ClimateGraph.io aims to simplify the understanding of climate change by visualising data easily.">
         <meta name="keywords" lang="de" content="Klimawandel, Daten, Visualisierung, Fridays for Future">
         <meta name="keywords" lang="en" content="Climate Change, Data, Visualisation, Fridays for Future">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
     </head>
 
     <body>
@@ -26,6 +27,22 @@
                         <a href="#" class="brand-logo"><img width="150px" src="logo_wide.svg" height="auto"></a>
                         <h1>ClimateGraph.io</h1>
                         <p>Visualising Data about Climate Change</p>
+                        <div class="row">
+                            <div class="col s12 m12 social-icons black-text">
+                                <a target="_blank" rel="nofollow" href="https://www.facebook.com/sharer.php?u=https://climategraph.io">
+                                <i class="fab fa-facebook-f"></i>
+                                </a>
+                                <a title="Share on Twitter" rel="nofollow" target="_blank" href="https://twitter.com/intent/tweet?url=https://climategraph.io/ &text= Visualise Data about Climate Change at climategraph.io %23FridaysForFuture">
+                                <i class="fab fa-twitter"></i>
+                                </a>
+                                <a  href="https://www.reddit.com/submit?url=https://climategraph.io/&title=Visualise Data about Climate Change at climategraph.io %23FridaysForFuture" target="_blank" rel="nofollow">
+                                <i class="fab fa-reddit-alien"></i>
+                                </a>
+                                <a rel="nofollow" title="Click to share on WhatsApp" href="whatsapp://send?text=Visualise Data about Climate Change at climategraph.io %23FridaysForFuture https://climategraph.io/">
+                                <i class="fab fa-whatsapp"></i>
+                                </a>
+                            </div>
+                        </div>
                         <p>
                             Here you can see how the CO2 emissions are, which are driving climate change. In your country and in the world.
                         </p>

diff --git a/js/main.js b/js/main.js
@@ -194,3 +194,12 @@ function showPredictionText(text) {
   $('.prediction-scenario').html(text)
   $('.prediction-temperature').html(temperatures[text])
 }
+
+// Prevent zoom on mobile
+if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
+  window.document.addEventListener('touchmove', e => {
+    if(e.scale !== 1) {
+      e.preventDefault();
+    }
+  }, {passive: false});
+}