MiniMax M3.1 Flash
by MiniMaxReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 20.8 s
- Cost
- $0.0043
- Output tokens
- 7,023
- Spent thinking
- 0 tokens
- Speed
- 341.9 tok/s
- Console errors
- 0
- First token after
- 285 ms
- First visible text after
- 285 ms
- Prompt tokens
- 681
- Code size
- 21.4 KB
- Finish reason
- stop
- Served by
- Nebius
- Model id
minimax/minimax-m3.1-flash- Reasoning sent
{"effort":"max"}- 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 · 697 lines
<!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>
/* ---------- Reset / base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
:root {
--radius: 22px;
--ease: cubic-bezier(.22,.9,.3,1);
}
html, body { height: 100%; }
body {
margin: 0;
padding: 40px 24px 56px;
font-family: "Segoe UI", Roboto, "Helvetica Neue", system-ui, -apple-system, Arial, sans-serif;
color: #fff;
background:
radial-gradient(1100px 600px at 12% -10%, #2b3b67 0%, rgba(43,59,103,0) 60%),
radial-gradient(900px 600px at 92% 8%, #3d2a5c 0%, rgba(61,42,92,0) 62%),
linear-gradient(160deg, #0f1626 0%, #161f33 45%, #0d1322 100%);
min-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
header.page-head {
width: 100%;
max-width: 1180px;
text-align: center;
margin-bottom: 34px;
}
header.page-head h1 {
margin: 0 0 10px;
font-size: clamp(1.6rem, 3.4vw, 2.5rem);
letter-spacing: .5px;
font-weight: 700;
background: linear-gradient(90deg, #ffd76e, #7fd7ff 45%, #c39bff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
header.page-head p {
margin: 0;
color: #9fb0cf;
font-size: clamp(.85rem, 1.6vw, 1rem);
letter-spacing: .4px;
}
header.page-head .badge {
display: inline-block;
margin-top: 14px;
padding: 6px 14px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.06);
color: #bcd0ef;
font-size: .72rem;
letter-spacing: 1.6px;
text-transform: uppercase;
}
/* ---------- Grid ---------- */
.cards {
width: 100%;
max-width: 1180px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
@media (max-width: 1000px) {
.cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
body { padding: 26px 16px 40px; }
.cards { grid-template-columns: 1fr; gap: 20px; }
}
/* ---------- Card shell ---------- */
.card {
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: var(--radius);
padding: 22px 22px 24px;
min-height: 330px;
display: flex;
flex-direction: column;
justify-content: space-between;
color: #fff;
border: 1px solid rgba(255,255,255,.14);
box-shadow:
0 18px 38px -18px rgba(0,0,0,.75),
inset 0 1px 0 rgba(255,255,255,.18);
transition: transform .45s var(--ease), box-shadow .45s var(--ease);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.card::before { /* glass sheen */
content: "";
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
background: linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 38%);
mix-blend-mode: overlay;
}
.card::after { /* vignette + hover glow ring */
content: "";
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
border-radius: var(--radius);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0);
transition: box-shadow .45s var(--ease);
}
.card:hover,
.card:focus-within {
transform: translateY(-12px);
box-shadow:
0 32px 55px -18px rgba(0,0,0,.8),
inset 0 1px 0 rgba(255,255,255,.25);
}
.card:hover::after,
.card:focus-within::after {
box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
/* ---------- Card content ---------- */
.card__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
position: relative;
z-index: 5;
}
.city {
font-size: 1.22rem;
font-weight: 700;
letter-spacing: .6px;
margin: 0;
text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.meta {
margin: 4px 0 0;
font-size: .72rem;
letter-spacing: 1.4px;
text-transform: uppercase;
color: rgba(255,255,255,.72);
}
.chip {
flex: none;
padding: 6px 11px;
border-radius: 999px;
font-size: .68rem;
letter-spacing: 1.2px;
text-transform: uppercase;
font-weight: 700;
background: rgba(255,255,255,.16);
border: 1px solid rgba(255,255,255,.22);
color: #fff;
white-space: nowrap;
}
.icon-stage {
position: relative;
z-index: 5;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
margin: 6px 0 2px;
}
.card__bottom { position: relative; z-index: 5; }
.temp {
font-size: 3.1rem;
font-weight: 200;
line-height: 1;
letter-spacing: -1px;
margin: 0;
display: flex;
align-items: flex-start;
gap: 2px;
}
.temp .deg {
font-size: 1.5rem;
font-weight: 300;
margin-top: 4px;
}
.desc {
margin: 10px 0 0;
font-size: .92rem;
color: rgba(255,255,255,.85);
line-height: 1.4;
}
.stats {
display: flex;
gap: 16px;
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,.16);
}
.stat { font-size: .68rem; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.62); }
.stat b { display: block; font-size: .88rem; letter-spacing: .3px; color: #fff; font-weight: 600; margin-top: 3px; text-transform: none; }
/* =========================================================
BACKGROUNDS
========================================================= */
.sunny { background: linear-gradient(160deg, #ffb03a 0%, #ff7a2f 45%, #e8462f 100%); }
.rainy { background: linear-gradient(160deg, #4a6fa5 0%, #33507d 45%, #1b2c4d 100%); }
.snowy { background: linear-gradient(160deg, #9fc4e8 0%, #6f97cc 45%, #43618f 100%); }
.stormy { background: linear-gradient(160deg, #5a5a72 0%, #33334a 45%, #16161f 100%); }
/* drifting background blobs for depth */
.card .blob {
position: absolute;
z-index: 1;
border-radius: 50%;
filter: blur(28px);
opacity: .55;
pointer-events: none;
}
.sunny .blob.b1 { width: 190px; height: 190px; top: -60px; left: -50px; background: rgba(255,238,160,.75); animation: drift 14s ease-in-out infinite; }
.sunny .blob.b2 { width: 150px; height: 150px; bottom: -50px; right: -40px; background: rgba(255,120,60,.55); animation: drift 18s ease-in-out infinite reverse; }
.rainy .blob.b1 { width: 200px; height: 200px; top: -70px; right: -60px; background: rgba(140,190,255,.4); animation: drift 16s ease-in-out infinite; }
.rainy .blob.b2 { width: 170px; height: 170px; bottom: -60px; left: -50px; background: rgba(30,50,90,.6); animation: drift 20s ease-in-out infinite reverse; }
.snowy .blob.b1 { width: 190px; height: 190px; top: -60px; left: -40px; background: rgba(255,255,255,.65); animation: drift 17s ease-in-out infinite; }
.snowy .blob.b2 { width: 160px; height: 160px; bottom: -55px; right: -40px; background: rgba(255,255,255,.4); animation: drift 21s ease-in-out infinite reverse; }
.stormy .blob.b1 { width: 200px; height: 200px; top: -70px; left: -50px; background: rgba(160,150,220,.35); animation: drift 15s ease-in-out infinite; }
.stormy .blob.b2 { width: 170px; height: 170px; bottom: -60px; right: -40px; background: rgba(0,0,0,.55); animation: drift 19s ease-in-out infinite reverse; }
@keyframes drift {
0%, 100% { transform: translate(0,0) scale(1); }
50% { transform: translate(26px, 18px) scale(1.12); }
}
/* =========================================================
SUNNY
========================================================= */
.sunny-icon {
position: relative;
width: 112px;
height: 112px;
animation: sun-pulse 4.2s ease-in-out infinite;
}
.sunny-icon .core {
position: absolute;
inset: 26px;
border-radius: 50%;
background: radial-gradient(circle at 34% 30%, #fffdf0 0%, #ffe58a 38%, #ffb02e 72%, #ff8a1f 100%);
box-shadow: 0 0 28px rgba(255,214,102,.85), 0 0 60px rgba(255,160,40,.45);
}
.sunny-icon .ray {
position: absolute;
top: 50%;
left: 50%;
width: 7px;
height: 20px;
margin: -10px 0 0 -3.5px;
border-radius: 4px;
background: linear-gradient(180deg, #fff6cf, #ffc247);
transform-origin: 50% 50%;
box-shadow: 0 0 10px rgba(255,200,80,.7);
}
/* place 8 rays and rotate the whole group continuously */
.sunny-icon .rays {
position: absolute;
inset: 0;
animation: spin 12s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes sun-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.06); }
}
/* =========================================================
RAINY
========================================================= */
.rainy-icon {
position: relative;
width: 120px;
height: 118px;
}
.rainy-icon .cloud {
position: absolute;
left: 6px;
top: 10px;
width: 108px;
height: 56px;
border-radius: 34px;
background: linear-gradient(180deg, #ffffff 0%, #dfe8f5 55%, #b9c8de 100%);
box-shadow: 0 10px 18px rgba(10,25,50,.35);
animation: cloud-float 5s ease-in-out infinite;
}
.rainy-icon .cloud::before,
.rainy-icon .cloud::after {
content: "";
position: absolute;
border-radius: 50%;
background: inherit;
}
.rainy-icon .cloud::before { width: 52px; height: 52px; left: 16px; top: -24px; }
.rainy-icon .cloud::after { width: 40px; height: 40px; right: 14px; top: -16px; }
@keyframes cloud-float {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(5px); }
}
.rainy-icon .drops {
position: absolute;
left: 0; right: 0; top: 62px;
height: 56px;
}
.drop {
position: absolute;
top: 0;
width: 3px;
height: 16px;
border-radius: 3px;
background: linear-gradient(180deg, rgba(190,225,255,0), #9ed2ff 45%, #5ea9ee 100%);
opacity: 0;
animation: fall 1.25s linear infinite;
}
@keyframes fall {
0% { transform: translateY(-12px); opacity: 0; }
12% { opacity: 1; }
85% { opacity: 1; }
100% { transform: translateY(48px); opacity: 0; }
}
/* =========================================================
SNOWY
========================================================= */
.snowy-icon {
position: relative;
width: 120px;
height: 118px;
}
.snowy-icon .cloud {
position: absolute;
left: 6px;
top: 8px;
width: 108px;
height: 54px;
border-radius: 34px;
background: linear-gradient(180deg, #ffffff 0%, #e9f1fb 55%, #c6d6ea 100%);
box-shadow: 0 10px 18px rgba(30,60,100,.28);
animation: cloud-float 6s ease-in-out infinite;
}
.snowy-icon .cloud::before,
.snowy-icon .cloud::after {
content: "";
position: absolute;
border-radius: 50%;
background: inherit;
}
.snowy-icon .cloud::before { width: 50px; height: 50px; left: 18px; top: -22px; }
.snowy-icon .cloud::after { width: 38px; height: 38px; right: 12px; top: -14px; }
.snowy-icon .flakes {
position: absolute;
left: 0; right: 0; top: 58px;
height: 60px;
}
.flake {
position: absolute;
top: 0;
width: 9px;
height: 9px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 7px rgba(255,255,255,.85);
opacity: 0;
animation: snowfall linear infinite;
}
@keyframes snowfall {
0% { transform: translate3d(0, -14px, 0) scale(.6); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translate3d(16px, 54px, 0) scale(1); opacity: 0; }
}
/* =========================================================
STORMY
========================================================= */
.stormy-icon {
position: relative;
width: 120px;
height: 124px;
}
.stormy-icon .cloud {
position: absolute;
left: 4px;
top: 6px;
width: 112px;
height: 54px;
border-radius: 32px;
background: linear-gradient(180deg, #9aa0b5 0%, #6d7288 55%, #4a4e61 100%);
box-shadow: 0 12px 20px rgba(0,0,0,.45);
animation: cloud-float 4.5s ease-in-out infinite;
}
.stormy-icon .cloud::before,
.stormy-icon .cloud::after {
content: "";
position: absolute;
border-radius: 50%;
background: inherit;
}
.stormy-icon .cloud::before { width: 54px; height: 54px; left: 14px; top: -26px; }
.stormy-icon .cloud::after { width: 40px; height: 40px; right: 10px; top: -18px; }
.bolt {
position: absolute;
left: 50%;
top: 56px;
width: 26px;
height: 48px;
margin-left: -13px;
background: linear-gradient(180deg, #fff7b0 0%, #ffd23f 40%, #ff9f1c 100%);
clip-path: polygon(56% 0%, 12% 52%, 45% 52%, 22% 100%, 88% 42%, 52% 42%, 88% 0%);
filter: drop-shadow(0 0 10px rgba(255,200,60,.85));
opacity: 0;
animation: flash 3.4s ease-out infinite;
}
@keyframes flash {
0%, 72%, 100% { opacity: 0; transform: scale(.85) translateY(-4px); }
74% { opacity: 1; transform: scale(1) translateY(0); }
78% { opacity: .25; }
81% { opacity: 1; }
85% { opacity: .3; }
88% { opacity: .95; }
93% { opacity: 0; }
}
/* lightning flash overlay on the whole card */
.stormy .flash-overlay {
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
background: radial-gradient(circle at 55% 42%, rgba(255,255,255,.85) 0%, rgba(210,225,255,.35) 28%, rgba(0,0,0,0) 62%);
opacity: 0;
animation: card-flash 3.4s ease-out infinite;
}
@keyframes card-flash {
0%, 72%, 100% { opacity: 0; }
75% { opacity: .55; }
79% { opacity: .12; }
82% { opacity: .42; }
86% { opacity: 0; }
}
.stormy-icon .rain {
position: absolute;
left: 0; right: 0; top: 60px;
height: 50px;
}
.stormy-icon .rain .drop {
background: linear-gradient(180deg, rgba(200,210,255,0), #a9b6e8 50%, #6f7ec0 100%);
}
/* =========================================================
Reduced motion
========================================================= */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
.card { transition: none; }
.card:hover { transform: none; }
/* keep a static, pleasant look */
.drop, .flake { opacity: .9; transform: none; }
.bolt { opacity: 1; }
.stormy .flash-overlay { opacity: 0; }
.sunny-icon .rays { transform: rotate(22deg); }
}
</style>
</head>
<body>
<header class="page-head">
<h1>Weather Cards</h1>
<p>Four animated forecasts — built entirely with HTML & CSS. No JavaScript, no images, no SVG.</p>
<span class="badge">Pure CSS · Animated</span>
</header>
<main class="cards">
<!-- ============ SUNNY ============ -->
<article class="card sunny" tabindex="0" aria-label="Sunny weather in Lisbon, 28 degrees">
<span class="blob b1"></span>
<span class="blob b2"></span>
<div class="card__top">
<div>
<h2 class="city">Lisbon</h2>
<p class="meta">Portugal</p>
</div>
<span class="chip">Sunny</span>
</div>
<div class="icon-stage">
<div class="sunny-icon" aria-hidden="true">
<span class="rays">
<span class="ray" style="transform:rotate(0deg) translateY(-52px)"></span>
<span class="ray" style="transform:rotate(45deg) translateY(-52px)"></span>
<span class="ray" style="transform:rotate(90deg) translateY(-52px)"></span>
<span class="ray" style="transform:rotate(135deg) translateY(-52px)"></span>
<span class="ray" style="transform:rotate(180deg) translateY(-52px)"></span>
<span class="ray" style="transform:rotate(225deg) translateY(-52px)"></span>
<span class="ray" style="transform:rotate(270deg) translateY(-52px)"></span>
<span class="ray" style="transform:rotate(315deg) translateY(-52px)"></span>
</span>
<span class="core"></span>
</div>
</div>
<div class="card__bottom">
<p class="temp">28<span class="deg">°C</span></p>
<p class="desc">Golden sunshine and clear blue skies all day long.</p>
<div class="stats">
<span class="stat">Humidity<b>38%</b></span>
<span class="stat">Wind<b>9 km/h</b></span>
<span class="stat">UV<b>High</b></span>
</div>
</div>
</article>
<!-- ============ RAINY ============ -->
<article class="card rainy" tabindex="0" aria-label="Rainy weather in Seattle, 14 degrees">
<span class="blob b1"></span>
<span class="blob b2"></span>
<div class="card__top">
<div>
<h2 class="city">Seattle</h2>
<p class="meta">USA</p>
</div>
<span class="chip">Rainy</span>
</div>
<div class="icon-stage">
<div class="rainy-icon" aria-hidden="true">
<span class="cloud"></span>
<span class="drops">
<span class="drop" style="left:12%; animation-delay:0s"></span>
<span class="drop" style="left:22%; animation-delay:.25s"></span>
<span class="drop" style="left:32%; animation-delay:.5s"></span>
<span class="drop" style="left:42%; animation-delay:.1s"></span>
<span class="drop" style="left:52%; animation-delay:.62s"></span>
<span class="drop" style="left:62%; animation-delay:.35s"></span>
<span class="drop" style="left:72%; animation-delay:.78s"></span>
<span class="drop" style="left:82%; animation-delay:.18s"></span>
<span class="drop" style="left:90%; animation-delay:.55s"></span>
</span>
</div>
</div>
<div class="card__bottom">
<p class="temp">14<span class="deg">°C</span></p>
<p class="desc">Steady drizzle with passing showers this afternoon.</p>
<div class="stats">
<span class="stat">Humidity<b>92%</b></span>
<span class="stat">Wind<b>18 km/h</b></span>
<span class="stat">Rain<b>78%</b></span>
</div>
</div>
</article>
<!-- ============ SNOWY ============ -->
<article class="card snowy" tabindex="0" aria-label="Snowy weather in Reykjavik, minus 3 degrees">
<span class="blob b1"></span>
<span class="blob b2"></span>
<div class="card__top">
<div>
<h2 class="city">Reykjavik</h2>
<p class="meta">Iceland</p>
</div>
<span class="chip">Snowy</span>
</div>
<div class="icon-stage">
<div class="snowy-icon" aria-hidden="true">
<span class="cloud"></span>
<span class="flakes">
<span class="flake" style="left:10%; animation-duration:3.2s; animation-delay:0s;"></span>
<span class="flake" style="left:20%; animation-duration:4.1s; animation-delay:.6s; width:7px; height:7px;"></span>
<span class="flake" style="left:30%; animation-duration:2.8s; animation-delay:1.2s;"></span>
<span class="flake" style="left:40%; animation-duration:3.6s; animation-delay:.3s; width:6px; height:6px;"></span>
<span class="flake" style="left:50%; animation-duration:4.4s; animation-delay:1.7s;"></span>
<span class="flake" style="left:60%; animation-duration:3.0s; animation-delay:.9s; width:7px; height:7px;"></span>
<span class="flake" style="left:70%; animation-duration:3.9s; animation-delay:.2s;"></span>
<span class="flake" style="left:80%; animation-duration:3.3s; animation-delay:1.4s; width:6px; height:6px;"></span>
<span class="flake" style="left:90%; animation-duration:4.2s; animation-delay:.7s;"></span>
</span>
</div>
</div>
<div class="card__bottom">
<p class="temp">-3<span class="deg">°C</span></p>
<p class="desc">Light snow falling, gentle drifts on the streets.</p>
<div class="stats">
<span class="stat">Humidity<b>81%</b></span>
<span class="stat">Wind<b>12 km/h</b></span>
<span class="stat">Snow<b>64%</b></span>
</div>
</div>
</article>
<!-- ============ STORMY ============ -->
<article class="card stormy" tabindex="0" aria-label="Stormy weather in Sydney, 19 degrees">
<span class="blob b1"></span>
<span class="blob b2"></span>
<span class="flash-overlay" aria-hidden="true"></span>
<div class="card__top">
<div>
<h2 class="city">Sydney</h2>
<p class="meta">Australia</p>
</div>
<span class="chip">Stormy</span>
</div>
<div class="icon-stage">
<div class="stormy-icon" aria-hidden="true">
<span class="cloud"></span>
<span class="rain">
<span class="drop" style="left:18%; animation-delay:0s"></span>
<span class="drop" style="left:30%; animation-delay:.4s"></span>
<span class="drop" style="left:64%; animation-delay:.15s"></span>
<span class="drop" style="left:76%; animation-delay:.6s"></span>
</span>
<span class="bolt"></span>
</div>
</div>
<div class="card__bottom">
<p class="temp">19<span class="deg">°C</span></p>
<p class="desc">Thunderstorms rolling in, with sudden bright flashes.</p>
<div class="stats">
<span class="stat">Humidity<b>86%</b></span>
<span class="stat">Wind<b>34 km/h</b></span>
<span class="stat">Storms<b>Alerts</b></span>
</div>
</div>
</article>
</main>
</body>
</html>