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: 19.4 s
Cost: $0.010
Output tokens: 6,776
Spent thinking: 4,567 tokens
Speed: 364.1 tok/s
Console errors: 0

First token after: 815 ms
First visible text after: 14.3 s
Prompt tokens: 508
Code size: 6.7 KB
Finish reason: stop
Served by: Google
Model id: google/gemini-3.1-flash-lite
Reasoning sent: {"effort":"high"}
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 · 209 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 Demo</title>
    <style>
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f0f2f5;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

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

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

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

        .card h2 { margin-bottom: 5px; font-size: 1.5rem; }
        .card .temp { font-size: 2.5rem; font-weight: bold; margin: 10px 0; }
        .card .desc { font-size: 1.1rem; opacity: 0.9; }

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

        /* Weather Colors */
        .sunny { background: linear-gradient(135deg, #FFD200, #F7941E); }
        .rainy { background: linear-gradient(135deg, #4facfe, #00f2fe); }
        .snowy { background: linear-gradient(135deg, #a1c4fd, #c2e9fb); }
        .stormy { background: linear-gradient(135deg, #434343, #000000); }

        /* Icons */
        .sun {
            width: 50px; height: 50px;
            background: #fff500;
            border-radius: 50%;
            position: relative;
        }
        .sun-ray {
            position: absolute;
            width: 6px; height: 15px;
            background: #fff500;
            border-radius: 3px;
            left: 22px; top: -20px;
            transform-origin: 3px 45px;
        }

        .cloud {
            width: 80px; height: 30px;
            background: #fff;
            border-radius: 15px;
            position: relative;
        }
        .cloud::before, .cloud::after {
            content: '';
            position: absolute;
            background: #fff;
            border-radius: 50%;
        }
        .cloud::before { width: 40px; height: 40px; top: -20px; left: 10px; }
        .cloud::after { width: 50px; height: 50px; top: -30px; left: 30px; }

        .drop {
            position: absolute;
            width: 4px; height: 10px;
            background: rgba(255,255,255,0.6);
            border-radius: 2px;
            top: 40px;
        }

        .flake {
            position: absolute;
            width: 8px; height: 8px;
            background: white;
            border-radius: 50%;
            top: 40px;
        }

        .lightning {
            position: absolute;
            width: 20px; height: 30px;
            background: #FFD200;
            clip-path: polygon(50% 0%, 100% 50%, 60% 50%, 100% 100%, 0% 50%, 40% 50%);
            top: 40px;
        }

        /* Animations */
        @media (prefers-reduced-motion: no-preference) {
            .sun { animation: rotate 10s linear infinite; }
            .rainy .drop { animation: drop 1.5s linear infinite; }
            .snowy .flake { animation: flake 3s linear infinite; }
            .stormy .lightning { animation: flash 2s infinite; }
        }

        @keyframes rotate { 100% { transform: rotate(360deg); } }
        @keyframes drop {
            0% { transform: translateY(0); opacity: 0; }
            50% { opacity: 1; }
            100% { transform: translateY(40px); opacity: 0; }
        }
        @keyframes flake {
            0% { transform: translateY(0) translateX(0); }
            50% { transform: translateY(30px) translateX(10px); }
            100% { transform: translateY(60px) translateX(0); }
        }
        @keyframes flash {
            0%, 10%, 20%, 30%, 100% { opacity: 0; }
            5%, 15%, 25% { opacity: 1; }
        }

    </style>
</head>
<body>

<div class="container">
    <!-- Sunny -->
    <div class="card sunny">
        <div class="icon-box">
            <div class="sun">
                <div class="sun-ray" style="transform: rotate(0deg);"></div>
                <div class="sun-ray" style="transform: rotate(45deg);"></div>
                <div class="sun-ray" style="transform: rotate(90deg);"></div>
                <div class="sun-ray" style="transform: rotate(135deg);"></div>
                <div class="sun-ray" style="transform: rotate(180deg);"></div>
                <div class="sun-ray" style="transform: rotate(225deg);"></div>
                <div class="sun-ray" style="transform: rotate(270deg);"></div>
                <div class="sun-ray" style="transform: rotate(315deg);"></div>
            </div>
        </div>
        <h2>Los Angeles</h2>
        <div class="temp">28°C</div>
        <p class="desc">Sunny</p>
    </div>

    <!-- Rainy -->
    <div class="card rainy">
        <div class="icon-box">
            <div class="cloud"></div>
            <div class="drop" style="left: 20px; animation-delay: 0s;"></div>
            <div class="drop" style="left: 40px; animation-delay: 0.5s;"></div>
            <div class="drop" style="left: 60px; animation-delay: 0.2s;"></div>
        </div>
        <h2>Seattle</h2>
        <div class="temp">12°C</div>
        <p class="desc">Showers</p>
    </div>

    <!-- Snowy -->
    <div class="card snowy">
        <div class="icon-box">
            <div class="cloud" style="background: #eef;"></div>
            <div class="flake" style="left: 25px; animation-delay: 0s;"></div>
            <div class="flake" style="left: 45px; animation-delay: 1.5s;"></div>
            <div class="flake" style="left: 65px; animation-delay: 0.8s;"></div>
        </div>
        <h2>Oslo</h2>
        <div class="temp">-5°C</div>
        <p class="desc">Snowing</p>
    </div>

    <!-- Stormy -->
    <div class="card stormy">
        <div class="icon-box">
            <div class="cloud" style="background: #555;"></div>
            <div class="lightning"></div>
        </div>
        <h2>London</h2>
        <div class="temp">10°C</div>
        <p class="desc">Thunder</p>
    </div>
</div>

</body>
</html>

Reasoning trace (4,567 tokens)

**Crafting Weather Icons**

I'm currently deep in the process of designing animated weather icons using only CSS shapes. The focus is on achieving distinct visual representations for sunny, rainy, snowy, and stormy conditions without any external assets or scripts.

**Designing Animated Weather Icons**

I'm refining the CSS animations for the weather icons, ensuring smooth, infinite loops for the rotating sun, falling rain, snow, and lightning flashes. My current focus is on integrating these animations with the responsive grid layout and the subtle hover lift effect for each card.

**Refining Animation Transitions**

I'm fine-tuning the CSS transitions for the weather icons, specifically focusing on the fluidity of the sun's rotation and the subtle bounce of raindrops. I'm also experimenting with different gradient backgrounds for each icon's card.

**Developing Sunny Icon**

I'm currently working on the HTML structure and initial CSS for the sunny weather icon. My focus is on creating the sun shape with rays using nested divs and potentially pseudo-elements to achieve the circular form and emanating light.

**Simulating Weather Phenomena**

I'm implementing the CSS for the rainy icon, focusing on cloud and drop elements, and experimenting with `clip-path` for the lightning in the stormy icon. I'm also refining the keyframes for rotation and drop animations, ensuring the grid remains responsive.

**Adding Motion Effects**

I'm currently focused on integrating the `prefers-reduced-motion` media query to ensure the animations are accessible. I'm also experimenting with subtle parallax effects for the backgrounds of each weather icon to add depth.

**Considering Accessibility**

I'm integrating the `prefers-reduced-motion` media query and exploring parallax effects for added depth. I'm also noting the need for fixed icon container heights to prevent layout shifts during animations.

**Refining CSS Elements**

I'm integrating the `prefers-reduced-motion` query for accessibility and exploring parallax for background depth. I've also noted the need for fixed container heights to prevent layout shifts during animations. The cloud shape is now taking shape with pseudo-elements.

**Implementing Redundant Motion**

I'm refining the `prefers-reduced-motion` handling to ensure animations are completely disabled when requested. I'm also implementing multiple rain drops with staggered `animation-delay` for a more natural effect.

**Finalizing Icon Structure**

I've consolidated all icons into a single HTML file, using distinct divs for sunny, rainy, snowy, and stormy cards. I'm proceeding with `clip-path` for the lightning effect, deeming it a standard and robust solution.

**Finalizing Animation Logic**

I'm focusing on the precise timing for the storm's lightning flash and ensuring the staggered delays for multiple raindrops are natural. The base cloud shape is now established for all relevant icons.

**Adding Dynamic Elements**

I'm integrating the lightning bolt using `clip-path` and have refined the HTML structure to include city information. I've decided to use explicit divs for sun rays for clarity.

**Finalizing Layout Structure**

I'm now focused on the details of the city name, temperature, and description display within the icon cards. I'm also ensuring that the "no text before or after" rule for the final output is respected.

**Enforcing Output Constraints**

I've reviewed the content and confirmed that the final output will strictly adhere to the "no text before or after" requirement. All necessary elements for display are now in place.

**Composing Final Output**

I've finished assembling all components, including the dynamic weather elements and informational text. My current task is to ensure the final output precisely matches the requested format.

**Styling Visual Elements**

I'm applying gradient backgrounds to each card, using specific color palettes to represent different weather conditions, and have adjusted the stormy gradient to be darker with a hint of blue. I've also confirmed the use of system fonts to avoid external requests and addressed the `prefers-reduced-motion` implementation for animation control.

**Validating Layout Constraints**

I'm currently reviewing the viewport adaptation, ensuring graceful scaling down to 375px. I've also implemented a `max-width` and `margin: auto` on the main container to optimize the 1280px display. All icons are confirmed to be built solely with HTML and CSS.

**Completing Visuals**

I'm confirming the CSS keyframes for the lightning flash and ensuring the staggered delays for raindrops create a natural feel. The base cloud shape is now finalized across all relevant icons.