GPT-5 Nano

by OpenAIReasoningClean

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

How it went

Total time: 25.5 s
Cost: $0.0015
Output tokens: 3,753
Spent thinking: 192 tokens
Speed: 161.1 tok/s
Console errors: 0

First token after: 2.2 s
First visible text after: 4.6 s
Prompt tokens: 498
Code size: 10.3 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-5-nano
Reasoning sent: {"effort":"low"}
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 · 313 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{
    --card-radius: 16px;
    --gap: 20px;
  }

  /* Page reset & layout */
  *, *::before, *::after { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: #0b1020;
    color: #0f1220;
    display: grid;
    place-items: center;
  }

  .wrapper {
    width: min(1200px, 92vw);
    padding: 32px 0;
  }

  /* Responsive grid: 4 per row on large screens, 2 on medium, 1 on small */
  .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
  }
  @media (max-width: 1100px) {
    .grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px) {
    .grid { grid-template-columns: 1fr; }
  }

  /* Card */
  .card {
    position: relative;
    border-radius: var(--card-radius);
    padding: 22px;
    min-height: 260px;
    color: #fff;
    overflow: hidden;
    transform: translateY(0);
    transition: transform 250ms ease, box-shadow 250ms ease;
    box-shadow: 0 15px 40px rgba(0,0,0,.25);
  }
  .card:focus { outline: 2px solid rgba(255,255,255,.8); outline-offset: 2px; }
  .card:hover { transform: translateY(-6px); }

  /* Shared content */
  .city { font-size: 1.15rem; font-weight: 600; margin: 6px 0 6px; letter-spacing: .4px; }
  .temp { font-size: 2.25rem; font-weight: 700; margin: 6px 0; letter-spacing: .5px; }
  .desc { font-size: .95rem; opacity: .95; }

  /* Icon area */
  .icon {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 120px; height: 120px;
    display: grid; place-items: center;
  }

  /* Sunny card */
  .sunny {
    background: linear-gradient(135deg, #ffd76e 0%, #ffa40d 60%, #ff7a00 100%);
  }
  .sunny .sun {
    position: relative;
    width: 58px; height: 58px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff6b3 0 40%, #ffd54a 40% 100%);
    box-shadow: 0 0 0 6px rgba(255, 214, 90, 0.25);
    isolation: isolate;
    animation: spin 8s linear infinite;
  }
  .sunny .sun::before,
  .sunny .sun::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 6px; height: 26px;
    background: #ffd54a;
    transform-origin: center bottom;
    border-radius: 2px;
  }
  .sunny .sun::before { transform: translate(-50%, -50%) rotate(45deg) translateY(-9px); }
  .sunny .sun::after  { transform: translate(-50%, -50%) rotate(-45deg) translateY(-9px); }
  .sunny .ray {
    position: absolute;
    width: 4px; height: 18px;
    background: #ffd54a;
    border-radius: 2px;
    top: 6px;
    left: 58px;
    transform-origin: bottom center;
    animation: ray 2.3s linear infinite;
  }
  .sunny .ray:nth-child(3) { transform: rotate(45deg); left: 54px; top: 6px; height: 22px; }
  .sunny .ray:nth-child(4) { transform: rotate(-45deg); left: 54px; top: 6px; height: 22px; }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes ray { 0% { transform: rotate(0deg); opacity: 0.9; } 50% { opacity: 1; } 100% { transform: rotate(360deg); opacity: 0.9; } }

  /* Rainy card */
  .rainy {
    background: linear-gradient(135deg, #2e3a66 0%, #1b2a54 60%, #0e1740 100%);
  }
  .rainy .cloud {
    position: absolute;
    top: 22px; left: 18px;
    width: 68px; height: 34px;
    background: #b2c3d9;
    border-radius: 60px;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.15));
  }
  .rainy .cloud::after {
    content:"";
    position: absolute;
    left: -6px; right: -6px; bottom: -10px;
    height: 26px;
    background: #b2c3d9;
    border-radius: 50px;
  }
  .rainy .drop {
    position: absolute;
    top: 50px;
    width: 3px; height: 14px;
    background: #a3d0ff;
    border-radius: 2px;
    animation: fall 1s linear infinite;
    opacity: .9;
  }
  .rainy .drop:nth-child(1) { left: 26px; animation-delay: .1s; }
  .rainy .drop:nth-child(2) { left: 38px; animation-delay: .3s; }
  .rainy .drop:nth-child(3) { left: 54px; animation-delay: .5s; }
  .rainy .drop:nth-child(4) { left: 68px; animation-delay: .2s; }
  .rainy .drop:nth-child(5) { left: 82px; animation-delay: .4s; }
  @keyframes fall { 0% { transform: translateY(-20px); opacity: 0.0; } 10% { opacity: 0.9; } 100% { transform: translateY(140px); opacity: 0; } }

  /* Snowy card */
  .snowy {
    background: linear-gradient(135deg, #3e5a8a 0%, #254a7a 50%, #1b2a54 100%);
  }
  .snowy .flake {
    position: absolute;
    top: 0;
    width: 6px; height: 6px;
    background: white;
    border-radius: 50%;
    opacity: .9;
    animation: drift 6s linear infinite;
  }
  .snowy .flake:before,
  .snowy .flake:after {
    content: "";
    position: absolute;
    width: 2px; height: 8px; background: white;
    left: 2px; top: -2px;
  }
  .snowy .flake:after { transform: rotate(45deg); }
  .snowy .flake:nth-child(1) { left: 16px; animation-delay: 0s;   animation-duration: 6s; }
  .snowy .flake:nth-child(2) { left: 40px; animation-delay: .5s;  animation-duration: 7s; }
  .snowy .flake:nth-child(3) { left: 66px; animation-delay: 1s;   animation-duration: 5s; }
  .snowy .flake:nth-child(4) { left: 88px; animation-delay: 1.5s; animation-duration: 6.5s; }
  .snowy .flake:nth-child(5) { left: 110px; animation-delay: 2s; animation-duration: 7s; }
  @keyframes drift { 0% { transform: translateY(-20px) translateX(0); opacity: 0.9; } 10% { opacity: 1; } 100% { transform: translateY(180px) translateX(-20px); opacity: 0; } }

  /* Stormy card */
  .stormy {
    background: linear-gradient(135deg, #5a5f7f 0%, #2b2f4d 60%, #1a1740 100%);
  }
  .stormy .clouds {
    position: absolute;
    top: 20px; left: 12px;
    width: 100px; height: 40px;
    background: rgba(255,255,255,.25);
    border-radius: 40px;
    filter: blur(.2px);
    overflow: hidden;
  }
  .stormy .clouds::before, .stormy .clouds::after {
    content: "";
    position: absolute;
    width: 60px; height: 32px;
    background: rgba(255,255,255,.35);
    border-radius: 50px;
  }
  .stormy .clouds::before { left: -20px; top: 6px; }
  .stormy .clouds::after { left: 60px; top: 6px; }

  .lightning {
    position: absolute;
    width: 2px; height: 0;
    background: transparent;
    left: 40px; top: 60px;
    transform-origin: top;
    animation: strike 1.8s linear infinite;
  }
  .lightning:before,
  .lightning:after {
    content: "";
    position: absolute;
    width: 2px; height: 18px; background: white;
  }
  .lightning:before { left: -6px; top: -2px; transform: rotate(20deg); }
  .lightning:after  { left: 8px; top: 0px; transform: rotate(-18deg); }

  @keyframes strike {
    0%, 19% { opacity: 0; }
    20% { opacity: 1; transform: translateY(0); }
    21% { opacity: 0; transform: translateY(6px); }
    100% { opacity: 0; }
  }

  /* Content color adjustments per card for readability over background */
  .sunny, .sunny .city, .sunny .temp, .sunny .desc { color: #2a1c00; }
  .rainy, .rainy .city, .rainy .temp, .rainy .desc { color: #e6f2ff; }
  .snowy, .snowy .city, .snowy .temp, .snowy .desc { color: #eaf5ff; }
  .stormy, .stormy .city, .stormy .temp, .stormy .desc { color: #eef2ff; }

  /* Reduced motion preference */
  @media (prefers-reduced-motion: reduce) {
    .sunny .sun { animation: none; }
    .sunny .ray { animation: none; }
    .rainy .drop { animation: none; }
    .snowy .flake { animation: none; }
    .stormy .clouds, .stormy .lightning { animation: none; }
  }

  /* Accessibility: friendly label for first paint visibility */
  .sr-only {
    position: absolute !important;
    height: 1px;width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
  }

  /* Minor decorative enhancement: gentle gradient tilt on hover per card */
  .card:hover { transform: translateY(-6px) rotate(-0.3deg); }

</style>
</head>
<body>
  <div class="wrapper" aria-label="Weather cards gallery">
    <div class="grid">

      <!-- Sunny Card -->
      <section class="card sunny" aria-label="Sunny weather card">
        <div class="icon" aria-hidden="true">
          <div class="sun" title="Sun"></div>
        </div>
        <h3 class="city" style="margin:0;">San Francisco</h3>
        <div class="temp" aria-label="temperature">72°F</div>
        <div class="desc" aria-label="description">Sunny with light breeze</div>
        <span class="sr-only">Weather: Sunny</span>
      </section>

      <!-- Rainy Card -->
      <section class="card rainy" aria-label="Rainy weather card">
        <div class="icon" aria-hidden="true" style="top:12px;right:12px;">
          <div class="cloud" style="top:24px; left:6px;"></div>
          <div class="drop" style="left:22px;"></div>
          <div class="drop" style="left:40px;"></div>
          <div class="drop" style="left:60px;"></div>
          <div class="drop" style="left:78px;"></div>
          <div class="drop" style="left:92px;"></div>
        </div>
        <h3 class="city" style="margin:0;">Seattle</h3>
        <div class="temp" aria-label="temperature">58°F</div>
        <div class="desc" aria-label="description">Showers and grey skies</div>
      </section>

      <!-- Snowy Card -->
      <section class="card snowy" aria-label="Snowy weather card">
        <div class="icon" aria-hidden="true" style="top:10px;right:10px;">
          <!-- drifting snowflakes -->
          <div class="flake" style="top:0; left:14px;"></div>
          <div class="flake" style="top:0; left:40px;"></div>
          <div class="flake" style="top:0; left:66px;"></div>
          <div class="flake" style="top:0; left:92px;"></div>
          <div class="flake" style="top:0; left:118px;"></div>
        </div>
        <h3 class="city" style="margin:0;">Denver</h3>
        <div class="temp" aria-label="temperature">32°F</div>
        <div class="desc" aria-label="description">Light snow and chilly winds</div>
      </section>

      <!-- Stormy Card -->
      <section class="card stormy" aria-label="Stormy weather card">
        <div class="icon" aria-hidden="true" style="top:8px;right:8px;">
          <div class="clouds"></div>
          <div class="lightning" aria-hidden="true"></div>
        </div>
        <h3 class="city" style="margin:0;">New York</h3>
        <div class="temp" aria-label="temperature">65°F</div>
        <div class="desc" aria-label="description">Storm clouds with occasional flashes</div>
      </section>

    </div>
  </div>

  <!-- No JavaScript or external assets required -->
</body>
</html>

Reasoning trace (192 tokens)

**Creating HTML with CSS animations**

I'm working on outputting a single HTML file without any JavaScript. The plan is to have four cards with animated icons using only CSS. I won't include images, and ARIA isn't necessary here. Each card will have a unique gradient background and will feature CSS-created rain drops, snowflakes, and lightning effects. The design will be responsive, showcasing four cards on desktop and a stacked layout on mobile. I’m ensuring animations are visible upon load and sticking to CSS-only elements for the icons. Let's get to the coding part!**Considering reduced motion settings**

I need to include a prefers-reduced-motion option to ensure that users who prefer reduced animations can disable them. This is important for accessibility, as it allows a smoother experience for those sensitive to motion. I'll make sure to incorporate this into the design, which helps it be more user-friendly. Now, let's get started crafting the code and ensuring that it adheres to this guideline!