Gemini 3.1 Flash Lite

by GoogleReasoningClean

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

How it went

Total time: 4.4 s
Cost: $0.0026
Output tokens: 1,663
Spent thinking: 0 tokens
Speed: 435.4 tok/s
Console errors: 0

First token after: 581 ms
First visible text after: 581 ms
Prompt tokens: 508
Code size: 4.5 KB
Finish reason: stop
Served by: Google
Model id: google/gemini-3.1-flash-lite
Reasoning sent: {"effort":"none"}
Max output: 65,536 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 · 107 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 CSS Only</title>
    <style>
        :root {
            --bg: #f0f2f5;
            --card-w: 260px;
        }
        body {
            font-family: 'Segoe UI', system-ui, sans-serif;
            background: var(--bg);
            display: flex;
            justify-content: center;
            padding: 2rem;
            margin: 0;
        }
        .container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            max-width: 1200px;
            width: 100%;
        }
        @media (max-width: 1100px) { .container { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 600px) { .container { grid-template-columns: 1fr; } }

        .card {
            background: white;
            border-radius: 20px;
            padding: 2rem;
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .card:hover { transform: translateY(-10px); box-shadow: 0 20px 30px rgba(0,0,0,0.15); }

        .icon-box { height: 120px; width: 120px; position: relative; margin-bottom: 20px; }
        
        /* Sun */
        .sun { width: 50px; height: 50px; background: #ffce00; border-radius: 50%; position: absolute; top: 35px; left: 35px; box-shadow: 0 0 20px #ffce00; }
        .sun::before, .sun::after { content: ''; position: absolute; width: 60px; height: 10px; background: #ffce00; border-radius: 5px; top: 20px; left: -5px; }
        .sun::after { transform: rotate(90deg); }
        .sunny-bg { background: linear-gradient(135deg, #fff3b0, #ffcc33); }

        /* Rain */
        .rain { width: 60px; height: 40px; background: #999; border-radius: 20px; position: absolute; top: 40px; left: 30px; }
        .drop { position: absolute; width: 4px; height: 10px; background: #4a90e2; border-radius: 2px; animation: rain 1s infinite linear; }
        .rain-bg { background: linear-gradient(135deg, #cfd9df, #607d8b); }

        /* Snow */
        .snowflake { position: absolute; width: 8px; height: 8px; background: white; border-radius: 50%; animation: snow 3s infinite linear; }
        .snow-bg { background: linear-gradient(135deg, #e0f7fa, #80deea); }

        /* Storm */
        .storm { width: 60px; height: 60px; background: #444; clip-path: polygon(50% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%); position: absolute; top: 30px; left: 30px; }
        .bolt { position: absolute; width: 10px; height: 30px; background: #ffeb3b; left: 55px; top: 50px; clip-path: polygon(100% 0%, 0% 60%, 40% 60%, 0% 100%, 100% 40%, 60% 40%); animation: flash 2s infinite; }
        .storm-bg { background: linear-gradient(135deg, #2c3e50, #000000); color: white; }

        @keyframes rain { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(50px); opacity: 0; } }
        @keyframes snow { 0% { transform: translateY(0); } 100% { transform: translateY(80px); } }
        @keyframes flash { 0%, 90%, 95% { opacity: 0; } 92% { opacity: 1; } }
        @media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
    </style>
</head>
<body>

<div class="container">
    <div class="card sunny-bg">
        <div class="icon-box"><div class="sun"></div></div>
        <h3>Los Angeles</h3>
        <p>28°C - Sunny</p>
    </div>
    <div class="card rain-bg">
        <div class="icon-box">
            <div class="rain"></div>
            <div class="drop" style="left: 40px; top: 80px;"></div>
            <div class="drop" style="left: 70px; top: 80px; animation-delay: 0.3s;"></div>
        </div>
        <h3>London</h3>
        <p>14°C - Rainy</p>
    </div>
    <div class="card snow-bg">
        <div class="icon-box">
            <div class="snowflake" style="left: 20px; animation-delay: 0s;"></div>
            <div class="snowflake" style="left: 60px; animation-delay: 1s;"></div>
            <div class="snowflake" style="left: 100px; animation-delay: 2s;"></div>
        </div>
        <h3>Oslo</h3>
        <p>-5°C - Snowy</p>
    </div>
    <div class="card storm-bg">
        <div class="icon-box"><div class="storm"></div><div class="bolt"></div></div>
        <h3>Tokyo</h3>
        <p>22°C - Stormy</p>
    </div>
</div>

</body>
</html>