GPT-6 Luna
by OpenAIReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 59.4 s
- Cost
- $0.0040
- Output tokens
- 7,915
- Spent thinking
- 2,644 tokens
- Speed
- 149.7 tok/s
- Console errors
- 0
- First token after
- 6.5 s
- First visible text after
- 29.6 s
- Prompt tokens
- 498
- Code size
- 15.9 KB
- Finish reason
- stop
- Served by
- OpenAI
- Model id
openai/gpt-6-luna- Reasoning sent
{"effort":"high"}- Max output
- 64,000 tokens
- Generated
- Nov 10, 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 · 638 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Weather, Everywhere</title>
<style>
:root {
color-scheme: dark;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: #0d1926;
color: #f4f7fa;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-width: 320px;
min-height: 100vh;
background:
radial-gradient(ellipse at 12% 0%, rgba(54, 91, 125, .23), transparent 42%),
radial-gradient(ellipse at 90% 100%, rgba(45, 66, 95, .18), transparent 40%),
#0d1926;
}
.page {
width: min(1200px, calc(100% - 80px));
margin: 0 auto;
padding: 45px 0 48px;
}
.masthead {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 28px;
margin-bottom: 34px;
}
.eyebrow {
display: flex;
align-items: center;
gap: 9px;
margin: 0 0 12px;
color: #a9c0d2;
font-size: 10px;
font-weight: 750;
letter-spacing: .2em;
text-transform: uppercase;
}
.eyebrow-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #f9c969;
box-shadow: 0 0 12px rgba(249, 201, 105, .75);
}
h1 {
margin: 0;
color: #f5f7f9;
font-size: clamp(30px, 3.2vw, 42px);
font-weight: 650;
letter-spacing: -.045em;
line-height: 1.06;
}
.subtitle {
margin: 11px 0 0;
color: #91a3b4;
font-size: 14px;
letter-spacing: .01em;
}
.forecast-note {
display: flex;
align-items: center;
gap: 12px;
flex: 0 0 auto;
margin-bottom: 3px;
padding: 12px 15px;
border: 1px solid rgba(191, 212, 230, .12);
border-radius: 15px;
background: rgba(255, 255, 255, .035);
color: #dce6ed;
}
.note-mark {
display: grid;
width: 29px;
height: 29px;
place-items: center;
border: 1px solid rgba(255,255,255,.12);
border-radius: 10px;
color: #f9cd78;
font-size: 14px;
}
.note-copy {
display: grid;
gap: 3px;
font-size: 11px;
}
.note-copy strong {
font-size: 11px;
font-weight: 650;
}
.note-copy span {
color: #8fa2b4;
font-size: 10px;
}
.weather-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.weather-card {
--ink: #fff;
--muted: rgba(255,255,255,.72);
--rule: rgba(255,255,255,.22);
position: relative;
isolation: isolate;
display: flex;
min-width: 0;
min-height: 455px;
flex-direction: column;
overflow: hidden;
padding: 22px 22px 19px;
border: 1px solid rgba(255,255,255,.23);
border-radius: 25px;
color: var(--ink);
box-shadow: 0 16px 36px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.22);
transition: transform .35s cubic-bezier(.2,.75,.25,1), box-shadow .35s ease;
}
.weather-card::before {
position: absolute;
z-index: -1;
inset: 0;
content: "";
background: radial-gradient(ellipse at 50% 28%, rgba(255,255,255,.17), transparent 47%);
pointer-events: none;
}
.weather-card::after {
position: absolute;
z-index: -1;
right: -38px;
bottom: -70px;
width: 190px;
height: 190px;
border: 1px solid rgba(255,255,255,.11);
border-radius: 50%;
content: "";
box-shadow: 0 0 0 19px rgba(255,255,255,.025), 0 0 0 39px rgba(255,255,255,.02);
pointer-events: none;
}
.weather-card:hover {
transform: translateY(-8px);
box-shadow: 0 25px 48px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.25);
}
.sunny {
--ink: #402b1b;
--muted: rgba(64,43,27,.68);
--rule: rgba(64,43,27,.16);
background: linear-gradient(150deg, #ffdf91 0%, #ffc365 50%, #f6a24f 100%);
}
.rainy {
background: linear-gradient(150deg, #5b9bc8 0%, #3974a9 47%, #294d81 100%);
}
.snowy {
--ink: #173b4c;
--muted: rgba(23,59,76,.67);
--rule: rgba(23,59,76,.17);
background: linear-gradient(150deg, #e2f8f7 0%, #bce8eb 48%, #8fcbdc 100%);
}
.stormy {
background: linear-gradient(150deg, #55558c 0%, #393d73 48%, #252d59 100%);
}
.card-top {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 20px;
}
.weather-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 10px;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
}
.weather-label::before {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
content: "";
opacity: .78;
}
.card-index {
color: var(--muted);
font-size: 10px;
font-weight: 650;
letter-spacing: .1em;
}
.icon-scene {
position: relative;
display: grid;
height: 166px;
flex: 0 0 166px;
place-items: center;
overflow: hidden;
}
.sunny .icon-scene::before {
position: absolute;
width: 142px;
height: 142px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,.38), rgba(255,255,255,0) 68%);
content: "";
}
.sun-icon {
position: relative;
width: 120px;
height: 120px;
}
.sun-rays {
position: absolute;
inset: 5px;
border-radius: 50%;
background: repeating-conic-gradient(from 0deg, transparent 0deg 12deg, rgba(255,255,255,.93) 12deg 17deg, transparent 17deg 30deg);
-webkit-mask: radial-gradient(circle, transparent 0 39px, #000 41px 52px, transparent 54px);
mask: radial-gradient(circle, transparent 0 39px, #000 41px 52px, transparent 54px);
animation: spin 22s linear infinite;
}
.sun-core {
position: absolute;
top: 31px;
left: 31px;
width: 58px;
height: 58px;
border: 1px solid rgba(255,255,255,.72);
border-radius: 50%;
background: radial-gradient(circle at 34% 28%, #fff8d8, #ffe181 48%, #ffb842 100%);
box-shadow: 0 0 30px rgba(255,248,213,.52), inset -5px -6px 12px rgba(238,151,36,.18);
}
.cloud {
position: absolute;
top: 47px;
left: 50%;
z-index: 2;
width: 91px;
height: 29px;
border-radius: 22px;
background: #f5fbff;
transform: translateX(-50%);
filter: drop-shadow(0 5px 7px rgba(21,47,74,.12));
}
.cloud::before,
.cloud::after {
position: absolute;
bottom: 8px;
border-radius: 50%;
background: inherit;
content: "";
}
.cloud::before {
left: 14px;
width: 43px;
height: 43px;
}
.cloud::after {
right: 10px;
width: 55px;
height: 55px;
}
.rain-cloud { background: #f3f9fc; }
.snow-cloud { background: #fff; }
.storm-cloud { background: #d8e0f2; }
.drop {
position: absolute;
z-index: 3;
top: 101px;
width: 3px;
height: 14px;
border-radius: 4px;
background: rgba(229,248,255,.92);
transform: rotate(18deg);
animation: rain-fall 1.15s ease-in infinite;
}
.drop-one { left: calc(50% - 31px); animation-delay: -.15s; }
.drop-two { left: calc(50% - 5px); animation-delay: -.62s; }
.drop-three { left: calc(50% + 22px); animation-delay: -.37s; }
.flake {
position: absolute;
z-index: 3;
width: 19px;
height: 19px;
color: #fff;
background:
linear-gradient(45deg, transparent 46%, currentColor 47% 53%, transparent 54%),
linear-gradient(-45deg, transparent 46%, currentColor 47% 53%, transparent 54%);
animation: snow-drift 3.8s ease-in-out infinite;
}
.flake::before,
.flake::after {
position: absolute;
top: 8px;
left: 1px;
width: 17px;
height: 2px;
border-radius: 2px;
background: currentColor;
content: "";
}
.flake::after { transform: rotate(90deg); }
.flake-one { top: 105px; left: calc(50% - 43px); animation-delay: -.8s; }
.flake-two { top: 116px; left: calc(50% - 10px); width: 15px; height: 15px; animation-delay: -2.1s; }
.flake-three { top: 101px; left: calc(50% + 29px); width: 13px; height: 13px; animation-delay: -1.4s; }
.bolt {
position: absolute;
z-index: 4;
top: 82px;
left: 50%;
width: 30px;
height: 50px;
background: linear-gradient(135deg, #fff6bd, #ffd35f 70%);
clip-path: polygon(53% 0, 100% 0, 69% 38%, 94% 38%, 26% 100%, 40% 53%, 11% 53%);
filter: drop-shadow(0 0 8px rgba(255,218,105,.75));
transform: translateX(-50%);
animation: lightning 2.3s steps(1, end) infinite;
}
.city-line {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 6px;
margin-top: 1px;
}
.city {
min-width: 0;
margin: 0;
font-size: 18px;
font-weight: 650;
letter-spacing: -.025em;
}
.temperature {
flex: 0 0 auto;
margin: 0;
font-size: 51px;
font-weight: 550;
letter-spacing: -.085em;
line-height: .95;
}
.description {
margin: 11px 0 0;
color: var(--muted);
font-size: 12px;
line-height: 1.5;
}
.card-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: auto;
padding-top: 16px;
border-top: 1px solid var(--rule);
}
.range {
display: flex;
align-items: center;
gap: 7px;
font-size: 10px;
font-weight: 650;
letter-spacing: .04em;
}
.range-label {
color: var(--muted);
font-size: 9px;
font-weight: 750;
letter-spacing: .13em;
}
.range-low { opacity: .73; }
.metric {
display: flex;
align-items: center;
gap: 6px;
color: var(--muted);
font-size: 10px;
white-space: nowrap;
}
.metric-mark {
position: relative;
width: 12px;
height: 14px;
}
.metric-mark::before {
position: absolute;
top: 0;
left: 4px;
width: 4px;
height: 10px;
border: 1px solid currentColor;
border-radius: 5px;
content: "";
}
.metric-mark::after {
position: absolute;
bottom: 0;
left: 2px;
width: 8px;
height: 8px;
border: 1px solid currentColor;
border-radius: 50%;
background: currentColor;
content: "";
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@keyframes rain-fall {
0% { opacity: 0; transform: translateY(-5px) rotate(18deg); }
25% { opacity: 1; }
100% { opacity: 0; transform: translateY(22px) rotate(18deg); }
}
@keyframes snow-drift {
0%, 100% { transform: translate3d(0, -4px, 0) rotate(0deg); }
50% { transform: translate3d(5px, 8px, 0) rotate(45deg); }
}
@keyframes lightning {
0%, 8%, 10%, 12%, 57%, 59%, 61%, 100% { opacity: .18; }
9%, 11%, 58%, 60% { opacity: 1; }
}
@media (max-width: 1050px) {
.weather-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.weather-card { min-height: 440px; }
}
@media (max-width: 620px) {
.page {
width: calc(100% - 36px);
padding: 28px 0 32px;
}
.masthead {
display: block;
margin-bottom: 24px;
}
h1 { font-size: 34px; }
.subtitle {
max-width: 290px;
font-size: 13px;
line-height: 1.5;
}
.forecast-note {
display: inline-flex;
margin-top: 18px;
}
.weather-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.weather-card {
min-height: 415px;
padding: 20px 22px 18px;
}
.icon-scene { height: 148px; flex-basis: 148px; }
.temperature { font-size: 48px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation: none !important;
scroll-behavior: auto !important;
transition: none !important;
}
}
</style>
</head>
<body>
<main class="page">
<header class="masthead">
<div>
<p class="eyebrow"><span class="eyebrow-dot"></span> Sky notes · world forecast</p>
<h1>A little weather,<br>wherever you are.</h1>
<p class="subtitle">Four skies, one quick look at what the day has in store.</p>
</div>
<aside class="forecast-note" aria-label="Forecast overview">
<span class="note-mark" aria-hidden="true">✳</span>
<span class="note-copy"><strong>Today’s forecast</strong><span>Four cities · live in spirit</span></span>
</aside>
</header>
<section class="weather-grid" aria-label="Weather in four cities">
<article class="weather-card sunny" aria-label="Sunny weather in Lisbon, 27 degrees">
<div class="card-top">
<span class="weather-label">Sunny</span>
<span class="card-index">01 / 04</span>
</div>
<div class="icon-scene" aria-hidden="true">
<div class="sun-icon">
<div class="sun-rays"></div>
<div class="sun-core"></div>
</div>
</div>
<div class="city-line">
<h2 class="city">Lisbon</h2>
<p class="temperature">27°</p>
</div>
<p class="description">Clear skies all afternoon</p>
<div class="card-bottom">
<div class="range"><span class="range-label">H</span><span>29°</span><span class="range-label">L</span><span class="range-low">19°</span></div>
<div class="metric"><span class="metric-mark" aria-hidden="true"></span>Feels like 29°</div>
</div>
</article>
<article class="weather-card rainy" aria-label="Rainy weather in Seattle, 14 degrees">
<div class="card-top">
<span class="weather-label">Rain showers</span>
<span class="card-index">02 / 04</span>
</div>
<div class="icon-scene" aria-hidden="true">
<div class="cloud rain-cloud"></div>
<span class="drop drop-one"></span>
<span class="drop drop-two"></span>
<span class="drop drop-three"></span>
</div>
<div class="city-line">
<h2 class="city">Seattle</h2>
<p class="temperature">14°</p>
</div>
<p class="description">A soft rain passing through</p>
<div class="card-bottom">
<div class="range"><span class="range-label">H</span><span>16°</span><span class="range-label">L</span><span class="range-low">11°</span></div>
<div class="metric"><span class="metric-mark" aria-hidden="true"></span>Feels like 12°</div>
</div>
</article>
<article class="weather-card snowy" aria-label="Snowy weather in Reykjavik, minus 2 degrees">
<div class="card-top">
<span class="weather-label">Light snow</span>
<span class="card-index">03 / 04</span>
</div>
<div class="icon-scene" aria-hidden="true">
<div class="cloud snow-cloud"></div>
<span class="flake flake-one"></span>
<span class="flake flake-two"></span>
<span class="flake flake-three"></span>
</div>
<div class="city-line">
<h2 class="city">Reykjavík</h2>
<p class="temperature">−2°</p>
</div>
<p class="description">Flurries drifting across town</p>
<div class="card-bottom">
<div class="range"><span class="range-label">H</span><span>1°</span><span class="range-label">L</span><span class="range-low">−5°</span></div>
<div class="metric"><span class="metric-mark" aria-hidden="true"></span>Feels like −6°</div>
</div>
</article>
<article class="weather-card stormy" aria-label="Stormy weather in Chicago, 18 degrees">
<div class="card-top">
<span class="weather-label">Thunderstorm</span>
<span class="card-index">04 / 04</span>
</div>
<div class="icon-scene" aria-hidden="true">
<div class="cloud storm-cloud"></div>
<div class="bolt"></div>
</div>
<div class="city-line">
<h2 class="city">Chicago</h2>
<p class="temperature">18°</p>
</div>
<p class="description">Thunder rolling in after dark</p>
<div class="card-bottom">
<div class="range"><span class="range-label">H</span><span>21°</span><span class="range-label">L</span><span class="range-low">15°</span></div>
<div class="metric"><span class="metric-mark" aria-hidden="true"></span>Feels like 17°</div>
</div>
</article>
</section>
</main>
</body>
</html>Reasoning trace (2,644 tokens)
**Designing CSS snowflakes** I'm thinking about how to construct snowflakes using CSS. The snowflake element could be created with a horizontal line using `::before` and a vertical line with `::after`. I might also want to add some diagonal lines via background linear gradients. For the CSS, I'll set the width and height to 18 pixels. I should incorporate multiple linear gradients for the background to achieve the desired effect. This sounds like a fun challenge!**Designing card layouts** I am working on stage 155 for card designs. There’s a need for a single card per row on mobile, while desktop can have up to four cards in a row. The design should fit the viewport, so scrolling may be acceptable. I’m planning a dark navy header with a white accent. Each card will have a distinct background based on the weather type, while maintaining a consistent layout with a floating label and hidden overflow for aesthetic purposes.**Conceptualizing HTML layout** I'm thinking about the layout for my HTML design. I want a polished header with a logo for "SKY / NOTES." The body could have a dark gradient background and a max width of 1280 with specific padding. I envision a flex display for the header and a grid layout with four columns for the content. Each card will have specific dimensions, rounded corners, and some shadow. I think I should include a gradient and work through the elements like the header and temperature display.**Designing weather card elements** I'm thinking about the visual elements for a weather card. I want to use radial gradients for the background overlay and make sure z-index interactions work well. The content should have a relative z-index, and I'll add a decorative circle border for style. For the cloud shapes, I'll need specific positioning and dimensions, and I'll consider layering for rain and snow. I should also think about animations and ensuring backgrounds align with the overall design. The footer will show high temperatures, which ties everything together!**Optimizing animations** I think freezing animations could be achieved with `animation: none !important;` to reduce motion. It’s important to consider how to pause the animations rather than completely disable them. However, keeping rays and drops static seems fine. I don't want to use JavaScript for this either — the goal is to respect requirements while still producing effective output. I'll output the relevant code once I've clarified these points!