jun 20

index.php

@@ -196,6 +196,7 @@
       </div>
       <img src="assets/images/logo.webp" class="logo-img mt-3 mt-lg-0 mt-md-0" alt="">
 
+      <!-- Login -->
       <div class="dropdown" id="dropdownid" style="position: absolute; width: fit-content;">
         <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
           <i class="fa-solid fa-users"></i>
@@ -209,6 +210,17 @@
           } ?>
         </ul>
       </div>
+      <!-- Weather icon -->
+
+      <?php if (loggedin()) {
+        echo '<div class="weather-div" style="position: absolute; color: white; font-size: 25px; left:10%; top:15px;">
+        <a style="color:white" href="weather.php"><i class="fa-solid fa-cloud-sun"></i></a>
+        
+      <div>';
+      }?>
+
+      
+
       <!-- site navigation-->
 
       <nav class="menu d-flex d-md-none justify-content-center align-items-center w-100 " style="background-color: white; height: 68px;">

php/register.php

@@ -6,7 +6,7 @@ if (!loggedin()) {
     if (
         isset($_POST['name']) && isset($_POST['surname']) && isset($_POST['email'])
         && isset($_POST['password']) && isset($_POST['password_again']) && isset($_POST['birth_day'])
-        && isset($_POST['birth_month']) && isset($_POST['birth_year'])
+        && isset($_POST['birth_month']) && isset($_POST['birth_year']) && isset($_POST['city'])
     ) {
         $name = $_POST['name'];
         $surname = $_POST['surname'];
@@ -17,10 +17,11 @@ if (!loggedin()) {
         $birth_day = $_POST['birth_day'];
         $birth_month = $_POST['birth_month'];
         $birth_year = $_POST['birth_year'];
+        $city = $_POST['city'];
 
         if (
             !empty($name) && !empty($password) && !empty($password_again) &&
-            !empty($email) && !empty($birth_day) && !empty($birth_month) && !empty($birth_year)
+            !empty($email) && !empty($birth_day) && !empty($birth_month) && !empty($birth_year) && !empty($city)
         ) {
             if (strlen($name) > 30) {
                 echo 'Please ahear to maxlength of fields';
@@ -46,11 +47,11 @@ if (!loggedin()) {
                         echo 'The email ' . $email . 'already exists';
                     } else {
                         $query = "INSERT INTO `globaly_accounts` VALUES (NULL ,'" . mysqli_real_escape_string($con, $name) .
-                            "','" . mysqli_real_escape_string($con, $surname) ."','"  . mysqli_real_escape_string($con, $email) . "','" . mysqli_real_escape_string($con, $password_hash) . "','" .
+                            "','" . mysqli_real_escape_string($con, $surname) ."','"  . mysqli_real_escape_string($con, $email) . "','" . mysqli_real_escape_string($con, $password_hash) . "','" . mysqli_real_escape_string($con, $city) ."','" .
                             mysqli_real_escape_string($con, $birth_day) . "','" . mysqli_real_escape_string($con, $birth_month) . "','" . mysqli_real_escape_string($con, $birth_year)  . "')";
                         if ($query_run = mysqli_query($con, $query)) {
                             echo '<script>alert("You are registerd!")</script>';
-                            header('Location: ../index.html');
+                            header('Location: ../index.php');
                         } else {
                             echo 'We could not register you!';
                         }

signup.php

@@ -19,7 +19,7 @@
     .fa-solid {
       position: absolute;
       right: 3%;
-      top: 46%;
+      top: 41%;
       cursor: pointer;
     }
 
@@ -74,7 +74,7 @@
 
     @media screen and (min-width: 768px) {
       .fa-solid {
-        top: 46%;
+        top: 41%;
       }
       #pswd_info {
 
@@ -86,7 +86,7 @@
     @media screen and (min-width: 992px) {
 
       .fa-solid {
-        top: 45%;
+        top: 40%;
 
       }
 
@@ -123,6 +123,7 @@
         <input class="input-text" type="password" id="password" placeholder="Password" name="password">
         <i id="togglePassword" class="fa-solid fa-eye"></i>
         <input class="input-text" type="password" placeholder="Confirm Password" name="password_again">
+        <input class="input-text" type="text" placeholder="City" name="city">
         <h6>Date of birth:</h6>
         <div class="date-container">
           <span>

style/_nav.scss

@@ -105,18 +105,12 @@ input::placeholder {
     right: 10px;
 }
 
-// .register{
+.weather-div{
-//     .register-link{
+    position: absolute;
-//         color: #15c1c6;
+    top: 2%;
-//         cursor: pointer;
+    right: 10px ;
-//         margin-right: 10px;
+    color: white;
-
+}
-//     }
-//     .register-link:hover{
-//         color:#333333;
-//         transition: 0.3s;
-//     }
-// }
 
 @media only screen and (min-width: 768px) {
     .dropdown {

style/style.css

@@ -110,6 +110,13 @@ input::placeholder {
   right: 10px;
 }
 
+.weather-div {
+  position: absolute;
+  top: 2%;
+  right: 10px;
+  color: white;
+}
+
 @media only screen and (min-width: 768px) {
   .dropdown {
     position: absolute;

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>