DeepSeek V4.1 Flash 1017

by DeepSeekReasoningClean

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

How it went

Total time: 39.5 s
Cost: $0.0032
Output tokens: 6,237
Spent thinking: 0 tokens
Speed: 168.6 tok/s
Console errors: 0

First token after: 2.5 s
First visible text after: 2.5 s
Prompt tokens: 502
Code size: 16.1 KB
Finish reason: stop
Served by: Cohere
Model id: deepseek/deepseek-v4.1-flash-1017
Reasoning sent: {"effort":"none"}
Max output: 64,000 tokens
Generated: Nov 10, 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 · 622 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</title>
<style>
  :root {
    --card-radius: 22px;
    --text-light: #ffffff;
    --text-soft: rgba(255, 255, 255, 0.78);
  }

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html, body {
    width: 100%;
    min-height: 100%;
  }

  body {
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    background: radial-gradient(ellipse at 50% -20%, #1b2340 0%, #0b1020 55%, #05070f 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 36px 18px;
    overflow-x: hidden;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    width: 100%;
    max-width: 1180px;
  }

  /* ---------- CARD BASE ---------- */
  .card {
    position: relative;
    border-radius: var(--card-radius);
    padding: 22px 20px 20px;
    min-height: 300px;
    overflow: hidden;
    color: var(--text-light);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.45s ease;
    will-change: transform;
    isolation: isolate;
  }

  .card:hover {
    transform: translateY(-12px) scale(1.015);
    box-shadow: 0 28px 46px -16px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }

  .card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 32%);
    z-index: 5;
  }

  .card-info {
    position: relative;
    z-index: 6;
  }

  .city {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-soft);
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .city .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.8;
    animation: pulseDot 2.4s ease-in-out infinite;
  }

  @keyframes pulseDot {
    0%, 100% { opacity: 0.35; transform: scale(0.8); }
    50%      { opacity: 1;    transform: scale(1.25); }
  }

  .temp {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    margin-top: 6px;
    letter-spacing: -0.02em;
    text-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
  }

  .temp span {
    font-size: 1.3rem;
    font-weight: 500;
    vertical-align: super;
    opacity: 0.85;
  }

  .desc {
    margin-top: 6px;
    font-size: 0.92rem;
    color: var(--text-soft);
    letter-spacing: 0.01em;
  }

  /* ---------- ICON STAGE ---------- */
  .icon-stage {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 130px;
    z-index: 4;
  }

  /* ============ SUNNY ============ */
  .card.sunny {
    background: linear-gradient(160deg, #ffcf4d 0%, #ff9f43 45%, #f0602f 100%);
  }

  .sun-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 58px;
    height: 58px;
    margin: -29px 0 0 -29px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff8d6 0%, #ffe066 45%, #ffb300 100%);
    box-shadow: 0 0 26px 8px rgba(255, 224, 102, 0.65), 0 0 60px 18px rgba(255, 190, 60, 0.35);
    animation: sunPulse 3.6s ease-in-out infinite;
  }

  @keyframes sunPulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 0 26px 8px rgba(255, 224, 102, 0.65), 0 0 60px 18px rgba(255, 190, 60, 0.35); }
    50%      { transform: scale(1.06); box-shadow: 0 0 34px 12px rgba(255, 232, 130, 0.8), 0 0 80px 24px rgba(255, 190, 60, 0.45); }
  }

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

  @keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  .sun-rays i {
    position: absolute;
    top: -56px;
    left: -3px;
    width: 6px;
    height: 22px;
    border-radius: 3px;
    background: linear-gradient(180deg, #fff6c9, rgba(255, 214, 90, 0.15));
    transform-origin: 3px 56px;
  }

  .sun-rays i:nth-child(1)  { transform: rotate(0deg); }
  .sun-rays i:nth-child(2)  { transform: rotate(30deg); }
  .sun-rays i:nth-child(3)  { transform: rotate(60deg); }
  .sun-rays i:nth-child(4)  { transform: rotate(90deg); }
  .sun-rays i:nth-child(5)  { transform: rotate(120deg); }
  .sun-rays i:nth-child(6)  { transform: rotate(150deg); }
  .sun-rays i:nth-child(7)  { transform: rotate(180deg); }
  .sun-rays i:nth-child(8)  { transform: rotate(210deg); }
  .sun-rays i:nth-child(9)  { transform: rotate(240deg); }
  .sun-rays i:nth-child(10) { transform: rotate(270deg); }
  .sun-rays i:nth-child(11) { transform: rotate(300deg); }
  .sun-rays i:nth-child(12) { transform: rotate(330deg); }

  /* ============ RAINY ============ */
  .card.rainy {
    background: linear-gradient(160deg, #7f9bbd 0%, #4a6b95 45%, #2a3f60 100%);
  }

  .cloud {
    position: absolute;
    top: 34px;
    left: 50%;
    width: 92px;
    height: 34px;
    margin-left: -46px;
    border-radius: 34px;
    background: linear-gradient(180deg, #f2f6fb 0%, #cdd9e8 100%);
    box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.45);
    animation: cloudFloat 5s ease-in-out infinite;
  }

  .cloud::before,
  .cloud::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(180deg, #f7fafd 0%, #d5e0ee 100%);
  }

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

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

  @keyframes cloudFloat {
    0%, 100% { transform: translateX(-4px); }
    50%      { transform: translateX(4px); }
  }

  .rain-drops {
    position: absolute;
    top: 74px;
    left: 50%;
    width: 86px;
    height: 54px;
    margin-left: -43px;
  }

  .rain-drops i {
    position: absolute;
    top: -14px;
    width: 3px;
    height: 15px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(220, 240, 255, 0.1), #cbe6ff);
    animation: rainFall 1.05s linear infinite;
    opacity: 0;
  }

  .rain-drops i:nth-child(1) { left: 6px;  animation-delay: 0s; }
  .rain-drops i:nth-child(2) { left: 20px; animation-delay: 0.35s; }
  .rain-drops i:nth-child(3) { left: 34px; animation-delay: 0.12s; }
  .rain-drops i:nth-child(4) { left: 48px; animation-delay: 0.55s; }
  .rain-drops i:nth-child(5) { left: 62px; animation-delay: 0.24s; }
  .rain-drops i:nth-child(6) { left: 76px; animation-delay: 0.68s; }

  @keyframes rainFall {
    0%   { transform: translateY(0) scaleY(1);   opacity: 0; }
    12%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(56px) scaleY(0.85); opacity: 0; }
  }

  /* ============ SNOWY ============ */
  .card.snowy {
    background: linear-gradient(160deg, #b8d8f0 0%, #8fb6da 45%, #5f87b5 100%);
  }

  .snow-cloud {
    position: absolute;
    top: 34px;
    left: 50%;
    width: 92px;
    height: 34px;
    margin-left: -46px;
    border-radius: 34px;
    background: linear-gradient(180deg, #ffffff 0%, #e4eef8 100%);
    box-shadow: 0 10px 22px -8px rgba(30, 60, 100, 0.4);
    animation: cloudFloat 6s ease-in-out infinite;
  }

  .snow-cloud::before,
  .snow-cloud::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffffff 0%, #e8f1fa 100%);
  }

  .snow-cloud::before {
    width: 44px;
    height: 44px;
    top: -22px;
    left: 14px;
  }

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

  .flakes {
    position: absolute;
    top: 70px;
    left: 50%;
    width: 96px;
    height: 58px;
    margin-left: -48px;
  }

  .flakes i {
    position: absolute;
    top: -8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffffff, #cfe3f5);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.85);
    animation: snowFall 4.2s linear infinite;
    opacity: 0;
  }

  .flakes i:nth-child(1) { left: 2px;  animation-delay: 0s;    animation-duration: 4.2s; }
  .flakes i:nth-child(2) { left: 18px; animation-delay: 1.1s;  animation-duration: 5s; }
  .flakes i:nth-child(3) { left: 34px; animation-delay: 0.5s;  animation-duration: 4.6s; }
  .flakes i:nth-child(4) { left: 50px; animation-delay: 1.9s;  animation-duration: 5.4s; }
  .flakes i:nth-child(5) { left: 66px; animation-delay: 0.9s;  animation-duration: 4s; }
  .flakes i:nth-child(6) { left: 82px; animation-delay: 2.5s;  animation-duration: 5.2s; }

  @keyframes snowFall {
    0%   { transform: translate(0, 0) scale(0.6);          opacity: 0; }
    12%  { opacity: 1; }
    50%  { transform: translate(7px, 26px) scale(1); }
    85%  { opacity: 1; }
    100% { transform: translate(-6px, 58px) scale(0.75);   opacity: 0; }
  }

  /* ============ STORMY ============ */
  .card.stormy {
    background: linear-gradient(160deg, #5d6484 0%, #353a5c 45%, #1b1d33 100%);
  }

  .storm-cloud {
    position: absolute;
    top: 30px;
    left: 50%;
    width: 98px;
    height: 36px;
    margin-left: -49px;
    border-radius: 36px;
    background: linear-gradient(180deg, #6a7092 0%, #404562 100%);
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.6);
    animation: cloudShake 5s ease-in-out infinite;
  }

  .storm-cloud::before,
  .storm-cloud::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(180deg, #737aa0 0%, #474d6c 100%);
  }

  .storm-cloud::before {
    width: 48px;
    height: 48px;
    top: -24px;
    left: 12px;
  }

  .storm-cloud::after {
    width: 36px;
    height: 36px;
    top: -16px;
    right: 12px;
  }

  @keyframes cloudShake {
    0%, 100% { transform: translateX(0); }
    48%      { transform: translateX(0); }
    50%      { transform: translateX(-3px); }
    52%      { transform: translateX(3px); }
    54%      { transform: translateX(0); }
  }

  .bolt {
    position: absolute;
    top: 62px;
    left: 50%;
    width: 20px;
    height: 44px;
    margin-left: -10px;
    background: linear-gradient(180deg, #fff6a8 0%, #ffd93b 55%, #ffb300 100%);
    clip-path: polygon(58% 0%, 100% 0%, 52% 42%, 88% 42%, 8% 100%, 36% 54%, 0% 54%);
    filter: drop-shadow(0 0 8px rgba(255, 217, 59, 0.95)) drop-shadow(0 0 20px rgba(255, 190, 0, 0.6));
    animation: boltFlash 3s ease-in-out infinite;
    opacity: 0;
  }

  @keyframes boltFlash {
    0%, 34%   { opacity: 0; }
    36%       { opacity: 1; }
    40%       { opacity: 0.15; }
    43%       { opacity: 1; }
    48%       { opacity: 0; }
    100%      { opacity: 0; }
  }

  .storm-rain {
    position: absolute;
    top: 74px;
    left: 50%;
    width: 90px;
    height: 52px;
    margin-left: -45px;
  }

  .storm-rain i {
    position: absolute;
    top: -12px;
    width: 2px;
    height: 13px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(180, 200, 255, 0.1), #9fb6e8);
    animation: rainFall 0.85s linear infinite;
    opacity: 0;
  }

  .storm-rain i:nth-child(1) { left: 4px;  animation-delay: 0s; }
  .storm-rain i:nth-child(2) { left: 20px; animation-delay: 0.3s; }
  .storm-rain i:nth-child(3) { left: 36px; animation-delay: 0.15s; }
  .storm-rain i:nth-child(4) { left: 52px; animation-delay: 0.45s; }
  .storm-rain i:nth-child(5) { left: 68px; animation-delay: 0.22s; }
  .storm-rain i:nth-child(6) { left: 84px; animation-delay: 0.6s; }

  /* Stormy background flash overlay */
  .card.stormy .flash-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 45%, rgba(255, 248, 190, 0.5), transparent 65%);
    opacity: 0;
    z-index: 3;
    pointer-events: none;
    animation: skyFlash 3s ease-in-out infinite;
  }

  @keyframes skyFlash {
    0%, 34%   { opacity: 0; }
    36%       { opacity: 1; }
    41%       { opacity: 0; }
    44%       { opacity: 0.75; }
    49%       { opacity: 0; }
    100%      { opacity: 0; }
  }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 900px) {
    .grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 560px) {
    body {
      padding: 24px 14px;
    }
    .grid {
      grid-template-columns: 1fr;
      gap: 16px;
    }
    .card {
      min-height: 260px;
    }
    .temp {
      font-size: 2.5rem;
    }
    .icon-stage {
      width: 130px;
      height: 116px;
    }
  }

  /* ---------- REDUCED MOTION ---------- */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }
    .card:hover {
      transform: none;
    }
    /* Keep icons visible in their resting state */
    .rain-drops i,
    .flakes i,
    .storm-rain i {
      opacity: 1;
      animation: none !important;
    }
    .rain-drops i:nth-child(1) { transform: translateY(6px); }
    .rain-drops i:nth-child(2) { transform: translateY(22px); }
    .rain-drops i:nth-child(3) { transform: translateY(14px); }
    .rain-drops i:nth-child(4) { transform: translateY(32px); }
    .rain-drops i:nth-child(5) { transform: translateY(20px); }
    .rain-drops i:nth-child(6) { transform: translateY(40px); }

    .storm-rain i:nth-child(1) { transform: translateY(8px); }
    .storm-rain i:nth-child(2) { transform: translateY(24px); }
    .storm-rain i:nth-child(3) { transform: translateY(16px); }
    .storm-rain i:nth-child(4) { transform: translateY(34px); }
    .storm-rain i:nth-child(5) { transform: translateY(22px); }
    .storm-rain i:nth-child(6) { transform: translateY(42px); }

    .flakes i:nth-child(1) { transform: translate(2px, 14px); }
    .flakes i:nth-child(2) { transform: translate(5px, 30px); }
    .flakes i:nth-child(3) { transform: translate(0, 20px); }
    .flakes i:nth-child(4) { transform: translate(6px, 38px); }
    .flakes i:nth-child(5) { transform: translate(3px, 26px); }
    .flakes i:nth-child(6) { transform: translate(4px, 44px); }

    .bolt {
      opacity: 1;
      animation: none !important;
    }
    .card.stormy .flash-overlay {
      opacity: 0;
      animation: none !important;
    }
  }
