Untitled

<html>
<style>
    body {
        background-color: white;
    }

    .menuBar {
        background-color: #fcd8a1;
        border-color: #fcd8a1;
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
    }

    .menuBar a {
        float: right;
        color: black;
        text-align: center;
        padding: 16px 16px;
        text-decoration: none;
        font-size: 32;
        font-family: Tahoma;
    }

    .menuBar a:hover, .dropBtn:hover {
        background-color: #ffcd11;
        color: white;
    }

    .menuBar b {
        float: left;
        color: black;
        text-align: center;
        padding: 16px 16px;
        text-decoration: none;
        font-size: 32;
        font-family: Tahoma;
    }

    .dropBtn {
        background-color: #fcd8a1;
        border:none;
        color: black;
        text-align: center;
        font-family: Tahoma;
        font-size: 32px;
        padding: 16px;
    }


    .dropBtn:hover, .dropBtn:focus {
        background-color: #ffcd11;
    }

    .dropdown {
        position: relative;
        display: inline-block;
        float: right;
    }

    .dropdownContent {
        display: none;
        position: absolute;
        background-color: #fcd8a1;
        min-width: 100px;
        overflow: auto;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        background-color: #ffcd11;
        z-index: 1;
    }

    .dropdownContent a {
        color: black;
        text-decoration: none;
        background-color: #fcd8a1;
        display: block;
    }

    .dropdown a:hover {
        background-color: #ffcd11;
    }

    .box {
        height: 250px;
        width: 33%;
        background-color: #FFFFFF;
        border:1px solid black;
        font-family: Tahoma;
        position: absolute;
        left: 33%;
        top: 20%;
        border-radius: 12px;
    }

    .gap {
        height: 20px;
    }

    .gap2 {
        height: 10px;
    }

    .createBtn {
        position: absolute;
        right: -0px;
        bottom: -30px;
        padding-bottom: 0px;
        height = 20px;
        width = 80px;
        font-family: Tahoma;
        background: rgba(0,0,0,0);
        color: black;
        padding: 5px 15px;
        text-align: center;
        font-size: 10pt;
        cursor: pointer;
        background-color: #FFFFFF;
        border:1px solid black;
        border-radius: 12px;
    }

    .button2:hover {
        color: white;
    }

    #signIn label {
        margin-left: 3%;
        display: inline-block;
        width: 150px;
    }

    #firstName, #lastName, #jobTitle, #department, #phoneNumber, #confirm {
        width: 58%;
        margin-left: 5px;
        box-sizing: border-box;
        border: none;
        border-bottom: 2px solid #fcd8a1;
        font-family: Tahoma;
    }

    .show {display: block;}

    .timestamp {
        text-align: right;
        font-size: 32;
        position: fixed;
        right: 5px;
        top: 5px;
        font-family: Tahoma;
    }

    .fontSizeButton {

        background-color: #fcd8a1;
        border:none;
        color: black;
        text-align: center;
        font-family: Tahoma;
        font-size: 32px;
        padding: 16px;

    }
    .fontSizeButton:hover {
        background-color: #ffcd11;
    }

</style>

