GPT-6.1 Terra

by OpenAIReasoningClean

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

How it went

Total time: 41.0 s
Cost: $0.019
Output tokens: 3,623
Spent thinking: 120 tokens
Speed: 99.3 tok/s
Console errors: 0

First token after: 4.5 s
First visible text after: 7.5 s
Prompt tokens: 498
Code size: 10.0 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-6.1-terra
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 · 134 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Weather, wherever you are</title>
<style>
  * { box-sizing: border-box; }
  :root { color-scheme: dark; }
  body {
    margin: 0;
    min-height: 100vh;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #0c1424;
    color: #f7f9ff;
  }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 0%, #243b5b 0%, transparent 55%);
  }
  main { position: relative; width: min(1152px, calc(100% - 48px)); margin: 0 auto; padding: 72px 0 55px; }
  header { text-align: center; margin-bottom: 47px; }
  .eyebrow { color: #98aec8; font-size: 11px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; }
  h1 { font-size: clamp(30px, 4vw, 44px); letter-spacing: -.045em; line-height: 1.1; margin: 15px 0 12px; }
  .subtitle { color: #9baec4; font-size: 15px; margin: 0; }
  .grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .card {
    position: relative;
    overflow: hidden;
    min-height: 390px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 22px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 18px 38px rgba(0,0,0,.19), inset 0 1px rgba(255,255,255,.1);
    transition: transform .3s ease, box-shadow .3s ease;
  }
  .card:hover { transform: translateY(-8px); box-shadow: 0 25px 45px rgba(0,0,0,.3); }
  .sunny { background: linear-gradient(155deg, #f4b45c 0%, #ea8256 55%, #bb5e59 100%); }
  .rainy { background: linear-gradient(155deg, #7dabc4 0%, #4d7d9e 55%, #375c80 100%); }
  .snowy { background: linear-gradient(155deg, #b7d8e0 0%, #84b3c5 52%, #6691aa 100%); }
  .stormy { background: linear-gradient(155deg, #7a779d 0%, #545675 55%, #343b5c 100%); }
  .card-top { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 2; }
  .tag { font-size: 10px; text-transform: uppercase; letter-spacing: .15em; font-weight: 800; background: rgba(255,255,255,.17); border: 1px solid rgba(255,255,255,.15); padding: 7px 10px; border-radius: 30px; }
  .number { font-size: 11px; font-weight: 700; letter-spacing: .08em; opacity: .65; }
  .scene { height: 190px; position: relative; display: grid; place-items: center; }
  .scene::before { content: ""; position: absolute; width: 160px; height: 160px; border-radius: 50%; background: rgba(255,255,255,.09); }
  .scene::after { content: ""; position: absolute; bottom: 10px; width: 120px; height: 15px; border-radius: 50%; background: rgba(20,40,60,.1); filter: blur(6px); }
  .sun-wrap { position: relative; width: 132px; height: 132px; animation: spin 20s linear infinite; }
  .rays { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg, #ffe5a3 0deg 6deg, transparent 6deg 30deg); -webkit-mask: radial-gradient(circle, transparent 0 44px, #000 45px); mask: radial-gradient(circle, transparent 0 44px, #000 45px); }
  .sun-core { position: absolute; inset: 27px; border-radius: 50%; background: #ffe9a8; box-shadow: 0 0 35px rgba(255,232,154,.5), inset -6px -7px rgba(244,171,85,.18); }
  .cloud { position: absolute; width: 115px; height: 45px; border-radius: 35px; background: #edf6fa; z-index: 2; box-shadow: inset -5px -7px rgba(109,155,175,.15), 0 8px 15px rgba(34,65,89,.1); animation: float 4s ease-in-out infinite; }
  .cloud::before, .cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
  .cloud::before { width: 58px; height: 58px; left: 17px; bottom: 14px; }
  .cloud::after { width: 43px; height: 43px; right: 13px; bottom: 13px; }
  .rain-cloud { top: 60px; }
  .rain { position: absolute; top: 100px; left: 50%; width: 100px; height: 75px; transform: translateX(-50%); }
  .drop { position: absolute; width: 4px; height: 15px; border-radius: 4px; background: #c0edff; transform: rotate(15deg); animation: rainfall 1s linear infinite; }
  .drop:nth-child(1) { left: 12px; animation-delay: -.2s; }
  .drop:nth-child(2) { left: 34px; animation-delay: -.7s; }
  .drop:nth-child(3) { left: 55px; animation-delay: -.4s; }
  .drop:nth-child(4) { left: 76px; animation-delay: -.9s; }
  .drop:nth-child(5) { left: 95px; animation-delay: -.55s; }
  .snow-cloud { top: 59px; background: #f4fbfc; }
  .snowfall { position: absolute; top: 105px; left: 50%; width: 120px; height: 75px; transform: translateX(-50%); }
  .flake { position: absolute; width: 12px; height: 12px; animation: snowfall 2.8s linear infinite; }
  .flake::before, .flake::after { content: ""; position: absolute; top: 5px; left: 0; width: 12px; height: 2px; border-radius: 2px; background: #fff; }
  .flake::after { transform: rotate(60deg); box-shadow: none; }
  .flake { background: linear-gradient(120deg, transparent 44%, #fff 45%, #fff 55%, transparent 56%); }
  .flake:nth-child(1) { left: 4px; animation-delay: -.4s; }
  .flake:nth-child(2) { left: 28px; animation-delay: -1.8s; transform: scale(.7); }
  .flake:nth-child(3) { left: 55px; animation-delay: -1s; }
  .flake:nth-child(4) { left: 84px; animation-delay: -2.3s; }
  .flake:nth-child(5) { left: 104px; animation-delay: -1.4s; }
  .storm-cloud { top: 57px; background: #c0c8db; }
  .bolt { position: absolute; z-index: 1; top: 99px; left: calc(50% - 20px); width: 43px; height: 75px; background: #ffe58a; clip-path: polygon(47% 0, 100% 0, 65% 38%, 91% 38%, 12% 100%, 34% 53%, 7% 53%); filter: drop-shadow(0 0 8px #ffdf83); animation: flash 3s infinite; }
  .info { margin-top: auto; position: relative; z-index: 2; }
  .city { font-size: 15px; font-weight: 650; letter-spacing: .01em; }
  .temperature { font-size: 54px; font-weight: 500; line-height: 1; letter-spacing: -.06em; margin: 11px 0 10px; }
  .temperature span { font-size: .68em; vertical-align: top; letter-spacing: 0; }
  .description { font-size: 13px; color: rgba(255,255,255,.83); margin: 0; }
  .card-bottom { border-top: 1px solid rgba(255,255,255,.24); margin-top: 20px; padding-top: 13px; display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.72); }
  footer { text-align: center; color: #71859d; margin-top: 33px; font-size: 12px; letter-spacing: .03em; }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes float { 50% { transform: translateY(-7px); } }
  @keyframes rainfall { 0% { opacity: 0; transform: translateY(0) rotate(15deg); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(54px) rotate(15deg); } }
  @keyframes snowfall { 0% { opacity: 0; transform: translate(0, -3px) rotate(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(14px, 60px) rotate(100deg); } }
  @keyframes flash { 0%, 38%, 43%, 48%, 100% { opacity: .65; } 40%, 46% { opacity: 1; filter: drop-shadow(0 0 15px #ffe891); } 42%, 47% { opacity: .25; } }
  @media (max-width: 850px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } main { max-width: 650px; padding-top: 50px; } }
  @media (max-width: 520px) { main { width: min(340px, calc(100% - 40px)); padding-top: 44px; } header { margin-bottom: 30px; } .grid { grid-template-columns: 1fr; } .card { min-height: 375px; } }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .drop, .flake { opacity: 1; } }
</style>
</head>
<body>
<main>
  <header>
    <div class="eyebrow">A little look outside</div>
    <h1>Weather, wherever you are.</h1>
    <p class="subtitle">Four places, four moods. Take a moment to look up.</p>
  </header>
  <section class="grid" aria-label="Weather around the world">
    <article class="card sunny">
      <div class="card-top"><span class="tag">Sunny</span><span class="number">01 / 04</span></div>
      <div class="scene" aria-hidden="true"><div class="sun-wrap"><div class="rays"></div><div class="sun-core"></div></div></div>
      <div class="info"><div class="city">Los Angeles</div><div class="temperature">28<span>°</span></div><p class="description">Golden skies all day</p></div>
      <div class="card-bottom"><span>California, USA</span><span>Feels like 30°</span></div>
    </article>
    <article class="card rainy">
      <div class="card-top"><span class="tag">Rainy</span><span class="number">02 / 04</span></div>
      <div class="scene" aria-hidden="true"><div class="cloud rain-cloud"></div><div class="rain"><i class="drop"></i><i class="drop"></i><i class="drop"></i><i class="drop"></i><i class="drop"></i></div></div>
      <div class="info"><div class="city">London</div><div class="temperature">14<span>°</span></div><p class="description">A little rain, a lot of charm</p></div>
      <div class="card-bottom"><span>England, UK</span><span>Feels like 12°</span></div>
    </article>
    <article class="card snowy">
      <div class="card-top"><span class="tag">Snowy</span><span class="number">03 / 04</span></div>
      <div class="scene" aria-hidden="true"><div class="cloud snow-cloud"></div><div class="snowfall"><i class="flake"></i><i class="flake"></i><i class="flake"></i><i class="flake"></i><i class="flake"></i></div></div>
      <div class="info"><div class="city">Sapporo</div><div class="temperature">−2<span>°</span></div><p class="description">Soft snow in the air</p></div>
      <div class="card-bottom"><span>Hokkaido, Japan</span><span>Feels like −5°</span></div>
    </article>
    <article class="card stormy">
      <div class="card-top"><span class="tag">Stormy</span><span class="number">04 / 04</span></div>
      <div class="scene" aria-hidden="true"><div class="cloud storm-cloud"></div><div class="bolt"></div></div>
      <div class="info"><div class="city">New Orleans</div><div class="temperature">21<span>°</span></div><p class="description">Thunder rolling through</p></div>
      <div class="card-bottom"><span>Louisiana, USA</span><span>Feels like 20°</span></div>
    </article>
  </section>
  <footer>A small forecast for every kind of day.</footer>
</main>
</body>
</html>

Reasoning trace (120 tokens)

**Designing weather icons**

I need to create attractive CSS icons for four cards, including top labels and visuals. The cards should be centered in a 1280 viewport. For snowflakes, I could use text and CSS elements like pseudo-elements with rotations, plus box shadows for effect. Rain drops can be done using nth-child, while storm lightning might involve CSS clip-paths. I want sunny rays using repeating-conic-gradient for that rotating effect. The background will be dark navy with appropriately sized cards, 260x380, and ensure mobile designs stack properly.