<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="JS\ToDo.js"></script>
    <link rel="stylesheet" type="text/css" href="CSS\ToDo.css"></script>
    <title>To-Do App</title>
</head>
<body onload="PageOnLoad()" style="background-color: rgb(0, 1, 75); margin: auto; position: absolute; top: 0%;bottom: 0%;left: 0%;right: 0%; width: 80%;">
    <div id="HeaderDiv">
        <p style="font-weight: bold; font-size: 32px;margin: auto; position: absolute; text-align: center;left: 0%;right: 0%; top: 0%;bottom: 0%;">The ToDo APP</p>
    </div>
    <div id="BodyDiv">
        <div id="ListDiv">
            <div style="flex-direction: row;position: absolute;top: 1%;left: 1%;right: 1%;margin: auto; height: 7%;">
                <p id="SelectedListName" style="color: aliceblue; position: absolute;left: 0%; height: 100%;
                margin: auto; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 200%; text-align: left;"></p>
                <button id="DeleteListButton" onclick="DeleteList()" style="color: aliceblue; position: absolute;top: 0%;right: 2%; margin: auto; height: 80%; bottom: 0%;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 100%; text-align: center;background-color: rgb(226, 0, 106);">DELETE LIST</button>
                <button id="EditListButton" onclick="EditListName()" style="color: aliceblue; position: absolute;top: 0%;right: 14%; margin: auto; height: 80%; bottom: 0%;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 100%; text-align: center;background-color: rgb(129, 204, 32);">EDIT</button>
            </div>
            <ol id="ItemOL"></ol>
            <div id="NewItemBoxDiv" style="flex-direction: row;">
                <input type="text" placeholder="  Add New Item" id="NewItemBox">
                <button class="ButtonStyle" onclick="AddNewTask()" style="margin:auto;position: absolute;right: 1%;bottom: 1%; top: 1%; width:5%;">Add</button>
            </div>
        </div>
        <div id="ListsNav">
            <h2 style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;position: absolute;margin: auto;top: 0%;left: 0%;right: 0%;">YOUR LISTS</h2>
            <ol id="ListsOL"></ol>
            <button id="AddListButton" onclick="AddList()" style="color: aliceblue; position: absolute;right: 2%; margin: auto; height: 8%; bottom: 2%;left: 2%; width:70%;
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 100%; text-align: center;background-color: rgb(15, 119, 179);">ADD LIST</button>
        </div>
        <div id="AppNav">
            <button id="DBButtonDiv" style="bottom: 85%;" onclick="ShutDownServer()">Shut Down Server</button>
            <button id="DBButtonDiv" style="bottom: 69%;" onclick="DestroyToDoDBFrame()">Destroy Database</button>
            <button id="DBButtonDiv" style="bottom: 53%;" onclick="DispAbout()">ABOUT</button>
            <button id="DBButtonDiv" style="bottom: 37%;" onclick="DispToDoDataFrame()">Print ToDoBDFrame to terminal</button>
            <button id="DBButtonDiv" style="bottom: 21%;" onclick="RefreshList()">Refresh List</button>
            <button id="DBButtonDiv" style="bottom: 5%;" onclick="ExportToDoDB()">EXPORT TODO DATABASE</button>
        </div>
    </div>
    <div id="FooterDiv" class="row">
        <p style="font-weight: bold; position: absolute; left: 5px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">App Status and notification:</p>
        <p style="position: absolute; left: 250px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">Everything looks good!</p>
    </div>
</body>
</html>