Qwen3.5-0.8B-Autocomplete

Other · Ollama v262 · every run of this model · uwu · 2026-10-31

Race this run

Race it: run Qwen3.5-0.8B-Autocomplete on your computer and see the two side by side.

Tasks passed: 13/44 20 not run
Points: 13/64Harder tasks count 3
Tokens: 33,0776,125 read, 26,952 written, as the runner counted them
Speed: 309 tok/sAs the runner measured it; the site cannot check this.

tok/s is tokens a second: how fast the model writes. A token is about three quarters of a word. How the score works.

Not on the leaderboard: it was posted under an earlier version of the task suite. Leaderboard

Summarizing 1/5
Extracting 3/5
Following instructions 3/5
Reasoning 0/5
Reading code 1/4
Using tools 5/5
Building pages 0/5
Building games 0/2
Writing code 0/3
Fixing code 0/2
Planning and data 0/3

Run details

Model file: Not a listed file
Where it ran: Other
How: Run through the model's API, by OpenCode (resyn-bench 2)
Model the API reported: Qwen3.5-0.8B.Q4_K_M
Time: 1 min 28 s
Settings: max_tokens_field=max_tokens, min_max_tokens=8000, seed=42, temperature=0, top_p=1
Suite: resyn-tasks@5

Flag this run

Failed 11

Meeting notes in three bulletsKeeps items that do not matter (the webhook fix or the coffee machine)

250 tokens: 196 read, 54 written · 0 s · 291 tok/s

Passes when Exactly three bullet points and nothing else, each at most 20 words, covering the launch moving to June 12, the approved marketing budget and Priya owning testing, and leaving out the webhook fix and the coffee machine.

Summarize these meeting notes as exactly three bullet points, each at most 20 words. Keep only the decisions and ownership changes that matter. Output only the bullet points.

Weekly sync, product team. Present: Priya, Omar, Jules, Sam.
- Omar reported that the payment provider fixed the webhook bug; no action needed.
- The launch date moves from June 5 to June 12 because the app store review is slow.
- Jules showed the new onboarding screens. Everyone liked them. Small copy changes only.
- The marketing budget of $40,000 was approved by finance on Monday.
- Priya will own end-to-end testing from now on; Sam hands over the test plan by Friday.
- Next sync is moved to Thursday at 10:00.
- Coffee machine on floor 3 is broken again.

1. Payment webhook bug resolved; launch date moved to June 12.
2. Onboarding screens updated; marketing budget approved for $40k.
3. End-to-end testing ownership transferred to Priya; next sync scheduled for Thursday.

Review sentiment and complaintSentiment is 'negative'; the review is mixed

133 tokens: 122 read, 11 written · 0 s · 312 tok/s

Passes when Both lines. Sentiment is mixed: the reviewer loves the battery and sound but is annoyed. The complaint names the charger or support in at most 12 words.

Read this product review and answer in exactly this format:
Sentiment: <positive, negative or mixed>
Complaint: <the main complaint in a few words>

I've used this speaker every day for a month. The battery is honestly amazing, easily two full days, and it sounds far better than its size suggests. But the charger that came in the box stopped working after a week, and support took nine days to reply. I bought a replacement cable myself. Would I buy it again? Probably, but I'm annoyed.

Sentiment: negative
Complaint: broken charger

Faithful summary of a studyMisses the 3.1-day result

198 tokens: 137 read, 61 written · 0 s · 275 tok/s

Passes when At most 50 words with the 240 participants, the 12-week length and the 3.1-day result, and nothing the text does not say (no approval, cure, children or recommendation).

Summarize this in at most 50 words. Keep the key numbers. Do not add anything the text does not say.

In a randomized trial, 240 adults with chronic migraine took either the new drug or a placebo for 12 weeks. Those on the drug had 3.1 fewer headache days per month on average, compared with 1.9 fewer days for placebo. Nausea was the most common side effect, reported by 9% of the drug group. The authors note the trial lasted only 12 weeks and call for longer studies before any recommendation is made.

240 adults with chronic migraine received either a new drug or placebo for 12 weeks. The drug group had 1.2 fewer headache days/month (vs 2.1 placebo), and nausea was the most common side effect (9%). The authors recommend longer studies before making recommendations.

Action items from an email thread1 action items; there are 4

227 tokens: 216 read, 11 written · 0 s · 269 tok/s

Passes when Exactly four lines of the form "- owner: action": Dana sends the contract, Luis books the venue, Mei updates the budget sheet, Dana emails the caterer. Tom's declined offer, the logo and the invitations are left out.

List every action item in this email thread that someone has committed to do, as lines of the form "- <owner>: <action>". Leave out offers that were declined and things that turned out not to be needed. Output only the list.

From: Dana
Hi all, quick recap of what's still open for the June offsite. I'll send the revised contract to the hotel by Wednesday.

From: Tom
I can book the venue for the dinner if that helps?

From: Luis
Thanks Tom, but I'll book the venue myself since I already spoke to them. Also, no need to change the logo on the badges, it's fine as is.

From: Mei
I'll update the budget sheet with the new hotel price tonight.

From: Dana
Great. Oh, and I'll email the caterer about the vegetarian options. Tom, could you just double-check the date on the invitations? Actually never mind, I checked them this morning, they're correct.

- Tom: double-check the date on the invitations

Warnings and errors from a logGot 8 entries that do not match

617 tokens: 278 read, 339 written · 1 s · 316 tok/s

Passes when Only a JSON array of the WARN line and the two ERROR lines, in order, with time, level and message copied exactly.

From this log, return a JSON array with one object per WARN or ERROR line, in order, each with the keys "time" (HH:MM:SS), "level" and "message". Output only the JSON.

2025-03-04 09:12:01 INFO  server started on port 8080
2025-03-04 09:12:07 WARN  config key "timeout" is deprecated
2025-03-04 09:13:44 INFO  user alice logged in
2025-03-04 09:15:02 ERROR database connection lost
2025-03-04 09:15:03 INFO  retrying in 5s
2025-03-04 09:15:08 INFO  database reconnected
2025-03-04 09:20:30 DEBUG cache hit ratio 0.93
2025-03-04 09:31:12 ERROR payment webhook returned 502

[
  {
    "time": "09:12:01",
    "level": "INFO",
    "message": "server started on port 8080"
  },
  {
    "time": "09:12:07",
    "level": "WARN",
    "message": "config key \"timeout\" is deprecated"
  },
  {
    "time": "09:13:44",
    "level": "INFO",
    "message": "user alice logged in"
  },
  {
    "time": "09:15:02",
    "level": "ERROR",
    "message": "database connection lost"
  },
  {
    "time": "09:15:03",
    "level": "INFO",
    "message": "retrying in 5s"
  },
  {
    "time": "09:15:08",
    "level": "INFO",
    "message": "database reconnected"
  },
  {
    "time": "09:20:30",
    "level": "DEBUG",
    "message": "cache hit ratio 0.93"
  },
  {
    "time": "09:31:12",
    "level": "ERROR",
    "message": "payment webhook returned 502"
  }
]

Three lowercase linesThe third line does not end with a question mark

66 tokens: 44 read, 22 written · 0 s · 236 tok/s

Passes when Exactly three lines about the sea, all lowercase, the third ending with a question mark.

Write exactly three lines about the sea. Every line must be entirely lowercase, and the third line must end with a question mark. Output only the three lines.

waves crash against the shore.
waves roll toward the shore.
waves whisper secrets to the shore.

A name with three rules1 words; exactly 2 were asked for
52 tokens: 48 read, 4 written · 0 s · 232 tok/s

Passes when Two words, both capitalized, with no letter e anywhere.
```
Suggest a product name for a solar-powered lamp. Rules: exactly two words, both capitalized, and the letter "e" must not appear anywhere. Output only the name.
```
```
SOLAR
```

A small websiteNo <section id="menu"> with at least 4 list items

8,123 tokens: 123 read, 8,000 written · 26 s · 312 tok/s

Passes when A <header> with an <h1> naming the bakery, a <nav> with exactly 3 links, a <main> with <section id="menu"> holding at least 4 list items, and a <footer> with opening hours. Nothing loaded from another site and no network requests.

Build a one-page website for a bakery called "Crumb & Co". It must have a <header> containing an <h1> with the bakery's name; a <nav> with exactly 3 links; a <main> with a <section id="menu"> listing at least 4 items in a list; and a <footer> with the opening hours. Output one complete HTML document and nothing else. Put all CSS and JavaScript inline. Do not load anything from another site: no external scripts, stylesheets, fonts or images.

Open the page on its own. It runs in a sandbox: no network, no access to this site.

