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: 5.7 s
Cost: $0.0034
Output tokens: 2,186
Spent thinking: 122 tokens
Speed: 458.5 tok/s
Console errors: 0

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

Download

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Weather Cards</title>
    <style>
        :root {
            --bg-body: #f0f2f5;
            --card-width: 240px;
            --text-color: #333;
            --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            --transition: 0.3s ease;
        }

        body {
            font-family: var(--font-family);
            background-color: var(--bg-body);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            padding: 20px;
            box-sizing: border-box;
        }

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

        @media (max-width: 1080px) {
            .container { grid-template-columns: repeat(2, var(--card-width)); }
        }

        @media (max-width: 580px) {
            .container { grid-template-columns: 1fr; width: 100%; }
        }

        .card {
            background: white;
            border-radius: 20px;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            transition: transform var(--transition), box-shadow var(--transition);
            overflow: hidden;
            position: relative;
            cursor: default;
        }

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

        /* Weather specific backgrounds */
        .sunny { background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%); }
        .rainy { background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); }
        .snowy { background: linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%); }
        .stormy { background: linear-gradient(135deg, #434343 0%, #000000 100%); color: white; }

        /* Icon Container */
        .icon-box {
            width: 100px;
            height: 100px;
            position: relative;
            margin-bottom: 20px;
        }

        /* Sunny Icon */
        .sun {
            width: 50px;
            height: 50px;
            background: #FFD700;
            border-radius: 50%;
            position: absolute;
            top: 25px;
            left: 25px;
            box-shadow: 0 0 20px #FFD700;
        }
        .sun::after {
            content: '';
            position: absolute;
            top: -15px; left: -15px; right: -15px; bottom: -15px;
            border: 4px dashed #FFD700;
            border-radius: 50%;
            animation: rotate 10s linear infinite;
        }

        /* Rainy Icon */
        .cloud-main {
            width: 60px;
            height: 40px;
            background: #fff;
            border-radius: 20px;
            position: absolute;
            top: 20px; left: 20px;
        }
        .rain-drop {
            width: 4px;
            height: 10px;
            background: #3498db;
            position: absolute;
            top: 60px;
            border-radius: 2px;
            animation: rain 1s linear infinite;
        }

        /* Snowy Icon */
        .snowflake {
            position: absolute;
            background: white;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            top: 0;
            animation: snow 3s linear infinite;
        }

        /* Stormy Icon */
        .bolt {
            width: 40px; height: 60px;
            background: #FFD700;
            clip-path: polygon(50% 0%, 100% 50%, 60% 50%, 100% 100%, 0% 40%, 40% 40%);
            margin: 20px auto;
            animation: flash 2s infinite;
        }

        /* Info Styling */
        h2 { margin: 0; font-size: 1.2rem; }
        .temp { font-size: 2rem; font-weight: bold; margin: 5px 0; }
        .desc { font-size: 0.9rem; opacity: 0.8; }

        /* Animations */
        @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        
        @keyframes rain {
            0% { transform: translateY(0); opacity: 0; }
            50% { opacity: 1; }
            100% { transform: translateY(40px); opacity: 0; }
        }

        @keyframes snow {
            0% { transform: translateY(0) rotate(0deg); opacity: 0; }
            20% { opacity: 1; }
            100% { transform: translateY(80px) rotate(360deg); opacity: 0; }
        }

        @keyframes flash {
            0%, 5%, 10% { opacity: 1; }
            2%, 7% { opacity: 0; }
        }

        @media (prefers-reduced-motion: reduce) {
            * { animation: none !important; }
        }
    </style>
</head>
<body>

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

        <!-- Rainy -->
        <div class="card rainy">
            <div class="icon-box">
                <div class="cloud-main"></div>
                <div class="rain-drop" style="left: 30px; animation-delay: 0s;"></div>
                <div class="rain-drop" style="left: 50px; animation-delay: 0.3s;"></div>
                <div class="rain-drop" style="left: 70px; animation-delay: 0.6s;"></div>
            </div>
            <h2>London</h2>
            <div class="temp">14°C</div>
            <div class="desc">Light Rain</div>
        </div>

        <!-- Snowy -->
        <div class="card snowy">
            <div class="icon-box">
                <div class="snowflake" style="left: 20px; animation-delay: 0s;"></div>
                <div class="snowflake" style="left: 45px; animation-delay: 1s;"></div>
                <div class="snowflake" style="left: 70px; animation-delay: 2s;"></div>
            </div>
            <h2>Oslo</h2>
            <div class="temp">-3°C</div>
            <div class="desc">Heavy Snow</div>
        </div>

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

</body>
</html>