Spaces:

FocusGuard
/

Test

Sleeping

App Files Files Community

Kexin-251202 commited on Feb 1

Commit

dd46120

verified ·

1 Parent(s): 04171ef

Upload 3 files

Browse files

Files changed (3) hide show

static/index.html +244 -0
static/script.js +794 -0
static/styles.css +635 -0

static/index.html ADDED Viewed

	@@ -0,0 +1,244 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Focus Guard</title>
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/static/styles.css?v=2">
+</head>
+<body>
+    <h1>Focus Guard</h1>
+    <!-- Top Menu -->
+    <nav id="top-menu">
+        <button id="menu-start" class="menu-btn">Start Focus</button>
+        <div class="separator"></div>
+        <button id="menu-achievement" class="menu-btn">My Achievement</button>
+        <div class="separator"></div>
+        <button id="menu-records" class="menu-btn">My Records</button>
+        <div class="separator"></div>
+        <button id="menu-customise" class="menu-btn">Customise</button>
+        <div class="separator"></div>
+        <button id="menu-help" class="menu-btn">Help</button>
+    </nav>
+    <!-- Page A -->
+    <main id="page-a" class="page">
+        <h1>Focus Guard</h1>
+        <p>Your productivity monitor assistant.</p>
+        <button id="start-button" class="btn-main">Start</button>
+    </main>
+    <!-- Page B -->
+    <main id="page-b" class="page hidden">
+        <!-- 1. Camera / Display Area -->
+        <section id="display-area">
+            <p id="display-placeholder">Nothing</p>
+        </section>
+        <!-- 2. Timeline Area -->
+        <section id="timeline-area">
+            <div class="timeline-label">Timeline</div>
+            <div id="timeline-visuals"></div>
+            <div id="timeline-line"></div>
+        </section>
+        <!-- 3. Control Buttons -->
+        <section id="control-panel">
+            <button id="btn-cam-start" class="action-btn green">Start</button>
+            <button id="btn-floating" class="action-btn yellow">Floating Window</button>
+            <button id="btn-models" class="action-btn blue">Models</button>
+            <button id="btn-cam-stop" class="action-btn red">Stop</button>
+        </section>
+        <!-- 4. Frame Control -->
+        <section id="frame-control">
+            <label for="frame-slider">Frame</label>
+            <input type="range" id="frame-slider" min="1" max="60" value="30">
+            <input type="number" id="frame-input" value="30">
+        </section>
+    </main>
+    <!-- Page C - My Achievement -->
+    <main id="page-c" class="page hidden">
+        <h1>My Achievement</h1>
+        <div class="stats-grid">
+            <div class="stat-card">
+                <div class="stat-number" id="total-sessions">0</div>
+                <div class="stat-label">Total Sessions</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number" id="total-hours">0h</div>
+                <div class="stat-label">Total Focus Time</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number" id="avg-focus">0%</div>
+                <div class="stat-label">Average Focus</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-number" id="current-streak">0</div>
+                <div class="stat-label">Day Streak</div>
+            </div>
+        </div>
+        <div class="achievements-section">
+            <h2>Badges</h2>
+            <div id="badges-container" class="badges-grid"></div>
+        </div>
+    </main>
+    <!-- Page D - My Records -->
+    <main id="page-d" class="page hidden">
+        <h1>My Records</h1>
+        <div class="records-controls">
+            <button id="filter-today" class="filter-btn active">Today</button>
+            <button id="filter-week" class="filter-btn">This Week</button>
+            <button id="filter-month" class="filter-btn">This Month</button>
+            <button id="filter-all" class="filter-btn">All Time</button>
+        </div>
+        <div class="chart-container">
+            <canvas id="focus-chart"></canvas>
+        </div>
+        <div class="sessions-list">
+            <h2>Recent Sessions</h2>
+            <table id="sessions-table">
+                <thead>
+                    <tr>
+                        <th>Date</th>
+                        <th>Duration</th>
+                        <th>Focus Score</th>
+                        <th>Action</th>
+                    </tr>
+                </thead>
+                <tbody id="sessions-tbody"></tbody>
+            </table>
+        </div>
+    </main>
+    <!-- Page E - Customise -->
+    <main id="page-e" class="page hidden">
+        <h1>Customise</h1>
+        <div class="settings-container">
+            <div class="setting-group">
+                <h2>Detection Settings</h2>
+                <div class="setting-item">
+                    <label for="sensitivity-slider">Detection Sensitivity</label>
+                    <div class="slider-group">
+                        <input type="range" id="sensitivity-slider" min="1" max="10" value="6">
+                        <span id="sensitivity-value">6</span>
+                    </div>
+                    <p class="setting-description">Higher values require stricter focus criteria</p>
+                </div>
+                <div class="setting-item">
+                    <label for="default-framerate">Default Frame Rate</label>
+                    <div class="slider-group">
+                        <input type="range" id="default-framerate" min="5" max="60" value="30">
+                        <span id="framerate-value">30</span> FPS
+                    </div>
+                </div>
+            </div>
+            <div class="setting-group">
+                <h2>Notifications</h2>
+                <div class="setting-item">
+                    <label>
+                        <input type="checkbox" id="enable-notifications" checked>
+                        Enable distraction notifications
+                    </label>
+                </div>
+                <div class="setting-item">
+                    <label for="notification-threshold">Alert after (seconds)</label>
+                    <input type="number" id="notification-threshold" value="30" min="5" max="300">
+                </div>
+            </div>
+            <div class="setting-group">
+                <h2>Data Management</h2>
+                <button id="export-data" class="action-btn blue">Export Data</button>
+                <button id="clear-history" class="action-btn red">Clear History</button>
+            </div>
+            <button id="save-settings" class="btn-main">Save Settings</button>
+        </div>
+    </main>
+    <!-- Page F - Help -->
+    <main id="page-f" class="page hidden">
+        <h1>Help</h1>
+        <div class="help-container">
+            <section class="help-section">
+                <h2>How to Use Focus Guard</h2>
+                <ol>
+                    <li>Click "Start" or navigate to "Start Focus" in the menu</li>
+                    <li>Allow camera access when prompted</li>
+                    <li>Click the green "Start" button to begin monitoring</li>
+                    <li>Position yourself in front of the camera</li>
+                    <li>The system will track your focus in real-time</li>
+                    <li>Click "Stop" when you're done to save the session</li>
+                </ol>
+            </section>
+            <section class="help-section">
+                <h2>What is "Focused"?</h2>
+                <p>The system considers you focused when:</p>
+                <ul>
+                    <li>You are clearly visible in the camera frame</li>
+                    <li>You are centered in the view</li>
+                    <li>Your face is directed toward the screen</li>
+                    <li>No other people are detected in the frame</li>
+                </ul>
+            </section>
+            <section class="help-section">
+                <h2>Adjusting Settings</h2>
+                <p><strong>Frame Rate:</strong> Lower values reduce CPU usage but update less frequently. Recommended: 15-30 FPS.</p>
+                <p><strong>Sensitivity:</strong> Higher values require stricter focus criteria. Adjust based on your setup.</p>
+            </section>
+            <section class="help-section">
+                <h2>Privacy & Data</h2>
+                <p>All video processing happens in real-time. No video frames are stored - only detection metadata (focus status, timestamps) is saved in your local database.</p>
+            </section>
+            <section class="help-section">
+                <h2>FAQ</h2>
+                <details>
+                    <summary>Why is my focus score low?</summary>
+                    <p>Ensure good lighting, center yourself in the camera frame, and adjust sensitivity settings in the Customise page.</p>
+                </details>
+                <details>
+                    <summary>Can I use this without a camera?</summary>
+                    <p>No, camera access is required for focus detection.</p>
+                </details>
+                <details>
+                    <summary>Does this work on mobile?</summary>
+                    <p>The app works on mobile browsers but performance may vary due to processing requirements.</p>
+                </details>
+                <details>
+                    <summary>Is my data private?</summary>
+                    <p>Yes! All processing happens locally. Video frames are analyzed in real-time and never stored. Only metadata is saved.</p>
+                </details>
+            </section>
+            <section class="help-section">
+                <h2>Technical Info</h2>
+                <p><strong>Model:</strong> YOLOv8n (Nano)</p>
+                <p><strong>Detection:</strong> Real-time person detection with pose analysis</p>
+                <p><strong>Storage:</strong> SQLite local database</p>
+                <p><strong>Framework:</strong> FastAPI + Native JavaScript</p>
+            </section>
+        </div>
+    </main>
+    <script src="/static/script.js?v=2"></script>
+</body>
+</html>

