Merge branch 'feature/frontend' into master

vinitshahdeo · Mar 18, 2020 · 98e90db · 98e90db
2 parents 7cf4ea6 + 9db1885
commit 98e90db
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # [Water Monitoring System](https://vinitshahdeo.github.io/Water-Monitoring-System/) - IoT Project
 
-[![GitHub license](https://img.shields.io/github/license/vinitshahdeo/Water-Monitoring-System.svg?logo=github)](https://github.com/vinitshahdeo/Water-Monitoring-System/blob/master/LICENSE) [![GitHub stars](https://img.shields.io/github/stars/vinitshahdeo/Water-Monitoring-System.svg?logo=github)](https://github.com/vinitshahdeo/Water-Monitoring-System/stargazers) [![GitHub forks](https://img.shields.io/github/forks/vinitshahdeo/Water-Monitoring-System.svg?logo=github&color=teal)](https://github.com/vinitshahdeo/Water-Monitoring-System/network) [![GitHub top language](https://img.shields.io/github/languages/top/vinitshahdeo/Water-Monitoring-System?color=yellow&logo=javascript)](https://github.com/vinitshahdeo/Water-Monitoring-System) 
+[![first-timers-only](https://img.shields.io/badge/first--timers--only-friendly-tomato.svg?style=flat&logo=git)](https://github.com/vinitshahdeo/Water-Monitoring-System/issues) [![GitHub license](https://img.shields.io/github/license/vinitshahdeo/Water-Monitoring-System.svg?logo=github)](https://github.com/vinitshahdeo/Water-Monitoring-System/blob/master/LICENSE) [![GitHub stars](https://img.shields.io/github/stars/vinitshahdeo/Water-Monitoring-System.svg?logo=github)](https://github.com/vinitshahdeo/Water-Monitoring-System/stargazers) [![GitHub forks](https://img.shields.io/github/forks/vinitshahdeo/Water-Monitoring-System.svg?logo=github&color=teal)](https://github.com/vinitshahdeo/Water-Monitoring-System/network) [![GitHub top language](https://img.shields.io/github/languages/top/vinitshahdeo/Water-Monitoring-System?color=yellow&logo=javascript)](https://github.com/vinitshahdeo/Water-Monitoring-System) 
 
 > **You can view the demo [here](https://vinitshahdeo.github.io/Water-Monitoring-System/src/home.html).**
 

diff --git a/src/home.html b/src/home.html
@@ -6,8 +6,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="author" content="Vinit Shahdeo">
   <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
-<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> 
-<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
+  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
 
@@ -34,7 +34,6 @@
   <meta name="twitter:creator" content="@Vinit_Shahdeo" />
   <meta name="twitter:image" content="https://raw.githubusercontent.com/vinitshahdeo/Water-Monitoring-System/master/assets/animatedtank.gif" /> 
 
-
   <title>Water Level Monitoring System - IoT Project</title>
   <style>
     body {
@@ -209,7 +208,93 @@ <h1>Safe Zone</h1>
       <p>
         <center><strong>Made by Vinit Shahdeo</strong></center>
       </p>
-  </div>
+
+    </div>
+  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+  <script type="text/javascript" src="lib/createWaterBall-jquery.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
+  <script>
+      //var x=30;
+      //alert("vini");
+      //var qs = window.GetQueryString(query);
+
+
+      //var x = window.getParameterByName('foo');
+
+      /* function getParameterByName(name) {
+     
+        var match = RegExp('[?]' + foo + '=')
+                        .exec(window.location.search);
+     
+        return match ?
+            decodeURIComponent(match[1].replace(/+/g, ' '))
+            : null;
+     
+    }*/
+      function getQueryStringValue(key) {
+        return decodeURIComponent(
+          window.location.search.replace(
+            new RegExp(
+              "^(?:.*[&\\?]" +
+                encodeURIComponent(key).replace(/[\.\+\*]/g, "\\$&") +
+                "(?:\\=([^&]*))?)?.*$",
+              "i"
+            ),
+            "$1"
+          )
+        );
+      }
+      var x = getQueryStringValue("tank1");
+      var y = getQueryStringValue("tank2");
+      var z = getQueryStringValue("tank3");
+      var w = getQueryStringValue("tank4");
+      $(".tank1").createWaterBall({
+        targetRange: x
+      });
+      $(".tank2").createWaterBall({
+        targetRange: y
+      });
+      $(".tank3").createWaterBall({
+        targetRange: z
+      });
+      $(".tank4").createWaterBall({
+        targetRange: w
+      });
+
+      var loadingEle = $(".loading");
+      var loading_width = loadingEle.width(),
+        loading_height = loadingEle.height();
+      $(".loading").createWaterBall({
+        cvs_config: {
+          width: loading_width,
+          height: loading_height
+        },
+        wave_config: {
+          waveWidth: 0.02,
+          waveHeight: 5
+        },
+        data_range: [30, 70, 100],
+        isLoading: true,
+        nowRange: 70,
+        targetRange: 70
+      });
+      setTimeout(function() {
+        $(".loading").createWaterBall("updateRange", 80);
+      }, 1000);
+      $(".waterBall1").createWaterBall({
+        csv_config: {
+          width: $(".waterBall1").width(),
+          height: $(".waterBall1").height()
+        },
+        wave_config: {
+          waveWidth: 0.02,
+          waveHeight: 5
+        },
+        data_range: [40, 50, 100],
+        targetRange: 45
+      });
+    </script>
+
     <div class="faq container">
       <div class="row">
         <div class="col-lg-12">