friendships over the socket connections
information superhighway
This commit is contained in:
parent
81609f8391
commit
4a9bc104dc
4 changed files with 290 additions and 5 deletions
BIN
client/img/sock.png
Normal file
BIN
client/img/sock.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 310 KiB |
|
|
@ -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 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>
|
||||
55
client/lib/loginstration.js
Normal file
55
client/lib/loginstration.js
Normal 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"
|
||||
|
||||
|
||||
}
|
||||
198
client/style.css
198
client/style.css
|
|
@ -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);}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* */
|
||||
|
|
|
|||
Loading…
Reference in a new issue