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: 240px;
        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;
    }

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

    #firstName, #lastName, #username, #password, #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>

    var increasetrue = true;

    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;
    }

    //Function that ensures that passwords match, the username does not already exist and that a password has been entered
    function operatorSubmit(){

        var alreadyExists = false;
        var username = document.getElementById('username').value;
        var password = document.getElementById('password').value;
        var confirm = document.getElementById('confirm').value;
        var firstName = document.getElementById('firstName').value;
        var lastName = document.getElementById('lastName').value;

        @foreach($operators as $key => $data)
        if("{{$data->username}}"==username){
            alreadyExists = true;
        }
        @endforeach

        if((password === confirm) && alreadyExists===false && !(password === "" || confirm === "") && !(firstName === "" || lastName === "")){
            document.getElementById('createOperator').submit();
        }
        else if(firstName === "" || lastName === ""){
            alert('Please enter a first and last name');
        }
        else if(alreadyExists===true){
            alert('This username already exists');
        }
        else if(password === "" || confirm === ""){
            alert('Please ensure the new password has been entered twice');
        }
        else{
            alert('Passwords do not match');
        }
    }

    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("usernameLabel").style.fontSize = "18pt";
            document.getElementById("passwordLabel").style.fontSize = "18pt";
            document.getElementById("confirmPasswordLabel").style.fontSize = "18pt";

            document.getElementById("firstName").style.fontSize = "18pt";
            document.getElementById("lastName").style.fontSize = "18pt";
            document.getElementById("username").style.fontSize = "18pt";
            document.getElementById("password").style.fontSize = "18pt";
            document.getElementById("confirm").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 = "240px";


            document.getElementById("firstNameLabel").style.fontSize = "12pt";
            document.getElementById("lastNameLabel").style.fontSize = "12pt";
            document.getElementById("usernameLabel").style.fontSize = "12pt";
            document.getElementById("passwordLabel").style.fontSize = "12pt";
            document.getElementById("confirmPasswordLabel").style.fontSize = "12pt";

            document.getElementById("firstName").style.fontSize = "12pt";
            document.getElementById("lastName").style.fontSize = "12pt";
            document.getElementById("username").style.fontSize = "12pt";
            document.getElementById("password").style.fontSize = "12pt";
            document.getElementById("confirm").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="createOperator" action="" method="POST">
        @csrf
        <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="usernameLabel" for="username">Username:</label>
        <input type="text" id="username" name="username">
        <div class="gap"></div>
        <label id="passwordLabel" for="password">Password:</label>
        <input type="password" id="password" name="password">
        <div class="gap"></div>
        <label id="confirmPasswordLabel" for="confirm">Confirm Password:</label>
        <input type="password" id="confirm" name="confirm">
    </form>
    <button id="submitButton" onclick="operatorSubmit()" class="createBtn">Create</button>
</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>