<!doctype html>
<html>
<head>
<style>
.hidden {
display: none;
}
.vsible {
display: block;
}
body {
border: 1px solid;
border-radius: 22px;
width: 92%;
margin: 0 auto;
padding: 10px 20px 10px 20px;
}
.headers {
border-bottom: 1px solid;
text-align: center;
}
.nav {
padding: 10px 20px 10px 20px;
border-bottom: 1px solid;
}
.btn {
background: #97cbed;
background-image: -webkit-linear-gradient(top, #97cbed, #0b5b8a);
background-image: -moz-linear-gradient(top, #97cbed, #0b5b8a);
background-image: -ms-linear-gradient(top, #97cbed, #0b5b8a);
background-image: -o-linear-gradient(top, #97cbed, #0b5b8a);
background-image: linear-gradient(to bottom, #97cbed, #0b5b8a);
-webkit-border-radius: 60;
-moz-border-radius: 60;
font-family: Arial;
color: #ffffff;
font-size: 15px;
border: solid #1f628d 0px;
text-decoration: none;
width: 33.3333333333%;
height: 50px;
}
.btn:hover {
background: #083c5c;
background-image: -webkit-linear-gradient(top, #083c5c, #83bee6);
background-image: -moz-linear-gradient(top, #083c5c, #83bee6);
background-image: -ms-linear-gradient(top, #083c5c, #83bee6);
background-image: -o-linear-gradient(top, #083c5c, #83bee6);
background-image: linear-gradient(to bottom, #083c5c, #83bee6);
text-decoration: none;
}
#LoginDiv {
width: 25%;
margin: 0 auto;
border: 1px solid;
border-radius: 22px;
padding: 10px 20px 10px 20px;
}
#RegisterDiv {
width: 35%;
margin: 0 auto;
border: 1px solid;
border-radius: 22px;
padding: 10px 20px 10px 20px;
}
</style>
</head>
<body>
<div class="headers">
<div id="IndexDivHeader" class="visible">
<h1>Index</h1>
</div>
<div id="LoginDivHeader" class="hidden">
<h1>Login form</h1>
</div>
<div id="RegisterDivHeader" class="hidden">
<h1>Register form</h1>
</div>
</div>
<div class="nav">
<button class="btn" id="IndexBtn">Index</button><button class="btn" id="LoginBtn">Login</button><button class="btn" id="RegisterBtn">Register</button>
</div>
<div class="visible" id="IndexDiv">
<h2>Welcome to this page</h2><p>Mycoolwebsite is a awsome site where you can do bullshit and drugs</p>
</div>
<br>
<div class="hidden" id="LoginDiv">
<div class="visible" id="LoginForm">
<center><h2>Login here</h2></center>
<table>
<tr>
<td>Username: </td>
<td><input type="txt" style="border-radius:10px; border-color:blue; width:300px;height:30px;padding:10px 20px 10px 20px;"></td>
</tr>
<tr>
<td>Password: </td>
<td><input type="password" style="border-radius:10px; border-color:blue; width:300px;height:30px;padding:10px 20px 10px 20px;"></td>
</tr>
<tr><td></td><td><button id="submittedLogin">Login</button></td></tr>
</table>
</div>
<div id="SucLogin" class="hidden">
<center><h1>You succesfully logged in!</h1><button id="ToIndexFromLogin">Go to home</button></center>
</div>
</div>
<div class="hidden" id="RegisterDiv">
<div class="visible" id="RegisterForm">
<left><h2 style="width:142px;border:1px solid;padding:1px 1px 1px 1px;">Register form</h2></left>
<table>
<tr>
<td>Username: </td>
<td><input type="txt" style="border-radius:10px; border-color:blue; width:200px;height:30px;padding:10px 20px 10px 20px;"></td>
<td>Real name: </td>
<td><input type="txt" style="border-radius:10px; border-color:blue; width:200px;height:30px;padding:10px 20px 10px 20px;"></td>
</tr>
<tr>
<td>Password: </td>
<td><input type="Password" style="border-radius:10px; border-color:blue; width:200px;height:30px;padding:10px 20px 10px 20px;"></td>
<td>Phone number: </td>
<td><input type="txt" value="If secret type SECRET" style="border-radius:10px; border-color:blue; width:200px;height:30px;padding:10px 20px 10px 20px;"></td>
</tr>
<tr>
<td>Email: </td>
<td><input type="Email" style="border-radius:10px; border-color:blue; width:200px;height:30px;padding:10px 20px 10px 20px;"></td>
<td>Age: </td>
<td><input type="Number" style="border-radius:10px; border-color:blue; width:200px;height:30px;padding:10px 20px 10px 20px;"></td>
</tr>
<tr><td></td><td><button id="submittedRegister">Register</button></td></tr>
</table>
</div>
<div class="hidden" id="SucRegister">
<center><h1>You succesfully registered!</h1><button id="ToIndexFromRegister">Go to home</button></center>
</div>
</div>
<script>
var IndexDivHeader = document.getElementById('IndexDivHeader')
var LoginDivHeader = document.getElementById('LoginDivHeader')
var RegisterDivHeader = document.getElementById('RegisterDivHeader')
var IndexBtn = document.getElementById('IndexBtn')
var LoginBtn = document.getElementById('LoginBtn')
var RegisterBtn = document.getElementById('RegisterBtn')
var submittedLogin = document.getElementById('submittedLogin')
var ToIndexFromLogin = document.getElementById('ToIndexFromLogin')
var submittedRegister = document.getElementById('submittedRegister')
var ToIndexFromRegister = document.getElementById('ToIndexFromRegister')
var IndexDiv = document.getElementById('IndexDiv')
var LoginDiv = document.getElementById('LoginDiv')
var SucLogin = document.getElementById('SucLogin')
var RegisterDiv = document.getElementById('RegisterDiv')
var SucRegister = document.getElementById('SucRegister')
var LoginForm = document.getElementById('LoginForm')
IndexBtn.onclick = function () {
IndexDivHeader.setAttribute('class', 'visible')
IndexDiv.setAttribute('class', 'visible')
LoginDivHeader.setAttribute('class', 'hidden')
RegisterDivHeader.setAttribute('class', 'hidden')
LoginDiv.setAttribute('class', 'hidden')
SucLogin.setAttribute('class', 'hidden')
RegisterDiv.setAttribute('class', 'hidden')
SucRegister.setAttribute('class', 'hidden')
}
LoginBtn.onclick = function () {
LoginDivHeader.setAttribute('class', 'visible')
LoginDiv.setAttribute('class', 'visible')
LoginForm.setAttribute('class', 'visible')
IndexDivHeader.setAttribute('class', 'hidden')
IndexDiv.setAttribute('class', 'hidden')
RegisterDivHeader.setAttribute('class', 'hidden')
RegisterDiv.setAttribute('class', 'hidden')
SucLogin.setAttribute('class', 'hidden')
SucRegister.setAttribute('class', 'hidden')
}
submittedLogin.onclick = function () {
SucLogin.setAttribute('class', 'visible')
LoginForm.setAttribute('class', 'hidden')
}
ToIndexFromLogin.onclick = function () {
IndexDivHeader.setAttribute('class', 'visible')
IndexDiv.setAttribute('class', 'visible')
LoginDivHeader.setAttribute('class', 'hidden')
RegisterDivHeader.setAttribute('class', 'hidden')
LoginDiv.setAttribute('class', 'hidden')
SucLogin.setAttribute('class', 'hidden')
RegisterDiv.setAttribute('class', 'hidden')
SucRegister.setAttribute('class', 'hidden')
LoginForm.setAttribute('class', 'hidden')
RegisterForm.setAttribute('class', 'hidden')
}
RegisterBtn.onclick = function () {
IndexDivHeader.setAttribute('class', 'hidden')
IndexDiv.setAttribute('class', 'hidden')
LoginDivHeader.setAttribute('class', 'hidden')
LoginDiv.setAttribute('class', 'hidden')
LoginForm.setAttribute('class', 'hidden')
SucLogin.setAttribute('class', 'hidden')
SucRegister.setAttribute('class', 'hidden')
RegisterDivHeader.setAttribute('class', 'visible')
RegisterDiv.setAttribute('class', 'visible')
RegisterForm.setAttribute('class', 'visible')
usernameLogin.value = "";
}
submittedRegister.onclick = function () {
RegisterForm.setAttribute('class', 'hidden')
SucRegister.setAttribute('class', 'visible')
}
ToIndexFromRegister.onclick = function () {
IndexDivHeader.setAttribute('class', 'visible')
IndexDiv.setAttribute('class', 'visible')
LoginDivHeader.setAttribute('class', 'hidden')
RegisterDivHeader.setAttribute('class', 'hidden')
LoginDiv.setAttribute('class', 'hidden')
SucLogin.setAttribute('class', 'hidden')
RegisterDiv.setAttribute('class', 'hidden')
SucRegister.setAttribute('class', 'hidden')
LoginForm.setAttribute('class', 'hidden')
RegisterForm.setAttribute('class', 'hidden')
}
</script>
</body>
</html>