friendships over the socket connections

information superhighway
This commit is contained in:
Malloc of Kuzkycyziklistan 2017-09-01 22:21:14 -05:00
parent 81609f8391
commit 4a9bc104dc
4 changed files with 290 additions and 5 deletions

BIN
client/img/sock.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 310 KiB

View file

@ -5,6 +5,10 @@
<link rel="stylesheet" type="text/css" href="style.css" />
<meta charset="UTF-8" />
<!-- LOGIN AND REGISTER SCRIPT -->
<script type="text/javascript" src="lib/loginstration.js"></script>
<!-- END -->
<script type="text/javascript" src="bin/lib.js"></script>
<script type="text/javascript" src="bin/scape.js"></script>
@ -20,5 +24,33 @@
<div id="modal" class="hidden">
</div>
<!-- THUGGINOMICS LOGIN CODE VERY FRAGILE -->
<div id="loginstration-wrap">
<h1 id="loginstration-header" class="loginstration-header">
S O C K &nbsp; S C A P E
</h1>
<div id="loginstration-login">
<input type="text" placeholder="USER" id="login-user-input"></input><br>
<input type="password" placeholder="PASSWORD" id="login-password-input"></input><br>
<button id="login-button-submit">ENTER THE REALM</button>
</div>
<div id="loginstration-registration">
<input type="text" placeholder="ENTER EMAIL" id="register-email-input"></input><br>
<input type="text" placeholder="ENTER USER NAME" id="register-user-input"></input><br>
<input type="password" placeholder="ENTER PASSWORD" id="register-password-input"></input><br>
<button id="register-button-submit">CREATE ACCOUNT</button>
</div>
<button id="loginstration-registration-button">REGISTER</button>
</div>
<!-- AAAAAAAAAAA END -->
</body>
</html>

View file

@ -0,0 +1,55 @@
// JS COULDNT FIND THE ELEMENT WITHOUT window.onload;
// K I L L J A V A S C R I P T
var login_wrap;
var login_header;
var register_button;
var login;
var register;
var create;
window.onload = function () {
// Define var's for transition;
login_header = document.getElementById("loginstration-header");
login_wrap = document.getElementById("loginstration-wrap");
register_button = document.getElementById('loginstration-registration-button');
login = document.getElementById('loginstration-login');
register = document.getElementById('loginstration-registration');
create = document.getElementById("register-button-submit");
register_button.addEventListener("click" , prepareRegister);
create.addEventListener("click" , prepareLogin);
};
function prepareRegister(){
login_header.classList.remove("displayYes");
login_wrap.className = "sockSpinTo";
login.className = "displayNo";
login_header.className += " " + "displayNo";
register_button.className = "displayNo"
login.style.display = "none";
register.style.display = "flex";
register.className = "displayYes";
login_header.classList.remove("displayNo");
login_header.className += " " + "displayYes";
}
function prepareLogin(){
login_wrap.className = "sockSpinBack";
register.classList.remove("displayYes");
register.className = "displayNo";
register.style.display = "none";
login_header.classList.remove("displayNo");
login_header.className += " " + "displayYes";
login.style.display = "flex";
login.classList.remove = "displayNo"
login.className = "displayYes";
login_header.className += " " + "displayYes";
register_button.className = "displayYes"
}

View file

@ -12,6 +12,9 @@
body {
background: #000;
overflow: hidden;
background-size: cover;
margin: 0;
padding: 0;
}
@ -25,3 +28,198 @@ body {
.hidden {
display: none;
}
/* LOGINSTRATION */
#loginstration-wrap {
position: absolute;
width:600px;
height:600px;
left: 0;
right: 0;
top:0;
bottom:0;
margin: auto;
background: url('img/sock.png') center no-repeat;
background-size: contain;
/* FLEX BOX - USED TO CENTER CHILD ELEMENTS DYNAMICALLY*/
display:flex;
justify-content: center;
align-items: center;
flex-direction: column;
/* END B O X */
}
.loginstration-header{
font-family: Scape;
font-size: 45px;
color: yellow;
width: auto;
height: auto;
margin-bottom:50px;
background: rgba(0,0,0,0.9);
}
#loginstration-registration-button {
font-family: Scape;
color: yellow;
width: auto;
height:50px;
font-size: 20px;
background: #000;
padding:10px;
margin-top:100px;
transition: 0.2s;
border: 1px solid white;
cursor:pointer;
}
/* LOGIN */
#loginstration-login{
font-family: Scape;
width:auto;
height:auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transition: 0.1s;
}
#login-user-input{
font-family: Scape;
color: yellow;
width: 300px;
height:25px;
font-size: 20px;
background: #000;
padding:10px;
}
#login-password-input{
font-family: Scape;
color: yellow;
width: 300px;
height:25px;
font-size: 20px;
background: #000;
padding:10px;
border: 1px solid white;
}
#login-button-submit{
font-family: Scape;
color: yellow;
width: 200px;
height:50px;
font-size: 20px;
background: #000;
padding:10px;
transition: 0.2s;
border: 1px solid white;
cursor:pointer;
}
/* LOGIN END */
/* REGISTER */
#loginstration-registration{
font-family: Scape;
width:auto;
height:auto;
justify-content: center;
align-items: center;
flex-direction: column;
display:none;
opacity: 0;
}
#register-email-input{
font-family: Scape;
color: yellow;
width: 300px;
height:25px;
font-size: 20px;
background: #000;
padding:10px;
border: 1px solid white;
}
#register-user-input{
font-family: Scape;
color: yellow;
width: 300px;
height:25px;
font-size: 20px;
background: #000;
padding:10px;
}
#register-password-input{
font-family: Scape;
color: yellow;
width: 300px;
height:25px;
font-size: 20px;
background: #000;
padding:10px;
border: 1px solid white;
}
#register-button-submit{
font-family: Scape;
color: yellow;
width: 200px;
height:50px;
font-size: 20px;
background: #000;
padding:10px;
transition: 0.1s;
border: 1px solid white;
cursor:pointer;
}
/* REGISTER END */
/* ANIMATIONS */
.sockSpinTo{
animation: spinTo 0.3s ease;
}
.sockSpinBack{
animation: spinBack 0.3s ease;
}
.displayNo{
opacity:0;
}
.displayYes{
opacity:1 !important;
}
@keyframes spinTo {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
@keyframes spinBack {
from {transform:rotate(360deg);}
to {transform:rotate(0deg);}
}
/* */