jun 20

2024-06-20 08:55:52 +02:00
parent f076d20a62
commit 4cf0c7bcb9
9 changed files with 183 additions and 20 deletions
--- a/weather.php
+++ b/weather.php
@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Current Weather</title>
+    <script src="https://kit.fontawesome.com/4bb6479073.js" crossorigin="anonymous"></script>
+
+</head>
+
+<style>
+    body{
+        background-image: url('assets/images/blue-sky-with-clouds.jpg');
+        background-repeat: no-repeat;
+        background-position: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: white;
+        flex-direction: column;
+        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    }
+
+    .weather{
+        margin-top: 150px;
+        background: linear-gradient(135deg, #e5eeeb,#1ab5ed);
+        border-radius: 20px;
+        width: 90%;
+        max-width: 470px;
+        height: fit-content;
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        padding: 40px 35px;
+    }
+    .col{
+        display: flex;
+        font-size: 20px;
+        margin: 10px 0;
+
+    }
+    .wind{
+        margin: 0;
+        padding-left: 10px;
+    }
+    .humidity{
+        margin: 0;
+        padding-left: 10px;
+    }
+
+    h1{
+        font-size: 80px;
+        margin: 0px;
+    }
+
+    h2{
+        font-size: 40px;
+    }
+
+    .back{
+        margin-top: 10px;
+        padding: 20px 30px;
+        border: none;
+        border-radius: 20px;
+        background-color: #1ab5ed;
+        color:white;
+        cursor:pointer;
+        text-transform: uppercase;
+        border-radius: 29px;
+        font-weight: 900;
+        font-style: normal;
+        padding: 19px 38px;
+        font-size: 1rem;
+        letter-spacing: .04em;
+        }
+    .back:hover{
+        background-color: white;
+        color: black;
+        transition: 0.3s;
+    }
+</style>
+
+<?php
+ require 'php/connect.inc.php';
+ require 'php/login.php';
+
+
+ if (isset($_SESSION['user_id'])) {
+     $user_id = $_SESSION['user_id'];
+ 
+     $query = "SELECT `city` FROM `globaly_accounts` WHERE `id` = " . mysqli_real_escape_string($con, $user_id);
+     $query_run = mysqli_query($con, $query);
+     $query_num_rows = mysqli_num_rows($query_run);
+ 
+     if ($query_num_rows == 0) {
+         echo 'Error';
+     } else if ($query_num_rows == 1) {
+         $row = mysqli_fetch_assoc($query_run);
+         $city = $row['city'];
+     }
+ } else {
+     echo 'User not logged in';
+ }
+
+?>
+<body>
+    <div class="weather">
+        <img src="assets/images/4102326_cloud_sun_sunny_weather_icon.png" alt="">
+        <h1 class="temp">22c</h1>
+        <h2 class="city">Novi sad</h2>
+        <div class="details">
+            <div class="col">
+                <i class="fa-solid fa-water"></i>
+                <p class="humidity">50%</p>
+            </div>
+            <div class="col">
+                <i class="fa-solid fa-wind"></i>
+                <p class="wind">15km/h</p>
+            </div>
+        </div>
+    </div>
+    <div id="btn-back">
+        <a href="index.php"><input class="back" type="submit" value="Back"></a>
+    </div>
+
+<script>
+
+    const apiKey = "15ed697a5c8a6bbd5d1c39639416d150";
+    const apiUrl = "https://api.openweathermap.org/data/2.5/weather?units=metric&q=";
+    const city = "<?php echo $city; ?>";
+
+
+    async function checkWeather(){
+        const response = await fetch(apiUrl + city + `&appid=${apiKey}`);
+        var data = await response.json();
+
+        document.querySelector(".city").innerHTML = data.name;
+        document.querySelector(".temp").innerHTML = Math.round(data.main.temp)  + "°C";
+        document.querySelector(".humidity").innerHTML = data.main.humidity + " %";
+        document.querySelector(".wind").innerHTML = data.wind.speed + " km/h";
+
+     }
+
+     checkWeather();
+
+</script>
+</body>
+</html>