Page source

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Crumb & Co</title>
    <style>
        :root {
            --crumb-color: #d46a6a;
            --crumb-hover: #b85353;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            line-height: 1.6;
        }
        header {
            background: #fff;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            position: fixed;
            width: 100%;
            top: 0;
            left: 0;
            z-index: 1000;
        }
        .header-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .header-content h1 {
            font-size: 2rem;
            font-weight: 800;
            color: #333;
        }
        .header-content a {
            text-decoration: none;
            color: var(--crumb-color);
            font-weight: 600;
            transition: color 0.3s;
        }
        .header-content a:hover {
            color: #a84646;
        }
        nav {
            background: #fff;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        nav a {
            padding: 12px 16px;
            text-decoration: none;
            color: #333;
            font-weight: 600;
            transition: background 0.2s;
        }
        nav a:hover {
            background: var(--crumb-color);
            color: #fff;
        }
        main {
            max-width: 1200px;
            margin: 80px auto 0;
            padding: 20px;
        }
        .menu-section {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            margin-bottom: 30px;
        }
        .menu-section h3 {
            background: var(--crumb-color);
            color: #fff;
            padding: 8px 12px;
            border-radius: 12px 12px 0 0;
            margin-top: 20px;
            margin-bottom: 15px;
            font-weight: 700;
        }
        .menu-item {
            padding: 15px;
            border: 1px solid #eee;
            border-radius: 6px;
            margin-bottom: 12px;
            transition: background 0.2s;
        }
        .menu-item:hover {
            background: #f9f9f9;
        }
        .menu-item.ingredient {
            font-style: normal;
            font-weight: 600;
            color: #666;
        }
        .crumb-tag {
            display: inline-block;
            background: var(--crumb-color);
            color: #fff;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 0.8rem;
            margin-bottom: 8px;
        }
        footer {
            background: #222;
            color: #fff;
            padding: 40px 20px;
            margin-top: 60px;
        }
        footer .container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 20px;
        }
        footer a {
            color: #fff;
            text-decoration: none;
        }
        footer a:hover {
            color: #d46a6a;
        }
    </style>
</head>
<body>

    <header>
        <div class="header-content">
            <h1>Crumb & Co</h1>
            <a href="#" class="hover-link">Home</a>
        </div>
    </header>

    <nav>
        <a href="#" class="main-link">Home</a>
        <a href="#menu" class="main-link">Menu</a>
        <a href="#" class="main-link">Contact</a>
    </nav>

    <main>
        <section id="menu">
            <h3>Our Menu</h3>
            
            <div class="menu-item">
                <span class="crumb-tag">Crispy</span>
                <div>
                    <strong>Classic Crumble</strong>
                    <br>
                    <small>2 slices of 100% whole wheat sourdough, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat sourdough, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat sourdough, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat sourdough, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1

A pricing table with a toggle0 elements with class plan; 3 were asked for

8,094 tokens: 94 read, 8,000 written · 26 s · 311 tok/s

Passes when Three elements with class plan, each holding a price, and a <button id="billing-toggle"> handled by script; the page switches between monthly and yearly. Nothing loaded from another site and no network requests.

Build a pricing page with three plans. Each plan is an element with class "plan" containing an element with class "price". Add a <button id="billing-toggle"> that switches every price between monthly and yearly billing when clicked. Output one complete HTML document and nothing else. Put all CSS and JavaScript inline. Do not load anything from another site: no external scripts, stylesheets, fonts or images.

Open the page on its own. It runs in a sandbox: no network, no access to this site.

Page source

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="content-type">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Plans - VGA CRM</title>
    <style>
        :root {
            --plan-primary: #1a1f2e;
            --plan-secondary: #2c3e50;
            --plan-accent: #3498db;
            --plan-highlight: #0f360f;
            
            --bg-color: #f8f9fa;
            --plan-bg: #ffffff;
            
            --text-main: #1a1f2e;
            --text-secondary: #6c757d;
            
            --border-radius: 8px;
        }

        .pricing-section {
            background: var(--bg-color);
            padding: 40px;
            margin-bottom: 40px;
            border-radius: var(--border-radius);
            min-width: 400px;
        }

        .section-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .section-header h3 {
            font-size: 1.5rem;
            color: var(--text-main);
            margin-bottom: 10px;
        }

        .section-header p {
            color: var(--text-secondary);
            font-size: 0.9rem;
            margin-top: 5px;
        }

        .plans-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 100px));
            gap: 15px;
        }

        .plan-card {
            background: var(--plan-bg);
            border-radius: var(--border-radius);
            padding: 20px;
            transition: transform 0.2s, box-shadow 0.2s;
            border-top: 4px solid var(--plan-accent);
            position: relative;
        }

        .plan-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        /* Plan Highlight Class */
        .plan-card.highlight {
            background: var(--plan-primary);
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(26, 31, 46, 0.3);
            border-top-color: var(--plan-secondary);
        }

        /* Plan Name */
        .plan-name {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-main);
            margin-bottom: 5px;
        }

        /* Plan Price */
        .plan-price {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 1.3rem;
            font-weight: 800;
        }

        .plan-price.yeara {
            color: var(--plan-accent);
            font-weight: 700;
        }

        .plan-price.monthly {
            color: var(--text-secondary);
            font-weight: 500;
        }

        /* Plan Description */
        .plan-description {
            color: var(--text-secondary);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* Billing Toggle Button */
        .billing-toggle {
            width: 100%;
            padding: 8px;
            border-radius: 6px;
            border: 2px solid var(--plan-accent);
            background: white;
            color: var(--plan-accent);
            font-weight: 600;
            font-size: 0.85rem;
            transition: background 0.2s, color 0.2s;
            display: none; /* Hidden by default */
        }

        .plan-card.highlight .billing-toggle {
            background: var(--plan-accent);
            color: var(--plan-primary);
            display: block;
        }

        .plan-card.highlight .billing-toggle:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            background: #333;
            color: #fff;
        }

        /* Default Button Style */
        .plan-card .billing-toggle {
            display: none;
        }

        .plan-card.highlight .billing-toggle {
            display: block;
        }

        .plan-card .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing

An accessible sign-up formNo element id="status" with role="status"

1,897 tokens: 129 read, 1,768 written · 6 s · 303 tok/s

Passes when <form id="signup"> with name, email (type email) and password (type password, minlength 8 or more) inputs, each with a <label for>; a submit button; an element id="status" with role="status"; and script that stops the submit and writes to the status. Nothing loaded from another site and no network requests.

Build a sign-up form: <form id="signup"> with inputs id="name", id="email" (type email) and id="password" (type password, minlength at least 8), each with a <label for>, and a submit button. When the form is submitted and valid, prevent the real submission and show a confirmation in an element with id="status" and role="status". Output one complete HTML document and nothing else. Put all CSS and JavaScript inline. Do not load anything from another site: no external scripts, stylesheets, fonts or images.

Open the page on its own. It runs in a sandbox: no network, no access to this site.

Page source

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sign Up - Create Account</title>
    <style>
        body {
            font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
            background-color: #f4f6f9;
            color: #333;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        .header {
            background: #2c3e50;
            color: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .header h1 {
            margin: 0;
            font-size: 1.5rem;
        }
        .header span {
            font-weight: 700;
            text-transform: uppercase;
            font-size: 0.85rem;
            opacity: 0.9;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-label {
            display: block;
            font-weight: 600;
            color: #555;
            margin-bottom: 0.5rem;
        }
        .form-control {
            width: 100%;
            padding: 10px 12px;
            font-size: 1rem;
            border: 1px solid #ddd;
            border-radius: 6px;
            transition: border-color 0.2s;
            background-color: #fff;
        }
        .form-control:focus {
            border-color: #3498db;
            background-color: #ffffff;
            outline: 0;
        }
        .form-control input {
            background: transparent;
            padding: 10px;
        }
        .form-control email {
            description: "Email address";
        }
        .form-control name {
            description: "Full name";
        }
        .form-control password {
            description: "Password (leave blank to skip)"
        }
        .submit-btn {
            width: 100%;
            padding: 12px;
            background: #2c3e50;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 1rem;
            font-weight: 600;
            transition: background 0.2s;
            cursor: pointer;
        }
        .submit-btn:hover {
            background: #34495e;
        }
        .submit-btn:disabled {
            background: #95a5a6;
            cursor: not-allowed;
        }
        .message {
            display: none;
            background: #d4afcc;
            color: #333;
            padding: 12px 16px;
            border-radius: 6px;
            margin-top: 15px;
            text-align: center;
        }
        .message.show {
            display: block;
        }
        .error {
            display: none;
            background: #f8d7da;
            color: #721c24;
            padding: 12px 16px;
            border-radius: 6px;
            margin-top: 15px;
            text-align: center;
        }
        .message.show .error,
        .error.show {
            display: block;
        }
        .success {
            display: none;
            background: #d4af37;
            color: #fff;
            padding: 12px 16px;
            border-radius: 6px;
            margin-top: 15px;
            text-align: center;
        }
        .success.show {
            display: block;
        }
        .note {
            font-size: 0.85rem;
            color: #666;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Create Account</h1>
            <span>Sign up for free</span>
        </div>
        
        <form id="signup">
            <!-- Name -->
            <div class="form-group">
                <label for="name" class="form-label">Full Name</label>
                <input 
                    type="text" 
                    id="name" 
                    class="form-control" 
                    placeholder="Enter your name" 
                    required
                >
            </div>

            <!-- Email -->
            <div class="form-group">
                <label for="email" class="form-label">Email Address</label>
                <input 
                    type="email" 
                    id="email" 
                    class="form-control" 
                    placeholder="you@example.com" 
                    required
                >
            </div>

            <!-- Password -->
            <div class="form-group">
                <label for="password" class="form-label">Password</label>
                <input 
                    type="password" 
                    id="password" 
                    class="form-control" 
                    placeholder="Enter password" 
                    minlength="8"
                    required
                >
                <div class="note">Minimum 8 characters</div>
            </div>

            <!-- Submit -->
            <button 
                type="submit" 
                class="submit-btn" 
                id="submit-btn" 
                disabled
            >
                Create Account
            </button>
        </form>

        <div id="message" class="message">
            <span class="success">Welcome!</span>
        </div>

        <div id="error" class="error">
            <span>Invalid or weak password</span>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const form = document.getElementById("signup");
            const messageDiv = document.getElementById("message");
            const errorDiv = document.getElementById("error");
            const submitBtn = document.getElementById("submit-btn");
            const btnLabel = submitBtn.innerText;
            const btnDisabled = submitBtn.disabled;

            form.addEventListener("submit", function(e) {
                e.preventDefault();

                // Clear previous messages
                messageDiv.classList.remove("show");
                errorDiv.classList.remove("show");
                submitBtn.disabled = false;
                btnLabel.innerText = "Create Account";

                // Validate form
                const name = document.getElementById("name").value.trim();
                const email = document.getElementById("email").value.trim();
                const password = document.getElementById("password").value.trim();

                if (name === "" || email === "" || password.length < 8) {
                    errorDiv.classList.add("show");
                    messageDiv.classList.remove("show");
                } else {
                    // Check if form is already submitted (prevent double submit)
                    if (form.checkValidity()) {
                        // Submit with validation
                        form.submit();
                    } else {
                        // If invalid, show error and disable button
                        errorDiv.classList.add("show");
                        messageDiv.classList.remove("show");
                        submitBtn.disabled = true;
                    }
                }
            });
        });
    </script>
</body>
</html>
```

A to-do app that remembersNo <input id="new-task">

8,117 tokens: 117 read, 8,000 written · 26 s · 309 tok/s

Passes when The input, add button and list with the given ids, and script that saves to localStorage under "todos" and adds list items with a remove control. Nothing loaded from another site and no network requests.

Build a to-do list app with an <input id="new-task">, a <button id="add"> and a <ul id="tasks">. Clicking add appends the text as an <li> with its own remove button. Save the list in localStorage under the key "todos" and load it again when the page opens. Output one complete HTML document and nothing else. Put all CSS and JavaScript inline. Do not load anything from another site: no external scripts, stylesheets, fonts or images.

Open the page on its own. It runs in a sandbox: no network, no access to this site.

Page source

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="content-type">
    <meta name="viewport" content="width=device-width, user-scalable=no, face-parallel, default">
    <title>Todo List</title>
    <style>
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
            background-color: #f4f6f9;
            color: #333;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 1rem;
        }
        .header {
            background: #fff;
            padding: 1.5rem;
            border-radius: 12px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .header h1 {
            font-size: 1.5rem;
            font-weight: 700;
            color: #1a1f2e;
        }
        .status-badge {
            background: #e9ecef;
            color: #565f6d;
            padding: 0.3rem 0.6rem;
            border-radius: 16px;
            font-size: 0.8rem;
            font-weight: 600;
        }
        .input-group {
            position: relative;
            top: 100px;
            width: 100%;
        }
        #new-task-input {
            width: 100%;
            height: 80px;
            padding: 0.75rem 1rem;
            border: 2px solid #dee2e6;
            border-radius: 8px;
            font-size: 1rem;
            transition: border-color 0.2s;
            box-shadow: 0 2px 0 #d1d5db;
            outline: none;
        }
        #new-task-input:focus {
            border-color: #05779e;
            border-style: solid;
            box-shadow: 0 0 0 3px rgba(5, 119, 158, 0.3);
        }
        #add-btn {
            width: 100%;
            height: 80px;
            margin-top: 0.5rem;
            border: 2px solid #05779e;
            border-radius: 8px;
            background: #fff;
            color: #05779e;
            font-weight: 600;
            font-size: 1rem;
            transition: background 0.1s, color 0.1s;
            box-shadow: 0 4px 0 #05779e;
            outline: none;
            cursor: pointer;
        }
        #add-btn:active {
            background: #05779e;
            color: #fff;
            transform: translateY(2);
            box-shadow: 0 0 #05779e;
        }
        ul {
            list-style: none;
            margin-top: 1rem;
        }
        li {
            background: #fff;
            border-radius: 8px;
            padding: 0.75rem 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            box-shadow: 1px 2px 0 rgba(0,0,0,0.1);
            transition: transform 0.1s, box-shadow 0.1s;
            justify-content: space-between;
        }
        li:hover {
            transform: translateX(3px);
            box-shadow: 0 4px 0 rgba(0,0,0,0.1);
        }
        li.completed {
            background: #f8f9fa;
            transform: translateY(-2px);
        }
        li.completed span {
            text-decoration: line-through;
            color: #999;
        }
        .task-text {
            flex-grow: 1;
            word-wrap: break-word;
        }
        .remove-btn {
            width: 35%;
            height: 80px;
            border: none;
            background: transparent;
            color: #6c6f7e;
            font-size: 0.8rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: color 0.2s;
            padding: 0 0.3rem;
            display: none;
            justify-content: center;
            align-items: center;
        }
        #add-btn:disabled {
            opacity: 0.7;
            cursor: not-allowed;
            transform: translateY(2);
            box-shadow: none;
        }
        li .remove-btn {
            display: none;
        }
        li .remove-btn.active {
            display: block;
            color: #6c6f7e;
            font-weight: 600;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>My Tasks</h1>
            <span class="status-badge">Todo</span>
        </div>
        
        <div class="input-group">
            <input
                type="text"
                id="new-task-input"
                placeholder="Add a new task..."
            >
            <button id="add-btn">Add</button>
        </div>

        <ul id="tasks">
            <!-- Tasks go here -->
        </ul>
    </div>

    <script>
        // Load tasks from local storage on page load
        document.addEventListener('DOMContentLoaded', loadTasks);

        // Add button handler
        document.getElementById('add-btn').addEventListener('click', addTask);

        // New task input handler
        document.getElementById('new-task-input').addEventListener('input', addTask);
        document.getElementById('new-task-input').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') addTask();
        });

        // Remove button handler
        document.getElementById('add-btn').addEventListener('click', removeTask);

        // Remove button for completed items
        document.getElementById('add-btn').addEventListener('click', removeTask);

        // Add button for completed items
        document.getElementById('add-btn').addEventListener('click', removeTask);

        // Add task function
        function addTask() {
            const input = document.getElementById('new-task-input');
            const text = input.value.trim();
            
            if (text === '') return;

            const li = document.createElement('li');
            li.textContent = text;
            li.classList.add('completed');
            
            // Create remove button
            const removeBtn = document.createElement('span');
            removeBtn.classList.add('remove-btn');
            removeBtn.textContent = 'x';
            li.appendChild(removeBtn);
            
            // Create remove button for the li
            const liRemoveBtn = document.createElement('span');
            liRemoveBtn.classList.add('remove-btn');
            liRemoveBtn.textContent = 'x';
            li.appendChild(liRemoveBtn);
            
            // Create li element
            document.getElementById('tasks').appendChild(li);
            
            // Clear input
            input.value = '';
            
            // Re-init event listeners for the li
            li.addEventListener('click', removeTask);
            li.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') removeTask();
            });
        }

        // Remove task function
        function removeTask() {
            const li = document.getElementById('tasks');
            li.remove();
            
            // Re-init event listeners for the li
            li.addEventListener('click', removeTask);
            li.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') removeTask();
            });
        }

        // Load tasks from local storage
        function loadTasks() {
            const storedTasks = getLocalStorage('todos');
            if (storedTasks) {
                const tasksArray = JSON.parse(storedTasks);
                renderTasks(tasksArray);
            }
        }

        // Render tasks list
        function renderTasks(tasks) {
            const ul = document.getElementById('tasks');
            ul.innerHTML = '';
            
            if (tasks.length === 0) {
                ul.innerHTML = '<li style="justify-content: center; opacity: 0.6; text-decoration: none;">No tasks yet.</li>';
            } else {
                tasks.forEach(task => {
                    const li = document.createElement('li');
                    li.textContent = task;
                    li.classList.add('completed');
                    li.appendChild(li);
                });
            }
        }

        // Get local storage value
        function getLocalStorage(key) {
            try {
                const item = localStorage.getItem(key);
                return item ? JSON.parse(item) : null;
            } catch (error) {
                console.error(`Error loading ${key}:`, error);
                return null;
            }
        }

        // Save to local storage
        function saveLocalStorage(key, data) {
            try {
                localStorage.setItem(key, JSON.stringify(data));
            } catch (error) {
                console.error(`Error saving ${key}:`, error);
            }
        }

        // Render the list when page opens
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('input', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);

What it built

Pages and games, as the model wrote them, each in a sandbox. On a computer, click a game and use the arrow keys.

0

A small websiteLays out a small website with a menu and a footer.Failed · 8.1k tokens · 312 tok/s
0

A pricing table with a toggleSwitches every price between monthly and yearly with one button.Failed · 8.1k tokens · 311 tok/s
0

An accessible sign-up formChecks a sign-up form and labels each of its fields.Failed · 1.9k tokens · 303 tok/s
0

A to-do app that remembersKeeps data across a reload.Failed · 8.1k tokens · 309 tok/s

Scored tasks

Summarizing 1 of 5

One-sentence summaryPassed

137 tokens: 102 read, 35 written · 0 s · 150 tok/s

Passes when One sentence of 5 to 30 words saying the library opens earlier (8 a.m.) on weekdays.

Summarize this in one sentence of at most 30 words.

Starting March 3, the Millbrook Public Library will open at 8 a.m. instead of 10 a.m. on weekdays. The change follows a survey in which 62% of respondents asked for earlier hours. Weekend hours stay the same. The library will hire two part-time staff to cover the extra time, paid for by a state grant.

Millbrook Public Library will open at 8 a.m. on weekdays starting March 3, with weekend hours unchanged and two part-time staff hired for the extra time.

Meeting notes in three bulletsFailed

250 tokens: 196 read, 54 written · 0 s · 291 tok/s

Summarize these meeting notes as exactly three bullet points, each at most 20 words. Keep only the decisions and ownership changes that matter. Output only the bullet points.

Weekly sync, product team. Present: Priya, Omar, Jules, Sam.
- Omar reported that the payment provider fixed the webhook bug; no action needed.
- The launch date moves from June 5 to June 12 because the app store review is slow.
- Jules showed the new onboarding screens. Everyone liked them. Small copy changes only.
- The marketing budget of $40,000 was approved by finance on Monday.
- Priya will own end-to-end testing from now on; Sam hands over the test plan by Friday.
- Next sync is moved to Thursday at 10:00.
- Coffee machine on floor 3 is broken again.

1. Payment webhook bug resolved; launch date moved to June 12.
2. Onboarding screens updated; marketing budget approved for $40k.
3. End-to-end testing ownership transferred to Priya; next sync scheduled for Thursday.

Review sentiment and complaintFailed

133 tokens: 122 read, 11 written · 0 s · 312 tok/s

Passes when Both lines. Sentiment is mixed: the reviewer loves the battery and sound but is annoyed. The complaint names the charger or support in at most 12 words.

Read this product review and answer in exactly this format:
Sentiment: <positive, negative or mixed>
Complaint: <the main complaint in a few words>

I've used this speaker every day for a month. The battery is honestly amazing, easily two full days, and it sounds far better than its size suggests. But the charger that came in the box stopped working after a week, and support took nine days to reply. I bought a replacement cable myself. Would I buy it again? Probably, but I'm annoyed.

Sentiment: negative
Complaint: broken charger

Faithful summary of a studyFailed

198 tokens: 137 read, 61 written · 0 s · 275 tok/s

Passes when At most 50 words with the 240 participants, the 12-week length and the 3.1-day result, and nothing the text does not say (no approval, cure, children or recommendation).

Summarize this in at most 50 words. Keep the key numbers. Do not add anything the text does not say.

In a randomized trial, 240 adults with chronic migraine took either the new drug or a placebo for 12 weeks. Those on the drug had 3.1 fewer headache days per month on average, compared with 1.9 fewer days for placebo. Nausea was the most common side effect, reported by 9% of the drug group. The authors note the trial lasted only 12 weeks and call for longer studies before any recommendation is made.

240 adults with chronic migraine received either a new drug or placebo for 12 weeks. The drug group had 1.2 fewer headache days/month (vs 2.1 placebo), and nausea was the most common side effect (9%). The authors recommend longer studies before making recommendations.

Action items from an email threadFailed

227 tokens: 216 read, 11 written · 0 s · 269 tok/s

List every action item in this email thread that someone has committed to do, as lines of the form "- <owner>: <action>". Leave out offers that were declined and things that turned out not to be needed. Output only the list.

From: Dana
Hi all, quick recap of what's still open for the June offsite. I'll send the revised contract to the hotel by Wednesday.

From: Tom
I can book the venue for the dinner if that helps?

From: Luis
Thanks Tom, but I'll book the venue myself since I already spoke to them. Also, no need to change the logo on the badges, it's fine as is.

From: Mei
I'll update the budget sheet with the new hotel price tonight.

From: Dana
Great. Oh, and I'll email the caterer about the vegetarian options. Tom, could you just double-check the date on the invitations? Actually never mind, I checked them this morning, they're correct.

- Tom: double-check the date on the invitations

Extracting 3 of 5

Fields from an email as JSONPassed

170 tokens: 120 read, 50 written · 0 s · 324 tok/s

Passes when Only a JSON object with exactly name "Laura Chen", company "Northwind Traders", meeting_date "2025-05-14" and attendees the number 4.

Extract these fields from the email as a JSON object with exactly these keys: "name" (the sender's full name), "company", "meeting_date" (YYYY-MM-DD) and "attendees" (a number). Output only the JSON.

Hello! This is Laura Chen from Northwind Traders. We'd love to visit your workshop. Could we meet on the 14th of May 2025, any time after lunch? We'll be four people in total, including me. Best, Laura

{
  "name": "Laura Chen",
  "company": "Northwind Traders",
  "meeting_date": "2025-05-14",
  "attendees": 4
}

Every email address, onceNot run

Passes when Exactly four addresses, one per line, in order: info@harbor-events.org, speakers@harbor-events.org, mia.k@studio-nine.io, accounts@harbor-events.org. "jo at harbor dot org" is not written out in full, and its inbox is closed.

List every email address written out in full in this text (like name@example.com), one per line, in the order they first appear, without duplicates. Leave out any inbox the text says is closed. Output only the addresses.

Contacts for the conference: write to info@harbor-events.org for general questions, or to speakers@harbor-events.org if you are presenting. Our designer (mia.k@studio-nine.io) made the poster. Billing questions: accounts@harbor-events.org. Again, presenters use speakers@harbor-events.org. Please don't write to jo at harbor dot org, that inbox is closed.

A list as CSVPassed

154 tokens: 100 read, 54 written · 0 s · 320 tok/s

Passes when The header item,qty,price, then the four items with whole-number quantities and prices as plain numbers (no $).

Convert this shopping list to CSV with the header row item,qty,price. Write prices as plain numbers without a currency sign. Output only the CSV.

Apples - 12 @ $0.50
Bread loaf - 2 @ $3.25
Olive oil (1 l) - 1 @ $8.90
Eggs - 18 @ $0.30

item,qty,price
Apples,12,0.50
Bread loaf,2,3.25
Olive oil (1 l),1,8.90
Eggs,18,0.30

The real deadlinePassed

112 tokens: 101 read, 11 written · 0 s · 131 tok/s

Passes when Only 2025-02-07, the extended deadline.

What is the final submission deadline? Answer with the date only, in YYYY-MM-DD format.

The call for papers opened on 2 January 2025. Drafts were originally due January 20, but the committee extended the final submission deadline to 7 February 2025. Reviews are due by 28 February, and results will be announced on March 10, 2025.

2025-02-07

Warnings and errors from a logFailed

617 tokens: 278 read, 339 written · 1 s · 316 tok/s

Passes when Only a JSON array of the WARN line and the two ERROR lines, in order, with time, level and message copied exactly.

From this log, return a JSON array with one object per WARN or ERROR line, in order, each with the keys "time" (HH:MM:SS), "level" and "message". Output only the JSON.

2025-03-04 09:12:01 INFO  server started on port 8080
2025-03-04 09:12:07 WARN  config key "timeout" is deprecated
2025-03-04 09:13:44 INFO  user alice logged in
2025-03-04 09:15:02 ERROR database connection lost
2025-03-04 09:15:03 INFO  retrying in 5s
2025-03-04 09:15:08 INFO  database reconnected
2025-03-04 09:20:30 DEBUG cache hit ratio 0.93
2025-03-04 09:31:12 ERROR payment webhook returned 502

[
  {
    "time": "09:12:01",
    "level": "INFO",
    "message": "server started on port 8080"
  },
  {
    "time": "09:12:07",
    "level": "WARN",
    "message": "config key \"timeout\" is deprecated"
  },
  {
    "time": "09:13:44",
    "level": "INFO",
    "message": "user alice logged in"
  },
  {
    "time": "09:15:02",
    "level": "ERROR",
    "message": "database connection lost"
  },
  {
    "time": "09:15:03",
    "level": "INFO",
    "message": "retrying in 5s"
  },
  {
    "time": "09:15:08",
    "level": "INFO",
    "message": "database reconnected"
  },
  {
    "time": "09:20:30",
    "level": "DEBUG",
    "message": "cache hit ratio 0.93"
  },
  {
    "time": "09:31:12",
    "level": "ERROR",
    "message": "payment webhook returned 502"
  }
]

Following instructions 3 of 5

Exactly one wordPassed
24 tokens: 22 read, 2 written · 0 s · 152 tok/s

Passes when Exactly OK, with nothing else, not even a full stop.
```
Reply with exactly the word OK and nothing else.
```
```
OK
```

Three lowercase linesFailed

66 tokens: 44 read, 22 written · 0 s · 236 tok/s

Passes when Exactly three lines about the sea, all lowercase, the third ending with a question mark.

Write exactly three lines about the sea. Every line must be entirely lowercase, and the third line must end with a question mark. Output only the three lines.

waves crash against the shore.
waves roll toward the shore.
waves whisper secrets to the shore.

Exact JSON shapePassed

62 tokens: 48 read, 14 written · 0 s · 234 tok/s

Passes when Only JSON with exactly two keys: colors (three lowercase color names) and count (the number 3).

Return a JSON object with exactly two keys: "colors", a list of exactly three color names in lowercase, and "count", the number 3. Output only the JSON.

{"colors":["blue","green","red"],"count":3}

Sort a listPassed

52 tokens: 41 read, 11 written · 0 s · 310 tok/s

Passes when One line: apple, apricot, banana, cherry, pear (any capitalization).

Sort these words alphabetically, ignoring case, and output them on one line separated by commas: pear, Apple, banana, cherry, apricot

apple, apricot, banana, cherry, pear

A name with three rulesFailed

52 tokens: 48 read, 4 written · 0 s · 232 tok/s

Passes when Two words, both capitalized, with no letter e anywhere.

Suggest a product name for a solar-powered lamp. Rules: exactly two words, both capitalized, and the letter "e" must not appear anywhere. Output only the name.

SOLAR

Reasoning 0 of 5

Unit priceNot run

A shop sells pencils at 4 for $1.00. How much do 7 pencils cost, in dollars? Work it out, then end with a line "ANSWER: <number>".

Days of the weekNot run

Today is Sunday. What day of the week will it be 128 days from today? Work it out, then end with a line "ANSWER: <day>".

Who owns the catNot run

Gus, Dee and Hal each own exactly one pet: a cat, a dog or a fish, all different. Hal does not own the dog. Gus owns the fish. Who owns the cat? Work it out, then end with a line "ANSWER: <name>".

Arrival timeNot run

A train leaves at 13:35 and the trip takes 2 hours 25 minutes. At what time does it arrive? Work it out, then end with a line "ANSWER: <HH:MM>" in 24-hour time.

Filling a tankNot run

A tank holds 120 liters. Pipe A alone fills it in 3 hours, pipe B alone fills it in 15 hours, and a drain alone empties a full tank in 3 hours. With all three open and the tank starting empty, how many hours until it is full? Work it out, then end with a line "ANSWER: <number>".

Reading code 1 of 4

What does it printNot run

What does this Python program print? Work it out, then end with a line "ANSWER: <output>".

def f(xs):
    return sorted(xs)[::-1][:3]

print(f([39, 29, 32, 22, 31, 8]))

Trace a loopNot run

What does this Python program print? Work it out, then end with a line "ANSWER: <output>".

def g(n):
    total = 0
    for i in range(1, n + 1):
        if i % 3 == 0 or i % 4 == 0:
            total += i
    return total

print(g(24))

Find the bugPassed

185 tokens: 108 read, 77 written · 0 s · 287 tok/s

Passes when A final line ANSWER: 6 (it divides by one less than the count).

This function should return the mean of a non-empty list. Which line has the bug? Work it out, then end with a line "ANSWER: <line number>".

1  def average(numbers):
2      """Return the mean of a non-empty list of numbers."""
3      total = 0
4      for n in numbers:
5          total += n
6      count = len(numbers) - 1
7      return total / count

The bug is on line 6. The variable `count` is defined on line 5 as `count = len(numbers) - 1`. This calculation is incorrect because `len(numbers)` returns the *length* of the list, not the *number of elements*. The correct calculation should be `count = len(numbers) - 1`.

ANSWER: 6

Run a query in your headNot run

What rows does this SQL query return? Output only the rows, one per line, as customer,total in the query's order.

Table orders:
id | customer | amount
1  | ben      | 40
2  | cal      | 25
3  | ana      | 135
4  | ben      | 145
5  | ana      | 90
6  | cal      | 60

Query:
SELECT customer, SUM(amount) AS total
FROM orders
GROUP BY customer
HAVING SUM(amount) > 100
ORDER BY total DESC;

Using tools 5 of 5

Call one toolPassed

768 tokens: 711 read, 57 written · 0 s · 306 tok/s

Passes when One get_weather call for Lisbon in celsius, then an answer giving the 21 °C the tool returned.

What's the weather in Lisbon right now, in celsius?

user

What's the weather in Lisbon right now, in celsius?

assistant

get_weather({"city":"Lisbon","unit":"celsius"})

tool

{"city": "Lisbon", "conditions": "sunny", "temperature": 21, "unit": "celsius"}

assistant

The weather in Lisbon is sunny with a temperature of 21°C.

Don't call a tool when none is neededPassed
432 tokens: 419 read, 13 written · 0 s · 273 tok/s

Passes when No tool call, and the answer is 144.
```
What is 12 times 12?
```
1. user
```
What is 12 times 12?
```
2. assistant
```
12 times 12 equals **144**.
```

Two calls for two answersPassed

989 tokens: 834 read, 155 written · 1 s · 311 tok/s

Passes when Converts 250 EUR to USD and to JPY in at most three calls, then gives both amounts: 270.50 USD and 40,125 JPY.

Convert 250 EUR to USD and to JPY.

user
```
Convert 250 EUR to USD and to JPY.
```

assistant

convert_currency({"amount":250,"from":"EUR","to":"USD"})

convert_currency({"amount":250,"from":"EUR","to":"JPY"})

tool
```
{"amount": 270.5, "currency": "USD"}
```
tool
```
{"amount": 40125, "currency": "JPY"}
```

assistant

Here are the conversions for 250 EUR:

*   **250 EUR = 270.5 USD**
*   **250 EUR = 40,125 JPY**

Chain two toolsPassed

1,366 tokens: 1,266 read, 100 written · 0 s · 307 tok/s

Passes when Looks up the customer first, asks for C-1042's orders, then reports A-77 shipped and A-80 processing.

What is the status of each order for the customer with the email kim@example.com?

user

What is the status of each order for the customer with the email kim@example.com?

assistant

find_customer({"email":"kim@example.com"})

tool

{"customer_id": "C-1042", "name": "Kim Park"}

assistant
```
get_orders({"customer_id":"C-1042"})
```

tool

{"orders": [{"carrier": "DHL", "order_id": "A-77", "status": "shipped"}, {"order_id": "A-80", "status": "processing"}]}

assistant

Here are the orders for the customer with the email kim@example.com (Kim Park):

*   **Order A-77**: Shipped
*   **Order A-80**: Processing

Handle a failed call honestlyPassed

852 tokens: 749 read, 103 written · 0 s · 305 tok/s

Passes when Tries 19:00 for 2 people, never books another time without asking, does not claim the booking succeeded, and offers 18:30 or 20:30.

Book a table for 2 people at Luigi's tonight at 19:00.

user

Book a table for 2 people at Luigi's tonight at 19:00.

assistant

book_table({"restaurant":"Luigi's","people":2,"time":"19:00"})

tool

{"available_times": ["18:30", "20:30"], "error": "fully booked at that time"}

assistant

I found that Luigi's is fully booked at 19:00. The available times are 18:30 and 20:30. Would you like me to book a table at those times?

Building pages 0 of 5

A small websiteFailed

8,123 tokens: 123 read, 8,000 written · 26 s · 312 tok/s

Build a one-page website for a bakery called "Crumb & Co". It must have a <header> containing an <h1> with the bakery's name; a <nav> with exactly 3 links; a <main> with a <section id="menu"> listing at least 4 items in a list; and a <footer> with the opening hours. Output one complete HTML document and nothing else. Put all CSS and JavaScript inline. Do not load anything from another site: no external scripts, stylesheets, fonts or images.

Open the page on its own. It runs in a sandbox: no network, no access to this site.

Page source

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Crumb & Co</title>
    <style>
        :root {
            --crumb-color: #d46a6a;
            --crumb-hover: #b85353;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            line-height: 1.6;
        }
        header {
            background: #fff;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            position: fixed;
            width: 100%;
            top: 0;
            left: 0;
            z-index: 1000;
        }
        .header-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .header-content h1 {
            font-size: 2rem;
            font-weight: 800;
            color: #333;
        }
        .header-content a {
            text-decoration: none;
            color: var(--crumb-color);
            font-weight: 600;
            transition: color 0.3s;
        }
        .header-content a:hover {
            color: #a84646;
        }
        nav {
            background: #fff;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        nav a {
            padding: 12px 16px;
            text-decoration: none;
            color: #333;
            font-weight: 600;
            transition: background 0.2s;
        }
        nav a:hover {
            background: var(--crumb-color);
            color: #fff;
        }
        main {
            max-width: 1200px;
            margin: 80px auto 0;
            padding: 20px;
        }
        .menu-section {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            margin-bottom: 30px;
        }
        .menu-section h3 {
            background: var(--crumb-color);
            color: #fff;
            padding: 8px 12px;
            border-radius: 12px 12px 0 0;
            margin-top: 20px;
            margin-bottom: 15px;
            font-weight: 700;
        }
        .menu-item {
            padding: 15px;
            border: 1px solid #eee;
            border-radius: 6px;
            margin-bottom: 12px;
            transition: background 0.2s;
        }
        .menu-item:hover {
            background: #f9f9f9;
        }
        .menu-item.ingredient {
            font-style: normal;
            font-weight: 600;
            color: #666;
        }
        .crumb-tag {
            display: inline-block;
            background: var(--crumb-color);
            color: #fff;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 0.8rem;
            margin-bottom: 8px;
        }
        footer {
            background: #222;
            color: #fff;
            padding: 40px 20px;
            margin-top: 60px;
        }
        footer .container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 20px;
        }
        footer a {
            color: #fff;
            text-decoration: none;
        }
        footer a:hover {
            color: #d46a6a;
        }
    </style>
</head>
<body>

    <header>
        <div class="header-content">
            <h1>Crumb & Co</h1>
            <a href="#" class="hover-link">Home</a>
        </div>
    </header>

    <nav>
        <a href="#" class="main-link">Home</a>
        <a href="#menu" class="main-link">Menu</a>
        <a href="#" class="main-link">Contact</a>
    </nav>

    <main>
        <section id="menu">
            <h3>Our Menu</h3>
            
            <div class="menu-item">
                <span class="crumb-tag">Crispy</span>
                <div>
                    <strong>Classic Crumble</strong>
                    <br>
                    <small>2 slices of 100% whole wheat sourdough, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat sourdough, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat sourdough, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat sourdough, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1 slice of 100% whole wheat rye, 1

A pricing table with a toggleFailed

8,094 tokens: 94 read, 8,000 written · 26 s · 311 tok/s

Build a pricing page with three plans. Each plan is an element with class "plan" containing an element with class "price". Add a <button id="billing-toggle"> that switches every price between monthly and yearly billing when clicked. Output one complete HTML document and nothing else. Put all CSS and JavaScript inline. Do not load anything from another site: no external scripts, stylesheets, fonts or images.

Open the page on its own. It runs in a sandbox: no network, no access to this site.

Page source

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="content-type">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Plans - VGA CRM</title>
    <style>
        :root {
            --plan-primary: #1a1f2e;
            --plan-secondary: #2c3e50;
            --plan-accent: #3498db;
            --plan-highlight: #0f360f;
            
            --bg-color: #f8f9fa;
            --plan-bg: #ffffff;
            
            --text-main: #1a1f2e;
            --text-secondary: #6c757d;
            
            --border-radius: 8px;
        }

        .pricing-section {
            background: var(--bg-color);
            padding: 40px;
            margin-bottom: 40px;
            border-radius: var(--border-radius);
            min-width: 400px;
        }

        .section-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .section-header h3 {
            font-size: 1.5rem;
            color: var(--text-main);
            margin-bottom: 10px;
        }

        .section-header p {
            color: var(--text-secondary);
            font-size: 0.9rem;
            margin-top: 5px;
        }

        .plans-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 100px));
            gap: 15px;
        }

        .plan-card {
            background: var(--plan-bg);
            border-radius: var(--border-radius);
            padding: 20px;
            transition: transform 0.2s, box-shadow 0.2s;
            border-top: 4px solid var(--plan-accent);
            position: relative;
        }

        .plan-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        /* Plan Highlight Class */
        .plan-card.highlight {
            background: var(--plan-primary);
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(26, 31, 46, 0.3);
            border-top-color: var(--plan-secondary);
        }

        /* Plan Name */
        .plan-name {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-main);
            margin-bottom: 5px;
        }

        /* Plan Price */
        .plan-price {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 1.3rem;
            font-weight: 800;
        }

        .plan-price.yeara {
            color: var(--plan-accent);
            font-weight: 700;
        }

        .plan-price.monthly {
            color: var(--text-secondary);
            font-weight: 500;
        }

        /* Plan Description */
        .plan-description {
            color: var(--text-secondary);
            font-size: 0.95rem;
            margin-top: 8px;
        }

        /* Billing Toggle Button */
        .billing-toggle {
            width: 100%;
            padding: 8px;
            border-radius: 6px;
            border: 2px solid var(--plan-accent);
            background: white;
            color: var(--plan-accent);
            font-weight: 600;
            font-size: 0.85rem;
            transition: background 0.2s, color 0.2s;
            display: none; /* Hidden by default */
        }

        .plan-card.highlight .billing-toggle {
            background: var(--plan-accent);
            color: var(--plan-primary);
            display: block;
        }

        .plan-card.highlight .billing-toggle:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            background: #333;
            color: #fff;
        }

        /* Default Button Style */
        .plan-card .billing-toggle {
            display: none;
        }

        .plan-card.highlight .billing-toggle {
            display: block;
        }

        .plan-card .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing-toggle:disabled {
            display: none;
        }

        .plan-card.highlight .billing

An accessible sign-up formFailed

1,897 tokens: 129 read, 1,768 written · 6 s · 303 tok/s

Build a sign-up form: <form id="signup"> with inputs id="name", id="email" (type email) and id="password" (type password, minlength at least 8), each with a <label for>, and a submit button. When the form is submitted and valid, prevent the real submission and show a confirmation in an element with id="status" and role="status". Output one complete HTML document and nothing else. Put all CSS and JavaScript inline. Do not load anything from another site: no external scripts, stylesheets, fonts or images.

Open the page on its own. It runs in a sandbox: no network, no access to this site.

Page source

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Sign Up - Create Account</title>
    <style>
        body {
            font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
            background-color: #f4f6f9;
            color: #333;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        .header {
            background: #2c3e50;
            color: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .header h1 {
            margin: 0;
            font-size: 1.5rem;
        }
        .header span {
            font-weight: 700;
            text-transform: uppercase;
            font-size: 0.85rem;
            opacity: 0.9;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-label {
            display: block;
            font-weight: 600;
            color: #555;
            margin-bottom: 0.5rem;
        }
        .form-control {
            width: 100%;
            padding: 10px 12px;
            font-size: 1rem;
            border: 1px solid #ddd;
            border-radius: 6px;
            transition: border-color 0.2s;
            background-color: #fff;
        }
        .form-control:focus {
            border-color: #3498db;
            background-color: #ffffff;
            outline: 0;
        }
        .form-control input {
            background: transparent;
            padding: 10px;
        }
        .form-control email {
            description: "Email address";
        }
        .form-control name {
            description: "Full name";
        }
        .form-control password {
            description: "Password (leave blank to skip)"
        }
        .submit-btn {
            width: 100%;
            padding: 12px;
            background: #2c3e50;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 1rem;
            font-weight: 600;
            transition: background 0.2s;
            cursor: pointer;
        }
        .submit-btn:hover {
            background: #34495e;
        }
        .submit-btn:disabled {
            background: #95a5a6;
            cursor: not-allowed;
        }
        .message {
            display: none;
            background: #d4afcc;
            color: #333;
            padding: 12px 16px;
            border-radius: 6px;
            margin-top: 15px;
            text-align: center;
        }
        .message.show {
            display: block;
        }
        .error {
            display: none;
            background: #f8d7da;
            color: #721c24;
            padding: 12px 16px;
            border-radius: 6px;
            margin-top: 15px;
            text-align: center;
        }
        .message.show .error,
        .error.show {
            display: block;
        }
        .success {
            display: none;
            background: #d4af37;
            color: #fff;
            padding: 12px 16px;
            border-radius: 6px;
            margin-top: 15px;
            text-align: center;
        }
        .success.show {
            display: block;
        }
        .note {
            font-size: 0.85rem;
            color: #666;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Create Account</h1>
            <span>Sign up for free</span>
        </div>
        
        <form id="signup">
            <!-- Name -->
            <div class="form-group">
                <label for="name" class="form-label">Full Name</label>
                <input 
                    type="text" 
                    id="name" 
                    class="form-control" 
                    placeholder="Enter your name" 
                    required
                >
            </div>

            <!-- Email -->
            <div class="form-group">
                <label for="email" class="form-label">Email Address</label>
                <input 
                    type="email" 
                    id="email" 
                    class="form-control" 
                    placeholder="you@example.com" 
                    required
                >
            </div>

            <!-- Password -->
            <div class="form-group">
                <label for="password" class="form-label">Password</label>
                <input 
                    type="password" 
                    id="password" 
                    class="form-control" 
                    placeholder="Enter password" 
                    minlength="8"
                    required
                >
                <div class="note">Minimum 8 characters</div>
            </div>

            <!-- Submit -->
            <button 
                type="submit" 
                class="submit-btn" 
                id="submit-btn" 
                disabled
            >
                Create Account
            </button>
        </form>

        <div id="message" class="message">
            <span class="success">Welcome!</span>
        </div>

        <div id="error" class="error">
            <span>Invalid or weak password</span>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const form = document.getElementById("signup");
            const messageDiv = document.getElementById("message");
            const errorDiv = document.getElementById("error");
            const submitBtn = document.getElementById("submit-btn");
            const btnLabel = submitBtn.innerText;
            const btnDisabled = submitBtn.disabled;

            form.addEventListener("submit", function(e) {
                e.preventDefault();

                // Clear previous messages
                messageDiv.classList.remove("show");
                errorDiv.classList.remove("show");
                submitBtn.disabled = false;
                btnLabel.innerText = "Create Account";

                // Validate form
                const name = document.getElementById("name").value.trim();
                const email = document.getElementById("email").value.trim();
                const password = document.getElementById("password").value.trim();

                if (name === "" || email === "" || password.length < 8) {
                    errorDiv.classList.add("show");
                    messageDiv.classList.remove("show");
                } else {
                    // Check if form is already submitted (prevent double submit)
                    if (form.checkValidity()) {
                        // Submit with validation
                        form.submit();
                    } else {
                        // If invalid, show error and disable button
                        errorDiv.classList.add("show");
                        messageDiv.classList.remove("show");
                        submitBtn.disabled = true;
                    }
                }
            });
        });
    </script>
</body>
</html>
```

A to-do app that remembersFailed

8,117 tokens: 117 read, 8,000 written · 26 s · 309 tok/s

Build a to-do list app with an <input id="new-task">, a <button id="add"> and a <ul id="tasks">. Clicking add appends the text as an <li> with its own remove button. Save the list in localStorage under the key "todos" and load it again when the page opens. Output one complete HTML document and nothing else. Put all CSS and JavaScript inline. Do not load anything from another site: no external scripts, stylesheets, fonts or images.

Open the page on its own. It runs in a sandbox: no network, no access to this site.

Page source

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="content-type">
    <meta name="viewport" content="width=device-width, user-scalable=no, face-parallel, default">
    <title>Todo List</title>
    <style>
        body {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
            background-color: #f4f6f9;
            color: #333;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 1rem;
        }
        .header {
            background: #fff;
            padding: 1.5rem;
            border-radius: 12px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .header h1 {
            font-size: 1.5rem;
            font-weight: 700;
            color: #1a1f2e;
        }
        .status-badge {
            background: #e9ecef;
            color: #565f6d;
            padding: 0.3rem 0.6rem;
            border-radius: 16px;
            font-size: 0.8rem;
            font-weight: 600;
        }
        .input-group {
            position: relative;
            top: 100px;
            width: 100%;
        }
        #new-task-input {
            width: 100%;
            height: 80px;
            padding: 0.75rem 1rem;
            border: 2px solid #dee2e6;
            border-radius: 8px;
            font-size: 1rem;
            transition: border-color 0.2s;
            box-shadow: 0 2px 0 #d1d5db;
            outline: none;
        }
        #new-task-input:focus {
            border-color: #05779e;
            border-style: solid;
            box-shadow: 0 0 0 3px rgba(5, 119, 158, 0.3);
        }
        #add-btn {
            width: 100%;
            height: 80px;
            margin-top: 0.5rem;
            border: 2px solid #05779e;
            border-radius: 8px;
            background: #fff;
            color: #05779e;
            font-weight: 600;
            font-size: 1rem;
            transition: background 0.1s, color 0.1s;
            box-shadow: 0 4px 0 #05779e;
            outline: none;
            cursor: pointer;
        }
        #add-btn:active {
            background: #05779e;
            color: #fff;
            transform: translateY(2);
            box-shadow: 0 0 #05779e;
        }
        ul {
            list-style: none;
            margin-top: 1rem;
        }
        li {
            background: #fff;
            border-radius: 8px;
            padding: 0.75rem 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            box-shadow: 1px 2px 0 rgba(0,0,0,0.1);
            transition: transform 0.1s, box-shadow 0.1s;
            justify-content: space-between;
        }
        li:hover {
            transform: translateX(3px);
            box-shadow: 0 4px 0 rgba(0,0,0,0.1);
        }
        li.completed {
            background: #f8f9fa;
            transform: translateY(-2px);
        }
        li.completed span {
            text-decoration: line-through;
            color: #999;
        }
        .task-text {
            flex-grow: 1;
            word-wrap: break-word;
        }
        .remove-btn {
            width: 35%;
            height: 80px;
            border: none;
            background: transparent;
            color: #6c6f7e;
            font-size: 0.8rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: color 0.2s;
            padding: 0 0.3rem;
            display: none;
            justify-content: center;
            align-items: center;
        }
        #add-btn:disabled {
            opacity: 0.7;
            cursor: not-allowed;
            transform: translateY(2);
            box-shadow: none;
        }
        li .remove-btn {
            display: none;
        }
        li .remove-btn.active {
            display: block;
            color: #6c6f7e;
            font-weight: 600;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>My Tasks</h1>
            <span class="status-badge">Todo</span>
        </div>
        
        <div class="input-group">
            <input
                type="text"
                id="new-task-input"
                placeholder="Add a new task..."
            >
            <button id="add-btn">Add</button>
        </div>

        <ul id="tasks">
            <!-- Tasks go here -->
        </ul>
    </div>

    <script>
        // Load tasks from local storage on page load
        document.addEventListener('DOMContentLoaded', loadTasks);

        // Add button handler
        document.getElementById('add-btn').addEventListener('click', addTask);

        // New task input handler
        document.getElementById('new-task-input').addEventListener('input', addTask);
        document.getElementById('new-task-input').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') addTask();
        });

        // Remove button handler
        document.getElementById('add-btn').addEventListener('click', removeTask);

        // Remove button for completed items
        document.getElementById('add-btn').addEventListener('click', removeTask);

        // Add button for completed items
        document.getElementById('add-btn').addEventListener('click', removeTask);

        // Add task function
        function addTask() {
            const input = document.getElementById('new-task-input');
            const text = input.value.trim();
            
            if (text === '') return;

            const li = document.createElement('li');
            li.textContent = text;
            li.classList.add('completed');
            
            // Create remove button
            const removeBtn = document.createElement('span');
            removeBtn.classList.add('remove-btn');
            removeBtn.textContent = 'x';
            li.appendChild(removeBtn);
            
            // Create remove button for the li
            const liRemoveBtn = document.createElement('span');
            liRemoveBtn.classList.add('remove-btn');
            liRemoveBtn.textContent = 'x';
            li.appendChild(liRemoveBtn);
            
            // Create li element
            document.getElementById('tasks').appendChild(li);
            
            // Clear input
            input.value = '';
            
            // Re-init event listeners for the li
            li.addEventListener('click', removeTask);
            li.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') removeTask();
            });
        }

        // Remove task function
        function removeTask() {
            const li = document.getElementById('tasks');
            li.remove();
            
            // Re-init event listeners for the li
            li.addEventListener('click', removeTask);
            li.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') removeTask();
            });
        }

        // Load tasks from local storage
        function loadTasks() {
            const storedTasks = getLocalStorage('todos');
            if (storedTasks) {
                const tasksArray = JSON.parse(storedTasks);
                renderTasks(tasksArray);
            }
        }

        // Render tasks list
        function renderTasks(tasks) {
            const ul = document.getElementById('tasks');
            ul.innerHTML = '';
            
            if (tasks.length === 0) {
                ul.innerHTML = '<li style="justify-content: center; opacity: 0.6; text-decoration: none;">No tasks yet.</li>';
            } else {
                tasks.forEach(task => {
                    const li = document.createElement('li');
                    li.textContent = task;
                    li.classList.add('completed');
                    li.appendChild(li);
                });
            }
        }

        // Get local storage value
        function getLocalStorage(key) {
            try {
                const item = localStorage.getItem(key);
                return item ? JSON.parse(item) : null;
            } catch (error) {
                console.error(`Error loading ${key}:`, error);
                return null;
            }
        }

        // Save to local storage
        function saveLocalStorage(key, data) {
            try {
                localStorage.setItem(key, JSON.stringify(data));
            } catch (error) {
                console.error(`Error saving ${key}:`, error);
            }
        }

        // Render the list when page opens
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('input', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);
        document.getElementById('tasks').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') renderTasks();
        });
        document.getElementById('tasks').addEventListener('click', renderTasks);

A bar chart in SVGNot run

Passes when Five <rect class="bar"> in an <svg>, written in the markup, with heights proportional to 12, 30, 18, 24 and 6 in that order, labelled Mon to Fri in <text>, and a <title> or aria-label. Nothing loaded from another site and no network requests.

Draw an inline SVG bar chart of coffee sold: Mon 12, Tue 30, Wed 18, Thu 24, Fri 6. Each bar is a <rect class="bar"> whose height attribute is proportional to its value, each bar is labelled with its day in a <text>, and the <svg> has a <title> or an aria-label. Write the bars and labels directly in the SVG markup, not with JavaScript. Output one complete HTML document and nothing else. Put all CSS and JavaScript inline. Do not load anything from another site: no external scripts, stylesheets, fonts or images.

Building games 0 of 2

Build 2048Not run

Build the game 2048 as one web page, playable with the arrow keys, with the board drawn on the page.

In <script id="game">, define createGame() returning an object with move(dir) and state(). dir is "up", "down", "left" or "right". state() returns {board, score, over}: board is 4 rows of 4 numbers, top row first (0 is an empty cell), score is a number, over is a boolean.

The rules, exactly:
1. The board starts as this one, then a 2 is put in each of the first two empty cells in reading order (row by row from the top, left to right). The score starts at 0.
[2, 32, 0, 0]
[8, 0, 0, 8]
[16, 0, 0, 0]
[0, 0, 0, 4]
2. A move slides every tile as far as it goes toward dir. Two tiles of the same value that meet merge into one tile of their sum, nearest the side they move toward first: moving left, [2,2,2,2] becomes [4,4,0,0] and [2,2,2,0] becomes [4,2,0,0]. A tile made by a merge does not merge again in the same move.
3. Each merge adds the new tile's value to the score.
4. If a move changed the board, a 2 is put in the first empty cell in reading order. A move that changes nothing does nothing.
5. over is true when no move would change the board; then moves do nothing.

