Hugging Face's logo

Spaces:
rajkhanke
/
CloudBurst_prediction
Sleeping

App Files Community
1
rajkhanke commited on
Commit
1b89f01
·
verified ·
1 Parent(s): df54699

Delete templates/index2.html

Browse files
Files changed (1) hide show
  1. templates/index2.html +0 -219
templates/index2.html DELETED
@@ -1,219 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1">
6
- <title>Cloudburst Prediction System</title>
7
- <!-- Tailwind CSS -->
8
- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
9
- <!-- Leaflet CSS -->
10
- <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
11
- <!-- Font Awesome -->
12
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
13
- <style>
14
- /* Custom Animations and Styles */
15
- body {
16
- background: linear-gradient(135deg, #e6f2ff 0%, #ffffff 100%);
17
- }
18
- .card-glow {
19
- transition: all 0.3s ease;
20
- box-shadow: 0 4px 6px rgba(0,0,0,0.1);
21
- }
22
- .card-glow:hover {
23
- transform: translateY(-10px);
24
- box-shadow: 0 15px 25px rgba(0,0,0,0.15);
25
- }
26
- .shine-effect {
27
- position: relative;
28
- overflow: hidden;
29
- }
30
- .shine-effect::before {
31
- content: '';
32
- position: absolute;
33
- top: 0;
34
- left: -100%;
35
- width: 100%;
36
- height: 100%;
37
- background: linear-gradient(120deg, transparent, rgba(255,255,255,0.3), transparent);
38
- transition: all 0.6s;
39
- }
40
- .shine-effect:hover::before {
41
- left: 100%;
42
- }
43
- #map {
44
- height: 400px;
45
- width: 100%;
46
- border-radius: 12px;
47
- box-shadow: 0 10px 25px rgba(0,0,0,0.1);
48
- }
49
- .animate-float {
50
- animation: float 3s ease-in-out infinite;
51
- }
52
- @keyframes float {
53
- 0%, 100% { transform: translateY(0); }
54
- 50% { transform: translateY(-10px); }
55
- }
56
- .cloud-bg {
57
- background: linear-gradient(135deg, #87CEEB 0%, #B0E0E6 100%);
58
- }
59
- </style>
60
- </head>
61
- <body class="font-sans antialiased">
62
- <!-- Header with Animated Elements -->
63
- <header class="cloud-bg py-6 shadow-lg relative overflow-hidden">
64
- <div class="absolute left-4 top-4 animate-float">
65
- <i class="fas fa-cloud text-white text-5xl opacity-80"></i>
66
- </div>
67
- <div class="container mx-auto text-center relative z-10">
68
- <h1 class="text-5xl font-extrabold text-white drop-shadow-lg mb-2 animate-pulse">
69
- Cloudburst Prediction System
70
- </h1>
71
- <p class="text-white text-lg opacity-80 animate-bounce">
72
- Advanced Weather Forecasting Technology
73
- </p>
74
- </div>
75
- </header>
76
-
77
- <!-- Main Content Container -->
78
- <div class="container mx-auto px-4 py-8">
79
- <!-- Input and Map Section -->
80
- <div class="grid md:grid-cols-2 gap-8">
81
- <!-- Map Section -->
82
- <div class="bg-white rounded-2xl p-6 shadow-xl card-glow shine-effect">
83
- <div class="mb-4">
84
- <input type="text" id="searchInput" placeholder="Search location"
85
- class="w-full border-2 border-blue-200 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all">
86
- <button id="searchBtn" class="mt-3 w-full bg-blue-500 text-white py-3 rounded-lg hover:bg-blue-600 transition-all">
87
- <i class="fas fa-search mr-2"></i>Search Location
88
- </button>
89
- </div>
90
- <div id="map" class="rounded-xl"></div>
91
- </div>
92
-
93
- <!-- Coordinates Input Section -->
94
- <div class="bg-white rounded-2xl p-6 shadow-xl card-glow shine-effect">
95
- <form action="/forecast" method="get" class="space-y-4">
96
- <div>
97
- <label class="block text-gray-700 font-semibold mb-2">
98
- <i class="fas fa-map-marker-alt mr-2"></i>Latitude
99
- </label>
100
- <input type="text" id="lat" name="lat" required
101
- class="w-full border-2 border-blue-200 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500">
102
- </div>
103
- <div>
104
- <label class="block text-gray-700 font-semibold mb-2">
105
- <i class="fas fa-map-marker-alt mr-2"></i>Longitude
106
- </label>
107
- <input type="text" id="lon" name="lon" required
108
- class="w-full border-2 border-blue-200 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500">
109
- </div>
110
- <button type="submit" class="w-full bg-green-500 text-white py-3 rounded-lg hover:bg-green-600 transition-all">
111
- <i class="fas fa-paper-plane mr-2"></i>Get Forecast
112
- </button>
113
- </form>
114
- </div>
115
- </div>
116
-
117
- <!-- Forecast Results (Conditionally Rendered) -->
118
- {% if result %}
119
- <div class="mt-8 space-y-8">
120
- <!-- Weather Parameters Grid -->
121
- <div class="bg-white rounded-2xl p-6 shadow-xl card-glow">
122
- <h2 class="text-3xl font-bold text-center mb-6 text-blue-600">
123
- Weather Parameters
124
- </h2>
125
- <div class="grid md:grid-cols-3 gap-6">
126
- {% for key, value in result.items() %}
127
- {% if key not in ['Predicted Cloudburst (%)', 'Predicted Cloudburst'] %}
128
- <div class="bg-blue-50 border border-blue-100 rounded-xl p-4 transform transition hover:scale-105 hover:shadow-lg">
129
- <h3 class="text-lg font-semibold text-blue-700 mb-2">{{ key }}</h3>
130
- <p class="text-gray-700 font-medium">{{ value }}</p>
131
- </div>
132
- {% endif %}
133
- {% endfor %}
134
- </div>
135
- </div>
136
-
137
- <!-- Prediction Visualization (Left/Right Layout) -->
138
- <div class="bg-white rounded-2xl p-6 shadow-xl">
139
- <div class="grid md:grid-cols-2 gap-8 items-center">
140
- <!-- Left: Cloudburst Probability -->
141
- <div class="text-center">
142
- <h2 class="text-2xl font-semibold text-gray-700 mb-4">
143
- Cloudburst Probability
144
- </h2>
145
- <div class="text-6xl font-bold text-blue-600">
146
- {{ result["Predicted Cloudburst (%)"] }}%
147
- </div>
148
- </div>
149
-
150
- <!-- Right: Cloudburst Prediction Status -->
151
- <div class="text-center">
152
- <h2 class="text-2xl font-semibold text-gray-700 mb-4">
153
- Cloudburst Prediction Status
154
- </h2>
155
- {% if result['Predicted Cloudburst'] == "Yes" %}
156
- <div class="text-6xl font-bold text-red-600">
157
- YES
158
- </div>
159
- {% else %}
160
- <div class="text-6xl font-bold text-green-600">
161
- NO
162
- </div>
163
- {% endif %}
164
- </div>
165
- </div>
166
- </div>
167
- </div>
168
- {% endif %}
169
- </div>
170
-
171
- <!-- Scripts -->
172
- <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
173
- <script>
174
- // Leaflet Map Initialization
175
- var map = L.map('map').setView([20.5937, 78.9629], 5);
176
- L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
177
- attribution: '&copy; OpenStreetMap contributors'
178
- }).addTo(map);
179
-
180
- var marker;
181
-
182
- // Map Click Event
183
- map.on('click', function(e) {
184
- var lat = e.latlng.lat.toFixed(6);
185
- var lon = e.latlng.lng.toFixed(6);
186
- document.getElementById('lat').value = lat;
187
- document.getElementById('lon').value = lon;
188
- if (marker) {
189
- marker.setLatLng(e.latlng);
190
- } else {
191
- marker = L.marker(e.latlng).addTo(map);
192
- }
193
- });
194
-
195
- // Search Functionality
196
- document.getElementById("searchBtn").addEventListener("click", function() {
197
- var address = document.getElementById("searchInput").value;
198
- if(address) {
199
- fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${address}`)
200
- .then(response => response.json())
201
- .then(data => {
202
- if(data && data.length > 0) {
203
- var lat = data[0].lat;
204
- var lon = data[0].lon;
205
- map.setView([lat, lon], 13);
206
- if(marker) {
207
- marker.setLatLng([lat, lon]);
208
- } else {
209
- marker = L.marker([lat, lon]).addTo(map);
210
- }
211
- document.getElementById('lat').value = parseFloat(lat).toFixed(6);
212
- document.getElementById('lon').value = parseFloat(lon).toFixed(6);
213
- }
214
- });
215
- }
216
- });
217
- </script>
218
- </body>
219
- </html>