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: 6.4 s
Cost: $0.0038
Output tokens: 2,430
Spent thinking: 477 tokens
Speed: 448.6 tok/s
Console errors: 0

First token after: 958 ms
First visible text after: 2.0 s
Prompt tokens: 508
Code size: 5.6 KB
Finish reason: stop
Served by: Google
Model id: google/gemini-3.1-flash-lite
Reasoning sent: {"effort":"medium"}
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 · 143 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        :root {
            --sunny: linear-gradient(135deg, #ffd700, #ff8c00);
            --rainy: linear-gradient(135deg, #4a90e2, #2c3e50);
            --snowy: linear-gradient(135deg, #e0f7fa, #b2ebf2);
            --stormy: linear-gradient(135deg, #2c3e50, #4b0082);
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 2rem;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f2f5;
        }

        .container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            width: 100%;
            max-width: 1200px;
        }

        @media (max-width: 1024px) { .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;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

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

        .icon-box {
            width: 120px;
            height: 120px;
            margin-bottom: 1.5rem;
            position: relative;
        }

        .city { font-size: 1.5rem; font-weight: bold; margin: 0; }
        .temp { font-size: 2.5rem; margin: 0.5rem 0; }
        .desc { color: #666; }

        /* SUNNY */
        .card.sunny { background: var(--sunny); color: white; }
        .sun { width: 60px; height: 60px; background: #fff700; border-radius: 50%; position: absolute; top: 30px; left: 30px; box-shadow: 0 0 20px #fff700; }
        .sun::before, .sun::after { content: ''; position: absolute; width: 80px; height: 10px; background: #fff700; top: 25px; left: -10px; border-radius: 5px; }
        .sun::after { transform: rotate(90deg); }
        @media (prefers-reduced-motion: no-preference) {
            .sun { animation: rotate 10s linear infinite; }
        }
        @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

        /* RAINY */
        .card.rainy { background: var(--rainy); color: white; }
        .cloud { width: 80px; height: 50px; background: white; border-radius: 25px; position: absolute; top: 20px; left: 20px; }
        .drop { position: absolute; width: 4px; height: 15px; background: #aadaff; border-radius: 2px; animation: rain 1s linear infinite; }
        .drop:nth-child(2) { left: 30px; animation-delay: 0.2s; }
        .drop:nth-child(3) { left: 50px; animation-delay: 0.5s; }
        @keyframes rain { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(60px); opacity: 0; } }

        /* SNOWY */
        .card.snowy { background: var(--snowy); color: #333; }
        .snowflake { position: absolute; width: 10px; height: 10px; background: white; border-radius: 50%; animation: snow 3s linear infinite; }
        .snowflake:nth-child(2) { left: 40px; animation-delay: 1s; }
        .snowflake:nth-child(3) { left: 70px; animation-delay: 2s; }
        @keyframes snow { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(80px) rotate(360deg); } }

        /* STORMY */
        .card.stormy { background: var(--stormy); color: white; }
        .bolt { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 40px solid #ffeb3b; position: absolute; left: 40px; top: 30px; animation: flash 2s infinite; }
        @keyframes flash { 0%, 90%, 95% { opacity: 1; } 92.5%, 97.5% { opacity: 0; } }
    </style>
</head>
<body>

    <div class="container">
        <!-- Sunny -->
        <div class="card sunny">
            <div class="icon-box"><div class="sun"></div></div>
            <h2 class="city">Los Angeles</h2>
            <p class="temp">28°C</p>
            <p class="desc">Sunny</p>
        </div>

        <!-- Rainy -->
        <div class="card rainy">
            <div class="icon-box">
                <div class="cloud"></div>
                <div class="drop" style="top: 70px; left: 20px;"></div>
                <div class="drop" style="top: 70px; left: 45px;"></div>
                <div class="drop" style="top: 70px; left: 70px;"></div>
            </div>
            <h2 class="city">London</h2>
            <p class="temp">12°C</p>
            <p class="desc">Rainy</p>
        </div>

        <!-- Snowy -->
        <div class="card snowy">
            <div class="icon-box">
                <div class="snowflake" style="top: 20px; left: 20px;"></div>
                <div class="snowflake" style="top: 30px; left: 40px;"></div>
                <div class="snowflake" style="top: 25px; left: 60px;"></div>
            </div>
            <h2 class="city">Oslo</h2>
            <p class="temp">-5°C</p>
            <p class="desc">Snowy</p>
        </div>

        <!-- Stormy -->
        <div class="card stormy">
            <div class="icon-box"><div class="bolt"></div></div>
            <h2 class="city">Miami</h2>
            <p class="temp">22°C</p>
            <p class="desc">Stormy</p>
        </div>
    </div>

</body>
</html>

Reasoning trace (477 tokens)

**Designing Weather Cards**

I'm focused on building four distinct weather cards: Sunny, Rainy, Snowy, and Stormy. The challenge lies in achieving responsiveness and interactive hover effects purely through CSS keyframes, without any JavaScript or external image assets.

**Crafting Icon Animations**

I'm currently refining the CSS animations for each weather icon. Specifically, I'm experimenting with a rotating ray effect for the sun and exploring how to create falling raindrops and snowflakes using only div and pseudo-element structures. The goal is to ensure seamless animation through keyframes.