Gemini 3.8 Flash
by GoogleReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 58.4 s
- Cost
- $0.036
- Output tokens
- 9,577
- Spent thinking
- 3,436 tokens
- Speed
- 171.5 tok/s
- Console errors
- 0
- First token after
- 2.6 s
- First visible text after
- 27.8 s
- Prompt tokens
- 508
- Code size
- 16.7 KB
- Finish reason
- stop
- Served by
- Model id
google/gemini-3.8-flash- Reasoning sent
model default- Max output
- 65,536 tokens
- Generated
- Nov 12, 2026
What it was asked
The prompt
Create a set of four animated weather cards (sunny, rainy, snowy, stormy), made with HTML and CSS only. Requirements: - Absolutely no JavaScript: the file must not contain any <script> tag or inline event handler. - No images, no SVG, no icon fonts: every weather icon is built from HTML elements and pseudo-elements styled with CSS. - Each card shows an animated icon (rotating sun rays, falling rain drops, drifting snowflakes, flashing lightning), a city name, a temperature and a short description. - Each card has its own background gradient matching the weather. - The cards are displayed in a responsive grid (4 per row on desktop, stacked on mobile) and lift up on hover. - Smooth infinite animations using @keyframes, and respect prefers-reduced-motion.
System prompt, sent with every prompt
You are generating a self-contained web demo. It will be rendered automatically in a sandboxed iframe and compared side by side with the output of other AI models given the exact same task. Output rules: - Reply with exactly ONE fenced code block containing the complete file: ```html (or ```svg when the task asks for an SVG). No text before or after the code block. - Everything must be inline: CSS in <style>, JavaScript in <script>. No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task. - Do not use localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt() or window.open(): they are blocked in the sandbox and will throw. - The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar. - Something meaningful must be visible on first paint: a screenshot is taken automatically about 3 seconds after load, without any interaction. - Everything that makes the demo interesting must be visible within the first seconds: nothing hidden behind a high score, a later level or a long play session. - Games must start in a self-playing demo mode (a simple AI plays) behind a "Click or press a key to start" message, so the game can be judged in action without playing. - The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear "Click or press a key to start" message. - The code must run with zero errors in the console of the latest Chrome.
Code run-1.html · 667 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Weather Cards</title>
<style>
/* Reset & Base Variables */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
--card-radius: 24px;
--card-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
--card-hover-shadow: 0 28px 50px -15px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.25) inset;
}
body {
font-family: var(--font-family);
background: radial-gradient(circle at 50% 10%, #1a2234 0%, #0d121c 100%);
color: #ffffff;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 2.5rem 1.5rem;
overflow-x: hidden;
}
/* Header Section */
.dashboard-header {
text-align: center;
margin-bottom: 2.5rem;
}
.dashboard-title {
font-size: 2.2rem;
font-weight: 800;
letter-spacing: -0.02em;
background: linear-gradient(180deg, #ffffff 0%, #a2b4d2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 0.4rem;
}
.dashboard-subtitle {
font-size: 0.95rem;
color: #7d8fa9;
font-weight: 400;
letter-spacing: 0.02em;
text-transform: uppercase;
}
/* Grid Layout */
.weather-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
width: 100%;
max-width: 1200px;
}
/* Weather Card Component */
.weather-card {
position: relative;
border-radius: var(--card-radius);
padding: 2rem 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
box-shadow: var(--card-shadow);
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
cursor: pointer;
overflow: hidden;
min-height: 380px;
justify-content: space-between;
}
.weather-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 45%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%);
pointer-events: none;
border-radius: var(--card-radius) var(--card-radius) 0 0;
}
.weather-card:hover {
transform: translateY(-10px);
box-shadow: var(--card-hover-shadow);
}
/* Card Background Gradients */
.card-sunny {
background: linear-gradient(155deg, #ff8c00 0%, #ff5e36 40%, #c41e3a 100%);
}
.card-rainy {
background: linear-gradient(155deg, #2b4162 0%, #1d2c42 50%, #121b29 100%);
}
.card-snowy {
background: linear-gradient(155deg, #4b6cb7 0%, #35518f 50%, #182848 100%);
}
.card-stormy {
background: linear-gradient(155deg, #2b1055 0%, #190938 50%, #0c041c 100%);
}
/* Card Meta & Typography */
.city-wrapper {
margin-bottom: 0.5rem;
z-index: 2;
}
.city-name {
font-size: 1.35rem;
font-weight: 700;
letter-spacing: -0.01em;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.country-code {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
opacity: 0.8;
letter-spacing: 0.1em;
margin-top: 2px;
}
.temp-value {
font-size: 3.2rem;
font-weight: 800;
line-height: 1;
margin: 0.5rem 0 0.2rem 0;
text-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
z-index: 2;
}
.temp-unit {
font-size: 1.6rem;
font-weight: 400;
vertical-align: top;
margin-left: -4px;
}
.weather-desc {
font-size: 0.95rem;
font-weight: 500;
opacity: 0.95;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
z-index: 2;
margin-bottom: 0.5rem;
}
.weather-stats {
width: 100%;
display: flex;
justify-content: space-around;
padding-top: 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.15);
font-size: 0.75rem;
font-weight: 500;
opacity: 0.85;
z-index: 2;
}
.stat-item {
display: flex;
flex-direction: column;
gap: 2px;
}
.stat-label {
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.05em;
opacity: 0.7;
}
/* =========================================
ICON STAGE: SHARED
========================================= */
.icon-stage {
position: relative;
width: 110px;
height: 110px;
display: flex;
justify-content: center;
align-items: center;
margin: 1rem 0;
z-index: 2;
}
/* =========================================
1. SUNNY: PURE CSS ANIMATED SUN
========================================= */
.sun-body {
position: absolute;
width: 48px;
height: 48px;
background: radial-gradient(circle, #fff176 10%, #fbc02d 70%, #f57f17 100%);
border-radius: 50%;
box-shadow: 0 0 25px #ffeb3b, 0 0 45px rgba(255, 152, 0, 0.6);
animation: sunPulse 3s ease-in-out infinite alternate;
z-index: 3;
}
.sun-rays {
position: absolute;
width: 96px;
height: 96px;
display: flex;
justify-content: center;
align-items: center;
animation: sunRotate 20s linear infinite;
}
.ray {
position: absolute;
width: 4px;
height: 96px;
background: linear-gradient(180deg, #ffeb3b 0%, rgba(255, 235, 59, 0) 18%, rgba(255, 235, 59, 0) 82%, #ffeb3b 100%);
border-radius: 4px;
}
.ray:nth-child(2) { transform: rotate(45deg); }
.ray:nth-child(3) { transform: rotate(90deg); }
.ray:nth-child(4) { transform: rotate(135deg); }
@keyframes sunRotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes sunPulse {
0% { transform: scale(0.94); box-shadow: 0 0 20px #ffeb3b, 0 0 40px rgba(255, 152, 0, 0.5); }
100% { transform: scale(1.05); box-shadow: 0 0 35px #fff176, 0 0 60px rgba(255, 152, 0, 0.8); }
}
/* =========================================
SHARED CLOUD SHAPE
========================================= */
.css-cloud {
position: absolute;
top: 25px;
width: 70px;
height: 24px;
background: #eef3f9;
border-radius: 20px;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
z-index: 3;
}
.css-cloud::before,
.css-cloud::after {
content: '';
position: absolute;
background: inherit;
border-radius: 50%;
}
.css-cloud::before {
width: 32px;
height: 32px;
top: -14px;
left: 10px;
}
.css-cloud::after {
width: 24px;
height: 24px;
top: -8px;
right: 12px;
}
/* Darker storm cloud variant */
.css-cloud.storm-cloud {
background: #474b5c;
animation: cloudRumble 2.4s ease-in-out infinite alternate;
}
/* =========================================
2. RAINY: CLOUD & FALLING DROPS
========================================= */
.rain-system {
position: absolute;
bottom: 12px;
width: 60px;
height: 40px;
display: flex;
justify-content: space-between;
overflow: hidden;
padding: 0 6px;
}
.rain-drop {
position: relative;
width: 2.5px;
height: 14px;
background: linear-gradient(180deg, rgba(129, 212, 250, 0.1) 0%, #4fc3f7 100%);
border-radius: 2px;
transform: rotate(12deg);
animation: dropFall 0.9s cubic-bezier(0.4, 0, 0.8, 0.8) infinite;
}
.rain-drop:nth-child(1) { animation-delay: 0.1s; }
.rain-drop:nth-child(2) { animation-delay: 0.45s; }
.rain-drop:nth-child(3) { animation-delay: 0.2s; }
.rain-drop:nth-child(4) { animation-delay: 0.6s; }
@keyframes dropFall {
0% {
transform: translateY(-20px) rotate(12deg);
opacity: 0;
}
25% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
transform: translateY(35px) rotate(12deg);
opacity: 0;
}
}
/* =========================================
3. SNOWY: CLOUD & DRIFTING SNOWFLAKES
========================================= */
.snow-system {
position: absolute;
bottom: 8px;
width: 70px;
height: 48px;
overflow: hidden;
}
.snowflake {
position: absolute;
background: #ffffff;
border-radius: 50%;
box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
animation: snowDrift 2.8s ease-in-out infinite;
}
/* Multi-layered flake sizes & offsets */
.flake-1 {
width: 6px;
height: 6px;
left: 12px;
animation-delay: 0.2s;
}
.flake-2 {
width: 4px;
height: 4px;
left: 32px;
animation-duration: 2.2s;
animation-delay: 1.1s;
}
.flake-3 {
width: 5px;
height: 5px;
left: 52px;
animation-duration: 3.1s;
animation-delay: 0.6s;
}
.flake-4 {
width: 3.5px;
height: 3.5px;
left: 22px;
animation-duration: 2.5s;
animation-delay: 1.8s;
}
.flake-5 {
width: 4.5px;
height: 4.5px;
left: 44px;
animation-duration: 2.9s;
animation-delay: 1.4s;
}
@keyframes snowDrift {
0% {
transform: translate(0, -10px);
opacity: 0;
}
20% {
opacity: 1;
}
50% {
transform: translate(6px, 18px);
}
80% {
opacity: 0.9;
}
100% {
transform: translate(-4px, 42px);
opacity: 0;
}
}
/* =========================================
4. STORMY: FLASHING LIGHTNING & CLOUD
========================================= */
.lightning-bolt {
position: absolute;
top: 48px;
left: 42px;
width: 22px;
height: 40px;
background: #ffeb3b;
clip-path: polygon(55% 0%, 90% 0%, 45% 45%, 85% 45%, 15% 100%, 35% 55%, 10% 55%);
filter: drop-shadow(0 0 10px #ffea00);
animation: lightningStrike 3.2s infinite;
z-index: 2;
}
@keyframes lightningStrike {
0%, 86%, 92%, 100% {
opacity: 0;
transform: scale(0.85);
}
87% {
opacity: 1;
transform: scale(1.15) rotate(-3deg);
filter: drop-shadow(0 0 16px #ffffff) drop-shadow(0 0 25px #ffea00);
}
89% {
opacity: 0.1;
}
90% {
opacity: 1;
transform: scale(1.05) rotate(0deg);
filter: drop-shadow(0 0 12px #ffea00);
}
}
@keyframes cloudRumble {
0%, 86%, 100% {
background: #474b5c;
transform: translate(0, 0);
}
87%, 90% {
background: #8b92a8;
transform: translate(-1px, -1px);
box-shadow: 0 8px 24px rgba(255, 235, 59, 0.35);
}
}
/* =========================================
RESPONSIVE ADAPTATIONS
========================================= */
@media (max-width: 1024px) {
.weather-grid {
grid-template-columns: repeat(2, 1fr);
max-width: 620px;
}
body {
padding: 2rem 1.25rem;
}
}
@media (max-width: 580px) {
.weather-grid {
grid-template-columns: 1fr;
max-width: 340px;
}
.dashboard-title {
font-size: 1.8rem;
}
.weather-card {
min-height: 360px;
}
}
/* =========================================
ACCESSIBILITY: PREFERS-REDUCED-MOTION
========================================= */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.lightning-bolt {
opacity: 1 !important;
}
}
</style>
</head>
<body>
<header class="dashboard-header">
<h1 class="dashboard-title">Global Forecast</h1>
<p class="dashboard-subtitle">Real-time Atmospheric Dynamics</p>
</header>
<main class="weather-grid">
<!-- 1. SUNNY CARD -->
<article class="weather-card card-sunny">
<div class="city-wrapper">
<h2 class="city-name">Honolulu</h2>
<div class="country-code">Hawaii, US</div>
</div>
<div class="icon-stage" aria-label="Sunny weather icon">
<div class="sun-rays">
<span class="ray"></span>
<span class="ray"></span>
<span class="ray"></span>
<span class="ray"></span>
</div>
<div class="sun-body"></div>
</div>
<div>
<div class="temp-value">29<span class="temp-unit">°C</span></div>
<div class="weather-desc">Sunny & Radiant</div>
</div>
<div class="weather-stats">
<div class="stat-item">
<span class="stat-label">Humidity</span>
<span>58%</span>
</div>
<div class="stat-item">
<span class="stat-label">Wind</span>
<span>14 km/h</span>
</div>
<div class="stat-item">
<span class="stat-label">UV Index</span>
<span>9 Very High</span>
</div>
</div>
</article>
<!-- 2. RAINY CARD -->
<article class="weather-card card-rainy">
<div class="city-wrapper">
<h2 class="city-name">Seattle</h2>
<div class="country-code">Washington, US</div>
</div>
<div class="icon-stage" aria-label="Rainy weather icon">
<div class="css-cloud"></div>
<div class="rain-system">
<span class="rain-drop"></span>
<span class="rain-drop"></span>
<span class="rain-drop"></span>
<span class="rain-drop"></span>
</div>
</div>
<div>
<div class="temp-value">13<span class="temp-unit">°C</span></div>
<div class="weather-desc">Steady Precipitation</div>
</div>
<div class="weather-stats">
<div class="stat-item">
<span class="stat-label">Humidity</span>
<span>89%</span>
</div>
<div class="stat-item">
<span class="stat-label">Wind</span>
<span>22 km/h</span>
</div>
<div class="stat-item">
<span class="stat-label">Rainfall</span>
<span>4.2 mm</span>
</div>
</div>
</article>
<!-- 3. SNOWY CARD -->
<article class="weather-card card-snowy">
<div class="city-wrapper">
<h2 class="city-name">Oslo</h2>
<div class="country-code">Norway</div>
</div>
<div class="icon-stage" aria-label="Snowy weather icon">
<div class="css-cloud"></div>
<div class="snow-system">
<span class="snowflake flake-1"></span>
<span class="snowflake flake-2"></span>
<span class="snowflake flake-3"></span>
<span class="snowflake flake-4"></span>
<span class="snowflake flake-5"></span>
</div>
</div>
<div>
<div class="temp-value">-3<span class="temp-unit">°C</span></div>
<div class="weather-desc">Gentle Snowfall</div>
</div>
<div class="weather-stats">
<div class="stat-item">
<span class="stat-label">Humidity</span>
<span>82%</span>
</div>
<div class="stat-item">
<span class="stat-label">Wind</span>
<span>9 km/h</span>
</div>
<div class="stat-item">
<span class="stat-label">Depth</span>
<span>12 cm</span>
</div>
</div>
</article>
<!-- 4. STORMY CARD -->
<article class="weather-card card-stormy">
<div class="city-wrapper">
<h2 class="city-name">Darwin</h2>
<div class="country-code">Australia</div>
</div>
<div class="icon-stage" aria-label="Thunderstorm weather icon">
<div class="css-cloud storm-cloud"></div>
<div class="lightning-bolt"></div>
</div>
<div>
<div class="temp-value">22<span class="temp-unit">°C</span></div>
<div class="weather-desc">Severe Thunderstorm</div>
</div>
<div class="weather-stats">
<div class="stat-item">
<span class="stat-label">Humidity</span>
<span>94%</span>
</div>
<div class="stat-item">
<span class="stat-label">Wind</span>
<span>48 km/h</span>
</div>
<div class="stat-item">
<span class="stat-label">Pressure</span>
<span>992 hPa</span>
</div>
</div>
</article>
</main>
</body>
</html>Reasoning trace (3,436 tokens)
**Crafting CSS Weather** I'm deeply immersed in a purely CSS and HTML challenge, meticulously designing four distinct animated weather cards: sunny, rainy, snowy, and stormy. The constraint of avoiding any JavaScript, external images, or icon fonts is pushing me to explore creative solutions for dynamic visual representations using only CSS shapes and HTML elements. **Animating Weather Icons** I'm currently focusing on implementing the core animations for each weather condition using only pseudo-elements. The goal is to create dynamic visual effects like rotating sun rays, falling raindrops, drifting snowflakes, and flashing lightning, all within pure CSS. I'm also refining the custom gradients for each card's background to perfectly capture the essence of the weather. **Refining Color Palettes** I'm currently experimenting with diverse gradient combinations for each weather card. The focus is on creating distinctly atmospheric themes, exploring options from radiant sunset golds and warm blues for sunny cards to deep, moody oceanic slates for rainy conditions. **Synthesizing Gradient and Animation** I'm currently exploring diverse gradient combinations, ranging from frosty cyan to electric violet, for the stormy cards. Concurrently, I'm detailing the sun's construction, considering a central glowing circle with surrounding rotating rays generated via box-shadow or pseudo-elements, and animating its subtle pulse. **Animating Weather Elements** I'm detailing the precise CSS construction for cloud shapes, incorporating pseudo-elements for a fluffy appearance, and defining the dynamic falling animation for raindrops. I'm also exploring CSS snowflake designs with subtle swaying motions, alongside the turbulent pulsing for storm clouds and the visual representation of lightning. **Designing Lightning Bolts** I'm focusing on crafting the lightning bolt using `clip-path` for a perfect CSS polygon zig-zag. I'm also planning a sudden bright flash with a strong glow and opacity animation, synchronized with dramatic cloud color changes and rapid rain streaks. **Finalizing Layout and Interaction** I'm now focusing on the responsive grid layout and detailed hover states for the weather cards, ensuring smooth transitions and visual polish. The plan includes elevating cards and enhancing shadows on hover, with a fluid animation curve. I'm also refining padding and box-sizing for optimal viewport fit across devices. **Constructing Sun and Clouds** I'm currently detailing the sun component, aiming for a glowing core with dynamic, rotating rays using box-shadow or pseudo-elements. Simultaneously, I'm refining the cloud construction, utilizing pseudo-elements for a fluffy appearance and exploring subtle volume effects with inner gradients or soft shadows. **Crafting Falling Elements** I'm refining the animation for raindrops, aiming for a natural, staggered fall using cubic-bezier timing. For snowflakes, I'm exploring both delicate circular crystals with subtle glows and geometric, multi-branch shapes, each with distinct drifting and swaying animations. **Building Storm Animations** I'm refining the lightning bolt's `clip-path` for precise zig-zagging, and coordinating its sudden flash with cloud color shifts and rain streaks. I'm also working on the stormy clouds' pulsing glow and integrating the lightning's visual impact within the overall storm card.