GPT-5 Nano
by OpenAIReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 1 min 39 s
- Cost
- $0.0060
- Output tokens
- 14,908
- Spent thinking
- 11,136 tokens
- Speed
- 156.1 tok/s
- Console errors
- 0
- First token after
- 3.6 s
- First visible text after
- 1 min 18 s
- Prompt tokens
- 498
- Code size
- 11.3 KB
- Finish reason
- stop
- Served by
- OpenAI
- Model id
openai/gpt-5-nano- Reasoning sent
{"effort":"medium"}- Max output
- 128,000 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 · 342 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Four Animated Weather Cards (CSS Only)</title>
<style>
:root{
--radius: 14px;
--card-h: 280px;
}
/* Global reset + typography */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
background: #0b1020;
color: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.wrap {
padding: 28px;
max-width: 1200px;
margin: 0 auto;
}
h1 {
font-size: 1.5rem;
font-weight: 600;
margin: 6px 0 18px;
text-align: center;
letter-spacing: .4px;
}
/* Responsive grid: 4 per row on desktop, stacked on mobile */
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
@media (max-width: 1024px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.grid { grid-template-columns: 1fr; }
}
/* Card base */
.card {
position: relative;
border-radius: var(--radius);
overflow: hidden;
min-height: var(--card-h);
padding: 18px 16px 20px;
display: flex;
flex-direction: column;
justify-content: flex-end;
color: #fff;
box-shadow: 0 6px 14px rgba(0,0,0,.25);
transition: transform .35s ease, box-shadow .35s ease;
}
.card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 26px rgba(0,0,0,.32);
}
/* Icon area: animated, self-contained icon made from divs/spans */
.icon {
height: 120px;
display: grid;
place-items: center;
margin-bottom: 6px;
}
/* Sunny icon: spinning sun with rays (built from elements) */
.sunny .sun {
position: relative;
width: 90px;
height: 90px;
animation: spin 8s linear infinite;
}
.sunny .sun-core {
width: 32px; height: 32px;
background: #ffd34d;
border-radius: 50%;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 14px rgba(255, 214, 68, .9);
}
.sunny .ray {
position: absolute;
width: 6px; height: 26px;
background: #ffd34d;
top: 50%;
left: 50%;
transform-origin: 50% 0;
}
.sunny .ray.r1 { transform: rotate(0deg) translate(-50%, -100%); }
.sunny .ray.r2 { transform: rotate(45deg) translate(-50%, -100%); }
.sunny .ray.r3 { transform: rotate(90deg) translate(-50%, -100%); }
.sunny .ray.r4 { transform: rotate(135deg) translate(-50%, -100%); }
.sunny .ray.r5 { transform: rotate(180deg) translate(-50%, -100%); }
.sunny .ray.r6 { transform: rotate(225deg) translate(-50%, -100%); }
.sunny .ray.r7 { transform: rotate(270deg) translate(-50%, -100%); }
.sunny .ray.r8 { transform: rotate(315deg) translate(-50%, -100%); }
/* Rainy icon: cloud + falling raindrops */
.rainy .cloud {
position: absolute;
bottom: 28px;
left: 22px;
width: 68px;
height: 34px;
background: rgba(255,255,255,.95);
border-radius: 40px;
filter: saturate(110%);
}
.rainy .cloud:before,
.rainy .cloud:after {
content: "";
position: absolute;
background: rgba(255,255,255,.95);
border-radius: 50%;
}
.rainy .cloud:before { width: 42px; height: 42px; left: -8px; top: -12px; }
.rainy .cloud:after { width: 38px; height: 38px; right: -6px; top: -8px; }
.rainy .drop {
position: absolute;
top: -20px;
width: 3px; height: 14px;
background: #6ea8f0;
border-radius: 2px;
animation: fall 1s linear infinite;
opacity: 0.9;
}
.rainy .d1 { left: 26px; animation-delay: 0s; }
.rainy .d2 { left: 42px; animation-delay: .15s; }
.rainy .d3 { left: 58px; animation-delay: .25s; }
.rainy .d4 { left: 74px; animation-delay: .35s; }
.rainy .d5 { left: 90px; animation-delay: .45s; }
.rainy .d6 { left: 14px; animation-delay: .55s; }
.rainy .d7 { left: 34px; animation-delay: .65s; }
.rainy .d8 { left: 60px; animation-delay: .75s; }
.rainy .d9 { left: 80px; animation-delay: .85s; }
.rainy .d10 { left: 50px; animation-delay: .95s; }
.rainy .d11 { left: 70px; animation-delay: 1.05s; }
.rainy .d12 { left: 20px; animation-delay: 1.15s; }
/* Snowy icon: drifting snowflakes */
.snowy { position: relative; }
.snowy .flake {
position: absolute;
top: -10px;
width: 6px; height: 6px;
background: #fff;
border-radius: 50%;
opacity: 0.95;
animation: snow 6s linear infinite;
box-shadow: 0 0 8px rgba(255,255,255,.9);
}
.snowy .f1 { left: 8%; }
.snowy .f2 { left: 22%; animation-delay: .5s; }
.snowy .f3 { left: 38%; animation-delay: 1s; }
.snowy .f4 { left: 54%; animation-delay: 1.4s; }
.snowy .f5 { left: 70%; animation-delay: 0.2s; }
.snowy .f6 { left: 86%; animation-delay: 0.8s; }
/* Stormy icon: flashing lightning (constructed with zigzag segments) */
.stormy { position: relative; }
.stormy .bolt {
position: absolute;
top: 14px;
right: 18px;
width: 0;
height: 0;
/* use three zigzag segments to suggest a bolt */
}
.stormy .bolt .seg {
position: absolute;
width: 28px;
height: 6px;
background: #fff;
border-radius: 2px;
transform-origin: left center;
opacity: 0.95;
}
.stormy .bolt .s1 { top: 0px; left: 0px; transform: rotate(25deg); }
.stormy .bolt .s2 { top: 18px; left: 8px; transform: rotate(-22deg); }
.stormy .bolt .s3 { top: 38px; left: 14px; transform: rotate(24deg); }
/* gentle glow around the bolt */
.stormy .bolt { filter: drop-shadow(0 0 8px rgba(255,255,255,.9)); animation: flash 0.8s infinite; }
/* Card content (city, temp, description) */
.card .city {
font-weight: 700;
font-size: 1.05rem;
margin: 0 0 6px;
text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.card .temp {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 4px;
text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.card .desc {
font-size: .92rem;
opacity: .95;
text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
/* Backgrounds for each weather card (gradients) */
.card.sunny { background: linear-gradient(135deg, #7bdfff 0%, #ffd166 60%, #ffb233 100%); }
.card.rainy { background: linear-gradient(135deg, #3b82f6 0%, #6ea8f0 60%, #a4d2ff 100%); }
.card.snowy { background: linear-gradient(135deg, #e6f7ff 0%, #ffffff 60%, #dfefff 100%); color: #0b1a2a; }
.card.stormy { background: linear-gradient(135deg, #2b2b2b 0%, #1f1f1f 60%, #555 100%); }
/* Light text on lighter snowy background */
.card.snowy .city,
.card.snowy .temp,
.card.snowy .desc { color: #0b1a2a; }
/* Keyframes for animations */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes fall {
0% { transform: translateY(0); opacity: 0; }
15% { opacity: 1; }
100% { transform: translateY(120px); opacity: .9; }
}
@keyframes snow {
0% { transform: translateY(-10px) translateX(0); opacity: 0; }
20% { opacity: 1; }
100% { transform: translateY(120px) translateX(var(--dx, 0px)); opacity: .9; }
}
@keyframes flash {
0%, 95% { opacity: 0; }
50% { opacity: 1; }
}
/* Reduced motion preference: disable animations when requested */
@media (prefers-reduced-motion: reduce) {
.sunny .sun { animation: none; }
.rainy .drop { animation: none; }
.snowy .flake { animation: none; }
.stormy .bolt { animation: none; }
}
</style>
</head>
<body>
<div class="wrap">
<h1>Weather Cards (CSS-Only Animations)</h1>
<div class="grid" aria-label="Animated weather cards grid">
<!-- Sunny Card -->
<article class="card sunny" aria-label="Sunny in Lisbon">
<div class="icon sunny" aria-label="Sunny icon">
<div class="sun">
<span class="sun-core"></span>
<span class="ray r1"></span>
<span class="ray r2"></span>
<span class="ray r3"></span>
<span class="ray r4"></span>
<span class="ray r5"></span>
<span class="ray r6"></span>
<span class="ray r7"></span>
<span class="ray r8"></span>
</div>
</div>
<div class="city" style="font-weight:700; font-size:1.05rem; margin-bottom:0;">Lisbon</div>
<div class="temp" style="font-size:1.25rem; margin-bottom:6px;">26°C</div>
<div class="desc" style="opacity:.95;">Bright and sunny</div>
</article>
<!-- Rainy Card -->
<article class="card rainy" aria-label="Rainy in Seattle">
<div class="icon rainy" aria-label="Rain icon">
<div class="cloud" aria-hidden="true"></div>
<span class="drop d1"></span>
<span class="drop d2"></span>
<span class="drop d3"></span>
<span class="drop d4"></span>
<span class="drop d5"></span>
<span class="drop d6"></span>
<span class="drop d7"></span>
<span class="drop d8"></span>
<span class="drop d9"></span>
<span class="drop d10"></span>
<span class="drop d11"></span>
<span class="drop d12"></span>
</div>
<div class="city" style="font-weight:700; font-size:1.05rem; margin-bottom:0;">Seattle</div>
<div class="temp" style="font-size:1.25rem; margin-bottom:6px;">12°C</div>
<div class="desc" style="opacity:.95;">Rain showers</div>
</article>
<!-- Snowy Card -->
<article class="card snowy" aria-label="Snowy in Oslo">
<div class="icon snowy" aria-label="Snow icon" style="position:relative;">
<div class="flake f1" aria-hidden="true"></div>
<div class="flake f2" aria-hidden="true"></div>
<div class="flake f3" aria-hidden="true"></div>
<div class="flake f4" aria-hidden="true"></div>
<div class="flake f5" aria-hidden="true"></div>
<div class="flake f6" aria-hidden="true"></div>
</div>
<div class="city" style="font-weight:700; font-size:1.05rem; margin-bottom:0;">Oslo</div>
<div class="temp" style="font-size:1.25rem; margin-bottom:6px;">-4°C</div>
<div class="desc" style="opacity:.95;">Snowy and cold</div>
</article>
<!-- Stormy Card -->
<article class="card stormy" aria-label="Stormy in London">
<div class="icon stormy" aria-label="Lightning icon" style="position:relative;">
<div class="bolt" aria-hidden="true">
<div class="seg s1"></div>
<div class="seg s2"></div>
<div class="seg s3"></div>
</div>
</div>
<div class="city" style="font-weight:700; font-size:1.05rem; margin-bottom:0;">London</div>
<div class="temp" style="font-size:1.25rem; margin-bottom:6px;">15°C</div>
<div class="desc" style="opacity:.95;">Thunderstorms</div>
</article>
</div>
</div>
<!-- No JavaScript included intentionally (CSS-only demo) -->
</body>
</html>Reasoning trace (11,136 tokens)
**Planning responsive design** I need to create a design using only HTML and CSS, ensuring animations respect user preferences with "prefers-reduced-motion." I'll use @media to switch to still images for those who prefer reduced motion. The page has to look right at a 1280x800 viewport and adjust down to 375px. I’m planning a responsive grid that has 4 columns on desktop and stacks to 1 column on mobile, confirming that makes sense. I think this approach will work well!**Designing hover effects and backgrounds** I need to make sure the cards lift up on hover using transform translateY(-6px) and add a box-shadow. For the backgrounds, I’ll implement four gradients, starting with a sunny theme. This will have a gradient from light blue to yellow/orange and a rotating sun icon with eight rays. I could use pseudo-elements or create small divs for the rays, each rotated accordingly. It’s tricky with CSS alone, but it should work. Oh, should I consider a radial-gradient instead? I'll check the requirements!**Building icons with HTML and CSS** I’m realizing that while radial-gradient is a background image, I should stick to building icons purely from HTML and pseudo-elements to meet the requirements. To create the sunny icon, I’ll structure it like this: a .card that includes an .icon container. Inside, I’ll have a core span and eight ray spans, each representing the rays of the sun. Instead of inline styles for rotation, I’ll use nth-child in CSS to set the transforms. This approach keeps everything consistent and within the guidelines!**Finalizing the sunny icon's CSS** I’m detailing the CSS for the sunny icon, starting with a relative position for the whole icon, sized at 80x80 pixels. The sun’s core will be a 28px circle with a glowing box shadow, positioned centrally using transform. For the rays, I want each one as a 6px by 26px rectangle, centered and individually rotated around the core. I can simplify by placing everything within a container and rotating the rays appropriately. I might adjust the sun to 60x60 pixels for a better fit!**Creating the sun's rays** I need to create eight rays for the sun icon by using spans with a class of "ray." For each ray, I’ll set the transform using nth-child to rotate them around the center. The core idea is to have the rays placed at the top center and then translate them outward using transforms. I can simplify this by positioning each ray absolutely so they can rotate and extend outward nicely from the center. Instead of focusing too much on perfect positioning, I can adjust the transform to get a good visual effect. It’s acceptable as long as they resemble rays!**Implementing weather icons and cards** I’m setting up the CSS for the sun icon, using a .sun class with a spinning animation. Each ray will be positioned around the center using transforms, making sure they extend outward correctly. I'll create animations for other weather icons like rain, snow, and lightning, ensuring they're visually appealing without images. I'll design each weather card to show essential information like the city name and temperature while maintaining accessible semantics. For responsive design, I’ll create a grid layout that adapts to various screen sizes. Cloud shapes can be made using border-radius to match requirements without images!**Building weather icons and cards** I’m implementing the rainy weather icon with a cloud and multiple raindrops using CSS for positioning and animation. Each raindrop will have specific positions and animations to create a continuous falling effect. For snow, I plan to create snowflakes that drift sideways, while lightning will be made from stacked rectangles that flash. I'll ensure the HTML structure is semantic, using articles for weather cards. Then, I’ll add gradient backgrounds for each weather type and ensure the text is readable against them. Hover effects will lift the cards slightly for a dynamic feel.**Creating snowflakes and lightning animations** I’m designing snowflakes as small circles that drift downward using CSS animations. Each flake will vary in position and size for a more natural appearance. I’ll ensure they appear from above with a fall animation, including horizontal drift using keyframes. For lightning, I plan to construct a zigzag shape using stacked segments, styled to form the bolt. This will be done with careful positioning and sizing to achieve a realistic look. I’ll ensure everything performs well by applying necessary CSS properties.**Designing zigzag lightning and sunny icon** I'm working on a zigzag lightning effect by using rotated rectangles for segments. To make it simpler, I’ll create a bolt out of three div elements with specific rotations to get that zigzag shape. Each segment will have a flash animation to create a blinking effect, ensuring the lightning stands out against a dark gradient background. For a sunny icon, I'll use a circular sun with rays styled as spans to achieve that cheerful look. I'll ensure everything is accessible and runs smoothly without errors. Let's make it visually appealing with gradients and hover effects.**Creating rain and storm effects** I'm defining a cloud using CSS with rounded edges, shadow, and raindrops that fall from it. The raindrops will have animation to create a realistic falling effect, with varying left positions and opacity changes to enhance the look. For snowflakes, I’ll create small circles that will also animate to fall, using keyframes for smooth motion. Lastly, I'm designing a lightning bolt that will use CSS shapes for an eye-catching zigzag effect. I'll implement clip-path for a stylized look, ensuring all components are animated properly.**Designing a lightning bolt and weather cards** I'm simplifying the lightning bolt design using two rectangles to create a zigzag shape with segments making it appear more like real lightning. Instead of complex shapes, I can implement a bold visual with smaller triangles or segments, allowing for an animated flash effect. For the weather cards, I'm planning to include various cities and their weather conditions, ensuring each card has a background that matches the weather type, like sunny, rainy, snowy, or stormy. I'll finalize this by writing clean HTML and CSS code.