GPT-6 Luna

by OpenAIReasoningClean

Running live in a sandboxed frame. Click inside it before using the keyboard.

How it went

Total time: 43.5 s
Cost: $0.0024
Output tokens: 4,713
Spent thinking: 185 tokens
Speed: 149.5 tok/s
Console errors: 0

First token after: 12.0 s
First visible text after: 12.7 s
Prompt tokens: 498
Code size: 13.1 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-6-luna
Reasoning sent: {"effort":"low"}
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 · 471 lines

Download

<!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;
    --ink: #f6f8ff;
    --muted: rgba(246, 248, 255, .68);
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    min-height: 100vh;
    padding: 52px clamp(20px, 5vw, 76px) 48px;
    color: var(--ink);
    background:
      radial-gradient(ellipse at 50% -20%, #253956 0, transparent 55%),
      #101723;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  .page {
    width: min(100%, 1370px);
    margin: 0 auto;
  }

  header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
  }

  .eyebrow {
    margin: 0 0 9px;
    color: #a7c7ff;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .19em;
    text-transform: uppercase;
  }

  h1 {
    margin: 0;
    font-size: clamp(29px, 4vw, 46px);
    font-weight: 620;
    letter-spacing: -.055em;
    line-height: 1.06;
  }

  .header-note {
    margin: 0 0 3px;
    color: #aab5c7;
    font-size: 13px;
    letter-spacing: .02em;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }

  .card {
    --accent: #ffe185;
    position: relative;
    min-height: 455px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 25px;
    padding: 23px 22px 21px;
    isolation: isolate;
    box-shadow: 0 18px 42px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.18);
    transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
  }

  .card:hover {
    transform: translateY(-9px);
    box-shadow: 0 28px 52px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.22);
  }

  .card::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 240px;
    height: 240px;
    right: -100px;
    top: 118px;
    border-radius: 50%;
    background: rgba(255,255,255,.09);
    filter: blur(1px);
  }

  .sunny {
    --accent: #ffe18b;
    background: linear-gradient(155deg, #f49b53 0%, #ee7658 48%, #bc5574 100%);
  }
  .rainy {
    --accent: #bce9ff;
    background: linear-gradient(155deg, #3a789a 0%, #356487 48%, #38476e 100%);
  }
  .snowy {
    --accent: #e3f4ff;
    background: linear-gradient(155deg, #8dbcd4 0%, #658fb9 49%, #586a9b 100%);
  }
  .stormy {
    --accent: #e0c5ff;
    background: linear-gradient(155deg, #66558c 0%, #4c477c 48%, #33385e 100%);
  }

  .card-top {
    display: flex;
    align-items: start;
    justify-content: space-between;
  }

  .city {
    margin: 0;
    font-size: 20px;
    font-weight: 650;
    letter-spacing: -.035em;
  }

  .region {
    margin: 5px 0 0;
    color: rgba(255,255,255,.72);
    font-size: 11px;
    letter-spacing: .105em;
    text-transform: uppercase;
  }

  .condition-tag {
    margin-top: 2px;
    padding: 6px 9px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 99px;
    color: rgba(255,255,255,.92);
    background: rgba(255,255,255,.1);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .scene {
    position: relative;
    height: 193px;
    margin: 8px -8px 0;
    display: grid;
    place-items: center;
  }

  .temperature {
    margin: -1px 0 0;
    font-size: 60px;
    font-weight: 520;
    letter-spacing: -.075em;
    line-height: 1;
  }

  .temperature sup {
    position: relative;
    top: 5px;
    margin-left: 3px;
    font-size: 25px;
    font-weight: 450;
    letter-spacing: -.04em;
  }

  .description {
    margin: 10px 0 0;
    color: rgba(255,255,255,.85);
    font-size: 13px;
    line-height: 1.45;
  }

  .divider {
    height: 1px;
    margin: 17px 0 13px;
    background: rgba(255,255,255,.21);
  }

  .footer {
    display: flex;
    justify-content: space-between;
    color: rgba(255,255,255,.73);
    font-size: 11px;
    letter-spacing: .02em;
  }

  .footer strong {
    color: #fff;
    font-weight: 650;
  }

  /* Sunny: glowing disc with a rotating ring of rays */
  .sun {
    position: relative;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 32%, #fff9ce 0, #ffe88e 34%, #ffbd61 77%);
    box-shadow: 0 0 27px 9px rgba(255,225,131,.38), 0 0 75px 23px rgba(255,211,113,.17);
    animation: sun-glow 3.5s ease-in-out infinite;
  }

  .sun::before {
    content: "";
    position: absolute;
    inset: -28px;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, transparent 0 12deg, rgba(255,231,151,.88) 12.5deg 15deg, transparent 15.5deg 30deg);
    mask: radial-gradient(circle, transparent 0 56%, #000 58% 69%, transparent 71%);
    -webkit-mask: radial-gradient(circle, transparent 0 56%, #000 58% 69%, transparent 71%);
    animation: rotate 22s linear infinite;
  }

  .sun::after {
    content: "";
    position: absolute;
    inset: -45px;
    border-radius: 50%;
    background: radial-gradient(circle, transparent 36%, rgba(255,225,131,.1) 64%, transparent 69%);
  }

  /* Rain: a soft cloud and staggered falling drops */
  .rain-cloud {
    position: absolute;
    top: 47px;
    left: 50%;
    width: 113px;
    height: 41px;
    transform: translateX(-50%);
    border-radius: 30px;
    background: linear-gradient(180deg, #e7f5ff, #adc8dc);
    box-shadow: 0 8px 17px rgba(21,43,69,.22), inset 0 3px 4px rgba(255,255,255,.72);
  }
  .rain-cloud::before, .rain-cloud::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: inherit;
  }
  .rain-cloud::before { width: 57px; height: 57px; left: 19px; top: -27px; }
  .rain-cloud::after { width: 43px; height: 43px; right: 15px; top: -18px; }

  .drop {
    position: absolute;
    top: 103px;
    width: 5px;
    height: 17px;
    border-radius: 0 100% 100% 100%;
    background: linear-gradient(#d9f3ff, #7dc8f0);
    transform: rotate(25deg);
    opacity: 0;
    animation: rain-fall 1.05s ease-in infinite;
  }
  .drop:nth-child(2) { left: calc(50% - 37px); animation-delay: -.62s; }
  .drop:nth-child(3) { left: calc(50% - 10px); animation-delay: -.18s; }
  .drop:nth-child(4) { left: calc(50% + 20px); animation-delay: -.82s; }
  .drop:nth-child(5) { left: calc(50% + 43px); animation-delay: -.43s; }

  /* Snow: three slow, drifting flakes */
  .snow-cloud {
    position: absolute;
    top: 52px;
    left: 50%;
    width: 107px;
    height: 37px;
    transform: translateX(-50%);
    border-radius: 26px;
    background: linear-gradient(180deg, #f7fdff, #c7e2ef);
    box-shadow: 0 8px 18px rgba(34,68,100,.19), inset 0 2px 4px #fff;
  }
  .snow-cloud::before, .snow-cloud::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: inherit;
  }
  .snow-cloud::before { width: 53px; height: 53px; left: 17px; top: -26px; }
  .snow-cloud::after { width: 40px; height: 40px; right: 14px; top: -17px; }

  .flake {
    position: absolute;
    top: 113px;
    color: #f2fbff;
    font-size: 22px;
    line-height: 1;
    text-shadow: 0 0 9px rgba(230,249,255,.8);
    animation: snow-drift 3.5s ease-in-out infinite;
  }
  .flake.one { left: calc(50% - 35px); animation-delay: -.4s; }
  .flake.two { left: calc(50% - 2px); top: 129px; font-size: 17px; animation-delay: -2s; }
  .flake.three { left: calc(50% + 28px); animation-delay: -1.3s; }

  /* Storm: dark cloud and a bright, CSS-drawn bolt */
  .storm-cloud {
    position: absolute;
    top: 49px;
    left: 50%;
    width: 119px;
    height: 46px;
    transform: translateX(-50%);
    border-radius: 28px;
    background: linear-gradient(180deg, #b4a8d3, #777193);
    box-shadow: 0 9px 19px rgba(22,24,48,.28), inset 0 3px 4px rgba(255,255,255,.45);
  }
  .storm-cloud::before, .storm-cloud::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: inherit;
  }
  .storm-cloud::before { width: 59px; height: 59px; left: 18px; top: -27px; }
  .storm-cloud::after { width: 47px; height: 47px; right: 14px; top: -20px; }

  .bolt {
    position: absolute;
    z-index: 2;
    top: 97px;
    left: calc(50% - 13px);
    width: 29px;
    height: 55px;
    background: #ffe78d;
    clip-path: polygon(56% 0, 100% 0, 66% 40%, 96% 40%, 22% 100%, 39% 55%, 7% 55%);
    filter: drop-shadow(0 0 8px #fff1a6);
    animation: lightning-flash 2.8s steps(1, end) infinite;
  }

  .storm-glow {
    position: absolute;
    top: 100px;
    left: 50%;
    width: 76px;
    height: 76px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: #f9dcff;
    filter: blur(30px);
    opacity: 0;
    animation: glow-flash 2.8s steps(1, end) infinite;
  }

  @keyframes rotate { to { transform: rotate(360deg); } }
  @keyframes sun-glow {
    50% { box-shadow: 0 0 37px 12px rgba(255,225,131,.48), 0 0 83px 28px rgba(255,211,113,.22); }
  }
  @keyframes rain-fall {
    0% { transform: translateY(-5px) rotate(25deg); opacity: 0; }
    15% { opacity: .95; }
    100% { transform: translateY(37px) rotate(25deg); opacity: 0; }
  }
  @keyframes snow-drift {
    0%, 100% { transform: translate(0, -3px) rotate(0deg); opacity: .55; }
    50% { transform: translate(9px, 13px) rotate(35deg); opacity: 1; }
  }
  @keyframes lightning-flash {
    0%, 8%, 10%, 48%, 50%, 100% { opacity: .14; }
    9%, 49% { opacity: 1; }
  }
  @keyframes glow-flash {
    0%, 8%, 10%, 48%, 50%, 100% { opacity: 0; }
    9%, 49% { opacity: .53; }
  }

  @media (max-width: 1000px) {
    body { padding-top: 36px; }
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .card { min-height: 430px; }
    .scene { height: 175px; }
  }

  @media (max-width: 560px) {
    body { padding: 30px 18px; }
    header { align-items: start; flex-direction: column; margin-bottom: 22px; }
    .header-note { font-size: 12px; }
    .grid { grid-template-columns: 1fr; gap: 14px; }
    .card { min-height: 405px; padding: 22px; }
    .scene { height: 165px; }
  }

  @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 class="page">
    <header>
      <div>
        <p class="eyebrow">The daily forecast</p>
        <h1>Weather, in motion.</h1>
      </div>
      <p class="header-note">A little look at the skies around the world</p>
    </header>

    <section class="grid" aria-label="Weather forecast cards">
      <article class="card sunny">
        <div class="card-top">
          <div><h2 class="city">Lisbon</h2><p class="region">Portugal · 11:42 AM</p></div>
          <span class="condition-tag">Sunny</span>
        </div>
        <div class="scene" aria-hidden="true"><div class="sun"></div></div>
        <p class="temperature">24<sup>°</sup></p>
        <p class="description">Clear skies and a lovely warm breeze.</p>
        <div class="divider"></div>
        <div class="footer"><span>Feels like <strong>26°</strong></span><span>Humidity <strong>38%</strong></span></div>
      </article>

      <article class="card rainy">
        <div class="card-top">
          <div><h2 class="city">London</h2><p class="region">United Kingdom · 10:42 AM</p></div>
          <span class="condition-tag">Rainy</span>
        </div>
        <div class="scene" aria-hidden="true">
          <div class="rain-cloud"></div>
          <i class="drop"></i><i class="drop"></i><i class="drop"></i><i class="drop"></i>
        </div>
        <p class="temperature">12<sup>°</sup></p>
        <p class="description">Light showers drifting through the city.</p>
        <div class="divider"></div>
        <div class="footer"><span>Feels like <strong>10°</strong></span><span>Humidity <strong>82%</strong></span></div>
      </article>

      <article class="card snowy">
        <div class="card-top">
          <div><h2 class="city">Sapporo</h2><p class="region">Japan · 7:42 PM</p></div>
          <span class="condition-tag">Snowy</span>
        </div>
        <div class="scene" aria-hidden="true">
          <div class="snow-cloud"></div>
          <i class="flake one">✳</i><i class="flake two">✳</i><i class="flake three">✳</i>
        </div>
        <p class="temperature">−3<sup>°</sup></p>
        <p class="description">Soft snowfall with a crisp winter chill.</p>
        <div class="divider"></div>
        <div class="footer"><span>Feels like <strong>−7°</strong></span><span>Humidity <strong>71%</strong></span></div>
      </article>

      <article class="card stormy">
        <div class="card-top">
          <div><h2 class="city">New York</h2><p class="region">United States · 6:42 AM</p></div>
          <span class="condition-tag">Stormy</span>
        </div>
        <div class="scene" aria-hidden="true">
          <div class="storm-glow"></div>
          <div class="storm-cloud"></div>
          <div class="bolt"></div>
        </div>
        <p class="temperature">18<sup>°</sup></p>
        <p class="description">Thunderstorms nearby. Best bring a coat.</p>
        <div class="divider"></div>
        <div class="footer"><span>Feels like <strong>16°</strong></span><span>Wind <strong>24 km/h</strong></span></div>
      </article>
    </section>
  </main>
</body>
</html>

Reasoning trace (185 tokens)

**Designing Weather Card HTML**

I need to create polished output in HTML for weather cards using only CSS. The design should include four cards laid out in a desktop-friendly 1280x800 composition with a header. Each card needs a rich design featuring CSS-generated icons, avoiding SVGs entirely. For the visual elements, I might use sunny rotating rays and rain drops falling via spans. The cards should be responsive and have a sleek dark navy theme with gradient backgrounds. I’ll ensure the dimensions are appropriate and visually appealing.