Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- //Contains all the CSS styling for the forms
- <style>
- body {
- background-color: white;
- }
- .menuBar {
- background-color: #fcd8a1;
- overflow: hidden;
- 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;
- }
- .dropdown {
- float: right;
- overflow: hidden;
- position: relative;
- }
- .dropbtn {
- background-color: #fcd8a1;
- border:none;
- float: right;
- color: black;
- text-align: center;
- padding: 16px 16px;
- text-decoration: none;
- font-size: 32;
- font-family: Tahoma;
- margin: 0;
- }
- .dropdown-content {
- display: none;
- position: relative;
- float: right;
- color: black;
- text-align: center;
- text-decoration: none;
- font-size: 32;
- font-family: Tahoma;
- box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
- z-index: 1;
- }
- .dropdown-content a {
- float: none;
- color: black;
- padding: 12px 16px;
- text-decoration: none;
- display: block;
- text-align: left;
- }
- .dropdown:hover .dropdown-content {
- display: block;
- }
- .box {
- height: 100px;
- width: 33%;
- background-color: #FFFFFF;
- border:1px solid black;
- font-family: Tahoma;
- position: absolute;
- left: 33%;
- top: 20%;
- border-radius: 12px;
- font-size: 12pt;
- }
- .fontSizeButton {
- background-color: #fcd8a1;
- border:none;
- color: black;
- text-align: center;
- font-family: Tahoma;
- font-size: 32px;
- padding: 16px;
- }
- .fontSizeButton:hover {
- background-color: #ffcd11;
- }
- .gap {
- height: 20px;
- }
- .button1 {
- position: absolute;
- right: 50px;
- bottom: -30px;
- padding-bottom: 0px;
- height = 20px;
- width = 80px;
- background-color: #fcd8a1;
- border: none;
- color: white;
- padding: 5px 15px;
- text-align: center;
- font-size: 16px;
- cursor: pointer;
- }
- .button2 {
- 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: 10px;
- cursor: pointer;
- background-color: #FFFFFF;
- border:1px solid black;
- border-radius: 12px;
- }
- .button2:hover{
- color: white;
- }
- #signIn label {
- margin-left: 5%;
- display: inline-block;
- width: 100px;
- text-align: right;
- }
- #username, #password {
- width: 58%;
- margin-left: 5px;
- box-sizing: border-box;
- border: none;
- border-bottom: 2px solid #fcd8a1;
- font-family: Tahoma;
- }
- </style>
- <script>
- //Allow the timer to function properly
- function startTime() {
- var today = new Date();
- var h = today.getHours();
- var m = today.getMinutes();
- h = checkTime(h);
- m = checkTime(m);
- document.getElementById('timestamp').innerHTML =
- h + ":" + m ;
- var t = setTimeout(startTime, 500);
- }
- //Ensure the timer updates regularly
- function checkTime(i) {
- if (i < 10) {i = "0" + i}
- return i;
- }
- //User authentication function
- function checkLogin(){
- //Array holding id details
- var id = "{{$id}}";
- //If username and password don't match up in database
- if(id=="1"){
- alert("Username/Password Incorrect - Please Try Again");
- }
- //If user tries to access another page via url without logging in
- else if(id=="2"){
- alert("Please log in before using the system");
- }
- //Initialize timestamp
- startTime();
- }
- //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() {
- //Increase font size
- if (increasetrue == true) {
- document.getElementById("fontSizeButton").innerHTML = "aA̲";
- document.getElementById("loginbox").style.fontSize = "18pt";
- document.getElementById("loginButton").style.fontSize = "16pt";
- document.getElementById("username").style.fontSize = "16pt";
- document.getElementById("password").style.fontSize = "16pt";
- document.getElementById("usernamediv").style.height = "10px";
- document.getElementById("loginButton").style.bottom = "-40px";
- increasetrue = false;
- }
- //Make font normally sized
- else if(increasetrue == false){
- document.getElementById("fontSizeButton").innerHTML = "a̲A";
- document.getElementById("loginbox").style.fontSize = "12pt";
- document.getElementById("loginButton").style.fontSize = "10pt";
- document.getElementById("username").style.fontSize = "12pt";
- document.getElementById("password").style.fontSize = "12pt";
- document.getElementById("usernamediv").style.height = "20px";
- document.getElementById("loginButton").style.bottom = "";
- increasetrue = true;
- }
- }
- </script>
- <head>
- <title>Login</title>
- </head>
- <!-- When page loads, check the user us logged in -->
- <body onload="checkLogin()">
- <!-- HTML for 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 >
- <button id="fontSizeButton" type="submit" class="fontSizeButton" onclick="increaseFontSize()" >a̲A</button>
- </div>
- </div>
- <div id="loginbox" class="box">
- <form id="signIn" action ="" method="POST">
- @csrf
- <div id="usernamediv" class="gap"> </div>
- <label for="username">Username:</label>
- <input type="text" id="username" name="username">
- <div class="gap"> </div>
- <label for="password">Password:</label>
- <input type="password" id="password" name="password">
- <button id="loginButton" type="submit" class="button2">Login</button>
- </form>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement