A Code by Metehan

Open In Editor Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WeatherSphere</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">
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: {
                            light: '#3b82f6',
                            dark: '#1e40af'
                        },
                        secondary: {
                            light: '#f59e0b',
                            dark: '#b45309'
                        }
                    },
                    animation: {
                        'spin-slow': 'spin 3s linear infinite',
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                        'float': 'float 6s ease-in-out infinite',
                        'bounce-slow': 'bounce 2s infinite'
                    },
                    keyframes: {
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-10px)' },
                        }
                    }
                }
            }
        }
    </script>
    <style>
        @keyframes sunrays {
            0% { transform: rotate(0deg); opacity: 0.8; }
            50% { transform: rotate(180deg); opacity: 1; }
            100% { transform: rotate(360deg); opacity: 0.8; }
        }
        
        @keyframes raindrop {
            0% { transform: translateY(-10px); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(30px); opacity: 0; }
        }
        
        @keyframes cloudMove {
            0% { transform: translateX(0); }
            50% { transform: translateX(10px); }
            100% { transform: translateX(0); }
        }
        
        @keyframes lightning {
            0%, 100% { opacity: 0; }
            5%, 15%, 25%, 35%, 45% { opacity: 1; }
            10%, 20%, 30%, 40% { opacity: 0; }
        }
        
        .sun-rays {
            animation: sunrays 8s linear infinite;
        }
        
        .raindrop {
            animation: raindrop 1s linear infinite;
            animation-delay: calc(var(--delay) * 0.2s);
        }
        
        .cloud {
            animation: cloudMove 6s ease-in-out infinite;
        }
        
        .lightning {
            animation: lightning 4s linear infinite;
        }
        
        .neumorphism-light {
            box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #ffffff;
        }
        
        .neumorphism-dark {
            box-shadow: 8px 8px 16px #0f172a, -8px -8px 16px #1e293b;
        }
        
        .splash-screen {
            animation: fadeOut 1.5s ease-out 2s forwards;
        }
        
        @keyframes fadeOut {
            to {
                opacity: 0;
                visibility: hidden;
            }
        }
        
        .sky-gradient-day {
            background: linear-gradient(to bottom, #87CEEB, #E0F7FA);
        }
        
        .sky-gradient-night {
            background: linear-gradient(to bottom, #0F2027, #203A43, #2C5364);
        }
        
        .card-glass {
            backdrop-filter: blur(10px);
            background-color: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .card-glass-dark {
            backdrop-filter: blur(10px);
            background-color: rgba(15, 23, 42, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
    </style>
</head>
<body class="bg-gray-100 dark:bg-slate-900 transition-colors duration-300 min-h-screen">
    
    <div id="splash" class="splash-screen fixed inset-0 z-50 flex items-center justify-center sky-gradient-day dark:sky-gradient-night transition-colors duration-300">
        <div class="text-center">
            <div class="relative w-32 h-32 mx-auto mb-6">
                
                <div class="absolute inset-0 flex items-center justify-center">
                    <div class="w-24 h-24 rounded-full bg-yellow-400 dark:bg-yellow-300 shadow-lg flex items-center justify-center">
                        <div class="absolute w-full h-full rounded-full border-4 border-yellow-300 dark:border-yellow-200 opacity-30 sun-rays"></div>
                    </div>
                    <div class="cloud absolute -top-2 -right-4 w-16 h-8 bg-white dark:bg-gray-200 rounded-full"></div>
                    <div class="cloud absolute top-4 -left-4 w-12 h-6 bg-white dark:bg-gray-200 rounded-full"></div>
                </div>
            </div>
            <h1 class="text-3xl font-bold text-slate-800 dark:text-white">WeatherSphere</h1>
            <p class="text-slate-600 dark:text-slate-300 mt-2">Loading weather data...</p>
        </div>
    </div>

<div class="container mx-auto px-4 py-6 max-w-md">
        
        <header class="flex justify-between items-center mb-6">
            <button id="theme-toggle" class="p-2 rounded-full bg-white dark:bg-slate-800 shadow-md neumorphism-light dark:neumorphism-dark">
                <i class="fas fa-moon text-gray-700 dark:text-yellow-300"></i>
            </button>
            <div class="flex items-center space-x-2">
                <button class="p-2 rounded-full bg-white dark:bg-slate-800 shadow-md neumorphism-light dark:neumorphism-dark">
                    <i class="fas fa-map-marker-alt text-blue-500"></i>
                </button>
                <button class="p-2 rounded-full bg-white dark:bg-slate-800 shadow-md neumorphism-light dark:neumorphism-dark">
                    <i class="fas fa-bell text-blue-500"></i>
                </button>
            </div>
        </header>

<div class="card-glass dark:card-glass-dark rounded-3xl p-6 mb-6 relative overflow-hidden">
            <div class="absolute -top-20 -right-20 w-40 h-40 bg-blue-200 dark:bg-blue-900 rounded-full opacity-20"></div>
            <div class="absolute -bottom-20 -left-20 w-40 h-40 bg-purple-200 dark:bg-purple-900 rounded-full opacity-20"></div>
            
            <div class="relative z-10">
                <div class="flex justify-between items-start mb-4">
                    <div>
                        <h2 class="text-2xl font-bold text-slate-800 dark:text-white">San Francisco</h2>
                        <p class="text-slate-600 dark:text-slate-300">Partly Cloudy</p>
                    </div>
                    <div class="text-right">
                        <p class="text-sm text-slate-600 dark:text-slate-300">Updated: 10:30 AM</p>
                        <button class="mt-1 text-blue-500 dark:text-blue-400 text-sm flex items-center">
                            <i class="fas fa-sync-alt mr-1"></i> Refresh
                        </button>
                    </div>
                </div>

<div class="mb-6">
            <h3 class="text-lg font-semibold text-slate-800 dark:text-white mb-3">Hourly Forecast</h3>
            <div class="flex overflow-x-auto pb-2 space-x-3">
                
                <div class="card-glass dark:card-glass-dark flex-shrink-0 rounded-2xl p-4 text-center w-20">
                    <p class="text-sm text-slate-700 dark:text-slate-300">Now</p>
                    <div class="my-2 relative w-8 h-8 mx-auto">
                        <div class="w-6 h-6 rounded-full bg-yellow-400 dark:bg-yellow-300 mx-auto"></div>
                    </div>
                    <p class="font-medium text-slate-800 dark:text-white">72°</p>
                </div>
                
                <div class="card-glass dark:card-glass-dark flex-shrink-0 rounded-2xl p-4 text-center w-20">
                    <p class="text-sm text-slate-700 dark:text-slate-300">11 AM</p>
                    <div class="my-2 relative w-8 h-8 mx-auto">
                        <div class="w-6 h-6 rounded-full bg-yellow-400 dark:bg-yellow-300 mx-auto"></div>
                    </div>
                    <p class="font-medium text-slate-800 dark:text-white">75°</p>
                </div>
                
                <div class="card-glass dark:card-glass-dark flex-shrink-0 rounded-2xl p-4 text-center w-20">
                    <p class="text-sm text-slate-700 dark:text-slate-300">12 PM</p>
                    <div class="my-2 relative w-8 h-8 mx-auto">
                        <div class="w-6 h-6 rounded-full bg-yellow-400 dark:bg-yellow-300 mx-auto"></div>
                        <div class="cloud absolute -top-1 -right-2 w-4 h-2 bg-white dark:bg-gray-200 rounded-full"></div>
                    </div>
                    <p class="font-medium text-slate-800 dark:text-white">78°</p>
                </div>
                
                <div class="card-glass dark:card-glass-dark flex-shrink-0 rounded-2xl p-4 text-center w-20">
                    <p class="text-sm text-slate-700 dark:text-slate-300">1 PM</p>
                    <div class="my-2 relative w-8 h-8 mx-auto">
                        <div class="w-6 h-6 rounded-full bg-yellow-400 dark:bg-yellow-300 mx-auto"></div>
                        <div class="cloud absolute -top-1 -right-2 w-4 h-2 bg-white dark:bg-gray-200 rounded-full"></div>
                    </div>
                    <p class="font-medium text-slate-800 dark:text-white">80°</p>
                </div>
                
                <div class="card-glass dark:card-glass-dark flex-shrink-0 rounded-2xl p-4 text-center w-20">
                    <p class="text-sm text-slate-700 dark:text-slate-300">2 PM</p>
                    <div class="my-2 relative w-8 h-8 mx-auto">
                        <div class="w-4 h-4 bg-white dark:bg-gray-200 rounded-full mx-auto"></div>
                        <div class="cloud absolute top-0 -right-1 w-6 h-3 bg-white dark:bg-gray-200 rounded-full"></div>
                    </div>
                    <p class="font-medium text-slate-800 dark:text-white">79°</p>
                </div>
                
                <div class="card-glass dark:card-glass-dark flex-shrink-0 rounded-2xl p-4 text-center w-20">
                    <p class="text-sm text-slate-700 dark:text-slate-300">3 PM</p>
                    <div class="my-2 relative w-8 h-8 mx-auto">
                        <div class="w-6 h-6 bg-white dark:bg-gray-200 rounded-full mx-auto"></div>
                    </div>
                    <p class="font-medium text-slate-800 dark:text-white">77°</p>
                </div>
            </div>
        </div>

<div>
            <h3 class="text-lg font-semibold text-slate-800 dark:text-white mb-3">7-Day Forecast</h3>
            <div class="space-y-3">
                
                <div class="card-glass dark:card-glass-dark rounded-2xl p-4 flex items-center justify-between">
                    <div class="w-24">
                        <p class="font-medium text-slate-800 dark:text-white">Today</p>
                    </div>
                    <div class="flex items-center space-x-2">
                        <div class="relative w-8 h-8">
                            <div class="w-6 h-6 rounded-full bg-yellow-400 dark:bg-yellow-300 mx-auto"></div>
                            <div class="cloud absolute -top-1 -right-2 w-4 h-2 bg-white dark:bg-gray-200 rounded-full"></div>
                        </div>
                    </div>
                    <div class="flex items-center space-x-4">
                        <span class="font-medium text-slate-800 dark:text-white">72°</span>
                        <span class="text-slate-600 dark:text-slate-400">64°</span>
                    </div>
                </div>
                
                <div class="card-glass dark:card-glass-dark rounded-2xl p-4 flex items-center justify-between">
                    <div class="w-24">
                        <p class="font-medium text-slate-800 dark:text-white">Tue</p>
                    </div>
                    <div class="flex items-center space-x-2">
                        <div class="relative w-8 h-8">
                            <div class="w-6 h-6 rounded-full bg-yellow-400 dark:bg-yellow-300 mx-auto"></div>
                        </div>
                    </div>
                    <div class="flex items-center space-x-4">
                        <span class="font-medium text-slate-800 dark:text-white">76°</span>
                        <span class="text-slate-600 dark:text-slate-400">65°</span>
                    </div>
                </div>
                
                <div class="card-glass dark:card-glass-dark rounded-2xl p-4 flex items-center justify-between">
                    <div class="w-24">
                        <p class="font-medium text-slate-800 dark:text-white">Wed</p>
                    </div>
                    <div class="flex items-center space-x-2">
                        <div class="relative w-8 h-8">
                            <div class="w-6 h-6 bg-white dark:bg-gray-200 rounded-full mx-auto"></div>
                        </div>
                    </div>
                    <div class="flex items-center space-x-4">
                        <span class="font-medium text-slate-800 dark:text-white">74°</span>
                        <span class="text-slate-600 dark:text-slate-400">66°</span>
                    </div>
                </div>
                
                <div class="card-glass dark:card-glass-dark rounded-2xl p-4 flex items-center justify-between">
                    <div class="w-24">
                        <p class="font-medium text-slate-800 dark:text-white">Thu</p>
                    </div>
                    <div class="flex items-center space-x-2">
                        <div class="relative w-8 h-8">
                            <div class="w-6 h-6 bg-white dark:bg-gray-200 rounded-full mx-auto"></div>
                            
                            <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 flex space-x-1">
                                <div class="w-1 h-2 bg-blue-400 rounded-full raindrop" style="--delay: 1"></div>
                                <div class="w-1 h-2 bg-blue-400 rounded-full raindrop" style="--delay: 2"></div>
                                <div class="w-1 h-2 bg-blue-400 rounded-full raindrop" style="--delay: 3"></div>
                            </div>
                        </div>
                    </div>
                    <div class="flex items-center space-x-4">
                        <span class="font-medium text-slate-800 dark:text-white">70°</span>
                        <span class="text-slate-600 dark:text-slate-400">62°</span>
                    </div>
                </div>
                
                <div class="card-glass dark:card-glass-dark rounded-2xl p-4 flex items-center justify-between">
                    <div class="w-24">
                        <p class="font-medium text-slate-800 dark:text-white">Fri</p>
                    </div>
                    <div class="flex items-center space-x-2">
                        <div class="relative w-8 h-8">
                            <div class="w-6 h-6 bg-gray-400 dark:bg-gray-500 rounded-full mx-auto"></div>
                            
                            <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 lightning">
                                <div class="w-2 h-3 bg-yellow-300 transform rotate-45"></div>
                            </div>
                        </div>
                    </div>
                    <div class="flex items-center space-x-4">
                        <span class="font-medium text-slate-800 dark:text-white">68°</span>
                        <span class="text-slate-600 dark:text-slate-400">60°</span>
                    </div>
                </div>
                
                <div class="card-glass dark:card-glass-dark rounded-2xl p-4 flex items-center justify-between">
                    <div class="w-24">
                        <p class="font-medium text-slate-800 dark:text-white">Sat</p>
                    </div>
                    <div class="flex items-center space-x-2">
                        <div class="relative w-8 h-8">
                            <div class="w-6 h-6 bg-white dark:bg-gray-200 rounded-full mx-auto"></div>
                            
                            <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 flex space-x-1">
                                <div class="w-1 h-1 bg-blue-200 rounded-full"></div>
                                <div class="w-1 h-1 bg-blue-200 rounded-full"></div>
                                <div class="w-1 h-1 bg-blue-200 rounded-full"></div>
                            </div>
                        </div>
                    </div>
                    <div class="flex items-center space-x-4">
                        <span class="font-medium text-slate-800 dark:text-white">65°</span>
                        <span class="text-slate-600 dark:text-slate-400">58°</span>
                    </div>
                </div>
                
                <div class="card-glass dark:card-glass-dark rounded-2xl p-4 flex items-center justify-between">
                    <div class="w-24">
                        <p class="font-medium text-slate-800 dark:text-white">Sun</p>
                    </div>
                    <div class="flex items-center space-x-2">
                        <div class="relative w-8 h-8">
                            <div class="w-6 h-6 rounded-full bg-yellow-400 dark:bg-yellow-300 mx-auto"></div>
                            <div class="cloud absolute -top-1 -right-2 w-4 h-2 bg-white dark:bg-gray-200 rounded-full"></div>
                        </div>
                    </div>
                    <div class="flex items-center space-x-4">
                        <span class="font-medium text-slate-800 dark:text-white">71°</span>
                        <span class="text-slate-600 dark:text-slate-400">63°</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div class="fixed bottom-0 left-0 right-0 bg-white dark:bg-slate-800 shadow-lg">
        <div class="container mx-auto px-4 py-3 max-w-md flex justify-around">
            <button class="p-2 text-blue-500 dark:text-blue-400">
                <i class="fas fa-home text-xl"></i>
            </button>
            <button class="p-2 text-gray-500 dark:text-gray-400">
                <i class="fas fa-map text-xl"></i>
            </button>
            <button class="p-2 text-gray-500 dark:text-gray-400">
                <i class="fas fa-chart-line text-xl"></i>
            </button>
            <button class="p-2 text-gray-500 dark:text-gray-400">
                <i class="fas fa-cog text-xl"></i>
            </button>
        </div>
    </div>

A Code by Metehan

Recommended

CSS Loading Animation HTML Snippet

CSS Sprite-Animation Switcher

QRCode-Generator

HTML

CSS

JS

Recommended

CSS Loading Animation HTML Snippet

CSS Sprite-Animation Switcher

QRCode-Generator

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS