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: 27.8 s
Cost: $0.0054
Output tokens: 4,439
Spent thinking: 0 tokens
Speed: 164.2 tok/s
Console errors: 0

First token after: 728 ms
First visible text after: 728 ms
Prompt tokens: 527
Code size: 12.7 KB
Finish reason: stop
Served by: Makora
Model id: deepseek/deepseek-v4.1-flash-1017
Reasoning sent: {"effort":"low"}
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 · 466 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>
  * { margin: 0; padding: 0; box-sizing: border-box; }

  :root {
    --card-radius: 22px;
  }

  body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    background: #0e1220;
    background: radial-gradient(circle at 20% 10%, #1c2440 0%, #0b0f1a 55%, #06080f 100%);
    color: #fff;
    overflow-x: hidden;
  }

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

  /* ---------------- CARD SHELL ---------------- */
  .card {
    position: relative;
    border-radius: var(--card-radius);
    padding: 22px 22px 26px;
    min-height: 340px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 14px 32px -12px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.22);
    transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease;
    cursor: default;
  }

  .card::after {
    /* soft glass sheen */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(255,255,255,.20), rgba(255,255,255,0) 45%);
    pointer-events: none;
    z-index: 3;
  }

  .card:hover {
    transform: translateY(-14px) scale(1.015);
    box-shadow: 0 34px 50px -18px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.3);
  }

  .card:hover .icon-wrap { transform: scale(1.06); }
  .icon-wrap { transition: transform .5s cubic-bezier(.22,1,.36,1); }

  /* backgrounds */
  .sunny   { background: linear-gradient(165deg, #ffb347 0%, #ff8c42 35%, #f4575f 75%, #c9367a 100%); }
  .rainy   { background: linear-gradient(165deg, #47617e 0%, #2f4a68 40%, #1f3350 75%, #16243c 100%); }
  .snowy   { background: linear-gradient(165deg, #c3dcf2 0%, #93b8dd 40%, #6e95c4 78%, #547aa8 100%); }
  .stormy  { background: linear-gradient(165deg, #4b4270 0%, #2f2a4d 38%, #1d1b33 74%, #12101f 100%); }

  /* ---------------- ICON STAGE ---------------- */
  .icon-wrap {
    position: relative;
    height: 150px;
    width: 100%;
    margin-bottom: 6px;
    z-index: 2;
  }

  .icon {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 120px;
    height: 120px;
    margin: -60px 0 0 -60px;
  }

  /* ---------------- SUN ---------------- */
  .sun-core {
    position: absolute;
    left: 50%; top: 50%;
    width: 62px; height: 62px;
    margin: -31px 0 0 -31px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #fffbe8 0%, #ffe066 45%, #ffb703 100%);
    box-shadow: 0 0 34px 10px rgba(255, 216, 90, .55), 0 0 70px 26px rgba(255, 170, 40, .28);
    animation: sunPulse 4s ease-in-out infinite;
  }

  .rays {
    position: absolute;
    inset: 0;
    animation: spin 14s linear infinite;
  }

  .ray {
    position: absolute;
    left: 50%; top: 50%;
    width: 6px; height: 19px;
    margin-left: -3px;
    border-radius: 4px;
    background: linear-gradient(to bottom, #fff6c9, #ffcf4d);
    transform-origin: 50% 0;
    transform: rotate(var(--a)) translateY(-66px);
    box-shadow: 0 0 8px rgba(255,214,90,.85);
  }

  /* celestial accents */
  .glow {
    position: absolute;
    left: 50%; top: 50%;
    width: 124px; height: 124px;
    margin: -62px 0 0 -62px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,224,130,.45) 0%, rgba(255,224,130,0) 68%);
    animation: sunPulse 4s ease-in-out infinite;
  }

  /* ---------------- CLOUD (shared shape) ---------------- */
  .cloud {
    position: absolute;
    background: #fff;
    border-radius: 50px;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,.18));
  }
  .cloud::before, .cloud::after {
    content: "";
    position: absolute;
    background: inherit;
    border-radius: 50%;
  }
  .cloud::before {
    width: 52%; height: 165%;
    left: 12%; bottom: 32%;
  }
  .cloud::after {
    width: 40%; height: 130%;
    right: 12%; bottom: 30%;
  }

  /* rainy cloud */
  .rain-cloud {
    width: 104px; height: 44px;
    left: 50%; top: 10px;
    margin-left: -52px;
    background: linear-gradient(#eef4fb, #c9d8e8);
    animation: floatCloud 7s ease-in-out infinite;
  }

  /* snowy cloud */
  .snow-cloud {
    width: 108px; height: 46px;
    left: 50%; top: 8px;
    margin-left: -54px;
    background: linear-gradient(#ffffff, #dbe7f5);
    animation: floatCloud 8s ease-in-out infinite;
  }

  /* storm clouds (two layers) */
  .storm-cloud-a {
    width: 112px; height: 46px;
    left: 50%; top: 6px;
    margin-left: -58px;
    background: linear-gradient(#6f689b, #443e6b);
    animation: floatCloud 6s ease-in-out infinite;
  }
  .storm-cloud-b {
    width: 74px; height: 34px;
    left: 50%; top: 34px;
    margin-left: 8px;
    background: linear-gradient(#5a5486, #332e54);
    animation: floatCloud 5s ease-in-out infinite reverse;
    opacity: .92;
  }

  /* ---------------- RAIN DROPS ---------------- */
  .drops { position: absolute; inset: 0; }

  .drop {
    position: absolute;
    top: 62px;
    width: 3px;
    height: 15px;
    border-radius: 3px;
    background: linear-gradient(to bottom, rgba(174,214,255,.15), #b9dcff);
    left: calc(12% + var(--i) * 15%);
    animation: fall 1.1s linear infinite;
    animation-delay: calc(var(--i) * -0.22s);
    opacity: 0;
  }

  /* ---------------- SNOWFLAKES ---------------- */
  .flake {
    position: absolute;
    top: 58px;
    left: calc(10% + var(--i) * 15%);
    width: 11px; height: 11px;
    color: #ffffff;
    opacity: 0;
    animation: snowFall 3.6s linear infinite;
    animation-delay: calc(var(--i) * -0.62s);
    filter: drop-shadow(0 0 4px rgba(255,255,255,.9));
  }
  /* 6-point star made of three bars */
  .flake span {
    position: absolute;
    left: 50%; top: 50%;
    width: 100%; height: 2px;
    margin: -1px 0 0 -50%;
    background: currentColor;
    border-radius: 2px;
  }
  .flake span:nth-child(1) { transform: rotate(0deg); }
  .flake span:nth-child(2) { transform: rotate(60deg); }
  .flake span:nth-child(3) { transform: rotate(120deg); }

  /* ---------------- LIGHTNING ---------------- */
  .bolt {
    position: absolute;
    left: 50%; top: 52px;
    width: 26px; height: 52px;
    margin-left: -13px;
    background: linear-gradient(#fffde3, #ffd93d 55%, #ffb703);
    clip-path: polygon(60% 0%, 12% 58%, 45% 58%, 32% 100%, 92% 40%, 55% 40%);
    filter: drop-shadow(0 0 12px rgba(255,225,90,.95));
    opacity: 0;
    animation: flash 2.6s steps(1, end) infinite;
  }

  .flash-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 45%, rgba(255,250,205,.55), rgba(255,250,205,0) 62%);
    opacity: 0;
    animation: flashGlow 2.6s steps(1, end) infinite;
    pointer-events: none;
  }

  /* ---------------- TEXT ---------------- */
  .meta {
    margin-top: auto;
    position: relative;
    z-index: 4;
  }

  .city {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    opacity: .88;
  }

  .temp {
    font-size: 46px;
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -.02em;
    display: flex;
    align-items: flex-start;
    gap: 2px;
  }
  .temp sup {
    font-size: 20px;
    font-weight: 400;
    margin-top: 8px;
    opacity: .85;
  }

  .desc {
    font-size: 13.5px;
    opacity: .82;
    letter-spacing: .02em;
  }

  .sunny  .desc, .sunny  .city { text-shadow: 0 1px 6px rgba(120,40,0,.35); }
  .snowy  .desc, .snowy  .city { color: #0f2b47; opacity: .95; }
  .snowy  .temp { color: #0e2740; }

  /* ---------------- KEYFRAMES ---------------- */
  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  @keyframes sunPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
  }

  @keyframes floatCloud {
    0%, 100% { transform: translateX(-6px) translateY(0); }
    50%      { transform: translateX(6px) translateY(-5px); }
  }

  @keyframes fall {
    0%   { transform: translateY(-8px); opacity: 0; }
    12%  { opacity: 1; }
    85%  { opacity: .9; }
    100% { transform: translateY(74px); opacity: 0; }
  }

  @keyframes snowFall {
    0%   { transform: translate(0, -10px) rotate(0deg); opacity: 0; }
    15%  { opacity: 1; }
    50%  { transform: translate(7px, 32px) rotate(150deg); }
    85%  { opacity: .9; }
    100% { transform: translate(-5px, 74px) rotate(300deg); opacity: 0; }
  }

  @keyframes flash {
    0%, 8%   { opacity: 0; }
    9%       { opacity: 1; }
    13%      { opacity: 0; }
    15%      { opacity: .9; }
    19%      { opacity: 0; }
    100%     { opacity: 0; }
  }

  @keyframes flashGlow {
    0%, 8%   { opacity: 0; }
    9%       { opacity: .55; }
    13%      { opacity: 0; }
    15%      { opacity: .35; }
    20%, 100%{ opacity: 0; }
  }

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

  @media (max-width: 560px) {
    body { padding: 22px 16px; }
    .grid { grid-template-columns: 1fr; gap: 18px; max-width: 420px; }
    .card { min-height: 300px; padding: 18px 20px 22px; }
    .icon-wrap { height: 132px; }
    .temp { font-size: 40px; }
  }

  /* ---------------- REDUCED MOTION ---------------- */
  @media (prefers-reduced-motion: reduce) {
    .rays, .sun-core, .glow, .cloud, .drop, .flake, .bolt, .flash-overlay {
      animation: none !important;
    }
    .rays { transform: rotate(12deg); }
    .drop { opacity: .85; }
    .flake { opacity: 1; }
    .bolt { opacity: 1; }
    .flash-overlay { opacity: .18; }
    .card { transition: none; }
    .card:hover { transform: none; }
  }
</style>
</head>
<body>

<main class="grid">

  <!-- SUNNY -->
  <article class="card sunny">
    <div class="icon-wrap">
      <div class="icon">
        <div class="glow"></div>
        <div class="rays">
          <div class="ray" style="--a:0deg"></div>
          <div class="ray" style="--a:30deg"></div>
          <div class="ray" style="--a:60deg"></div>
          <div class="ray" style="--a:90deg"></div>
          <div class="ray" style="--a:120deg"></div>
          <div class="ray" style="--a:150deg"></div>
          <div class="ray" style="--a:180deg"></div>
          <div class="ray" style="--a:210deg"></div>
          <div class="ray" style="--a:240deg"></div>
          <div class="ray" style="--a:270deg"></div>
          <div class="ray" style="--a:300deg"></div>
          <div class="ray" style="--a:330deg"></div>
        </div>
        <div class="sun-core"></div>
      </div>
    </div>
    <div class="meta">
      <div class="city">Lisbon</div>
      <div class="temp">27<sup>°C</sup></div>
      <div class="desc">Clear &amp; bright skies</div>
    </div>
  </article>

  <!-- RAINY -->
  <article class="card rainy">
    <div class="icon-wrap">
      <div class="icon">
        <div class="rain-cloud cloud"></div>
        <div class="drops">
          <div class="drop" style="--i:0"></div>
          <div class="drop" style="--i:1"></div>
          <div class="drop" style="--i:2"></div>
          <div class="drop" style="--i:3"></div>
          <div class="drop" style="--i:4"></div>
          <div class="drop" style="--i:5"></div>
        </div>
      </div>
    </div>
    <div class="meta">
      <div class="city">Seattle</div>
      <div class="temp">14<sup>°C</sup></div>
      <div class="desc">Steady light drizzle</div>
    </div>
  </article>

  <!-- SNOWY -->
  <article class="card snowy">
    <div class="icon-wrap">
      <div class="icon">
        <div class="snow-cloud cloud"></div>
        <div class="drops">
          <div class="flake" style="--i:0"><span></span><span></span><span></span></div>
          <div class="flake" style="--i:1"><span></span><span></span><span></span></div>
          <div class="flake" style="--i:2"><span></span><span></span><span></span></div>
          <div class="flake" style="--i:3"><span></span><span></span><span></span></div>
          <div class="flake" style="--i:4"><span></span><span></span><span></span></div>
          <div class="flake" style="--i:5"><span></span><span></span><span></span></div>
        </div>
      </div>
    </div>
    <div class="meta">
      <div class="city">Reykjavík</div>
      <div class="temp">-4<sup>°C</sup></div>
      <div class="desc">Gentle snowfall</div>
    </div>
  </article>

  <!-- STORMY -->
  <article class="card stormy">
    <div class="icon-wrap">
      <div class="icon">
        <div class="storm-cloud-a cloud"></div>
        <div class="storm-cloud-b cloud"></div>
        <div class="bolt"></div>
        <div class="flash-overlay"></div>
      </div>
    </div>
    <div class="meta">
      <div class="city">Bangkok</div>
      <div class="temp">22<sup>°C</sup></div>
      <div class="desc">Thunderstorms</div>
    </div>
  </article>

</main>

</body>
</html>