<script>
    function startTime() {
        var today = new Date();
        var h = today.getHours();
        var m = today.getMinutes();
        h = checkTime(h);
        m = checkTime(m);
        document.getElementById('timestamp').innerHTML =
            "Operator Name - " + h + ":" + m ;
        var t = setTimeout(startTime, 500);
    }
    function checkTime(i) {
        if (i < 10) {i = "0" + i};
        return i;
    }

    var increasetrue = true;


    function increaseFontSize() {

        if (increasetrue == true) {
            document.getElementById("fontSizeButton").innerHTML = "aA&#818";
            document.getElementById("boxDiv").style.height = "300px";


            document.getElementById("firstNameLabel").style.fontSize = "18pt";
            document.getElementById("lastNameLabel").style.fontSize = "18pt";
            document.getElementById("jobTitleLabel").style.fontSize = "18pt";
            document.getElementById("departmentLabel").style.fontSize = "18pt";
            document.getElementById("phoneNumberLabel").style.fontSize = "18pt";

            document.getElementById("firstName").style.fontSize = "18pt";
            document.getElementById("lastName").style.fontSize = "18pt";
            document.getElementById("jobTitle").style.fontSize = "18pt";
            document.getElementById("department").style.fontSize = "18pt";
            document.getElementById("phoneNumber").style.fontSize = "18pt";

            document.getElementById("submitButton").style.fontSize = "16pt";
            document.getElementById("submitButton").style.bottom = "-40px";

            increasetrue = false;
        }

        else if (increasetrue == false){
            document.getElementById("fontSizeButton").innerHTML = "a&#818A";
            document.getElementById("boxDiv").style.height = "250px";


            document.getElementById("firstNameLabel").style.fontSize = "12pt";
            document.getElementById("lastNameLabel").style.fontSize = "12pt";
            document.getElementById("jobTitleLabel").style.fontSize = "12pt";
            document.getElementById("departmentLabel").style.fontSize = "12pt";
            document.getElementById("phoneNumberLabel").style.fontSize = "12pt";

            document.getElementById("firstName").style.fontSize = "12pt";
            document.getElementById("lastName").style.fontSize = "12pt";
            document.getElementById("jobTitle").style.fontSize = "12pt";
            document.getElementById("department").style.fontSize = "12pt";
            document.getElementById("phoneNumber").style.fontSize = "12pt";

            document.getElementById("submitButton").style.fontSize = "10pt";
            document.getElementById("submitButton").style.bottom = "-30px";

            increasetrue = true ;


        }
    }

</script>

<head>
    <title>Create Account</title>
</head>

<body onload="startTime()">

<div id="menuBar" class="menuBar">
    <b style="float: left;">Make-It-All</b>
    <div class="dropdown">
        <b style="font-weight:normal" id="timestamp"></b>
    </div>
    <div class="dropdown">
        <button onclick="problemDropdown()" class="dropBtn">Menu</button>
        <div id="problemDropdown" class="dropdownContent">
            <a href="/addproblem">New Problem</a>
            <a href="/loadproblem">Load Problem</a>
            <a href="/createaccount">Create Account</a>
            <a href="/login">Logout</a>
        </div>
    </div>
    <div>
        <button id="fontSizeButton" type="submit" class="fontSizeButton" onclick="increaseFontSize()" >a&#818A</button>
    </div>

</div>

<div id="boxDiv" class="box">
    <form id="signIn">
        <div class="gap"></div>
        <label id="firstNameLabel" for="firstName">First Name:</label>
        <input type="text" id="firstName" name="firstName">
        <div class="gap"></div>
        <label id="lastNameLabel" for="lastName">Last Name:</label>
        <input type="text" id="lastName" name="lastName">
        <div class="gap"></div>
        <label id="jobTitleLabel" for="jobTitle">Job Title:</label>
        <input type="text" id="jobTitle" name="jobTitle">
        <div class="gap"></div>
        <label id="departmentLabel" for="department">Department:</label>
        <input type="text" id="department" name="department">
        <div class="gap"></div>
        <label id="phoneNumberLabel" for="phoneNumber">Phone Number:</label>
        <input type="text" id="phoneNumber" name="phoneNumber">
    </form>
    <a href="/menu"><button id="submitButton" class="createBtn">Create</button></a>
</div>

<script>
    /* When the user clicks on the button,
    toggle between hiding and showing the dropdown content */
    function problemDropdown() {
        document.getElementById("problemDropdown").classList.toggle("show");
    }

    function userDropdown() {
        document.getElementById("userDropdown").classList.toggle("show");
    }

    // Close the dropdown if the user clicks outside of it
    window.onclick = function(event) {
        if (!event.target.matches('.dropBtn')) {
            var dropdowns = document.getElementsByClassName("dropdownContent");
            var i;
            for (i = 0; i < dropdowns.length; i++) {
                var openDropdown = dropdowns[i];
                if (openDropdown.classList.contains('show')) {
                    openDropdown.classList.remove('show');
                }
            }
        }
    }
</script>
</body>
</html>