diff --git a/client/img/sock.png b/client/img/sock.png new file mode 100644 index 0000000..54e5e8c Binary files /dev/null and b/client/img/sock.png differ diff --git a/client/index.html b/client/index.html index 05446ea..152f81c 100644 --- a/client/index.html +++ b/client/index.html @@ -5,20 +5,52 @@ + + + + + + + +
+

+ S O C K   S C A P E +

+ +
+
+
+ +
+ +
+
+
+
+ +
+ + + +
+ + + + - \ No newline at end of file + diff --git a/client/lib/loginstration.js b/client/lib/loginstration.js new file mode 100644 index 0000000..5c43ca9 --- /dev/null +++ b/client/lib/loginstration.js @@ -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" + + +} diff --git a/client/style.css b/client/style.css index 3c3211d..a488b5f 100644 --- a/client/style.css +++ b/client/style.css @@ -12,6 +12,9 @@ body { background: #000; + overflow: hidden; + background-size: cover; + margin: 0; padding: 0; } @@ -24,4 +27,199 @@ body { .hidden { display: none; -} \ No newline at end of file +} + + +/* 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);} +} + + + +/* */