Build a Workout Tracker with AI

Build a single-page workout tracker as a static HTML/CSS/JS site. Page background #0f0f17 with a centered layout (max-width 700px). Use #12121a for card backgrounds, 1px solid #2a2a3a borders, and 14px border-radius. At the top, display "Workout Tracker" heading in white and today's date (formatted as "Friday, Feb 28, 2026") in #8888a0. Add a date navigation bar with left/right arrows to browse previous workout days and a "Today" button to jump back to the current date. Below the date bar, show a "Today's Workout" section. Include an "Add Exercise" button (#3b82f6 background, white text, full width, rounded 10px). When clicked, it reveals an exercise entry form with: Exercise Name (text input with autocomplete suggestions from previously logged exercises), and a set log section. Each set row has three compact inputs in a row: Set # (auto-numbered, non-editable, #6a6a80 text), Weight (number input with "lbs" suffix, default empty), and Reps (number input, default empty). Below the set rows, an "Add Set" button (dashed border, #3b82f6 text). Each set row has a delete X button visible on hover. When an exercise has sets logged, show the exercise as a card with: exercise name (bold, white), a compact table of sets (Set #, Weight, Reps), total volume (sets x reps x weight, displayed in #8888a0), and a collapse/expand toggle. If any set beats a previous personal record (highest weight for that exercise at any rep count), show a small "PR!" badge in #f59e0b next to the weight. Below the current workout, add a "Personal Records" section showing a grid of cards — one for each unique exercise ever logged. Each card shows: exercise name, best weight, best single-set volume (weight x reps), and the date it was achieved. Style PR cards with a #16161e background and a subtle gold (#f59e0b) left border. Sort by most recently performed. Below PRs, add a "Progress" section with a line chart using HTML5 Canvas. A dropdown lets users select an exercise, and the chart shows maximum weight lifted over time (x-axis: dates, y-axis: weight in lbs). Plot data points as circles (#3b82f6) connected by lines. Include gridlines in #1a1a2a and axis labels in #6a6a80. If there are fewer than 2 data points, show a message "Log this exercise at least twice to see progress." Below the chart, add a "Workout History" section showing a scrollable list of past workout dates. Each entry shows: date, number of exercises, total sets, and total volume. Clicking a date loads that day's workout for viewing. Store everything in localStorage with this structure: an array of workout objects, each with a date and array of exercises (name, sets array with weight and reps). Auto-save after every change. Include an "Export Data" button that downloads all workout data as a JSON file, and an "Import Data" button for restoring from a backup. Add a quick-stats banner at the top showing: Current Streak (consecutive days with workouts), Total Workouts (all time), and Workouts This Week. Style as three compact stat cards in a row. Make the layout fully responsive and optimized for mobile use (large touch targets, compact set inputs, swipe-friendly navigation). Read the guide at https://accessagent.ai/api/guide and follow it to deploy the site to AccessAgent.ai. My email is [your@email.com].