Skip to content

Commit aaea543

Browse files
author
“Ahaanv19”
committed
Updates
1 parent b427fd9 commit aaea543

3 files changed

Lines changed: 1448 additions & 46 deletions

File tree

‎_layouts/base.html‎

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,10 @@
113113
'0%': { backgroundPosition: '-200% 0' },
114114
'100%': { backgroundPosition: '200% 0' },
115115
},
116+
'skeleton-loading': {
117+
'0%': { backgroundPosition: '200% 0' },
118+
'100%': { backgroundPosition: '-200% 0' },
119+
},
116120
},
117121
},
118122
},
@@ -125,6 +129,10 @@
125129
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
126130
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
127131
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
132+
<!-- Chart.js for Analytics -->
133+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
134+
<!-- QR Code Library -->
135+
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
128136

129137
<!-- Custom Styles -->
130138
<style>
@@ -159,6 +167,83 @@
159167
border-color: #1e293b;
160168
}
161169

170+
/* ===== SKELETON LOADING STYLES ===== */
171+
.skeleton {
172+
background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 50%, #e2e8f0 100%);
173+
background-size: 200% 100%;
174+
animation: skeleton-loading 1.5s ease-in-out infinite;
175+
border-radius: 8px;
176+
}
177+
178+
.dark .skeleton {
179+
background: linear-gradient(90deg, #334155 0%, #475569 50%, #334155 100%);
180+
background-size: 200% 100%;
181+
}
182+
183+
@keyframes skeleton-loading {
184+
0% { background-position: 200% 0; }
185+
100% { background-position: -200% 0; }
186+
}
187+
188+
.skeleton-text {
189+
height: 1rem;
190+
margin-bottom: 0.5rem;
191+
}
192+
193+
.skeleton-text-sm {
194+
height: 0.75rem;
195+
margin-bottom: 0.375rem;
196+
}
197+
198+
.skeleton-text-lg {
199+
height: 1.5rem;
200+
margin-bottom: 0.75rem;
201+
}
202+
203+
.skeleton-title {
204+
height: 2rem;
205+
width: 60%;
206+
margin-bottom: 1rem;
207+
}
208+
209+
.skeleton-avatar {
210+
width: 48px;
211+
height: 48px;
212+
border-radius: 50%;
213+
}
214+
215+
.skeleton-card {
216+
padding: 1.5rem;
217+
background: white;
218+
border-radius: 1rem;
219+
box-shadow: 0 2px 15px -3px rgba(0, 0, 0, 0.07);
220+
}
221+
222+
.dark .skeleton-card {
223+
background: #1e293b;
224+
}
225+
226+
.skeleton-map {
227+
height: 400px;
228+
border-radius: 1.5rem;
229+
}
230+
231+
.skeleton-button {
232+
height: 48px;
233+
width: 140px;
234+
border-radius: 12px;
235+
}
236+
237+
.skeleton-input {
238+
height: 52px;
239+
border-radius: 12px;
240+
}
241+
242+
.skeleton-chart {
243+
height: 300px;
244+
border-radius: 1rem;
245+
}
246+
162247
/* Glass morphism effect */
163248
.glass {
164249
background: rgba(255, 255, 255, 0.7);
@@ -246,6 +331,125 @@
246331
animation: fadeIn 0.5s ease-out;
247332
}
248333

334+
/* ===== WEATHER WIDGET STYLES ===== */
335+
.weather-widget {
336+
background: linear-gradient(135deg, #0066cc 0%, #0891b2 100%);
337+
border-radius: 1rem;
338+
padding: 1rem 1.25rem;
339+
color: white;
340+
display: flex;
341+
align-items: center;
342+
gap: 1rem;
343+
box-shadow: 0 4px 15px rgba(0, 102, 204, 0.3);
344+
}
345+
346+
.weather-icon {
347+
font-size: 2rem;
348+
}
349+
350+
.weather-temp {
351+
font-size: 1.5rem;
352+
font-weight: 700;
353+
}
354+
355+
.weather-condition {
356+
font-size: 0.875rem;
357+
opacity: 0.9;
358+
}
359+
360+
.weather-advisory {
361+
background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
362+
border-left: 4px solid #f59e0b;
363+
border-radius: 0.75rem;
364+
padding: 1rem;
365+
margin-top: 0.75rem;
366+
}
367+
368+
/* ===== SHARE MODAL STYLES ===== */
369+
.share-modal-backdrop {
370+
position: fixed;
371+
inset: 0;
372+
background: rgba(15, 23, 42, 0.6);
373+
backdrop-filter: blur(8px);
374+
z-index: 1000;
375+
display: flex;
376+
align-items: center;
377+
justify-content: center;
378+
padding: 1rem;
379+
}
380+
381+
.share-modal {
382+
background: white;
383+
border-radius: 1.5rem;
384+
padding: 2rem;
385+
max-width: 420px;
386+
width: 100%;
387+
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
388+
animation: scaleIn 0.3s ease;
389+
}
390+
391+
.dark .share-modal {
392+
background: #1e293b;
393+
}
394+
395+
@keyframes scaleIn {
396+
from { opacity: 0; transform: scale(0.95); }
397+
to { opacity: 1; transform: scale(1); }
398+
}
399+
400+
.share-option {
401+
display: flex;
402+
align-items: center;
403+
gap: 1rem;
404+
padding: 1rem;
405+
border-radius: 1rem;
406+
cursor: pointer;
407+
transition: all 0.2s ease;
408+
border: 2px solid transparent;
409+
}
410+
411+
.share-option:hover {
412+
background: #f1f5f9;
413+
border-color: #e2e8f0;
414+
}
415+
416+
.dark .share-option:hover {
417+
background: #334155;
418+
border-color: #475569;
419+
}
420+
421+
.share-option-icon {
422+
width: 48px;
423+
height: 48px;
424+
border-radius: 12px;
425+
display: flex;
426+
align-items: center;
427+
justify-content: center;
428+
font-size: 1.25rem;
429+
}
430+
431+
.qr-code-container {
432+
background: white;
433+
padding: 1rem;
434+
border-radius: 1rem;
435+
display: inline-block;
436+
}
437+
438+
.copy-success {
439+
position: fixed;
440+
bottom: 2rem;
441+
left: 50%;
442+
transform: translateX(-50%);
443+
background: #10b981;
444+
color: white;
445+
padding: 1rem 2rem;
446+
border-radius: 1rem;
447+
font-weight: 600;
448+
box-shadow: 0 10px 25px rgba(16, 185, 129, 0.3);
449+
animation: slideUp 0.3s ease;
450+
z-index: 1001;
451+
}
452+
249453
/* Focus styles for accessibility */
250454
*:focus-visible {
251455
outline: 2px solid #0066cc;

0 commit comments

Comments
 (0)