Ayobami
262 lines
9.0 KiB
HTML
262 lines
9.0 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>
|
|
<!-- Import 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">Import XML</div>
|
|
<input
|
|
type="file"
|
|
id="import-xml-input"
|
|
accept=".xml,text/xml,application/xml"
|
|
class="mb-2 text-xs"
|
|
/>
|
|
<button
|
|
id="import-xml-btn"
|
|
class="bg-green-400 text-white font-semibold px-8 py-2 rounded"
|
|
>
|
|
Import
|
|
</button>
|
|
<div id="import-status" class="text-xs mt-2"></div>
|
|
</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"
|
|
>
|
|
<img
|
|
id="upload-preview"
|
|
src=""
|
|
alt="Latest upload"
|
|
class="w-24 h-24 object-cover rounded mb-2"
|
|
style="display: none"
|
|
/>
|
|
<input type="file" id="upload-input" accept="image/*" class="mb-2" />
|
|
<button
|
|
id="upload-btn"
|
|
class="bg-sky-400 text-white font-semibold px-8 py-2 rounded"
|
|
>
|
|
Upload
|
|
</button>
|
|
<span id="upload-error" class="text-xs text-red-500 mt-2"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2FA Modal -->
|
|
<div
|
|
id="2fa-modal"
|
|
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"
|
|
>
|
|
<div class="bg-white rounded-lg p-8 max-w-md w-full mx-4">
|
|
<h2 class="text-2xl font-bold mb-4 text-center">
|
|
Two-Factor Authentication
|
|
</h2>
|
|
|
|
<div id="2fa-setup" class="hidden">
|
|
<p class="text-gray-600 mb-4 text-center">
|
|
Scan this QR code with your authenticator app:
|
|
</p>
|
|
<div id="qr-code" class="flex justify-center mb-4"></div>
|
|
<div class="flex gap-2 mb-4">
|
|
<button
|
|
id="download-qr"
|
|
class="flex-1 bg-purple-500 text-white py-2 px-4 rounded hover:bg-purple-600 text-sm"
|
|
>
|
|
Download QR
|
|
</button>
|
|
<button
|
|
id="copy-secret"
|
|
class="flex-1 bg-gray-500 text-white py-2 px-4 rounded hover:bg-gray-600 text-sm"
|
|
>
|
|
Copy Secret
|
|
</button>
|
|
</div>
|
|
<p class="text-xs text-gray-500 mb-4 text-center">
|
|
Or manually enter this secret:
|
|
<span
|
|
id="secret-key"
|
|
class="font-mono bg-gray-100 px-2 py-1 rounded"
|
|
></span>
|
|
</p>
|
|
<button
|
|
id="generate-2fa"
|
|
class="w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 mb-4"
|
|
>
|
|
Generate New Secret
|
|
</button>
|
|
<button
|
|
id="proceed-to-verify"
|
|
class="w-full bg-green-500 text-white py-2 px-4 rounded hover:bg-green-600"
|
|
>
|
|
I've Added the Code, Verify Now
|
|
</button>
|
|
</div>
|
|
|
|
<div id="2fa-verify" class="hidden">
|
|
<p class="text-gray-600 mb-4 text-center">
|
|
Enter the 6-digit code from your authenticator app:
|
|
</p>
|
|
<input
|
|
type="text"
|
|
id="2fa-token"
|
|
placeholder="000000"
|
|
maxlength="6"
|
|
class="w-full text-center text-2xl font-mono border border-gray-300 rounded px-4 py-2 mb-4 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
/>
|
|
<button
|
|
id="verify-2fa"
|
|
class="w-full bg-green-500 text-white py-2 px-4 rounded hover:bg-green-600 mb-2"
|
|
>
|
|
Verify
|
|
</button>
|
|
<button
|
|
id="back-to-setup"
|
|
class="w-full bg-gray-500 text-white py-2 px-4 rounded hover:bg-gray-600"
|
|
>
|
|
Back to Setup
|
|
</button>
|
|
</div>
|
|
|
|
<div id="2fa-loading" class="text-center">
|
|
<p class="text-gray-600 mb-4">Loading 2FA...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/main.js"></script>
|
|
</body>
|
|
</html>
|