Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>WeatherSphere - Interactive Weather Dashboard</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .floating { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| .weather-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .sun { | |
| background: radial-gradient(circle, #f6e05e 30%, transparent 70%); | |
| box-shadow: 0 0 60px #f6e05e; | |
| } | |
| .rain-drop { | |
| position: absolute; | |
| width: 2px; | |
| height: 10px; | |
| background: linear-gradient(to bottom, transparent, #93c5fd); | |
| border-radius: 0 0 50% 50%; | |
| } | |
| .cloud { | |
| position: relative; | |
| width: 100px; | |
| height: 40px; | |
| background: #e5e7eb; | |
| border-radius: 50px; | |
| } | |
| .cloud:before, .cloud:after { | |
| content: ''; | |
| position: absolute; | |
| background: #e5e7eb; | |
| border-radius: 50%; | |
| } | |
| .cloud:before { | |
| width: 50px; | |
| height: 50px; | |
| top: -25px; | |
| left: 10px; | |
| } | |
| .cloud:after { | |
| width: 30px; | |
| height: 30px; | |
| top: -15px; | |
| right: 15px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen font-sans"> | |
| <div class="container mx-auto px-4 py-8"> | |
| </html> |