<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>SafeSnap Camera</title>

    <!-- Link to External CSS -->

    <link rel="stylesheet" href="styles.css">

    <!-- Include Hammer.js for Touch Gestures -->

    <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8/hammer.min.js"></script>

</head>

<body>

    <!-- Loading Indicator -->

    <div id="loading" class="loading hidden">

        <div class="spinner"></div>

    </div>

    <!-- Video Feed -->

    <video id="video" autoplay playsinline></video>

    <!-- Overlay Canvas -->

    <canvas id="overlay"></canvas>

    <!-- Controls -->

    <div class="controls">

        <select id="overlaySelector" data-tooltip="Choose an overlay to add to your photo">

            <option value="none">No Overlay</option>

            <option value="glasses">Cartoon Glasses</option>

            <option value="crown">Flower Crown</option>

            <option value="stars">Twinkling Stars</option>

            <option value="custom">Upload Custom Overlay</option>

        </select>

        <button data-filter="none" data-tooltip="Remove all filters">None</button>

        <button data-filter="grayscale(100%)" data-tooltip="Apply Grayscale Filter">Grayscale</button>

        <button data-filter="sepia(100%)" data-tooltip="Apply Sepia Filter">Sepia</button>

        <button data-filter="blur(5px)" data-tooltip="Apply Blur Filter">Blur</button>

        <button id="capture" data-tooltip="Capture Photo">Capture</button>

        <button id="download" data-tooltip="Download Photo">Download</button>

        <button id="openGallery" data-tooltip="Open Gallery">Gallery</button>

        <input type="file" id="customOverlayInput" accept="image/*" style="display:none;">

    </div>

    <!-- Gallery Modal -->

    <div id="gallery" class="hidden">

        <div class="gallery-container">

            <span id="closeGallery" aria-label="Close Gallery">&times;</span>

            <h2>Your Gallery</h2>

            <div id="galleryImages"></div>

        </div>

    </div>

    <!-- Link to External JavaScript -->

    <script src="script.js"></script>

</body>

</html>