57 lines
2.4 KiB
HTML
57 lines
2.4 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block content %}
|
|
<div class="page-container">
|
|
<div class="currentForecast">
|
|
<div class="forecast">
|
|
<div class="shortDescription">{{ current_conditions['short_forecast'] }}</div>
|
|
<div class="longDescription">{{ current_conditions['detailed_forecast'] }}</div>
|
|
<div class="currentTemp">
|
|
<span class="temperature">{{ current_conditions['temperature'] }}</span><span class="unit">°{{ current_conditions['temperature_unit'] }}</span>
|
|
</div>
|
|
<div class="waterConditions">{{ current_conditions['precipitation_probability'] }}% percip | {{ current_conditions['relative_humidity'] }}% humidity (relative)</div>
|
|
</div>
|
|
<div class="secondaryInfo">
|
|
<div class="windContainer frosted">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center">Wind Status</div>
|
|
<div class="flex items-center">{{ current_conditions['wind_speed'] }}</div>
|
|
</div>
|
|
<div class="flex items-center justify-center">
|
|
</div>
|
|
<div class="flex items-center justify-center">
|
|
Direction: {{ current_conditions['wind_direction'] }}
|
|
</div>
|
|
</div>
|
|
<div class="solarClock frosted">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center">Sunrise</div>
|
|
<div class="flex items-center">Sunset</div>
|
|
</div>
|
|
<div class="flex items-center justify-center">
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center">Time AM</div>
|
|
<div class="flex items-center">Time PM</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hourlyForecast frosted my-6">
|
|
<h3>Hourly Forecast</h3>
|
|
<div class="grid grid-cols-6 gap-x-4">
|
|
{{ current_conditions | tojson(2) }}
|
|
</div>
|
|
</div>
|
|
<div class="weeklyReport frosted">
|
|
<h3>Weekly Forecast</h3>
|
|
<div class="grid grid-cols-7 gap-x-4">
|
|
{% for period in periods %}
|
|
<div>{{ period['start_time'] }} - {{ period['end_time'] }} | {{ period['temperature'] }}{{ period['temperature_unit'] }}</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|