DeepSeek V4 Flash 0423

by DeepSeekreasoning defaultClean

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

How it went

Total time: 40.1 s
Cost: $0.0009
Output tokens: 5,041
Spent thinking: 0 tokens
Speed: 128.3 tok/s
Console errors: 0

First token after: 809 ms
First visible text after: 809 ms
Prompt tokens: 501
Code size: 15.3 KB
Finish reason: stop
Served by: DeepInfra
Model id: deepseek/deepseek-v4-flash
Reasoning sent: model default
Max output: 393,216 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 · 519 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
  <title>Weather cards · pure CSS</title>
  <style>
    /* ----- reset & base ----- */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
      background: #1a1e2e;
      padding: 1rem;
    }

    /* ----- responsive grid ----- */
    .weather-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.8rem;
      max-width: 1200px;
      width: 100%;
    }

    @media (max-width: 720px) {
      .weather-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
      }
    }

    @media (max-width: 480px) {
      .weather-grid {
        grid-template-columns: 1fr;
        gap: 1.8rem;
      }
    }

    /* ----- shared card styles ----- */
    .weather-card {
      position: relative;
      border-radius: 2.2rem;
      padding: 2rem 1.5rem 2.2rem;
      color: #f0f4ff;
      box-shadow: 0 20px 30px -10px rgba(0,0,0,0.5);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      transition: transform 0.25s ease, box-shadow 0.3s ease;
      will-change: transform;
      cursor: default;
      backdrop-filter: blur(1px);
      overflow: hidden;
    }

    /* hover lift */
    @media (hover: hover) {
      .weather-card:hover {
        transform: translateY(-12px);
        box-shadow: 0 32px 40px -12px rgba(0,0,0,0.6);
      }
    }

    /* ----- individual gradients ----- */
    .card-sunny {
      background: linear-gradient(145deg, #f9d976, #f39c12);
    }
    .card-rainy {
      background: linear-gradient(145deg, #5b7c9c, #2c3e50);
    }
    .card-snowy {
      background: linear-gradient(145deg, #c9d8e8, #8ca6b9);
    }
    .card-stormy {
      background: linear-gradient(145deg, #3a3d5c, #1b1e2f);
    }

    /* ----- icon container (fixed aspect) ----- */
    .weather-icon {
      position: relative;
      width: 100px;
      height: 100px;
      margin: 0 auto 1.2rem;
      flex-shrink: 0;
    }

    /* ----- city, temp, desc ----- */
    .city-name {
      font-size: 1.45rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      text-shadow: 0 2px 6px rgba(0,0,0,0.25);
      margin-bottom: 0.2rem;
    }
    .temperature {
      font-size: 2.8rem;
      font-weight: 300;
      line-height: 1.1;
      text-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
    .temp-value {
      font-weight: 600;
    }
    .description {
      font-size: 0.9rem;
      opacity: 0.85;
      margin-top: 0.3rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      font-weight: 400;
      text-shadow: 0 1px 4px rgba(0,0,0,0.2);
    }

    /* ================================================================
       SUNNY ICON  –  rotating rays + central sun
       ================================================================ */
    .sun {
      position: absolute;
      width: 44px;
      height: 44px;
      background: #ffe066;
      border-radius: 50%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 20px 6px rgba(255, 220, 60, 0.6);
    }
    /* rays = pseudo-elements + box-shadows */
    .sunny-icon::before,
    .sunny-icon::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 10px;
      height: 100px;
      background: #f5d742;
      border-radius: 30px;
      transform-origin: center center;
      box-shadow: 0 0 8px rgba(255, 220, 60, 0.5);
    }
    .sunny-icon::before {
      transform: translate(-50%, -50%) rotate(0deg);
      animation: spinRays 4s linear infinite;
    }
    .sunny-icon::after {
      transform: translate(-50%, -50%) rotate(90deg);
      animation: spinRays 4s linear infinite;
    }
    /* additional 2 rays via box-shadows (tilted 45°) */
    .sunny-icon {
      position: absolute;
      inset: 0;
    }
    .sunny-icon .ray-mask {
      position: absolute;
      inset: -8px;
      border-radius: 50%;
      /* hide pseudo behind center? we just put extra shadows on .sunny-icon */
    }
    /* we add the 4 extra rays using box-shadows on .sunny-icon */
    .sunny-icon {
      box-shadow: 
        0 -42px 0 -6px #f5d742,   /* top */
        0 42px 0 -6px #f5d742,    /* bottom */
        -42px 0 0 -6px #f5d742,   /* left */
        42px 0 0 -6px #f5d742;    /* right */
      animation: spinRays 4s linear infinite;
      border-radius: 50%;
      width: 100%;
      height: 100%;
    }
    /* fix: center the four static shadow-rays; animation rotates entire container */
    .sunny-icon {
      transform-origin: center center;
    }
    /* we need the pseudo elements for diagonal rays. but we also have shadows. let's unify */
    /* better: use two pseudo rotated, plus box-shadows for the other 4 directions */
    .sunny-icon::before {
      content: '';
      position: absolute;
      width: 8px;
      height: 100px;
      background: #f5d742;
      border-radius: 20px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(0deg);
      box-shadow: 0 0 6px #f5d742;
      animation: none; /* we rotate the parent */
    }
    .sunny-icon::after {
      content: '';
      position: absolute;
      width: 8px;
      height: 100px;
      background: #f5d742;
      border-radius: 20px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(90deg);
      box-shadow: 0 0 6px #f5d742;
      animation: none;
    }
    /* we rotate the whole .sunny-icon, but we want the central sun to stay fixed */
    .sunny-icon .sun {
      animation: counterSpin 4s linear infinite;
    }
    /* define keyframes */
    @keyframes spinRays {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    @keyframes counterSpin {
      0% { transform: translate(-50%, -50%) rotate(0deg); }
      100% { transform: translate(-50%, -50%) rotate(-360deg); }
    }
    /* ----- rainy icon (drops falling) ----- */
    .rainy-icon {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .rain-drop {
      position: absolute;
      width: 4px;
      height: 16px;
      background: #bbdefb;
      border-radius: 40% 40% 30% 30%;
      opacity: 0.7;
      top: -10%;
      box-shadow: 0 0 6px #b0d4f1;
      animation: dropFall 0.9s linear infinite;
    }
    .rain-drop:nth-child(1) { left: 18%; animation-duration: 0.8s; animation-delay: 0.0s; }
    .rain-drop:nth-child(2) { left: 38%; animation-duration: 0.9s; animation-delay: 0.2s; height: 13px; }
    .rain-drop:nth-child(3) { left: 58%; animation-duration: 1.0s; animation-delay: 0.4s; height: 18px; }
    .rain-drop:nth-child(4) { left: 78%; animation-duration: 0.85s; animation-delay: 0.1s; }
    .rain-drop:nth-child(5) { left: 12%; animation-duration: 0.95s; animation-delay: 0.5s; height: 14px; opacity: 0.5; }
    .rain-drop:nth-child(6) { left: 50%; animation-duration: 0.75s; animation-delay: 0.7s; height: 11px; opacity: 0.6; }
    .rain-drop:nth-child(7) { left: 68%; animation-duration: 0.9s; animation-delay: 0.3s; }
    .rain-drop:nth-child(8) { left: 88%; animation-duration: 1.1s; animation-delay: 0.15s; height: 12px; }
    .cloud-rain {
      position: absolute;
      width: 70px;
      height: 36px;
      background: #b2c7db;
      border-radius: 50%;
      top: 16%;
      left: 50%;
      transform: translateX(-50%);
      box-shadow: 0 0 20px #b2c7db;
    }
    .cloud-rain::before {
      content: '';
      position: absolute;
      width: 46px;
      height: 46px;
      background: #c5d6e8;
      border-radius: 50%;
      top: -20px;
      left: 12px;
    }
    .cloud-rain::after {
      content: '';
      position: absolute;
      width: 36px;
      height: 36px;
      background: #c5d6e8;
      border-radius: 50%;
      top: -18px;
      right: 8px;
    }

    @keyframes dropFall {
      0% { transform: translateY(-10px); opacity: 0.8; }
      80% { opacity: 0.5; }
      100% { transform: translateY(100px); opacity: 0; }
    }

    /* ----- snowy icon (drifting flakes) ----- */
    .snowy-icon {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .snow-flake {
      position: absolute;
      width: 8px;
      height: 8px;
      background: #fff;
      border-radius: 50%;
      opacity: 0.5;
      top: -8%;
      box-shadow: 0 0 8px rgba(255,255,255,0.5);
      animation: snowDrift 3.5s linear infinite;
    }
    .snow-flake:nth-child(1) { left: 12%; animation-duration: 3.2s; animation-delay: 0s; width: 6px; height: 6px; }
    .snow-flake:nth-child(2) { left: 32%; animation-duration: 4.0s; animation-delay: 0.6s; width: 9px; height: 9px; }
    .snow-flake:nth-child(3) { left: 52%; animation-duration: 3.6s; animation-delay: 1.2s; }
    .snow-flake:nth-child(4) { left: 72%; animation-duration: 4.2s; animation-delay: 0.2s; width: 5px; height: 5px; }
    .snow-flake:nth-child(5) { left: 86%; animation-duration: 3.0s; animation-delay: 0.9s; width: 10px; height: 10px; }
    .snow-flake:nth-child(6) { left: 22%; animation-duration: 4.5s; animation-delay: 1.8s; width: 7px; height: 7px; }
    .snow-flake:nth-child(7) { left: 42%; animation-duration: 3.8s; animation-delay: 0.4s; }
    .snow-flake:nth-child(8) { left: 66%; animation-duration: 5.0s; animation-delay: 0.0s; width: 6px; height: 6px; }

    @keyframes snowDrift {
      0% { transform: translateY(-6px) rotate(0deg) scale(1); opacity: 0.6; }
      50% { opacity: 0.9; }
      100% { transform: translateY(110px) rotate(360deg) scale(0.5); opacity: 0; }
    }

    .cloud-snow {
      position: absolute;
      width: 66px;
      height: 32px;
      background: #d8e4f0;
      border-radius: 50%;
      top: 20%;
      left: 50%;
      transform: translateX(-50%);
      box-shadow: 0 0 16px #d8e4f0;
    }
    .cloud-snow::before {
      content: '';
      position: absolute;
      width: 40px;
      height: 40px;
      background: #e7eefb;
      border-radius: 50%;
      top: -18px;
      left: 8px;
    }
    .cloud-snow::after {
      content: '';
      position: absolute;
      width: 32px;
      height: 32px;
      background: #e7eefb;
      border-radius: 50%;
      top: -14px;
      right: 4px;
    }

    /* ----- stormy icon: flashing lightning + rain ----- */
    .stormy-icon {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .lightning-bolt {
      position: absolute;
      width: 10px;
      height: 44px;
      background: #f9e45b;
      top: 26%;
      left: 50%;
      transform: translateX(-50%) skewX(-8deg) skewY(2deg);
      clip-path: polygon(50% 0%, 40% 45%, 55% 45%, 30% 100%, 50% 55%, 38% 55%);
      background: linear-gradient(to bottom, #faea7a, #f5c542);
      box-shadow: 0 0 20px #f9d44a, 0 0 40px #f9d44a;
      animation: flashBolt 1.6s infinite;
      opacity: 0.9;
    }
    .lightning-bolt::before {
      content: '';
      position: absolute;
      width: 6px;
      height: 30px;
      background: #fce488;
      clip-path: polygon(50% 0%, 40% 40%, 55% 40%, 25% 100%, 50% 50%, 38% 50%);
      top: 6px;
      left: -2px;
      filter: blur(2px);
      opacity: 0.7;
    }
    /* flash opacity animation */
    @keyframes flashBolt {
      0%, 90%, 100% { opacity: 0.1; transform: translateX(-50%) skewX(-8deg) scaleY(1); }
      92% { opacity: 1; transform: translateX(-50%) skewX(-8deg) scaleY(1.1); }
      96% { opacity: 0.2; }
    }
    .storm-cloud {
      position: absolute;
      width: 80px;
      height: 34px;
      background: #4f5578;
      border-radius: 50%;
      top: 16%;
      left: 50%;
      transform: translateX(-50%);
      box-shadow: 0 0 18px #4f5578;
    }
    .storm-cloud::before {
      content: '';
      position: absolute;
      width: 48px;
      height: 48px;
      background: #5b6187;
      border-radius: 50%;
      top: -22px;
      left: 10px;
    }
    .storm-cloud::after {
      content: '';
      position: absolute;
      width: 40px;
      height: 40px;
      background: #5b6187;
      border-radius: 50%;
      top: -18px;
      right: 4px;
    }

    /* ----- prefers reduced motion ----- */
    @media (prefers-reduced-motion: reduce) {
      .sunny-icon, .sunny-icon::before, .sunny-icon::after, .sunny-icon .sun,
      .rain-drop, .snow-flake, .lightning-bolt,
      .lightning-bolt::before {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition: none !important;
      }
      .weather-card:hover {
        transform: none !important;
      }
    }

    /* small polish */
    .weather-card p {
      margin-top: 0.2rem;
    }
    .weather-card .description {
      margin-top: 0.25rem;
    }
  </style>
</head>
<body>
  <div class="weather-grid">

    <!-- SUNNY -->
    <div class="weather-card card-sunny">
      <div class="weather-icon">
        <div class="sunny-icon">
          <div class="sun"></div>
        </div>
      </div>
      <div class="city-name">Miami</div>
      <div class="temperature"><span class="temp-value">32</span>°C</div>
      <div class="description">Pure sunshine</div>
    </div>

    <!-- RAINY -->
    <div class="weather-card card-rainy">
      <div class="weather-icon rainy-icon">
        <div class="cloud-rain"></div>
        <div class="rain-drop"></div>
        <div class="rain-drop"></div>
        <div class="rain-drop"></div>
        <div class="rain-drop"></div>
        <div class="rain-drop"></div>
        <div class="rain-drop"></div>
        <div class="rain-drop"></div>
        <div class="rain-drop"></div>
      </div>
      <div class="city-name">London</div>
      <div class="temperature"><span class="temp-value">12</span>°C</div>
      <div class="description">Steady rain</div>
    </div>

    <!-- SNOWY -->
    <div class="weather-card card-snowy">
      <div class="weather-icon snowy-icon">
        <div class="cloud-snow"></div>
        <div class="snow-flake"></div>
        <div class="snow-flake"></div>
        <div class="snow-flake"></div>
        <div class="snow-flake"></div>
        <div class="snow-flake"></div>
        <div class="snow-flake"></div>
        <div class="snow-flake"></div>
        <div class="snow-flake"></div>
      </div>
      <div class="city-name">Oslo</div>
      <div class="temperature"><span class="temp-value">-4</span>°C</div>
      <div class="description">Light snowfall</div>
    </div>

    <!-- STORMY -->
    <div class="weather-card card-stormy">
      <div class="weather-icon stormy-icon">
        <div class="storm-cloud"></div>
        <div class="lightning-bolt"></div>
        <!-- also add some rain for effect (optional) -->
        <div class="rain-drop" style="background:#9bb2ce; width:3px; height:14px; left:20%; animation-duration:0.7s; animation-delay:0.1s;"></div>
        <div class="rain-drop" style="background:#9bb2ce; width:3px; height:14px; left:70%; animation-duration:0.8s; animation-delay:0.5s;"></div>
        <div class="rain-drop" style="background:#9bb2ce; width:3px; height:14px; left:45%; animation-duration:0.6s; animation-delay:0.0s;"></div>
      </div>
      <div class="city-name">Jakarta</div>
      <div class="temperature"><span class="temp-value">27</span>°C</div>
      <div class="description">Thunderstorm</div>
    </div>

  </div>
</body>
</html>