Skip to content
Snippets Groups Projects
Commit 343391c2 authored by Akmal Fadlurohman's avatar Akmal Fadlurohman
Browse files

Memperbaiki tampilan signup

parent 12b396cd
1 merge request!45OneHundred - 13515005 - Husnulzaki Wibisono Haryadi
.frame { .frame {
width: 600px; height: 550px;
width: 360px;
margin: 50px auto; margin: 50px auto;
border-left: 0.5px solid black; border: 0.5px solid black;
border-right: 0.5px solid black; padding-left: 20px;
padding-right: 20px;
} }
.frame h1,h2 { .frame h1,h2 {
...@@ -33,8 +35,9 @@ ...@@ -33,8 +35,9 @@
} }
input { input {
width: 75%; height: 70%;
margin: 1px auto 15px; width: 100%;
border: 1px solid black;
} }
a:link, a:visited { a:link, a:visited {
...@@ -51,4 +54,3 @@ a:hover { ...@@ -51,4 +54,3 @@ a:hover {
width: 199px; width: 199px;
float: left; float: left;
} }
>>>>>>> 01a42af14bd276e36413854851437430e627c9b8
.frame { .frame {
height: 450px; height: 450px;
width: 400px;
border: 10px solid #02702c; border: 10px solid #02702c;
border-radius: 70px; border-radius: 70px;
background-color: #8bbd3c; background-color: #8bbd3c;
color: #02702c; color: #02702c;
} }
.frame > div {
left: 10%;
width: 80%;
height: auto;
position: relative;
}
.login {
width: 55px;
height: 30px;
float: right;
}
.register {
width: 80px;
height: 30px;
float: right;
}
.login_header { .login_header {
margin-top: 5%; margin-top: 5%;
margin-bottom: 20%; margin-bottom: 20%;
display: flex; display: flex;
font-size: 2em; font-size: 1.7em;
} }
.login_header h1 { .login_header h1 {
margin-top: 0px; margin: 0px 8px;
margin-bottom: 0px;
} }
.horizontal_line { .horizontal_line {
width: 35%; width: 45%;
height: 20px; height: 20px;
border-bottom: 1px solid black; border-bottom: 1px solid black;
margin-left: 5%; margin-left: 1%;
margin-top: 3%; margin-top: 2%;
margin-right: 5%; margin-right: 1%;
}
.login {
width: 80px;
height: 40px;
margin-left: 25%;
margin-right: 0px;
font-size: 1.1em;
}
.login_container {
display: inline;
position: relative;
margin-left: auto;
width: 80%;
font-size: 1.3em;
}
.form_name {
display: inline-block;
position: relative;
height: 60px;
width: 80px;
margin-right: 15px;
}
.form_field {
display: inline-block;
position: absolute;
height: 60px;
width: 250px;
}
.form_button {
display:flex;
width: 375px;
margin-top: 15%;
}
.no_account {
float: left;
margin-top: 2%;
}
.login_form {
height: 30px;
}
.register {
width: 80px;
height: 30px;
float: right;
} }
.frame {
height: 450px;
border: 10px solid #02702c;
border-radius: 70px;
background-color: #8bbd3c;
color: #02702c;
}
.signup_header {
margin-top: 5%;
margin-bottom: 5%;
display: flex;
font-size: 1.7em;
}
.signup_header h1 {
margin: 0px 8px;
}
.horizontal_line {
width: 45%;
height: 20px;
border-bottom: 1px solid black;
margin-left: 1%;
margin-top: 2%;
margin-right: 1%;
}
.signup {
width: 100px;
height: 40px;
margin-left: 25%;
margin-right: 0px;
font-size: 1.1em;
}
.signup_container {
display: inline-block;
position: relative;
margin-left: auto;
width: 80%;
font-size: 1em;
}
.form_name {
display: inline-block;
position: relative;
height: 60px;
width: 120px;
margin-right: 15px;
}
.form_field {
display: inline-block;
position: absolute;
height: 60px;
width: 200px;
}
.form_button {
display:flex;
width: 375px;
margin-top: 15%;
}
.have_account {
float: left;
margin-top: 4%;
}
.signup_form {
display: flex;
height: 30px;
}
.driver_form {
display: flex;
margin-top: 7%;
width: 350px;
}
...@@ -12,20 +12,31 @@ ...@@ -12,20 +12,31 @@
<h1>LOGIN</h1> <h1>LOGIN</h1>
<div class="horizontal_line"></div> <div class="horizontal_line"></div>
</div> </div>
<div> <p id="error_credential" style="text-align: center;"></p>
<p id="error_credential" style="text-align: center;"></p> <form name="login" method="POST" action="login.php" onsubmit="return validate();">
<form name="login" method="POST" action="login.php" onsubmit="return validate();"> <div class="login_container">
Username <div class="form_name">
<input type="text" name="user_name"><br/> <div class="login_form">
Username
Password </div>
<input type="Password" name="user_password"><br/> <div class="login_form">
Password
<input type="submit" class="button green login" value="GO!" > </div>
</form> </div>
<div class="form_field">
<a href="sign_up.html">Don't have an account?</a><br/> <div class="login_form">
</div> <input type="text" name="user_name"><br/>
</div>
<div class="login_form">
<input type="Password" name="user_password"><br/>
</div>
</div>
<div class="form_button">
<a class="no_account" href="sign_up.html">Don't have an account?</a>
<input type="submit" class="button green login" value="GO!">
</div>
</div>
</form>
</div> </div>
<script> <script>
function validate() function validate()
......
...@@ -3,33 +3,68 @@ ...@@ -3,33 +3,68 @@
<head> <head>
<title>Sign Up</title> <title>Sign Up</title>
<link rel="stylesheet" type="text/css" href="../css/default_style.css"> <link rel="stylesheet" type="text/css" href="../css/default_style.css">
<link rel="stylesheet" type="text/css" href="../css/login.css"> <link rel="stylesheet" type="text/css" href="../css/sign_up.css">
</head> </head>
<body> <body>
<div class="frame"> <div class="frame">
<h1>-- Sign up --</h1> <div class="signup_header">
<div class="horizontal_line"></div>
<div> <h1>SIGNUP</h1>
<div class="horizontal_line"></div>
</div>
<form name="sign_up" method="post" action="sign_up.php" onsubmit="return validate_password();">
<p id="error_signup" style="text-align: center;"></p> <p id="error_signup" style="text-align: center;"></p>
<form name="sign_up" method="post" action="sign_up.php" onsubmit="return validate_password();"> <div class="signup_container">
Your name* <div class="form_name">
<input type="text" name="full_name"> <div class="signup_form">
Username* Your Name
<input type="text" name="username" onkeyup="checkAvailability(this.name,this.value)"><label id="username_verification"></label></br> </div>
Email* <div class="signup_form">
<input type="Email" name="user_email"onkeyup="checkAvailability(this.name,this.value)"><label id="email_verification"></label></br> Username
Password* </div>
<input type="Password" name="user_password"><br/> <div class="signup_form">
Confirm password* Email
<input type="Password" name="confirm_password"><br/> </div>
Phone number* <div class="signup_form">
<input type="text" name="user_phone"><br/> Password
<input type="checkbox" name="is_driver" value="true" style="width: 20px"> </div>
<label for="chkbx_driver">Sign me up as a driver</label> <div class="signup_form">
<input type="submit" class="button green register" value="REGISTER"> Confirm Password
</form> </div>
<p><br>* Required field</p> <div class="signup_form">
</div> Phone Number
</div>
</div>
<div class="form_field">
<div class="signup_form">
<input type="text" name="full_name">
</div>
<div class="signup_form">
<input type="text" name="username" onkeyup="checkAvailability(this.name,this.value)"><div id="username_verification" style="margin-left: 15px;"></div>
</div>
<div class="signup_form">
<input type="Email" name="user_email"onkeyup="checkAvailability(this.name,this.value)"><div id="email_verification" style="margin-left: 15px;"></div>
</div>
<div class="signup_form">
<input type="Password" name="user_password">
</div>
<div class="signup_form">
<input type="Password" name="confirm_password">
</div>
<div class="signup_form">
<input type="text" name="user_phone">
</div>
</div>
<div class="driver_form">
<input type="checkbox" name="is_driver" value="true" style="width: 30px">
<label for="is_driver">Also sign me up as a driver!</label>
</div>
<div class="form_button">
<a class="have_account" href="login.html">Already have an account?</a>
<input type="submit" class="button green signup" value="REGISTER">
</div>
</div>
</form>
</div> </div>
<script> <script>
function validate_password() function validate_password()
......
...@@ -60,9 +60,9 @@ ...@@ -60,9 +60,9 @@
$numrows=mysqli_num_rows($query); $numrows=mysqli_num_rows($query);
} }
if ($numrows != 0) { if ($numrows != 0) {
echo " X"; echo "";
} else { } else {
echo " Ok"; echo "";
} }
mysqli_close($con); mysqli_close($con);
} }
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment