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 20 / 28

index.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 - Speed Typing Test & Heatmap</title>
    <meta name="description" content="A modern, high-precision typing speed test featuring real-time WPM, per-key error heatmaps, interactive charts, and high score tracking.">
    <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;500;600;700&family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="app-container">
        <!-- Top Navigation Header -->
        <header class="app-header">
            <div class="brand">
                <div class="logo-icon">⚡</div>
                <div class="brand-text">
                    <h1>Pulse<span>Type</span></h1>
                    <span class="sub-text">Velocity & Heatmap Engine</span>
                </div>
            </div>
 
            <div class="mode-selector">
                <button id="mode-timed" class="mode-btn active" title="60 Second Timed Challenge">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                    60s Timed
                </button>
                <button id="mode-zen" class="mode-btn" title="Untimed Free Typing Mode">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
                    Zen Mode
                </button>
            </div>
 
            <div class="header-actions">
                <a href="tests.html" class="nav-btn" title="Run Math Engine Unit Tests">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
                    Tests
                </a>
                <button id="restart-btn" class="icon-btn" title="Restart Test (Shortcut: Tab)">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38l5.67-5.67"/></svg>
                </button>
            </div>
        </header>
 
        <!-- Stats Bar Dashboard -->
        <section class="stats-bar">
            <div class="stat-card primary">
                <span class="stat-label">Net WPM</span>
                <span class="stat-value" id="wpm-display">0</span>
            </div>
            <div class="stat-card">
                <span class="stat-label">Accuracy</span>
                <span class="stat-value" id="accuracy-display">100%</span>
            </div>
            <div class="stat-card">
                <span class="stat-label" id="timer-label">Time</span>
                <span class="stat-value" id="timer-display">60s</span>
            </div>
            <div class="stat-card">
                <span class="stat-label">Errors</span>
                <span class="stat-value error-val" id="error-display">0</span>
            </div>
            <button id="end-zen-btn" class="end-zen-btn" style="display: none;">End Session</button>
        </section>
 
        <!-- Typing Arena -->
        <main class="typing-arena">
            <!-- Hidden input for typing focus -->
            <input type="text" id="hidden-input" autocomplete="off" auto-capitalize="off" spellcheck="false" autofocus />
            
            <!-- Stream box -->
            <div id="word-stream" class="word-stream"></div>
 
            <div class="focus-hint">
                <span class="pulse-dot"></span> Click anywhere or start typing to begin
            </div>
        </main>
 
        <!-- Per-Key Error Highlighting Virtual Keyboard -->
        <section class="keyboard-section">
            <div class="section-title">Per-Key Live Heatmap</div>
            <div id="virtual-keyboard" class="virtual-keyboard"></div>
        </section>
    </div>
 
    <!-- Results Modal -->
    <div id="results-modal" class="modal-overlay">
        <div class="modal-card">
            <button id="modal-close-btn" class="close-btn">&times;</button>
            
            <div class="modal-header">
                <h2>Performance Summary</h2>
                <p>Session completed successfully</p>
            </div>
 
            <!-- Primary Metrics Row -->
            <div class="results-grid">
                <div class="result-box main">
                    <span class="result-label">Net Speed</span>
                    <span class="result-val" id="final-wpm">0</span>
                    <span class="result-unit">WPM</span>
                </div>
                <div class="result-box main">
                    <span class="result-label">Accuracy</span>
                    <span class="result-val" id="final-accuracy">0%</span>
                    <span class="result-unit">Accuracy</span>
                </div>
                <div class="result-box">
                    <span class="result-label">Raw Speed</span>
                    <span class="result-val" id="final-raw-wpm">0</span>
                    <span class="result-unit">WPM</span>
                </div>
                <div class="result-box">
                    <span class="result-label">Correct / Total</span>
                    <span class="result-val" id="final-chars">0/0</span>
                    <span class="result-unit">Chars</span>
                </div>
                <div class="result-box">
                    <span class="result-label">Uncorrected</span>
                    <span class="result-val" id="final-errors">0</span>
                    <span class="result-unit">Errors</span>
                </div>
                <div class="result-box">
                    <span class="result-label">Time Elapsed</span>
                    <span class="result-val" id="final-time">00:00</span>
                    <span class="result-unit">Duration</span>
                </div>
            </div>
 
            <!-- WPM History Canvas Chart -->
            <div class="chart-container">
                <div class="chart-header">
                    <h3>WPM Timeline Graph</h3>
                    <div class="chart-legend">
                        <span class="legend-item net"><span class="dot"></span> Net WPM</span>
                        <span class="legend-item raw"><span class="dot"></span> Raw WPM</span>
                    </div>
                </div>
                <canvas id="wpmChart"></canvas>
            </div>
 
            <!-- Bottom Details Grid: Key Errors & High Scores -->
            <div class="modal-bottom-grid">
                <div class="detail-card">
                    <h3>Most Missed Keys</h3>
                    <div id="key-error-list" class="key-error-list"></div>
                </div>
 
                <div class="detail-card">
                    <h3>Personal Best Leaderboard</h3>
                    <div id="high-scores-list" class="high-scores-list"></div>
                </div>
            </div>
 
            <div class="modal-actions">
                <button id="modal-restart-btn" class="primary-btn">
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38l5.67-5.67"/></svg>
                    Try Again (Tab)
                </button>
            </div>
        </div>
    </div>
 
    <!-- Scripts -->
    <script src="words.js"></script>
    <script src="app.js"></script>
</body>
</html>
 

171 lineshtml

Writes …/style.css

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