<!DOCTYPE html>
<html>

<head>
    <title>burgernotes</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="/static/css/style.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"
        integrity="sha512-E8QSvWZ0eCLGk4km3hxSsNmGWbLtSCSUcewDQPQWZF6pEU8GlT8a5fF32wOl1i8ftdMhssTrF/OhyGWwonTcXA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>

<body>
    <div class="topBar">
        <p class="logo" id="burgerButton">burgernotes</p>
        <p id="usernameBox" class="usernameBox"></p>
    </div>

    <div id="notesBar" class="notesBar">
        <button id="newNote" class="newNote"><img id="newNoteImage" draggable="false" alt="" src="/static/svg/add.svg">new note</button>
        <div id="notesDiv" class="notesDiv">
            <button class="loadingStuff" id="loadingStuff"></button>
        </div>
    </div>

    <div class="burgerDropdown hidden" id="burgerDropdown">
        <a href="/">burgernotes</a><br><br>
        <a href="/" class="hidden">:3</a>
    </div>

    <div id="optionsCoverDiv" class="optionsCoverDiv hidden">
        <div class="optionsDiv">
            <button class="exit" id="exitThing">X</button>
            <h3>manage your account</h3>
            <p id="usernameThing"></p>
            <progress id="storageProgressThing" value="0" max="100"></progress><br>
            <p id="storageThing"></p>
            <button id="logOutButton">log out</button>
            <button id="deleteMyAccountButton">delete my account</button>
            <button id="exportNotesButton">export notes</button>
        </div>
    </div>

    <textarea id="noteBox" class="noteBox"></textarea>

    <script type="text/javascript" src="/static/js/main.js"></script>
</body>

</html>