Qwen3.8 Flash

by QwenReasoningClean

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

How it went

Total time: 42.0 s
Cost: $0.0017
Output tokens: 3,625
Spent thinking: 0 tokens
Speed: 88.7 tok/s
Console errors: 0

First token after: 1.1 s
First visible text after: 1.1 s
Prompt tokens: 525
Code size: 9.4 KB
Finish reason: stop
Served by: Alibaba
Model id: qwen/qwen3.8-flash
Reasoning sent: {"effort":"none"}
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 · 270 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather Cards</title>
<style>
  :root{
    --ink:#eef4ff;
    --muted:rgba(255,255,255,.7);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  }

  *{box-sizing:border-box;margin:0;padding:0}

  body{
    min-height:100vh;
    background:
      radial-gradient(1200px 600px at 15% -10%, #1b2a4a, transparent),
      radial-gradient(1000px 700px at 100% 0%, #3a1f4d, transparent),
      linear-gradient(160deg,#0b1220,#131c30 60%,#0b1220);
    color:var(--ink);
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:clamp(16px,4vw,48px);
  }

  header{text-align:center;margin-bottom:clamp(24px,5vw,48px)}
  header h1{
    font-size:clamp(28px,5vw,48px);
    letter-spacing:-.02em;
    background:linear-gradient(90deg,#ffd86b,#7dd3fc,#c4b5fd);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  header p{color:var(--muted);margin-top:8px;font-size:clamp(14px,2vw,17px)}

  .grid{
    width:100%;
    max-width:1200px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:clamp(14px,2vw,24px);
  }

  @media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.grid{grid-template-columns:1fr}}

  .card{
    position:relative;
    overflow:hidden;
    border-radius:22px;
    padding:22px 22px 26px;
    min-height:300px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    box-shadow:0 18px 40px rgba(0,0,0,.35);
    transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease;
    isolation:isolate;
  }
  .card:hover{transform:translateY(-14px);box-shadow:0 30px 60px rgba(0,0,0,.5)}

  /* card backgrounds */
  .sunny{background:linear-gradient(160deg,#ff9d3c,#ffc94d 45%,#ffe98a)}
  .rainy{background:linear-gradient(160deg,#2b3a67,#4a6fa5 55%,#6f9bc9)}
  .snowy{background:linear-gradient(160deg,#4a5f80,#8ba6c9 55%,#cfe0f2)}
  .stormy{background:linear-gradient(160deg,#1a1d2b,#3a3f55 55%,#565b78)}

  .icon-wrap{position:relative;height:130px;display:flex;align-items:center;justify-content:center}

  .info{position:relative;z-index:2}
  .city{font-size:22px;font-weight:700;letter-spacing:.01em}
  .temp{font-size:52px;font-weight:800;line-height:1;letter-spacing:-.03em;margin:6px 0}
  .temp small{font-size:22px;font-weight:600;vertical-align:top}
  .desc{font-size:15px;color:rgba(255,255,255,.85)}

  /* ============ SUN ============ */
  .sun-core{
    width:56px;height:56px;border-radius:50%;
    background:radial-gradient(circle at 35% 35%,#fff7cf,#ffce3b 60%,#ff9d1e);
    box-shadow:0 0 30px rgba(255,200,60,.7);
    z-index:2;
    animation:sunPulse 4s ease-in-out infinite;
  }
  .rays{position:absolute;width:130px;height:130px;animation:spin 14s linear infinite}
  .ray{
    position:absolute;top:0;left:50%;width:6px;height:22px;border-radius:6px;
    background:linear-gradient(#fff2b0,#ffb62e);
    transform-origin:50% 65px;
    margin-left:-3px;
  }
  .ray:nth-child(1){transform:rotate(0)}
  .ray:nth-child(2){transform:rotate(45deg)}
  .ray:nth-child(3){transform:rotate(90deg)}
  .ray:nth-child(4){transform:rotate(135deg)}
  .ray:nth-child(5){transform:rotate(180deg)}
  .ray:nth-child(6){transform:rotate(225deg)}
  .ray:nth-child(7){transform:rotate(270deg)}
  .ray:nth-child(8){transform:rotate(315deg)}

  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes sunPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

  /* ============ RAIN ============ */
  .cloud{
    position:relative;width:90px;height:38px;background:#fff;border-radius:20px;
    top:-30px;box-shadow:0 6px 14px rgba(0,0,0,.15);
    animation:drift 6s ease-in-out infinite;
  }
  .cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
  .cloud::before{width:44px;height:44px;top:-22px;left:12px}
  .cloud::after{width:34px;height:34px;top:-14px;right:12px}
  .drop{
    position:absolute;top:20px;width:4px;height:14px;border-radius:0 0 4px 4px;
    background:linear-gradient(#bfe3ff,#5aa9e6);
    animation:fall 1.1s linear infinite;
  }
  .drop:nth-child(1){left:24px;animation-delay:0s}
  .drop:nth-child(2){left:40px;animation-delay:.35s}
  .drop:nth-child(3){left:56px;animation-delay:.7s}
  .drop:nth-child(4){left:72px;animation-delay:.15s}
  .drop:nth-child(5){left:88px;animation-delay:.5s}

  @keyframes drift{0%,100%{transform:translateX(-6px)}50%{transform:translateX(6px)}}
  @keyframes fall{
    0%{transform:translateY(0);opacity:0}
    20%{opacity:1}
    100%{transform:translateY(90px);opacity:0}
  }

  /* ============ SNOW ============ */
  .flake{
    position:absolute;top:-6px;width:10px;height:10px;border-radius:50%;
    background:radial-gradient(circle,#fff,#dbeafe);
    box-shadow:0 0 6px rgba(255,255,255,.8);
    animation:drift-down 5s linear infinite;
  }
  .flake::before{
    content:"";position:absolute;inset:0;border-radius:50%;
    box-shadow:0 0 0 2px rgba(255,255,255,.4);
  }
  .flake:nth-child(1){left:20px;animation-delay:0s;transform:scale(1)}
  .flake:nth-child(2){left:44px;animation-delay:1.2s;transform:scale(.7)}
  .flake:nth-child(3){left:66px;animation-delay:.6s;transform:scale(1.1)}
  .flake:nth-child(4){left:88px;animation-delay:2s;transform:scale(.8)}
  .flake:nth-child(5){left:34px;animation-delay:2.6s;transform:scale(.6)}
  .flake:nth-child(6){left:76px;animation-delay:1.8s;transform:scale(1)}

  @keyframes drift-down{
    0%{transform:translateY(0) translateX(0) rotate(0);opacity:0}
    15%{opacity:1}
    50%{transform:translateY(50px) translateX(10px) rotate(180deg)}
    100%{transform:translateY(100px) translateX(-6px) rotate(360deg);opacity:0}
  }

  /* ============ STORM ============ */
  .storm-cloud{
    position:relative;width:100px;height:40px;background:#c3c9d8;border-radius:22px;
    top:-24px;box-shadow:0 8px 18px rgba(0,0,0,.35);
    animation:grumble 3s ease-in-out infinite;
  }
  .storm-cloud::before,.storm-cloud::after{content:"";position:absolute;background:#c3c9d8;border-radius:50%}
  .storm-cloud::before{width:50px;height:50px;top:-26px;left:14px}
  .storm-cloud::after{width:38px;height:38px;top:-16px;right:16px}

  .bolt{
    position:absolute;top:34px;left:50%;margin-left:-11px;width:0;height:0;
    border-left:11px solid transparent;
    border-right:11px solid transparent;
    border-top:34px solid #ffd94a;
    filter:drop-shadow(0 0 6px rgba(255,220,80,.9));
    animation:flash 2.4s steps(1,end) infinite;
  }
  .bolt::after{
    content:"";position:absolute;top:-34px;left:-11px;width:0;height:0;
    border-left:11px solid transparent;
    border-right:11px solid transparent;
    border-bottom:20px solid #ffd94a;
  }
  .flash-bg{
    position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.5),transparent 60%);
    opacity:0;animation:flashbg 2.4s steps(1,end) infinite;pointer-events:none;
  }

  @keyframes grumble{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
  @keyframes flash{
    0%,45%,55%,100%{opacity:0}
    48%,52%{opacity:1}
  }
  @keyframes flashbg{
    0%,45%,55%,100%{opacity:0}
    48%,52%{opacity:1}
  }

  @media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none!important;transition:none!important}
    .bolt{opacity:1}
  }
</style>
</head>
<body>
  <header>
    <h1>Today's Forecast</h1>
    <p>Pure HTML &amp; CSS — no JavaScript, no images, no SVG.</p>
  </header>

  <main class="grid">

    <!-- SUNNY -->
    <article class="card sunny">
      <div class="icon-wrap">
        <div class="rays">
          <span class="ray"></span><span class="ray"></span><span class="ray"></span>
          <span class="ray"></span><span class="ray"></span><span class="ray"></span>
          <span class="ray"></span><span class="ray"></span>
        </div>
        <div class="sun-core"></div>
      </div>
      <div class="info">
        <div class="city">Miami</div>
        <div class="temp">32<small>°C</small></div>
        <div class="desc">Clear skies and blazing sunshine</div>
      </div>
    </article>

    <!-- RAINY -->
    <article class="card rainy">
      <div class="icon-wrap">
        <div class="cloud"></div>
        <span class="drop"></span><span class="drop"></span><span class="drop"></span>
        <span class="drop"></span><span class="drop"></span>
      </div>
      <div class="info">
        <div class="city">London</div>
        <div class="temp">14<small>°C</small></div>
        <div class="desc">Steady rain throughout the day</div>
      </div>
    </article>

    <!-- SNOWY -->
    <article class="card snowy">
      <div class="icon-wrap">
        <span class="flake"></span><span class="flake"></span><span class="flake"></span>
        <span class="flake"></span><span class="flake"></span><span class="flake"></span>
      </div>
      <div class="info">
        <div class="city">Oslo</div>
        <div class="temp">−4<small>°C</small></div>
        <div class="desc">Heavy snowfall and icy winds</div>
      </div>
    </article>

    <!-- STORMY -->
    <article class="card stormy">
      <div class="flash-bg"></div>
      <div class="icon-wrap">
        <div class="storm-cloud"></div>
        <div class="bolt"></div>
      </div>
      <div class="info">
        <div class="city">Chicago</div>
        <div class="temp">18<small>°C</small></div>
        <div class="desc">Thunderstorms with lightning</div>
      </div>
    </article>

  </main>
</body>
</html>