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.0 s
Cost: $0.0024
Output tokens: 1,532
Spent thinking: 0 tokens
Speed: 425.1 tok/s
Console errors: 0

First token after: 405 ms
First visible text after: 405 ms
Prompt tokens: 508
Code size: 4.3 KB
Finish reason: stop
Served by: Google
Model id: google/gemini-3.1-flash-lite
Reasoning sent: {"effort":"minimal"}
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 · 117 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</title>
    <style>
        :root {
            --bg-sunny: linear-gradient(135deg, #ffd200, #f7941e);
            --bg-rainy: linear-gradient(135deg, #4facfe, #00f2fe);
            --bg-snowy: linear-gradient(135deg, #e0eafc, #cfdef3);
            --bg-stormy: linear-gradient(135deg, #434343, #000000);
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f0f2f5;
            display: flex;
            justify-content: center;
            padding: 20px;
            margin: 0;
        }

        .container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            width: 100%;
            max-width: 1100px;
        }

        .card {
            background: white;
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            text-align: center;
            overflow: hidden;
        }

        .card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 30px rgba(0,0,0,0.2);
        }

        .icon-container {
            height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
        }

        /* Weather Base Styles */
        .card-sunny { background: var(--bg-sunny); color: white; }
        .card-rainy { background: var(--bg-rainy); color: white; }
        .card-snowy { background: var(--bg-snowy); color: #333; }
        .card-stormy { background: var(--bg-stormy); color: white; }

        /* Icons */
        .sun { width: 60px; height: 60px; background: #fff800; border-radius: 50%; position: relative; box-shadow: 0 0 20px #fff800; animation: rotate 10s linear infinite; }
        .sun::after { content: ''; position: absolute; top: -15px; left: 28px; width: 4px; height: 15px; background: #fff800; box-shadow: 0 90px #fff800, 45px 45px 90deg #fff800, -45px 45px 90deg #fff800; }
        
        .rain { position: relative; width: 50px; height: 50px; }
        .rain::before { content: '||||'; font-size: 20px; color: #fff; animation: drop 1s linear infinite; }
        
        .snow { position: relative; width: 50px; height: 50px; }
        .snow::before { content: '❄'; font-size: 30px; color: white; animation: drift 3s linear infinite; }

        .storm { width: 50px; height: 50px; background: #fff; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); animation: flash 2s infinite; }

        @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        @keyframes drop { 0% { transform: translateY(-20px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(40px); opacity: 0; } }
        @keyframes drift { 0% { transform: translateY(-20px) rotate(0deg); } 100% { transform: translateY(40px) rotate(360deg); } }
        @keyframes flash { 0%, 90%, 100% { opacity: 1; } 95% { opacity: 0; } }

        @media (prefers-reduced-motion: reduce) {
            .sun, .rain::before, .snow::before, .storm { animation: none; }
        }

        h2 { margin: 10px 0 5px; }
        p { margin: 0; opacity: 0.9; }
        .temp { font-size: 2rem; font-weight: bold; margin: 10px 0; }
    </style>
</head>
<body>

<div class="container">
    <div class="card card-sunny">
        <div class="icon-container"><div class="sun"></div></div>
        <h2>Sunny</h2>
        <div class="temp">28°C</div>
        <p>Los Angeles</p>
    </div>
    <div class="card card-rainy">
        <div class="icon-container"><div class="rain"></div></div>
        <h2>Rainy</h2>
        <div class="temp">16°C</div>
        <p>Seattle</p>
    </div>
    <div class="card card-snowy">
        <div class="icon-container"><div class="snow"></div></div>
        <h2>Snowy</h2>
        <div class="temp">-5°C</div>
        <p>Oslo</p>
    </div>
    <div class="card card-stormy">
        <div class="icon-container"><div class="storm"></div></div>
        <h2>Stormy</h2>
        <div class="temp">20°C</div>
        <p>Miami</p>
    </div>
</div>

</body>
</html>