MiniMax M3.1 Flash

by MiniMaxReasoningClean

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

How it went

Total time: 21.2 s
Cost: $0.0030
Output tokens: 4,928
Spent thinking: 0 tokens
Speed: 238.2 tok/s
Console errors: 0

First token after: 460 ms
First visible text after: 460 ms
Prompt tokens: 681
Code size: 14.3 KB
Finish reason: stop
Served by: Parasail
Model id: minimax/minimax-m3.1-flash
Reasoning sent: {"effort":"low"}
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 · 378 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Weather Cards</title>
<style>
  :root{
    --card-radius: 22px;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  body{
    min-height:100vh;
    font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
    background:radial-gradient(circle at 20% 0%, #1b2440 0%, #0d1220 55%, #070a12 100%);
    color:#fff;
    display:flex;flex-direction:column;align-items:center;
    padding:38px 20px 60px;
  }
  header{text-align:center;margin-bottom:34px;}
  header h1{
    font-size:clamp(1.6rem,4vw,2.4rem);
    letter-spacing:.5px;
    background:linear-gradient(90deg,#ffd76e,#7ec8ff,#c8b6ff,#ff9a8b);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  header p{color:#93a0bd;margin-top:8px;font-size:.95rem;}

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

  .card{
    position:relative;
    border-radius:var(--card-radius);
    padding:26px 22px 24px;
    overflow:hidden;
    isolation:isolate;
    min-height:340px;
    display:flex;flex-direction:column;align-items:center;
    text-align:center;
    box-shadow:0 16px 34px -18px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.16);
    transition:transform .38s cubic-bezier(.2,.8,.3,1), box-shadow .38s ease;
    backdrop-filter:blur(2px);
  }
  .card:hover,.card:focus-within{
    transform:translateY(-14px) scale(1.02);
    box-shadow:0 30px 50px -20px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.25);
  }
  .card::after{ /* glass sheen */
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(160deg,rgba(255,255,255,.18),rgba(255,255,255,0) 45%);
    z-index:5;
  }

  /* ---------- backgrounds ---------- */
  .sunny{background:linear-gradient(165deg,#ffb347 0%,#ff8c42 40%,#f0563f 100%);}
  .rainy{background:linear-gradient(165deg,#4b7ba8 0%,#31557d 45%,#22344f 100%);}
  .snowy{background:linear-gradient(165deg,#8fb6d8 0%,#6f92b8 45%,#4c6b93 100%);}
  .stormy{background:linear-gradient(165deg,#3a3350 0%,#25203a 45%,#14121f 100%);}

  /* city / temp / desc */
  .city{margin-top:20px;font-size:1.25rem;font-weight:700;letter-spacing:.4px;position:relative;z-index:4;}
  .temp{margin-top:6px;font-size:2.5rem;font-weight:800;position:relative;z-index:4;line-height:1;}
  .temp span{font-size:1.4rem;vertical-align:top;font-weight:600;}
  .desc{margin-top:8px;font-size:.9rem;color:rgba(255,255,255,.82);position:relative;z-index:4;}
  .badge{
    position:absolute;top:16px;left:16px;z-index:4;
    font-size:.7rem;letter-spacing:1.4px;text-transform:uppercase;
    padding:5px 10px;border-radius:999px;
    background:rgba(255,255,255,.18);
    border:1px solid rgba(255,255,255,.25);
  }
  .days{position:absolute;top:16px;right:16px;z-index:4;font-size:.75rem;color:rgba(255,255,255,.8);}

  /* icon stage */
  .icon{
    position:relative;width:130px;height:130px;margin-top:8px;z-index:3;
  }

  /* ---------- SUNNY ---------- */
  .sun-core{
    position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#fff6c9,#ffd34d 55%,#f9a825 100%);
    box-shadow:0 0 26px 6px rgba(255,214,102,.65);
    animation:corePulse 3s ease-in-out infinite;
  }
  .rays{position:absolute;inset:0;animation:spin 14s linear infinite;}
  .ray{
    position:absolute;left:50%;top:50%;width:8px;height:22px;margin-left:-4px;
    border-radius:4px;
    background:linear-gradient(rgba(255,255,255,0),rgba(255,236,150,.95));
    transform-origin:50% 0;
    transform:translateY(-58px);
  }
  @keyframes spin{to{transform:rotate(360deg);}}
  @keyframes corePulse{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.08);}
  }
  /* sunny clouds drifting */
  .sun-cloud{
    position:absolute;bottom:6px;left:-40px;width:70px;height:22px;border-radius:20px;
    background:rgba(255,255,255,.55);
    animation:drift 9s linear infinite;
  }
  .sun-cloud::before,.sun-cloud::after{
    content:"";position:absolute;border-radius:50%;background:inherit;
  }
  .sun-cloud::before{width:30px;height:30px;left:12px;top:-14px;}
  .sun-cloud::after{width:22px;height:22px;left:36px;top:-10px;}
  @keyframes drift{from{transform:translateX(0);}to{transform:translateX(220px);}}

  /* ---------- RAINY ---------- */
  .rain-cloud{
    position:absolute;top:22px;left:50%;transform:translateX(-50%);
    width:96px;height:30px;border-radius:22px;background:linear-gradient(#dfe9f2,#b9c8d8);
    box-shadow:0 6px 12px rgba(0,0,0,.25);
    animation:cloudBob 4s ease-in-out infinite;
  }
  .rain-cloud::before,.rain-cloud::after{
    content:"";position:absolute;border-radius:50%;background:inherit;
  }
  .rain-cloud::before{width:46px;height:46px;left:12px;top:-24px;}
  .rain-cloud::after{width:36px;height:36px;left:50px;top:-18px;}
  @keyframes cloudBob{
    0%,100%{transform:translateX(-50%) translateY(0);}
    50%{transform:translateX(-50%) translateY(-5px);}
  }
  .drops{position:absolute;inset:0;}
  .drop{
    position:absolute;top:62px;width:3px;height:16px;border-radius:3px;
    background:linear-gradient(rgba(190,225,255,0),rgba(200,232,255,.95));
    animation:fall 1.1s linear infinite;
  }
  @keyframes fall{
    0%{transform:translateY(-14px) scaleY(.6);opacity:0;}
    15%{opacity:1;}
    80%{opacity:1;}
    100%{transform:translateY(58px) scaleY(1.2);opacity:0;}
  }
  .puddle{
    position:absolute;bottom:6px;left:50%;width:96px;height:14px;margin-left:-48px;
    border-radius:50%;background:rgba(255,255,255,.18);
    box-shadow:inset 0 2px 4px rgba(255,255,255,.25);
    animation:puddle 3.6s ease-in-out infinite;
  }
  @keyframes puddle{
    0%,100%{transform:scaleX(1);opacity:.8;}
    50%{transform:scaleX(1.25);opacity:1;}
  }

  /* ---------- SNOWY ---------- */
  .snow-cloud{
    position:absolute;top:20px;left:50%;transform:translateX(-50%);
    width:92px;height:28px;border-radius:22px;background:linear-gradient(#ffffff,#d5e3ef);
    box-shadow:0 6px 12px rgba(40,70,110,.35);
    animation:cloudBob 5s ease-in-out infinite;
  }
  .snow-cloud::before,.snow-cloud::after{content:"";position:absolute;border-radius:50%;background:inherit;}
  .snow-cloud::before{width:44px;height:44px;left:10px;top:-22px;}
  .snow-cloud::after{width:34px;height:34px;left:48px;top:-16px;}
  .flakes{position:absolute;inset:0;}
  .flake{
    position:absolute;top:-14px;width:8px;height:8px;border-radius:50%;
    background:#fff;box-shadow:0 0 6px rgba(255,255,255,.9);
    animation:snowFall linear infinite;
  }
  @keyframes snowFall{
    0%{transform:translateY(-10px) translateX(0) scale(.7);opacity:0;}
    10%{opacity:1;}
    50%{transform:translateY(60px) translateX(14px) scale(1);}
    90%{opacity:1;}
    100%{transform:translateY(140px) translateX(-8px) scale(.8);opacity:0;}
  }
  .snow-ground{
    position:absolute;bottom:2px;left:50%;width:120px;height:26px;margin-left:-60px;
    background:#fff;border-radius:50% 50% 0 0/70% 70% 0 0;
    opacity:.85;
  }

  /* ---------- STORMY ---------- */
  .storm-cloud{
    position:absolute;top:16px;left:50%;transform:translateX(-50%);
    width:100px;height:32px;border-radius:24px;background:linear-gradient(#7a7390,#4a4459);
    box-shadow:0 8px 16px rgba(0,0,0,.5);
    animation:stormBob 3.4s ease-in-out infinite;
  }
  .storm-cloud::before,.storm-cloud::after{content:"";position:absolute;border-radius:50%;background:inherit;}
  .storm-cloud::before{width:50px;height:50px;left:8px;top:-26px;}
  .storm-cloud::after{width:38px;height:38px;left:52px;top:-18px;}
  @keyframes stormBob{
    0%,100%{transform:translateX(-50%) translateY(0);}
    50%{transform:translateX(-50%) translateY(-4px);}
  }
  .bolt{
    position:absolute;top:56px;left:50%;margin-left:-13px;width:26px;height:48px;
    background:linear-gradient(#fff9c4,#ffd429 45%,#ff9f1c);
    clip-path:polygon(55% 0,100% 0,62% 42%,100% 42%,20% 100%,42% 55%,0 55%);
    filter:drop-shadow(0 0 10px rgba(255,220,80,.85));
    opacity:0;
    animation:flash 4.5s linear infinite;
  }
  @keyframes flash{
    0%,8%{opacity:0;}
    10%{opacity:1;}
    12%{opacity:.15;}
    14%{opacity:1;}
    18%{opacity:0;}
    19%{opacity:1;}
    23%{opacity:0;}
    60%{opacity:0;}
    61%{opacity:1;}
    63%{opacity:.2;}
    65%{opacity:1;}
    69%{opacity:0;}
    100%{opacity:0;}
  }
  .storm-glow{
    position:absolute;inset:0;border-radius:50%;
    background:radial-gradient(circle at 50% 40%,rgba(255,230,140,.55),transparent 60%);
    animation:glow 4.5s linear infinite;
  }
  @keyframes glow{
    0%,8%{opacity:0;}
    11%{opacity:1;}
    15%{opacity:.2;}
    18%{opacity:.9;}
    22%{opacity:0;}
    60%{opacity:0;}
    62%{opacity:.85;}
    68%{opacity:0;}
    100%{opacity:0;}
  }
  .storm-drops{position:absolute;inset:0;}
  .sdrop{
    position:absolute;top:70px;width:2px;height:13px;border-radius:2px;
    background:linear-gradient(rgba(180,210,255,0),rgba(190,215,255,.8));
    transform:rotate(14deg);
    animation:fall 1.3s linear infinite;
  }
  .flashlight{
    position:absolute;inset:0;z-index:6;pointer-events:none;
    background:radial-gradient(circle at 50% 22%,rgba(255,255,255,.55),transparent 55%);
    opacity:0;animation:flashlight 4.5s linear infinite;
  }
  @keyframes flashlight{
    0%,8%{opacity:0;}
    11%{opacity:1;}
    15%{opacity:.1;}
    18%{opacity:.7;}
    23%{opacity:0;}
    60%{opacity:0;}
    62%{opacity:.8;}
    68%{opacity:0;}
    100%{opacity:0;}
  }

  footer{margin-top:36px;color:#6c7794;font-size:.8rem;text-align:center;}

  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
      animation-duration:.001ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.001ms !important;
    }
    .card:hover{transform:none;}
  }
</style>
</head>
<body>
<header>
  <h1>Weather Cards</h1>
  <p>Pure HTML &amp; CSS — no JavaScript, no images, no SVG</p>
</header>

<div class="grid">

  <!-- SUNNY -->
  <article class="card sunny" tabindex="0">
    <span class="badge">Clear</span><span class="days">Mon</span>
    <div class="icon">
      <div class="rays">
        <span class="ray" style="transform:rotate(0deg) translateY(-58px);"></span>
        <span class="ray" style="transform:rotate(45deg) translateY(-58px);"></span>
        <span class="ray" style="transform:rotate(90deg) translateY(-58px);"></span>
        <span class="ray" style="transform:rotate(135deg) translateY(-58px);"></span>
        <span class="ray" style="transform:rotate(180deg) translateY(-58px);"></span>
        <span class="ray" style="transform:rotate(225deg) translateY(-58px);"></span>
        <span class="ray" style="transform:rotate(270deg) translateY(-58px);"></span>
        <span class="ray" style="transform:rotate(315deg) translateY(-58px);"></span>
      </div>
      <div class="sun-core"></div>
      <div class="sun-cloud"></div>
    </div>
    <h2 class="city">Phoenix</h2>
    <p class="temp">31<span>°C</span></p>
    <p class="desc">Sunny &amp; blazing hot</p>
  </article>

  <!-- RAINY -->
  <article class="card rainy" tabindex="0">
    <span class="badge">Shower</span><span class="days">Tue</span>
    <div class="icon">
      <div class="rain-cloud"></div>
      <div class="drops">
        <span class="drop" style="left:22%;animation-delay:0s;"></span>
        <span class="drop" style="left:34%;animation-delay:.15s;"></span>
        <span class="drop" style="left:46%;animation-delay:.3s;"></span>
        <span class="drop" style="left:58%;animation-delay:.45s;"></span>
        <span class="drop" style="left:70%;animation-delay:.6s;"></span>
        <span class="drop" style="left:80%;animation-delay:.75s;"></span>
        <span class="drop" style="left:28%;animation-delay:.9s;"></span>
        <span class="drop" style="left:64%;animation-delay:1.05s;"></span>
      </div>
      <div class="puddle"></div>
    </div>
    <h2 class="city">Seattle</h2>
    <p class="temp">14<span>°C</span></p>
    <p class="desc">Light rain all afternoon</p>
  </article>

  <!-- SNOWY -->
  <article class="card snowy" tabindex="0">
    <span class="badge">Blizzard</span><span class="days">Wed</span>
    <div class="icon">
      <div class="snow-cloud"></div>
      <div class="flakes">
        <span class="flake" style="left:14%;animation-duration:4.2s;animation-delay:0s;"></span>
        <span class="flake" style="left:26%;animation-duration:5.6s;animation-delay:.4s;"></span>
        <span class="flake" style="left:38%;animation-duration:3.8s;animation-delay:.9s;"></span>
        <span class="flake" style="left:50%;animation-duration:6s;animation-delay:1.3s;"></span>
        <span class="flake" style="left:62%;animation-duration:4.6s;animation-delay:.2s;"></span>
        <span class="flake" style="left:74%;animation-duration:5.2s;animation-delay:1.8s;"></span>
        <span class="flake" style="left:84%;animation-duration:4s;animation-delay:2.4s;"></span>
        <span class="flake" style="left:32%;animation-duration:6.4s;animation-delay:3s;"></span>
        <span class="flake" style="left:70%;animation-duration:5s;animation-delay:3.6s;"></span>
      </div>
      <div class="snow-ground"></div>
    </div>
    <h2 class="city">Oslo</h2>
    <p class="temp">-6<span>°C</span></p>
    <p class="desc">Steady snow, frosty winds</p>
  </article>

  <!-- STORMY -->
  <article class="card stormy" tabindex="0">
    <span class="badge">Severe</span><span class="days">Thu</span>
    <div class="icon">
      <div class="storm-glow"></div>
      <div class="storm-cloud"></div>
      <div class="bolt"></div>
      <div class="storm-drops">
        <span class="sdrop" style="left:20%;animation-delay:0s;"></span>
        <span class="sdrop" style="left:33%;animation-delay:.3s;"></span>
        <span class="sdrop" style="left:47%;animation-delay:.6s;"></span>
        <span class="sdrop" style="left:60%;animation-delay:.9s;"></span>
        <span class="sdrop" style="left:74%;animation-delay:.2s;"></span>
        <span class="sdrop" style="left:84%;animation-delay:.55s;"></span>
      </div>
      <div class="flashlight"></div>
    </div>
    <h2 class="city">Reykjavík</h2>
    <p class="temp">9<span>°C</span></p>
    <p class="desc">Thunderstorms &amp; heavy rain</p>
  </article>

</div>

<footer>All icons are pure CSS shapes &amp; pseudo-elements · Animations honor <code>prefers-reduced-motion</code></footer>
</body>
</html>