reemo/sockscape
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

friendships over the socket connections

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
client/img/sock.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 310 KiB

40
client/index.html
View file

@ -5,20 +5,52 @@
<link rel="stylesheet" type="text/css" href="style.css" /> <link rel="stylesheet" type="text/css" href="style.css" />
<meta charset="UTF-8" /> <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/lib.js"></script>
<script type="text/javascript" src="bin/scape.js"></script> <script type="text/javascript" src="bin/scape.js"></script>
<script type="notjs" id="loading-vertex"> <script type="notjs" id="loading-vertex">
</script> </script>
<script type="notjs" id="loading-frag"> <script type="notjs" id="loading-frag">
</script> </script>
</head> </head>
<body> <body>
<canvas id="cs"></canvas> <canvas id="cs"></canvas>
<div id="modal" class="hidden"> <div id="modal" class="hidden">
</div> </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> </body>
</html> </html>

55
client/lib/loginstration.js Normal file
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"
}

200
client/style.css
View file

@ -12,6 +12,9 @@
body { body {
background: #000; background: #000;
overflow: hidden;
background-size: cover;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@ -24,4 +27,199 @@ body {
.hidden { .hidden {
display: none; 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);}
}
/* */