Team Stellars

README.md

@@ -1,32 +1,47 @@
-# NASA Space Apps Noida Hackathon 2023 - Hack2Skill
+#### Team Name - Team Stellars
+#### Problem Statement - What’s Up With This Water?
+#### Team Leader Email - [email protected]
 
-Welcome to the official repository for the NASA Space Apps Noida Hackathon 2023 organized by Hack2Skill!
+#### Client Side Explanation
 
-## Getting Started
+#### Prototype Website URL:- https://whater989.000webhostapp.com/
 
-To get started with the NASA Space Apps Noida Hackathon 2023 repository, follow these steps:
+![ezgif com-video-to-gif](https://github.com/mediachain/mediachain-website/assets/72219613/2b06670b-55a9-43c3-a06a-2f6f16d3d4fd)
 
-### Submission Instruction:
-  1. Fork this repository
-  2. Create a folder with your Team Name
-  3. Upload all the code and necessary files in the created folder
-  4. Upload a **README.md** file in your folder with the below mentioned informations.
-  5. Generate a Pull Request with your Team Name. (Example: submission-XYZ_team)
 
-### README.md must consist of the following information:
+## Our Prototype "HYDRA HEALTH" Front Page
 
-#### Team Name -
-#### Problem Statement - 
-#### Team Leader Email -
 
-### A Brief of the Prototype:
-  This section must include UML Diagrams and prototype description
-
+ ![WhatsApp Image 2023-10-08 at 4 59 30 AM](https://github.com/mediachain/mediachain-website/assets/72219613/8863abdf-d0c3-4a27-be7f-8394876d8191)
+### Our app first takes user's location using geoloaction module of js.
+
+ ## Then Fetches Longitude and Latitude of the User. And finds water bodies under the radius of 5km. 
+
+
+
+![WhatsApp Image 2023-10-08 at 4 59 30 AM1](https://github.com/mediachain/mediachain-website/assets/72219613/df64cbf9-ef84-45c5-9879-2838c5836c16)
+ We can add custom Latitude and longitude and get the water quality of a desired place.
+ ![WhatsApp Image 2023-10-08 at 4 59 30 AM2](https://github.com/mediachain/mediachain-website/assets/72219613/54962da9-99b3-4635-ab6c-b5c1dfb3161a)
+ Then finds the water quality based on user's location using database and displayes in the format of PHI(ph index), KAPPA(specific conductivity of water), OMEGA(Dissolved oxygen in water). The database is taken from NASA resource provided in the problem statement. 
+
+#### Server side Explanation
+
+Output.sql -> Define the database we got from NASA resources and it can be updated in every 5 hours using dataformat.py
+DataFormat.py -> Used to refine, insert and update data present in output.sql
+Index.php -> It is the main file which is used to display the water quality on the web page 
+Style.css -> It is used for styling our web page
+Script.js -> It is used to get the current location of the user using geolocation module
+HTML,CSS -> It is used to create and style the web page
+
 ### Tech Stack: 
-   List Down all technologies used to Build the prototype
-
-### Step-by-Step Code Execution Instructions:
-  This Section must contain a set of instructions required to clone and run the prototype so that it can be tested and deeply analyzed
+   Python -> It is used to refine and update the sql file
+   MySQL -> It is used to store of water phi, kappa and omega based on latitude and longitude
+   PHP -> It is used to intract our web page with database
+   JavaScript -> It is used to get user's current location in the format of latitude and longitude
 
+#### Our Working Flow
+![Screenshot 2023-10-08 060751](https://github.com/mediachain/mediachain-website/assets/72219613/0cc4d8c8-0f5b-4d21-a955-ce657d205012)
+
 ### Future Scope:
-   Write about the scalability and futuristic aspects of the prototype developed
+   To make our webapp more interacting and amazing, we are going to implement 3d models using three.js where we can interact 3d elements and find endangered water  
+   species based on water bodies near the user. We can also add a GEOLOCATION Machine Learning model to show the water quality of region which is under rainfall and fluctuating pollution level.

Team Stellars/README.md

@@ -0,0 +1,47 @@
+#### Team Name - Team Stellars
+#### Problem Statement - What’s Up With This Water?
+#### Team Leader Email - [email protected]
+
+#### Client Side Explanation
+
+#### Prototype Website URL:- https://whater989.000webhostapp.com/
+
+![ezgif com-video-to-gif](https://github.com/mediachain/mediachain-website/assets/72219613/2b06670b-55a9-43c3-a06a-2f6f16d3d4fd)
+
+
+## Our Prototype "HYDRA HEALTH" Front Page
+
+
+ ![WhatsApp Image 2023-10-08 at 4 59 30 AM](https://github.com/mediachain/mediachain-website/assets/72219613/8863abdf-d0c3-4a27-be7f-8394876d8191)
+### Our app first takes user's location using geoloaction module of js.
+
+ ## Then Fetches Longitude and Latitude of the User. And finds water bodies under the radius of 5km. 
+
+
+
+![WhatsApp Image 2023-10-08 at 4 59 30 AM1](https://github.com/mediachain/mediachain-website/assets/72219613/df64cbf9-ef84-45c5-9879-2838c5836c16)
+ We can add custom Latitude and longitude and get the water quality of a desired place.
+ ![WhatsApp Image 2023-10-08 at 4 59 30 AM2](https://github.com/mediachain/mediachain-website/assets/72219613/54962da9-99b3-4635-ab6c-b5c1dfb3161a)
+ Then finds the water quality based on user's location using database and displayes in the format of PHI(ph index), KAPPA(specific conductivity of water), OMEGA(Dissolved oxygen in water). The database is taken from NASA resource provided in the problem statement. 
+
+#### Server side Explanation
+
+Output.sql -> Define the database we got from NASA resources and it can be updated in every 5 hours using dataformat.py
+DataFormat.py -> Used to refine, insert and update data present in output.sql
+Index.php -> It is the main file which is used to display the water quality on the web page 
+Style.css -> It is used for styling our web page
+Script.js -> It is used to get the current location of the user using geolocation module
+HTML,CSS -> It is used to create and style the web page
+
+### Tech Stack: 
+   Python -> It is used to refine and update the sql file
+   MySQL -> It is used to store of water phi, kappa and omega based on latitude and longitude
+   PHP -> It is used to intract our web page with database
+   JavaScript -> It is used to get user's current location in the format of latitude and longitude
+
+#### Our Working Flow
+![Screenshot 2023-10-08 060751](https://github.com/mediachain/mediachain-website/assets/72219613/0cc4d8c8-0f5b-4d21-a955-ce657d205012)
+
+### Future Scope:
+   To make our webapp more interacting and amazing, we are going to implement 3d models using three.js where we can interact 3d elements and find endangered water  
+   species based on water bodies near the user. We can also add a GEOLOCATION Machine Learning model to show the water quality of region which is under rainfall and fluctuating pollution level.

Team Stellars/dataformat.py

@@ -0,0 +1,12 @@
+with open('input.txt', 'r') as file:
+    data = file.readlines()
+sql_statements = []
+for line in data:
+    # Assuming the data is comma-separated (CSV), split the line into values
+    values = line.strip().split(' ')
+    # Create the SQL INSERT statement
+    sql_insert = f"INSERT INTO `text`(`ID`, `EVENT`, `TIME(S)`, `EASTING`, `NORTHING`, `ORTHOMETRIC HEIGHT`, `OMEGA`, `PHI`, `KAPPA`, `LAT`, `LONG1`) VALUES ('{values[0]}','{values[1]}','{values[2]}','{values[3]}','{values[4]}','{values[5]}','{values[6]}','{values[7]}','{values[8]}','{values[9]}','{values[10]}');"
+    # Append the SQL statement to the list
+    sql_statements.append(sql_insert)
+with open('output.sql', 'w') as sql_file:
+    sql_file.write('\n'.join(sql_statements))

Team Stellars/index.php

@@ -0,0 +1,205 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Water Quality</title>
+    <link rel="stylesheet" href="style.css">
+
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+</head>
+<body style="text-align center;">
+
+
+<!-- <div class="preloader"></div> -->
+
+
+<div class="header">
+
+<!--Content before waves-->
+<div class="inner-header flex">
+<!--Just the logo.. Don't mind this-->
+<svg version="1.1" class="logo" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
+xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500" xml:space="preserve">
+<path fill="#FFFFFF" stroke="#000000" stroke-width="10" stroke-miterlimit="10" d="M57,283" />
+<g><path fill="#fff"
+d="M250.4,0.8C112.7,0.8,1,112.4,1,250.2c0,137.7,111.7,249.4,249.4,249.4c137.7,0,249.4-111.7,249.4-249.4
+C499.8,112.4,388.1,0.8,250.4,0.8z M383.8,326.3c-62,0-101.4-14.1-117.6-46.3c-17.1-34.1-2.3-75.4,13.2-104.1
+c-22.4,3-38.4,9.2-47.8,18.3c-11.2,10.9-13.6,26.7-16.3,45c-3.1,20.8-6.6,44.4-25.3,62.4c-19.8,19.1-51.6,26.9-100.2,24.6l1.8-39.7		c35.9,1.6,59.7-2.9,70.8-13.6c8.9-8.6,11.1-22.9,13.5-39.6c6.3-42,14.8-99.4,141.4-99.4h41L333,166c-12.6,16-45.4,68.2-31.2,96.2	c9.2,18.3,41.5,25.6,91.2,24.2l1.1,39.8C390.5,326.2,387.1,326.3,383.8,326.3z" />
+</g>
+</svg>
+<h1>Check Water Quality </h1>
+</div>
+<button id="Location" class="btn btn-info error">Get Location</button>
+<!--Waves Container-->
+<div>
+
+<form action="" method="post">
+<div class="entry" style="display:flex;padding:1rem;">
+
+  <div class="input-group mb-3">
+    <input type="text"style="color:black;margin:0 1rem;" name="Longitude"placeholder="Enter Your Latitude:" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default" required>
+  </div>
+  <div class="input-group mb-3">
+    <input type="text" style="color:black;margin:0 1rem;" name="Latitude"placeholder="Enter Your Latitude:" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default" required>
+  </div>
+</div>
+  <button type="sumbit" name="submit" class="btn btn-info">Check</button>
+
+</form>
+<div id="divo" style="display:none;">
+
+  <div class="result" style="display: flex;
+    text-align: center;
+    background: #00000030;
+    justify-content: center;
+    padding: 2rem 0;
+    border-radius: 20px;
+    margin: 2rem 22rem;
+    font-family: system-ui;">
+  <div class="phi"style="display:flex;flex-direction:column;margin:0 2.5rem;">
+    <h3 style="padding:0 0.5rem 0 0;color:#ffffff73">PHI</h3><h1>24.4646</h1>
+  </div>
+  <div class="phi"style="display:flex;flex-direction:column;margin:0 2.5rem;">
+    <h3 style="padding:0 0.5rem 0 0;color:#ffffff73">Kappa</h3><h1>-34.45646</h1>
+  </div>
+  <div class="phi"style="display:flex;flex-direction:column;margin:0 2.5rem;">
+    <h3 style="padding:0 0.5rem 0 0;color:#ffffff73">Omega</h3><h1>-190.34532</h1>
+  </div>
+</div>
+<h1>Water is Pure</h1>
+</div>
+
+<?php
+// Database connection information
+$servername = "localhost";
+$username = "root";
+$password = "";
+$database = "text";
+// Create a connection
+$conn = new mysqli($servername, $username, $password, $database);
+
+// Check the connection
+if ($conn->connect_error) {
+    die("Connection failed: " . $conn->connect_error);
+}
+
+// Define the two columns you want to filter by
+$column1 = "LAT";
+$column2 = "LONG1";
+
+ if (isset($_POST['submit'])) {
+   $input1 = $_POST['Longitude'];
+   $input2 = $_POST['Latitude'];
+
+
+
+// SQL query to fetch data based on the two columns
+$sql = "SELECT * FROM text WHERE LAT=$input1 AND LONG1 =$input2 ";
+
+// Execute the query
+$run = mysqli_query($conn,$sql);
+$post=mysqli_num_rows($run);
+
+
+if ($post) {
+  // output data of each row
+  while($row = mysqli_fetch_assoc($run)) {
+?>
+
+<div class="result" style="display: flex;
+    text-align: center;
+    background: #00000030;
+    justify-content: center;
+    padding: 2rem 0;
+    border-radius: 20px;
+    margin: 2rem 22rem;
+    font-family: system-ui;">
+  <div class="phi"style="display:flex;flex-direction:column;margin:0 2.5rem;">
+    <h3 style="padding:0 0.5rem 0 0;color:#ffffff73">PHI</h3><h1><?php echo $row['PHI'] ?></h1>
+  </div>
+  <div class="phi"style="display:flex;flex-direction:column;margin:0 2.5rem;">
+    <h3 style="padding:0 0.5rem 0 0;color:#ffffff73">Kappa</h3><h1><?php echo $row['KAPPA'] ?></h1>
+  </div>
+  <div class="phi"style="display:flex;flex-direction:column;margin:0 2.5rem;">
+    <h3 style="padding:0 0.5rem 0 0;color:#ffffff73">Omega</h3><h1><?php echo $row['OMEGA'] ?></h1>
+  </div>
+</div>
+<h1>Water is Pure</h1>
+<?php
+    // echo $row['PHI']."\n";
+    // echo 'Kappa'.$row['OMEGA'];
+    // echo $row['PHI'];
+    // echo $row['PHI'];
+  }
+} else {
+  echo "0 results";
+}
+ }
+$conn->close();
+?>
+
+<!-- <script>
+  const btn = document.getElementById("Location");
+  btn.addEventListener('click',async()=>{
+
+        // Function to handle the success case when getting the user's location
+        function success(position) {
+            const latitude = position.coords.latitude;
+            const longitude = position.coords.longitude;
+
+            // Display latitude and longitude in HTML
+            document.getElementById("outputLat").textContent = latitude;
+            document.getElementById("outputLong").textContent = longitude;
+        }
+
+        // Function to handle errors when getting the user's location
+        function error() {
+            alert("Unable to retrieve your location.");
+        }
+
+        // Check if the Geolocation API is available in the browser
+        if ("geolocation" in navigator) {
+            // If available, use the Geolocation API to get the user's location
+            navigator.geolocation.getCurrentPosition(success, error);
+        } else {
+            alert("Geolocation is not supported by your browser.");
+        } 
+});
+    </script> -->
+
+
+
+
+
+<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
+<defs>
+<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
+</defs>
+<g class="parallax">
+<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
+<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
+<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
+<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
+</g>
+</svg>
+</div>
+<!--Waves end-->
+
+</div>
+<!--Header ends-->
+
+<!--Content starts-->
+<div class="content flex">
+  <p>Team Stellars | Check Water </p>
+</div>
+<!--Content ends-->
+
+
+</body>
+
+
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+<script src="script.js"></script>
+</html>