Build a typing-speed test as a static web app in this directory: index.html, style.css,…

antigravitygemini · 28 steps · 1m 03s · 6 filessession 2a71ee07-8a5@agentsage-runs

Build a typing-speed test as a static web app in this directory: index.html, style.css, app.js, words.js. Random word streams, live WPM and accuracy, a 60-second timed mode and a zen mode, per-key error highlighting, results screen with WPM history chart on a canvas, high scores in localStorage, dark theme, and tests.html + tests.js exercising the WPM/accuracy math. Run the tests headless with node and fix what fails.

same matchclaude-code · 72 steps codex · 102 steps pi · 25 steps antigravity · 28 steps opencode · 28 steps

compare in arena

step 17 / 28

tests.htmlchange 1/1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PulseType - Math Engine Unit Tests</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Outfit:wght@400;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg-color: #0b0f19;
            --card-bg: #131b2e;
            --border-color: #1e293b;
            --text-main: #f1f5f9;
            --text-muted: #64748b;
            --pass-color: #10b981;
            --fail-color: #ef4444;
            --accent-cyan: #06b6d4;
        }
 
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
 
        body {
            background-color: var(--bg-color);
            color: var(--text-main);
            font-family: 'Outfit', sans-serif;
            padding: 2rem;
            display: flex;
            justify-content: center;
        }
 
        .container {
            max-width: 800px;
            width: 100%;
        }
 
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--border-color);
        }
 
        h1 {
            font-size: 1.8rem;
            color: var(--text-main);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
 
        h1 span {
            color: var(--accent-cyan);
        }
 
        .back-link {
            color: var(--accent-cyan);
            text-decoration: none;
            font-weight: 600;
            font-size: 0.95rem;
            transition: opacity 0.2s;
        }
 
        .back-link:hover {
            opacity: 0.8;
        }
 
        .summary-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 1.5rem;
            display: flex;
            gap: 2rem;
            margin-bottom: 2rem;
        }
 
        .stat-box {
            display: flex;
            flex-direction: column;
        }
 
        .stat-value {
            font-size: 2.2rem;
            font-weight: 700;
            font-family: 'Fira Code', monospace;
        }
 
        .stat-value.passed { color: var(--pass-color); }
        .stat-value.failed { color: var(--fail-color); }
 
        .stat-label {
            font-size: 0.85rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
 
        .test-list {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }
 
        .test-item {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 1rem 1.25rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-family: 'Fira Code', monospace;
            font-size: 0.95rem;
        }
 
        .test-item.pass {
            border-left: 4px solid var(--pass-color);
        }
 
        .test-item.fail {
            border-left: 4px solid var(--fail-color);
        }
 
        .badge {
            padding: 0.25rem 0.6rem;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 600;
        }
 
        .badge.pass {
            background: rgba(16, 185, 129, 0.15);
            color: var(--pass-color);
        }
 
        .badge.fail {
            background: rgba(239, 68, 68, 0.15);
            color: var(--fail-color);
        }
 
        .error-reason {
            color: var(--fail-color);
            font-size: 0.85rem;
            margin-top: 0.5rem;
            width: 100%;
        }
    </style>
</head>
<body>
 
    <div class="container">
        <header>
            <h1>⚡ <span>PulseType</span> Test Runner</h1>
            <a href="index.html" class="back-link">← Back to App</a>
        </header>
 
        <div class="summary-card">
            <div class="stat-box">
                <div class="stat-value" id="total-val">0</div>
                <div class="stat-label">Total Tests</div>
            </div>
            <div class="stat-box">
                <div class="stat-value passed" id="passed-val">0</div>
                <div class="stat-label">Passed</div>
            </div>
            <div class="stat-box">
                <div class="stat-value failed" id="failed-val">0</div>
                <div class="stat-label">Failed</div>
            </div>
        </div>
 
        <div class="test-list" id="test-list"></div>
    </div>
 
    <!-- Load App logic and Test script -->
    <script src="app.js"></script>
    <script src="tests.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            if (typeof runTests === 'function') {
                const summary = runTests();
                document.getElementById('total-val').textContent = summary.total;
                document.getElementById('passed-val').textContent = summary.passed;
                document.getElementById('failed-val').textContent = summary.failed;
 
                const listElem = document.getElementById('test-list');
                listElem.innerHTML = '';
 
                summary.results.forEach(res => {
                    const item = document.createElement('div');
                    item.className = `test-item ${res.status.toLowerCase()}`;
                    item.innerHTML = `
                        <div>
                            <div>${res.name}</div>
                            ${res.error ? `<div class="error-reason">${res.error}</div>` : ''}
                        </div>
                        <span class="badge ${res.status.toLowerCase()}">${res.status}</span>
                    `;
                    listElem.appendChild(item);
                });
            }
        });
    </script>
</body>
</html>
 

214 lineshtml

Writes …/index.html

Files at this step

drag the rail to scrub

Discussion

No comments yet. Start the discussion. Recorded by @agentsage-runs.

#antigravity #css #gemini #graphics #html #javascript #performance #quick #testing #ui

c5-agy

← all sessions