Gemma 4 31B

by Googlereasoning defaultClean

Running live in a sandboxed frame. Click inside it before using the keyboard.

How it went

Total time: 23.7 s
Cost: $0.0011
Output tokens: 3,219
Spent thinking: 0 tokens
Speed: 138.7 tok/s
Console errors: 0

First token after: 524 ms
First visible text after: 524 ms
Prompt tokens: 526
Code size: 10.0 KB
Finish reason: stop
Served by: CoreWeave
Model id: google/gemma-4-31b-it
Reasoning sent: model default
Max output: 16,384 tokens
Generated: Nov 13, 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 · 329 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-Only Weather Cards</title>
    <style>
        :root {
            --bg-color: #f0f2f5;
            --card-bg-sunny: linear-gradient(135deg, #ffce00, #ff8c00);
            --card-bg-rainy: linear-gradient(135deg, #4b6cb7, #18284c);
            --card-bg-snowy: linear-gradient(135deg, #83a4d4, #b6fbff);
            --card-bg-stormy: linear-gradient(135deg, #2c3e50, #000000);
            --text-main: #ffffff;
            --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        body {
            margin: 0;
            padding: 40px 20px;
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background-color: var(--bg-color);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            box-sizing: border-box;
        }

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

        @media (max-width: 1024px) {
            .container { grid-template-columns: repeat(2, 1fr); }
        }

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

        .card {
            position: relative;
            border-radius: 24px;
            padding: 30px;
            color: var(--text-main);
            text-align: center;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            transition: var(--transition);
            cursor: default;
            overflow: hidden;
            min-height: 320px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

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

        /* Card Specific Colors */
        .sunny { background: var(--card-bg-sunny); }
        .rainy { background: var(--card-bg-rainy); }
        .snowy { background: var(--card-bg-snowy); }
        .stormy { background: var(--card-bg-stormy); }

        .city {
            font-size: 1.5rem;
            font-weight: 700;
            margin: 0;
            opacity: 0.9;
        }

        .temp {
            font-size: 3.5rem;
            font-weight: 800;
            margin: 10px 0;
        }

        .desc {
            font-size: 1.1rem;
            font-weight: 300;
            opacity: 0.8;
        }

        /* --- Icon Base --- */
        .icon-box {
            position: relative;
            height: 120px;
            width: 120px;
            margin: 0 auto 20px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* --- Sunny Icon --- */
        .sun {
            position: relative;
            width: 50px;
            height: 50px;
            background: #fff700;
            border-radius: 50%;
            box-shadow: 0 0 20px #fff700;
            animation: pulse 2s ease-in-out infinite;
        }
        .sun::before, .sun::after {
            content: '';
            position: absolute;
            top: -10px; left: -10px; right: -10px; bottom: -10px;
            border: 2px solid #fff700;
            border-radius: 50%;
            animation: rotate 10s linear infinite;
        }
        .sun::before {
            border-style: dashed;
            transform: scale(1.2);
        }
        .sun::after {
            border-style: dotted;
            transform: scale(1.4);
            animation-duration: 15s;
            animation-direction: reverse;
        }

        /* --- Rainy Icon --- */
        .cloud-rain {
            position: relative;
            width: 60px;
            height: 30px;
            background: #ecf0f1;
            border-radius: 20px;
        }
        .cloud-rain::after {
            content: '';
            position: absolute;
            top: -15px; left: 15px;
            width: 30px; height: 20px;
            background: #ecf0f1;
            border-radius: 20px 20px 0 0;
        }
        .rain-drops {
            position: absolute;
            top: 35px; left: 10px; right: 10px;
            height: 40px;
        }
        .drop {
            position: absolute;
            width: 3px; height: 12px;
            background: #a5c9ff;
            border-radius: 2px;
            animation: fall linear infinite;
        }
        .drop:nth-child(1) { left: 20%; animation-delay: 0.1s; }
        .drop:nth-child(2) { left: 40%; animation-delay: 0.3s; }
        .drop:nth-child(3) { left: 60%; animation-delay: 0.2s; }
        .drop:nth-child(4) { left: 80%; animation-delay: 0.4s; }

        /* --- Snowy Icon --- */
        .cloud-snow {
            position: relative;
            width: 60px;
            height: 30px;
            background: #fff;
            border-radius: 20px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        }
        .cloud-snow::after {
            content: '';
            position: absolute;
            top: -15px; left: 15px;
            width: 30px; height: 20px;
            background: #fff;
            border-radius: 20px 20px 0 0;
        }
        .snow-flakes {
            position: absolute;
            top: 35px; left: 0; right: 0;
            height: 50px;
        }
        .flake {
            position: absolute;
            width: 6px; height: 6px;
            background: #fff;
            border-radius: 50%;
            animation: drift linear infinite;
        }
        .flake:nth-child(1) { left: 20%; animation-delay: 0s; }
        .flake:nth-child(2) { left: 40%; animation-delay: 0.5s; }
        .flake:nth-child(3) { left: 60%; animation-delay: 0.2s; }
        .flake:nth-child(4) { left: 80%; animation-delay: 0.8s; }

        /* --- Stormy Icon --- */
        .cloud-storm {
            position: relative;
            width: 60px;
            height: 30px;
            background: #444;
            border-radius: 20px;
        }
        .cloud-storm::after {
            content: '';
            position: absolute;
            top: -15px; left: 15px;
            width: 30px; height: 20px;
            background: #444;
            border-radius: 20px 20px 0 0;
        }
        .bolt {
            position: absolute;
            top: 35px; left: 25px;
            width: 10px; height: 30px;
            background: #ffeb3b;
            clip-path: polygon(100% 0%, 0% 50%, 100% 50%, 0% 100%);
            animation: flash 1.5s infinite;
            box-shadow: 0 0 15px #ffeb3b;
        }

        /* --- Animations --- */
        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.1); opacity: 0.9; }
        }

        @keyframes fall {
            0% { transform: translateY(0); opacity: 0; }
            20% { opacity: 1; }
            100% { transform: translateY(40px); opacity: 0; }
        }

        @keyframes drift {
            0% { transform: translateY(0) translateX(0); opacity: 0; }
            20% { opacity: 1; }
            100% { transform: translateY(40px) translateX(10px); opacity: 0; }
        }

        @keyframes flash {
            0%, 10%, 20%, 30%, 40%, 50%, 60%, 100% { opacity: 0; transform: scale(0.8); }
            11%, 21%, 51% { opacity: 1; transform: scale(1.1); }
        }

        @media (prefers-reduced-motion: reduce) {
            .sun::before, .sun::after, .drop, .flake, .bolt {
                animation: none !important;
            }
            .card {
                transition: none !important;
            }
        }
    </style>
</head>
<body>

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

        <!-- Rainy Card -->
        <div class="card rainy">
            <div class="icon-box">
                <div class="cloud-rain"></div>
                <div class="rain-drops">
                    <div class="drop" style="animation-duration: 0.8s;"></div>
                    <div class="drop" style="animation-duration: 0.6s;"></div>
                    <div class="drop" style="animation-duration: 0.7s;"></div>
                    <div class="drop" style="animation-duration: 0.9s;"></div>
                </div>
            </div>
            <div>
                <p class="city">London</p>
                <p class="temp">14°C</p>
                <p class="desc">Light Rain</p>
            </div>
        </div>

        <!-- Snowy Card -->
        <div class="card snowy">
            <div class="icon-box">
                <div class="cloud-snow"></div>
                <div class="snow-flakes">
                    <div class="flake" style="animation-duration: 2s;"></div>
                    <div class="flake" style="animation-duration: 2.5s;"></div>
                    <div class="flake" style="animation-duration: 1.8s;"></div>
                    <div class="flake" style="animation-duration: 2.2s;"></div>
                </div>
            </div>
            <div>
                <p class="city">Hokkaido</p>
                <p class="temp">-5°C</p>
                <p class="desc">Heavy Snow</p>
            </div>
        </div>

        <!-- Stormy Card -->
        <div class="card stormy">
            <div class="icon-box">
                <div class="cloud-storm"></div>
                <div class="bolt"></div>
            </div>
            <div>
                <p class="city">Miami</p>
                <p class="temp">26°C</p>
                <p class="desc">Thunderstorm</p>
            </div>
        </div>
    </div>

</body>
</html>