gpt-oss-120b

by OpenAIReasoningClean

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

How it went

Total time: 26.4 s
Cost: $0.0004
Output tokens: 2,096
Spent thinking: 44 tokens
Speed: 80.9 tok/s
Console errors: 0

First token after: 510 ms
First visible text after: 886 ms
Prompt tokens: 562
Code size: 5.8 KB
Finish reason: stop
Served by: AkashML
Model id: openai/gpt-oss-120b
Reasoning sent: {"effort":"low"}
Max output: 64,000 tokens
Generated: Nov 11, 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 · 232 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animated Weather Cards</title>
<style>
  :root {
    --card-width: 260px;
    --card-radius: 1rem;
    --card-gap: 1.5rem;
    --font-family: system-ui, -apple-system, sans-serif;
  }
  body {
    margin: 0;
    font-family: var(--font-family);
    background:#111;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding:2rem;
    min-height:100vh;
    box-sizing:border-box;
  }
  .grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(var(--card-width),1fr));
    gap:var(--card-gap);
    width:100%;
    max-width:1200px;
  }
  .card {
    background: linear-gradient(135deg, #555, #333);
    border-radius: var(--card-radius);
    color:#fff;
    padding:1.5rem;
    text-align:center;
    box-shadow:0 4px 6px rgba(0,0,0,.4);
    transition:transform .3s;
    overflow:hidden;
    position:relative;
  }
  .card:hover { transform:translateY(-8px); }

  .city { font-size:1.2rem; margin-top:.5rem; }
  .temp { font-size:2.2rem; font-weight:bold; margin:.3rem 0; }
  .desc { font-size:.9rem; opacity:.8; }

  /* Sunny */
  .sunny { background:linear-gradient(135deg,#FFB75E,#ED8F03); }
  .sunny .icon {
    position:relative;
    width:80px;height:80px;
    margin:0 auto;
    border-radius:50%;
    background:#FFD93B;
    box-shadow:0 0 0 8px rgba(255,217,59,.3);
  }
  .sunny .icon::before,
  .sunny .icon::after {
    content:"";
    position:absolute;
    background:#FFD93B;
    width:12px;height:12px;
    border-radius:50%;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    box-shadow:
      0 -40px 0 0 #FFD93B,
      0 40px 0 0 #FFD93B,
      -40px 0 0 0 #FFD93B,
      40px 0 0 0 #FFD93B,
      -28px -28px 0 0 #FFD93B,
      28px -28px 0 0 #FFD93B,
      -28px 28px 0 0 #FFD93B,
      28px 28px 0 0 #FFD93B;
    animation: spin 6s linear infinite;
  }
  @keyframes spin {
    from{transform:translate(-50%,-50%) rotate(0deg);}
    to{transform:translate(-50%,-50%) rotate(360deg);}
  }

  /* Rainy */
  .rainy { background:linear-gradient(135deg,#00C6FB,#005BEA); }
  .rainy .icon {
    position:relative;
    width:80px;height:80px;
    margin:0 auto;
  }
  .rainy .cloud {
    position:absolute;
    top:20px; left:10px;
    width:60px;height:40px;
    background:#fff;
    border-radius:30px 30px 25px 25px;
    box-shadow: -20px 0 0 0 #fff, 20px 0 0 0 #fff;
  }
  .rainy .drop {
    position:absolute;
    width:6px;height:12px;
    background:#00C6FB;
    border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
    left:calc(20px + var(--i)*15px);
    top:55px;
    animation: fall 1s linear infinite;
  }
  .rainy .drop:nth-child(2){ --i:1; animation-delay:.2s; }
  .rainy .drop:nth-child(3){ --i:2; animation-delay:.4s; }
  .rainy .drop:nth-child(4){ --i:3; animation-delay:.6s; }
  @keyframes fall {
    0%{transform:translateY(0); opacity:1;}
    80%{opacity:1;}
    100%{transform:translateY(20px); opacity:0;}
  }

  /* Snowy */
  .snowy { background:linear-gradient(135deg,#E0EAF9,#C9D6FF); }
  .snowy .icon {
    position:relative;
    width:80px;height:80px;
    margin:0 auto;
  }
  .snowy .cloud {
    position:absolute;
    top:20px; left:10px;
    width:60px;height:40px;
    background:#fff;
    border-radius:30px 30px 25px 25px;
    box-shadow:-20px 0 0 0 #fff,20px 0 0 0 #fff;
  }
  .snowy .flake {
    position:absolute;
    width:6px;height:6px;
    background:#fff;
    border-radius:50%;
    left:calc(15px + var(--i)*15px);
    top:55px;
    animation: drift 2s linear infinite;
  }
  .snowy .flake:nth-child(2){ --i:1; animation-delay:.5s; }
  .snowy .flake:nth-child(3){ --i:2; animation-delay:1s; }
  .snowy .flake:nth-child(4){ --i:3; animation-delay:1.5s; }
  @keyframes drift {
    0%{transform:translateY(0) translateX(0);}
    50%{transform:translateY(20px) translateX(5px);}
    100%{transform:translateY(40px) translateX(0); opacity:0;}
  }

  /* Stormy */
  .stormy { background:linear-gradient(135deg,#434343,#000000); }
  .stormy .icon {
    position:relative;
    width:80px;height:80px;
    margin:0 auto;
  }
  .stormy .cloud {
    position:absolute;
    top:15px; left:10px;
    width:60px;height:40px;
    background:#777;
    border-radius:30px 30px 25px 25px;
    box-shadow:-20px 0 0 0 #777,20px 0 0 0 #777;
  }
  .stormy .lightning {
    position:absolute;
    width:0;height:0;
    border-left:15px solid transparent;
    border-right:15px solid transparent;
    border-bottom:25px solid #FFD700;
    left:32px; top:55px;
    animation: flash 1.5s infinite;
  }
  @keyframes flash {
    0%,70%,100%{opacity:0;}
    75%{opacity:1;}
  }

  @media (prefers-reduced-motion: reduce) {
    .sunny .icon::before,
    .rainy .drop,
    .snowy .flake,
    .stormy .lightning { animation:none; }
  }
</style>
</head>
<body>
<div class="grid">
  <div class="card sunny">
    <div class="icon"></div>
    <div class="city">Sunnyville</div>
    <div class="temp">28°C</div>
    <div class="desc">Clear sky</div>
  </div>

  <div class="card rainy">
    <div class="icon">
      <div class="cloud"></div>
      <div class="drop"></div>
      <div class="drop"></div>
      <div class="drop"></div>
      <div class="drop"></div>
    </div>
    <div class="city">Rain City</div>
    <div class="temp">16°C</div>
    <div class="desc">Light showers</div>
  </div>

  <div class="card snowy">
    <div class="icon">
      <div class="cloud"></div>
      <div class="flake"></div>
      <div class="flake"></div>
      <div class="flake"></div>
      <div class="flake"></div>
    </div>
    <div class="city">Snowtown</div>
    <div class="temp">-4°C</div>
    <div class="desc">Snowfall</div>
  </div>

  <div class="card stormy">
    <div class="icon">
      <div class="cloud"></div>
      <div class="lightning"></div>
    </div>
    <div class="city">Stormburg</div>
    <div class="temp">22°C</div>
    <div class="desc">Thunderstorm</div>
  </div>
</div>
</body>
</html>

Reasoning trace (44 tokens)

We need output HTML with CSS only, no script. Provide four cards with CSS icons using divs and pseudo. Provide keyframes and media query for reduced motion. Provide responsive grid. Output fenced code block with html.