</style>
</head>
<body>

  <main class="grid">

    <!-- SUNNY -->
    <article class="card sunny">
      <div class="icon-stage">
        <div class="sun-rays">
          <i></i><i></i><i></i><i></i><i></i><i></i>
          <i></i><i></i><i></i><i></i><i></i><i></i>
        </div>
        <div class="sun-core"></div>
      </div>
      <div class="card-info">
        <div class="city"><span class="dot"></span>Lisbon</div>
        <div class="temp">28<span>°C</span></div>
        <div class="desc">Sunny &amp; clear skies</div>
      </div>
    </article>

    <!-- RAINY -->
    <article class="card rainy">
      <div class="icon-stage">
        <div class="cloud"></div>
        <div class="rain-drops">
          <i></i><i></i><i></i><i></i><i></i><i></i>
        </div>
      </div>
      <div class="card-info">
        <div class="city"><span class="dot"></span>Seattle</div>
        <div class="temp">14<span>°C</span></div>
        <div class="desc">Steady light rain</div>
      </div>
    </article>

    <!-- SNOWY -->
    <article class="card snowy">
      <div class="icon-stage">
        <div class="snow-cloud"></div>
        <div class="flakes">
          <i></i><i></i><i></i><i></i><i></i><i></i>
        </div>
      </div>
      <div class="card-info">
        <div class="city"><span class="dot"></span>Oslo</div>
        <div class="temp">-6<span>°C</span></div>
        <div class="desc">Snow showers drifting</div>
      </div>
    </article>

    <!-- STORMY -->
    <article class="card stormy">
      <div class="flash-overlay"></div>
      <div class="icon-stage">
        <div class="storm-cloud"></div>
        <div class="storm-rain">
          <i></i><i></i><i></i><i></i><i></i><i></i>
        </div>
        <div class="bolt"></div>
      </div>
      <div class="card-info">
        <div class="city"><span class="dot"></span>Miami</div>
        <div class="temp">22<span>°C</span></div>
        <div class="desc">Thunderstorms &amp; lightning</div>
      </div>
    </article>

  </main>

</body>
</html>