GPT-6.1 Sol

by OpenAIreasoning defaultClean

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

How it went

Total time: 1 min 14 s
Cost: $0.053
Output tokens: 5,200
Spent thinking: 516 tokens
Speed: 82.1 tok/s
Console errors: 0

First token after: 10.5 s
First visible text after: 22.6 s
Prompt tokens: 498
Code size: 13.4 KB
Finish reason: stop
Served by: OpenAI
Model id: openai/gpt-6.1-sol
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 · 163 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Atmosphere — A world of weather</title>
<style>
*{box-sizing:border-box}
:root{font-family:Arial,Helvetica,sans-serif;color:#26332e;background:#f6f5f1;font-synthesis:none}
body{margin:0;min-height:100vh}
.page{max-width:1280px;margin:auto;padding:36px 48px 28px}
header{display:flex;align-items:center;justify-content:space-between;padding-bottom:27px;border-bottom:1px solid #dcded5}
.brand{display:flex;align-items:center;gap:11px;font-size:23px;font-weight:700;letter-spacing:-1px}
.brand-mark{position:relative;width:26px;height:26px;border:1.8px solid #526d55;border-radius:50%;background:repeating-conic-gradient(from 0deg,transparent 0deg 40deg,#526d55 40deg 45deg)}
.brand-mark:after{content:"";position:absolute;inset:6px;background:#f6f5f1;border:1.8px solid #526d55;border-radius:50%}
.header-note{font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:#737a71;display:flex;gap:9px;align-items:center}
.status{width:6px;height:6px;background:#72916b;border-radius:50%}
.intro{padding:45px 0 32px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.eyebrow{font-size:10px;font-weight:700;letter-spacing:2.3px;color:#74806d;margin:0 0 13px}
h1{font-size:clamp(34px,4.1vw,52px);line-height:1.05;letter-spacing:-2.4px;font-weight:500;margin:0 0 16px}
.subtitle{font-size:14px;color:#7a7e75;line-height:1.7;margin:0}
.edition{text-align:right;flex-shrink:0;padding-bottom:3px}
.edition span{display:block;font-size:10px;letter-spacing:1.7px;color:#85897d;margin-bottom:8px}
.edition strong{font-size:13px;font-weight:500;color:#52604f}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.card{position:relative;isolation:isolate;overflow:hidden;border-radius:19px;padding:23px 23px 19px;min-height:415px;transition:transform .35s ease,box-shadow .35s ease;box-shadow:0 5px 12px #303c2910;border:1px solid #ffffff55}
.card:hover{transform:translateY(-9px);box-shadow:0 18px 28px #303c2920}
.sunny{background:linear-gradient(150deg,#ffedba 0%,#ffda99 46%,#efb579 100%);color:#6a461e}
.rainy{background:linear-gradient(150deg,#a9d0df 0%,#85b2ca 46%,#7195b7 100%);color:#243f5a}
.snowy{background:linear-gradient(145deg,#e6eef2 0%,#d4e1ec 48%,#b7c9dd 100%);color:#455c76}
.stormy{background:linear-gradient(145deg,#777d9d 0%,#555b7c 45%,#373f60 100%);color:#f0edf9}
.card:after{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 90% 5%,#ffffff30,transparent 55%);pointer-events:none}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.condition{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;display:flex;align-items:center;gap:6px}
.condition:before{content:"";width:5px;height:5px;background:currentColor;border-radius:50%;opacity:.7}
.number{font-size:10px;opacity:.45;letter-spacing:1px}
.scene{height:171px;position:relative;display:flex;align-items:center;justify-content:center}
.sun-glow{position:absolute;width:178px;height:178px;border-radius:50%;background:radial-gradient(circle,#fff4bb80,transparent 70%);animation:breathe 5s ease-in-out infinite}
.sun{position:relative;width:78px;height:78px;border-radius:50%;background:linear-gradient(145deg,#ffe876,#ffbd39);box-shadow:0 0 25px #ffdc6d75,inset 0 2px 4px #fff6bb9c}
.rays{position:absolute;width:142px;height:142px;animation:rotate 35s linear infinite}
.rays i{position:absolute;left:68px;top:0;width:6px;height:17px;border-radius:4px;background:#eaa340;transform-origin:3px 71px;transform:rotate(var(--r))}
.rays i:nth-child(1){--r:0deg}.rays i:nth-child(2){--r:30deg}.rays i:nth-child(3){--r:60deg}.rays i:nth-child(4){--r:90deg}.rays i:nth-child(5){--r:120deg}.rays i:nth-child(6){--r:150deg}.rays i:nth-child(7){--r:180deg}.rays i:nth-child(8){--r:210deg}.rays i:nth-child(9){--r:240deg}.rays i:nth-child(10){--r:270deg}.rays i:nth-child(11){--r:300deg}.rays i:nth-child(12){--r:330deg}
.cloud{position:absolute;width:113px;height:43px;top:66px;left:calc(50% - 57px);border-radius:40px;background:#e7f0f6;filter:drop-shadow(0 8px 7px #425c7620);animation:float 5s ease-in-out infinite}
.cloud:before,.cloud:after{content:"";position:absolute;border-radius:50%;background:inherit}
.cloud:before{width:59px;height:59px;left:17px;top:-31px}
.cloud:after{width:45px;height:45px;right:5px;top:-19px}
.rainy .cloud{background:linear-gradient(100deg,#e8f4fa,#cbdde9)}
.cloud-back{width:77px;height:29px;left:calc(50% - 20px);top:47px;opacity:.4;transform:scale(.83);animation-delay:-2s}
.cloud-back:before{width:43px;height:43px;top:-24px;left:9px}
.cloud-back:after{width:33px;height:33px;top:-16px;right:1px}
.rain{position:absolute;top:112px;left:calc(50% - 45px);width:90px;height:52px}
.rain i{position:absolute;top:0;left:var(--x);width:3px;height:17px;border-radius:4px;background:#e5f4ff;animation:rain 1.25s linear infinite;animation-delay:var(--d);opacity:0;transform:rotate(18deg)}
.rain i:nth-child(1){--x:4px;--d:-.1s}.rain i:nth-child(2){--x:23px;--d:-.8s}.rain i:nth-child(3){--x:43px;--d:-.4s}.rain i:nth-child(4){--x:63px;--d:-1.1s}.rain i:nth-child(5){--x:83px;--d:-.65s}.rain i:nth-child(6){--x:33px;--d:-1.2s}
.snowy .cloud{background:#f8fbff;animation-delay:-1s}
.snow{position:absolute;top:110px;left:calc(50% - 55px);width:110px;height:55px}
.snow i{position:absolute;left:var(--x);top:0;width:2px;height:10px;border-radius:2px;background:#fff;animation:snow 3.6s linear infinite;animation-delay:var(--d);opacity:0}
.snow i:before,.snow i:after{content:"";position:absolute;inset:0;border-radius:inherit;background:inherit;transform:rotate(60deg)}
.snow i:after{transform:rotate(-60deg)}
.snow i:nth-child(1){--x:2px;--d:-.5s}.snow i:nth-child(2){--x:23px;--d:-2.2s}.snow i:nth-child(3){--x:43px;--d:-1.4s}.snow i:nth-child(4){--x:65px;--d:-3s}.snow i:nth-child(5){--x:85px;--d:-.1s}.snow i:nth-child(6){--x:104px;--d:-2.6s}
.stormy .cloud{background:linear-gradient(100deg,#bbc0d5,#939db9);z-index:2}
.stormy .cloud-back{background:#c2c6dc;opacity:.3;z-index:1}
.lightning{position:absolute;top:99px;left:calc(50% - 16px);width:35px;height:62px;background:linear-gradient(#fff4b3,#f4d17b);clip-path:polygon(40% 0,95% 0,61% 38%,88% 38%,8% 100%,33% 51%,3% 51%);animation:flash 4.5s ease-in-out infinite;z-index:3}
.storm-glow{position:absolute;width:140px;height:130px;top:36px;background:radial-gradient(ellipse,#efdcb43d,transparent 70%);animation:flash 4.5s ease-in-out infinite}
.stormy .rain{opacity:.25;top:107px}
.city{margin:3px 0 5px;font-size:24px;font-weight:500;letter-spacing:-.8px}
.country{font-size:10px;letter-spacing:1.1px;opacity:.58}
.reading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:19px}
.temp{font-size:58px;letter-spacing:-4px;font-weight:400;line-height:1}
.temp sup{font-size:29px;vertical-align:top;position:relative;top:5px;margin-left:3px;letter-spacing:-1px}
.description{font-size:11px;line-height:1.5;text-align:right;max-width:83px;opacity:.85}
.details{margin-top:22px;border-top:1px solid currentColor;padding-top:13px;border-color:#74552b24;display:flex;justify-content:space-between;gap:6px;font-size:10px}
.rainy .details,.snowy .details{border-color:#39576a26}
.stormy .details{border-color:#ffffff24}
.details span{opacity:.73}
.details b{font-weight:400;opacity:.5;margin-right:4px}
footer{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:25px;color:#858b7e;font-size:10px;letter-spacing:.2px}
.motion-note{display:flex;align-items:center;gap:7px}
.motion-dot{width:5px;height:5px;border-radius:50%;background:#8b9a7b;box-shadow:0 0 0 3px #8b9a7b15}
.footer-title{font-family:Georgia,serif;font-size:14px;font-style:italic;color:#6e7965}
@keyframes rotate{to{transform:rotate(360deg)}}
@keyframes breathe{50%{transform:scale(1.12);opacity:.65}}
@keyframes float{0%,100%{translate:-4px 0}50%{translate:4px -5px}}
@keyframes rain{0%{opacity:0;transform:translate(5px,-6px) rotate(18deg)}20%{opacity:.8}80%{opacity:.6}100%{opacity:0;transform:translate(-10px,38px) rotate(18deg)}}
@keyframes snow{0%{opacity:0;transform:translate(0,-4px) rotate(0)}20%{opacity:.95}75%{opacity:.8}100%{opacity:0;transform:translate(14px,46px) rotate(100deg)}}
@keyframes flash{0%,39%,48%,54%,100%{opacity:.3}41%,45%,51%{opacity:1}43%,50%{opacity:.55}}
@media(min-width:1440px){.page{padding-top:55px}.intro{padding-top:58px;padding-bottom:40px}.card{min-height:440px}.scene{height:190px}}
@media(max-width:1000px) and (min-width:641px){.page{padding:28px}.grid{gap:12px}.card{padding:20px 16px}.condition{font-size:8px;letter-spacing:.7px}.city{font-size:21px}.temp{font-size:48px}.description{font-size:10px}.details{font-size:9px;gap:2px}}
@media(max-width:760px) and (min-width:641px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.card{padding:24px}.intro{padding-top:32px}.edition{display:none}}
@media(max-width:640px){.page{padding:24px 22px}.header-note{font-size:8px;letter-spacing:1px}.brand{font-size:21px}header{padding-bottom:22px}.intro{padding:33px 0 26px}.edition{display:none}h1{font-size:37px;letter-spacing:-1.8px}.subtitle{font-size:13px;max-width:290px}.grid{grid-template-columns:1fr;gap:20px}.card{min-height:407px;padding:24px 27px}.scene{height:165px}.city{font-size:26px}.reading{margin-top:17px}.description{max-width:none;font-size:12px}.details{font-size:11px}.condition{font-size:10px}footer{align-items:flex-start;line-height:1.6}.motion-note{max-width:170px}.footer-title{white-space:nowrap}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.rain i,.snow i{opacity:.8}.rain i:nth-child(even){top:22px}.snow i:nth-child(even){top:28px}.snow i:nth-child(3n){top:15px}.lightning,.storm-glow{opacity:.85}}
</style>
</head>
<body>
<div class="page">
<header>
  <div class="brand"><span class="brand-mark" aria-hidden="true"></span>atmosphere</div>
  <div class="header-note"><span class="status"></span>A forecast in motion</div>
</header>
<main>
  <section class="intro">
    <div>
      <p class="eyebrow">THE DAILY OUTLOOK</p>
      <h1>A world of weather.</h1>
      <p class="subtitle">Four cities, four moods. A little perspective on what’s happening overhead.</p>
    </div>
    <div class="edition"><span>AROUND THE WORLD</span><strong>One sky. Endless possibilities.</strong></div>
  </section>
  <div class="grid">
    <article class="card sunny" aria-label="Sunny in Lisbon, 26 degrees Celsius">
      <div class="card-top"><span class="condition">Sunny</span><span class="number">01</span></div>
      <div class="scene" aria-hidden="true">
        <div class="sun-glow"></div>
        <div class="rays"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
        <div class="sun"></div>
      </div>
      <h2 class="city">Lisbon</h2>
      <div class="country">PORTUGAL</div>
      <div class="reading"><div class="temp">26<sup>°</sup></div><div class="description">A little golden<br>hour, all day.</div></div>
      <div class="details"><span><b>H</b> 28° &nbsp; <b>L</b> 19°</span><span>Wind 8 km/h</span></div>
    </article>
    <article class="card rainy" aria-label="Rainy in London, 14 degrees Celsius">
      <div class="card-top"><span class="condition">Rainy</span><span class="number">02</span></div>
      <div class="scene" aria-hidden="true">
        <div class="cloud cloud-back"></div><div class="cloud"></div>
        <div class="rain"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <h2 class="city">London</h2>
      <div class="country">UNITED KINGDOM</div>
      <div class="reading"><div class="temp">14<sup>°</sup></div><div class="description">Rainy windows.<br>Cozy moments.</div></div>
      <div class="details"><span><b>H</b> 16° &nbsp; <b>L</b> 11°</span><span>Wind 16 km/h</span></div>
    </article>
    <article class="card snowy" aria-label="Snowy in Oslo, minus 3 degrees Celsius">
      <div class="card-top"><span class="condition">Snowy</span><span class="number">03</span></div>
      <div class="scene" aria-hidden="true">
        <div class="cloud cloud-back"></div><div class="cloud"></div>
        <div class="snow"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <h2 class="city">Oslo</h2>
      <div class="country">NORWAY</div>
      <div class="reading"><div class="temp">−3<sup>°</sup></div><div class="description">Soft flakes.<br>A slower pace.</div></div>
      <div class="details"><span><b>H</b> 0° &nbsp; <b>L</b> −6°</span><span>Wind 6 km/h</span></div>
    </article>
    <article class="card stormy" aria-label="Stormy in Tokyo, 21 degrees Celsius">
      <div class="card-top"><span class="condition">Stormy</span><span class="number">04</span></div>
      <div class="scene" aria-hidden="true">
        <div class="storm-glow"></div><div class="cloud cloud-back"></div><div class="cloud"></div><div class="lightning"></div>
        <div class="rain"><i></i><i></i><i></i><i></i><i></i><i></i></div>
      </div>
      <h2 class="city">Tokyo</h2>
      <div class="country">JAPAN</div>
      <div class="reading"><div class="temp">21<sup>°</sup></div><div class="description">A little drama<br>in the sky.</div></div>
      <div class="details"><span><b>H</b> 24° &nbsp; <b>L</b> 18°</span><span>Wind 24 km/h</span></div>
    </article>
  </div>
</main>
<footer>
  <span class="motion-note"><span class="motion-dot"></span>A study in weather · Made to move</span>
  <span class="footer-title">Always looking up.</span>
  <span>°C &nbsp; / &nbsp; Weather, illustrated.</span>
</footer>
</div>
</body>
</html>

Reasoning trace (516 tokens)

**Designing stylish CSS dashboard**

I'm focusing on creating polished CSS cards for a stylish dashboard. The layout needs four rows on desktop and a stacked design for mobile. I’m thinking of a dark off-white theme with weather-themed gradient cards, like sunny creams, rainy blues, snowy pale violets, and stormy deep purples. The background would be a soft #f5f4f0. I want a clean layout with city names, temperatures, and descriptions, all featuring icons. The cards need to be strong visually while conveying clear weather conditions.**Designing weather cards layout**

I’m outlining the design for each card to be about 424 pixels high, with a total width of 1160 pixels. The outer top margin is 44 pixels, while the hero header will go around 160 pixels in height. The top of the cards sits at 270 pixels, featuring a note that says "Always looking up." I want to include a static time display to avoid inaccuracies and use a branding header called "the daily atmosphere" with a little sun icon. Each card will reflect different weather conditions with visually engaging designs.**Creating cloud designs for cards**

I'm designing multiple overlapping divs for different weather types. The main cloud will measure 100x42 pixels, featuring rounded edges and shadows. For a rainy sky, I’m considering light blue clouds with blue and white diagonal rain drops using CSS. For snow, I'll use white clouds with pseudo-elements for the snowflakes, creating straight lines to simulate flurries. Storm clouds will be a violet-gray with flickering lightning using clip-path for a dynamic effect. The card width will be set at 1160 pixels with a height of 414 pixels and a gap of 20 pixels between each card.