148 lines
3.7 KiB
PHP
Executable File
148 lines
3.7 KiB
PHP
Executable File
<!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>
|