GPT-6 Luna
by OpenAIReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 2 min 11 s
- Cost
- $0.0057
- Output tokens
- 11,225
- Spent thinking
- 5,233 tokens
- Speed
- 89.2 tok/s
- Console errors
- 0
- First token after
- 5.6 s
- First visible text after
- 1 min 18 s
- Prompt tokens
- 498
- Code size
- 18.1 KB
- Finish reason
- stop
- Served by
- OpenAI
- Model id
openai/gpt-6-luna- Reasoning sent
{"effort":"xhigh"}- 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 · 720 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Weather, in motion</title>
<style>
:root {
color-scheme: dark;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-synthesis: none;
}
* { box-sizing: border-box; }
body {
min-width: 320px;
min-height: 100vh;
margin: 0;
color: #f5f7ff;
background:
radial-gradient(ellipse at 12% 0%, rgba(52, 88, 145, .25), transparent 34rem),
radial-gradient(ellipse at 95% 100%, rgba(67, 57, 132, .2), transparent 30rem),
#101827;
}
.shell {
width: min(1184px, calc(100% - 72px));
margin: 34px auto 24px;
}
.page-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-bottom: 28px;
}
.brand-lockup {
display: flex;
align-items: center;
gap: 16px;
}
.brand-mark {
position: relative;
display: grid;
width: 47px;
height: 47px;
flex: 0 0 47px;
place-items: center;
border: 1px solid rgba(255,255,255,.16);
border-radius: 16px;
background: rgba(255,255,255,.06);
}
.brand-mark::before,
.brand-mark::after {
position: absolute;
content: "";
border-radius: 50%;
}
.brand-mark::before {
width: 17px;
height: 17px;
background: #ffd27a;
box-shadow: 0 0 20px rgba(255, 194, 89, .45);
}
.brand-mark::after {
width: 25px;
height: 25px;
border: 1px solid rgba(255, 224, 172, .7);
}
.eyebrow {
margin: 0 0 4px;
color: #9eafd0;
font-size: 10px;
font-weight: 750;
letter-spacing: .19em;
}
h1 {
margin: 0;
font-size: clamp(23px, 3vw, 31px);
font-weight: 670;
letter-spacing: -.045em;
line-height: 1.15;
}
h1 span { color: #91baff; }
.header-note {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 15px;
border: 1px solid rgba(255,255,255,.12);
border-radius: 14px;
background: rgba(255,255,255,.045);
}
.live-dot {
width: 8px;
height: 8px;
flex: 0 0 8px;
border-radius: 50%;
background: #83e3bb;
box-shadow: 0 0 12px rgba(131, 227, 187, .65);
}
.header-note strong,
.header-note small { display: block; }
.header-note strong {
font-size: 10px;
letter-spacing: .13em;
}
.header-note small {
margin-top: 3px;
color: #9eafd0;
font-size: 11px;
}
.weather-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.weather-card {
position: relative;
display: flex;
min-width: 0;
min-height: 454px;
flex-direction: column;
overflow: hidden;
padding: 20px 21px 18px;
border: 1px solid rgba(255,255,255,.2);
border-radius: 25px;
box-shadow: 0 16px 36px rgba(3, 9, 24, .24), inset 0 1px 0 rgba(255,255,255,.13);
transition: transform .32s cubic-bezier(.2,.75,.25,1), box-shadow .32s ease;
}
.weather-card::before {
position: absolute;
top: -104px;
right: -74px;
width: 230px;
height: 230px;
border: 1px solid rgba(255,255,255,.11);
border-radius: 50%;
background: rgba(255,255,255,.055);
content: "";
pointer-events: none;
}
.weather-card::after {
position: absolute;
right: 24px;
bottom: 67px;
left: 24px;
height: 1px;
background: rgba(255,255,255,.17);
content: "";
pointer-events: none;
}
.weather-card:hover {
z-index: 1;
transform: translateY(-8px);
box-shadow: 0 25px 45px rgba(3, 9, 24, .34), inset 0 1px 0 rgba(255,255,255,.18);
}
.sunny {
background:
radial-gradient(circle at 78% 17%, rgba(255,230,160,.27), transparent 34%),
linear-gradient(150deg, #efa94f 0%, #e77e4d 54%, #cf5e65 100%);
}
.rainy {
background:
radial-gradient(circle at 78% 16%, rgba(156,218,255,.2), transparent 33%),
linear-gradient(150deg, #347bb8 0%, #28669f 50%, #244e86 100%);
}
.snowy {
background:
radial-gradient(circle at 78% 16%, rgba(236,238,255,.25), transparent 34%),
linear-gradient(150deg, #899bd3 0%, #7383c7 54%, #5a6daf 100%);
}
.stormy {
background:
radial-gradient(circle at 79% 15%, rgba(189,164,255,.22), transparent 34%),
linear-gradient(150deg, #6260a9 0%, #4d548f 52%, #394777 100%);
}
.card-top {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 24px;
}
.condition {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 10px;
font-weight: 800;
letter-spacing: .16em;
}
.condition-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 10px rgba(255,255,255,.8);
}
.card-index {
color: rgba(255,255,255,.68);
font-size: 10px;
font-weight: 650;
letter-spacing: .09em;
}
.weather-visual {
position: relative;
height: 166px;
flex: 0 0 166px;
margin-top: 5px;
}
.weather-visual::before {
position: absolute;
top: 50%;
left: 50%;
width: 144px;
height: 144px;
border: 1px solid rgba(255,255,255,.12);
border-radius: 50%;
background: rgba(255,255,255,.055);
content: "";
transform: translate(-50%, -50%);
}
/* Sunny: a glowing core surrounded by a rotating CSS-gradient corona */
.sun-orbit {
position: absolute;
top: 10px;
left: 50%;
width: 144px;
height: 144px;
transform: translateX(-50%);
}
.sun-rays {
position: absolute;
inset: 0;
border-radius: 50%;
background: repeating-conic-gradient(
from 0deg,
transparent 0deg 23deg,
rgba(255, 225, 139, .98) 23deg 28deg,
transparent 28deg 45deg
);
-webkit-mask: radial-gradient(circle, transparent 0 40%, #000 41% 100%);
mask: radial-gradient(circle, transparent 0 40%, #000 41% 100%);
animation: spin 24s linear infinite;
}
.sun-core {
position: absolute;
top: 50%;
left: 50%;
width: 70px;
height: 70px;
border: 1px solid rgba(255,255,255,.5);
border-radius: 50%;
background: radial-gradient(circle at 32% 28%, #fff3be 0%, #ffe188 32%, #ffba55 100%);
box-shadow: 0 0 22px rgba(255, 223, 135, .48), 0 0 48px rgba(255, 204, 99, .24);
transform: translate(-50%, -50%);
}
.sun-core::after {
position: absolute;
inset: 8px;
border: 1px solid rgba(255,255,255,.26);
border-radius: 50%;
content: "";
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Shared cloud silhouette, assembled from HTML and CSS shapes */
.cloud {
position: absolute;
z-index: 4;
top: 42px;
left: 50%;
width: 112px;
height: 39px;
border-radius: 30px;
background: var(--cloud-color);
box-shadow: 0 8px 18px rgba(20, 35, 67, .17);
transform: translateX(-50%);
}
.cloud::before,
.cloud::after,
.cloud i {
position: absolute;
display: block;
border-radius: 50%;
background: var(--cloud-color);
content: "";
}
.cloud::before {
top: -20px;
left: 15px;
width: 48px;
height: 48px;
}
.cloud::after {
top: -16px;
right: 15px;
width: 41px;
height: 41px;
}
.cloud i {
z-index: 1;
top: -23px;
left: 42px;
width: 45px;
height: 45px;
}
.rainy .cloud { --cloud-color: #ecf7ff; }
.snowy .cloud { --cloud-color: #f3f4ff; }
.stormy .cloud { --cloud-color: #535c83; }
.drop {
position: absolute;
z-index: 3;
top: 96px;
width: 5px;
height: 15px;
border-radius: 6px;
background: linear-gradient(#e6f8ff, #9dd9ff);
opacity: 0;
animation: rain-fall 1.15s linear infinite;
}
.drop:nth-of-type(2) { left: calc(50% - 39px); animation-delay: -.2s; }
.drop:nth-of-type(3) { left: calc(50% - 19px); animation-delay: -.72s; }
.drop:nth-of-type(4) { left: calc(50% + 3px); animation-delay: -.42s; }
.drop:nth-of-type(5) { left: calc(50% + 25px); animation-delay: -.92s; }
.drop:nth-of-type(6) { left: calc(50% + 43px); animation-delay: -.55s; }
@keyframes rain-fall {
0% { opacity: 0; transform: translateY(-5px) rotate(16deg); }
18% { opacity: .95; }
82% { opacity: .8; }
100% { opacity: 0; transform: translateY(37px) rotate(16deg); }
}
/* Snowflakes are tiny CSS crosses that drift independently */
.flake {
position: absolute;
z-index: 5;
width: 15px;
height: 15px;
animation: drift 3.2s ease-in-out infinite;
}
.flake::before,
.flake::after,
.flake i {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 1.5px;
height: 14px;
border-radius: 2px;
background: rgba(255,255,255,.96);
content: "";
transform: translate(-50%, -50%);
}
.flake::after { transform: translate(-50%, -50%) rotate(60deg); }
.flake i { transform: translate(-50%, -50%) rotate(-60deg); }
.flake:nth-of-type(2) { top: 99px; left: calc(50% - 48px); animation-delay: -.4s; }
.flake:nth-of-type(3) { top: 116px; left: calc(50% - 20px); animation-delay: -1.5s; }
.flake:nth-of-type(4) { top: 101px; left: calc(50% + 23px); animation-delay: -.9s; }
.flake:nth-of-type(5) { top: 132px; left: calc(50% + 45px); animation-delay: -2.1s; }
.flake:nth-of-type(6) { top: 132px; left: calc(50% - 44px); animation-delay: -1.2s; }
@keyframes drift {
0%, 100% { translate: 0 0; }
50% { translate: 7px 9px; }
}
.lightning {
position: absolute;
z-index: 2;
top: 80px;
left: 50%;
width: 43px;
height: 70px;
background: linear-gradient(145deg, #fff9b9 0%, #ffe76d 55%, #ffc34e 100%);
clip-path: polygon(56% 0, 100% 0, 69% 39%, 94% 39%, 29% 100%, 43% 55%, 13% 55%);
filter: drop-shadow(0 0 10px rgba(255, 230, 101, .82));
opacity: 0;
transform: translateX(-50%);
animation: flash 2.7s steps(1, end) infinite;
}
@keyframes flash {
0%, 32%, 100% { opacity: 0; }
33%, 38% { opacity: 1; }
39%, 42% { opacity: .16; }
43%, 49% { opacity: 1; }
50%, 54% { opacity: .08; }
55%, 58% { opacity: .9; }
59% { opacity: 0; }
}
.city-info {
position: relative;
z-index: 2;
padding-top: 1px;
}
.city-row {
display: flex;
align-items: center;
gap: 9px;
}
.city-row h2 {
margin: 0;
font-size: 20px;
font-weight: 680;
letter-spacing: -.035em;
}
.country {
padding: 3px 6px;
border: 1px solid rgba(255,255,255,.24);
border-radius: 6px;
color: rgba(255,255,255,.82);
font-size: 9px;
font-weight: 750;
letter-spacing: .08em;
}
.reading {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 5px;
}
.temperature {
font-size: 43px;
font-weight: 520;
letter-spacing: -.065em;
line-height: 1;
}
.temperature span {
margin-left: 1px;
font-size: 27px;
font-weight: 450;
vertical-align: 10px;
}
.high-low {
display: grid;
gap: 4px;
color: rgba(255,255,255,.77);
font-size: 10px;
font-weight: 600;
}
.description {
min-height: 34px;
margin: 7px 0 0;
color: rgba(255,255,255,.88);
font-size: 12px;
line-height: 1.45;
}
.metrics {
position: relative;
z-index: 2;
display: flex;
justify-content: space-between;
margin-top: auto;
padding-top: 14px;
}
.metric { display: grid; gap: 4px; }
.metric:last-child { text-align: right; }
.metric span {
color: rgba(255,255,255,.68);
font-size: 8px;
font-weight: 750;
letter-spacing: .12em;
}
.metric strong {
font-size: 12px;
font-weight: 650;
}
.page-foot {
display: flex;
justify-content: space-between;
gap: 16px;
margin-top: 18px;
color: #8292b1;
font-size: 10px;
letter-spacing: .04em;
}
.page-foot span:last-child { color: #9eafd0; }
@media (max-width: 900px) {
.weather-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.weather-card { min-height: 438px; }
.shell { width: min(720px, calc(100% - 56px)); }
}
@media (max-width: 540px) {
.shell {
width: calc(100% - 36px);
margin-top: 22px;
}
.page-header {
align-items: flex-start;
flex-direction: column;
gap: 16px;
margin-bottom: 20px;
}
.header-note { align-self: flex-start; }
.weather-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.weather-card { min-height: 430px; padding-right: 23px; padding-left: 23px; }
.weather-card::after { right: 26px; left: 26px; }
.page-foot { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation: none !important;
scroll-behavior: auto !important;
transition: none !important;
}
.weather-card:hover { transform: none; }
.lightning { opacity: .95; }
}
</style>
</head>
<body>
<main class="shell">
<header class="page-header">
<div class="brand-lockup">
<span class="brand-mark" aria-hidden="true"></span>
<div>
<p class="eyebrow">SKYLINE / DAILY OUTLOOK</p>
<h1>Weather, in motion<span>.</span></h1>
</div>
</div>
<div class="header-note">
<span class="live-dot" aria-hidden="true"></span>
<div>
<strong>FOUR CITY FORECAST</strong>
<small>A little look at the skies</small>
</div>
</div>
</header>
<section class="weather-grid" aria-label="Weather forecast cards">
<article class="weather-card sunny" aria-labelledby="lisbon-title">
<div class="card-top">
<span class="condition"><i class="condition-dot"></i> SUNNY</span>
<span class="card-index">01 / 04</span>
</div>
<div class="weather-visual" aria-hidden="true">
<div class="sun-orbit">
<div class="sun-rays"></div>
<div class="sun-core"></div>
</div>
</div>
<div class="city-info">
<div class="city-row">
<h2 id="lisbon-title">Lisbon</h2>
<span class="country">PT</span>
</div>
<div class="reading">
<div class="temperature">24<span>°</span></div>
<div class="high-low"><span>H 27°</span><span>L 19°</span></div>
</div>
<p class="description">Bright sunshine all afternoon.</p>
</div>
<div class="metrics">
<div class="metric"><span>HUMIDITY</span><strong>42%</strong></div>
<div class="metric"><span>WIND</span><strong>8 km/h</strong></div>
</div>
</article>
<article class="weather-card rainy" aria-labelledby="amsterdam-title">
<div class="card-top">
<span class="condition"><i class="condition-dot"></i> SHOWERS</span>
<span class="card-index">02 / 04</span>
</div>
<div class="weather-visual" aria-hidden="true">
<span class="drop"></span><span class="drop"></span><span class="drop"></span>
<span class="drop"></span><span class="drop"></span>
<div class="cloud"><i></i></div>
</div>
<div class="city-info">
<div class="city-row">
<h2 id="amsterdam-title">Amsterdam</h2>
<span class="country">NL</span>
</div>
<div class="reading">
<div class="temperature">16<span>°</span></div>
<div class="high-low"><span>H 18°</span><span>L 13°</span></div>
</div>
<p class="description">Light showers through the afternoon.</p>
</div>
<div class="metrics">
<div class="metric"><span>HUMIDITY</span><strong>81%</strong></div>
<div class="metric"><span>WIND</span><strong>14 km/h</strong></div>
</div>
</article>
<article class="weather-card snowy" aria-labelledby="helsinki-title">
<div class="card-top">
<span class="condition"><i class="condition-dot"></i> FLURRIES</span>
<span class="card-index">03 / 04</span>
</div>
<div class="weather-visual" aria-hidden="true">
<span class="flake"><i></i></span><span class="flake"><i></i></span>
<span class="flake"><i></i></span><span class="flake"><i></i></span>
<span class="flake"><i></i></span>
<div class="cloud"><i></i></div>
</div>
<div class="city-info">
<div class="city-row">
<h2 id="helsinki-title">Helsinki</h2>
<span class="country">FI</span>
</div>
<div class="reading">
<div class="temperature">−4<span>°</span></div>
<div class="high-low"><span>H −2°</span><span>L −8°</span></div>
</div>
<p class="description">Fresh flurries and a crisp breeze.</p>
</div>
<div class="metrics">
<div class="metric"><span>HUMIDITY</span><strong>68%</strong></div>
<div class="metric"><span>WIND</span><strong>11 km/h</strong></div>
</div>
</article>
<article class="weather-card stormy" aria-labelledby="miami-title">
<div class="card-top">
<span class="condition"><i class="condition-dot"></i> THUNDER</span>
<span class="card-index">04 / 04</span>
</div>
<div class="weather-visual" aria-hidden="true">
<div class="lightning"></div>
<div class="cloud"><i></i></div>
</div>
<div class="city-info">
<div class="city-row">
<h2 id="miami-title">Miami</h2>
<span class="country">US</span>
</div>
<div class="reading">
<div class="temperature">29<span>°</span></div>
<div class="high-low"><span>H 31°</span><span>L 25°</span></div>
</div>
<p class="description">Thunderstorms likely after noon.</p>
</div>
<div class="metrics">
<div class="metric"><span>HUMIDITY</span><strong>76%</strong></div>
<div class="metric"><span>WIND</span><strong>22 km/h</strong></div>
</div>
</article>
</section>
<footer class="page-foot">
<span>SKYLINE WEATHER BOARD</span>
<span>Four skies, side by side.</span>
</footer>
</main>
</body>
</html>Reasoning trace (5,233 tokens)
**Designing weather cards**
I need to focus on creating an HTML output with polished designs for four cards. The CSS will include icons and pseudo-elements to enhance the look. I want to ensure everything renders nicely on a 1280x800 viewport and is responsive. I’m considering dark backgrounds with colorful gradients and glass effects. I also want to ensure the card dimensions are suitable, like maybe 260x390, with a nice gap between them. The icons should feature a sun design created with repeating conic gradients.**Creating cloud and sun icons**
I'm exploring how to design a sun and rain cloud icon using CSS. For the sun, I'll use a repeating-conic-gradient for the rays, and a mask with a radial gradient to create a clean look. The sun core will be placed absolutely with a size of 150x150. For the rain cloud, I'm thinking of a body shape with defined dimensions and pseudo-elements for additional detail. The raindrops will need animated vertical falling effects and precise positioning on the card. Overall, I want everything to blend nicely within the hero stage area.**Designing rain and snow clouds**
I'm thinking of creating a .rain-cloud class and a similar one for snow clouds. For snowflakes, I can use CSS to form round circles and crosses with the ::before and ::after pseudo-elements. It seems like the simplest snowflakes could actually just be glyphs, but I want to avoid using icons and stick to CSS shapes. I'll keep exploring how to make these designs look visually appealing while sticking to pure CSS!**Creating snowflake elements**
I’m planning to design snowflake elements using CSS, possibly making them as dots or crosses. I’ll use pseudo-elements for vertical and horizontal lines, along with a child element rotated diagonally. The snowflake markup will use `<span class=flake><i></i></span>`, enabling a clean center alignment. I can add animations for a drifting effect. Plus, incorporating a storm cloud with lightning using CSS shapes instead of SVGs sounds interesting! I need to ensure the layout is responsive for four columns on desktop.**Designing weather cards layout**
I’m working on a weather card layout. The top header will include a logo, today's forecast info, date, and location, aiming for a clean aesthetic with light off-white and vivid gradients. The cards will have a dark gradient background for contrast, featuring custom gradient backgrounds, small labels for the city and temperature, and a clear description. Each card will be structured with specific sections like condition tag, weather visuals, forecast info, and footer details about humidity and wind, maintaining a height of around 480 pixels across four columns.**Designing CSS for cards**
I'm thinking about creating a weather card design. Before adding decorative circles, I might consider using a pseudo-element for an overlay instead. Keeping it simple is key, so for each `.weather-card::before`, I could add a radial glow effect around the icon area using background gradients. I'm also considering making the cards rounded with a radius of 28px for a softer look. Let's see how this evolves!**Considering hover effects**
The user is requesting hover lifts without motion. I think I can achieve this with CSS alone, avoiding JavaScript and any external libraries. I’ll use a media query to cater to users who prefer reduced motion. The inline CSS will look something like: `@media reduce {.weather-card:hover{transform:none;}}`. By setting transform to none on hover for those who want less motion, I can deliver a more accessible experience for the user while keeping it simple.