|
|
<!DOCTYPE html> |
|
|
<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> |
