Gemini 3.8 Flash
by GoogleReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 47.3 s
- Cost
- $0.032
- Output tokens
- 8,395
- Spent thinking
- 1,989 tokens
- Speed
- 186.4 tok/s
- Console errors
- 0
- First token after
- 2.2 s
- First visible text after
- 16.0 s
- Prompt tokens
- 508
- Code size
- 16.0 KB
- Finish reason
- stop
- Served by
- Model id
google/gemini-3.8-flash- Reasoning sent
{"effort":"medium"}- 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 · 647 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 STYLES === */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
background: radial-gradient(circle at 50% 10%, #1e2235 0%, #0d0f18 100%);
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
color: #ffffff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 2.5rem 1.25rem;
overflow-x: hidden;
}
header {
text-align: center;
margin-bottom: 2.5rem;
}
header h1 {
font-size: clamp(1.6rem, 3.5vw, 2.4rem);
font-weight: 700;
letter-spacing: -0.02em;
background: linear-gradient(135deg, #ffffff 40%, #94a3b8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 0.4rem;
}
header p {
font-size: 0.95rem;
color: #94a3b8;
letter-spacing: 0.02em;
}
/* === RESPONSIVE GRID === */
.weather-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
width: 100%;
max-width: 1200px;
perspective: 1000px;
}
@media (max-width: 1024px) {
.weather-container {
grid-template-columns: repeat(2, 1fr);
max-width: 680px;
}
}
@media (max-width: 580px) {
.weather-container {
grid-template-columns: 1fr;
max-width: 340px;
}
}
/* === CARD ARCHITECTURE === */
.card {
position: relative;
border-radius: 1.75rem;
padding: 2rem 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
overflow: hidden;
box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.45),
inset 0 1px 1px 0 rgba(255, 255, 255, 0.25);
border: 1px solid rgba(255, 255, 255, 0.12);
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
box-shadow 0.4s ease,
border-color 0.4s ease;
backdrop-filter: blur(10px);
cursor: default;
}
.card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 24px 44px -10px rgba(0, 0, 0, 0.65),
inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
border-color: rgba(255, 255, 255, 0.3);
}
/* Specific Card Gradients */
.card-sunny {
background: linear-gradient(160deg, #0284c7 0%, #0369a1 40%, #f59e0b 100%);
}
.card-rainy {
background: linear-gradient(160deg, #1e293b 0%, #334155 45%, #0f766e 100%);
}
.card-snowy {
background: linear-gradient(160deg, #1e3a8a 0%, #2563eb 50%, #93c5fd 100%);
}
.card-stormy {
background: linear-gradient(160deg, #0f172a 0%, #2e1065 50%, #1e1b4b 100%);
}
/* Subtle atmospheric gloss overlay */
.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-top-left-radius: inherit;
border-top-right-radius: inherit;
}
/* === ICON STAGE === */
.icon-stage {
position: relative;
width: 120px;
height: 120px;
margin-bottom: 1.5rem;
display: flex;
justify-content: center;
align-items: center;
}
/* === 1. SUNNY ANIMATION === */
.sun-wrap {
position: relative;
width: 64px;
height: 64px;
}
.sun-core {
position: absolute;
inset: 0;
border-radius: 50%;
background: radial-gradient(circle, #fef08a 20%, #facc15 60%, #ea580c 100%);
box-shadow: 0 0 24px #facc15, 0 0 45px rgba(245, 158, 11, 0.6);
animation: pulse-sun 3.5s ease-in-out infinite alternate;
z-index: 2;
}
.sun-rays {
position: absolute;
inset: -16px;
animation: rotate-rays 18s linear infinite;
z-index: 1;
}
.ray-bar {
position: absolute;
top: 0;
bottom: 0;
left: calc(50% - 2.5px);
width: 5px;
border-radius: 3px;
}
.ray-bar::before,
.ray-bar::after {
content: '';
position: absolute;
width: 100%;
height: 10px;
background: #fde047;
border-radius: 4px;
box-shadow: 0 0 8px #facc15;
}
.ray-bar::before { top: 0; }
.ray-bar::after { bottom: 0; }
.ray-1 { transform: rotate(0deg); }
.ray-2 { transform: rotate(45deg); }
.ray-3 { transform: rotate(90deg); }
.ray-4 { transform: rotate(135deg); }
@keyframes rotate-rays {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes pulse-sun {
0% { transform: scale(0.94); box-shadow: 0 0 16px #facc15, 0 0 30px rgba(245, 158, 11, 0.4); }
100% { transform: scale(1.06); box-shadow: 0 0 28px #fde047, 0 0 52px rgba(245, 158, 11, 0.8); }
}
/* === REUSABLE CLOUD SHAPE === */
.cloud-base {
position: absolute;
top: 28px;
left: 20px;
width: 80px;
height: 30px;
background: #e2e8f0;
border-radius: 20px;
box-shadow: inset 0 -3px 4px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.2);
animation: float-cloud 4s ease-in-out infinite alternate;
z-index: 2;
}
.cloud-base::before,
.cloud-base::after {
content: '';
position: absolute;
background: inherit;
border-radius: 50%;
}
.cloud-base::before {
width: 36px;
height: 36px;
top: -18px;
left: 10px;
}
.cloud-base::after {
width: 46px;
height: 46px;
top: -24px;
right: 12px;
}
.cloud-dark {
background: #475569;
box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.35), 0 10px 20px rgba(0, 0, 0, 0.35);
}
.cloud-storm {
background: #334155;
box-shadow: inset 0 -3px 8px rgba(0, 0, 0, 0.5), 0 12px 22px rgba(0, 0, 0, 0.5);
animation: float-cloud 3.5s ease-in-out infinite alternate, cloud-flash 4.5s ease-out infinite;
}
.cloud-snow {
background: #f8fafc;
box-shadow: inset 0 -2px 4px rgba(148, 163, 184, 0.3), 0 8px 20px rgba(2, 132, 199, 0.25);
}
@keyframes float-cloud {
0% { transform: translateY(0); }
100% { transform: translateY(-5px); }
}
/* === 2. RAINY ANIMATION === */
.rain-field {
position: absolute;
top: 62px;
width: 68px;
height: 45px;
display: flex;
justify-content: space-between;
overflow: hidden;
z-index: 1;
}
.drop {
position: relative;
width: 3px;
height: 14px;
background: linear-gradient(180deg, rgba(56, 189, 248, 0.2), #38bdf8);
border-radius: 2px;
transform: rotate(15deg);
animation: fall-rain 1.1s cubic-bezier(0.4, 0, 0.8, 0.8) infinite;
}
.drop-1 { animation-delay: 0s; left: 4px; }
.drop-2 { animation-delay: 0.35s; left: 18px; }
.drop-3 { animation-delay: 0.7s; left: 34px; }
.drop-4 { animation-delay: 0.2s; left: 48px; }
.drop-5 { animation-delay: 0.55s; left: 60px; }
@keyframes fall-rain {
0% {
transform: translateY(-20px) rotate(15deg);
opacity: 0;
}
25% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(48px) rotate(15deg);
opacity: 0;
}
}
/* === 3. SNOWY ANIMATION === */
.snow-field {
position: absolute;
top: 60px;
width: 80px;
height: 50px;
z-index: 1;
}
.flake {
position: absolute;
background: #ffffff;
border-radius: 50%;
box-shadow: 0 0 6px #ffffff;
}
.flake-1 {
width: 7px;
height: 7px;
left: 12px;
animation: drift-snow 2.8s ease-in-out infinite;
animation-delay: 0s;
}
.flake-2 {
width: 5px;
height: 5px;
left: 32px;
animation: drift-snow 2.4s ease-in-out infinite;
animation-delay: -0.9s;
}
.flake-3 {
width: 8px;
height: 8px;
left: 52px;
animation: drift-snow 3.1s ease-in-out infinite;
animation-delay: -1.7s;
}
.flake-4 {
width: 6px;
height: 6px;
left: 68px;
animation: drift-snow 2.6s ease-in-out infinite;
animation-delay: -0.4s;
}
@keyframes drift-snow {
0% {
transform: translate(0, -10px);
opacity: 0;
}
20% {
opacity: 1;
}
50% {
transform: translate(7px, 20px);
}
80% {
opacity: 0.9;
}
100% {
transform: translate(-5px, 46px);
opacity: 0;
}
}
/* === 4. STORMY ANIMATION === */
.storm-rain {
position: absolute;
top: 60px;
width: 74px;
height: 50px;
display: flex;
justify-content: space-around;
overflow: hidden;
z-index: 1;
}
.storm-drop {
width: 2.5px;
height: 18px;
background: linear-gradient(180deg, rgba(147, 197, 253, 0.2), #93c5fd);
border-radius: 2px;
transform: rotate(22deg);
animation: storm-rain-fall 0.8s linear infinite;
}
.sdrop-1 { animation-delay: 0.1s; }
.sdrop-2 { animation-delay: 0.4s; }
.sdrop-3 { animation-delay: 0.25s; }
.sdrop-4 { animation-delay: 0.6s; }
@keyframes storm-rain-fall {
0% {
transform: translateY(-24px) rotate(22deg);
opacity: 0;
}
30% {
opacity: 1;
}
100% {
transform: translateY(50px) rotate(22deg);
opacity: 0;
}
}
/* Pure CSS Polygon Lightning Bolt */
.lightning-bolt {
position: absolute;
top: 48px;
left: 48px;
width: 22px;
height: 48px;
background: #fef08a;
clip-path: polygon(45% 0%, 100% 0%, 36% 44%, 72% 44%, 0% 100%, 24% 54%, 0% 54%);
filter: drop-shadow(0 0 10px #facc15) drop-shadow(0 0 20px #eab308);
z-index: 3;
opacity: 0;
animation: lightning-strike 4.5s ease-out infinite;
}
@keyframes lightning-strike {
0%, 82%, 87%, 93%, 100% {
opacity: 0;
transform: scale(0.85) translate(0, 0);
}
83%, 85% {
opacity: 1;
transform: scale(1.1) translate(1px, 2px);
}
88%, 91% {
opacity: 0.95;
transform: scale(1.05) translate(-1px, 1px);
}
}
@keyframes cloud-flash {
0%, 82%, 87%, 93%, 100% {
background: #334155;
box-shadow: inset 0 -3px 8px rgba(0, 0, 0, 0.5), 0 12px 22px rgba(0, 0, 0, 0.5);
}
83%, 85%, 88%, 91% {
background: #64748b;
box-shadow: inset 0 -3px 8px rgba(254, 240, 138, 0.4), 0 0 30px rgba(254, 240, 138, 0.5);
}
}
/* === CARD TYPOGRAPHY & METRICS === */
.city-name {
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.01em;
margin-bottom: 0.25rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.temperature {
font-size: 2.75rem;
font-weight: 800;
line-height: 1;
letter-spacing: -0.03em;
margin: 0.5rem 0 0.35rem 0;
text-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
}
.temperature sup {
font-size: 1.4rem;
font-weight: 600;
margin-left: 2px;
vertical-align: top;
}
.condition {
font-size: 0.95rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 1.5rem;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
/* Extra Info Bar */
.meta-bar {
display: flex;
justify-content: space-around;
width: 100%;
padding-top: 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.18);
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.82);
}
.meta-item {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.meta-item span:first-child {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: rgba(255, 255, 255, 0.6);
}
.meta-item span:last-child {
font-weight: 600;
color: #ffffff;
}
/* === ACCESSIBILITY: REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.card:hover {
transform: none;
}
}
</style>
</head>
<body>
<header>
<h1>Global Weather Forecast</h1>
<p>Pure HTML & CSS • Zero JavaScript • Vector-free</p>
</header>
<main class="weather-container">
<!-- 1. SUNNY CARD -->
<article class="card card-sunny">
<div class="icon-stage">
<div class="sun-wrap">
<div class="sun-core"></div>
<div class="sun-rays">
<div class="ray-bar ray-1"></div>
<div class="ray-bar ray-2"></div>
<div class="ray-bar ray-3"></div>
<div class="ray-bar ray-4"></div>
</div>
</div>
</div>
<h2 class="city-name">Miami</h2>
<div class="temperature">31<sup>°C</sup></div>
<div class="condition">Sunny • Clear Sky</div>
<div class="meta-bar">
<div class="meta-item">
<span>Humidity</span>
<span>48%</span>
</div>
<div class="meta-item">
<span>Wind</span>
<span>11 km/h</span>
</div>
</div>
</article>
<!-- 2. RAINY CARD -->
<article class="card card-rainy">
<div class="icon-stage">
<div class="cloud-base cloud-dark"></div>
<div class="rain-field">
<div class="drop drop-1"></div>
<div class="drop drop-2"></div>
<div class="drop drop-3"></div>
<div class="drop drop-4"></div>
<div class="drop drop-5"></div>
</div>
</div>
<h2 class="city-name">London</h2>
<div class="temperature">14<sup>°C</sup></div>
<div class="condition">Continuous Rain</div>
<div class="meta-bar">
<div class="meta-item">
<span>Humidity</span>
<span>89%</span>
</div>
<div class="meta-item">
<span>Wind</span>
<span>24 km/h</span>
</div>
</div>
</article>
<!-- 3. SNOWY CARD -->
<article class="card card-snowy">
<div class="icon-stage">
<div class="cloud-base cloud-snow"></div>
<div class="snow-field">
<div class="flake flake-1"></div>
<div class="flake flake-2"></div>
<div class="flake flake-3"></div>
<div class="flake flake-4"></div>
</div>
</div>
<h2 class="city-name">Sapporo</h2>
<div class="temperature">-2<sup>°C</sup></div>
<div class="condition">Drifting Snow</div>
<div class="meta-bar">
<div class="meta-item">
<span>Humidity</span>
<span>74%</span>
</div>
<div class="meta-item">
<span>Wind</span>
<span>8 km/h</span>
</div>
</div>
</article>
<!-- 4. STORMY CARD -->
<article class="card card-stormy">
<div class="icon-stage">
<div class="cloud-base cloud-storm"></div>
<div class="lightning-bolt"></div>
<div class="storm-rain">
<div class="storm-drop sdrop-1"></div>
<div class="storm-drop sdrop-2"></div>
<div class="storm-drop sdrop-3"></div>
<div class="storm-drop sdrop-4"></div>
</div>
</div>
<h2 class="city-name">Darwin</h2>
<div class="temperature">26<sup>°C</sup></div>
<div class="condition">Thunderstorm</div>
<div class="meta-bar">
<div class="meta-item">
<span>Humidity</span>
<span>94%</span>
</div>
<div class="meta-item">
<span>Wind</span>
<span>52 km/h</span>
</div>
</div>
</article>
</main>
</body>
</html>Reasoning trace (1,989 tokens)
**Developing Animated Weather Cards** I'm focusing on crafting four distinct animated weather cards – Sunny, Rainy, Snowy, and Stormy – using only HTML and CSS. My current challenge is ensuring all animations are achievable without any JavaScript, relying solely on CSS transitions and keyframes for visual effects. I'm also committed to avoiding external assets like images, SVGs, or icon fonts. **Crafting Weather Card Elements** I'm currently building out the core HTML and CSS structures for each of the four weather cards. My focus is on designing the animated icons using only `div`s, `span`s, and pseudo-elements, aiming for distinct visual representations of sunny rays, falling rain, drifting snow, and stormy lightning. I'm also defining the background gradients and ensuring the layout will adapt fluidly across different screen sizes. **Refining Animation Interactivity** I'm concentrating on implementing sophisticated hover effects for each weather card. This involves animating a gentle lift and subtle glow using `box-shadow` and `transform`, while also ensuring all infinite animations run smoothly via `@keyframes` and respect the `prefers-reduced-motion` setting. **Developing Weather Card Animations** I'm refining the animation for the sunny card, experimenting with multiple pseudo-elements to create eight distinct rays that rotate smoothly. For the rainy card, I'm focusing on crafting realistic raindrop shapes and staggered falling animations. The snowy card will feature soft, circular flakes, all without relying on any external assets or JavaScript. **Building Weather Card Elements** I'm deep in the construction phase, crafting the HTML and CSS for each of the four weather cards. My current focus is on generating the animated icons using only `div`s, `span`s, and pseudo-elements, aiming for unique visual representations of sun rays, falling rain, drifting snow, and stormy lightning. I'm also setting up the background gradients and ensuring responsive layout. **Implementing Hover Effects** I am now concentrating on the interactive elements, specifically the hover effects for each weather card. This involves implementing a subtle lift and glow using `box-shadow` and `transform`, ensuring all infinite animations run smoothly via `@keyframes` and respect user preferences for reduced motion. **Designing Sunny Card Animation** My current focus is on animating the sunny card, specifically by creating eight distinct rays using multiple pseudo-elements. I'm rotating the container and utilizing `nth-child` selectors for individual ray transformations, aiming for a clean, pure CSS rotation effect. **Creating Rainy Card Elements** I'm building the rainy card's cloud from rounded elements and pseudo-circles, using a soft bluish-gray gradient with a subtle bounce. My focus is on designing four to five distinct raindrop elements with staggered falling animations and angled shapes. **Visualizing Snowy Card Design** I'm now focusing on the visual aspects of the snowy card. My plan is to create a fluffy white cloud with a soft glow, accompanied by pure CSS circular snowflakes that drift downwards with a gentle, staggered animation. **Finalizing Weather Card Designs** I'm currently integrating the final details for each weather card, solidifying the animation sequences and visual elements. This includes finalizing the lightning bolt's `clip-path` for the stormy card, implementing the sinusoidal drift for snow, and ensuring all gradients and color schemes are consistent with their respective weather conditions. I'm also verifying that all animations are pure CSS and adhere to accessibility standards.