index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Websnaps</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script defer src="app.js"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <noscript>
        <h1>This page needs JavaScript enabled to work</h1>
    </noscript>
    <main class="app">
        <video class="video" title="Click to take a snap!"></video>
        <menu class="options">
            <button class="btn trigger-btn" title="Take a snapshot after 3 secs">
                <span class="camera-icon">📷</span>
                <span class="countdown"></span> secs</button>

            <label class="btn mirror-btn" title="Switch between original and mirrored webcam feed" for="mirror">
                <input type="checkbox" class="mirror-btn-input" name="mirror" id="mirror">Flip image</label>

            <select class="btn filter-select" title="Select a filter effect" name="filters" id="filters">
                <option value="none" selected>No filter</option>
                <option value="grayscale(100%)">Grayscale</option>
                <option value="invert(100%)">Invert</option>
                <option value="sepia(60%)">Retro</option>
                <option value="contrast(200%)">High Contrast</option>
                <option value="contrast(50%)">Low Contrast</option>
            </select>

        </menu>
        <section class="snapshots" data-trigger-hint="CLICK on the camera feed, press the SPACEBAR or use the DELAY BUTTON to take a snapshot!"
            data-usage-hint="ℹ Hover or tap a snapshot to download or delete it. Snapshots are not automatically saved and will be lost on reload."></section>
        <footer class="footer">Made with ❤️ and ☕ in 2018 by
            <a href="https://github.com/luke-codewalker/websnaps" target="_blank" rel="noreferrer noopener">Lukas Eschstruth</a>
        </footer>
    </main>


</body>

</html>