GPT-6.1 Terra
by OpenAIReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 1 min 32 s
- Cost
- $0.041
- Output tokens
- 8,135
- Spent thinking
- 2,721 tokens
- Speed
- 96 tok/s
- Console errors
- 0
- First token after
- 7.0 s
- First visible text after
- 49.4 s
- Prompt tokens
- 498
- Code size
- 16.1 KB
- Finish reason
- stop
- Served by
- OpenAI
- Model id
openai/gpt-6.1-terra- Reasoning sent
{"effort":"high"}- 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 · 661 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A Little Weather, Everywhere</title>
<style>
:root {
color-scheme: light;
--ink: #263533;
--muted: #7b8580;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
color: var(--ink);
font-family: Arial, Helvetica, sans-serif;
background:
radial-gradient(circle at 4% 4%, rgba(233, 216, 190, .3), transparent 29%),
radial-gradient(circle at 98% 92%, rgba(193, 213, 209, .25), transparent 29%),
#f7f7f2;
}
.page {
width: min(1160px, calc(100% - 64px));
margin: 0 auto;
}
.topbar {
height: 84px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #dedfd8;
}
.brand {
display: flex;
align-items: center;
gap: 11px;
}
.brand-mark {
position: relative;
width: 33px;
height: 33px;
border: 1px solid #85938a;
border-radius: 50%;
}
.brand-mark::before {
content: "";
position: absolute;
width: 13px;
height: 13px;
left: 9px;
top: 9px;
border-radius: 50%;
background: #d89e67;
box-shadow: 0 0 0 4px #f2e6d4;
}
.brand-name {
font-size: 13px;
font-weight: 800;
letter-spacing: .18em;
}
.brand-sub {
margin-top: 4px;
color: #929b93;
font-size: 8px;
font-weight: 700;
letter-spacing: .15em;
}
.top-note {
display: flex;
align-items: center;
gap: 13px;
color: #829087;
font-size: 9px;
font-weight: 700;
letter-spacing: .14em;
}
.top-note i {
width: 5px;
height: 5px;
background: #d9a56e;
border-radius: 50%;
}
.intro {
display: flex;
align-items: end;
justify-content: space-between;
gap: 30px;
padding: 48px 0 32px;
}
.eyebrow {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 11px;
color: #a77b5a;
font-size: 10px;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
}
.eyebrow::before {
content: "";
width: 22px;
height: 2px;
background: #c79168;
}
h1 {
margin: 0;
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(35px, 4vw, 49px);
font-weight: 400;
letter-spacing: -.045em;
line-height: 1.1;
}
h1 em {
color: #81948b;
font-weight: 400;
}
.intro-note {
max-width: 230px;
margin: 0 0 3px;
color: #89938b;
font-size: 12px;
line-height: 1.65;
}
.cards {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 430px;
overflow: hidden;
padding: 22px;
border: 1px solid rgba(255,255,255,.36);
border-radius: 20px;
box-shadow: 0 12px 25px rgba(49, 64, 57, .07);
transition: transform .35s ease, box-shadow .35s ease;
}
.card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 35px rgba(49, 64, 57, .15);
}
.sunny {
background: radial-gradient(circle at 52% 28%, #f8dea2 0, transparent 48%),
linear-gradient(145deg, #f4d49b, #e8b17d);
color: #624a38;
}
.rainy {
background: radial-gradient(circle at 50% 28%, #c8e0e5 0, transparent 51%),
linear-gradient(145deg, #b7d4da, #8caebd);
color: #395762;
}
.snowy {
background: radial-gradient(circle at 50% 28%, #f2f7f5 0, transparent 52%),
linear-gradient(145deg, #e2ece9, #b9cdd1);
color: #50676a;
}
.stormy {
background: radial-gradient(circle at 50% 25%, #727c98 0, transparent 50%),
linear-gradient(145deg, #66728c, #3b455e);
color: #f1f2ec;
border-color: rgba(255,255,255,.1);
}
.card-top {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 2;
font-size: 9px;
font-weight: 700;
letter-spacing: .14em;
}
.card-index { opacity: .68; }
.tag {
padding: 7px 9px 6px;
border: 1px solid currentColor;
border-radius: 20px;
font-size: 8px;
line-height: 1;
letter-spacing: .1em;
opacity: .65;
}
.art {
position: relative;
height: 205px;
flex: 0 0 205px;
}
.orbit {
position: absolute;
left: 50%;
top: 50%;
width: 166px;
height: 166px;
transform: translate(-50%, -50%);
border: 1px solid currentColor;
border-radius: 50%;
opacity: .13;
}
.orbit::before {
content: "";
position: absolute;
inset: 13px;
border: 1px solid currentColor;
border-radius: 50%;
opacity: .55;
}
.orbit::after {
content: "";
position: absolute;
top: 25px;
right: 15px;
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
}
.sun-rays {
position: absolute;
width: 150px;
height: 150px;
left: 50%;
top: 50%;
margin: -75px;
animation: spin 24s linear infinite;
}
.ray {
position: absolute;
left: 50%;
top: 50%;
width: 3px;
height: 13px;
margin: -6px 0 0 -1.5px;
border-radius: 4px;
background: #e2a654;
transform: rotate(var(--angle)) translateY(-64px);
}
.sun-disc {
position: absolute;
left: 50%;
top: 50%;
width: 90px;
height: 90px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: linear-gradient(145deg, #ffe9a5, #f4c45f);
box-shadow: 0 8px 20px rgba(176, 113, 48, .17), inset -5px -6px 12px rgba(226, 164, 63, .16);
}
.sun-disc::after {
content: "";
position: absolute;
inset: 9px;
border: 1px solid rgba(255,255,255,.27);
border-radius: 50%;
}
.cloud {
position: absolute;
z-index: 2;
left: 50%;
top: 76px;
width: 130px;
height: 50px;
margin-left: -65px;
border-radius: 45px;
background: #f6faf7;
box-shadow: 0 10px 18px rgba(62, 91, 101, .14);
animation: float 4s ease-in-out infinite;
}
.cloud::before,
.cloud::after {
content: "";
position: absolute;
background: inherit;
border-radius: 50%;
}
.cloud::before {
width: 69px;
height: 69px;
left: 18px;
top: -31px;
}
.cloud::after {
width: 58px;
height: 58px;
right: 12px;
top: -22px;
}
.snowy .cloud { background: #fff; }
.stormy .cloud {
background: #aeb7c6;
box-shadow: 0 10px 20px rgba(29, 36, 54, .22);
}
.drop {
position: absolute;
z-index: 1;
left: calc(50% + var(--x));
top: var(--y, 128px);
width: 3px;
height: 15px;
border-radius: 5px;
background: #56899e;
opacity: .7;
animation: rainfall 1.3s ease-in infinite;
animation-delay: var(--delay, 0s);
}
.flake {
position: absolute;
z-index: 1;
left: calc(50% + var(--x));
top: var(--y, 130px);
width: 12px;
height: 2px;
border-radius: 2px;
background: #fff;
animation: snowfall 2.8s ease-in-out infinite;
animation-delay: var(--delay, 0s);
}
.flake::before,
.flake::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: inherit;
}
.flake::before { transform: rotate(60deg); }
.flake::after { transform: rotate(-60deg); }
.bolt {
position: absolute;
z-index: 1;
top: 107px;
left: 50%;
width: 47px;
height: 78px;
margin-left: -22px;
background: #ffdc80;
clip-path: polygon(47% 0, 100% 0, 64% 37%, 87% 37%, 13% 100%, 34% 51%, 7% 51%);
animation: flash 3s ease-in-out infinite;
}
.stormy .drop {
background: #b4c6db;
height: 11px;
opacity: .55;
}
.place {
margin-top: auto;
}
.country {
margin-bottom: 5px;
font-size: 9px;
font-weight: 700;
letter-spacing: .16em;
opacity: .7;
}
.place-row {
display: flex;
align-items: end;
justify-content: space-between;
gap: 4px;
}
.city {
margin: 0 0 5px;
font-family: Georgia, "Times New Roman", serif;
font-size: 25px;
font-weight: 400;
letter-spacing: -.035em;
}
.temperature {
white-space: nowrap;
font-size: 46px;
font-weight: 300;
letter-spacing: -.07em;
line-height: .95;
}
.temperature sup {
position: relative;
top: -.14em;
margin-left: 2px;
font-size: .55em;
letter-spacing: 0;
}
.condition {
display: flex;
align-items: center;
gap: 7px;
margin-top: 15px;
font-size: 12px;
font-weight: 600;
}
.condition::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
opacity: .65;
}
.card-bottom {
display: flex;
justify-content: space-between;
gap: 5px;
margin-top: 19px;
padding-top: 14px;
border-top: 1px solid currentColor;
font-size: 9px;
font-weight: 700;
letter-spacing: .08em;
opacity: .65;
}
.page-footer {
display: flex;
justify-content: space-between;
gap: 20px;
padding: 27px 1px 35px;
color: #98a099;
font-size: 10px;
letter-spacing: .03em;
}
.footer-label {
font-size: 9px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-7px); }
}
@keyframes rainfall {
0% { transform: translateY(-7px) rotate(17deg); opacity: 0; }
20% { opacity: .75; }
80% { opacity: .75; }
100% { transform: translateY(23px) rotate(17deg); opacity: 0; }
}
@keyframes snowfall {
0% { transform: translate(0, -5px) rotate(0); opacity: 0; }
20% { opacity: .95; }
80% { opacity: .95; }
100% { transform: translate(10px, 29px) rotate(65deg); opacity: 0; }
}
@keyframes flash {
0%, 42%, 49%, 100% { opacity: .85; }
44%, 48% { opacity: .35; }
45%, 50% { opacity: 1; }
}
@media (max-width: 850px) {
.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card { min-height: 420px; }
.intro { padding-top: 38px; }
}
@media (max-width: 520px) {
.page { width: min(100% - 36px, 390px); }
.topbar { height: 72px; }
.top-note { font-size: 8px; gap: 7px; }
.intro { display: block; padding: 36px 0 25px; }
.intro-note { margin-top: 13px; max-width: 300px; }
h1 { font-size: 38px; }
.cards { grid-template-columns: 1fr; gap: 15px; }
.card { min-height: 400px; }
.art { height: 190px; flex-basis: 190px; }
.page-footer { line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
.card:hover { transform: none; }
.drop, .flake { opacity: .8; }
}
</style>
</head>
<body>
<main class="page">
<header class="topbar">
<div class="brand">
<span class="brand-mark" aria-hidden="true"></span>
<div>
<div class="brand-name">ATMOS</div>
<div class="brand-sub">WEATHER, IN GOOD COMPANY</div>
</div>
</div>
<div class="top-note"><span>A LITTLE FIELD GUIDE</span><i></i><span>04 PLACES</span></div>
</header>
<section aria-labelledby="page-title">
<div class="intro">
<div>
<div class="eyebrow">The forecast collection</div>
<h1 id="page-title">A little weather, <em>everywhere.</em></h1>
</div>
<p class="intro-note">Four places, four moods.<br>A little reminder to look up.</p>
</div>
<div class="cards">
<article class="card sunny">
<div class="card-top"><span class="card-index">01 / SUNNY</span><span class="tag">CLEAR SKY</span></div>
<div class="art" aria-hidden="true">
<div class="orbit"></div>
<div class="sun-rays">
<span class="ray" style="--angle:0deg"></span>
<span class="ray" style="--angle:45deg"></span>
<span class="ray" style="--angle:90deg"></span>
<span class="ray" style="--angle:135deg"></span>
<span class="ray" style="--angle:180deg"></span>
<span class="ray" style="--angle:225deg"></span>
<span class="ray" style="--angle:270deg"></span>
<span class="ray" style="--angle:315deg"></span>
</div>
<div class="sun-disc"></div>
</div>
<div class="place">
<div class="country">PORTUGAL</div>
<div class="place-row"><h2 class="city">Lisbon</h2><div class="temperature">27<sup>°</sup></div></div>
<div class="condition">Sunny skies</div>
<div class="card-bottom"><span>H: 29° L: 19°</span><span>FEELS LIKE 29°</span></div>
</div>
</article>
<article class="card rainy">
<div class="card-top"><span class="card-index">02 / RAINY</span><span class="tag">SHOWERS</span></div>
<div class="art" aria-hidden="true">
<div class="orbit"></div>
<div class="cloud"></div>
<span class="drop" style="--x:-47px;--y:130px;--delay:-.2s"></span>
<span class="drop" style="--x:-25px;--y:139px;--delay:-.7s"></span>
<span class="drop" style="--x:-3px;--y:128px;--delay:-1s"></span>
<span class="drop" style="--x:20px;--y:138px;--delay:-.4s"></span>
<span class="drop" style="--x:42px;--y:129px;--delay:-.9s"></span>
</div>
<div class="place">
<div class="country">DENMARK</div>
<div class="place-row"><h2 class="city">Copenhagen</h2><div class="temperature">16<sup>°</sup></div></div>
<div class="condition">Light rain</div>
<div class="card-bottom"><span>H: 18° L: 12°</span><span>FEELS LIKE 15°</span></div>
</div>
</article>
<article class="card snowy">
<div class="card-top"><span class="card-index">03 / SNOWY</span><span class="tag">FLURRIES</span></div>
<div class="art" aria-hidden="true">
<div class="orbit"></div>
<div class="cloud"></div>
<span class="flake" style="--x:-48px;--y:132px;--delay:-.5s"></span>
<span class="flake" style="--x:-25px;--y:146px;--delay:-1.5s"></span>
<span class="flake" style="--x:-5px;--y:128px;--delay:-2.2s"></span>
<span class="flake" style="--x:18px;--y:144px;--delay:-.8s"></span>
<span class="flake" style="--x:39px;--y:131px;--delay:-1.8s"></span>
</div>
<div class="place">
<div class="country">ICELAND</div>
<div class="place-row"><h2 class="city">Reykjavík</h2><div class="temperature">−2<sup>°</sup></div></div>
<div class="condition">Snow flurries</div>
<div class="card-bottom"><span>H: 1° L: −5°</span><span>FEELS LIKE −6°</span></div>
</div>
</article>
<article class="card stormy">
<div class="card-top"><span class="card-index">04 / STORMY</span><span class="tag">THUNDER</span></div>
<div class="art" aria-hidden="true">
<div class="orbit"></div>
<div class="cloud"></div>
<div class="bolt"></div>
<span class="drop" style="--x:-46px;--y:132px;--delay:-.5s"></span>
<span class="drop" style="--x:-33px;--y:144px;--delay:-1s"></span>
<span class="drop" style="--x:36px;--y:132px;--delay:-.2s"></span>
<span class="drop" style="--x:48px;--y:145px;--delay:-.8s"></span>
</div>
<div class="place">
<div class="country">UNITED STATES</div>
<div class="place-row"><h2 class="city">New York</h2><div class="temperature">19<sup>°</sup></div></div>
<div class="condition">Thunderstorms</div>
<div class="card-bottom"><span>H: 22° L: 17°</span><span>FEELS LIKE 18°</span></div>
</div>
</article>
</div>
</section>
<footer class="page-footer">
<span>Whatever the weather, there’s beauty in it.</span>
<span class="footer-label">A forecast for every feeling</span>
</footer>
</main>
</body>
</html>Reasoning trace (2,721 tokens)
**Designing Weather Dashboard** I need to focus on crafting a complete HTML design that's visually polished for the weather dashboard. The user needs four animated weather cards made entirely with CSS, without relying on SVG images or icon fonts. I'll use CSS shapes to create attractive visuals and aim for a dark midnight navy gradient backdrop. Each card will have a matching background gradient based on the weather condition, and I want to ensure the layout is professional and distinct. The header will read, "A little weather, everywhere," with the top section displaying "THE DAILY FORECAST" and the current date.**Designing Weather Dashboard Layout** I'm working on a viewport size of 1280x800. The header will be at the top, with the four weather cards positioned around the vertical space of 205-640, and a footer at the bottom. I’m considering a light warm off-white background with subtle radial gradients and grain. The cards will feature gradients in yellow, blue, lavender, and charcoal, ensuring readability with good contrast. Each card's background will match different weather conditions, like muted apricot for sunny and dark inky purple for stormy. The header will display a circular logo, and I want to use a serif font, Georgia, for the main headline.**Designing Weather Card Details** I'm planning to place a small number and weather condition at the top of each card, like "01 / CLEAR SKY," along with a circular condition label that resembles a diamond. The cards will have rounded corners of 24 pixels, and I'll make the icon region quite large at 190 pixels. At the bottom, there will be a display for the location and temperature, styled for readability. To create a sun graphic with rotating rays, I’ll position a circular sun disk in the center, adding eight rectangular rays using CSS.**Designing rain and snow effects** I'm thinking about how to style a rain card with a white or cream background. The cloud element will be positioned absolutely, so it'll float nicely with a specific size and color. I want the raindrops to animate, which will involve some CSS transformations and keyframe animations. The snowflakes will have a clever design using pseudo-elements, and I’m considering using unicode for the snowflake symbol. I'll ensure everything looks cohesive and artistic!**Creating storm animations** I’m working on designing a storm scene featuring a dark card with a cloud base color. I'll use a clip-path polygon for the lightning bolt, which will be bright gold and centered just below the cloud. I need to ensure that it's visible for a three-second screenshot, so it requires a flickering animation with carefully timed opacity changes. Plus, I want to incorporate rain and stars, along with small text for added design. This should bring everything together nicely!**Designing a sun animation** I'm working on a sun animation with specific dimensions and styles in mind. I need to use properties like border and border-radius for the sun's shape, and I can utilize radial-gradient backgrounds. Each sun ray will be positioned absolutely and will incorporate a rotation effect based on custom properties. The user prefers avoiding inline event handlers, so I’ll consider using nth-child declarations instead. I’m also contemplating how to animate clouds properly within the scene while ensuring elements have appropriate layering.**Creating cloud shapes** I’m designing cloud shapes with pseudo-elements for added depth and color. I’ll ensure to layer them properly to create a nice visual effect, using inherited backgrounds for a cohesive look. To add some realism, I’m considering using box-shadow for subtle floating shadows on the clouds. I think I can achieve this with two circles while positioning the clouds toward the top of the container. It’s all about balancing aesthetics and functionality here!