Skip to content

Instantly share code, notes, and snippets.

@Alphajeez96

Alphajeez96/sign-up.html

Created September 25, 2020 16:07
Show Gist options
  • Save Alphajeez96/132e75548057bdfd67e36a0261ce9f92 to your computer and use it in GitHub Desktop.
Save Alphajeez96/132e75548057bdfd67e36a0261ce9f92 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
sign-up.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Bottstrap cdn here -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Montserrat:wght@600&display=swap" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
</head>
<!-- styles here -->
<style>
nav {
width: 100%;
background: white;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
}
.form__title {
color: black;
}
/* Loader styles here */
.wrapper {
position: relative;
height: 100%;
width: 100%;
}
p {
line-height: 1.33em;
color: #7e7e7e;
font-family: 'Lemon', cursive;
}
h1 {
color: #eee;
}
#content {
margin: 0 auto;
padding-bottom: 50px;
}
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000;
}
#loader {
display: block;
position: relative;
left: 50%;
top: 50%;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border-radius: 50%;
z-index: 1001;
animation: spin 2s linear infinite;
}
#loader:before {
content: "";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border-radius: 50%;
animation: spin 3s linear infinite;
}
#loader:after {
content: "";
position: absolute;
top: 15px;
right: 15px;
left: 15px;
bottom: 15px;
border-radius: 50%;
}
#loader-wrapper .loader-section {
position: fixed;
top: 0;
width: 51%;
height: 100%;
background-color: lightgray;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-blend-mode: multiply;
z-index: 1000;
transform: translateX(0);
}
#loader-wrapper .loader-section.section-left {
left: 0;
}
#loader-wrapper .loader-section.section-right {
right: 0;
}
#loader {
display: block;
width: 100px;
height: 100px;
margin: 50 auto;
}
.circ-one {
position: relative;
display: block;
width: 50px;
height: 50px;
background: rgba(217, 91, 67, 1);
border-radius: 100%;
float: left;
animation: load-x 1s cubic-bezier(0.445, 0.1, 0.55, 0.9) infinite;
}
.circ-two {
position: relative;
display: block;
width: 50px;
height: 50px;
background: rgba(84, 36, 55, 1);
border-radius: 100%;
float: right;
animation: load-y 1s cubic-bezier(0.445, 0.1, 0.55, 0.9) infinite;
}
@keyframes load-x {
0% {
left: -10px;
transform: scale(1);
}
25% {
transform: scale(1.5);
z-index: 2;
}
50% {
left: 60px;
transform: scale(1);
}
75% {
transform: scale(0.5);
z-index: 1;
}
100% {
left: -10px;
transform: scale(1);
}
}
@keyframes load-y {
0% {
right: -10px;
transform: scale(1);
}
25% {
transform: scale(0.5);
}
50% {
right: 60px;
transform: scale(1);
z-index: 1;
}
75% {
transform: scale(1.5);
z-index: 2;
}
100% {
right: -10px;
transform: scale(1);
}
}
#loader p {
text-align: center;
font-family: 'Hanna', serif;
font-weight: 50;
color: rgba(192, 41, 66, 1);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
50% {
opacity: 0.5;
}
}
.loaded #loader-wrapper .loader-section.section-left {
transform: translateY(-100%);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.loaded #loader-wrapper .loader-section.section-right {
transform: translateY(100%);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.loaded #loader {
opacity: 0;
transition: all 0.3s ease-out;
}
.loaded #loader-wrapper {
visibility: hidden;
transform: translateX(-100%);
transition: all 0.3s 1s ease-out;
}
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
* {
box-sizing: border-box;
}
.preload * {
transition: none !important;
}
/* Form styles here */
.contain {
display: grid;
place-items: center;
height: 100vh;
}
.box {
position: relative;
display: flex;
align-items: center;
width: 90%;
max-width: 600px;
padding: 220px 20px 20px;
overflow: hidden;
background-color: white;
border-radius: 5px;
box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.3);
}
@media (min-width: 768px) {
.box {
min-height: 400px;
padding: 0;
}
.box__toggle:checked+.box__image {
left: 300px;
}
}
@media (max-width: 767px) {
.box__toggle:checked~.form--register {
width: 100%;
height: auto;
opacity: 1;
}
.box__toggle:checked~.form--login {
width: 0;
height: 0;
opacity: 0;
}
}
.box__image {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 200px;
object-fit: cover;
object-position: 0 bottom;
transition: 0.4s ease-in-out;
}
@media (min-width: 768px) {
.box__image {
width: 300px;
height: 100%;
object-position: 0 0;
}
}
.form {
width: 100%;
overflow: hidden;
text-align: left;
transition: 0.3s;
}
@media (min-width: 768px) {
.form {
width: 300px;
padding: 0 20px;
}
}
.form__title {
margin-bottom: 20px;
font-family: 'Montserrat', sans-serif;
font-size: 1.8rem;
font-weight: 700;
}
.form--login {
opacity: 1;
transition: opacity 0.5s ease;
}
.form--register {
width: 0;
height: 0;
opacity: 0;
transition: opacity 0.5s ease;
}
@media (min-width: 768px) {
.form--register {
width: 300px;
height: auto;
opacity: 1;
}
}
.form__helper {
position: relative;
margin-bottom: 15px;
}
.form__helper:last-of-type {
margin-bottom: 0;
}
.form__label {
position: absolute;
bottom: 10px;
left: 0;
color: black;
font-family: 'Lato', sans-serif;
font-size: 1.4rem;
transition: 0.3s;
}
.form__input {
position: relative;
width: 100%;
padding: 5px 0;
color: black;
background-color: transparent;
border-width: 0;
border-bottom: 1px solid black;
outline: none;
font-family: 'Lato', sans-serif;
font-size: 1.4rem;
}
.form__input::placeholder {
opacity: 0;
}
.form__input:not(:placeholder-shown)+.form__label {
bottom: 25px;
color: #2e8e79;
font-size: 1.2rem;
}
.form__input:focus {
border-bottom-color: #2e8e79;
}
.form__input:focus+.form__label {
bottom: 25px;
color: #2e8e79;
font-size: 1.2rem;
}
.form__button {
display: block;
width: 100%;
margin-top: 20px;
padding: 10px;
color: white;
background-color: #2e8e79;
border: 0;
cursor: pointer;
font-family: 'Lato', sans-serif;
font-size: 1.2rem;
font-weight: 300;
letter-spacing: 1px;
text-transform: uppercase;
}
.form__text {
margin-top: 10px;
font-family: 'Lato', sans-serif;
font-size: 1.4rem;
}
.form__link {
color: #2e8e79;
cursor: pointer;
}
/* Parsley css here */
input.parsley-success,
select.parsley-success,
textarea.parsley-success {
color: #468847;
background-color: #DFF0D8;
border: 1px solid #D6E9C6;
}
input.parsley-error,
select.parsley-error,
textarea.parsley-error {
color: #B94A48;
background-color: #F2DEDE;
border: 1px solid #EED3D7;
}
.parsley-errors-list {
margin: 2px 0 3px;
padding: 0;
list-style-type: none;
font-size: 0.9em;
line-height: 0.9em;
opacity: 0;
color: #B94A48;
transition: all .3s ease-in;
-o-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
}
.parsley-errors-list.filled {
opacity: 1;
}
body {
background-color: #DDA02C !important;
}
.t {
color: white;
font-weight: 300 !important;
cursor: pointer;
}
</style>
<body>
<header>
<!-- Navbar here -->
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand " href="index.html">LOGO</a>
</div>
<!--/.nav-collapse -->
</div>
</nav>
</header>
<main>
<div class="wrapper">
<div id="loader-wrapper">
<div id="loader">
<p>LOADING</p>
<div class="circ-one"></div>
<div class="circ-two"></div>
</div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
<!-- Forms here -->
<div id="content">
<div class="wrapper preload">
<div class="contain">
<div class="box">
<input type="checkbox" id="toggle" class="box__toggle" hidden>
<!-- signin form here -->
<img src="https://www.dropbox.com/s/u1hx11933jjk7j5/unsplash-bike.jpeg?raw=1" alt="Picture by Autumn Studio" class="box__image">
<form class="form form--login" method="POST" action="">
<h1 class="form__title">Register As:</h1>
<div class="form__helper">
<!-- <input type="text" name="user" id="user" placeholder="User" class="form__input" />
<label class="form__label" for="user">User</label> -->
<div class="row">
<div class="col-xs-6"> <button type="button" class="form__button" onclick="loginTutor()">Tutor</button></div>
<div class="col-xs-6"> <button type="button" class="form__button" onclick="loginCustomer()">Customer</button></div>
</div>
</div>
<div class="form__helper">
<!-- <input type="password" name="password" id="password" placeholder="Password" class="form__input" />
<label class="form__label" for="password">Password</label> -->
</div>
<!-- <button type="submit" class="form__button">Login</button> -->
<p class="form__text">Don't have an account? <label for="toggle" class="form__link">Sign up!</label>
</form>
<!-- Signup Form Here -->
<form id="signup_form" class="form form--register" method="POST" action="" data-parsley-validate="">
<h1 class="form__title">Sign up</h1>
<div class="form__helper">
<input type="email" name="email" id="email" placeholder="Email" class="form__input" required/>
<label class="form__label" for="email">Email</label>
</div>
<div class="form__helper">
<input type="password" name="password" id="new-user-password" placeholder="Password" class="form__input" required/>
<label class="form__label" for="new-user-password">Password</label>
</div>
<div class="checkbox form__helper">
<label class="" for="terms">
<input type="checkbox" name="terms" id="terms" required> I have read and accepted the <span><a href="#">terms</a></span>
</label>
</div>
<div class="row">
<div class="col-xs-6">
<p class=" form__button"> <label for="toggle" class="form_link t"> Register </label> </p>
</div>
<div class="col-xs-6"> <button type="submit" class="form__button" onclick="login()">Login</button></div>
</div>
</form>
</div>
</div>
</div>
</div>
</main>
<script>
// Screen preloader script here
$(document).ready(function() {
setTimeout(function() {
$('.wrapper').addClass('loaded');
}, 999);
});
const load = () => {
$(window).load(function() {
$('.wrapper').removeClass('preload');
});
}
// Form validation here
$(function() {
$('#demo-form').parsley().on('field:validated', function() {
var ok = $('.parsley-error').length === 0;
$('.bs-callout-info').toggleClass('hidden', !ok);
$('.bs-callout-warning').toggleClass('hidden', ok);
})
.on('form:submit', function() {
return false;
});
});
// Login function
const login = () => {
document.getElementById("signup_form").reset();
console.log('i cleared it')
}
// Register function here
$(document).ready(function() {
$("#register_button").click(function() {
$("#signup_form").submit();
});
});
//Signup calls endpoints here
jQuery(document).ready(
function($) {
$(".form__button").click(function(event) {
var data = {}
data["sex"] = $("#sex").val();
data["skype"] = $("#register_username").val();
data["username"] = $("#register_email").val();
data["email"] = $("#register_skype").val();
data["password"] = $("#register_password").val();
// $(".form__button").prop("disabled", true);
$.ajax({
type: "POST",
contentType: "application/json",
url: "/save",
data: JSON.stringify(data),
dataType: 'json',
timeout: 600000,
success: function(data) {
// console.log("DONE");
},
error: function(e) {
// console.log("ERROR: ", e);
display(e);
}
});
});
});
const loginTutor = () => {
swal("Success!", "You Have Registered as a Tutor!", "success");
}
const loginCustomer = () => {
swal("Success!", "You Have Registered as a Customer!", "success");
};
</script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.2/parsley.js" integrity="sha512-Fq/wHuMI7AraoOK+juE5oYILKvSPe6GC5ZWZnvpOO/ZPdtyA29n+a5kVLP4XaLyDy9D1IBPYzdFycO33Ijd0Pg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.2/parsley.min.js" integrity="sha512-eyHL1atYNycXNXZMDndxrDhNAegH2BDWt1TmkXJPoGf1WLlNYt08CSjkqF5lnCRmdm3IrkHid8s2jOUY4NIZVQ==" crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment