MiniMax M3.1 Flash
by MiniMaxReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 2 min 39 s
- Cost
- $0.0073
- Output tokens
- 12,028
- Spent thinking
- 4,630 tokens
- Speed
- 76.8 tok/s
- Console errors
- 0
- First token after
- 2.0 s
- First visible text after
- 1 min 45 s
- Prompt tokens
- 668
- Code size
- 22.8 KB
- Finish reason
- stop
- Served by
- Together
- Model id
minimax/minimax-m3.1-flash- Reasoning sent
{"effort":"high"}- 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 · 866 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Four Weather Moods</title>
<style>
:root {
color-scheme: dark;
--ink: #f8fbff;
--muted: rgba(255, 255, 255, 0.72);
--line: rgba(255, 255, 255, 0.16);
--shadow: 0 24px 55px rgba(3, 8, 20, 0.32);
}
* {
box-sizing: border-box;
}
html {
min-height: 100%;
background: #0b1020;
}
body {
margin: 0;
min-height: 100vh;
color: var(--ink);
font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background:
radial-gradient(circle at 8% 4%, rgba(87, 112, 255, 0.16), transparent 30%),
radial-gradient(circle at 94% 18%, rgba(255, 126, 172, 0.11), transparent 28%),
linear-gradient(155deg, #0d1428 0%, #0a0f1d 55%, #070b15 100%);
padding: 38px 28px 46px;
}
.page {
width: min(1220px, 100%);
margin: 0 auto;
}
.header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 30px;
margin-bottom: 28px;
}
.kicker {
display: inline-flex;
align-items: center;
gap: 9px;
margin-bottom: 10px;
color: #aebcff;
font-size: 0.73rem;
font-weight: 800;
letter-spacing: 0.19em;
text-transform: uppercase;
}
.live-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #7cf1bc;
box-shadow: 0 0 0 5px rgba(124, 241, 188, 0.1), 0 0 14px rgba(124, 241, 188, 0.7);
animation: livePulse 2s ease-in-out infinite;
}
h1 {
margin: 0;
font-size: clamp(2rem, 4vw, 3.25rem);
line-height: 1.05;
letter-spacing: -0.055em;
font-weight: 780;
}
h1 span {
color: #aebcff;
}
.subtitle {
margin: 12px 0 0;
color: var(--muted);
font-size: 0.98rem;
letter-spacing: 0.01em;
}
.status {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 11px;
padding: 11px 15px;
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(255, 255, 255, 0.055);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.78);
font-size: 0.78rem;
font-weight: 650;
}
.status-symbol {
position: relative;
width: 17px;
height: 17px;
border: 1.5px solid #aebcff;
border-radius: 50%;
}
.status-symbol::before {
content: "";
position: absolute;
left: 7px;
top: 2px;
width: 1.5px;
height: 8px;
background: #aebcff;
border-radius: 2px;
transform-origin: bottom;
animation: clockHand 4s linear infinite;
}
.status-symbol::after {
content: "";
position: absolute;
left: 4px;
top: 6px;
width: 6px;
height: 1.5px;
background: #aebcff;
border-radius: 2px;
transform-origin: left;
animation: clockHour 12s linear infinite;
}
.weather-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.weather-card {
position: relative;
isolation: isolate;
overflow: hidden;
min-width: 0;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 26px;
box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.2);
transform: translateY(0);
transition: transform 300ms cubic-bezier(0.2, 0.75, 0.25, 1),
box-shadow 300ms ease,
border-color 300ms ease;
}
.weather-card:hover {
transform: translateY(-10px);
border-color: rgba(255, 255, 255, 0.32);
box-shadow: 0 35px 70px rgba(3, 8, 20, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.sunny {
background: linear-gradient(155deg, #ffb347 0%, #f47745 48%, #c83f6e 100%);
}
.rainy {
background: linear-gradient(155deg, #4a9bc6 0%, #286391 48%, #172f52 100%);
}
.snowy {
background: linear-gradient(155deg, #a6c8e2 0%, #7496bd 48%, #405f8b 100%);
}
.stormy {
background: linear-gradient(155deg, #5a527b 0%, #353250 47%, #171928 100%);
}
.art {
position: relative;
height: 190px;
overflow: hidden;
}
.art::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}
.sunny .art::before {
background: radial-gradient(circle at 50% 48%, rgba(255, 248, 188, 0.5), transparent 42%);
animation: sunnyGlow 4s ease-in-out infinite;
}
.rainy .art::before {
background:
radial-gradient(ellipse at 50% 110%, rgba(117, 209, 239, 0.3), transparent 42%),
linear-gradient(110deg, transparent 45%, rgba(255, 255, 255, 0.06) 50%, transparent 55%);
}
.snowy .art::before {
background:
radial-gradient(circle at 15% 25%, rgba(255, 255, 255, 0.26), transparent 2px, transparent 3px),
radial-gradient(circle at 80% 16%, rgba(255, 255, 255, 0.3), transparent 2px, transparent 3px),
radial-gradient(ellipse at 50% 110%, rgba(255, 255, 255, 0.5), transparent 46%);
background-size: 71px 63px, 93px 87px, auto;
animation: snowDust 12s linear infinite;
}
.stormy .art::before {
background: radial-gradient(ellipse at 50% 105%, rgba(130, 139, 190, 0.2), transparent 45%);
animation: stormFlash 4.2s ease-in-out infinite;
}
.art-label {
position: absolute;
z-index: 5;
top: 17px;
left: 18px;
padding: 6px 10px;
border: 1px solid rgba(255, 255, 255, 0.24);
border-radius: 999px;
background: rgba(10, 20, 38, 0.18);
backdrop-filter: blur(8px);
color: rgba(255, 255, 255, 0.88);
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.art-number {
position: absolute;
z-index: 2;
right: 17px;
top: 13px;
color: rgba(255, 255, 255, 0.33);
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.12em;
}
.icon-stage {
position: absolute;
inset: 0;
z-index: 2;
}
/* Sun icon */
.sun-wrap {
position: absolute;
width: 132px;
height: 132px;
left: 50%;
top: 50%;
transform: translate(-50%, -47%);
}
.sun-rays {
position: absolute;
inset: 0;
border-radius: 50%;
animation: rotateRays 14s linear infinite;
}
.ray {
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 21px;
margin: -10.5px 0 0 -3px;
border-radius: 999px;
background: linear-gradient(#fffbd1, #ffe27c);
box-shadow: 0 0 11px rgba(255, 231, 113, 0.65);
transform: rotate(calc(var(--i) * 45deg)) translateY(-46px);
transform-origin: center;
}
.sun-core {
position: absolute;
left: 50%;
top: 50%;
width: 59px;
height: 59px;
margin: -29.5px 0 0 -29.5px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #fffde8 0%, #ffe77d 42%, #ffbd38 100%);
box-shadow: 0 0 24px rgba(255, 222, 97, 0.78), 0 0 58px rgba(255, 182, 58, 0.4);
animation: sunPulse 3.4s ease-in-out infinite;
}
/* Shared CSS cloud */
.cloud {
position: absolute;
z-index: 3;
left: 50%;
top: 35px;
width: 106px;
height: 39px;
margin-left: -53px;
border-radius: 26px;
background: var(--cloud, #eaf6ff);
box-shadow: 0 9px 20px rgba(10, 30, 55, 0.16), inset 0 -4px 8px rgba(38, 93, 135, 0.09);
animation: cloudFloat 4.6s ease-in-out infinite;
}
.cloud::before,
.cloud::after {
content: "";
position: absolute;
border-radius: 50%;
background: var(--cloud, #eaf6ff);
}
.cloud::before {
width: 51px;
height: 51px;
left: 11px;
bottom: 3px;
}
.cloud::after {
width: 43px;
height: 43px;
right: 10px;
bottom: 4px;
}
/* Rain icon */
.rainy .cloud {
--cloud: linear-gradient(#f8fdff, #d8eefb);
}
.rainy .cloud::before,
.rainy .cloud::after {
background: #eaf6ff;
}
.drops {
position: absolute;
inset: 0;
z-index: 2;
}
.drop {
position: absolute;
top: 80px;
width: 6px;
height: 15px;
border-radius: 65% 65% 65% 65% / 90% 90% 45% 45%;
background: linear-gradient(#d7f8ff, #62c8ef);
box-shadow: 0 0 7px rgba(117, 217, 255, 0.45);
animation: rainFall var(--dur) linear infinite;
animation-delay: var(--delay);
}
.drop:nth-child(1) { left: 33%; --delay: -0.15s; --dur: 1.05s; }
.drop:nth-child(2) { left: 41%; --delay: -0.72s; --dur: 1.22s; }
.drop:nth-child(3) { left: 49%; --delay: -0.38s; --dur: 1.1s; }
.drop:nth-child(4) { left: 57%; --delay: -0.9s; --dur: 1.18s; }
.drop:nth-child(5) { left: 64%; --delay: -0.52s; --dur: 1.08s; }
/* Snow icon */
.snowy .cloud {
--cloud: linear-gradient(#ffffff, #e7f2fb);
}
.snowy .cloud::before,
.snowy .cloud::after {
background: #f4f9ff;
}
.flakes {
position: absolute;
inset: 0;
z-index: 2;
}
.flake {
position: absolute;
top: 83px;
left: var(--left);
width: 14px;
height: 14px;
border-radius: 50%;
background:
linear-gradient(45deg, transparent 43%, #ffffff 44% 56%, transparent 57%),
linear-gradient(-45deg, transparent 43%, #ffffff 44% 56%, transparent 57%);
filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.7));
animation: snowFall var(--dur) ease-in-out infinite;
animation-delay: var(--delay);
}
.flake::before {
content: "";
position: absolute;
left: 50%;
top: 0;
width: 2px;
height: 100%;
margin-left: -1px;
border-radius: 2px;
background: #ffffff;
}
.flake::after {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 2px;
margin-top: -1px;
border-radius: 2px;
background: #ffffff;
}
.flake:nth-child(1) { --left: 29%; --delay: -0.4s; --dur: 5.8s; }
.flake:nth-child(2) { --left: 39%; --delay: -2.6s; --dur: 6.7s; }
.flake:nth-child(3) { --left: 48%; --delay: -1.4s; --dur: 5.2s; }
.flake:nth-child(4) { --left: 57%; --delay: -4.2s; --dur: 7.1s; }
.flake:nth-child(5) { --left: 66%; --delay: -3.1s; --dur: 6.2s; }
.flake:nth-child(6) { --left: 73%; --delay: -0.9s; --dur: 7.5s; }
/* Storm icon */
.stormy .cloud {
--cloud: linear-gradient(#77748e, #44445d);
}
.stormy .cloud::before,
.stormy .cloud::after {
background: #5d5b73;
}
.bolt {
position: absolute;
z-index: 4;
top: 86px;
left: 50%;
width: 47px;
height: 78px;
margin-left: -23.5px;
background: linear-gradient(150deg, #fff5a3, #ffc83d 55%, #ff8d35);
clip-path: polygon(59% 0, 18% 53%, 45% 53%, 29% 100%, 83% 42%, 55% 42%, 72% 0);
filter: drop-shadow(0 0 13px rgba(255, 212, 76, 0.88));
animation: flash 3.6s ease-in-out infinite;
}
.stormy .cloud {
animation: cloudFloat 4.6s ease-in-out infinite, stormShake 6s ease-in-out infinite;
}
/* Card information */
.card-content {
position: relative;
z-index: 3;
min-height: 224px;
padding: 22px 22px 20px;
border-top: 1px solid rgba(255, 255, 255, 0.15);
background: linear-gradient(180deg, rgba(8, 15, 31, 0.07), rgba(8, 15, 31, 0.32));
backdrop-filter: blur(5px);
}
.topline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.city {
margin: 0;
font-size: 1.22rem;
font-weight: 760;
letter-spacing: -0.025em;
}
.condition {
padding: 5px 9px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 999px;
background: rgba(255, 255, 255, 0.11);
color: rgba(255, 255, 255, 0.84);
font-size: 0.64rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
}
.temperature-row {
display: flex;
align-items: flex-end;
gap: 12px;
margin-top: 12px;
}
.temperature {
font-size: 3.55rem;
line-height: 0.95;
font-weight: 720;
letter-spacing: -0.075em;
text-shadow: 0 3px 18px rgba(7, 15, 30, 0.2);
}
.feels {
padding-bottom: 5px;
color: rgba(255, 255, 255, 0.72);
font-size: 0.73rem;
font-weight: 600;
}
.description {
min-height: 38px;
margin: 13px 0 0;
color: rgba(255, 255, 255, 0.79);
font-size: 0.84rem;
line-height: 1.48;
}
.stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 17px;
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.stat {
display: flex;
flex-direction: column;
gap: 3px;
}
.stat small {
color: rgba(255, 255, 255, 0.56);
font-size: 0.61rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.stat strong {
font-size: 0.82rem;
font-weight: 720;
letter-spacing: 0.01em;
}
@keyframes rotateRays {
to { transform: rotate(360deg); }
}
@keyframes sunPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}
@keyframes sunnyGlow {
0%, 100% { opacity: 0.78; }
50% { opacity: 1; }
}
@keyframes cloudFloat {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-4px); }
}
@keyframes rainFall {
0% { opacity: 0; transform: translateY(-12px) rotate(8deg); }
18% { opacity: 0.95; }
80% { opacity: 0.85; }
100% { opacity: 0; transform: translateY(70px) rotate(8deg); }
}
@keyframes snowFall {
0% { opacity: 0; transform: translate3d(0, -9px, 0) rotate(0deg); }
15% { opacity: 1; }
50% { transform: translate3d(9px, 31px, 0) rotate(135deg); }
85% { opacity: 0.9; }
100% { opacity: 0; transform: translate3d(-7px, 72px, 0) rotate(300deg); }
}
@keyframes flash {
0%, 5%, 13%, 100% { opacity: 0.3; }
6% { opacity: 1; }
7% { opacity: 0.38; }
8% { opacity: 1; }
10% { opacity: 0.42; }
11% { opacity: 0.95; }
}
@keyframes stormFlash {
0%, 5%, 13%, 100% { filter: brightness(1); }
6% { filter: brightness(1.35); }
7% { filter: brightness(1); }
8% { filter: brightness(1.2); }
}
@keyframes stormShake {
0%, 88%, 100% { transform: translateX(-50%) translateY(0); }
90% { transform: translateX(-52%) translateY(-1px); }
92% { transform: translateX(-48%) translateY(0); }
94% { transform: translateX(-51%) translateY(1px); }
96% { transform: translateX(-50%) translateY(0); }
}
@keyframes snowDust {
0% { background-position: 0 0, 0 0, 0 0; }
100% { background-position: 71px 63px, -93px 87px, 0 0; }
}
@keyframes livePulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(0.72); opacity: 0.55; }
}
@keyframes clockHand {
to { transform: rotate(360deg); }
}
@keyframes clockHour {
to { transform: rotate(360deg); }
}
@media (max-width: 1040px) {
.weather-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 620px) {
body {
padding: 26px 16px 34px;
}
.header {
align-items: flex-start;
flex-direction: column;
gap: 18px;
margin-bottom: 22px;
}
.weather-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.status {
padding: 9px 13px;
}
.art {
height: 178px;
}
.card-content {
min-height: 0;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
.sun-rays,
.live-dot,
.status-symbol::before,
.status-symbol::after {
animation: none !important;
}
.sun-rays {
transform: rotate(22deg);
}
.rainy .drop {
animation: none !important;
opacity: 0.9;
top: 88px;
}
.rainy .drop:nth-child(2),
.rainy .drop:nth-child(4) {
top: 102px;
}
.snowy .flake {
animation: none !important;
opacity: 0.95;
top: 96px;
}
.snowy .flake:nth-child(2),
.snowy .flake:nth-child(5) {
top: 116px;
}
.stormy .bolt {
animation: none !important;
opacity: 1;
}
}
</style>
</head>
<body>
<main class="page">
<header class="header">
<div>
<div class="kicker">
<span class="live-dot" aria-hidden="true"></span>
Sky conditions
</div>
<h1>Weather, <span>in four moods.</span></h1>
<p class="subtitle">A little atmosphere for every kind of day.</p>
</div>
<div class="status" aria-label="Forecast updated moments ago">
<span class="status-symbol" aria-hidden="true"></span>
Updated moments ago
</div>
</header>
<section class="weather-grid" aria-label="Current weather in four cities">
<article class="weather-card sunny" aria-label="Sunny weather in Lisbon, 24 degrees">
<div class="art">
<span class="art-label">Golden hour</span>
<span class="art-number">01</span>
<div class="icon-stage" aria-hidden="true">
<div class="sun-wrap">
<div class="sun-rays">
<span class="ray" style="--i: 0"></span>
<span class="ray" style="--i: 1"></span>
<span class="ray" style="--i: 2"></span>
<span class="ray" style="--i: 3"></span>
<span class="ray" style="--i: 4"></span>
<span class="ray" style="--i: 5"></span>
<span class="ray" style="--i: 6"></span>
<span class="ray" style="--i: 7"></span>
</div>
<div class="sun-core"></div>
</div>
</div>
</div>
<div class="card-content">
<div class="topline">
<h2 class="city">Lisbon</h2>
<span class="condition">Sunny</span>
</div>
<div class="temperature-row">
<span class="temperature">24°</span>
<span class="feels">Feels like 25°</span>
</div>
<p class="description">Golden skies, warm light, and a soft breeze drifting in from the coast.</p>
<div class="stats">
<div class="stat"><small>Humidity</small><strong>38%</strong></div>
<div class="stat"><small>Wind</small><strong>12 km/h</strong></div>
</div>
</div>
</article>
<article class="weather-card rainy" aria-label="Rainy weather in Seattle, 16 degrees">
<div class="art">
<span class="art-label">Soft drizzle</span>
<span class="art-number">02</span>
<div class="icon-stage" aria-hidden="true">
<div class="cloud"></div>
<div class="drops">
<span class="drop"></span>
<span class="drop"></span>
<span class="drop"></span>
<span class="drop"></span>
<span class="drop"></span>
</div>
</div>
</div>
<div class="card-content">
<div class="topline">
<h2 class="city">Seattle</h2>
<span class="condition">Rainy</span>
</div>
<div class="temperature-row">
<span class="temperature">16°</span>
<span class="feels">Feels like 14°</span>
</div>
<p class="description">A gentle shower is passing through, with cool air and a quiet gray afternoon.</p>
<div class="stats">
<div class="stat"><small>Humidity</small><strong>86%</strong></div>
<div class="stat"><small>Wind</small><strong>18 km/h</strong></div>
</div>
</div>
</article>
<article class="weather-card snowy" aria-label="Snowy weather in Reykjavík, minus 3 degrees">
<div class="art">
<span class="art-label">Fresh snow</span>
<span class="art-number">03</span>
<div class="icon-stage" aria-hidden="true">
<div class="cloud"></div>
<div class="flakes">
<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>
</div>
<div class="card-content">
<div class="topline">
<h2 class="city">Reykjavík</h2>
<span class="condition">Snowy</span>
</div>
<div class="temperature-row">
<span class="temperature">−3°</span>
<span class="feels">Feels like −8°</span>
</div>
<p class="description">Soft flakes are drifting over the harbor, settling into the quiet northern streets.</p>
<div class="stats">
<div class="stat"><small>Humidity</small><strong>74%</strong></div>
<div class="stat"><small>Wind</small><strong>22 km/h</strong></div>
</div>
</div>
</article>
<article class="weather-card stormy" aria-label="Stormy weather in Singapore, 29 degrees">
<div class="art">
<span class="art-label">Thunderstorm</span>
<span class="art-number">04</span>
<div class="icon-stage" aria-hidden="true">
<div class="cloud"></div>
<div class="bolt"></div>
</div>
</div>
<div class="card-content">
<div class="topline">
<h2 class="city">Singapore</h2>
<span class="condition">Stormy</span>
</div>
<div class="temperature-row">
<span class="temperature">29°</span>
<span class="feels">Feels like 34°</span>
</div>
<p class="description">Heavy clouds gather overhead as a vivid lightning flash cuts across the evening sky.</p>
<div class="stats">
<div class="stat"><small>Humidity</small><strong>91%</strong></div>
<div class="stat"><small>Wind</small><strong>31 km/h</strong></div>
</div>
</div>
</article>
</section>
</main>
</body>
</html>Reasoning trace (4,630 tokens)
We need produce exactly one fenced html code block, no text. Need create beautiful four animated weather cards pure HTML CSS, no script, no images/svg. Icons built from HTML elements and pseudo-elements. Need carefully design.
We need ensure icons: sun rotating rays using divs/pseudo; rain drops falling; snow drifting; lightning flashing.
Need first paint meaningful, animations. Responsive grid 4 per row desktop, stacked mobile (375). Actually 375 width could stack one column. Nice gradient backgrounds matching.
Let's design page: background deep navy gradient, title "Weather, at a glance" maybe four cards. Each card has top icon zone and bottom content. Cards 260-ish tall. Use CSS custom props.
HTML:
main.app
header.eyebrow "LIVE SKY REPORT" title "Four moods of the sky" subtitle.
section.grid
article.card.sunny
div.scene.sunny-scene aria-hidden
div.sun
div.rays (span ray x8)
div.core
div.cloud? no
div.meta
div.city-row: h2 Lisbon, span badge "Clear"
div.temp 24°<span> C? Let's show 24°</span>
p.description "Golden skies and a gentle breeze."
maybe footer with small humidity.
Four cities: Lisbon 24° Sunny; Seattle 16° Rainy; Reykjavík -3° Snowy; Singapore 29° Thunderstorm / Stormy.
Card content with city, temp, description. Use badge. Background gradients:
sunny: linear-gradient(160deg,#ffb43f,#ff7a3d) plus accents
rainy: deep blue teal
snowy: pale lavender icy - but text dark? Keep consistency white text; snowy background soft #7f9fc4 -> #4a6d99. Add white top accents.
stormy: dark purple charcoal.
Icons:
Sun:
.sun-wrap position relative width 120 height 120; .sun-core absolute circle yellow glowing; .ray spans 8 absolutely centered with width 6 height 24 background yellow rounded; rotations via nth child transform translate? easier each ray style transform: rotate(Ndeg) translateY(-48px). Position ray top: 50%; left: 50%; margin-left:-3px; transform-origin: 50% 0? We want ray extends outward. Use span.ray {position:absolute; width:7px;height:22px;border-radius:99px;background:#fff3a3;top:50%;left:50%;margin:-11px 0 0 -3.5px;transform-origin:50% 11px; } each set --i and transform rotate(calc(var(--i)*45deg)) translateY(-38px). Since element center at center, translateY after rotate. margin centers. animation rotate 12s linear infinite on .rays container instead, all rays rotate together. Requirement rotating sun rays: animate .rays rotation. Core pulsing. Glow.
Rainy icon: cloud built with divs and pseudo-elements, drops spans falling. .cloud shape: a big rounded rectangle with ::before and ::after circles. Use .cloud {width:100px;height:38px;background:#e7f2ff;border-radius:24px;position:absolute;} ::before circle 48px at left 12 bottom 8; ::after circle 36px right 14 bottom 8. Color cloud gradient via background. Drops: 5 span absolute below cloud at various left positions, animation rain 1s linear infinite with delay. Use teardrop shape via border-radius: 50% 50% 50% 0? A raindrop: width 5 height 12 background #8fe3ff; border-radius: 60% 60% 60% 60% / 100% 100% 60% 60%; transform rotate(-45deg)? Simple rounded capsule works. Keyframes translateY(-12) to 42 opacity. Cloud bob.
Snowy: cloud and 6 snowflakes as text? No icon fonts but text characters "❄" would be font glyph, not icon font, but requirement every icon built from HTML elements and pseudo-elements. Better use div.snowflake with pseudo-elements for cross arms. Each snowflake div 14x14 with ::before horizontal line and ::after vertical line? Then diagonal too impossible with 2 pseudo + element itself. Use .snowflake span arms? Could have .flake div with background linear-gradients? That's CSS, no image. Use background: linear-gradient(45deg, transparent 42%, #fff 43% 57%, transparent 58%), linear-gradient(-45deg,...) making X, plus ::before and ::after for vertical/horizontal. Yes .flake {width:14;height:14;position:absolute;background: linear-gradient(45deg, transparent 43%,#fff 44% 56%,transparent 57%), linear-gradient(-45deg,...); animation drift}. Add box-shadow? Could use pseudo for vertical/horiz. Let's do .flake::before {content:"";position:absolute;left:50%;top:0;width:2px;height:100%;background:#fff;transform:translateX(-50%);} and ::after horizontal. Background X gives detail. Drift animation with translate and rotate and individual --x/--d delays. Use left positions.
Stormy: dark cloud and lightning bolt built purely CSS clip-path polygon. Requirement no SVG - CSS clip-path fine. div.bolt with polygon, flashing opacity/box-shadow animation. Could also use ::before for secondary? Use a bolt div clip-path.
Cloud styles each variant. Use shared .cloud with color variable --cloud. Cloud layered via pseudo elements. For storm maybe cloud dark gray.
Card visuals: scene top portion height ~180; content bottom. Card overflow hidden, before decorative blurred circles (radial gradients) for sun and snow etc. Cards lift hover transform translateY(-10px) rotateX? box shadow.
We want high polish. Page 1280x800. Header top, grid 4 cards each ~280 width. Overall fit 800 height. Header ~130, cards 440, margins. Good.
Let's structure card:
article.weather-card
div.art (height 190)
div.orbit? decorations
div.weather-icon...
div.card-content
div.card-head: h2 city, span.condition
div.temperature 24° <small>C</small>
p description
maybe divider and detail row "Humidity 42%" etc? Requirements only city temp desc. Additional stats could enhance but space. Use mini detail row with three items maybe "H 27° L 18°". We can include subtle chips. But keep.
Maybe art includes weather graphic large centered with sun/moon. Could add small sparkles.
Page background #0b1020 with radial gradient spots, grain via CSS? Noise impossible without image. Use gradients.
Use card background as each weather gradient. Need gradient each. Content translucent dark panel bottom. Each card:
sunny gradient linear-gradient(155deg,#ff9f43 0%,#f05c3e 52%,#c9376f 100%)
rainy linear-gradient(155deg,#3d8ebd,#22507f,#162f52)
snowy linear-gradient(155deg,#8fb6d8,#6589b4,#3f5f8a)
stormy linear-gradient(155deg,#4b456f,#2b2949,#151728)
Content can be dark glass overlay. For snowy card, lighter but glass dark enough.
Art backgrounds own gradients via card overall plus decorative pseudo.
Animations:
@keyframes spin, pulse, bob, rainFall, snowDrift, flash, twinkle, driftBg.
Sun rays container animation spin 14s linear infinite. Note reduced motion all animations none.
Rain drops animation using CSS variables --x? We'll set inline style in HTML for per-drop left and delay/duration. Inline styles allowed (no event handlers). Use style attributes. But maybe avoid lots of style? Fine. Could use nth-child CSS. Use nth-child for left/delay.
HTML pure.
Cloud layering:
.cloud {position:absolute; width:104px;height:38px;background:var(--cloud,#eaf4ff); border-radius:24px; top:30px;left:50%; transform:translateX(-50%); box-shadow...; z-index:2; animation: cloudFloat 4s ease-in-out infinite;}
.cloud::before {content:""; position:absolute; width:50px;height:50px;border-radius:50%;background:inherit; left:12px; bottom:4px;}
.cloud::after {width:42px;height:42px; right:12px; bottom:5px}
But inherit background with gradient and box shadow? inherit gets same gradient maybe odd. Use background: var(--cloud-solid,#dbeeff) and cloud background same. Let's define --cloud:#eef7ff; cloud background linear-gradient(#fff,var(--cloud))? pseudo must solid. Set background: var(--cloud); shadow. pseudo background inherit will inherit gradient - okay since inherit includes computed parent's background shorthand? background:inherit gives gradient. Circles gradient may show mismatch. use separate variable --cloud-pale. define both. cloud background var(--cloud); pseudo var(--cloud). Fine.
For rain drops, need art 180 tall. cloud top 30, drops start top ~88. .drop {top:82px; animation fall 1.1s}. But cloud bottom 68, drops good. keyframes translateY(-8) to 62. Use position absolute top:78px. opacity 0 start.
Rain animation loop: 0% opacity0 transform translateY(-14) scale(.8); 20% opacity1; 100% opacity0 translateY(56px). Individual delay -0.2 etc to continuous.
Snow cloud top 34, flakes top 88 fall to 140 but art is 175, fine. Use animation drift with transform translate3d. Position left percentages. animation duration 5-7s, delays negative.
Storm cloud top 26, bolt top 80. flash animation opacity sequence. Also storm cloud slight shake. Lightning bolt clip path: points (58% 0, 20% 52, 47% 52, 30% 100, 82% 42, 54% 42, 68% 0) perhaps. Use width 44 height 74 background #ffe066, filter drop-shadow.
Also storm scene flashes background via ::before? Card art::before animation stormFlash changing box shadow/background.
Sun scene maybe radial glow in icon: .sun-glow.
Pseudo-elements of card decorative.
Text:
header:
<div class="header">
<div class="kicker"><span class="live-dot"></span> Sky conditions</div>
<h1>Weather, <span>in four moods.</span></h1>
<p>Real-time cards for every kind of day.</p>
</div>
Maybe top right a chip "Updated moments ago" with decorative. Fit.
Layout container max-width 1240 padding 40 28. Grid gap 18.
Cards height maybe 440. .art 180. content 200. Description two lines. Detail row.
At 1280, grid 4 columns ~ (1224-54)/4=292. Good. Header title 42. Total: padding top 38 header 110 + gap 30 + cards 430 + bottom = 640? fits.
At 800 height good.
Card hover lift -10 and shadow. focus-within maybe but no interactive. transform on .weather-card. Hover on card.
Card art design maybe each has top-right weather index number "01" and bottom-left "sunny". Add .art-label pill.
Let's create specific art for sunny with sun at center maybe position 50% 52%. sun-wrap 122x122. Rays length.
.sun-rays {position:absolute; inset:0; animation:spin 14s linear infinite}
.ray {position:absolute; top:50%; left:50%; width:6px; height:20px; margin:-10px 0 0 -3px; border-radius:99px; background:#fff4a8; box-shadow:0 0 8px rgba(...); transform:rotate(calc(var(--i)*45deg)) translateY(-44px);}
Does transform-origin matter? With transform-origin center default, the element is centered at wrap center via margins and then rotation around its own center then translate. Rotation of element around its center doesn't affect translation direction? Transform functions apply right to left? In CSS transform list applied left-to-right? Matrix multiplication; rotate then translate effectively? Let's reason: transform: rotate(45deg) translateY(-44px) typically translate happens in rotated coordinates? CSS transforms applied from right to left in matrix? Common compass uses transform: rotate(angle) translateY(-radius) with transform-origin center; yes it works outward. margin centers. Fine.
Core circle 54x54 top 50 left 50 margin -27.
Bigger decorative halo.
Rainy art include puddle? maybe no.
Snowy art small ground drift at bottom using art::after border-radius white ellipse.
Stormy art has rain too? Requirement flashing lightning only enough. Could include small drizzle. Maybe storm icon with bolt.
Content card:
<div class=content>
<div class=topline><h2>...</h2><span class=badge>Sunny</span></div>
<div class=temp-row><span class=temp>24°</span><span class=feels>Feels like 25°</span></div>
<p>Golden light and a warm, gentle breeze.</p>
<div class=stats><div><small>Humidity</small><strong>42%</strong></div>... Hmm requirement temperature enough; stats could look like real card. Add 2 stats: "Wind 12 km/h" and "Humidity 38%" separated. But content gets taller. Fine.
Maybe temp row with huge 58px font. description. stats at bottom.
Cards each 430px: art 176, content padding 24 => temp 62 + desc 40 + stats 44 = ~200. total 376 + borders. Let's set no fixed height; grid stretch.
Add city flag? no.
Animations visible. Reduced motion media disables animations, transitions.
Potential issue "no images no SVG" satisfied. CSS gradient not image in terms of resource. no external.
No JS tag.
Need exact code fence only.
Let's craft CSS carefully.
Body margin 0, font-family system stack. background radial gradients fixed.
.header display flex justify between align end. Right .status with icon circle.
Grid: display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap 18px.
Media 1024 => 2 cols; 560=>1 col stacked. User says stacked on mobile. At 375 one col.
Cards overflow hidden; border 1px solid rgba white .16; border-radius 26; min-height 410; isolation isolate. box-shadow.
art height 190 position relative overflow hidden.
.art::before decorative radial overlay.
For sunny card .art::before background radial gradient(circle at 50% 48%, rgba(255,240,170,.35), transparent 60%); animation? glow pulse.
art::after maybe bottom haze.
Cloud icons all centered but art label overlay top 16 left 18.
Scene indexing top-right.
Icon positions:
.icon-stage position:absolute inset:0.
Sun .sun-wrap top:50%; left:50%; transform translate(-50%,-46%); width 132 height 132.
Rays. Core.
Cloud rain .cloud top 36.
drops.
Need icon for rainy be center maybe cloud at 36 and drops. Art 190. Fine.
Snowy cloud top 34, snowflakes top 84.
Stormy cloud top 32, bolt top 88.
Colors.
CSS animations:
@keyframes rotateRays {to {transform:rotate(360deg)}}
@keyframes sunPulse {0%,100% {transform:scale(1);box-shadow:...} 50% {transform:scale(1.08)}}
@keyframes cloudFloat {0,100%{transform:translateX(-50%) translateY(0)}50%{... -4px}}
For cloud animation transform includes translateX. Good.
drop fall transform translateY. Since drop is absolute left set. transform includes rotate? keyframes rotate maybe. Use translateY only; shape already.
nth-child positions:
.drop:nth-child(1){left:34%; --delay:-.1s; --dur:1.05s}
2 left 43% -0.55; etc. But HTML child indexes only drops if separate container. Put .drops container, spans.
.drops {position:absolute; inset:0;} .drop position:absolute top:80px; width 6 height 14; border-radius: 60% 60% 60% 60% / 90% 90% 45% 45%; background linear-gradient(#bff0ff,#63c9f5); animation rainFall var(--dur) linear infinite; animation-delay var(--delay); transform:rotate(8deg) maybe keyframes overrides. Could use translate + skew: keyframes transform: translateY(-12px) rotate(8deg). Good.
snowflake .flakes spans. top 80. keyframe snowFall: 0 translate3d(0,-10px) rotate(0) opacity0; 15% opacity1; 50% translate3d(10px,28px) rotate(120deg); 85% translate3d(-8px,60px) rotate(240); 100 opacity0 translate3d(4px,76px) rotate(360). Different x via --sway in keyframe can't multiply? calc(var(--sway)*...) maybe. Use per nth set --sway and keyframes transform: translateX(var(--sway)) etc. Simpler keyframe with translate 8 then -6 consistent. Per flake left differs. animation-delay negative values so already falling at load.
Bolt animation flash 3.2s infinite: 0,8,12,100 opacity .35 maybe; 9% opacity1; 10% .4; 11%1; 13%. Use filter. Also bolt slight scale.
@keyframes flash {0%,6%,13%,100%{opacity:.28; filter: drop-shadow(0 0 2px rgba)} 7%{opacity:1} 8%{opacity:.4} 9%{opacity:1} 11%{opacity:.3}}
storm .art::before maybe flash overlay animation background opacity.
Art background layer with ::before for each card:
.weather-card.sunny .art::before {background:radial-gradient(...); animation:sunnyGlow 4s}
For ::before set content ""; inset 0; pointer events.
Pseudo z-index maybe 0. icon z-index 2. labels z 3.
Weather card ::after? We use art pseudo.
Card overall background gradient. Add background blend.
Sun card might need content text. Fine.
Stats: .stats display grid grid-template-columns 1fr 1fr; border-top 1px solid; padding-top 14; margin-top 16. Each stat small uppercase, strong. Maybe add small dot icon? no.
Header decorative CSS cloud? no need.
Live dot pulse animation.
Reduced motion:
@media (prefers-reduced-motion: reduce) {
*,*::before,*::after {animation-duration:0.001ms!important;animation-iteration-count:1!important;transition-duration:0.001ms!important;scroll-behavior:auto!important;}
.sun-rays {transform:rotate(20deg)}
}
But with animation duration tiny and one iteration it resets. okay. Also drops might appear opacity 0 because keyframe ends opacity0. Requirement respect reduced motion, static icons should be visible. Need specific reduced styles to place raindrops visible, snowflakes visible, bolt opacity1, sun rays rotation none. Set:
.rain .drop {animation:none;opacity:.85; top:88px} nth different top maybe.
.snow .flake {animation:none;opacity:.9;top:95px}
.storm .bolt {animation:none;opacity:1}
.sun-rays animation none.
.live-dot animation none.
Also hover transitions okay disabled.
Responsive: at max-width 1040 grid 2; at max-width 600 grid 1; header column. At 375, cards min-height maybe 400. body padding 18. title font 34.
First paint at 3 sec animations visible.
Need ensure no horizontal scroll due transforms.
Let's write HTML with spans.
Accessibility: role img? aria-hidden icons. article aria-label maybe.
Could include time.
No JS.
Let's ensure card condition badge icons built CSS? badge just text.
Potential issue icon clouds are rectangles + circles overlapping, order: pseudo before/after default stack after element? ::before and ::after children render before/after content but positioned. Cloud element background rectangle, circles with bottom maybe make cloud. circles same background and overlap. Cloud top 36, pseudo bottom 2, size 48 => top = 36+38-48-2=24. Good.
Rainy cloud gradient color #eaf6ff. shadow.
Sun label etc.
Let's formulate final.
Should title maybe "WEATHER CARDS" plus heading. We can add small overline.
Styling detail: card content background rgba(9,15,30,.24) with backdrop blur 14; border-top. But gradient should remain obvious. Use background linear-gradient(180deg, rgba(9,16,35,.08), rgba(9,16,35,.34)). Fine.
Each card distinct gradients. Snowy one maybe lighter, content dark panel with rgba(22,42,72,.35).
Typography.
Let's produce exactly code block.