GLM 5.3

by Z.aiReasoningClean

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

How it went

Total time: 31.7 s
Cost: $0.0065
Output tokens: 3,180
Spent thinking: 20 tokens
Speed: 109.3 tok/s
Console errors: 0

First token after: 2.6 s
First visible text after: 3.3 s
Prompt tokens: 499
Code size: 9.3 KB
Finish reason: stop
Served by: Decart
Model id: z-ai/glm-5.3
Reasoning sent: {"effort":"low"}
Max output: 943,718 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 · 291 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 — Pure CSS</title>
<style>
  :root{
    --radius: 22px;
    --pad: 28px;
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  body{
    min-height:100vh;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    background: #10141f;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding: 40px 20px;
    gap: 28px;
  }
  h1{
    color:#e8ecf5; font-weight:300; letter-spacing:.35em; text-transform:uppercase;
    font-size:clamp(.85rem, 2.2vw, 1.1rem); text-align:center;
  }
  h1 span{ color:#7f8bb0; }

  .grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    width:100%;
    max-width: 1180px;
  }
  @media (max-width: 900px){
    .grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 560px){
    .grid{ grid-template-columns: 1fr; }
  }

  .card{
    position:relative;
    border-radius: var(--radius);
    padding: var(--pad);
    color:#fff;
    min-height: 300px;
    display:flex; flex-direction:column;
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
    overflow:hidden;
    transition: transform .35s ease, box-shadow .35s ease;
  }
  .card:hover{
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 26px 48px rgba(0,0,0,.5);
  }

  /* ---------- shared typography ---------- */
  .city{ font-size:.82rem; letter-spacing:.22em; text-transform:uppercase; opacity:.9; }
  .temp{ font-size:3.4rem; font-weight:200; line-height:1; margin:14px 0 4px; }
  .temp sup{ font-size:1.6rem; font-weight:300; }
  .desc{ font-size:.95rem; opacity:.85; font-weight:300; line-height:1.4; }

  .icon{ position:relative; height:96px; margin-bottom:18px; }
  .icon > *{ position:absolute; }

  /* ================= SUNNY ================= */
  .sunny{
    background: linear-gradient(160deg,#ffb347 0%, #ff8c42 45%, #ff7043 100%);
  }
  .sun{
    width:52px; height:52px; border-radius:50%;
    background:#fff3b0;
    box-shadow: 0 0 30px 8px rgba(255,240,150,.75);
    top:22px; left:50%;
    animation: sunPulse 4s ease-in-out infinite;
  }
  .sun::before, .sun::after,
  .sun .ray::before, .sun .ray::after{
    content:""; position:absolute;
    left:50%; top:50%;
    width:6px; height:76px; margin:-38px 0 0 -3px;
    border-radius:6px;
    background:#ffe27a;
    box-shadow: 0 0 12px rgba(255,226,122,.8);
  }
  .sun::before{ transform: rotate(45deg); }
  .sun::after { transform: rotate(135deg); }
  .sun .ray::before{ transform: rotate(0deg); }
  .sun .ray::after { transform: rotate(90deg); }
  .sun-rays{
    inset:0;
    animation: spin 14s linear infinite;
  }
  @keyframes spin{ to{ transform: rotate(360deg); } }
  @keyframes sunPulse{
    0%,100%{ transform: scale(1); box-shadow:0 0 30px 8px rgba(255,240,150,.75); }
    50%    { transform: scale(1.08); box-shadow:0 0 44px 14px rgba(255,240,150,.95); }
  }

  /* ================= RAINY ================= */
  .rainy{
    background: linear-gradient(160deg,#4b6cb7 0%, #3a4a8c 50%, #2c3a6e 100%);
  }
  .cloud, .cloud-sm{ background:#e6ecf5; border-radius:60px; }
  .cloud{
    width:78px; height:34px; top:14px; left:50%;
    transform:translateX(-50%);
    animation: bob 5s ease-in-out infinite;
  }
  .cloud::before, .cloud::after{
    content:""; position:absolute; background:inherit; border-radius:50%;
  }
  .cloud::before{ width:36px;height:36px; top:-16px; left:12px; }
  .cloud::after { width:28px;height:28px; top:-11px; left:42px; }
  .cloud-sm{
    width:44px; height:22px; top:4px; left:12%;
    opacity:.55;
    animation: bob 5s ease-in-out infinite reverse;
  }
  .cloud-sm::before{ content:""; position:absolute; width:20px;height:20px;
    background:inherit; border-radius:50%; top:-9px; left:9px; }
  @keyframes bob{ 0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(5px);} }

  .drop{
    width:5px; height:16px; border-radius: 50% 50% 60% 60% / 20% 20% 80% 80%;
    background: linear-gradient(#bfe0ff, #7fb5ff);
    top:6px;
    animation: fall 1.2s linear infinite;
  }
  .drop:nth-child(2){ left: calc(50% - 22px); animation-delay: 0s;   }
  .drop:nth-child(3){ left: calc(50% - 6px);  animation-delay:.35s; }
  .drop:nth-child(4){ left: calc(50% + 10px); animation-delay:.7s;  }
  .drop:nth-child(5){ left: calc(50% + 24px); animation-delay:.15s; height:13px; }
  @keyframes fall{
    0%  { transform: translateY(0);    opacity:0; }
    15% { opacity:1; }
    100%{ transform: translateY(78px); opacity:.2; }
  }

  /* ================= SNOWY ================= */
  .snowy{
    background: linear-gradient(160deg,#8fb8de 0%, #6f95c4 50%, #56779f 100%);
  }
  .flake{
    width:10px; height:10px; background:#fff; border-radius:50%;
    top:10px;
    box-shadow: 0 0 8px rgba(255,255,255,.9);
    animation: drift 3.4s linear infinite;
  }
  .flake::before, .flake::after{
    content:""; position:absolute; background:inherit; border-radius:inherit;
    left:50%; top:50%; width:10px; height:10px; margin:-5px 0 0 -5px;
  }
  .flake::before{ transform: rotate(60deg); }
  .flake::after { transform: rotate(-60deg); }
  .flake:nth-child(2){ left: calc(50% - 28px); animation-duration:3s; }
  .flake:nth-child(3){ left: calc(50% - 4px);  animation-duration:3.8s; animation-delay:.6s;}
  .flake:nth-child(4){ left: calc(50% + 20px); animation-duration:3.2s; animation-delay:1.1s;}
  .flake:nth-child(5){ left: calc(50% + 40px); animation-duration:4s;  animation-delay:.3s; transform:scale(.7);}
  @keyframes drift{
    0%  { transform: translate(0,0) rotate(0deg);      opacity:0; }
    10% { opacity:1; }
    100%{ transform: translate(-16px, 84px) rotate(300deg); opacity:.3; }
  }

  /* ================= STORMY ================= */
  .stormy{
    background: linear-gradient(160deg,#37415c 0%, #262d43 55%, #1a1f30 100%);
  }
  .bolt{
    width:0; height:0; top:44px; left:50%;
    border-left:12px solid transparent;
    border-right:12px solid transparent;
    border-top:20px solid #ffe14d;
    transform: translateX(-50%) rotate(18deg) skewX(-14deg);
    filter: drop-shadow(0 0 10px rgba(255,225,77,.9));
    animation: flash 2.6s steps(1) infinite;
  }
  .bolt::before{
    content:""; position:absolute;
    left:-16px; top:14px;
    border-left:9px solid transparent;
    border-right:12px solid transparent;
    border-top:16px solid #ffd21f;
    transform: skewX(28deg);
  }
  .cloud-dark{
    width:84px; height:34px; top:12px; left:50%;
    background:#5a6480; border-radius:60px;
    transform:translateX(-50%);
  }
  .cloud-dark::before, .cloud-dark::after{
    content:""; position:absolute; background:inherit; border-radius:50%;
  }
  .cloud-dark::before{ width:38px;height:38px; top:-18px; left:12px; }
  .cloud-dark::after { width:30px;height:30px; top:-12px; left:44px; }
  .stormy::before{ /* full-card lightning glow */
    content:""; position:absolute; inset:0;
    background: rgba(255,240,180,.14);
    opacity:0; pointer-events:none;
    animation: flashBg 2.6s steps(1) infinite;
  }
  @keyframes flash{
    0%, 42% { opacity:0; }
    44%     { opacity:1; }
    46%     { opacity:0; }
    48%     { opacity:1; }
    52%     { opacity:0; }
    100%    { opacity:0; }
  }
  @keyframes flashBg{
    0%, 42% { opacity:0; }
    44%     { opacity:1; }
    46%     { opacity:0; }
    48%     { opacity:1; }
    52%     { opacity:0; }
    100%    { opacity:0; }
  }

  /* reduced motion */
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration: 0.01s !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01s !important;
    }
  }
</style>
</head>
<body>

  <h1>Four Seasons, <span>Four Skies</span></h1>

  <div class="grid">

    <!-- SUNNY -->
    <article class="card sunny">
      <div class="icon">
        <div class="sun-rays">
          <div class="sun"><span class="ray"></span></div>
        </div>
      </div>
      <div class="city">Valencia</div>
      <div class="temp">29<sup>°C</sup></div>
      <p class="desc">Clear skies with a warm Mediterranean breeze all afternoon.</p>
    </article>

    <!-- RAINY -->
    <article class="card rainy">
      <div class="icon">
        <div class="cloud-sm"></div>
        <div class="cloud"></div>
        <span class="drop"></span>
        <span class="drop"></span>
        <span class="drop"></span>
        <span class="drop"></span>
      </div>
      <div class="city">Bergen</div>
      <div class="temp">14<sup>°C</sup></div>
      <p class="desc">Steady showers rolling in from the coast — umbrella weather.</p>
    </article>

    <!-- SNOWY -->
    <article class="card snowy">
      <div class="icon">
        <div class="cloud" style="background:#f4f8fd;"></div>
        <span class="flake"></span>
        <span class="flake"></span>
        <span class="flake"></span>
        <span class="flake"></span>
      </div>
      <div class="city">Reykjavík</div>
      <div class="temp">-3<sup>°C</sup></div>
      <p class="desc">Light snow drifting softly, settling on the rooftops.</p>
    </article>

    <!-- STORMY -->
    <article class="card stormy">
      <div class="icon">
        <div class="bolt"></div>
        <div class="cloud-dark"></div>
      </div>
      <div class="city">New Orleans</div>
      <div class="temp">21<sup>°C</sup></div>
      <p class="desc">Thunderstorms overhead — dramatic lightning after dark.</p>
    </article>

  </div>

</body>
</html>

Reasoning trace (20 tokens)

Pure HTML/CSS. Build icons with divs and pseudo-elements. Provide four cards in grid.