Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <style>
- <style>
- //CSS styling for this page
- 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-color: #fcd8a1;
- color: black;
- padding: 5px 15px;
- text-align: center;
- font-size: 10pt;
- cursor: pointer;
- border:1px solid black;
- border-radius: 12px;
- }
- .button2:hover {
- color: #fcd8a1;
- }
- #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>
- //Define boolean value to store whether text should normally sized or larger
- var increasetrue = true;
- //Function to change font size on button click
- function increaseFontSize() {
- if (increasetrue == true) {
- //Increase font size
- document.getElementById("fontSizeButton").innerHTML = "aA̲";
- 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) {
- //Make font normally sized
- document.getElementById("fontSizeButton").innerHTML = "a̲A";
- 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;
- }
- }
- //Create timestamp
- function startTime() {
- var today = new Date();
- var h = today.getHours();
- var m = today.getMinutes();
- h = checkTime(h);
- m = checkTime(m);
- document.getElementById('timestamp').innerHTML =
- "<?php echo explode(",",$_COOKIE['operatorCookie'])[1] ?>" + " - " + h + ":" + m ;
- var t = setTimeout(startTime, 500);
- }
- //Update timestamp
- 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;
- //If username already exists
- @foreach($operators as $key => $data)
- if("{{$data->username}}"==username){
- alreadyExists = true;
- }
- @endforeach
- //If all conditions met
- if((password === confirm) && alreadyExists===false && !(password === "" || confirm === "") && !(firstName === "" || lastName === "")){
- document.getElementById('createOperator').submit();
- }
- //If first and last name not inputted
- else if(firstName === "" || lastName === ""){
- alert('Please enter a first and last name');
- }
- //If username already exists in database
- else if(alreadyExists===true){
- alert('This username already exists');
- }
- //If one of the password inputs are empty
- else if(password === "" || confirm === ""){
- alert('Please ensure the new password has been entered twice');
- }
- //If passwords don't match
- else{
- alert('Passwords do not match');
- }
- }
- </script>
- <head>
- <title>Create Account</title>
- </head>
- <!-- When page loads, start timestamp -->
- <body onload="startTime()">
- <!-- Main HTML of page -->
- <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̲A</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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement