GPT-6.1 Terra

by OpenAIReasoningClean

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

How it went

Total time: 47.5 s
Cost: $0.021
Output tokens: 4,175
Spent thinking: 0 tokens
Speed: 90.5 tok/s
Console errors: 0

First token after: 1.4 s
First visible text after: 1.4 s
Prompt tokens: 498
Code size: 11.9 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-6.1-terra
Reasoning sent: {"effort":"none"}
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 · 446 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A Little Weather</title>
<style>
  :root {
    color-scheme: light;
    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
    background: #f6f5f1;
    color: #252c3a;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    min-height: 100vh;
    background:
      radial-gradient(circle at 9% 4%, rgba(247, 222, 192, .36), transparent 25%),
      radial-gradient(circle at 92% 98%, rgba(203, 219, 228, .35), transparent 30%),
      #f6f5f1;
  }

  main {
    width: min(1160px, calc(100% - 64px));
    margin: 0 auto;
    padding: 88px 0 72px;
  }

  .heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 38px;
  }

  .eyebrow {
    margin: 0 0 12px;
    color: #8c948e;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .21em;
    text-transform: uppercase;
  }

  h1 {
    margin: 0;
    color: #28323b;
    font-family: Georgia, serif;
    font-size: clamp(38px, 4.7vw, 58px);
    font-weight: 400;
    letter-spacing: -.045em;
    line-height: 1;
  }

  .intro {
    max-width: 260px;
    margin: 0 0 3px;
    color: #89918f;
    font-size: 13px;
    line-height: 1.6;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }

  .card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 420px;
    padding: 24px 23px 22px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 20px;
    color: white;
    box-shadow: 0 14px 30px rgba(49, 62, 70, .10);
    transition: transform .35s ease, box-shadow .35s ease;
  }

  .card:hover {
    transform: translateY(-9px);
    box-shadow: 0 23px 36px rgba(49, 62, 70, .18);
  }

  .card::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 240px;
    height: 240px;
    right: -100px;
    bottom: -135px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    box-shadow: 0 0 0 35px rgba(255,255,255,.035), 0 0 0 70px rgba(255,255,255,.025);
  }

  .sunny { background: linear-gradient(155deg, #f9c989 0%, #ef9a6c 58%, #e78370 100%); }
  .rainy { background: linear-gradient(155deg, #a9c6cf 0%, #739cae 58%, #5e829a 100%); }
  .snowy { background: linear-gradient(155deg, #d1e3e7 0%, #a8c8d5 58%, #8db1c4 100%); }
  .stormy { background: linear-gradient(155deg, #8692ad 0%, #626d8c 55%, #4f5674 100%); }

  .card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgba(255,255,255,.82);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
  }

  .number {
    font-family: Georgia, serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    opacity: .7;
  }

  .scene {
    position: relative;
    height: 198px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .scene::before {
    content: "";
    position: absolute;
    width: 156px;
    height: 156px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50%;
    box-shadow: 0 0 0 19px rgba(255,255,255,.035), 0 0 0 40px rgba(255,255,255,.025);
  }

  .sun {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #fff2ca;
    box-shadow: 0 0 35px rgba(255, 239, 189, .45);
  }

  .rays {
    position: absolute;
    inset: -29px;
    animation: rotate 18s linear infinite;
  }

  .rays i {
    position: absolute;
    left: calc(50% - 2px);
    top: 0;
    width: 4px;
    height: 13px;
    border-radius: 10px;
    background: rgba(255, 246, 218, .9);
    transform-origin: 2px 65px;
    transform: rotate(calc(var(--i) * 45deg));
  }

  .cloud {
    position: relative;
    z-index: 2;
    width: 106px;
    height: 40px;
    border-radius: 35px;
    background: #f0f5f4;
    box-shadow: 0 9px 18px rgba(48, 78, 95, .1);
    animation: float 4s ease-in-out infinite;
  }

  .cloud::before, .cloud::after {
    content: "";
    position: absolute;
    bottom: 12px;
    border-radius: 50%;
    background: inherit;
  }

  .cloud::before { width: 52px; height: 52px; left: 15px; }
  .cloud::after { width: 42px; height: 42px; right: 12px; }

  .rain-scene .cloud { transform: translateY(-16px); animation-name: float-rain; }
  .storm-scene .cloud { transform: translateY(-16px); animation-name: float-rain; background: #d8dce5; }

  .drops, .flakes {
    position: absolute;
    width: 120px;
    height: 98px;
    top: 100px;
  }

  .drop {
    position: absolute;
    top: 0;
    left: var(--x);
    width: 3px;
    height: 15px;
    border-radius: 5px;
    background: rgba(231, 248, 252, .9);
    transform: rotate(14deg);
    animation: rain 1.1s linear infinite;
    animation-delay: var(--delay);
  }

  .snow-scene .cloud {
    width: 100px;
    height: 38px;
    transform: translateY(-19px);
    animation-name: float-rain;
    background: #f7faf9;
  }

  .flake {
    position: absolute;
    top: 0;
    left: var(--x);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px rgba(255,255,255,.6);
    animation: snow 2.8s linear infinite;
    animation-delay: var(--delay);
  }

  .bolt {
    position: absolute;
    z-index: 1;
    top: 105px;
    left: calc(50% - 14px);
    width: 32px;
    height: 60px;
    background: #ffe69b;
    clip-path: polygon(48% 0, 100% 0, 69% 38%, 100% 38%, 18% 100%, 36% 52%, 0 52%);
    filter: drop-shadow(0 0 9px rgba(255, 233, 160, .75));
    animation: flash 3.2s infinite;
  }

  .card-info { position: relative; z-index: 3; }

  .city {
    margin: 0 0 7px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
  }

  .temperature {
    margin: 0;
    font-family: Georgia, serif;
    font-size: 62px;
    font-weight: 400;
    letter-spacing: -.06em;
    line-height: 1;
  }

  .description {
    margin: 12px 0 0;
    color: rgba(255,255,255,.82);
    font-size: 13px;
  }

  .card-bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.25);
    color: rgba(255,255,255,.75);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .footer {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 25px;
    color: #a2aaa5;
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .03em;
  }

  @keyframes rotate { to { transform: rotate(360deg); } }
  @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
  @keyframes float-rain { 0%, 100% { transform: translateY(-16px); } 50% { transform: translateY(-22px); } }
  @keyframes rain {
    0% { opacity: 0; transform: translate(0, 0) rotate(14deg); }
    20% { opacity: .9; }
    85% { opacity: .8; }
    100% { opacity: 0; transform: translate(-13px, 66px) rotate(14deg); }
  }
  @keyframes snow {
    0% { opacity: 0; transform: translate(0, 0); }
    15% { opacity: .95; }
    50% { transform: translate(10px, 35px); }
    85% { opacity: .9; }
    100% { opacity: 0; transform: translate(-5px, 78px); }
  }
  @keyframes flash {
    0%, 38%, 45%, 53%, 100% { opacity: .55; }
    40%, 43%, 49% { opacity: 1; }
    41%, 47% { opacity: .25; }
  }

  @media (max-width: 900px) {
    main { width: min(680px, calc(100% - 48px)); padding-top: 60px; }
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .card { min-height: 400px; }
  }

  @media (max-width: 520px) {
    main { width: calc(100% - 40px); padding: 45px 0; }
    .heading { display: block; margin-bottom: 28px; }
    .intro { margin-top: 16px; }
    .grid { grid-template-columns: 1fr; gap: 16px; }
    .card { min-height: 390px; }
    .scene { height: 185px; }
    .footer { flex-direction: column; gap: 4px; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
    }
    .drop, .flake { opacity: .8; animation: none !important; }
    .drop:nth-child(2), .flake:nth-child(2) { top: 20px; }
    .drop:nth-child(3), .flake:nth-child(3) { top: 40px; }
    .drop:nth-child(4), .flake:nth-child(4) { top: 12px; }
    .drop:nth-child(5), .flake:nth-child(5) { top: 48px; }
    .drop:nth-child(6), .flake:nth-child(6) { top: 28px; }
    .bolt { opacity: 1; }
  }
</style>
</head>
<body>
<main>
  <header class="heading">
    <div>
      <p class="eyebrow">A little weather report</p>
      <h1>Whatever the weather.</h1>
    </div>
    <p class="intro">A glimpse of the sky in four corners of the world.</p>
  </header>

  <section class="grid" aria-label="Weather in four cities">
    <article class="card sunny">
      <div class="card-top"><span>Sunny</span><span class="number">01 / 04</span></div>
      <div class="scene" aria-hidden="true">
        <div class="sun">
          <div class="rays">
            <i style="--i:0"></i><i style="--i:1"></i><i style="--i:2"></i><i style="--i:3"></i>
            <i style="--i:4"></i><i style="--i:5"></i><i style="--i:6"></i><i style="--i:7"></i>
          </div>
        </div>
      </div>
      <div class="card-info">
        <h2 class="city">Lisbon, Portugal</h2>
        <p class="temperature">28°</p>
        <p class="description">Golden skies all day</p>
        <div class="card-bottom"><span>Feels like 30°</span><span>Clear skies</span></div>
      </div>
    </article>

    <article class="card rainy">
      <div class="card-top"><span>Rainy</span><span class="number">02 / 04</span></div>
      <div class="scene rain-scene" aria-hidden="true">
        <div class="cloud"></div>
        <div class="drops">
          <i class="drop" style="--x:15%;--delay:-.2s"></i>
          <i class="drop" style="--x:32%;--delay:-.8s"></i>
          <i class="drop" style="--x:49%;--delay:-.4s"></i>
          <i class="drop" style="--x:65%;--delay:-1s"></i>
          <i class="drop" style="--x:80%;--delay:-.6s"></i>
          <i class="drop" style="--x:40%;--delay:-.05s"></i>
        </div>
      </div>
      <div class="card-info">
        <h2 class="city">London, England</h2>
        <p class="temperature">14°</p>
        <p class="description">A little afternoon rain</p>
        <div class="card-bottom"><span>Feels like 12°</span><span>Light rain</span></div>
      </div>
    </article>

    <article class="card snowy">
      <div class="card-top"><span>Snowy</span><span class="number">03 / 04</span></div>
      <div class="scene snow-scene" aria-hidden="true">
        <div class="cloud"></div>
        <div class="flakes">
          <i class="flake" style="--x:13%;--delay:-.3s"></i>
          <i class="flake" style="--x:30%;--delay:-1.7s"></i>
          <i class="flake" style="--x:47%;--delay:-.9s"></i>
          <i class="flake" style="--x:65%;--delay:-2.2s"></i>
          <i class="flake" style="--x:82%;--delay:-1.3s"></i>
          <i class="flake" style="--x:55%;--delay:-.1s"></i>
        </div>
      </div>
      <div class="card-info">
        <h2 class="city">Oslo, Norway</h2>
        <p class="temperature">−2°</p>
        <p class="description">Soft flurries falling</p>
        <div class="card-bottom"><span>Feels like −5°</span><span>Snowfall</span></div>
      </div>
    </article>

    <article class="card stormy">
      <div class="card-top"><span>Stormy</span><span class="number">04 / 04</span></div>
      <div class="scene storm-scene" aria-hidden="true">
        <div class="cloud"></div>
        <div class="bolt"></div>
      </div>
      <div class="card-info">
        <h2 class="city">New York, USA</h2>
        <p class="temperature">19°</p>
        <p class="description">Thunder in the distance</p>
        <div class="card-bottom"><span>Feels like 18°</span><span>Thunderstorm</span></div>
      </div>
    </article>
  </section>

  <footer class="footer">
    <span>Four places, four different skies.</span>
    <span>A little reminder to look up ↑</span>
  </footer>
</main>
</body>
</html>