Hugging Face's logo

Spaces:
MoShow
/
afriweather-pulse
Running

App Files Community
MoShow commited on
Commit
9dc987e
·
verified ·
1 Parent(s): 272d7ff

User: Build a weather web app that monitor weather conditions, like flood, huricane., landsles etc, add AI for detections and analytics

Browse files

Kimi: I'll build a comprehensive AI-powered Weather Monitoring & Disaster Detection System. Let me first search for the latest weather APIs and AI detection technologies to make this as realistic and functional as possible.
Now I'll build a comprehensive **AI-Powered Extreme Weather & Disaster Monitoring System**. This will be a full-featured single-page application with real-time monitoring, AI detection algorithms, interactive mapping, and advanced analytics.

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sentinel AI | Extreme Weather & Disaster Monitoring System</title>

<!-- External Libraries -->
<script src="https://cdn.tailwindcss.com "></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js "></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css " />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js "></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css ">

<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300 ;400;500;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
--primary: #0f172a;
--secondary: #1e293b;
--accent: #06b6d4;
--danger: #ef4444;
--warning: #f59e0b;
--success: #10b981;
}

* {
font-family: 'Inter', sans-serif;
}

.mono {
font-family: 'JetBrains Mono', monospace;
}

body {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
color: #e2e8f0;
overflow-x: hidden;
}

/* Glassmorphism */
.glass {
background: rgba(30, 41, 59, 0.7);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-strong {
background: rgba(15, 23, 42, 0.9);
backdrop-filter: blur(30px);
border: 1px solid rgba(6, 182, 212, 0.2);
}

/* Animations */
@keyframes pulse-red {
0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
50% { box-shadow: 0 0 0 20px rgba(239, 68, 68, 0); }
}

@keyframes scan {
0% { top: 0%; }
100% { top: 100%; }
}

@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

.animate-pulse-red {
animation: pulse-red 2s infinite;
}

.scan-line {
position: absolute;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent, #06b6d4, transparent);
animation: scan 3s linear infinite;
opacity: 0.5;
}

.rotate-slow {
animation: rotate 20s linear infinite;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #0f172a;
}
::-webkit-scrollbar-thumb {
background: #334155;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #475569;
}

/* Map Customization */
#map {
height: 100%;
width: 100%;
border-radius: 0.75rem;
z-index: 1;
}

.leaflet-container {
background: #0f172a;
}

/* Grid Pattern */
.grid-pattern {
background-image: radial-gradient(circle at 1px 1px, rgba(6, 182, 212, 0.15) 1px, transparent 0);
background-size: 20px 20px;
}

/* Status Indicators */
.status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 6px;
}

.status-active { background: var(--success); box-shadow: 0 0 10px var(--success); }
.status-warning { background: var(--warning); box-shadow: 0 0 10px var(--warning); }
.status-danger { background: var(--danger); box-shadow: 0 0 10px var(--danger); }
.status-info { background: var(--accent); box-shadow: 0 0 10px var(--accent); }

/* Neural Network Visualization */
.neural-node {
position: absolute;
width: 4px;
height: 4px;
background: #06b6d4;
border-radius: 50%;
opacity: 0.6;
}

.loading-skeleton {
background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}

@keyframes loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
</style>
</head>
<body class="min-h-screen grid-pattern">

<!-- Header -->
<header class="fixed top-0 w-full z-50 glass-strong border-b border-cyan-500/20">
<div class="px-6 py-4 flex items-center justify-between">
<div class="flex items-center gap-4">
<div class="relative">
<i class="fas fa-satellite-dish text-3xl text-cyan-400"></i>
<div class="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full animate-pulse"></div>
</div>
<div>
<h1 class="text-2xl font-bold tracking-tight text-white">
SENTINEL <span class="text-cyan-400">AI</span>
</h1>
<p class="text-xs text-slate-400 mono">EXTREME WEATHER INTELLIGENCE SYSTEM v2.4</p>
</div>
</div>

<div class="flex items-center gap-6">
<div class="hidden md:flex items-center gap-4 text-sm mono">
<span class="text-slate-400">SYSTEM STATUS:</span>
<span class="text-green-400 flex items-center gap-2">
<span class="status-dot status-active"></span>OPERATIONAL
</span>
</div>
<div class="flex items-center gap-3">
<button onclick="toggleAlertMode()" class="px-4 py-2 rounded-lg bg-red-500/20 text-red-400 border border-red-500/50 hover:bg-red-500/30 transition-all flex items-center gap-2">
<i class="fas fa-bell"></i>
<span class="font-semibold">ALERTS: <span id="alert-count">3</span></span>
</button>
<div class="glass px-4 py-2 rounded-lg mono text-cyan-400" id="clock">
00:00:00 UTC
</div>
</div>
</div>
</div>
</header>

<!-- Main Content -->
<main class="pt-20 pb-6 px-4 grid grid-cols-12 gap-4 h-screen overflow-hidden">

<!-- Left Sidebar: AI Detection Panel -->
<aside class="col-span-12 lg:col-span-3 flex flex-col gap-4 h-full overflow-y-auto pb-20">

<!-- AI Status Card -->
<div class="glass rounded-xl p-5 border border-cyan-500/30 relative overflow-hidden">
<div class="scan-line"></div>
<div class="flex items-center justify-between mb-4">
<h3 class="font-bold text-lg flex items-center gap-2">
<i class="fas fa-brain text-cyan-400"></i>
AI Core Status
</h3>
<span class="text-xs px-2 py-1 rounded-full bg-cyan-500/20 text-cyan-400 border border-cyan-500/50">LIVE</span>
</div>

<div class="space-y-3">
<div class="flex justify-between items-center text-sm">
<span class="text-slate-400">Neural Network</span>
<span class="text-green-400 mono">ONLINE</span>
</div>
<div class="flex justify-between items-center text-sm">
<span class="text-slate-400">Prediction Confidence</span>
<span class="text-cyan-400 mono" id="confidence-level">94.2%</span>
</div>
<div class="flex justify-between items-center text-sm">
<span class="text-slate-400">Active Models</span>
<span class="text-cyan-400 mono">6/6</span>
</div>
</div>

<!-- Mini Neural Viz -->
<div class="mt-4 h-16 relative bg-slate-900/50 rounded-lg overflow-hidden" id="neural-viz">
<!-- Generated by JS -->
</div>
</div>

<!-- Disaster Detection List -->
<div class="glass rounded-xl p-5 flex-1 flex flex-col">
<h3 class="font-bold text-lg mb-4 flex items-center gap-2">
<i class="fas fa-exclamation-triangle text-yellow-400"></i>
AI Detections
</h3>

<div class="space-y-3 overflow-y-auto flex-1" id="detection-list">
<!-- Dynamic content -->
</div>
</div>

<!-- Sensor Feed -->
<div class="glass rounded-xl p-4">
<h4 class="text-sm font-semibold text-slate-400 mb-3 mono">LIVE SENSOR FEED</h4>
<div class="space-y-2 text-xs mono" id="sensor-feed">
<!-- Dynamic sensor data -->
</div>

Files changed (3) hide show
  1. README.md +8 -5
  2. dashboard.html +124 -0
  3. index.html +220 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Afriweather Pulse
