<!DOCTYPE html>
    <head>
        <link href="style.css" rel="stylesheet" type="text/css"/>
        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap" rel="stylesheet"/>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.29/vue.global.prod.js"></script>
    </head>

    <body>
        <div id="mainContainer">
            <audio id="sounds"><source type="audio/ogg"></audio>
            <div id="doorlock-container" :class="doorlockClassObject" :style="doorlockStyleObject">{{ doorText }}</div>
            <div class="textInfo">
                <p id="aim" style="display: none;">Aim at your desired door.<br>Press the left mouse button to confirm the selected door</p>
                <div id="textDetails" style="display: none;">
                    <p id="coords">Coordinates: {{ coords }}</p>
                    <p id="heading">Heading: {{ heading }}</p>
                    <p id="hash">Hash: {{ hash }}</p>
                </div>
            </div>
        </div>
        <script src="app.js" type="text/javascript"></script>
    </body>
</html>