Dots3-Note Preview (free)

by Dots StudioReasoningClean

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

How it went

Total time: 35.4 s
Cost: $0
Output tokens: 3,757
Spent thinking: 0 tokens
Speed: 108.4 tok/s
Console errors: 0

First token after: 751 ms
First visible text after: 751 ms
Prompt tokens: 501
Code size: 10.1 KB
Finish reason: stop
Served by: AtlasCloud
Model id: dots-studio/dots-3-note-preview:free
Reasoning sent: {"effort":"none"}
Max output: 32,000 tokens
Generated: Nov 9, 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 · 428 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Weather Cards</title>
<style>
  :root {
    --card-width: 280px;
    --card-height: 400px;
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  }

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

  body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    color: #333;
  }

  .container {
    max-width: 1200px;
    width: 100%;
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--card-width), 1fr));
    gap: 2rem;
    justify-items: center;
  }

  .card {
    width: var(--card-width);
    height: var(--card-height);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: var(--transition);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

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

  /* Sunny Card */
  .sunny {
    background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
  }

  .sunny .icon-container {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto;
  }

  .sun {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    background: radial-gradient(circle at 30% 30%, #fff7b3, #ffc107);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 30px rgba(255, 193, 7, 0.8);
    z-index: 2;
  }

  .sun::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.7);
    animation: spin 20s linear infinite;
  }

  .sun-ray {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 25px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), transparent);
    transform-origin: 50% 0;
    border-radius: 2px;
  }

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

  @keyframes spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
  }

  /* Rainy Card */
  .rainy {
    background: linear-gradient(135deg, #2c3e50 0%, #4ca1af 100%);
  }

  .cloud {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 30px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    z-index: 2;
  }

  .cloud::before, .cloud::after {
    content: '';
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
  }

  .cloud::before {
    width: 30px;
    height: 30px;
    top: -15px;
    left: 10px;
  }

  .cloud::after {
    width: 40px;
    height: 40px;
    top: -20px;
    right: 10px;
  }

  .rain-drop {
    position: absolute;
    width: 3px;
    height: 15px;
    background: linear-gradient(to bottom, rgba(135, 206, 235, 0.8), rgba(135, 206, 235, 0.2));
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    top: 70px;
    left: 50%;
    animation: rain 1.5s linear infinite;
  }

  .rain-drop:nth-child(2) { left: 45%; animation-delay: 0.2s; }
  .rain-drop:nth-child(3) { left: 55%; animation-delay: 0.4s; }
  .rain-drop:nth-child(4) { left: 48%; animation-delay: 0.6s; }
  .rain-drop:nth-child(5) { left: 52%; animation-delay: 0.8s; }

  @keyframes rain {
    0% { transform: translateY(0) rotate(15deg); opacity: 1; }
    100% { transform: translateY(150px) rotate(15deg); opacity: 0; }
  }

  /* Snowy Card */
  .snowy {
    background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
  }

  .snowflake {
    position: absolute;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    top: 50px;
    left: 50%;
    animation: snow 4s linear infinite;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
  }

  .snowflake::before, .snowflake::after {
    content: '';
    position: absolute;
    background: white;
    border-radius: 50%;
  }

  .snowflake::before {
    width: 10px;
    height: 2px;
    top: 4px;
    left: -2px;
  }

  .snowflake::after {
    width: 2px;
    height: 10px;
    top: -2px;
    left: 4px;
  }

  .snowflake:nth-child(2) { left: 45%; animation-delay: 0.5s; animation-duration: 5s; }
  .snowflake:nth-child(3) { left: 55%; animation-delay: 1s; animation-duration: 3.5s; }
  .snowflake:nth-child(4) { left: 48%; animation-delay: 1.5s; animation-duration: 4.5s; }
  .snowflake:nth-child(5) { left: 52%; animation-delay: 2s; animation-duration: 3s; }

  @keyframes snow {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(180px) rotate(360deg); opacity: 0.7; }
  }

  /* Stormy Card */
  .stormy {
    background: linear-gradient(135deg, #232526 0%, #414345 100%);
  }

  .lightning {
    position: absolute;
    top: 50px;
    left: 50%;
    width: 4px;
    height: 60px;
    background: linear-gradient(to bottom, #fff, #ffcc00, #fff);
    transform: translateX(-50%);
    clip-path: polygon(0 0, 100% 20%, 50% 50%, 100% 80%, 0 100%);
    opacity: 0;
    animation: flash 3s infinite;
  }

  @keyframes flash {
    0%, 90%, 100% { opacity: 0; }
    92%, 94% { opacity: 1; }
    96% { opacity: 0.3; }
  }

  .cloud-dark {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 35px;
    background: rgba(50, 50, 50, 0.9);
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 1;
  }

  .cloud-dark::before, .cloud-dark::after {
    content: '';
    position: absolute;
    background: rgba(50, 50, 50, 0.9);
    border-radius: 50%;
  }

  .cloud-dark::before {
    width: 35px;
    height: 35px;
    top: -18px;
    left: 15px;
  }

  .cloud-dark::after {
    width: 45px;
    height: 45px;
    top: -22px;
    right: 15px;
  }

  /* Card Content */
  .city {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 1rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  }

  .temp {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0.5rem 0;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
  }

  .desc {
    font-size: 1rem;
    opacity: 0.9;
    text-align: center;
    text-transform: capitalize;
    margin-top: auto;
    padding-bottom: 1rem;
  }

  /* Accessibility: respect prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    .sun::before,
    .sun-ray,
    .rain-drop,
    .snowflake,
    .lightning {
      animation: none !important;
    }
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
    .grid {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
    
    .card {
      width: 100%;
      max-width: 400px;
      margin: 0 auto;
    }
  }

  @media (max-width: 480px) {
    body {
      padding: 1rem;
    }
    
    .card {
      height: 350px;
      padding: 1rem;
    }
    
    .temp {
      font-size: 2rem;
    }
    
    .city {
      font-size: 1.3rem;
    }
  }
</style>
</head>
<body>
  <div class="container">
    <div class="grid">
      <!-- Sunny Card -->
      <div class="card sunny">
        <div class="icon-container">
          <div class="sun"></div>
          <div class="sun-ray"></div>
          <div class="sun-ray"></div>
          <div class="sun-ray"></div>
          <div class="sun-ray"></div>
          <div class="sun-ray"></div>
          <div class="sun-ray"></div>
          <div class="sun-ray"></div>
          <div class="sun-ray"></div>
          <div class="sun-ray"></div>
          <div class="sun-ray"></div>
          <div class="sun-ray"></div>
          <div class="sun-ray"></div>
        </div>
        <div class="city">Los Angeles</div>
        <div class="temp">28°C</div>
        <div class="desc">Sunny and clear</div>
      </div>

      <!-- Rainy Card -->
      <div class="card rainy">
        <div class="cloud"></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="city">Seattle</div>
        <div class="temp">14°C</div>
        <div class="desc">Light rain</div>
      </div>

      <!-- Snowy Card -->
      <div class="card snowy">
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="snowflake"></div>
        <div class="city">Reykjavik</div>
        <div class="temp">-3°C</div>
        <div class="desc">Snow falling</div>
      </div>

      <!-- Stormy Card -->
      <div class="card stormy">
        <div class="cloud-dark"></div>
        <div class="lightning"></div>
        <div class="city">Miami</div>
        <div class="temp">22°C</div>
        <div class="desc">Thunderstorms</div>
      </div>
    </div>
  </div>
</body>
</html>