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.5 s
Cost: $0.0028
Output tokens: 1,764
Spent thinking: 0 tokens
Speed: 429.3 tok/s
Console errors: 0

First token after: 426 ms
First visible text after: 426 ms
Prompt tokens: 508
Code size: 4.8 KB
Finish reason: stop
Served by: Google
Model id: google/gemini-3.1-flash-lite
Reasoning sent: model default
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 · 91 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: 240px;
        }
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--bg); display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; padding: 20px; }
        .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1100px; width: 100%; }
        @media (max-width: 1024px) { .grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }
        
        .card { background: white; border-radius: 20px; padding: 20px; text-align: center; box-shadow: 0 10px 20px rgba(0,0,0,0.1); transition: transform 0.3s ease; position: relative; overflow: hidden; }
        .card:hover { transform: translateY(-10px); }
        
        .icon-container { height: 120px; display: flex; justify-content: center; align-items: center; margin-bottom: 15px; position: relative; }
        
        /* Sun */
        .sun { width: 50px; height: 50px; background: #ffce54; border-radius: 50%; box-shadow: 0 0 20px #ffce54; position: relative; }
        .sun::after { content: ''; position: absolute; top: -15px; left: -15px; right: -15px; bottom: -15px; border: 2px dashed #ffce54; border-radius: 50%; animation: rotate 10s linear infinite; }
        
        /* Rain */
        .rain { width: 50px; height: 50px; background: #aab2bd; border-radius: 50% 50% 10% 50%; transform: rotate(-45deg); position: relative; }
        .drop { position: absolute; width: 4px; height: 10px; background: #4fc1e9; top: 60px; border-radius: 50%; animation: fall 1s linear infinite; }
        .drop:nth-child(2) { left: 15px; animation-delay: 0.3s; }
        .drop:nth-child(3) { left: 35px; animation-delay: 0.6s; }

        /* Snow */
        .snow { width: 50px; height: 50px; background: #e6e9ed; border-radius: 50%; box-shadow: 0 0 10px #fff; }
        .flake { position: absolute; width: 8px; height: 8px; background: white; border-radius: 50%; top: 50px; animation: drift 3s linear infinite; }
        .flake:nth-child(2) { left: 10px; animation-delay: 1s; }
        .flake:nth-child(3) { left: 30px; animation-delay: 2s; }

        /* Storm */
        .storm { width: 60px; height: 40px; background: #434a54; border-radius: 20px; position: relative; }
        .bolt { position: absolute; width: 10px; height: 20px; background: #ffce54; clip-path: polygon(0 0, 100% 0, 40% 50%, 100% 100%, 0 100%, 60% 50%); bottom: -30px; left: 25px; animation: flash 2s infinite; }

        @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        @keyframes fall { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(50px); opacity: 0; } }
        @keyframes drift { 0% { transform: translateY(0) translateX(0); } 50% { transform: translateY(25px) translateX(10px); } 100% { transform: translateY(50px) translateX(0); opacity: 0; } }
        @keyframes flash { 0%, 10%, 20% { opacity: 0; } 15% { opacity: 1; } }

        @media (prefers-reduced-motion: reduce) { 
            .sun::after, .drop, .flake, .bolt { animation: none !important; }
        }

        h2 { margin: 10px 0 5px; color: #333; }
        .temp { font-size: 24px; font-weight: bold; color: #555; }
        .desc { color: #888; font-style: italic; }
        
        .c1 { background: linear-gradient(to bottom, #fff9c4, #fff); }
        .c2 { background: linear-gradient(to bottom, #e1f5fe, #fff); }
        .c3 { background: linear-gradient(to bottom, #eceff1, #fff); }
        .c4 { background: linear-gradient(to bottom, #cfd8dc, #fff); }
    </style>
</head>
<body>

<div class="grid">
    <div class="card c1">
        <div class="icon-container"><div class="sun"></div></div>
        <h2>Tokyo</h2>
        <div class="temp">28°C</div>
        <div class="desc">Sunny</div>
    </div>
    <div class="card c2">
        <div class="icon-container"><div class="rain"></div><div class="drop"></div><div class="drop"></div><div class="drop"></div></div>
        <h2>London</h2>
        <div class="temp">15°C</div>
        <div class="desc">Rainy</div>
    </div>
    <div class="card c3">
        <div class="icon-container"><div class="snow"></div><div class="flake"></div><div class="flake"></div><div class="flake"></div></div>
        <h2>Oslo</h2>
        <div class="temp">-5°C</div>
        <div class="desc">Snowy</div>
    </div>
    <div class="card c4">
        <div class="icon-container"><div class="storm"></div><div class="bolt"></div></div>
        <h2>Miami</h2>
        <div class="temp">22°C</div>
        <div class="desc">Stormy</div>
    </div>
</div>

</body>
</html>