154 lines
5.5 KiB
HTML
154 lines
5.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<title>Dashboard</title>
|
||
|
|
<!-- <script src="
|
||
|
|
https://cdn.jsdelivr.net/npm/tailwindcss@4.1.11/dist/lib.min.js
|
||
|
|
"></script> -->
|
||
|
|
<!-- <script src="https://cdn.jsdelivr.net/npm/tailwindcss@latest"></script>`` -->
|
||
|
|
<link rel="stylesheet" href="/stylesheets/output.css" />
|
||
|
|
<link
|
||
|
|
rel="stylesheet"
|
||
|
|
href="https://cdn.jsdelivr.net/npm/ol@v7.4.0/ol.css"
|
||
|
|
/>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/ol@v7.4.0/dist/ol.js"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div
|
||
|
|
class="min-h-screen bg-sky-400 flex flex-col items-center justify-center p-8"
|
||
|
|
>
|
||
|
|
<div class="grid grid-cols-5 gap-8 bg-inherit">
|
||
|
|
<!-- Weather Card -->
|
||
|
|
<div
|
||
|
|
id="weather-widget"
|
||
|
|
class="flex flex-col items-center bg-white rounded-lg shadow-md p-6 row-span-2"
|
||
|
|
>
|
||
|
|
<img
|
||
|
|
class="weather-icon w-24 h-24 mb-2"
|
||
|
|
src="https://cdn-icons-png.flaticon.com/512/869/869869.png"
|
||
|
|
alt="Weather"
|
||
|
|
/>
|
||
|
|
<div class="weather-temp text-3xl font-semibold mt-2">34 °C</div>
|
||
|
|
</div>
|
||
|
|
<!-- Dropdown -->
|
||
|
|
<div
|
||
|
|
class="col-span-1 flex items-center justify-center bg-white rounded-lg shadow-md p-4 relative"
|
||
|
|
>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
placeholder="Dropdown autocomplete of airport"
|
||
|
|
class="w-full outline-none"
|
||
|
|
/>
|
||
|
|
<span class="ml-2 font-bold text-lg">▼</span>
|
||
|
|
</div>
|
||
|
|
<!-- Nigeria Time -->
|
||
|
|
<div
|
||
|
|
class="bg-white rounded-lg shadow-md p-6 flex flex-col items-center"
|
||
|
|
>
|
||
|
|
<div class="text-sm font-medium text-gray-500">Nigeria Time</div>
|
||
|
|
<div class="text-3xl font-mono mt-2" id="nigeria-clock">23:01:05</div>
|
||
|
|
</div>
|
||
|
|
<!-- London Time -->
|
||
|
|
<div
|
||
|
|
class="bg-white rounded-lg shadow-md p-6 flex flex-col items-center"
|
||
|
|
>
|
||
|
|
<div class="text-sm font-medium text-gray-500">London Time</div>
|
||
|
|
<div class="text-3xl font-mono mt-2" id="london-clock">23:01:05</div>
|
||
|
|
</div>
|
||
|
|
<!-- EST Time -->
|
||
|
|
<div
|
||
|
|
class="bg-white rounded-lg shadow-md p-6 flex flex-col items-center"
|
||
|
|
>
|
||
|
|
<div class="text-sm font-medium text-gray-500">EST Time</div>
|
||
|
|
<div class="text-3xl font-mono mt-2" id="est-clock">23:01:05</div>
|
||
|
|
</div>
|
||
|
|
<!-- Click Counter -->
|
||
|
|
<div
|
||
|
|
class="bg-white rounded-lg shadow-md p-6 flex flex-col items-center mt-8"
|
||
|
|
>
|
||
|
|
<div class="text-xs text-gray-500 mb-1">Number of Clicks</div>
|
||
|
|
<div class="text-4xl font-bold" id="click-counter-widget">0</div>
|
||
|
|
</div>
|
||
|
|
<!-- Export XML -->
|
||
|
|
<div
|
||
|
|
class="bg-white rounded-lg shadow-md p-6 flex flex-col items-center mt-8"
|
||
|
|
>
|
||
|
|
<div class="text-xs text-gray-500 mb-2">Export XML</div>
|
||
|
|
<button class="bg-sky-400 text-white font-semibold px-8 py-2 rounded">
|
||
|
|
Export
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<!-- Map -->
|
||
|
|
<div
|
||
|
|
class="row-span-2 bg-white rounded-lg shadow-md p-2 flex items-center justify-center"
|
||
|
|
>
|
||
|
|
<div id="map-widget" class="w-full h-full"></div>
|
||
|
|
</div>
|
||
|
|
<!-- Distance -->
|
||
|
|
<div
|
||
|
|
class="bg-white rounded-lg shadow-md p-6 flex flex-col items-center mt-8"
|
||
|
|
>
|
||
|
|
<div class="text-xs text-gray-500 mb-1">Distance from Arctic</div>
|
||
|
|
<div class="text-4xl font-bold" id="distance-widget">N/A</div>
|
||
|
|
</div>
|
||
|
|
<!-- Pakistan Time -->
|
||
|
|
<div
|
||
|
|
class="bg-white rounded-lg shadow-md p-6 flex flex-col items-center"
|
||
|
|
>
|
||
|
|
<div class="text-sm font-medium text-gray-500">Pakistan Time</div>
|
||
|
|
<div class="text-3xl font-mono mt-2" id="pakistan-clock">
|
||
|
|
23:01:05
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- News List -->
|
||
|
|
<div
|
||
|
|
class="row-span-2 bg-white rounded-lg shadow-md p-4 flex flex-col justify-between"
|
||
|
|
>
|
||
|
|
<div class="text-xs font-semibold mb-2">News</div>
|
||
|
|
<div class="overflow-y-auto h-full max-h-[300px]">
|
||
|
|
<div id="news-widget" class="h-max"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- Coin Calculator -->
|
||
|
|
<div
|
||
|
|
class="bg-white rounded-lg shadow-md p-6 flex flex-col items-center"
|
||
|
|
>
|
||
|
|
<div class="text-xs text-gray-500 mb-1">Count # of coins</div>
|
||
|
|
<input
|
||
|
|
type="number"
|
||
|
|
step="0.01"
|
||
|
|
min="0"
|
||
|
|
placeholder="Enter amount for coin calculator"
|
||
|
|
class="mb-2 p-2 border rounded w-full text-center"
|
||
|
|
/>
|
||
|
|
<button
|
||
|
|
class="bg-sky-400 text-white font-semibold px-8 py-2 rounded mt-2"
|
||
|
|
>
|
||
|
|
Calculate
|
||
|
|
</button>
|
||
|
|
<ul
|
||
|
|
id="coin-result-list"
|
||
|
|
class="text-xs list-disc list-inside mt-2"
|
||
|
|
></ul>
|
||
|
|
</div>
|
||
|
|
<!-- Upload -->
|
||
|
|
<div
|
||
|
|
class="bg-white rounded-lg shadow-md p-6 flex flex-col items-center justify-center mt-8"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="w-24 h-24 flex items-center justify-center bg-blue-100 rounded mb-2"
|
||
|
|
>
|
||
|
|
<span class="text-4xl">📷</span>
|
||
|
|
</div>
|
||
|
|
<button class="bg-sky-400 text-white font-semibold px-8 py-2 rounded">
|
||
|
|
Upload
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script src="/main.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|