static/script.js ADDED Viewed

	@@ -0,0 +1,794 @@

+// ================ PAGE NAVIGATION ================
+const pages = {
+    'page-a': document.getElementById('page-a'),
+    'page-b': document.getElementById('page-b'),
+    'page-c': document.getElementById('page-c'), // Achievement
+    'page-d': document.getElementById('page-d'), // Records
+    'page-e': document.getElementById('page-e'), // Customise
+    'page-f': document.getElementById('page-f')  // Help
+};
+function showPage(pageId) {
+    for (const key in pages) {
+        pages[key].classList.add('hidden');
+    }
+    if (pages[pageId]) {
+        pages[pageId].classList.remove('hidden');
+    }
+}
+// ================ VIDEO MANAGER CLASS ================
+class VideoManager {
+    constructor() {
+        this.videoElement = null;
+        this.canvasElement = null;
+        this.ctx = null;
+        this.captureCanvas = null;
+        this.captureCtx = null;
+        this.stream = null;
+        this.ws = null;
+        this.isStreaming = false;
+        this.sessionId = null;
+        this.frameRate = 30;
+        this.frameInterval = null;
+        this.renderLoopId = null;
+        // Status smoothing for stable display
+        this.currentStatus = false;  // Default: not focused
+        this.previousStatus = false;  // Track previous status to detect changes
+        this.statusBuffer = [];  // Buffer for last N frames
+        this.bufferSize = 5;  // Number of frames to average (smaller = more responsive)
+        // Latest detection data for rendering
+        this.latestDetectionData = null;
+        this.lastConfidence = 0;
+        this.detectionHoldMs = 30;
+    }
+    async initCamera() {
+        try {
+            this.stream = await navigator.mediaDevices.getUserMedia({
+                video: {
+                    width: { ideal: 640 },
+                    height: { ideal: 480 },
+                    facingMode: 'user'
+                }
+            });
+            this.videoElement = document.createElement('video');
+            this.videoElement.srcObject = this.stream;
+            this.videoElement.autoplay = true;
+            this.videoElement.playsInline = true;
+            this.canvasElement = document.createElement('canvas');
+            this.canvasElement.width = 640;
+            this.canvasElement.height = 480;
+            this.ctx = this.canvasElement.getContext('2d');
+            this.captureCanvas = document.createElement('canvas');
+            this.captureCanvas.width = 640;
+            this.captureCanvas.height = 480;
+            this.captureCtx = this.captureCanvas.getContext('2d');
+            const displayArea = document.getElementById('display-area');
+            displayArea.innerHTML = '';
+            displayArea.appendChild(this.canvasElement);
+            await this.videoElement.play();
+            this.startRenderLoop();
+            return true;
+        } catch (error) {
+            console.error('Camera init error:', error);
+            throw error;
+        }
+    }
+    connectWebSocket() {
+        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        const wsUrl = `${protocol}//${window.location.host}/ws/video`;
+        this.ws = new WebSocket(wsUrl);
+        this.ws.onopen = () => {
+            console.log('WebSocket connected');
+            this.startSession();
+        };
+        this.ws.onmessage = (event) => {
+            const data = JSON.parse(event.data);
+            this.handleServerMessage(data);
+        };
+        this.ws.onerror = (error) => {
+            console.error('WebSocket error:', error);
+        };
+        this.ws.onclose = () => {
+            console.log('WebSocket closed');
+        };
+    }
+    startStreaming() {
+        this.isStreaming = true;
+        this.connectWebSocket();
+        this.frameInterval = setInterval(() => {
+            if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+                this.captureAndSendFrame();
+            }
+        }, 1000 / this.frameRate);
+    }
+    captureAndSendFrame() {
+        if (!this.videoElement || !this.captureCanvas || !this.captureCtx) return;
+        this.captureCtx.drawImage(this.videoElement, 0, 0, 640, 480);
+        const imageData = this.captureCanvas.toDataURL('image/jpeg', 0.8);
+        const base64Data = imageData.split(',')[1];
+        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+            this.ws.send(JSON.stringify({
+                type: 'frame',
+                image: base64Data
+            }));
+        }
+    }
+    handleServerMessage(data) {
+        switch (data.type) {
+            case 'detection':
+                // Update status with smoothing
+                this.updateStatus(data.focused);
+                // Render with smoothed status
+                this.renderDetections(data);
+                // Update timeline and notifications with smoothed status
+                timeline.addEvent(this.currentStatus);
+                checkDistraction(this.currentStatus);
+                break;
+            case 'session_started':
+                this.sessionId = data.session_id;
+                console.log('Session started:', this.sessionId);
+                break;
+            case 'session_ended':
+                console.log('Session ended:', data.summary);
+                showSessionSummary(data.summary);
+                break;
+            case 'ack':
+                // Frame acknowledged but not processed
+                break;
+            case 'error':
+                console.error('Server error:', data.message);
+                break;
+        }
+    }
+    updateStatus(newFocused) {
+        // Add to buffer
+        this.statusBuffer.push(newFocused);
+        // Keep buffer size limited
+        if (this.statusBuffer.length > this.bufferSize) {
+            this.statusBuffer.shift();
+        }
+        // Don't update status until buffer is full (prevents initial flickering)
+        if (this.statusBuffer.length < this.bufferSize) {
+            return false;  // Status hasn't changed
+        }
+        // Calculate majority vote with moderate thresholds for better responsiveness
+        const focusedCount = this.statusBuffer.filter(f => f).length;
+        const focusedRatio = focusedCount / this.statusBuffer.length;
+        // Store previous status
+        this.previousStatus = this.currentStatus;
+        // Moderate thresholds: quicker to change, still avoids rapid flipping
+        // For 8 frames: need 6+ focused to become FOCUSED, or 6+ not focused to become NOT FOCUSED
+        if (focusedRatio >= 0.75) {
+            this.currentStatus = true;
+        } else if (focusedRatio <= 0.25) {
+            this.currentStatus = false;
+        }
+        // Between 0.25-0.75: keep current status (hysteresis to avoid jitter)
+        // Log only when status actually changes
+        const statusChanged = this.currentStatus !== this.previousStatus;
+        if (statusChanged) {
+            console.log(`Status changed: ${this.previousStatus ? 'FOCUSED' : 'NOT FOCUSED'} -> ${this.currentStatus ? 'FOCUSED' : 'NOT FOCUSED'} (ratio: ${focusedRatio.toFixed(2)})`);
+        }
+        // Return whether status changed
+        return statusChanged;
+    }
+    renderDetections(data) {
+        this.latestDetectionData = {
+            detections: data.detections || [],
+            confidence: data.confidence || 0,
+            focused: data.focused,
+            timestamp: performance.now()
+        };
+        this.lastConfidence = data.confidence || 0;
+    }
+    startRenderLoop() {
+        if (this.renderLoopId) return;
+        const render = () => {
+            if (this.videoElement && this.ctx) {
+                this.ctx.drawImage(this.videoElement, 0, 0, 640, 480);
+                const now = performance.now();
+                const latest = this.latestDetectionData;
+                const hasFresh = latest && (now - latest.timestamp) <= this.detectionHoldMs;
+                // Draw detection boxes using last known data (prevents flicker)
+                if (hasFresh && latest.detections.length > 0) {
+                    latest.detections.forEach(det => {
+                        const [x1, y1, x2, y2] = det.bbox;
+                        this.ctx.strokeStyle = this.currentStatus ? '#00FF00' : '#FF0000';
+                        this.ctx.lineWidth = 3;
+                        this.ctx.strokeRect(x1, y1, x2 - x1, y2 - y1);
+                        this.ctx.fillStyle = this.currentStatus ? '#00FF00' : '#FF0000';
+                        this.ctx.font = '16px Nunito';
+                        const label = `${det.class_name} ${(det.confidence * 100).toFixed(1)}%`;
+                        this.ctx.fillText(label, x1, y1 - 5);
+                    });
+                }
+                const statusText = this.currentStatus ? 'FOCUSED' : 'NOT FOCUSED';
+                this.ctx.fillStyle = this.currentStatus ? '#00FF00' : '#FF0000';
+                this.ctx.font = 'bold 24px Nunito';
+                this.ctx.fillText(statusText, 10, 30);
+                this.ctx.font = '16px Nunito';
+                this.ctx.fillText(`Confidence: ${(this.lastConfidence * 100).toFixed(1)}%`, 10, 55);
+            }
+            this.renderLoopId = requestAnimationFrame(render);
+        };
+        this.renderLoopId = requestAnimationFrame(render);
+    }
+    stopRenderLoop() {
+        if (this.renderLoopId) {
+            cancelAnimationFrame(this.renderLoopId);
+            this.renderLoopId = null;
+        }
+    }
+    startSession() {
+        if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+            this.ws.send(JSON.stringify({ type: 'start_session' }));
+        }
+    }
+    stopStreaming() {
+        this.isStreaming = false;
+        this.stopRenderLoop();
+        if (this.frameInterval) {
+            clearInterval(this.frameInterval);
+            this.frameInterval = null;
+        }
+        if (this.ws) {
+            this.ws.send(JSON.stringify({ type: 'end_session' }));
+            this.ws.close();
+            this.ws = null;
+        }
+        if (this.stream) {
+            this.stream.getTracks().forEach(track => track.stop());
+            this.stream = null;
+        }
+        if (this.canvasElement && this.ctx) {
+            this.ctx.clearRect(0, 0, 640, 480);
+        }
+        // Reset status
+        this.currentStatus = false;
+        this.statusBuffer = [];
+        this.latestDetectionData = null;
+        this.lastConfidence = 0;
+    }
+    setFrameRate(rate) {
+        this.frameRate = Math.max(1, Math.min(60, rate));
+        if (this.isStreaming && this.frameInterval) {
+            clearInterval(this.frameInterval);
+            this.frameInterval = setInterval(() => {
+                if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+                    this.captureAndSendFrame();
+                }
+            }, 1000 / this.frameRate);
+        }
+    }
+}
+// ================ TIMELINE MANAGER CLASS ================
+class TimelineManager {
+    constructor(maxEvents = 60) {
+        this.events = [];
+        this.maxEvents = maxEvents;
+        this.container = document.getElementById('timeline-visuals');
+    }
+    addEvent(isFocused) {
+        const timestamp = Date.now();
+        this.events.push({ timestamp, isFocused });
+        if (this.events.length > this.maxEvents) {
+            this.events.shift();
+        }
+        this.render();
+    }
+    render() {
+        if (!this.container) return;
+        this.container.innerHTML = '';
+        this.events.forEach((event, index) => {
+            const block = document.createElement('div');
+            block.className = 'timeline-block';
+            block.style.backgroundColor = event.isFocused ? '#00FF00' : '#FF0000';
+            block.style.width = '10px';
+            block.style.height = '20px';
+            block.style.display = 'inline-block';
+            block.style.marginRight = '2px';
+            block.title = event.isFocused ? 'Focused' : 'Distracted';
+            this.container.appendChild(block);
+        });
+    }
+    clear() {
+        this.events = [];
+        this.render();
+    }
+}
+// ================ NOTIFICATION SYSTEM ================
+let distractionStartTime = null;
+let notificationTimeout = null;
+let currentSettings = null;
+async function loadCurrentSettings() {
+    try {
+        const response = await fetch('/api/settings');
+        currentSettings = await response.json();
+    } catch (error) {
+        console.error('Failed to load settings:', error);
+        currentSettings = {
+            notification_enabled: true,
+            notification_threshold: 30
+        };
+    }
+}
+function checkDistraction(isFocused) {
+    if (!currentSettings || !currentSettings.notification_enabled) return;
+    if (!isFocused) {
+        if (!distractionStartTime) {
+            distractionStartTime = Date.now();
+        }
+        const distractionDuration = (Date.now() - distractionStartTime) / 1000;
+        if (distractionDuration >= currentSettings.notification_threshold && !notificationTimeout) {
+            sendNotification('Focus Guard Alert', 'You seem distracted. Time to refocus!');
+            notificationTimeout = setTimeout(() => {
+                notificationTimeout = null;
+            }, 60000);
+        }
+    } else {
+        distractionStartTime = null;
+    }
+}
+async function sendNotification(title, body) {
+    if ('Notification' in window) {
+        if (Notification.permission === 'granted') {
+            new Notification(title, { body });
+        } else if (Notification.permission !== 'denied') {
+            const permission = await Notification.requestPermission();
+            if (permission === 'granted') {
+                new Notification(title, { body });
+            }
+        }
+    }
+}
+// ================ SESSION SUMMARY MODAL ================
+function showSessionSummary(summary) {
+    const modal = document.createElement('div');
+    modal.className = 'modal-overlay';
+    modal.innerHTML = `
+        <div class="modal-content">
+            <h2>Session Complete!</h2>
+            <div class="summary-stats">
+                <div class="summary-item">
+                    <span class="summary-label">Duration:</span>
+                    <span class="summary-value">${formatDuration(summary.duration_seconds)}</span>
+                </div>
+                <div class="summary-item">
+                    <span class="summary-label">Focus Score:</span>
+                    <span class="summary-value">${(summary.focus_score * 100).toFixed(1)}%</span>
+                </div>
+                <div class="summary-item">
+                    <span class="summary-label">Total Frames:</span>
+                    <span class="summary-value">${summary.total_frames}</span>
+                </div>
+                <div class="summary-item">
+                    <span class="summary-label">Focused Frames:</span>
+                    <span class="summary-value">${summary.focused_frames}</span>
+                </div>
+            </div>
+            <button class="btn-main" onclick="closeModal()">Close</button>
+        </div>
+    `;
+    document.body.appendChild(modal);
+}
+function closeModal() {
+    const modal = document.querySelector('.modal-overlay');
+    if (modal) {
+        modal.remove();
+    }
+}
+function formatDuration(seconds) {
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    const secs = seconds % 60;
+    if (hours > 0) {
+        return `${hours}h ${minutes}m ${secs}s`;
+    } else if (minutes > 0) {
+        return `${minutes}m ${secs}s`;
+    } else {
+        return `${secs}s`;
+    }
+}
+// ================ GLOBAL INSTANCES ================
+const videoManager = new VideoManager();
+const timeline = new TimelineManager();
+// ================ EVENT LISTENERS ================
+// Page navigation
+document.getElementById('menu-start').addEventListener('click', () => showPage('page-b'));
+document.getElementById('menu-achievement').addEventListener('click', () => {
+    showPage('page-c');
+    loadAchievements();
+});
+document.getElementById('menu-records').addEventListener('click', () => {
+    showPage('page-d');
+    loadRecords('today');
+});
+document.getElementById('menu-customise').addEventListener('click', () => {
+    showPage('page-e');
+    loadSettings();
+});
+document.getElementById('menu-help').addEventListener('click', () => showPage('page-f'));
+document.getElementById('start-button').addEventListener('click', () => showPage('page-b'));
+// Page B controls
+document.getElementById('btn-cam-start').addEventListener('click', async () => {
+    try {
+        await videoManager.initCamera();
+        videoManager.startStreaming();
+        timeline.clear();
+        await loadCurrentSettings();
+    } catch (error) {
+        console.error('Failed to start camera:', error);
+        alert('Camera access denied. Please allow camera permissions and ensure you are using HTTPS or localhost.');
+    }
+});
+document.getElementById('btn-cam-stop').addEventListener('click', () => {
+    videoManager.stopStreaming();
+});
+document.getElementById('btn-floating').addEventListener('click', () => {
+    alert('Floating window feature coming soon!');
+});
+document.getElementById('btn-models').addEventListener('click', () => {
+    alert('Model selection feature coming soon!');
+});
+// Frame control
+const frameSlider = document.getElementById('frame-slider');
+const frameInput = document.getElementById('frame-input');
+frameSlider.addEventListener('input', (e) => {
+    const rate = parseInt(e.target.value);
+    frameInput.value = rate;
+    videoManager.setFrameRate(rate);
+});
+frameInput.addEventListener('input', (e) => {
+    const rate = parseInt(e.target.value);
+    frameSlider.value = rate;
+    videoManager.setFrameRate(rate);
+});
+// ================ ACHIEVEMENT PAGE ================
+async function loadAchievements() {
+    try {
+        const response = await fetch('/api/stats/summary');
+        const stats = await response.json();
+        document.getElementById('total-sessions').textContent = stats.total_sessions;
+        document.getElementById('total-hours').textContent =
+            (stats.total_focus_time / 3600).toFixed(1) + 'h';
+        document.getElementById('avg-focus').textContent =
+            (stats.avg_focus_score * 100).toFixed(1) + '%';
+        document.getElementById('current-streak').textContent = stats.streak_days;
+        loadBadges(stats);
+    } catch (error) {
+        console.error('Failed to load achievements:', error);
+    }
+}
+function loadBadges(stats) {
+    const badges = [
+        { name: 'First Session', condition: stats.total_sessions >= 1, icon: '' },
+        { name: '10 Sessions', condition: stats.total_sessions >= 10, icon: '' },
+        { name: '50 Sessions', condition: stats.total_sessions >= 50, icon: '' },
+        { name: '10 Hour Focus', condition: stats.total_focus_time >= 36000, icon: '' },
+        { name: '7 Day Streak', condition: stats.streak_days >= 7, icon: '' },
+        { name: '90% Avg Focus', condition: stats.avg_focus_score >= 0.9, icon: '' }
+    ];
+    const container = document.getElementById('badges-container');
+    container.innerHTML = '';
+    badges.forEach(badge => {
+        const badgeEl = document.createElement('div');
+        badgeEl.className = 'badge ' + (badge.condition ? 'earned' : 'locked');
+        badgeEl.innerHTML = `
+            <div class="badge-icon">${badge.icon}</div>
+            <div class="badge-name">${badge.name}</div>
+        `;
+        container.appendChild(badgeEl);
+    });
+}
+// ================ RECORDS PAGE ================
+async function loadRecords(filter = 'today') {
+    try {
+        const response = await fetch(`/api/sessions?filter=${filter}`);
+        const sessions = await response.json();
+        renderSessionsTable(sessions);
+        renderChart(sessions);
+    } catch (error) {
+        console.error('Failed to load records:', error);
+    }
+}
+function renderSessionsTable(sessions) {
+    const tbody = document.getElementById('sessions-tbody');
+    tbody.innerHTML = '';
+    sessions.forEach(session => {
+        const row = document.createElement('tr');
+        const date = new Date(session.start_time).toLocaleString();
+        const duration = formatDuration(session.duration_seconds);
+        const score = (session.focus_score * 100).toFixed(1) + '%';
+        row.innerHTML = `
+            <td>${date}</td>
+            <td>${duration}</td>
+            <td>${score}</td>
+            <td><button class="btn-view" onclick="viewSessionDetails(${session.id})">View</button></td>
+        `;
+        tbody.appendChild(row);
+    });
+    if (sessions.length === 0) {
+        const row = document.createElement('tr');
+        row.innerHTML = '<td colspan="4" style="text-align: center;">No sessions found</td>';
+        tbody.appendChild(row);
+    }
+}
+function renderChart(sessions) {
+    const canvas = document.getElementById('focus-chart');
+    const ctx = canvas.getContext('2d');
+    canvas.width = 800;
+    canvas.height = 300;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    if (sessions.length === 0) {
+        ctx.fillStyle = '#888';
+        ctx.font = '20px Nunito';
+        ctx.fillText('No data available', canvas.width / 2 - 80, canvas.height / 2);
+        return;
+    }
+    const barWidth = Math.min((canvas.width - 40) / sessions.length - 10, 80);
+    const maxScore = 1.0;
+    sessions.forEach((session, index) => {
+        const x = index * (barWidth + 10) + 20;
+        const barHeight = (session.focus_score / maxScore) * (canvas.height - 60);
+        const y = canvas.height - barHeight - 30;
+        ctx.fillStyle = session.focus_score > 0.7 ? '#28a745' :
+            session.focus_score > 0.4 ? '#ffc107' : '#dc3545';
+        ctx.fillRect(x, y, barWidth, barHeight);
+        ctx.fillStyle = '#333';
+        ctx.font = '12px Nunito';
+        const scoreText = (session.focus_score * 100).toFixed(0) + '%';
+        ctx.fillText(scoreText, x + barWidth / 2 - 15, y - 5);
+    });
+}
+function viewSessionDetails(sessionId) {
+    alert(`Session details for ID ${sessionId} - Feature coming soon!`);
+}
+// Filter buttons
+document.getElementById('filter-today').addEventListener('click', () => {
+    setActiveFilter('filter-today');
+    loadRecords('today');
+});
+document.getElementById('filter-week').addEventListener('click', () => {
+    setActiveFilter('filter-week');
+    loadRecords('week');
+});
+document.getElementById('filter-month').addEventListener('click', () => {
+    setActiveFilter('filter-month');
+    loadRecords('month');
+});
+document.getElementById('filter-all').addEventListener('click', () => {
+    setActiveFilter('filter-all');
+    loadRecords('all');
+});
+function setActiveFilter(activeId) {
+    document.querySelectorAll('.filter-btn').forEach(btn => {
+        btn.classList.remove('active');
+    });
+    document.getElementById(activeId).classList.add('active');
+}
+// ================ SETTINGS PAGE ================
+async function loadSettings() {
+    try {
+        const response = await fetch('/api/settings');
+        if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+        const settings = await response.json();
+        console.log('Loaded settings:', settings);
+        // Apply settings with fallback to defaults
+        document.getElementById('sensitivity-slider').value = settings.sensitivity || 6;
+        document.getElementById('sensitivity-value').textContent = settings.sensitivity || 6;
+        document.getElementById('default-framerate').value = settings.frame_rate || 30;
+        document.getElementById('framerate-value').textContent = settings.frame_rate || 30;
+        document.getElementById('enable-notifications').checked = settings.notification_enabled !== false;
+        document.getElementById('notification-threshold').value = settings.notification_threshold || 30;
+    } catch (error) {
+        console.error('Failed to load settings:', error);
+        alert('Failed to load settings: ' + error.message);
+    }
+}
+async function saveSettings() {
+    const settings = {
+        sensitivity: parseInt(document.getElementById('sensitivity-slider').value),
+        frame_rate: parseInt(document.getElementById('default-framerate').value),
+        notification_enabled: document.getElementById('enable-notifications').checked,
+        notification_threshold: parseInt(document.getElementById('notification-threshold').value)
+    };
+    console.log('Saving settings:', settings);
+    try {
+        const response = await fetch('/api/settings', {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(settings)
+        });
+        if (response.ok) {
+            const result = await response.json();
+            console.log('Settings saved:', result);
+            alert('Settings saved successfully!');
+            await loadCurrentSettings();
+        } else {
+            const error = await response.text();
+            console.error('Save failed with status:', response.status, error);
+            alert(`Failed to save settings: ${response.status} ${response.statusText}`);
+        }
+    } catch (error) {
+        console.error('Failed to save settings:', error);
+        alert('Failed to save settings: ' + error.message);
+    }
+}
+// Settings UI handlers
+document.getElementById('sensitivity-slider').addEventListener('input', (e) => {
+    document.getElementById('sensitivity-value').textContent = e.target.value;
+});
+document.getElementById('default-framerate').addEventListener('input', (e) => {
+    document.getElementById('framerate-value').textContent = e.target.value;
+});
+document.getElementById('save-settings').addEventListener('click', saveSettings);
+document.getElementById('export-data').addEventListener('click', async () => {
+    try {
+        const response = await fetch('/api/sessions?filter=all');
+        const sessions = await response.json();
+        const dataStr = JSON.stringify(sessions, null, 2);
+        const dataBlob = new Blob([dataStr], { type: 'application/json' });
+        const url = URL.createObjectURL(dataBlob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = `focus-guard-data-${new Date().toISOString().split('T')[0]}.json`;
+        link.click();
+        URL.revokeObjectURL(url);
+    } catch (error) {
+        console.error('Failed to export data:', error);
+        alert('Failed to export data');
+    }
+});
+document.getElementById('clear-history').addEventListener('click', async () => {
+    if (confirm('Are you sure you want to clear all history? This cannot be undone.')) {
+        alert('Clear history feature requires backend implementation');
+    }
+});
+// ================ INITIALIZATION ================
+// Request notification permission on load
+if ('Notification' in window && Notification.permission === 'default') {
+    Notification.requestPermission();
+}
+// Load settings on startup
+loadCurrentSettings();
+console.log(' Focus Guard initialized');

static/styles.css ADDED Viewed

	@@ -0,0 +1,635 @@

+/* GLOBAL STYLES */
+body {
+    margin: 0;
+    font-family: 'Nunito', sans-serif; /* Rounded font */
+    background-color: #f9f9f9;
+    height: 100vh;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+.hidden {
+    display: none !important;
+}
+/* TOP MENU */
+#top-menu {
+    height: 60px;
+    background-color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center; /* Center buttons horizontally */
+    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 1000;
+}
+.menu-btn {
+    background: none;
+    border: none;
+    font-family: 'Nunito', sans-serif;
+    font-size: 16px;
+    color: #333;
+    padding: 10px 20px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+.menu-btn:hover {
+    background-color: #f0f0f0;
+    border-radius: 4px;
+}
+.separator {
+    width: 1px;
+    height: 20px;
+    background-color: #555; /* Dark gray separator */
+    margin: 0 5px;
+}
+/* PAGE CONTAINER */
+.page {
+    min-height: calc(100vh - 60px);
+    width: 100%;
+    padding-top: 60px; /* Space for fixed menu */
+    padding-bottom: 40px; /* Space at bottom for scrolling */
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-y: auto; /* Enable vertical scrolling */
+}
+/* PAGE A SPECIFIC */
+#page-a {
+    justify-content: center; /* Center vertically */
+    margin-top: -40px; /* Slight offset to look optical centered */
+}
+#page-a h1 {
+    font-size: 80px;
+    margin: 0 0 10px 0;
+    color: #000;
+}
+#page-a p {
+    color: #666;
+    font-size: 20px;
+    margin-bottom: 40px;
+}
+.btn-main {
+    background-color: #007BFF; /* Blue */
+    color: white;
+    border: none;
+    padding: 15px 50px;
+    font-size: 20px;
+    font-family: 'Nunito', sans-serif;
+    border-radius: 30px; /* Fully rounded corners */
+    cursor: pointer;
+    transition: transform 0.2s ease;
+}
+.btn-main:hover {
+    transform: scale(1.1); /* Zoom effect */
+}
+/* PAGE B SPECIFIC */
+#page-b {
+    justify-content: space-evenly; /* Distribute vertical space */
+    padding-bottom: 20px;
+}
+/* 1. Display Area */
+#display-area {
+    width: 60%;
+    height: 50%; /* Takes up half the page height */
+    border: 2px solid #ddd;
+    border-radius: 12px;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #555;
+    font-size: 24px;
+    position: relative;
+}
+/* 2. Timeline Area */
+#timeline-area {
+    width: 60%;
+    height: 80px;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+}
+.timeline-label {
+    position: absolute;
+    top: 0;
+    left: 0;
+    color: #888;
+    font-size: 14px;
+}
+#timeline-line {
+    width: 100%;
+    height: 2px;
+    background-color: #87CEEB; /* Light blue */
+}
+/* 3. Control Panel */
+#control-panel {
+    display: flex;
+    gap: 20px;
+    width: 60%;
+    justify-content: space-between;
+}
+.action-btn {
+    flex: 1; /* Evenly distributed width */
+    padding: 12px 0;
+    border: none;
+    border-radius: 12px;
+    font-size: 16px;
+    font-family: 'Nunito', sans-serif;
+    font-weight: 700;
+    cursor: pointer;
+    color: white;
+    transition: opacity 0.2s;
+}
+.action-btn:hover {
+    opacity: 0.9;
+}
+.action-btn.green { background-color: #28a745; }
+.action-btn.yellow { background-color: #ffc107; color: #333; }
+.action-btn.blue { background-color: #17a2b8; }
+.action-btn.red { background-color: #dc3545; }
+/* 4. Frame Control */
+#frame-control {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    color: #333;
+    font-weight: bold;
+}
+#frame-slider {
+    width: 200px;
+    cursor: pointer;
+}
+#frame-input {
+    width: 50px;
+    padding: 5px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    text-align: center;
+    font-family: 'Nunito', sans-serif;
+}
+/* ================ ACHIEVEMENT PAGE ================ */
+.stats-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 20px;
+    width: 80%;
+    margin: 40px auto;
+}
+.stat-card {
+    background: white;
+    padding: 30px;
+    border-radius: 12px;
+    text-align: center;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+.stat-number {
+    font-size: 48px;
+    font-weight: bold;
+    color: #007BFF;
+    margin-bottom: 10px;
+}
+.stat-label {
+    font-size: 16px;
+    color: #666;
+}
+.achievements-section {
+    width: 80%;
+    margin: 0 auto;
+}
+.achievements-section h2 {
+    color: #333;
+    margin-bottom: 20px;
+}
+.badges-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
+}
+.badge {
+    background: white;
+    padding: 30px 20px;
+    border-radius: 12px;
+    text-align: center;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    transition: transform 0.2s;
+}
+.badge:hover {
+    transform: translateY(-5px);
+}
+.badge.locked {
+    opacity: 0.4;
+    filter: grayscale(100%);
+}
+.badge-icon {
+    font-size: 64px;
+    margin-bottom: 15px;
+}
+.badge-name {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+}
+/* ================ RECORDS PAGE ================ */
+.records-controls {
+    display: flex;
+    gap: 10px;
+    margin: 20px auto;
+    width: 80%;
+    justify-content: center;
+}
+.filter-btn {
+    padding: 10px 20px;
+    border: 2px solid #007BFF;
+    background: white;
+    color: #007BFF;
+    border-radius: 8px;
+    cursor: pointer;
+    font-family: 'Nunito', sans-serif;
+    font-weight: 600;
+    transition: all 0.2s;
+}
+.filter-btn:hover {
+    background: #e7f3ff;
+}
+.filter-btn.active {
+    background: #007BFF;
+    color: white;
+}
+.chart-container {
+    width: 80%;
+    background: white;
+    padding: 30px;
+    border-radius: 12px;
+    margin: 20px auto;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+#focus-chart {
+    display: block;
+    margin: 0 auto;
+}
+.sessions-list {
+    width: 80%;
+    margin: 20px auto;
+}
+.sessions-list h2 {
+    color: #333;
+    margin-bottom: 15px;
+}
+#sessions-table {
+    width: 100%;
+    background: white;
+    border-collapse: collapse;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+#sessions-table th {
+    background: #007BFF;
+    color: white;
+    padding: 15px;
+    text-align: left;
+    font-weight: 600;
+}
+#sessions-table td {
+    padding: 12px 15px;
+    border-bottom: 1px solid #eee;
+}
+#sessions-table tr:last-child td {
+    border-bottom: none;
+}
+#sessions-table tbody tr:hover {
+    background: #f8f9fa;
+}
+.btn-view {
+    padding: 6px 12px;
+    background: #007BFF;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-family: 'Nunito', sans-serif;
+    transition: background 0.2s;
+}
+.btn-view:hover {
+    background: #0056b3;
+}
+/* ================ SETTINGS PAGE ================ */
+.settings-container {
+    width: 60%;
+    max-width: 800px;
+    margin: 20px auto;
+}
+.setting-group {
+    background: white;
+    padding: 30px;
+    border-radius: 12px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+.setting-group h2 {
+    margin-top: 0;
+    color: #333;
+    font-size: 20px;
+    margin-bottom: 20px;
+    border-bottom: 2px solid #007BFF;
+    padding-bottom: 10px;
+}
+.setting-item {
+    margin-bottom: 25px;
+}
+.setting-item:last-child {
+    margin-bottom: 0;
+}
+.setting-item label {
+    display: block;
+    margin-bottom: 8px;
+    color: #333;
+    font-weight: 600;
+}
+.slider-group {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+.slider-group input[type="range"] {
+    flex: 1;
+}
+.slider-group span {
+    min-width: 40px;
+    text-align: center;
+    font-weight: bold;
+    color: #007BFF;
+    font-size: 18px;
+}
+.setting-description {
+    font-size: 14px;
+    color: #666;
+    margin-top: 5px;
+    font-style: italic;
+}
+input[type="checkbox"] {
+    margin-right: 10px;
+    cursor: pointer;
+}
+input[type="number"] {
+    width: 100px;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-family: 'Nunito', sans-serif;
+}
+.setting-group .action-btn {
+    margin-right: 10px;
+    margin-top: 10px;
+}
+#save-settings {
+    display: block;
+    margin: 20px auto;
+}
+/* ================ HELP PAGE ================ */
+.help-container {
+    width: 70%;
+    max-width: 900px;
+    margin: 20px auto;
+}
+.help-section {
+    background: white;
+    padding: 30px;
+    border-radius: 12px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+.help-section h2 {
+    color: #007BFF;
+    margin-top: 0;
+    margin-bottom: 15px;
+}
+.help-section ol,
+.help-section ul {
+    line-height: 1.8;
+    color: #333;
+}
+.help-section p {
+    line-height: 1.6;
+    color: #333;
+}
+details {
+    margin: 15px 0;
+    cursor: pointer;
+    padding: 10px;
+    background: #f8f9fa;
+    border-radius: 5px;
+}
+summary {
+    font-weight: bold;
+    padding: 5px;
+    color: #007BFF;
+}
+details[open] summary {
+    margin-bottom: 10px;
+    border-bottom: 1px solid #ddd;
+    padding-bottom: 10px;
+}
+details p {
+    margin: 10px 0 0 0;
+}
+/* ================ SESSION SUMMARY MODAL ================ */
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2000;
+}
+.modal-content {
+    background: white;
+    padding: 40px;
+    border-radius: 16px;
+    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+    max-width: 500px;
+    width: 90%;
+}
+.modal-content h2 {
+    margin-top: 0;
+    color: #333;
+    text-align: center;
+    margin-bottom: 30px;
+}
+.summary-stats {
+    margin-bottom: 30px;
+}
+.summary-item {
+    display: flex;
+    justify-content: space-between;
+    padding: 15px 0;
+    border-bottom: 1px solid #eee;
+}
+.summary-item:last-child {
+    border-bottom: none;
+}
+.summary-label {
+    font-weight: 600;
+    color: #666;
+}
+.summary-value {
+    font-weight: bold;
+    color: #007BFF;
+    font-size: 18px;
+}
+.modal-content .btn-main {
+    display: block;
+    margin: 0 auto;
+    padding: 12px 40px;
+}
+/* ================ TIMELINE BLOCKS ================ */
+.timeline-block {
+    transition: opacity 0.2s;
+    border-radius: 2px;
+}
+.timeline-block:hover {
+    opacity: 0.7;
+}
+/* ================ RESPONSIVE DESIGN ================ */
+@media (max-width: 1200px) {
+    .stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    .badges-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+@media (max-width: 768px) {
+    .stats-grid,
+    .badges-grid {
+        grid-template-columns: 1fr;
+        width: 90%;
+    }
+    .settings-container,
+    .help-container,
+    .chart-container,
+    .sessions-list,
+    .records-controls {
+        width: 90%;
+    }
+    #control-panel {
+        width: 90%;
+        flex-wrap: wrap;
+    }
+    #display-area {
+        width: 90%;
+    }
+    #timeline-area {
+        width: 90%;
+    }
+    #frame-control {
+        width: 90%;
+        flex-direction: column;
+    }
+}