Gemini 3.8 Flash

by GoogleReasoningClean

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

How it went

Total time: 27.2 s
Cost: $0.019
Output tokens: 5,010
Spent thinking: 0 tokens
Speed: 192.3 tok/s
Console errors: 0

First token after: 1.2 s
First visible text after: 1.2 s
Prompt tokens: 508
Code size: 13.2 KB
Finish reason: stop
Served by: Google
Model id: google/gemini-3.8-flash
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 · 534 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pure CSS Animated Weather Cards</title>
  <style>
    /* Reset & Base Styles */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      min-height: 100vh;
      background: radial-gradient(circle at 50% 10%, #1e2638 0%, #0d111a 100%);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      color: #ffffff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 2.5rem 1.5rem;
      overflow-x: hidden;
    }

    header {
      text-align: center;
      margin-bottom: 2.5rem;
    }

    header h1 {
      font-size: clamp(1.8rem, 4vw, 2.4rem);
      font-weight: 700;
      letter-spacing: -0.5px;
      margin-bottom: 0.5rem;
      background: linear-gradient(135deg, #ffffff 40%, #a5b4fc 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    header p {
      font-size: 0.95rem;
      color: #94a3b8;
      letter-spacing: 0.5px;
    }

    /* Weather Deck Grid */
    .weather-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      perspective: 1000px;
    }

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

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

    /* Individual Card Styles */
    .card {
      position: relative;
      border-radius: 1.5rem;
      padding: 2.2rem 1.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.4),
                  inset 0 1px 1px 0 rgba(255, 255, 255, 0.25);
      border: 1px solid rgba(255, 255, 255, 0.12);
      transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                  box-shadow 0.4s ease;
      cursor: default;
      overflow: hidden;
      min-height: 380px;
    }

    .card:hover {
      transform: translateY(-12px) scale(1.02);
      box-shadow: 0 24px 45px -12px rgba(0, 0, 0, 0.6),
                  inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
    }

    /* Card Background Themes */
    .card-sunny {
      background: linear-gradient(160deg, #ff7e40 0%, #ff5252 50%, #f53844 100%);
    }

    .card-rainy {
      background: linear-gradient(160deg, #3a7bd5 0%, #205493 50%, #173b6c 100%);
    }

    .card-snowy {
      background: linear-gradient(160deg, #8ba8cd 0%, #5d7a9e 50%, #3e536d 100%);
    }

    .card-stormy {
      background: linear-gradient(160deg, #4b3869 0%, #2b1f42 50%, #150e24 100%);
    }

    /* Icon Display Canvas */
    .icon-wrapper {
      position: relative;
      width: 140px;
      height: 140px;
      margin-bottom: 1.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Text Details */
    .temp {
      font-size: 3.2rem;
      font-weight: 300;
      line-height: 1;
      margin-bottom: 0.35rem;
      letter-spacing: -2px;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    .temp sup {
      font-size: 1.6rem;
      font-weight: 400;
      top: -0.8em;
      letter-spacing: 0;
    }

    .city {
      font-size: 1.25rem;
      font-weight: 600;
      margin-bottom: 0.35rem;
      letter-spacing: 0.2px;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    .condition {
      font-size: 0.88rem;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.85);
      text-transform: uppercase;
      letter-spacing: 1.2px;
    }

    /* ========================================================
       1. SUNNY ANIMATION
       ======================================================== */
    .sun-body {
      position: relative;
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, #fff3a1 0%, #fdb813 100%);
      border-radius: 50%;
      box-shadow: 0 0 28px #ffa502, 0 0 50px rgba(255, 165, 2, 0.4);
      z-index: 2;
    }

    .sun-rays {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      animation: spinRays 22s linear infinite;
    }

    .ray {
      position: absolute;
      top: -46px;
      left: -4px;
      width: 8px;
      height: 92px;
    }

    .ray::before, .ray::after {
      content: "";
      position: absolute;
      width: 6px;
      height: 14px;
      background: #fed330;
      border-radius: 4px;
      left: 1px;
      box-shadow: 0 0 8px #ffa502;
    }

    .ray::before { top: 0; }
    .ray::after { bottom: 0; }

    .ray-1 { transform: rotate(0deg); }
    .ray-2 { transform: rotate(45deg); }
    .ray-3 { transform: rotate(90deg); }
    .ray-4 { transform: rotate(135deg); }

    @keyframes spinRays {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    /* ========================================================
       SHARED CLOUD SHAPES (Rainy, Snowy, Stormy)
       ======================================================== */
    .cloud-base {
      position: absolute;
      top: 36px;
      left: 24px;
      width: 92px;
      height: 32px;
      background: #ffffff;
      border-radius: 20px;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
      z-index: 3;
    }

    .cloud-base::before,
    .cloud-base::after {
      content: "";
      position: absolute;
      background: inherit;
      border-radius: 50%;
    }

    .cloud-base::before {
      width: 44px;
      height: 44px;
      top: -20px;
      left: 14px;
    }

    .cloud-base::after {
      width: 32px;
      height: 32px;
      top: -12px;
      right: 14px;
    }

    /* Darker storm cloud */
    .storm-cloud {
      background: #757c8e;
      box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
    }

    /* Soft snowy cloud */
    .snow-cloud {
      background: #eaf1f8;
      box-shadow: 0 8px 16px rgba(13, 27, 42, 0.2);
    }

    /* ========================================================
       2. RAINY ANIMATION
       ======================================================== */
    .rain-container {
      position: absolute;
      top: 76px;
      left: 20px;
      width: 100px;
      height: 50px;
      overflow: hidden;
      z-index: 1;
    }

    .raindrop {
      position: absolute;
      top: -15px;
      width: 2.5px;
      height: 14px;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #a5d8ff);
      border-radius: 0 0 2px 2px;
      animation: rainDrop 1.1s linear infinite;
      opacity: 0.9;
    }

    .drop-1 { left: 18px; animation-delay: 0.1s; animation-duration: 0.95s; }
    .drop-2 { left: 34px; animation-delay: 0.45s; animation-duration: 1.1s; }
    .drop-3 { left: 50px; animation-delay: 0.2s; animation-duration: 0.9s; }
    .drop-4 { left: 66px; animation-delay: 0.75s; animation-duration: 1.05s; }
    .drop-5 { left: 82px; animation-delay: 0.35s; animation-duration: 1.15s; }

    @keyframes rainDrop {
      0% {
        transform: translateY(0) skewX(-10deg);
        opacity: 0;
      }
      20% {
        opacity: 1;
      }
      85% {
        opacity: 1;
      }
      100% {
        transform: translateY(52px) skewX(-10deg);
        opacity: 0;
      }
    }

    /* ========================================================
       3. SNOWY ANIMATION
       ======================================================== */
    .snow-container {
      position: absolute;
      top: 74px;
      left: 20px;
      width: 100px;
      height: 52px;
      overflow: hidden;
      z-index: 1;
    }

    .snowflake {
      position: absolute;
      top: -10px;
      width: 6px;
      height: 6px;
      background: #ffffff;
      border-radius: 50%;
      box-shadow: 0 0 6px #ffffff;
      animation: snowfall 2.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    .flake-1 { left: 20px; animation-delay: 0.1s; width: 5px; height: 5px; }
    .flake-2 { left: 38px; animation-delay: 1.2s; width: 7px; height: 7px; }
    .flake-3 { left: 54px; animation-delay: 0.6s; width: 4px; height: 4px; }
    .flake-4 { left: 70px; animation-delay: 1.9s; width: 6px; height: 6px; }
    .flake-5 { left: 84px; animation-delay: 0.9s; width: 5px; height: 5px; }

    @keyframes snowfall {
      0% {
        transform: translate(0, 0);
        opacity: 0;
      }
      25% {
        opacity: 1;
        transform: translate(4px, 14px);
      }
      50% {
        transform: translate(-4px, 28px);
      }
      75% {
        opacity: 1;
        transform: translate(4px, 40px);
      }
      100% {
        transform: translate(-2px, 54px);
        opacity: 0;
      }
    }

    /* ========================================================
       4. STORMY ANIMATION
       ======================================================== */
    .lightning-bolt {
      position: absolute;
      top: 68px;
      left: 56px;
      width: 14px;
      height: 28px;
      z-index: 2;
      animation: boltFlash 2.5s infinite;
    }

    /* Top segment */
    .bolt-top {
      position: absolute;
      top: 0;
      left: 4px;
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 2px solid transparent;
      border-top: 18px solid #ffd32a;
      transform: skew(-22deg);
    }

    /* Bottom segment */
    .bolt-bottom {
      position: absolute;
      top: 11px;
      left: -2px;
      width: 0;
      height: 0;
      border-left: 2px solid transparent;
      border-right: 7px solid transparent;
      border-top: 20px solid #ffd32a;
      transform: skew(-22deg);
    }

    .storm-cloud {
      animation: cloudRumble 2.5s infinite;
    }

    @keyframes boltFlash {
      0%, 82%, 90%, 100% {
        opacity: 0;
        filter: drop-shadow(0 0 0 transparent);
      }
      83%, 88% {
        opacity: 1;
        filter: drop-shadow(0 0 10px #ffeaa7) drop-shadow(0 0 18px #ffd32a);
      }
    }

    @keyframes cloudRumble {
      0%, 82%, 92%, 100% {
        background: #757c8e;
      }
      84%, 88% {
        background: #959cb0;
        box-shadow: 0 8px 24px rgba(255, 234, 167, 0.25);
      }
    }

    /* Rain in thunderstorm */
    .storm-rain .raindrop {
      height: 10px;
      animation-duration: 0.8s;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #cbd5e1);
    }

    /* Accessibility: Respect Reduced Motion */
    @media (prefers-reduced-motion: reduce) {
      .card {
        transition: none;
      }
      .card:hover {
        transform: none;
      }
      .sun-rays,
      .raindrop,
      .snowflake,
      .lightning-bolt,
      .storm-cloud {
        animation: none !important;
      }
      .lightning-bolt {
        opacity: 0.85;
      }
    }
  </style>
</head>
<body>

  <header>
    <h1>Global Forecast</h1>
    <p>Live meteorological conditions created entirely with CSS</p>
  </header>

  <main class="weather-container">
    
    <!-- CARD 1: SUNNY -->
    <article class="card card-sunny">
      <div class="icon-wrapper">
        <div class="sun-body"></div>
        <div class="sun-rays">
          <div class="ray ray-1"></div>
          <div class="ray ray-2"></div>
          <div class="ray ray-3"></div>
          <div class="ray ray-4"></div>
        </div>
      </div>
      <div class="temp">29<sup>°C</sup></div>
      <div class="city">Barcelona</div>
      <div class="condition">Sunny</div>
    </article>

    <!-- CARD 2: RAINY -->
    <article class="card card-rainy">
      <div class="icon-wrapper">
        <div class="cloud-base"></div>
        <div class="rain-container">
          <div class="raindrop drop-1"></div>
          <div class="raindrop drop-2"></div>
          <div class="raindrop drop-3"></div>
          <div class="raindrop drop-4"></div>
          <div class="raindrop drop-5"></div>
        </div>
      </div>
      <div class="temp">14<sup>°C</sup></div>
      <div class="city">London</div>
      <div class="condition">Showers</div>
    </article>

    <!-- CARD 3: SNOWY -->
    <article class="card card-snowy">
      <div class="icon-wrapper">
        <div class="cloud-base snow-cloud"></div>
        <div class="snow-container">
          <div class="snowflake flake-1"></div>
          <div class="snowflake flake-2"></div>
          <div class="snowflake flake-3"></div>
          <div class="snowflake flake-4"></div>
          <div class="snowflake flake-5"></div>
        </div>
      </div>
      <div class="temp">-3<sup>°C</sup></div>
      <div class="city">Reykjavík</div>
      <div class="condition">Snow Flurries</div>
    </article>

    <!-- CARD 4: STORMY -->
    <article class="card card-stormy">
      <div class="icon-wrapper">
        <div class="cloud-base storm-cloud"></div>
        <div class="lightning-bolt">
          <div class="bolt-top"></div>
          <div class="bolt-bottom"></div>
        </div>
        <div class="rain-container storm-rain">
          <div class="raindrop drop-2"></div>
          <div class="raindrop drop-4"></div>
        </div>
      </div>
      <div class="temp">21<sup>°C</sup></div>
      <div class="city">Hanoi</div>
      <div class="condition">Thunderstorm</div>
    </article>

  </main>

</body>
</html>