gpt-oss-120b

by OpenAIReasoningClean

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

How it went

Total time: 15.6 s
Cost: $0.0010
Output tokens: 3,919
Spent thinking: 1,775 tokens
Speed: 259.7 tok/s
Console errors: 0

First token after: 479 ms
First visible text after: 7.2 s
Prompt tokens: 562
Code size: 6.3 KB
Finish reason: stop
Served by: Crusoe
Model id: openai/gpt-oss-120b
Reasoning sent: {"effort":"medium"}
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 · 219 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animated Weather Cards</title>
<style>
  :root {
    --card-radius: 12px;
    --icon-size: 80px;
    --font-primary: 1.1rem;
    --font-secondary: 0.9rem;
  }
  body {
    margin:0;
    font-family:system-ui,Arial,sans-serif;
    background:#f0f0f5;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    min-height:100vh;
  }
  .weather-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:20px;
    padding:20px;
    max-width:1200px;
    width:100%;
  }
  .card {
    position:relative;
    padding:30px 20px 20px;
    border-radius:var(--card-radius);
    color:#fff;
    text-align:center;
    overflow:hidden;
    box-shadow:0 4px 12px rgba(0,0,0,0.2);
    transition:transform .3s,box-shadow .3s;
  }
  .card:hover {
    transform:translateY(-8px);
    box-shadow:0 12px 20px rgba(0,0,0,0.3);
  }
  .icon {
    position:relative;
    width:var(--icon-size);
    height:var(--icon-size);
    margin:auto;
  }
  .city {font-size:1.2rem;margin:10px 0 4px;}
  .temp {font-size:2rem;margin:4px 0;}
  .desc {font-size:var(--font-secondary);opacity:.9;}

  /* Sunny */
  .sunny {background:linear-gradient(135deg,#FFEE58,#F9A825);}
  .sunny .sun {
    width:60px;height:60px;background:#FFEB3B;border-radius:50%;
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    box-shadow:0 0 20px rgba(255,235,59,.6);
  }
  .sunny .rays {position:absolute;top:50%;left:50%;width:0;height:0;
    animation:spin 8s linear infinite;}
  .sunny .ray {
    position:absolute;width:4px;height:20px;background:#FFEB3B;
    top:-30px;left:-2px;border-radius:2px;
    transform-origin:2px 40px;
  }
  .sunny .rays .ray:nth-child(1){transform:rotate(0deg);}
  .sunny .rays .ray:nth-child(2){transform:rotate(45deg);}
  .sunny .rays .ray:nth-child(3){transform:rotate(90deg);}
  .sunny .rays .ray:nth-child(4){transform:rotate(135deg);}
  .sunny .rays .ray:nth-child(5){transform:rotate(180deg);}
  .sunny .rays .ray:nth-child(6){transform:rotate(225deg);}
  .sunny .rays .ray:nth-child(7){transform:rotate(270deg);}
  .sunny .rays .ray:nth-child(8){transform:rotate(315deg);}

  /* Rainy */
  .rainy {background:linear-gradient(135deg,#90CAF9,#42A5F5);}
  .rainy .cloud {
    width:70px;height:45px;background:#fff;border-radius:40px;
    position:absolute;top:20px;left:5px;
    box-shadow: -20px 10px 0 0 #fff, 20px 10px 0 0 #fff;
  }
  .rainy .rain {
    position:absolute;top:60px;left:50%;transform:translateX(-50%);
  }
  .rainy .drop {
    width:6px;height:10px;background:#BBDEFB;border-radius:2px;
    margin:4px;opacity:.8;
    animation:fall 1s linear infinite;
  }
  .rainy .drop:nth-child(1){animation-delay:0s;}
  .rainy .drop:nth-child(2){animation-delay:0.2s;}
  .rainy .drop:nth-child(3){animation-delay:0.4s;}

  /* Snowy */
  .snowy {background:linear-gradient(135deg,#ECEFF1,#90A4AE);}
  .snowy .cloud {
    width:70px;height:45px;background:#fff;border-radius:40px;
    position:absolute;top:20px;left:5px;
    box-shadow: -20px 10px 0 0 #fff, 20px 10px 0 0 #fff;
  }
  .snowy .snow {
    position:absolute;top:60px;left:50%;transform:translateX(-50%);
  }
  .snowy .flake {
    width:8px;height:8px;background:#fff;border-radius:50%;
    margin:4px;
    animation:snow 1.5s linear infinite;
  }
  .snowy .flake:nth-child(1){animation-delay:0s;}
  .snowy .flake:nth-child(2){animation-delay:0.3s;}
  .snowy .flake:nth-child(3){animation-delay:0.6s;}

  /* Stormy */
  .stormy {background:linear-gradient(135deg,#90A4AE,#607D8B);}
  .stormy .cloud {
    width:70px;height:45px;background:#fff;border-radius:40px;
    position:absolute;top:20px;left:5px;
    box-shadow: -20px 10px 0 0 #fff, 20px 10px 0 0 #fff;
  }
  .stormy .lightning {
    position:absolute;top:50px;left:50%;width:0;height:0;
    transform:translate(-50%,-10px);
    border-left:12px solid transparent;
    border-right:12px solid transparent;
    border-bottom:20px solid #FFEB3B;
    animation:flash 2s infinite;
  }
  .stormy .lightning::before{
    content:'';position:absolute;top:-20px;left:-6px;
    width:0;height:0;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-bottom:12px solid #FFEB3B;
  }

  /* Animations */
  @keyframes spin{
    from{transform:translate(-50%,-50%) rotate(0deg);}
    to{transform:translate(-50%,-50%) rotate(360deg);}
  }
  @keyframes fall{
    0%{transform:translateY(0) scaleY(1);}
    80%{transform:translateY(30px) scaleY(0.8);}
    100%{transform:translateY(40px) scaleY(0.5); opacity:0;}
  }
  @keyframes snow{
    0%{transform:translateY(0) rotate(0deg);}
    100%{transform:translateY(40px) rotate(360deg); opacity:0;}
  }
  @keyframes flash{
    0%, 45%, 55%, 100%{opacity:0;}
    50%{opacity:1;}
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation:none !important;
    }
  }
</style>
</head>
<body>
<div class="weather-grid">
  <!-- Sunny Card -->
  <div class="card sunny">
    <div class="icon sun-icon">
      <div class="sun"></div>
      <div class="rays">
        <div class="ray"></div><div class="ray"></div><div class="ray"></div><div class="ray"></div>
        <div class="ray"></div><div class="ray"></div><div class="ray"></div><div class="ray"></div>
      </div>
    </div>
    <h2 class="city">Los Angeles</h2>
    <p class="temp">75°F</p>
    <p class="desc">Sunny</p>
  </div>

  <!-- Rainy Card -->
  <div class="card rainy">
    <div class="icon rainy-icon">
      <div class="cloud"></div>
      <div class="rain">
        <div class="drop"></div><div class="drop"></div><div class="drop"></div>
      </div>
    </div>
    <h2 class="city">Seattle</h2>
    <p class="temp">58°F</p>
    <p class="desc">Rainy</p>
  </div>

  <!-- Snowy Card -->
  <div class="card snowy">
    <div class="icon snowy-icon">
      <div class="cloud"></div>
      <div class="snow">
        <div class="flake"></div><div class="flake"></div><div class="flake"></div>
      </div>
    </div>
    <h2 class="city">Munich</h2>
    <p class="temp">30°F</p>
    <p class="desc">Snowy</p>
  </div>

  <!-- Stormy Card -->
  <div class="card stormy">
    <div class="icon storm-icon">
      <div class="cloud"></div>
      <div class="lightning"></div>
    </div>
    <h2 class="city">Chicago</h2>
    <p class="temp">45°F</p>
    <p class="desc">Stormy</p>
  </div>
</div>
</body>
</html>

Reasoning trace (1,775 tokens)

We need to output a single HTML file with CSS inline, no JavaScript. Animated weather cards built purely with HTML and CSS, using pseudo-elements. Use keyframes for animations. Also respond to prefers-reduced-motion.

We need 4 cards: sunny, rainy, snowy, stormy.

Each card containing city name, temperature, description.

Background gradient for each.

Responsive grid: use CSS grid or flex, 4 columns on larger screens, stack on mobile.

Hover lift up using transform: translateY(-10px) and box-shadow.

Animations: sunny: rotating sun rays (maybe a circle with pseudo elements as rays rotating). Rainy: falling raindrops (using pseudo elements with animation downwards). Snowy: drifting snowflakes (maybe small circles falling). Stormy: flashing lightning (using maybe a pseudo-element that changes opacity).

Consider prefers-reduced-motion: use media query to disable animation (set animation:none). For each animation, we can wrap in @media (prefers-reduced-motion: reduce) { * { animation:none !important; } }

But we should not disable everything; maybe just set animation-duration:0s.

We'll create structure:

<div class="weather-grid">
  <div class="card sunny">
    <div class="icon">
      <div class="sun"></div>
      <div class="rays"></div>
    </div>
    <h2 class="city">Los Angeles</h2>
    <p class="temp">75°F</p>
    <p class="desc">Sunny</p>
  </div>
  ... similar for rainy, snowy, stormy
</div>

But need pure CSS icons.

Sunny: .sun a circle (background yellow) with .rays element with pseudo elements positioned around rotating.

Rainy: .cloud maybe using pseudo elements rounded shapes, and raindrops using ::before and ::after with animation - fall down.

Snowy: same cloud but with snowflakes (white circles) falling.

Stormy: same cloud + lightning bolt using pseudo element with shape via transforms and border.

We'll build some simple shapes using border radius and pseudo elements.

Simplify: Use single container for icon with relative position; using pseudo elements for shapes.

Implementation details:

Sunny:

<div class="weather-card sunny">
  <div class="icon sun-icon">
    <div class="sun"></div>
    <div class="rays"></div>
  </div>...

.sun: width 60px; height 60px; background:#FFDB4D; border-radius:50%; position:relative; z-index:1;

.rays: ::before and ::after pseudo elements maybe multiple rays? Could use multiple boxes with rotation animation.

Simplify: use .rays as a rectangle with multiple pseudo elements each 2px width, span across. Use CSS repeating radial gradient? Or use pseudo-element that is a square with radial gradient.

But we can animate rotation of .rays container with pseudo elements representing rays.

Example:

.rays::before { content:''; position:absolute; top:-20px; left:50%; width:4px; height:20px; background:#FFDB4D; transform-origin:center bottom; border-radius:2px; }

.rays::after similar but rotated.

Better: Use multiple pseudo elements via repeating multiple elements? Hard.

Simplify: Use box-shadow from a single pseudo element to create multiple rays, using transform: rotate(0deg). then rotation animation rotates the container.

Let's design: .rays: width:0; height:0; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); 

.rays::before { content:''; position:absolute; width:4px; height:30px; background:#FFDB4D; top:-30px; left:-2px; border-radius:2px; box-shadow: 0 0 0 0 #FFDB4D,  45deg etc? Actually can use multiple shadows to create 8 rays: box-shadow: 0 -40px 0 0 #FFDB4D, 28px -28px 0 0 #FFDB4D, 40px 0 0 0 #FFDB4D etc. But easier: just use one pseudo element and rotate container.

We'll create .rays with 8 children using :before and :after? We can create multiple rays using multiple pseudo elements? Only two pseudo elements per element. We could also use multiple .ray elements inside .rays container. Use HTML: <div class="rays"><div class="ray"></div> ...  (eight). That's allowed.

But we want to avoid extra markup? It's fine to have extra elements.

Fine: Use .rays .ray as small rectangles positioned around circle using transform: rotate(Ndeg) translate(0, -40px). Then container rotates slowly.

Implement: .rays { position:absolute; top:50%; left:50%; width:0; height:0; animation: spin 4s linear infinite; }

.ray { position:absolute; width:4px; height:20px; background:#FFDB4D; top:0; left:0; transform-origin:0 40px; }

Then create 8 .ray elements with inline style using nth-child to rotate: .rays .ray:nth-child(1){transform: rotate(0deg) translate(-2px, -45px);} etc.

But to avoid inline styles we can use CSS nth-child.

We'll have:

<div class="icon sun-icon">
  <div class="sun"></div>
  <div class="rays">
    <div class="ray"></div>
    <div class="ray"></div>
    <div class="ray"></div>
    <div class="ray"></div>
    <div class="ray"></div>
    <div class="ray"></div>
    <div class="ray"></div>
    <div class="ray"></div>
  </div>
</div>

Styling accordingly.

Rainy: Use cloud shape: .cloud with pseudo elements to create cloud (multiple circles). Then raindrops using ::before and ::after on .cloud, each animated falling.

Simplify: Use .cloud container with multiple .drop elements each animated falling loop.

HTML: <div class="icon rainy-icon"><div class="cloud"></div><div class="rain"><div class="drop"></div>... maybe 3 drops.

We'll add <div class="rain"><div class="drop"></div><div class="drop"></div><div class="drop"></div></div>

CSS: .cloud shape using border-radius and width/height.

Drops: small rectangles with border radius and background #B0C4DE; animation falling with translateY.

Snowy: similar but snowflakes: circles falling with slight horizontal drift.

Stormy: cloud plus lightning: lightning element using pseudo element maybe.

HTML: <div class="icon storm-icon"><div class="cloud"></div><div class="lightning"></div></div>

Lightning: shape using ::before to make zigzag using borders.

Simplify: Use a div with width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:20px solid #FFEE58; position relative; use pseudo element to create second part.

Add animation: flash by changing opacity.

Now responsive grid: .weather-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap:20px; padding:20px; }

Cards: .card { background: gradient specific, border-radius, overflow:hidden, padding, text-align:center, box-shadow, transition: transform 0.3s, box-shadow 0.3s; }

Hover: transform: translateY(-8px); box-shadow: increased.

We'll use CSS custom properties for each weather for gradient colors.

Implement: .card.sunny { background: linear-gradient(135deg, #FFEE58, #F9A825); } similarly for others.

Make sure icons have fixed size.

Add prefers-reduced-motion: @media (prefers-reduced-motion: reduce) { * { animation:none !important; } }

Will include.

Now produce final HTML.

We need to ensure no external resources, just pure HTML and CSS.

Let's craft final code.