Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Weather Forecast</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background: linear-gradient(180deg, #4A90E2 0%, #87CEEB 100%); | |
| height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| .weather-card { | |
| background: rgba(255, 255, 255, 0.2); | |
| backdrop-filter: blur(10px); | |
| border-radius: 20px; | |
| box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2); | |
| } | |
| .scroll-container { | |
| scrollbar-width: none; | |
| } | |
| .scroll-container::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .temperature-gradient { | |
| background: linear-gradient(90deg, #FF9A9E 0%, #FAD0C4 100%); | |
| } | |
| .uv-gradient { | |
| background: linear-gradient(90deg, #FFD700 0%, #FFA500 100%); | |
| } | |
| .wind-gradient { | |
| background: linear-gradient(90deg, #A1C4FD 0%, #C2E9FB 100%); | |
| } | |
| .humidity-gradient { | |
| background: linear-gradient(90deg, #84FAB0 0%, #8FD3F4 100%); | |
| } | |
| .tab-active { | |
| border-bottom: 3px solid white; | |
| font-weight: 600; | |
| } | |
| .clothing-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .clothing-icon:hover { | |
| transform: scale(1.1); | |
| } | |
| .day-card { | |
| transition: all 0.3s ease; | |
| } | |
| .day-card:hover { | |
| transform: translateY(-5px); | |
| background: rgba(255, 255, 255, 0.3); | |
| } | |
| .active-day { | |
| background: rgba(255, 255, 255, 0.4); | |
| border: 1px solid white; | |
| } | |
| </style> | |
| </head> | |
| <body class="text-white relative max-w-md mx-auto" style="width: 390px; height: 844px;"> | |
| <!-- Main Container --> | |
| <div class="h-full overflow-hidden relative"> | |
| <!-- Header --> | |
| <header class="pt-12 px-6"> | |
| <div class="flex justify-between items-center"> | |
| <button class="p-2 rounded-full bg-white bg-opacity-20"> | |
| <i class="fas fa-search text-lg"></i> | |
| </button> | |
| <div class="text-center"> | |
| <h1 class="text-2xl font-semibold">New York</h1> | |
| <p class="text-sm opacity-80">Partly Cloudy</p> | |
| </div> | |
| <button class="p-2 rounded-full bg-white bg-opacity-20"> | |
| <i class="fas fa-cog text-lg"></i> | |
| </button> | |
| </div> | |
| <div class="mt-6 flex justify-center items-end"> | |
| <span class="text-7xl font-light">24</span> | |
| <span class="text-4xl mb-2">°C</span> | |
| </div> | |
| <div class="flex justify-between mt-2 text-sm"> | |
| <span>H: 28° L: 18°</span> | |
| <span>Feels like 26°</span> | |
| </div> | |
| </header> | |
| <!-- Tabs --> | |
| <div class="flex justify-around mt-6 border-b border-white border-opacity-20 px-6"> | |
| <button class="pb-2 px-4 tab-active">Today</button> | |
| <button class="pb-2 px-4">15 Days</button> | |
| <button class="pb-2 px-4">Hourly</button> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="mt-4 px-6 h-full overflow-y-auto scroll-container pb-24"> | |
| <!-- Hourly Forecast --> | |
| <div class="weather-card p-4 mb-4"> | |
| <h3 class="font-medium mb-3">Hourly Forecast</h3> | |
| <div class="flex overflow-x-auto space-x-4 pb-2 scroll-container"> | |
| <div class="flex flex-col items-center min-w-max"> | |
| <span class="text-sm">Now</span> | |
| <i class="fas fa-cloud text-2xl my-2"></i> | |
| <span class="font-medium">24°</span> | |
| </div> | |
| <div class="flex flex-col items-center min-w-max"> | |
| <span class="text-sm">1PM</span> | |
| <i class="fas fa-sun text-2xl my-2"></i> | |
| <span class="font-medium">26°</span> | |
| </div> | |
| <div class="flex flex-col items-center min-w-max"> | |
| <span class="text-sm">2PM</span> | |
| <i class="fas fa-sun text-2xl my-2"></i> | |
| <span class="font-medium">27°</span> | |
| </div> | |
| <div class="flex flex-col items-center min-w-max"> | |
| <span class="text-sm">3PM</span> | |
| <i class="fas fa-cloud-sun text-2xl my-2"></i> | |
| <span class="font-medium">28°</span> | |
| </div> | |
| <div class="flex flex-col items-center min-w-max"> | |
| <span class="text-sm">4PM</span> | |
| <i class="fas fa-cloud-sun text-2xl my-2"></i> | |
| <span class="font-medium">27°</span> | |
| </div> | |
| <div class="flex flex-col items-center min-w-max"> | |
| <span class="text-sm">5PM</span> | |
| <i class="fas fa-cloud text-2xl my-2"></i> | |
| <span class="font-medium">25°</span> | |
| </div> | |
| <div class="flex flex-col items-center min-w-max"> | |
| <span class="text-sm">6PM</span> | |
| <i class="fas fa-cloud-rain text-2xl my-2"></i> | |
| <span class="font-medium">23°</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Weather Details --> | |
| <div class="weather-card p-4 mb-4"> | |
| <h3 class="font-medium mb-3">Weather Details</h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="p-3 rounded-xl temperature-gradient"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-temperature-high mr-2"></i> | |
| <span>Temperature</span> | |
| </div> | |
| <div class="mt-2 text-xl font-medium">24°C</div> | |
| </div> | |
| <div class="p-3 rounded-xl uv-gradient"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-sun mr-2"></i> | |
| <span>UV Index</span> | |
| </div> | |
| <div class="mt-2 text-xl font-medium">5 Moderate</div> | |
| </div> | |
| <div class="p-3 rounded-xl wind-gradient"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-wind mr-2"></i> | |
| <span>Wind</span> | |
| </div> | |
| <div class="mt-2 text-xl font-medium">12 km/h</div> | |
| </div> | |
| <div class="p-3 rounded-xl humidity-gradient"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-tint mr-2"></i> | |
| <span>Humidity</span> | |
| </div> | |
| <div class="mt-2 text-xl font-medium">65%</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Clothing Recommendation --> | |
| <div class="weather-card p-4 mb-4"> | |
| <h3 class="font-medium mb-3">Clothing Recommendation</h3> | |
| <div class="flex justify-around text-center"> | |
| <div class="flex flex-col items-center clothing-icon"> | |
| <div class="w-12 h-12 bg-white bg-opacity-30 rounded-full flex items-center justify-center mb-1"> | |
| <i class="fas fa-tshirt text-xl"></i> | |
| </div> | |
| <span class="text-xs">T-Shirt</span> | |
| </div> | |
| <div class="flex flex-col items-center clothing-icon"> | |
| <div class="w-12 h-12 bg-white bg-opacity-30 rounded-full flex items-center justify-center mb-1"> | |
| <i class="fas fa-umbrella text-xl"></i> | |
| </div> | |
| <span class="text-xs">Umbrella</span> | |
| </div> | |
| <div class="flex flex-col items-center clothing-icon"> | |
| <div class="w-12 h-12 bg-white bg-opacity-30 rounded-full flex items-center justify-center mb-1"> | |
| <i class="fas fa-sunglasses text-xl"></i> | |
| </div> | |
| <span class="text-xs">Sunglasses</span> | |
| </div> | |
| <div class="flex flex-col items-center clothing-icon"> | |
| <div class="w-12 h-12 bg-white bg-opacity-30 rounded-full flex items-center justify-center mb-1"> | |
| <i class="fas fa-hat-cowboy text-xl"></i> | |
| </div> | |
| <span class="text-xs">Hat</span> | |
| </div> | |
| </div> | |
| <p class="mt-3 text-sm">Light clothing recommended. Bring an umbrella for possible evening showers.</p> | |
| </div> | |
| <!-- Travel Suggestions --> | |
| <div class="weather-card p-4 mb-4"> | |
| <h3 class="font-medium mb-3">Travel Suggestions</h3> | |
| <div class="flex items-start mb-3"> | |
| <div class="mr-3 p-2 bg-white bg-opacity-20 rounded-lg"> | |
| <i class="fas fa-bus text-lg"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Public Transport</h4> | |
| <p class="text-sm opacity-90">No weather-related delays expected today.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-3"> | |
| <div class="mr-3 p-2 bg-white bg-opacity-20 rounded-lg"> | |
| <i class="fas fa-car text-lg"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Driving</h4> | |
| <p class="text-sm opacity-90">Good conditions. Watch for wet roads after 6PM.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="mr-3 p-2 bg-white bg-opacity-20 rounded-lg"> | |
| <i class="fas fa-walking text-lg"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Walking</h4> | |
| <p class="text-sm opacity-90">Pleasant for walking until evening showers.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 15-Day Forecast --> | |
| <div class="weather-card p-4"> | |
| <h3 class="font-medium mb-3">15-Day Forecast</h3> | |
| <div class="space-y-3"> | |
| <!-- Day 1 (Active) --> | |
| <div class="day-card active-day p-3 rounded-lg flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <span class="w-20 font-medium">Today</span> | |
| <i class="fas fa-cloud-sun text-xl mx-4"></i> | |
| </div> | |
| <div class="flex"> | |
| <span class="font-medium mr-4">24°</span> | |
| <span class="opacity-70">18°</span> | |
| </div> | |
| </div> | |
| <!-- Day 2 --> | |
| <div class="day-card p-3 rounded-lg flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <span class="w-20">Tue</span> | |
| <i class="fas fa-sun text-xl mx-4"></i> | |
| </div> | |
| <div class="flex"> | |
| <span class="font-medium mr-4">26°</span> | |
| <span class="opacity-70">19°</span> | |
| </div> | |
| </div> | |
| <!-- Day 3 --> | |
| <div class="day-card p-3 rounded-lg flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <span class="w-20">Wed</span> | |
| <i class="fas fa-sun text-xl mx-4"></i> | |
| </div> | |
| <div class="flex"> | |
| <span class="font-medium mr-4">27°</span> | |
| <span class="opacity-70">20°</span> | |
| </div> | |
| </div> | |
| <!-- Day 4 --> | |
| <div class="day-card p-3 rounded-lg flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <span class="w-20">Thu</span> | |
| <i class="fas fa-cloud-rain text-xl mx-4"></i> | |
| </div> | |
| <div class="flex"> | |
| <span class="font-medium mr-4">22°</span> | |
| <span class="opacity-70">17°</span> | |
| </div> | |
| </div> | |
| <!-- Day 5 --> | |
| <div class="day-card p-3 rounded-lg flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <span class="w-20">Fri</span> | |
| <i class="fas fa-cloud-sun text-xl mx-4"></i> | |
| </div> | |
| <div class="flex"> | |
| <span class="font-medium mr-4">24°</span> | |
| <span class="opacity-70">18°</span> | |
| </div> | |
| </div> | |
| <!-- Day 6 --> | |
| <div class="day-card p-3 rounded-lg flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <span class="w-20">Sat</span> | |
| <i class="fas fa-sun text-xl mx-4"></i> | |
| </div> | |
| <div class="flex"> | |
| <span class="font-medium mr-4">28°</span> | |
| <span class="opacity-70">21°</span> | |
| </div> | |
| </div> | |
| <!-- Day 7 --> | |
| <div class="day-card p-3 rounded-lg flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <span class="w-20">Sun</span> | |
| <i class="fas fa-sun text-xl mx-4"></i> | |
| </div> | |
| <div class="flex"> | |
| <span class="font-medium mr-4">29°</span> | |
| <span class="opacity-70">22°</span> | |
| </div> | |
| </div> | |
| <!-- Additional days would continue here... --> | |
| </div> | |
| <button class="w-full mt-4 py-2 bg-white bg-opacity-20 rounded-lg font-medium"> | |
| View All 15 Days | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Bottom Navigation --> | |
| <nav class="absolute bottom-0 left-0 right-0 bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg flex justify-around py-3 px-6"> | |
| <button class="p-2 rounded-full"> | |
| <i class="fas fa-home text-xl"></i> | |
| </button> | |
| <button class="p-2 rounded-full"> | |
| <i class="fas fa-map-marked-alt text-xl"></i> | |
| </button> | |
| <button class="p-2 rounded-full bg-white bg-opacity-30"> | |
| <i class="fas fa-cloud-sun text-xl"></i> | |
| </button> | |
| <button class="p-2 rounded-full"> | |
| <i class="fas fa-bell text-xl"></i> | |
| </button> | |
| <button class="p-2 rounded-full"> | |
| <i class="fas fa-user text-xl"></i> | |
| </button> | |
| </nav> | |
| </div> | |
| <script> | |
| // Simple tab switching functionality | |
| const tabs = document.querySelectorAll('header + div button'); | |
| tabs.forEach(tab => { | |
| tab.addEventListener('click', () => { | |
| tabs.forEach(t => t.classList.remove('tab-active')); | |
| tab.classList.add('tab-active'); | |
| }); | |
| }); | |
| // Day selection functionality | |
| const dayCards = document.querySelectorAll('.day-card'); | |
| dayCards.forEach(card => { | |
| card.addEventListener('click', () => { | |
| dayCards.forEach(c => c.classList.remove('active-day')); | |
| card.classList.add('active-day'); | |
| // Here you would typically update the weather data for the selected day | |
| // For demo purposes, we'll just log to console | |
| console.log('Selected day:', card.querySelector('span').textContent); | |
| }); | |
| }); | |
| // Simulate loading data | |
| setTimeout(() => { | |
| console.log('Weather data loaded'); | |
| }, 1000); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=DreamMaker7/deep-weather" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> | |
| </html> |