flight-screen-info/templates/screen.html
2024-04-01 01:42:34 +02:00

91 lines
3.7 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/static/style.css">
<link rel="stylesheet" href="/static/animation.css">
<meta http-equiv="refresh" content="30">
<title>{{ airport["icao"] }} Departure Schedule</title>
</head>
<body>
<nav class="px-4 flex justify-between bg-yellow-400 h-16">
<ul class="flex items-center">
<li>
<h1 class="pl-8 lg:pl-0 text-white text-2xl">{{ airport["name"] }} Airport Departures</h1>
</li>
</ul>
<ul class="flex items-center">
<li class="h-14 w-14">
<img
class="fill-current h-14 w-14"
src="/static/logo.png"
alt="Skyscreen Logo"/>
</li>
</ul>
</nav>
<div class="relative overflow-x-auto">
<table class="w-full text-sm text-left rtl:text-right text-gray-500">
<thead class="text-xs text-gray-700 uppercase bg-yellow-400">
<tr>
<th scope="col" class="px-6 py-3">Flight</th>
<th scope="col" class="px-6 py-3">Time</th>
<th scope="col" class="px-6 py-3">Delay</th>
<th scope="col" class="px-6 py-3">Airline</th>
<th scope="col" class="px-6 py-3">Destination</th>
<th scope="col" class="px-6 py-3">Remarks</th>
</tr>
</thead>
<tbody>
{% for i in range(0,len) %}
{% if i%2 == 0 %}
<tr class="bg-white border-b">
{% else %}
<tr class="bg-gray-100 border-b">
{% endif %}
<td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
<div class="carousel-container carousel{{ i }}">
<ul class="carousel-list" id="carouselList{{ i }}">
{% for ident in flight[i]["ident"] %}
<li class="carousel-item">{{ ident }}</li>
{% endfor %}
</ul>
</div>
</td>
<td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">{{ flight[i]["scheduled_off"] }}</td>
<td class="px-6 py-4 font-medium text-red-600 whitespace-nowrap">{% if flight[i]["departure_delay"] %}
{{ flight[i]["departure_delay"] }}
{% else %}
{% endif %}
</td>
<td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">{{ flight[i]["operator"] }}</td>
<td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap overflow-scroll scroll-smooth">
{% if flight[i]["destination"]["name"] %}
{{ flight[i]["destination"]["name"] }}
<span class="text-blue-500">{{ flight[i]["destination"]["code_icao"] }}</span> /
<span class="text-green-600">{{ flight[i]["destination"]["code_iata"] }}</span>
{% else %}
{% endif %}
</td>
{% if flight[i]["status"] != "Scheduled" %}
{% if flight[i]["cancelled"] %}
<td class="px-6 py-4 font-medium text-red-600 whitespace-nowrap">
{{ flight[i]["status"] }}
{% elif flight[i]["blocked"] %}
<td class="px-6 py-4 font-medium text-red-600 whitespace-nowrap">
{{ flight[i]["status"] }}
{% else %}
<td class="px-6 py-4 font-medium text-amber-400 whitespace-nowrap">
{{ flight[i]["status"] }}
{% endif %}
{% else %}
<td class="px-6 py-4 font-medium text-amber-400 whitespace-nowrap">
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<script src="/static/scroll.js"></script>
</body>
</html>