3
- emoji: 😻
4
- colorFrom: indigo
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: AfriWeather Pulse 🌍
3
+ colorFrom: purple
4
+ colorTo: pink
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
dashboard.html ADDED
@@ -0,0 +1,124 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AfriWeather Pulse | Analytics Dashboard</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <script>
12
+ tailwind.config = {
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ primary: '#8b5cf6', // violet-500
17
+ secondary: '#eab308', // yellow-500
18
+ dark: '#0f172a',
19
+ darker: '#020617',
20
+ surface: '#1e293b',
21
+ }
22
+ }
23
+ }
24
+ }
25
+ </script>
26
+ </head>
27
+ <body class="bg-dark text-white min-h-screen overflow-x-hidden">
28
+
29
+ <!-- Header -->
30
+ <header class="sticky top-0 z-50 bg-surface/95 backdrop-blur-md border-b border-primary/20">
31
+ <div class="max-w-7xl mx-auto px-6 py-4">
32
+ <div class="flex items-center justify-between">
33
+ <div class="flex items-center gap-4">
34
+ <a href="index.html" class="w-10 h-10 rounded-full bg-surface border border-white/10 flex items-center justify-center text-gray-400 hover:text-primary hover:border-primary transition-all">
35
+ <i class="fas fa-arrow-left"></i>
36
+ </a>
37
+ <div>
38
+ <h1 class="text-2xl font-bold text-white">Weather Intelligence</h1>
39
+ <p class="text-xs text-primary font-mono">ONE CALL API 3.0 • ANALYTICS MODE</p>
40
+ </div>
41
+ </div>
42
+
43
+ <div class="flex items-center gap-4">
44
+ <select id="location-select" onchange="changeLocation()" class="bg-darker border border-gray-700 text-white text-sm rounded-lg px-4 py-2 focus:border-primary focus:outline-none">
45
+ <option value="6.5244,3.3792">Lagos, Nigeria</option>
46
+ <option value="-1.2921,36.8219">Nairobi, Kenya</option>
47
+ <option value="30.0444,31.2357">Cairo, Egypt</option>
48
+ <option value="-33.9249,18.4241">Cape Town, SA</option>
49
+ <option value="-4.4419,15.2663">Kinshasa, DRC</option>
50
+ <option value="5.6037,-0.1870">Accra, Ghana</option>
51
+ </select>
52
+
53
+ <div class="bg-darker border border-gray-700 rounded-lg px-4 py-2 text-sm font-mono text-primary" id="dashboard-clock">
54
+ 00:00:00 UTC
55
+ </div>
56
+ </div>
57
+ </div>
58
+ </div>
59
+ </header>
60
+
61
+ <!-- Main Content -->
62
+ <main class="max-w-7xl mx-auto px-6 py-8 pb-24 space-y-6">
63
+
64
+ <!-- Top Row: Current & AI -->
65
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
66
+
67
+ <!-- Current Conditions -->
68
+ <div class="bg-surface border border-primary/20 rounded-2xl p-6 relative overflow-hidden">
69
+ <div class="absolute top-0 right-0 w-32 h-32 bg-primary/10 rounded-full blur-3xl -mr-16 -mt-16"></div>
70
+
71
+ <div class="relative">
72
+ <div class="flex justify-between items-start mb-6">
73
+ <div>
74
+ <h3 class="text-sm text-gray-400 uppercase tracking-wider mb-1">Current Conditions</h3>
75
+ <div class="text-5xl font-bold text-white font-mono" id="current-temp">31°</div>
76
+ <div class="text-lg text-primary mt-1 capitalize" id="current-desc">Thunderstorm</div>
77
+ </div>
78
+ <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-primary to-purple-800 flex items-center justify-center text-3xl text-white shadow-lg shadow-primary/20">
79
+ <i class="fas fa-cloud-bolt"></i>
80
+ </div>
81
+ </div>
82
+
83
+ <div class="grid grid-cols-2 gap-3">
84
+ <div class="bg-darker/50 rounded-xl p-3 text-center border border-white/5">
85
+ <i class="fas fa-droplet text-blue-400 mb-1 text-sm"></i>
86
+ <div class="text-xl font-bold text-white font-mono" id="current-humidity">84%</div>
87
+ <div class="text-[10px] text-gray-500 uppercase">Humidity</div>
88
+ </div>
89
+ <div class="bg-darker/50 rounded-xl p-3 text-center border border-white/5">
90
+ <i class="fas fa-wind text-purple-400 mb-1 text-sm"></i>
91
+ <div class="text-xl font-bold text-white font-mono" id="current-wind">12</div>
92
+ <div class="text-[10px] text-gray-500 uppercase">km/h</div>
93
+ </div>
94
+ <div class="bg-darker/50 rounded-xl p-3 text-center border border-white/5">
95
+ <i class="fas fa-gauge text-green-400 mb-1 text-sm"></i>
96
+ <div class="text-xl font-bold text-white font-mono" id="current-pressure">1010</div>
97
+ <div class="text-[10px] text-gray-500 uppercase">hPa</div>
98
+ </div>
99
+ <div class="bg-darker/50 rounded-xl p-3 text-center border border-white/5">
100
+ <i class="fas fa-sun text-secondary mb-1 text-sm"></i>
101
+ <div class="text-xl font-bold text-white font-mono" id="current-uvi">9</div>
102
+ <div class="text-[10px] text-gray-500 uppercase">UV Index</div>
103
+ </div>
104
+ </div>
105
+ </div>
106
+ </div>
107
+
108
+ <!-- AI Assistant -->
109
+ <div class="bg-surface border border-secondary/20 rounded-2xl p-6 flex flex-col">
110
+ <div class="flex items-center justify-between mb-4">
111
+ <h3 class="text-sm text-secondary uppercase tracking-wider font-bold flex items-center gap-2">
112
+ <i class="fas fa-robot"></i> AI Weather Assistant
113
+ </h3>
114
+ <span class="text-[10px] bg-secondary/20 text-secondary px-2 py-1 rounded-full">One Call 3.0</span>
115
+ </div>
116
+
117
+ <div class="flex-1 bg-darker/50 rounded-xl p-4 mb-4 overflow-y-auto max-h-48 space-y-3 border border-white/5" id="chat-messages">
118
+ <div class="flex gap-3">
119
+ <div class="w-8 h-8 rounded-full bg-secondary/20 flex items-center justify-center flex-shrink-0">
120
+ <i class="fas fa-robot text-secondary text-xs"></i>
121
+ </div>
122
+ <div class="bg-surface rounded-lg rounded-tl-none p-3 text-sm text-gray-300 border border-white/5">
123
+ </body>
124
+ </html>
index.html CHANGED
@@ -1,19 +1,220 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AfriWeather Pulse | Fullscreen Radar</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
11
+ <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
12
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
13
+ <script>
14
+ tailwind.config = {
15
+ theme: {
16
+ extend: {
17
+ colors: {
18
+ primary: '#8b5cf6', // violet-500
19
+ secondary: '#eab308', // yellow-500
20
+ dark: '#0f172a', // slate-900
21
+ darker: '#020617', // slate-950
22
+ surface: '#1e293b', // slate-800
23
+ }
24
+ }
25
+ }
26
+ }
27
+ </script>
28
+ </head>
29
+ <body class="bg-dark text-white overflow-hidden">
30
+
31
+ <!-- Fullscreen Map Container -->
32
+ <div id="map" class="absolute inset-0 z-0"></div>
33
+
34
+ <!-- UI Overlay Layer -->
35
+ <div class="absolute inset-0 z-10 pointer-events-none">
36
+
37
+ <!-- Top Left: Brand -->
38
+ <div class="absolute top-6 left-6 pointer-events-auto">
39
+ <div class="bg-surface/90 backdrop-blur-md border border-primary/30 rounded-2xl p-4 shadow-2xl shadow-primary/10">
40
+ <div class="flex items-center gap-3">
41
+ <div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-purple-700 flex items-center justify-center shadow-lg shadow-primary/30">
42
+ <i class="fas fa-satellite-dish text-white text-lg"></i>
43
+ </div>
44
+ <div>
45
+ <h1 class="text-xl font-bold tracking-tight text-white">AfriWeather <span class="text-primary">Pulse</span></h1>
46
+ <div class="flex items-center gap-2 text-[10px] text-secondary uppercase tracking-wider font-bold">
47
+ <span class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
48
+ Live Monitoring
49
+ </div>
50
+ </div>
51
+ </div>
52
+ </div>
53
+ </div>
54
+
55
+ <!-- Top Right: Clock & API -->
56
+ <div class="absolute top-6 right-6 pointer-events-auto flex gap-3">
57
+ <div class="bg-surface/90 backdrop-blur-md border border-white/10 rounded-xl px-4 py-2 text-right">
58
+ <div class="text-xs text-gray-400 font-mono" id="utc-clock">00:00:00 UTC</div>
59
+ <div class="text-[10px] text-secondary font-bold mt-1">RADAR ACTIVE</div>
60
+ </div>
61
+ <button onclick="window.location.href='dashboard.html'" class="bg-secondary/20 hover:bg-secondary/30 border border-secondary/50 text-secondary rounded-xl px-4 py-2 transition-all flex items-center gap-2 group">
62
+ <i class="fas fa-chart-line group-hover:scale-110 transition-transform"></i>
63
+ <span class="text-sm font-bold hidden sm:inline">Analytics</span>
64
+ </button>
65
+ </div>
66
+
67
+ <!-- Left Side: Layer Controls -->
68
+ <div class="absolute left-6 top-1/2 -translate-y-1/2 pointer-events-auto flex flex-col gap-2">
69
+ <button onclick="toggleLayer('radar')" id="layer-radar" class="layer-btn group relative w-14 h-14 bg-surface/90 backdrop-blur-md border-l-4 border-transparent hover:border-primary rounded-r-xl flex items-center justify-center text-gray-400 hover:text-primary transition-all">
70
+ <i class="fas fa-broadcast-tower text-xl"></i>
71
+ <span class="absolute left-full ml-4 bg-surface px-3 py-1 rounded text-xs text-white opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap border border-white/10">Precipitation Radar</span>
72
+ </button>
73
+
74
+ <button onclick="toggleLayer('flood')" id="layer-flood" class="layer-btn group relative w-14 h-14 bg-surface/90 backdrop-blur-md border-l-4 border-transparent hover:border-blue-500 rounded-r-xl flex items-center justify-center text-gray-400 hover:text-blue-400 transition-all">
75
+ <i class="fas fa-water text-xl"></i>
76
+ <span class="absolute left-full ml-4 bg-surface px-3 py-1 rounded text-xs text-white opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap border border-white/10">Flood Zones</span>
77
+ </button>
78
+
79
+ <button onclick="toggleLayer('cyclone')" id="layer-cyclone" class="layer-btn group relative w-14 h-14 bg-surface/90 backdrop-blur-md border-l-4 border-transparent hover:border-red-500 rounded-r-xl flex items-center justify-center text-gray-400 hover:text-red-400 transition-all">
80
+ <i class="fas fa-hurricane text-xl"></i>
81
+ <span class="absolute left-full ml-4 bg-surface px-3 py-1 rounded text-xs text-white opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap border border-white/10">Cyclone Tracks</span>
82
+ </button>
83
+
84
+ <button onclick="toggleLayer('drought')" id="layer-drought" class="layer-btn group relative w-14 h-14 bg-surface/90 backdrop-blur-md border-l-4 border-transparent hover:border-secondary rounded-r-xl flex items-center justify-center text-gray-400 hover:text-secondary transition-all">
85
+ <i class="fas fa-sun text-xl"></i>
86
+ <span class="absolute left-full ml-4 bg-surface px-3 py-1 rounded text-xs text-white opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap border border-white/10">Drought Monitor</span>
87
+ </button>
88
+
89
+ <div class="h-px w-8 bg-white/20 mx-auto my-1"></div>
90
+
91
+ <button onclick="resetMap()" class="group relative w-14 h-14 bg-surface/90 backdrop-blur-md border-l-4 border-transparent hover:border-gray-400 rounded-r-xl flex items-center justify-center text-gray-400 hover:text-white transition-all">
92
+ <i class="fas fa-compress-arrows-alt text-xl"></i>
93
+ <span class="absolute left-full ml-4 bg-surface px-3 py-1 rounded text-xs text-white opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap border border-white/10">Reset View</span>
94
+ </button>
95
+ </div>
96
+
97
+ <!-- Bottom: Radar Timeline (Hidden by default) -->
98
+ <div id="radar-controls" class="absolute bottom-8 left-1/2 -translate-x-1/2 pointer-events-auto w-full max-w-3xl px-6 hidden">
99
+ <div class="bg-surface/95 backdrop-blur-xl border border-primary/30 rounded-2xl p-4 shadow-2xl">
100
+ <div class="flex items-center gap-4 mb-3">
101
+ <button onclick="toggleRadarPlay()" id="play-btn" class="w-12 h-12 rounded-full bg-primary hover:bg-primary/80 text-white flex items-center justify-center transition-all shadow-lg shadow-primary/30">
102
+ <i class="fas fa-play ml-1"></i>
103
+ </button>
104
+
105
+ <div class="flex-1">
106
+ <div class="flex justify-between items-end mb-2">
107
+ <span class="text-xs text-primary font-bold tracking-wider">GLOBAL PRECIPITATION RADAR</span>
108
+ <span class="text-xl font-mono font-bold text-white" id="radar-timestamp">12:00 UTC</span>
109
+ </div>
110
+ <input type="range" id="time-slider" min="0" max="36" value="18" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-primary" oninput="updateRadarTime(this.value)">
111
+ <div class="flex justify-between text-[10px] text-gray-500 mt-1 font-mono">
112
+ <span>-2h00</span>
113
+ <span>Past</span>
114
+ <span class="text-primary">Now</span>
115
+ <span>Future</span>
116
+ <span>+2h00</span>
117
+ </div>
118
+ </div>
119
+
120
+ <div class="flex flex-col gap-2">
121
+ <button onclick="setRadarMode('past')" id="btn-past" class="px-3 py-1.5 rounded-lg text-xs font-bold bg-gray-700 text-gray-300 hover:bg-gray-600 transition-colors">PAST</button>
122
+ <button onclick="setRadarMode('future')" id="btn-future" class="px-3 py-1.5 rounded-lg text-xs font-bold bg-primary text-white shadow-lg shadow-primary/20">FUTURE</button>
123
+ </div>
124
+ </div>
125
+
126
+ <div class="flex items-center justify-between text-[10px] text-gray-400">
127
+ <div class="flex items-center gap-4">
128
+ <div class="flex items-center gap-1"><div class="w-3 h-3 rounded bg-blue-500/30"></div> Light</div>
129
+ <div class="flex items-center gap-1"><div class="w-3 h-3 rounded bg-blue-500"></div> Moderate</div>
130
+ <div class="flex items-center gap-1"><div class="w-3 h-3 rounded bg-purple-500"></div> Heavy</div>
131
+ <div class="flex items-center gap-1"><div class="w-3 h-3 rounded bg-pink-500"></div> Extreme</div>
132
+ </div>
133
+ <div class="text-secondary font-bold">10-min intervals • 1km resolution</div>
134
+ </div>
135
+ </div>
136
+ </div>
137
+
138
+ <!-- Bottom Left: Quick Stats -->
139
+ <div class="absolute bottom-8 left-6 pointer-events-auto">
140
+ <div class="bg-surface/90 backdrop-blur-md border border-white/10 rounded-xl p-4 flex gap-6">
141
+ <div>
142
+ <div class="text-[10px] text-gray-400 uppercase tracking-wider mb-1">Active Alerts</div>
143
+ <div class="text-2xl font-bold text-red-400 font-mono">03</div>
144
+ </div>
145
+ <div class="w-px bg-white/10"></div>
146
+ <div>
147
+ <div class="text-[10px] text-gray-400 uppercase tracking-wider mb-1">Stations</div>
148
+ <div class="text-2xl font-bold text-primary font-mono">147</div>
149
+ </div>
150
+ <div class="w-px bg-white/10"></div>
151
+ <div>
152
+ <div class="text-[10px] text-gray-400 uppercase tracking-wider mb-1">Coverage</div>
153
+ <div class="text-2xl font-bold text-green-400 font-mono">100%</div>
154
+ </div>
155
+ </div>
156
+ </div>
157
+
158
+ <!-- API Config Modal Trigger -->
159
+ <div class="absolute top-6 right-40 pointer-events-auto">
160
+ <button onclick="toggleApiModal()" class="bg-surface/90 backdrop-blur-md border border-white/10 hover:border-primary/50 text-gray-400 hover:text-primary rounded-xl w-10 h-10 flex items-center justify-center transition-all">
161
+ <i class="fas fa-cog"></i>
162
+ </button>
163
+ </div>
164
+ </div>
165
+
166
+ <!-- API Configuration Modal -->
167
+ <div id="api-modal" class="fixed inset-0 z-50 hidden bg-black/80 backdrop-blur-sm flex items-center justify-center p-4">
168
+ <div class="bg-surface border border-primary/30 rounded-2xl max-w-md w-full p-6 shadow-2xl shadow-primary/10">
169
+ <div class="flex justify-between items-center mb-6">
170
+ <h3 class="text-xl font-bold text-white">API Configuration</h3>
171
+ <button onclick="toggleApiModal()" class="text-gray-400 hover:text-white"><i class="fas fa-times"></i></button>
172
+ </div>
173
+
174
+ <div class="space-y-4">
175
+ <div>
176
+ <label class="text-xs text-gray-400 uppercase tracking-wider block mb-2">One Call API 3.0 Key</label>
177
+ <input type="password" id="api-key" class="w-full bg-darker border border-gray-700 rounded-lg px-4 py-3 text-white focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary transition-all" placeholder="Enter your API key">
178
+ <p class="text-[10px] text-gray-500 mt-1">Required for live data & AI features</p>
179
+ </div>
180
+
181
+ <div class="grid grid-cols-2 gap-3">
182
+ <div>
183
+ <label class="text-xs text-gray-400 uppercase tracking-wider block mb-2">Latitude</label>
184
+ <input type="number" id="api-lat" value="6.5244" step="0.0001" class="w-full bg-darker border border-gray-700 rounded-lg px-3 py-2 text-white focus:border-primary focus:outline-none">
185
+ </div>
186
+ <div>
187
+ <label class="text-xs text-gray-400 uppercase tracking-wider block mb-2">Longitude</label>
188
+ <input type="number" id="api-lon" value="3.3792" step="0.0001" class="w-full bg-darker border border-gray-700 rounded-lg px-3 py-2 text-white focus:border-primary focus:outline-none">
189
+ </div>
190
+ </div>
191
+
192
+ <div class="p-3 rounded-lg bg-primary/10 border border-primary/30">
193
+ <div class="flex items-start gap-3">
194
+ <i class="fas fa-info-circle text-primary mt-0.5"></i>
195
+ <div class="text-xs text-gray-300">
196
+ <p class="mb-1"><strong class="text-primary">Free Tier:</strong> 1,000 calls/day</p>
197
+ <p>Includes: Current, Forecast, Historical (1979+), AI Assistant</p>
198
+ </div>
199
+ </div>
200
+ </div>
201
+
202
+ <button onclick="connectApi()" class="w-full bg-primary hover:bg-primary/90 text-white font-bold py-3 rounded-lg transition-all shadow-lg shadow-primary/20 flex items-center justify-center gap-2">
203
+ <i class="fas fa-plug"></i> Connect APIs
204
+ </button>
205
+ </div>
206
+ </div>
207
+ </div>
208
+
209
+ <script src="script.js"></script>
210
+ <script>
211
+ // Initialize map when page loads
212
+ document.addEventListener('DOMContentLoaded', () => {
213
+ initMap();
214
+ updateClock();
215
+ setInterval(updateClock, 1000);
216
+ });
217
+ </script>
218
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
219
+ </body>
220
+ </html>