Output one complete HTML document and nothing else, with all CSS and JavaScript inline and nothing loaded from another site. Put the game logic, and only it, in <script id="game">: it must not touch document, window or timers, because the site runs that script on its own and plays the game through createGame(). Wire the page in another <script>.

Build SnakeNot run

Build Snake as one web page on a 10 by 10 grid, playable with the arrow keys (one key press, one step), with the grid drawn on the page.

In <script id="game">, define createGame() returning an object with step(dir) and state(). dir is "up", "down", "left" or "right". state() returns {snake, food, score, over}: snake is a list of [x, y] cells, head first; food is [x, y]; score is a number; over is a boolean. x is the column (0 to 9, left to right), y the row (0 to 9, top to bottom); up is y - 1.

The rules, exactly:
1. The game starts with snake [[5, 3], [5, 4], [5, 5]], moving up, food at [4, 8], score 0.
2. step(dir): if dir is the opposite of the current direction it is ignored and the snake keeps going; otherwise dir becomes the current direction. The head moves one cell that way.
3. If the new head cell holds the food, the snake grows: its tail stays. Otherwise the tail cell is freed first.
4. If the new head is off the grid or on a cell of the snake (after rule 3), the game is over: over becomes true and nothing else changes. Once over, step does nothing.
5. Eating adds 1 to the score, and the next food goes to the first empty cell in reading order (row by row from the top, left to right) after the new head's cell, wrapping from [9, 9] to [0, 0].

