mirror of
https://github.com/rudy3333/eversync.git
synced 2025-07-03 01:26:01 +00:00
209 lines
No EOL
7.2 KiB
HTML
209 lines
No EOL
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Eversync</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
|
{% load static %}
|
|
<link rel="icon" href="{% static 'favicon.ico' %}">
|
|
<link rel="stylesheet" href="{% static 'index-style.css' %}" ">
|
|
</head>
|
|
|
|
</head>
|
|
<body>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
|
|
color: white;
|
|
margin: 0;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.weather-container {
|
|
margin: 0 auto;
|
|
display: block;
|
|
max-width: 900px;
|
|
width: 100%;
|
|
padding: 20px;
|
|
background: white;
|
|
border-radius: 15px;
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
|
|
color: black;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 36px;
|
|
font-weight: 600;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
canvas {
|
|
border-radius: 10px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.current-weather {
|
|
font-size: 24px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.forecast {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.forecast-card {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
padding: 10px;
|
|
border-radius: 8px;
|
|
width: 100px;
|
|
text-align: center;
|
|
}
|
|
|
|
.forecast-card h3 {
|
|
font-size: 16px;
|
|
margin: 0;
|
|
}
|
|
|
|
.forecast-card p {
|
|
font-size: 14px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="weather-container">
|
|
<h1>Weather in {{ location }}</h1>
|
|
|
|
<div class="current-weather">
|
|
<p>Now: <span id="current-temp"></span>°C, <span id="current-code"></span></p>
|
|
<p>High: <span id="max-temp"></span>°C / Low: <span id="min-temp"></span>°C</p>
|
|
<p>Sunrise: <span id="sunrise-time"></span> / Sunset: <span id="sunset-time"></span></p>
|
|
</div>
|
|
|
|
<canvas id="weatherChart" width="800" height="400"></canvas>
|
|
|
|
<div class="forecast">
|
|
{% for hour in hourly_forecast %}
|
|
<div class="forecast-card">
|
|
<h3>{{ hour.time }}</h3>
|
|
<p>{{ hour.temp }}°C</p>
|
|
<p>{{ hour.condition }}</p>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
fetch("{% url 'weather_api' location=location %}")
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
// Current weather data
|
|
document.getElementById('current-temp').textContent = data.current.temperature;
|
|
const weatherDescriptions = {
|
|
0: "Clear",
|
|
1: "Mainly Clear",
|
|
2: "Partly Cloudy",
|
|
3: "Overcast",
|
|
45: "Fog",
|
|
48: "Depositing Rime Fog",
|
|
51: "Light Drizzle",
|
|
53: "Moderate Drizzle",
|
|
55: "Dense Drizzle",
|
|
61: "Light Rain",
|
|
63: "Moderate Rain",
|
|
65: "Heavy Rain",
|
|
71: "Light Snow",
|
|
73: "Moderate Snow",
|
|
75: "Heavy Snow",
|
|
80: "Rain Showers",
|
|
81: "Heavy Rain Showers",
|
|
95: "Thunderstorm",
|
|
};
|
|
document.getElementById('current-code').textContent = weatherDescriptions[data.current.weathercode] || "Unknown";
|
|
document.getElementById('max-temp').textContent = data.summary.today.max_temp;
|
|
document.getElementById('min-temp').textContent = data.summary.today.min_temp;
|
|
document.getElementById('sunrise-time').textContent = new Date(data.summary.today.sunrise).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
|
document.getElementById('sunset-time').textContent = new Date(data.summary.today.sunset).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
|
|
|
// Hourly Forecast Chart
|
|
const ctx = document.getElementById('weatherChart').getContext('2d');
|
|
const chart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: data.hourly.time,
|
|
datasets: [{
|
|
label: 'Hourly Temperature (°C)',
|
|
data: data.hourly.temperature_2m,
|
|
borderColor: 'rgba(0, 0, 0, 1)',
|
|
backgroundColor: 'rgba(0, 0, 0, 0.3)',
|
|
borderWidth: 2,
|
|
pointRadius: 1,
|
|
fill: true,
|
|
tension: 0.3,
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
scales: {
|
|
x: {
|
|
ticks: {
|
|
autoSkip: true,
|
|
maxTicksLimit: 24,
|
|
font: {
|
|
family: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif',
|
|
size: 12,
|
|
weight: 500,
|
|
color: 'white'
|
|
}
|
|
},
|
|
},
|
|
y: {
|
|
beginAtZero: false,
|
|
ticks: {
|
|
font: {
|
|
family: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif',
|
|
size: 14,
|
|
weight: 600,
|
|
color: 'white'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
const forecastContainer = document.querySelector('.forecast');
|
|
data.hourly.forecast.forEach(hour => {
|
|
forecastContainer.innerHTML += `
|
|
<div class="forecast-card">
|
|
<h3>${hour.time}</h3>
|
|
<p>${hour.temp}°C</p>
|
|
<p>${hour.condition}</p>
|
|
</div>
|
|
`;
|
|
});
|
|
});
|
|
</script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const toggle = document.querySelector('.dropdown-toggle');
|
|
const menu = document.querySelector('.dropdown-menu');
|
|
toggle.addEventListener('click', function () {
|
|
menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |