Build a Pomodoro Timer with AI

Build a single-page Pomodoro timer as a static HTML/CSS/JS site. Page background #0f0f17 with a centered layout (max-width 500px). Design mobile-first — this should feel like a native app on a phone. At the top center, display "Pomodoro" heading in white and today's date in #6a6a80. Below, show three mode tabs: "Focus" (25 min, #ef4444 accent), "Short Break" (5 min, #22c55e accent), "Long Break" (15 min, #3b82f6 accent). The active tab has a pill background in its accent color with white text; inactive tabs have transparent background and #6a6a80 text. Below the tabs, render a large circular timer (280px diameter) using SVG or Canvas. The circle has a #1a1a2a background ring (8px stroke) with a colored progress ring on top that depletes clockwise as time counts down. The progress ring color matches the current mode's accent color. Inside the circle, display the remaining time in large 56px bold white font (MM:SS format) and below it the current mode label in smaller #8888a0 text. Below the circle, place three action buttons in a row: a large central Start/Pause button (64px round, accent color background, white icon — play triangle or pause bars), a Reset button on the left (44px round, #1a1a2a background, #6a6a80 icon), and a Skip button on the right (44px round, #1a1a2a background, #6a6a80 icon, skips to next phase). The Start button should have a subtle pulse animation when paused to draw attention. The timer follows the Pomodoro pattern: 25 min Focus > 5 min Short Break > 25 min Focus > 5 min Short Break > 25 min Focus > 5 min Short Break > 25 min Focus > 15 min Long Break, then repeat. Show the cycle position with 4 small dots below the timer — filled dots for completed focus sessions in the current cycle, empty for remaining. When a timer phase ends, play a notification sound using the Web Audio API (no external files). Generate a pleasant 3-note chime: first note at 523 Hz (C5), second at 659 Hz (E5), third at 784 Hz (G5), each 200ms with a 100ms gap, using sine wave oscillators with a quick fade-out envelope. Also try to send a browser notification (request permission on first use) with the message "Time for a break!" or "Focus time!" as appropriate. Update the page title to show "[BREAK] Pomodoro" or "[FOCUS] Pomodoro" so users see the state in their browser tab. Below the timer controls, show a "Today's Stats" section with three cards in a row: Focus Sessions completed (count), Total Focus Time (hours:minutes), and Current Streak (consecutive days with at least 4 focus sessions). Style with #12121a backgrounds and accent-colored values. Below stats, add a "Focus Log" section showing today's completed sessions as a vertical timeline. Each entry shows: start time, end time, duration, and the mode (focus/break). Style as a clean timeline with colored dots and connecting lines. Add a "Settings" collapsible section at the bottom where users can customize: Focus Duration (range 15-60 min, default 25), Short Break Duration (range 3-10 min, default 5), Long Break Duration (range 10-30 min, default 15), Long Break Interval (every N sessions, default 4), Sound Volume (range slider 0-100%, default 70%), and Auto-Start Breaks (toggle, default on). Save settings to localStorage. All session data persists in localStorage keyed by date. Include a simple 7-day history view showing focus sessions per day as small bar charts. Make the layout fully responsive with the timer circle scaling down slightly on very small screens. 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].