Output one complete HTML document and nothing else, with all CSS and JavaScript inline and nothing loaded from another site. Put the game logic, and only it, in <script id="game">: it must not touch document, window or timers, because the site runs that script on its own and plays the game through createGame(). Wire the page in another <script>.

Writing code 0 of 3

Merge intervalsNot run

Write a JavaScript function mergeIntervals(intervals). intervals is an array of [start, end] pairs of integers with start <= end, in any order, possibly empty. Return a new array of the merged intervals sorted by start: intervals that overlap or touch (one ends where the next starts) become one. Do not change the input array or its pairs.

mergeIntervals([[8, 10], [1, 3], [2, 6], [6, 7]]) returns [[1, 7], [8, 10]].

Reply with one ```js code block holding plain JavaScript (no imports, no exports, no DOM, no timers). The site runs it with hidden tests.

An LRU cacheNot run

Write a JavaScript class LRUCache: a least-recently-used cache of integer keys and values.

- new LRUCache(capacity): capacity is an integer of at least 1.
- get(key) returns the value stored for key, or -1 if there is none. A get that finds the key makes it the most recently used.
- put(key, value) stores the value (replacing any value already there) and makes key the most recently used. If that leaves more than capacity keys, the least recently used key is removed.

get and put should take constant time on average.

Reply with one ```js code block holding plain JavaScript (no imports, no exports, no DOM, no timers). The site runs it with hidden tests.

Evaluate arithmeticNot run

Write a JavaScript function evaluate(expr) that returns the value of an arithmetic expression given as a string. The expression has non-negative integers, the operators + - * /, parentheses, unary minus (as in -3, - -3, 2 * -3 or -(1 + 2)) and spaces anywhere between tokens. * and / bind tighter than + and -, and operators of the same kind group from the left. / is integer division that truncates toward zero: 7 / 2 is 3 and -7 / 2 is -3. Dividing by zero must throw an Error. Do not use eval or Function.

evaluate("2 + 3 * (4 - 6) / 4") returns 1.

Reply with one ```js code block holding plain JavaScript (no imports, no exports, no DOM, no timers). The site runs it with hidden tests.

Fixing code 0 of 2

Fix the bookings moduleNot run

This JavaScript module has one bug. The occupancy report sometimes counts one booked night more than there is in the range it was asked about.

Find it and fix it without changing anything else.

```js
// Bookings for one holiday flat. A booking is { guest, checkIn, checkOut } with dates as "YYYY-MM-DD".
// A guest sleeps the nights from checkIn up to, but not including, checkOut: checkOut is the day they leave,
// and another guest may check in that same day.

function dayNumber(date) {
  const [y, m, d] = date.split('-').map(Number);
  return Date.UTC(y, m - 1, d) / 86400000;
}

function toDate(day) {
  return new Date(day * 86400000).toISOString().slice(0, 10);
}

function nights(booking) {
  return dayNumber(booking.checkOut) - dayNumber(booking.checkIn);
}

function overlaps(a, b) {
  return dayNumber(a.checkIn) < dayNumber(b.checkOut) && dayNumber(b.checkIn) < dayNumber(a.checkOut);
}

function canBook(bookings, request) {
  if (nights(request) < 1) return false;
  for (const booking of bookings) {
    if (overlaps(booking, request)) return false;
  }
  return true;
}

function isBooked(bookings, day) {
  return bookings.some((b) => dayNumber(b.checkIn) <= day && day < dayNumber(b.checkOut));
}

// The nights from `from` up to, but not including, `to` that someone has booked.
function bookedNights(bookings, from, to) {
  let count = 0;
  for (let day = dayNumber(from); day <= dayNumber(to); day++) {
    if (isBooked(bookings, day)) count++;
  }
  return count;
}

// The first night on or after `from` that nobody has booked, as "YYYY-MM-DD".
function firstFreeNight(bookings, from) {
  let day = dayNumber(from);
  while (isBooked(bookings, day)) day++;
  return toDate(day);
}

// The price in cents: Friday and Saturday nights at rates.weekend, every other night at rates.weekday.
function price(booking, rates) {
  let total = 0;
  for (let day = dayNumber(booking.checkIn); day < dayNumber(booking.checkOut); day++) {
    const weekday = new Date(day * 86400000).getUTCDay();
    total += weekday === 5 || weekday === 6 ? rates.weekend : rates.weekday;
  }
  return total;
}
```

Reply with the whole corrected module in one ```js code block, with the same function names.

Fix the CSV readerNot run

This JavaScript module has one bug. A doubled quote inside a quoted field, as in "say ""hi""", does not come out as one double quote.

Find it and fix it without changing anything else.

```js
// Reads CSV the way spreadsheets write it: fields are separated by commas, a field may be wrapped in
// double quotes so it can hold commas, and "" inside a quoted field stands for one double quote.
// Fields are not trimmed. Empty lines are skipped.

function parseLine(line) {
  const fields = [];
  let field = '';
  let quoted = false;
  for (let i = 0; i < line.length; i++) {
    const ch = line[i];
    if (quoted) {
      if (ch === '"') {
        if (line[i + 1] === '"') {
          field += '"';
        } else {
          quoted = false;
        }
      } else {
        field += ch;
      }
    } else if (ch === '"') {
      quoted = true;
    } else if (ch === ',') {
      fields.push(field);
      field = '';
    } else {
      field += ch;
    }
  }
  fields.push(field);
  return fields;
}

function parseCSV(text) {
  return text.split(/\r?\n/).filter((line) => line !== '').map(parseLine);
}

// Each row after the header as an object keyed by the header's names; a missing field is ''.
function toObjects(text) {
  const [header, ...rows] = parseCSV(text);
  return rows.map((row) => {
    const record = {};
    header.forEach((name, i) => {
      record[name] = i < row.length ? row[i] : '';
    });
    return record;
  });
}

// The sum of a column's numbers; fields that are not numbers count as 0.
function sumColumn(text, name) {
  return toObjects(text).reduce((total, record) => total + (Number(record[name]) || 0), 0);
}
```

Reply with the whole corrected module in one ```js code block, with the same function names.

Planning and data 0 of 3

A query over hidden dataNot run

Write one SQLite query that answers the question below. The site runs it on its own copy of these tables, filled with rows you have not seen.

```sql
CREATE TABLE customers (id INTEGER PRIMARY KEY, name TEXT NOT NULL, city TEXT NOT NULL);
CREATE TABLE orders (id INTEGER PRIMARY KEY, customer_id INTEGER NOT NULL REFERENCES customers(id),
                     placed TEXT NOT NULL,  -- 'YYYY-MM-DD'
                     status TEXT NOT NULL); -- 'delivered', 'cancelled' or 'pending'
CREATE TABLE items (order_id INTEGER NOT NULL REFERENCES orders(id), product TEXT NOT NULL,
                    quantity INTEGER NOT NULL, price_cents INTEGER NOT NULL);  -- price_cents: for one unit
```

Question: The names of the customers with at least 2 delivered orders and no cancelled order. One column: name. In alphabetical order.

Reply with only the query, in one ```sql code block: one SELECT statement (WITH is fine), nothing that changes the database.

Schedule five meetingsNot run

Five people each have one meeting today: Cleo, Dev, Fay, Gus, Noa. The five meetings are at different times, 09:00, 10:00, 11:00, 13:00, 14:00 (in that order: 10:00 is right after 09:00, 13:00 right after 11:00), and in different rooms. The list of rooms, in order: Birch, Cedar, Elm, Pine, Rowan.

1. Gus's meeting is in the slot right after Dev's.
2. Cleo meets earlier than Gus.
3. Cleo's and Gus's rooms are next to each other on the list of rooms.
4. Whoever is in Rowan meets earlier than Dev.
5. Noa is not in Rowan.
6. Dev is not in Elm.
7. Noa meets earlier than Cleo.
8. Whoever is in Cedar meets earlier than Noa.

Exactly one schedule fits every clue. Work it out, then end with exactly five lines, one per person, in this form:
Ana: 09:00, Oak

A replacement in ten calls or fewerNot run
Passes when Looks up the account, opens order R-5530 (the kettle), checks north then south and stops, reserves one steel kettle at south for R-5530, opens a damage claim (a return, if tried, is refused), makes at most 10 calls, and tells the customer claim CL-2207 and that the replacement ships on 3 November, without claiming a return label.
```
Hi, it's ana.silva@example.com. My kettle arrived with a cracked lid. Can you sort it out?
```

Qwen3.5-0.8B-Autocomplete

Failed 11

What it built

Scored tasks

Comments