GLM 5.3 Flash

by Z.aiReasoningClean

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

How it went

Total time: 16.3 s
Cost: $0.0012
Output tokens: 3,036
Spent thinking: 17 tokens
Speed: 203.9 tok/s
Console errors: 0

First token after: 1.5 s
First visible text after: 1.7 s
Prompt tokens: 499
Code size: 8.7 KB
Finish reason: stop
Served by: CoreWeave
Model id: z-ai/glm-5.3-flash
Reasoning sent: {"effort":"low"}
Max output: 64,000 tokens
Generated: Nov 10, 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 · 279 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>
  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    font-family: "Segoe UI", system-ui, sans-serif;
    min-height: 100vh;
    background: #10131a;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
  }

  h1 {
    font-weight: 300;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-size: 1.4rem;
    margin-bottom: 32px;
    opacity: .85;
  }

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

  .card {
    border-radius: 20px;
    padding: 32px 24px;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
    transition: transform .3s ease, box-shadow .3s ease;
  }
  .card:hover {
    transform: translateY(-10px);
    box-shadow: 0 24px 44px rgba(0,0,0,.5);
  }

  .icon-area {
    height: 110px;
    width: 110px;
    position: relative;
    margin-bottom: 18px;
    flex-shrink: 0;
  }

  .card h2 { font-size: 1.15rem; font-weight: 600; margin-bottom: 8px; }
  .temp { font-size: 2.4rem; font-weight: 200; line-height: 1; margin-bottom: 8px; }
  .desc { font-size: .85rem; opacity: .8; }
  .hi-lo { font-size: .75rem; opacity: .6; margin-top: 12px; letter-spacing: 1px; }

  /* ---------- SUNNY ---------- */
  .sunny { background: linear-gradient(160deg, #f7b733, #fc4a1a); }
  .sun {
    position: absolute; top: 50%; left: 50%;
    width: 46px; height: 46px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff3b0, #ffd54f 60%, #ff9800);
    transform: translate(-50%,-50%);
    box-shadow: 0 0 30px rgba(255,200,60,.9);
  }
  .sun-rays {
    position: absolute; inset: 0;
    animation: spin 12s linear infinite;
  }
  .sun-rays::before, .sun-rays::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 100px; height: 4px; margin: -2px 0 0 -50px;
    border-radius: 4px;
    background: repeating-linear-gradient(90deg,
      #ffe082 0 10px, transparent 10px 24px);
  }
  .sun-rays::after { transform: rotate(90deg); }
  .sun-rays2 {
    position: absolute; inset: 0;
    transform: rotate(45deg);
    animation: spin 12s linear infinite reverse;
  }
  .sun-rays2::before, .sun-rays2::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 100px; height: 4px; margin: -2px 0 0 -50px;
    border-radius: 4px;
    background: repeating-linear-gradient(90deg,
      #ffe082 0 10px, transparent 10px 24px);
  }
  .sun-rays2::after { transform: rotate(90deg); }

  @keyframes spin { to { transform: rotate(360deg); } }
  .sun-rays2 { --keep: 1; }
  @keyframes spinRev { from { transform: rotate(45deg);} to { transform: rotate(-315deg); } }
  .sun-rays2 { animation: spinRev 12s linear infinite; }

  /* ---------- RAINY ---------- */
  .rainy { background: linear-gradient(160deg, #4b79a1, #283e51); }
  .cloud {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 70px; height: 26px; border-radius: 20px;
    background: #e8eef4;
    box-shadow: 0 0 20px rgba(255,255,255,.15);
    z-index: 2;
  }
  .cloud::before {
    content: ""; position: absolute; top: -22px; left: 12px;
    width: 32px; height: 32px; border-radius: 50%; background: #e8eef4;
  }
  .cloud::after {
    content: ""; position: absolute; top: -14px; right: 10px;
    width: 22px; height: 22px; border-radius: 50%; background: #e8eef4;
  }
  .rain {
    position: absolute; bottom: 0; left: 0; right: 0; height: 55px; overflow: hidden;
  }
  .rain::before, .rain::after {
    content: ""; position: absolute; top: -60px; width: 3px; height: 14px;
    border-radius: 3px;
    background: linear-gradient(#9fd8ff, rgba(159,216,255,0));
    animation: fall 1s linear infinite;
  }
  .rain::before {
    background-image: repeating-linear-gradient(180deg,
      transparent 0 14px, #9fd8ff 14px 26px, transparent 26px 46px,
      #9fd8ff 46px 58px, transparent 58px 80px);
    height: 80px; width: 40px; left: 20px;
    border-radius: 0;
    animation: rainfall 1s linear infinite;
  }
  .rain::after {
    background-image: repeating-linear-gradient(180deg,
      transparent 0 10px, #9fd8ff 10px 22px, transparent 22px 52px,
      #9fd8ff 52px 64px, transparent 64px 92px);
    height: 92px; width: 40px; left: 60px;
    border-radius: 0;
    animation: rainfall 1s linear infinite .45s;
  }
  @keyframes rainfall {
    to { transform: translateY(140px); }
  }
  @keyframes fall { to { transform: translateY(120px); } }

  /* ---------- SNOWY ---------- */
  .snowy { background: linear-gradient(160deg, #83a4d4, #b6fbff 130%); color: #123; }
  .snowy .hi-lo, .snowy .desc { opacity: .65; }
  .snow {
    position: absolute; bottom: 0; left: 0; right: 0; height: 60px; overflow: hidden;
  }
  .flake {
    position: absolute; top: -16px;
    width: 10px; height: 10px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 6px rgba(255,255,255,.9);
    animation: snowfall 3s linear infinite;
  }
  .flake:nth-child(1) { left: 12%; animation-delay: 0s;   animation-duration: 2.6s; }
  .flake:nth-child(2) { left: 32%; animation-delay: .9s;  animation-duration: 3.4s; }
  .flake:nth-child(3) { left: 52%; animation-delay: .4s;  animation-duration: 2.9s; }
  .flake:nth-child(4) { left: 72%; animation-delay: 1.4s; animation-duration: 3.1s; }
  .flake:nth-child(5) { left: 88%; animation-delay: .6s;  animation-duration: 2.5s; }
  @keyframes snowfall {
    0%   { transform: translateY(0) translateX(0) rotate(0); opacity: 1; }
    50%  { transform: translateY(35px) translateX(8px) rotate(180deg); }
    100% { transform: translateY(75px) translateX(-6px) rotate(360deg); opacity: .2; }
  }

  /* ---------- STORMY ---------- */
  .stormy { background: linear-gradient(160deg, #232526, #414345 60%, #2c3e50); }
  .storm-cloud { background: #aab4c4; }
  .storm-cloud::before, .storm-cloud::after { background: #aab4c4; }
  .bolt {
    position: absolute; bottom: 4px; left: 50%;
    width: 0; height: 0;
    border-left: 12px solid transparent;
    border-right: 8px solid transparent;
    border-top: 34px solid #ffd54f;
    transform: translateX(-8px) skewX(-12deg);
    filter: drop-shadow(0 0 8px rgba(255,213,79,.9));
    animation: flash 2.4s ease-in-out infinite;
    z-index: 1;
  }
  .bolt::before {
    content: ""; position: absolute; top: -46px; left: -10px;
    width: 0; height: 0;
    border-left: 10px solid transparent;
    border-right: 7px solid transparent;
    border-top: 26px solid #ffd54f;
    transform: skewX(10deg);
  }
  @keyframes flash {
    0%, 12%, 22%, 100% { opacity: 1; }
    8%, 18% { opacity: .1; }
    30%, 70% { opacity: .35; }
    74%, 78% { opacity: 1; }
  }

  @media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) {
    .grid { grid-template-columns: 1fr; max-width: 320px; }
    .card { min-height: 280px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .sun-rays, .sun-rays2, .rain::before, .rain::after,
    .flake, .bolt {
      animation: none !important;
    }
    .card { transition: none; }
  }
</style>
</head>
<body>
  <h1>Weather</h1>
  <div class="grid">

    <div class="card sunny">
      <div class="icon-area">
        <div class="sun-rays"></div>
        <div class="sun-rays2"></div>
        <div class="sun"></div>
      </div>
      <h2>Phoenix</h2>
      <div class="temp">32°</div>
      <div class="desc">Clear sky all day</div>
      <div class="hi-lo">H 34° · L 24°</div>
    </div>

    <div class="card rainy">
      <div class="icon-area">
        <div class="cloud"></div>
        <div class="rain"></div>
      </div>
      <h2>London</h2>
      <div class="temp">11°</div>
      <div class="desc">Light rain showers</div>
      <div class="hi-lo">H 13° · L 8°</div>
    </div>

    <div class="card snowy">
      <div class="icon-area">
        <div class="cloud"></div>
        <div class="snow">
          <span class="flake"></span><span class="flake"></span>
          <span class="flake"></span><span class="flake"></span>
          <span class="flake"></span>
        </div>
      </div>
      <h2>Oslo</h2>
      <div class="temp">-4°</div>
      <div class="desc">Gentle snowfall</div>
      <div class="hi-lo">H -1° · L -9°</div>
    </div>

    <div class="card stormy">
      <div class="icon-area">
        <div class="cloud storm-cloud"></div>
        <div class="bolt"></div>
      </div>
      <h2>Singapore</h2>
      <div class="temp">26°</div>
      <div class="desc">Thunderstorms late</div>
      <div class="hi-lo">H 29° · L 24°</div>
    </div>

  </div>
</body>
</html>

Reasoning trace (17 tokens)

Design: four cards with CSS-only animated icons. Keep it quick but polished.