GPT-5 Nano

by OpenAIReasoningClean

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

How it went

Total time: 1 min 19 s
Cost: $0.0041
Output tokens: 10,160
Spent thinking: 6,976 tokens
Speed: 135.1 tok/s
Console errors: 0

First token after: 4.1 s
First visible text after: 1 min 1 s
Prompt tokens: 498
Code size: 10.4 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-5-nano
Reasoning sent: model default
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 · 289 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>
    /* Base reset and typography */
    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
      background: #0b1020;
      color: #fff;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* Layout grid */
    .wrapper {
      max-width: 1200px;
      margin: 40px auto;
      padding: 0 20px;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 28px;
    }

    /* Card base */
    .card {
      border-radius: 16px;
      padding: 20px 20px 16px;
      min-height: 280px;
      display: grid;
      grid-template-rows: auto 1fr;
      align-items: start;
      box-shadow: 0 8px 22px rgba(0,0,0,0.25);
      transform: translateZ(0); /* helps with smooth hover lift */
      transition: transform 0.25s ease;
      overflow: hidden;
    }
    .card:hover { transform: translateY(-6px); }

    /* Icon containers (one per weather type) */
    .icon { display: grid; place-items: center; height: 170px; margin-bottom: 6px; }

    /* Sunny: rotating sun rays */
    .sunny { background: linear-gradient(135deg, #ffd966 0%, #ffb347 60%, #f57c00 100%); color: #1b1f1e; }
    .sun-wrap {
      position: relative;
      width: 120px;
      height: 120px;
      display: grid;
      place-items: center;
      animation: spin 8s linear infinite;
    }
    .sun-core {
      position: absolute;
      width: 50px; height: 50px;
      background: #ffd54f;
      border-radius: 50%;
      z-index: 2;
      box-shadow: 0 0 0 6px rgba(253, 214, 92, 0.25);
    }
    /* Rays: 8 spokes around the sun
       Each ray is positioned by rotating around the center using a custom property --angle */
    .ray {
      --angle: 0deg;
      position: absolute;
      width: 8px;
      height: 28px;
      background: #ffd54f;
      top: 50%; left: 50%;
      transform-origin: center;
      /* place each ray at a radius from the center using translateX after rotation */
      transform: rotate(var(--angle)) translateX(66px);
      border-radius: 4px;
      z-index: 1;
    }

    /* Raindrops: rainy */
    .rainy { background: linear-gradient(135deg, #3a6fbf 0%, #1e2f64 100%); color: #e8f1ff; }
    .rain { position: relative; width: 180px; height: 140px; margin: 0 auto; overflow: visible; }
    .drop {
      position: absolute;
      top: -20px;
      width: 2px;
      height: 14px;
      background: rgba(173, 216, 255, 0.95);
      border-radius: 2px;
      animation: fall 1s linear infinite;
    }
    /* drizzle spacing across the width with varying horizontal positions and delays */
    /* We'll define 12 drops inline with separate left positions and delays via inline styles. */

    /* Snowy: drifting snowflakes */
    .snowy { background: linear-gradient(135deg, #a8e5ff 0%, #e6f7ff 60%, #ffffff 100%); color: #0b1c2b; }
    .snow { position: relative; width: 180px; height: 170px; margin: 0 auto; overflow: hidden; }
    .flake {
      position: absolute;
      top: -20px;
      width: 8px; height: 8px;
      background: #fff;
      border-radius: 50%;
      opacity: 0.92;
      transform: translateY(0) rotate(0deg);
      /* Each flake uses its own left position and delay via inline styles */
      animation: snow 5s linear infinite;
    }

    /* Stormy: flashing lightning bolt */
    .stormy { background: linear-gradient(135deg, #2c2d7f 0%, #4a4a6c 60%, #2b2f4f 100%); color: #eaf2ff; }
    .bolt {
      position: absolute;
      left: 50%; top: 40px;
      width: 40px; height: 110px;
      transform: translateX(-50%);
      background: #fff;
      clip-path: polygon(60% 0%, 40% 0%, 65% 40%, 25% 40%, 50% 90%, 0% 90%, 40% 100%, 0% 100%);
      border-radius: 4px;
      opacity: 0.92;
      animation: boltFlash 3s infinite;
      filter: drop-shadow(0 0 6px rgba(255,255,255,0.9));
    }

    /* Card content */
    .info {
      padding: 0 6px 6px;
      display: grid;
      gap: 6px;
      align-content: start;
    }
    .city {
      font-weight: 700;
      font-size: 1.15rem;
      letter-spacing: .2px;
      margin: 2px 0 0;
    }
    .temp {
      font-size: 1.35rem;
      font-weight: 700;
      letter-spacing: .3px;
    }
    .desc {
      font-size: .95rem;
      opacity: .95;
      line-height: 1.25;
    }

    /* Background color tuning per card for readability on text color */
    .card.sunny { color: #1b1f1e; }
    .card.rainy { color: #e8f1ff; }
    .card.snowy { color: #0c1823; }
    .card.stormy { color: #eaf2ff; }

    /* Keyframes for animations */
    @keyframes spin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }

    @keyframes fall {
      0% { top: -20px; opacity: 0.9; }
      100% { top: 170px; opacity: 0.0; }
    }

    @keyframes snow {
      0% { transform: translateY(-20px) rotate(0deg); opacity: 0.9; }
      100% { transform: translateY(180px) rotate(360deg); opacity: 0.8; }
    }

    @keyframes boltFlash {
      0%, 70% { opacity: 0.92; }
      72% { opacity: 1; }
      74% { opacity: 0.92; }
      100% { opacity: 0.92; }
    }

    /* Reduced motion preference */
    @media (prefers-reduced-motion: reduce) {
      .sun-wrap, .drop, .flake, .bolt { animation: none !important; }
    }

    /* Responsive behavior: 4 per row on wide, 2 per row on medium, 1 per row on small */
    @media (max-width: 1100px) {
      .grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 640px) {
      .grid { grid-template-columns: 1fr; }
      .icon { height: auto; margin-bottom: 0; }
      .sun-wrap { transform-origin: center; }
      .card { min-height: 240px; }
    }

    /* Layout niceties for the icon stacking on narrow viewports */
    .icon { align-self: start; }
  </style>
</head>
<body>
  <main class="wrapper" aria-label="Weather cards demonstration">
    <section class="grid" aria-label="Weather cards grid">
      <!-- Sunny card -->
      <article class="card sunny card-sunny" aria-label="Sunny weather card">
        <div class="icon sunny-icon" aria-label="Sunny icon">
          <div class="sun-wrap" aria-hidden="true">
            <span class="sun-core"></span>
            <span class="ray" style="--angle:0deg"></span>
            <span class="ray" style="--angle:45deg"></span>
            <span class="ray" style="--angle:90deg"></span>
            <span class="ray" style="--angle:135deg"></span>
            <span class="ray" style="--angle:180deg"></span>
            <span class="ray" style="--angle:225deg"></span>
            <span class="ray" style="--angle:270deg"></span>
            <span class="ray" style="--angle:315deg"></span>
          </div>
        </div>
        <div class="info" aria-label="Sunny weather info">
          <div class="city" style="font-weight:700;">Santa Monica</div>
          <div class="temp" style="margin-top:2px;">22°C</div>
          <div class="desc" style="opacity:.95;">Sunny and warm</div>
        </div>
      </article>

      <!-- Rainy card -->
      <article class="card rainy card-rainy" aria-label="Rainy weather card">
        <div class="icon rainy-icon" aria-label="Rain icon">
          <div class="rain" aria-hidden="true">
            <!-- 12 rain drops with varying horizontal positions and delays -->
            <span class="drop" style="left:6%; animation-delay:0s;"></span>
            <span class="drop" style="left:16%; animation-delay:.15s;"></span>
            <span class="drop" style="left:28%; animation-delay:.08s;"></span>
            <span class="drop" style="left:38%; animation-delay:.22s;"></span>
            <span class="drop" style="left:52%; animation-delay:.05s;"></span>
            <span class="drop" style="left:64%; animation-delay:.18s;"></span>
            <span class="drop" style="left:72%; animation-delay:.1s;"></span>
            <span class="drop" style="left:84%; animation-delay:.25s;"></span>
            <span class="drop" style="left:92%; animation-delay:.12s;"></span>
            <span class="drop" style="left:10%; animation-delay:.3s;"></span>
            <span class="drop" style="left:50%; animation-delay:.35s;"></span>
            <span class="drop" style="left:70%; animation-delay:.28s;"></span>
          </div>
        </div>
        <div class="info" aria-label="Rainy weather info">
          <div class="city" style="color:#e8f5ff;">Seattle</div>
          <div class="temp" style="color:#e8f5ff; margin-top:2px;">12°C</div>
          <div class="desc" style="color:#e8f5ff; opacity:.95;">Showers and cool</div>
        </div>
      </article>

      <!-- Snowy card -->
      <article class="card snowy card-snowy" aria-label="Snowy weather card">
        <div class="icon snowy-icon" aria-label="Snow icon">
          <div class="snow" aria-hidden="true">
            <!-- Drifting snowflakes (simple dots with rotation) -->
            <span class="flake" style="left:6%; animation-delay:0s;"></span>
            <span class="flake" style="left:22%; animation-delay:.4s;"></span>
            <span class="flake" style="left:38%; animation-delay:.2s;"></span>
            <span class="flake" style="left:52%; animation-delay:.6s;"></span>
            <span class="flake" style="left:68%; animation-delay:.1s;"></span>
            <span class="flake" style="left:84%; animation-delay:.5s;"></span>
          </div>
        </div>
        <div class="info" aria-label="Snowy weather info">
          <div class="city" style="font-weight:700; color:#0b2030;">Zurich</div>
          <div class="temp" style="color:#0b2030; margin-top:2px;">-2°C</div>
          <div class="desc" style="color:#0b2030; opacity:.95;">Snowy and crisp</div>
        </div>
      </article>

      <!-- Stormy card -->
      <article class="card stormy card-stormy" aria-label="Stormy weather card">
        <div class="icon stormy-icon" aria-label="Lightning icon">
          <div class="bolt" aria-hidden="true"></div>
        </div>
        <div class="info" aria-label="Stormy weather info">
          <div class="city" style="font-weight:700;">London</div>
          <div class="temp" style="margin-top:2px;">8°C</div>
          <div class="desc" style="opacity:.95;">Stormy with thunder</div>
        </div>
      </article>
    </section>
  </main>

  <!-- Inline scriptless enhancements: no JavaScript per requirements -->
</body>
</html>

Reasoning trace (6,976 tokens)

**Designing Weather Icons in HTML**

I'm laying out the HTML structure for a weather display. First, I'll create a container div with the class 'grid', containing four cards for different weather types: sunny, rainy, snowy, and stormy.

For the sun, I envision a central circle surrounded by rays made of divs. The rain effect involves multiple drop elements with animations that simulate falling. For snow, I'll use flake particles that fall while rotating, and the storm will feature a lightning bolt created using CSS clip-path.**Creating a Responsive Weather Card Design**

I'm thinking about designing a CSS structure for a weather display without images. I plan to use a :before pseudo-element to create a diagonal lightning bolt with the clip-path property, animating its brightness with opacity for a flickering effect.

Each card will showcase a city with its temperature and description. I also want the cards to lift slightly when hovered over by using a transform property.

For responsiveness, I’ll set up a grid with four columns on larger screens that switches to two columns at a width of 1000px, and one column on screens smaller than 600px.**Implementing Media Queries and Initial Visibility**

I’m setting up media queries for my layout. For screens up to 1200px, I’ll use two columns, and for 600px or less, just one column. The request is for four columns on desktops, so I’ll stick with the default of four columns.

I also need to consider those who prefer reduced motion, so I'll add a media query to eliminate animations for those users. It's essential to ensure that something meaningful is displayed on the initial paint.

The HTML structure will start with the necessary doctype and meta tags, along with defining color palettes for weather gradients in CSS.**Defining Weather Gradient Backgrounds**

I'm planning specific gradient backgrounds for each weather type: a blue-grey gradient for rain, a light blue to white gradient for snow, and a dark purple to grey gradient for storms, with neon effects. Each card will feature its unique gradient that matches its weather condition.

For the sunny card, I'm setting the background with a vibrant linear gradient while ensuring readability with white text and a subtle shadow for contrast. I'll implement icons for each weather type, starting with the sunny icon, where I might use pseudo-elements to create the rays more efficiently.**Designing Weather Icons with Animation**

I'm envisioning the structure for my sunny icon, which will include a central sun and eight rays using spans, positioned around it with CSS. I'll set a rotating animation to give the impression of movement.

For the rainy icon, I plan to create drops that will fall using keyframe animations, resetting their position once they reach the bottom of the container. Snowflakes will have a similar approach, using small circles that fall with opacity adjustments to simulate snow.

Each weather icon will be animated and visually distinct for an engaging user experience!**Creating Weather Icons with CSS**

I'm planning to create snowflakes using small circles with styles and pseudo-elements to resemble snowflake shapes. The snowflakes will drift downward with an animation effect. For the storm icon, I want to design a lightning bolt using clip-path for a zig-zag shape, layered to give it a glowing effect.

I need to ensure the HTML structure is accessible, with each weather card displaying the city name, temperature, and description. I'll pick distinct cities for clarity in presentation. This should be visually engaging and functional!**Designing Weather Cards with CSS**

I'm developing a grid layout for weather cards. Each card will have a hover effect that lifts it slightly, and they will have gradient backgrounds representing different weather conditions. I’ll define specific styles for sunny, rainy, snowy, and stormy conditions, ensuring readability with appropriate text colors.

For dynamic effects, I’m implementing keyframe animations for elements like rain drops, snowflakes, and lightning bolts. I must ensure animation properties are set correctly to achieve the desired visual effects, maintaining a visually appealing and functional design.**Creating Flashing Lightning with CSS**

I'm designing a lightning effect using a pseudo-element for the bolt, animating its opacity to create a flashing effect. I'm setting the body layout to ensure a neat appearance without horizontal scrollbars, organizing elements into a grid.

I'll implement media queries to adjust the grid's column layout for different screen sizes. The cards will have readable text colors based on their backgrounds, maintaining accessibility with appropriate attributes. Lastly, I'll summarize everything in a clear HTML structure.