<div class="weather-app">
<!-- Glowing Background Orbs -->
<div class="bg-orb orb-yellow"></div>
<div class="bg-orb orb-blue"></div>
<!-- Main Glass Dashboard -->
<div class="glass-dashboard">
<div class="current-weather">
<div class="location">San Francisco, CA</div>
<div class="temp-display">
<h1>72°</h1>
<div class="weather-icon">
<!-- SVG Sun -->
<svg viewBox="0 0 24 24" width="60" height="60" fill="none" stroke="#fef08a" stroke-width="2">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
</div>
</div>
<div class="condition">Sunny & Clear</div>
</div>
<div class="divider"></div>
<div class="forecast-row">
<div class="forecast-item">
<span>Mon</span>
<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#fef08a" stroke-width="2"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>
<span>74°</span>
</div>
<div class="forecast-item">
<span>Tue</span>
<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#93c5fd" stroke-width="2"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path></svg>
<span>68°</span>
</div>
<div class="forecast-item">
<span>Wed</span>
<svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="#93c5fd" stroke-width="2"><path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"></path></svg>
<span>65°</span>
</div>
</div>
</div>
</div>
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
margin: 0;
background: #0f172a;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
.weather-app {
position: relative;
width: 100%;
max-width: 400px;
}
.bg-orb {
position: absolute;
border-radius: 50%;
filter: blur(50px);
z-index: 1;
}
.orb-yellow {
width: 200px;
height: 200px;
background: #f59e0b;
top: -50px;
left: -50px;
opacity: 0.6;
}
.orb-blue {
width: 250px;
height: 250px;
background: #3b82f6;
bottom: -50px;
right: -50px;
opacity: 0.5;
}
.glass-dashboard {
position: relative;
z-index: 2;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(25px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 30px;
padding: 40px;
color: #ffffff;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.location {
font-size: 1.125rem;
font-weight: 500;
letter-spacing: 1px;
margin-bottom: 20px;
color: #e2e8f0;
}
.temp-display {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.temp-display h1 {
font-size: 5rem;
font-weight: 800;
margin: 0;
letter-spacing: -2px;
}
.weather-icon {
animation: floatIcon 4s infinite ease-in-out alternate;
}
@keyframes floatIcon {
0% { transform: translateY(0); }
100% { transform: translateY(-10px); }
}
.condition {
font-size: 1.25rem;
font-weight: 500;
color: #bfdbfe;
margin-bottom: 30px;
}
.divider {
width: 100%;
height: 1px;
background: rgba(255, 255, 255, 0.15);
margin-bottom: 30px;
}
.forecast-row {
display: flex;
justify-content: space-between;
}
.forecast-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.forecast-item span:first-child {
color: #94a3b8;
font-weight: 500;
}
.forecast-item span:last-child {
font-weight: 600;
font-size: 1.125rem;
}
