<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Photobox</title>
    <meta name="viewport" content="width=device-width">
    <script src="../src/web/socket.io.min.js"></script>
    <script src="../dist/photobox.js"></script>
    <link rel="stylesheet" href="style.css">
    <link rel="preload" as="image" href="../images/broken.png">
    <link rel="preload" as="image" href="../images/lock.png">
    <link rel="preload" as="image" href="../images/buzzer_blue.png">
    <link rel="preload" as="image" href="../images/buzzer_red.png">
    <link rel="stylesheet" href="https://fonts.gaminggeneration.de/Roboto.css">
</head>
<body>
<!-- The Modal -->
<div id="myModal" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
        <span id="modalClose" class="close">&times;</span>
        <h1 id="modalTitle"></h1>
        <p id="modalText"></p>
    </div>
</div>

<div id="flash"></div>
<div id="titleBox">
    <h1>Fotobox</h1>
</div>

<div id="imageBox"><img id="imageElement"></div>
<p id="countdown"></p>
<div id="buttonBox">
    <h2>Foto machen</h2>
    <img id="capture" src="../images/buzzer_red.png" class="button">
    <br><br>
    <h2>Foto löschen</h2>
    <img id="delete" src="../images/buzzer_blue.png" class="button">
</div>
<div id="lastImages">
</div>
</body>
</html>