GPT-6 Luna Pro
by OpenAIreasoning defaultClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 1 min 39 s
- Cost
- $0.0086
- Output tokens
- 14,508
- Spent thinking
- 4,729 tokens
- Speed
- 786.8 tok/s
- Console errors
- 0
- First token after
- 1 min 20 s
- First visible text after
- 1 min 39 s
- Prompt tokens
- 14,770
- Code size
- 13.5 KB
- Finish reason
- stop
- Served by
- OpenAI
- Model id
openai/gpt-6-luna-pro- Reasoning sent
model default- Max output
- 128,000 tokens
- Generated
- Nov 13, 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 · 533 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather, Now</title>
<style>
:root {
color-scheme: dark;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-width: 320px;
min-height: 100vh;
color: #f5f7ff;
background:
radial-gradient(ellipse at 50% -22%, rgba(88, 104, 167, .23), transparent 52%),
#101522;
}
main {
width: min(1180px, calc(100% - 56px));
margin: 0 auto;
padding: 48px 0 35px;
}
.heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: 24px;
margin-bottom: 30px;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
color: #aab5d1;
font-size: 11px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
}
.eyebrow::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: #77d7c4;
box-shadow: 0 0 12px #77d7c4;
}
h1 {
margin: 0;
font-size: clamp(30px, 4vw, 42px);
line-height: 1.08;
letter-spacing: -.045em;
font-weight: 700;
}
.subtitle {
margin: 10px 0 0;
color: #9da8c2;
font-size: 14px;
}
.updated {
flex: 0 0 auto;
margin-bottom: 3px;
padding: 10px 14px;
border: 1px solid rgba(255,255,255,.1);
border-radius: 999px;
color: #aeb8d0;
background: rgba(255,255,255,.035);
font-size: 12px;
letter-spacing: .01em;
}
.updated strong { color: #e4e9f5; font-weight: 600; }
.weather-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.card {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
min-height: 402px;
overflow: hidden;
padding: 22px 22px 20px;
border: 1px solid rgba(255,255,255,.2);
border-radius: 22px;
box-shadow: 0 15px 35px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.16);
transition: transform .3s ease, box-shadow .3s ease;
}
.card::before {
position: absolute;
z-index: -1;
content: "";
width: 200px;
height: 200px;
right: -100px;
top: 104px;
border-radius: 50%;
background: rgba(255,255,255,.09);
filter: blur(1px);
}
.card:hover {
transform: translateY(-8px);
box-shadow: 0 25px 45px rgba(0,0,0,.29), inset 0 1px 0 rgba(255,255,255,.2);
}
.sunny {
color: #392a18;
background: linear-gradient(155deg, #f6d376 0%, #f2b352 48%, #e88b46 100%);
}
.rainy {
background: linear-gradient(155deg, #4d91d4 0%, #3978c3 48%, #315da8 100%);
}
.snowy {
color: #17364c;
background: linear-gradient(155deg, #d1f0f3 0%, #a5dce9 48%, #72b9d5 100%);
}
.stormy {
background: linear-gradient(155deg, #515879 0%, #383f65 47%, #242b4c 100%);
}
.card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.condition-tag {
padding: 7px 10px;
border: 1px solid rgba(255,255,255,.22);
border-radius: 999px;
background: rgba(255,255,255,.13);
color: inherit;
font-size: 10px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
}
.sunny .condition-tag, .snowy .condition-tag {
border-color: rgba(38,54,71,.13);
background: rgba(255,255,255,.28);
}
.location-mark {
color: inherit;
font-size: 11px;
font-weight: 600;
opacity: .72;
letter-spacing: .04em;
}
.icon-stage {
position: relative;
display: grid;
place-items: center;
height: 158px;
margin: 5px 0 4px;
}
.sun-icon {
position: relative;
width: 112px;
height: 112px;
display: grid;
place-items: center;
animation: sun-float 4s ease-in-out infinite;
}
.sun-rays {
position: absolute;
inset: 0;
animation: rotate-sun 24s linear infinite;
}
.sun-rays i {
position: absolute;
top: 0;
left: 50%;
width: 8px;
height: 19px;
border-radius: 8px;
background: #fff2ad;
transform: translateX(-50%);
transform-origin: 50% 56px;
box-shadow: 0 1px 6px rgba(255,255,255,.25);
}
.sun-rays i:nth-child(2) { transform: translateX(-50%) rotate(45deg); }
.sun-rays i:nth-child(3) { transform: translateX(-50%) rotate(90deg); }
.sun-rays i:nth-child(4) { transform: translateX(-50%) rotate(135deg); }
.sun-rays i:nth-child(5) { transform: translateX(-50%) rotate(180deg); }
.sun-rays i:nth-child(6) { transform: translateX(-50%) rotate(225deg); }
.sun-rays i:nth-child(7) { transform: translateX(-50%) rotate(270deg); }
.sun-rays i:nth-child(8) { transform: translateX(-50%) rotate(315deg); }
.sun-disc {
z-index: 1;
width: 58px;
height: 58px;
border-radius: 50%;
background: linear-gradient(145deg, #fff6c6, #ffd052);
box-shadow: 0 0 0 8px rgba(255,245,191,.16), 0 0 30px rgba(255,244,178,.65);
}
.cloud {
position: absolute;
top: 43px;
left: 50%;
width: 99px;
height: 39px;
border-radius: 28px;
background: linear-gradient(180deg, #fff 0%, #eaf3fb 100%);
box-shadow: 0 7px 16px rgba(24,57,92,.15);
transform: translateX(-50%);
}
.cloud::before, .cloud::after {
position: absolute;
content: "";
border-radius: 50%;
background: inherit;
}
.cloud::before {
width: 48px;
height: 48px;
left: 15px;
top: -21px;
}
.cloud::after {
width: 38px;
height: 38px;
right: 13px;
top: -13px;
}
.raindrop {
position: absolute;
z-index: 2;
top: 91px;
left: 50%;
width: 5px;
height: 15px;
border-radius: 5px;
background: #c6edff;
box-shadow: 0 0 8px rgba(199,237,255,.55);
animation: rain-fall 1s ease-in infinite;
}
.raindrop:nth-child(2) { margin-left: -32px; animation-delay: -.62s; }
.raindrop:nth-child(3) { margin-left: -10px; animation-delay: -.18s; }
.raindrop:nth-child(4) { margin-left: 13px; animation-delay: -.8s; }
.raindrop:nth-child(5) { margin-left: 34px; animation-delay: -.4s; }
.snow-cloud {
background: linear-gradient(180deg, #faffff, #e7f6fa);
}
.snow-cloud::before, .snow-cloud::after { background: inherit; }
.flake {
position: absolute;
z-index: 2;
top: 96px;
left: 50%;
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 7px rgba(255,255,255,.7);
animation: snow-drift 2.8s ease-in-out infinite;
}
.flake::before, .flake::after {
position: absolute;
content: "";
top: 3px;
left: -3px;
width: 14px;
height: 2px;
border-radius: 2px;
background: inherit;
}
.flake::after { transform: rotate(60deg); }
.flake:nth-child(2) { margin-left: -31px; animation-delay: -.9s; }
.flake:nth-child(3) { margin-left: -8px; animation-delay: -1.8s; }
.flake:nth-child(4) { margin-left: 17px; animation-delay: -.4s; }
.flake:nth-child(5) { margin-left: 39px; animation-delay: -1.3s; }
.storm-cloud {
top: 41px;
background: linear-gradient(180deg, #a7aec3 0%, #737d9c 100%);
box-shadow: 0 8px 17px rgba(7,12,32,.3);
}
.storm-cloud::before, .storm-cloud::after { background: inherit; }
.bolt {
position: absolute;
z-index: 3;
top: 75px;
left: calc(50% - 9px);
width: 25px;
height: 49px;
background: #ffe27a;
clip-path: polygon(52% 0, 100% 0, 67% 39%, 100% 39%, 20% 100%, 39% 54%, 0 54%);
filter: drop-shadow(0 0 7px rgba(255,221,104,.8));
animation: lightning-flash 2.8s infinite;
}
.bolt.second {
top: 87px;
left: calc(50% + 24px);
width: 17px;
height: 35px;
opacity: .7;
animation-delay: .25s;
}
.city {
margin: 4px 0 2px;
font-size: 21px;
line-height: 1.2;
letter-spacing: -.025em;
font-weight: 650;
}
.temperature {
margin: 0;
font-size: 43px;
line-height: 1.05;
letter-spacing: -.06em;
font-weight: 650;
}
.temperature span {
margin-left: 2px;
font-size: 23px;
vertical-align: 14px;
font-weight: 500;
letter-spacing: -.03em;
}
.description {
margin: 8px 0 0;
color: inherit;
font-size: 13px;
opacity: .78;
}
.card-bottom {
display: flex;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding-top: 17px;
border-top: 1px solid rgba(255,255,255,.22);
color: inherit;
font-size: 11px;
font-weight: 600;
opacity: .82;
}
.sunny .card-bottom, .snowy .card-bottom {
border-color: rgba(38,54,71,.15);
}
.card-bottom span:last-child { opacity: .75; }
.page-note {
margin-top: 22px;
color: #77829e;
font-size: 11px;
text-align: right;
}
@keyframes rotate-sun { to { transform: rotate(360deg); } }
@keyframes sun-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
@keyframes rain-fall {
0% { transform: translateY(-4px); opacity: 0; }
20% { opacity: 1; }
100% { transform: translateY(20px); opacity: 0; }
}
@keyframes snow-drift {
0%, 100% { transform: translate(0, 0) rotate(0); opacity: .6; }
50% { transform: translate(7px, 12px) rotate(80deg); opacity: 1; }
}
@keyframes lightning-flash {
0%, 8%, 11%, 60%, 100% { opacity: .25; }
9%, 10%, 62% { opacity: 1; }
}
@media (max-width: 900px) {
main { width: min(680px, calc(100% - 40px)); padding-top: 36px; }
.weather-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card { min-height: 380px; }
}
@media (max-width: 540px) {
main { width: calc(100% - 32px); padding: 30px 0 24px; }
.heading { align-items: flex-start; flex-direction: column; gap: 16px; margin-bottom: 22px; }
.updated { margin: 0; }
.weather-grid { grid-template-columns: 1fr; gap: 14px; }
.card { min-height: 350px; padding: 20px; }
.icon-stage { height: 135px; }
.cloud, .storm-cloud { top: 34px; }
.raindrop { top: 82px; }
.flake { top: 87px; }
.bolt { top: 66px; }
.bolt.second { top: 78px; }
.page-note { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: .01ms !important;
}
}
</style>
</head>
<body>
<main>
<header class="heading">
<div>
<div class="eyebrow">Live conditions</div>
<h1>Weather, now.</h1>
<p class="subtitle">A little snapshot of what the sky is up to.</p>
</div>
<div class="updated">Tuesday, <strong>9:41 AM</strong></div>
</header>
<section class="weather-grid" aria-label="Current weather in four cities">
<article class="card sunny">
<div class="card-top">
<span class="condition-tag">Clear skies</span>
<span class="location-mark">01 / WEST</span>
</div>
<div class="icon-stage" aria-hidden="true">
<div class="sun-icon">
<div class="sun-rays"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
<div class="sun-disc"></div>
</div>
</div>
<h2 class="city">Los Angeles</h2>
<p class="temperature">27<span>°</span></p>
<p class="description">Warm sunshine all afternoon</p>
<div class="card-bottom"><span>Feels like 29°</span><span>UV 6 · High</span></div>
</article>
<article class="card rainy">
<div class="card-top">
<span class="condition-tag">Light rain</span>
<span class="location-mark">02 / EAST</span>
</div>
<div class="icon-stage" aria-hidden="true">
<div class="cloud"></div>
<i class="raindrop"></i><i class="raindrop"></i><i class="raindrop"></i><i class="raindrop"></i><i class="raindrop"></i>
</div>
<h2 class="city">New York</h2>
<p class="temperature">16<span>°</span></p>
<p class="description">A passing shower or two</p>
<div class="card-bottom"><span>Feels like 14°</span><span>Rain 68%</span></div>
</article>
<article class="card snowy">
<div class="card-top">
<span class="condition-tag">Snow flurries</span>
<span class="location-mark">03 / NORTH</span>
</div>
<div class="icon-stage" aria-hidden="true">
<div class="cloud snow-cloud"></div>
<i class="flake"></i><i class="flake"></i><i class="flake"></i><i class="flake"></i><i class="flake"></i>
</div>
<h2 class="city">Helsinki</h2>
<p class="temperature">−3<span>°</span></p>
<p class="description">Soft flakes drifting by</p>
<div class="card-bottom"><span>Feels like −7°</span><span>Snow 2 cm</span></div>
</article>
<article class="card stormy">
<div class="card-top">
<span class="condition-tag">Thunderstorm</span>
<span class="location-mark">04 / SOUTH</span>
</div>
<div class="icon-stage" aria-hidden="true">
<div class="cloud storm-cloud"></div>
<div class="bolt"></div>
<div class="bolt second"></div>
</div>
<h2 class="city">Singapore</h2>
<p class="temperature">30<span>°</span></p>
<p class="description">Storms building through the day</p>
<div class="card-bottom"><span>Feels like 35°</span><span>Wind 24 km/h</span></div>
</article>
</section>
<div class="page-note">Conditions are local · updated just now</div>
</main>
</body>
</html>Reasoning trace (4,729 tokens)
**Creating a polished layout** I need to ensure the output is HTML only, with a nice, clean design featuring four cards using just CSS—no JavaScript. The layout should be responsive, showing four cards across on desktop and stacking them on mobile at a breakpoint of 600 pixels. Each card should have a height of about 390 pixels, with distinct gradients that are readable. I'll also include custom icons using CSS, making sure to adhere to the design requirements and animations properly. The background will be a dark navy color, contrasting against bright, vivid weather gradient cards.**Positioning sun-rays and clouds** I’m generating static rays using divs and spans, positioning them with CSS nth-child for rotation. Each ray will have specific dimensions and a transform origin to rotate around a defined center, creating a sun effect. I want each ray to be centered at the top and extend outward. For clouds, I’ll create a div with specified width, height, and background color, adding a border radius for softness. I plan to make raindrops positioned absolutely, with staggered animations to mimic rainfall. Everything should be visually cohesive and well-structured.**Creating snow clouds and flakes** I’m thinking of how to design snow clouds with small snowflakes. Instead of using icon fonts, I can create snowflakes using CSS elements. I could make them circular, perhaps with rotated crosses to give a unique look. Each flake will be 7x7 pixels, and I can utilize the ::before and ::after pseudo-elements to add extra lines for detail. I’ll focus on making the design cohesive and visually appealing while ensuring everything is easy to manage using CSS.**Designing card layout** I'm thinking about using CSS shape with a clip-path polygon for a sleek design. I want a background with a warm gradient for distinctness, and I’ll include a weather icon set. The card layout should have a solid typography system, with possibly a top date tag and a label in the header. I'll also set a max width of 1200px, and make sure to use flexbox for alignment, with specific heights for both desktop and mobile. Accessibility is important—I'll ensure reduced motion for animations.**Creating animated weather effects** I'm planning to avoid inline event handlers and develop detailed CSS markup for cloud backgrounds. For the sun icon backdrop, I’ll center it with full size and sun rays included. I envision rain animation using cloud elements with drops translating and changing opacity. Snowflakes will fall with a gentle animation as well. The storm cloud should have a lightning bolt with potential transitions. Each card will feature its own gradient and contrasting text color for clarity and readability.**Refining gradient and color choices** I’m considering making all gradients more saturated, perhaps with a white shadow for contrast. For sunny elements, I’d use a golden gradient from #f7c75d to #ea8b3a with navy text. The rainy gradient could transition from #3f82cf to #2856a6, using white text. Snow visuals might go from #bde7f4 to #6fb6d8, also with dark text, while the storm gradient could shift from #343b64 to #1c2346, again with white. I'll keep the sun icon's rays in a paler gold and ensure the footer divider remains translucent and responsive.