GPT-5 Nano

by OpenAIReasoningClean

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

How it went

Total time: 22.0 s
Cost: $0.0013
Output tokens: 3,293
Spent thinking: 0 tokens
Speed: 156.8 tok/s
Console errors: 0

First token after: 1.0 s
First visible text after: 1.0 s
Prompt tokens: 498
Code size: 10.2 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-5-nano
Reasoning sent: {"effort":"minimal"}
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 · 338 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Weather Cards – CSS Only</title>
<style>
  :root{
    --bg: #0b1020;
    --card-radius: 20px;
    --gap: 1.25rem;
  }

  /* Global resets and layout */
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial;
    background: #0b1020;
    color: #f5f5f7;
    display: grid;
    place-items: center;
  }

  .wrapper {
    width: min(1180px, 92vw);
    padding: 2rem 0;
  }

  h1 {
    position: absolute;
    left: -9999px;
  }

  /* Grid of cards */
  .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
  }

  @media (max-width: 1024px) {
    .grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 560px) {
    .grid { grid-template-columns: 1fr; }
  }

  /* Card styles */
  .card {
    position: relative;
    border-radius: var(--card-radius);
    overflow: hidden;
    background: #111;
    transform: translateZ(0);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    min-height: 260px;
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
  }

  .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 28px rgba(0,0,0,.35);
  }

  /* gradient backgrounds per weather */
  .card.sunny {
    background: linear-gradient(135deg, #ffd76a 0%, #ff9c2f 60%, #ff6a00 100%);
    color: #2b1f05;
  }
  .card.rainy {
    background: linear-gradient(135deg, #7cc7ff 0%, #4a86b8 60%, #1b3356 100%);
    color: #e8f2ff;
  }
  .card.snowy {
    background: linear-gradient(135deg, #e9f0ff 0%, #bcd7f0 60%, #7ea3c8 100%);
    color: #0a2a4a;
  }
  .card.stormy {
    background: linear-gradient(135deg, #2b2b2b 0%, #1f1f1f 60%, #0b0b0b 100%);
    color: #e9e9e9;
  }

  /* Card inner padding space for content */
  .card__inner {
    padding: 1.6rem 1.4rem 1.4rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: .6rem;
  }

  .city {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .2px;
  }

  .temp {
    font-size: 1.25rem;
    font-weight: 700;
  }

  .desc {
    font-size: .95rem;
    opacity: .95;
  }

  /* Icon area (built from HTML/CSS only) */
  .icon {
    position: relative;
    height: 110px;
    display: grid;
    place-items: center;
    margin: .4rem auto 0;
  }

  /* The sun: circle plus rotated rays */
  .sun {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fffbe0 0 40%, #ffd24d 40% 100%);
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
  }

  /* sun rays as pseudo-elements around the sun container using multiple divs */
  .sun-ray {
    position: absolute;
    width: 2px;
    height: 22px;
    background: #ffd24d;
    top: 0;
    left: 50%;
    transform-origin: bottom center;
  }
  /* create 8 rays at different angles using transforms */
  .sun-ray.r1 { transform: translate(-50%, -100%) rotate(0deg);    animation: spin-sun 6s linear infinite; }
  .sun-ray.r2 { transform: translate(-50%, -100%) rotate(45deg);   animation: spin-sun 6s linear infinite; }
  .sun-ray.r3 { transform: translate(-50%, -100%) rotate(90deg);   animation: spin-sun 6s linear infinite; }
  .sun-ray.r4 { transform: translate(-50%, -100%) rotate(135deg);  animation: spin-sun 6s linear infinite; }
  .sun-ray.r5 { transform: translate(-50%, -100%) rotate(180deg);  animation: spin-sun 6s linear infinite; }
  .sun-ray.r6 { transform: translate(-50%, -100%) rotate(225deg);  animation: spin-sun 6s linear infinite; }
  .sun-ray.r7 { transform: translate(-50%, -100%) rotate(270deg);  animation: spin-sun 6s linear infinite; }
  .sun-ray.r8 { transform: translate(-50%, -100%) rotate(315deg);  animation: spin-sun 6s linear infinite; }

  /* rain drops */
  .rain {
    position: absolute;
    top: -18px;
    width: 2px;
    height: 20px;
    background: rgba(255,255,255,.9);
    border-radius: 1px;
    animation: fall 1s linear infinite;
    opacity: .9;
  }
  .rain.d1 { left: 14%; animation-duration: 0.9s; }
  .rain.d2 { left: 36%; animation-duration: 1.1s; animation-delay: .15s; }
  .rain.d3 { left: 52%; animation-duration: 0.75s; animation-delay: .25s; }
  .rain.d4 { left: 68%; animation-duration: 1.2s; animation-delay: .05s; }
  .rain.d5 { left: 82%; animation-duration: 1s; animation-delay: .2s; }
  @keyframes fall {
    0% { transform: translateY(-20px); opacity: 1; }
    80% { transform: translateY(110px); opacity: 0.9; }
    100% { transform: translateY(120px); opacity: 0; }
  }

  /* snow flakes */
  .snow {
    position: absolute;
    top: -16px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    filter: drop-shadow(0 1px 0 rgba(0,0,0,.15));
    animation: drift 4s linear infinite;
  }
  .snow.s1 { left: 14%; animation-duration: 6s; }
  .snow.s2 { left: 28%; animation-duration: 5s; animation-delay: .4s; }
  .snow.s3 { left: 44%; animation-duration: 6.5s; animation-delay: .2s; }
  .snow.s4 { left: 62%; animation-duration: 5.5s; animation-delay: .6s; }
  .snow.s5 { left: 78%; animation-duration: 6s; animation-delay: .3s; }

  @keyframes drift {
    0% { transform: translateY(-20px) translateX(0); opacity: .9; }
    50% { transform: translateY(120px) translateX(-20px); opacity: .8; }
    100% { transform: translateY(150px) translateX(20px); opacity: 0.8; }
  }

  /* lightning for stormy */
  .lightning {
    position: absolute;
    width: 2px;
    height: 60px;
    background: #fff;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    clip-path: polygon(50% 0%, 60% 0%, 58% 40%, 70% 40%, 43% 60%, 60% 60%, 50% 100%, 56% 60%, 40% 60%);
    animation: flash 2s linear infinite;
  }
  .lightning:after {
    content: "";
    position: absolute;
    width: 2px;
    height: 100px;
    left: 8px;
    top: -10px;
    background: #fff;
    clip-path: polygon(0 0, 60% 0, 30% 100%, 100% 100%);
  }

  /* animation timing with respect for reduced motion */
  @keyframes spin-sun {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  @keyframes flash {
    0%, 80%, 100% { opacity: 0; }
    82% { opacity: 1; }
    84% { opacity: 0; }
  }

  /* Respect prefers-reduced-motion: pause animations where appropriate */
  @media (prefers-reduced-motion: reduce) {
    .sun-ray,
    .rain,
    .snow,
    .lightning,
    .sun { animation: none; }
  }

  /* Section header helper (for aesthetics but non-essential) */
  .section {
    text-align: center;
    margin-bottom: 1.25rem;
    color: rgba(255,255,255,.92);
  }

  /* Small helper: visually hidden text for accessibility if needed */
  .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    border: 0;
  }

  /* Accessibility: reduced motion toggle is handled by browser preference;
     ensure layout remains pleasant if motion is reduced. */

</style>
</head>
<body>
  <main class="wrapper" aria-label="Weather cards demo">
    <h1>Weather Cards Demo (CSS Only)</h1>

    <section class="grid" aria-label="Weather grid">
      <!-- Sunny Card -->
      <article class="card sunny" aria-label="Sunny weather card">
        <div class="card__inner">
          <div class="icon" aria-hidden="true">
            <div class="sun" role="img" aria-label="Sun">
              <!-- rays -->
              <div class="sun-ray r1"></div>
              <div class="sun-ray r2"></div>
              <div class="sun-ray r3"></div>
              <div class="sun-ray r4"></div>
              <div class="sun-ray r5"></div>
              <div class="sun-ray r6"></div>
              <div class="sun-ray r7"></div>
              <div class="sun-ray r8"></div>
            </div>
          </div>
          <div class="city" aria-label="City name">Los Angeles</div>
          <div class="temp" aria-label="Temperature">26°C</div>
          <div class="desc" aria-label="Description">Sunny with light breeze</div>
        </div>
      </article>

      <!-- Rainy Card -->
      <article class="card rainy" aria-label="Rainy weather card">
        <div class="card__inner">
          <div class="icon" aria-hidden="true">
            <div class="sun" style="width:48px;height:48px;background:radial-gradient(circle at 30% 30%, #fffbe0 0 40%, #ffd24d 40% 100%); border-radius:50%; filter: saturate(110%); display:none;"></div>
            <!-- rain drops -->
            <div class="rain d1"></div>
            <div class="rain d2"></div>
            <div class="rain d3"></div>
            <div class="rain d4"></div>
            <div class="rain d5"></div>
          </div>
          <div class="city" aria-label="City name">Seattle</div>
          <div class="temp" aria-label="Temperature">12°C</div>
          <div class="desc" aria-label="Description">Light rain showers</div>
        </div>
      </article>

      <!-- Snowy Card -->
      <article class="card snowy" aria-label="Snowy weather card">
        <div class="card__inner">
          <div class="icon" aria-hidden="true">
            <div class="sun" style="width:0;height:0;visibility:hidden;"></div>
            <!-- snowflakes -->
            <div class="snow s1" aria-hidden="true"></div>
            <div class="snow s2" aria-hidden="true"></div>
            <div class="snow s3" aria-hidden="true"></div>
            <div class="snow s4" aria-hidden="true"></div>
            <div class="snow s5" aria-hidden="true"></div>
          </div>
          <div class="city" aria-label="City name"> Reykjavik</div>
          <div class="temp" aria-label="Temperature">-3°C</div>
          <div class="desc" aria-label="Description">Snow flurries drifting</div>
        </div>
      </article>

      <!-- Stormy Card -->
      <article class="card stormy" aria-label="Stormy weather card">
        <div class="card__inner">
          <div class="icon" aria-hidden="true">
            <div class="sun" style="width:0;height:0;visibility:hidden;"></div>
            <div class="lightning" aria-label="Lightning bolt"></div>
          </div>
          <div class="city" aria-label="City name">London</div>
          <div class="temp" aria-label="Temperature">16°C</div>
          <div class="desc" aria-label="Description">Thunderstorms rolling in</div>
        </div>
      </article>
    </section>

  </main>
</body>
</html>