<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glasses Virtual Try-On</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css?v=<?= time() ?>">
</head>
<body>

<div class="app-container">
    <header class="app-header">
        <h1>SnapGlass Try-On</h1>
        <a href="admin.php" class="nav-link">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg>
            Admin Panel
        </a>
    </header>

    <main class="camera-section">
        <div class="video-container">
            <button id="prev-glass" class="nav-arrow left">&lsaquo;</button>
            <video id="video" width="720" height="560" autoplay muted playsinline></video>
            <canvas id="canvas" width="720" height="560"></canvas>
            <button id="next-glass" class="nav-arrow right">&rsaquo;</button>
            
            <div id="loading" class="loading-overlay">
                <div class="spinner"></div>
                <p>Loading AI Models & Camera...</p>
            </div>
            <div id="error-message" class="error-overlay" style="display: none;">
                <p>Camera access denied or unavailable.</p>
            </div>
        </div>
    </main>

    <section class="controls-section">
        <div class="controls-header">
            <h2>Select Glasses</h2>
        </div>
        <div class="glasses-carousel" id="glasses-carousel">
            <!-- Carousel items populated via JS -->
            <div class="glass-item skeleton"></div>
            <div class="glass-item skeleton"></div>
            <div class="glass-item skeleton"></div>
            <div class="glass-item skeleton"></div>
        </div>
        
        <div class="fit-controls">
            <div class="slider-group">
                <label for="scale-slider">Size</label>
                <input type="range" id="scale-slider" min="1.0" max="4.0" step="0.1" value="2.2">
            </div>
            <div class="slider-group">
                <label for="offset-slider">Position (Up/Down)</label>
                <input type="range" id="offset-slider" min="-1.0" max="1.0" step="0.05" value="-0.15">
            </div>
        </div>
        
        <div class="actions">
            <button id="capture-btn" class="btn btn-primary" title="Capture Snapshot">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="13" r="4"></circle><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path></svg>
            </button>
            <button id="download-btn" class="btn btn-secondary" title="Download Image" disabled>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
            </button>
        </div>
    </section>
</div>

<!-- Face API Library -->
<script src="js/face-api.min.js"></script>
<!-- Application Logic -->
<script src="js/app.js"></script>
</body>
</html>
