From 343391c281b076fa761d71641b9bdd7f3640dd9b Mon Sep 17 00:00:00 2001
From: freedomfeather <fadlurohmanakmal@rocketmail.com>
Date: Thu, 5 Oct 2017 16:08:09 +0700
Subject: [PATCH] Memperbaiki tampilan signup
---
css/default_style.css | 14 ++++----
css/login.css | 74 ++++++++++++++++++++++++++-------------
css/sign_up.css | 69 ++++++++++++++++++++++++++++++++++++
login/login.html | 39 +++++++++++++--------
login/sign_up.html | 81 +++++++++++++++++++++++++++++++------------
login/sign_up.php | 4 +--
6 files changed, 212 insertions(+), 69 deletions(-)
create mode 100644 css/sign_up.css
diff --git a/css/default_style.css b/css/default_style.css
index c1069da1..8c57ea6d 100755
--- a/css/default_style.css
+++ b/css/default_style.css
@@ -1,8 +1,10 @@
.frame {
- width: 600px;
+ height: 550px;
+ width: 360px;
margin: 50px auto;
- border-left: 0.5px solid black;
- border-right: 0.5px solid black;
+ border: 0.5px solid black;
+ padding-left: 20px;
+ padding-right: 20px;
}
.frame h1,h2 {
@@ -33,8 +35,9 @@
}
input {
- width: 75%;
- margin: 1px auto 15px;
+ height: 70%;
+ width: 100%;
+ border: 1px solid black;
}
a:link, a:visited {
@@ -51,4 +54,3 @@ a:hover {
width: 199px;
float: left;
}
->>>>>>> 01a42af14bd276e36413854851437430e627c9b8
diff --git a/css/login.css b/css/login.css
index d477ba12..35b67a9a 100755
--- a/css/login.css
+++ b/css/login.css
@@ -1,42 +1,68 @@
.frame {
height: 450px;
- width: 400px;
border: 10px solid #02702c;
border-radius: 70px;
background-color: #8bbd3c;
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 {
margin-top: 5%;
margin-bottom: 20%;
display: flex;
- font-size: 2em;
+ font-size: 1.7em;
}
.login_header h1 {
- margin-top: 0px;
- margin-bottom: 0px;
+ margin: 0px 8px;
}
.horizontal_line {
- width: 35%;
+ width: 45%;
height: 20px;
border-bottom: 1px solid black;
- margin-left: 5%;
- margin-top: 3%;
- margin-right: 5%;
+ margin-left: 1%;
+ margin-top: 2%;
+ 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;
}
diff --git a/css/sign_up.css b/css/sign_up.css
new file mode 100644
index 00000000..aa1e71fd
--- /dev/null
+++ b/css/sign_up.css
@@ -0,0 +1,69 @@
+.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;
+}
diff --git a/login/login.html b/login/login.html
index dceccb68..62929e6b 100755
--- a/login/login.html
+++ b/login/login.html
@@ -12,20 +12,31 @@
<h1>LOGIN</h1>
<div class="horizontal_line"></div>
</div>
- <div>
- <p id="error_credential" style="text-align: center;"></p>
- <form name="login" method="POST" action="login.php" onsubmit="return validate();">
- Username
- <input type="text" name="user_name"><br/>
-
- Password
- <input type="Password" name="user_password"><br/>
-
- <input type="submit" class="button green login" value="GO!" >
- </form>
-
- <a href="sign_up.html">Don't have an account?</a><br/>
- </div>
+ <p id="error_credential" style="text-align: center;"></p>
+ <form name="login" method="POST" action="login.php" onsubmit="return validate();">
+ <div class="login_container">
+ <div class="form_name">
+ <div class="login_form">
+ Username
+ </div>
+ <div class="login_form">
+ Password
+ </div>
+ </div>
+ <div class="form_field">
+ <div class="login_form">
+ <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>
<script>
function validate()
diff --git a/login/sign_up.html b/login/sign_up.html
index 19569193..acd72427 100755
--- a/login/sign_up.html
+++ b/login/sign_up.html
@@ -3,33 +3,68 @@
<head>
<title>Sign Up</title>
<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>
<body>
<div class="frame">
- <h1>-- Sign up --</h1>
-
- <div>
+ <div class="signup_header">
+ <div class="horizontal_line"></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>
- <form name="sign_up" method="post" action="sign_up.php" onsubmit="return validate_password();">
- Your name*
- <input type="text" name="full_name">
- Username*
- <input type="text" name="username" onkeyup="checkAvailability(this.name,this.value)"><label id="username_verification"></label></br>
- Email*
- <input type="Email" name="user_email"onkeyup="checkAvailability(this.name,this.value)"><label id="email_verification"></label></br>
- Password*
- <input type="Password" name="user_password"><br/>
- Confirm password*
- <input type="Password" name="confirm_password"><br/>
- Phone number*
- <input type="text" name="user_phone"><br/>
- <input type="checkbox" name="is_driver" value="true" style="width: 20px">
- <label for="chkbx_driver">Sign me up as a driver</label>
- <input type="submit" class="button green register" value="REGISTER">
- </form>
- <p><br>* Required field</p>
- </div>
+ <div class="signup_container">
+ <div class="form_name">
+ <div class="signup_form">
+ Your Name
+ </div>
+ <div class="signup_form">
+ Username
+ </div>
+ <div class="signup_form">
+ Email
+ </div>
+ <div class="signup_form">
+ Password
+ </div>
+ <div class="signup_form">
+ Confirm Password
+ </div>
+ <div class="signup_form">
+ 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>
<script>
function validate_password()
diff --git a/login/sign_up.php b/login/sign_up.php
index 4ffcec2c..001d9baf 100644
--- a/login/sign_up.php
+++ b/login/sign_up.php
@@ -60,9 +60,9 @@
$numrows=mysqli_num_rows($query);
}
if ($numrows != 0) {
- echo " X";
+ echo "☓";
} else {
- echo " Ok";
+ echo "✓";
}
mysqli_close($con);
}
--
GitLab