Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
No results found
Show changes
Commits on Source (11)
Hide whitespace changes
Inline Side-by-side
css/auth.css 0 → 100644
View file @ ee075cd5
body {
font-family: 'Roboto', sans-serif;
color: #02702C;
margin-top: 40px;
}
.apps {
width: 380px;
height: 440px;
margin: 0 auto;
background: #8BBD3C;
border: 10px solid #02702C;
border-radius: 60px;
}
.form-heading {
margin: 0 auto;
display: flex;
}
.heading-left {
display: inline-block;
width: 25%;
padding: 45px 15px 45px 25px;
}
.heading-right {
display: inline-block;
width: 25%;
padding: 45px 25px 45px 15px;
}
.heading-title {
width: 40%;
padding: 5px;
text-align: center;
margin: auto;
font-size: 2.3em;
font-weight: 700;
line-height: 30px;
transform: scaleY(1.6);
}
.heading-left hr, .heading-right hr {
display: block;
height: 2px;
border: 0;
border-top: 2px solid #02702C;
margin: 0;
padding: 0 5px;
}
.form-login {
margin-top: 60px;
padding: 0 20px;
font-size: 1.5em;
}
.form-login .form-group {
margin-bottom: 10px;
}
.form-login .form-group label {
width: 30%;
display: inline-block;
}
.form-login .form-group input {
width: 60%;
}
.form-login .form-group input[type=text], .form-login .form-group input[type=password] {
height: 30px;
border: 1px solid black;
margin-left: 15px;
padding-left: 10px;
}
.form-login .action {
margin-top: 45px;
}
.form-login .action .register {
float: left;
}
.form-login .action .register a {
font-size: 0.6em;
color: #453333;
}
.form-login .action .submit {
float: right;
}
.form-login .action .submit input[type=submit] {
padding: 4px 28px;
background: #82D800;
border: 3px solid black;
font-family: 'Roboto', sans-serif;
font-size: 1em;
color: #453333;
border-radius: 10px;
width: 100%;
}
.form-signup {
padding: 0 10px;
font-size: 1em;
}
.form-signup .form-group {
margin-bottom: 3px;
display: flex;
}
.form-signup .form-group label {
width: 40%;
display: inline-block;
}
.form-signup .form-group input {
width: 53%;
}
.form-signup .form-group input[type=text], .form-signup .form-group input[type=password] {
height: 23px;
border: 1px solid black;
padding-left: 10px;
}
.form-signup .form-group input#username, .form-signup .form-group input#email {
width: 47%;
}
.form-signup .form-group span {
display: none;
}
.form-signup input[type=checkbox] {
margin-top: 15px;
}
.form-signup .action {
margin-top: 30px;
}
.form-signup .action .login {
float: left;
}
.form-signup .action .login a {
font-size: 0.8em;
color: #453333;
}
.form-signup .action .submit {
float: right;
margin-right: 10px;
}
.form-signup .action .submit input[type=submit] {
padding: 10px 5px;
background: #82D800;
border: 3px solid black;
font-family: 'Roboto', sans-serif;
font-size: 1em;
color: #453333;
border-radius: 10px;
width: 100%;
}
\ No newline at end of file
css/profile.css 0 → 100644
View file @ ee075cd5
body {
font-family: 'Roboto', sans-serif;
margin-top: 40px;
}
.apps {
width: 500px;
height: 480px;
margin: 0 auto;
background: white;
border: 10px solid #02702C;
border-radius: 60px;
}
.heading {
padding: 20px 20px 0 20px;
}
.edit-img {
padding: 0 20px 20px 20px;
display: flex;
}
.profile-img {
width: 40%;
width: 150px;
display: inline-block;
}
.update-img {
display: inline-block;
padding: 30px;
}
.thumbnail {
border: 1px solid black;
max-width: 100%;
height: auto;
}
.edit-data {
padding: 0 20px;
font-size: 1.3em;
}
.edit-data .form-group {
margin-bottom: 3px;
}
.edit-data .form-group label {
width: 40%;
display: inline-block;
}
.edit-data .form-group .switch {
width: 12%;
float: right;
margin-right: 20px;
}
.edit-data .form-group input {
width: 53%;
}
.edit-data .form-group input[type=text], .edit-data .form-group input[type=password] {
height: 30px;
border: 1px solid gray;
padding-left: 10px;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 28px;
}
/* Hide default HTML checkbox */
.switch input {
display:none;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #117D11;
}
input:focus + .slider {
box-shadow: 0 0 1px #117D11;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.submit {
margin-top: 30px;
}
.submit input {
border: 1px solid black;
border-radius: 5px;
padding: 5px 15px;
}
.submit .cancel {
background: red;
float: left;
}
.submit .save {
background: green;
float: right;
margin-right: 15px;
}
.uploadFile {
float: left;
}
.fileUpload {
position: relative;
overflow: hidden;
margin: 0 10px;
float: right;
}
.fileUpload input.upload {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
font-size: 20px;
cursor: pointer;
opacity: 0;
filter: alpha(opacity=0);
}
.fileUpload span {
font-size: 0.5em;
background: #D7D7D7;
padding: 5px;
border: 1px solid gray;
border-bottom: 1px solid gray;
}
table.data-location {
margin: 20px;
border-collapse: collapse;
width: 92%;
}
th:nth-of-type(1) {
width: 10%;
}
th:nth-of-type(2) {
width: 70%;
}
th, td {
height: 25px;
}
td:nth-of-type(2n-1) {
padding-left: 10px;
}
.add-location {
margin: 20px;
}
.add-location input[type=text] {
width: 75%;
height: 24px;
}
.add-location input[type=submit] {
background: #82D800;
padding: 5px 20px;
border: 1px solid black;
font-family: 'Roboto', sans-serif;
font-size: 1em;
color: #453333;
border-radius: 10px;
margin-left: 20px;
}
.back {
margin: 40px 0 0 20px;
}
.back a {
padding: 5px 20px;
background: red;
font-size: 1em;
color: #453333;
border-radius: 10px;
border: 1px solid black;
font-family: 'Roboto', sans-serif;
text-decoration: none;
}
.data-location td input {
font-size: 1em;
border: 0;
width: 100%;
padding: 5px 10px;
margin: 0px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
background: inherit;
}
.data-location .edit {
color: orange;
float: left;
cursor: pointer;
margin-left: 3px;
margin-top: 2px;
}
.data-location .delete {
color: red;
font-weight: bold;
float: right;
margin-right: 10px;
cursor: pointer;
margin-top: 2px;
}
\ No newline at end of file
editpreferredlocations.php 0 → 100644
View file @ ee075cd5
<!DOCTYPE html>
<html>
<head>
<title>Edit Profile</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/profile.css">
</head>
<body>
<div class="apps">
<div class="heading">
<h2>EDIT PREFERRED LOCATIONS</h2>
</div>
<table border="1" class="data-location">
<thead>
<tr>
<th>No</th>
<th>Location</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><input type="text" value="Pewter City" disabled></td>
<td><span class="edit"><i class="material-icons">mode_edit</i></span><span class="delete"><i class="material-icons">clear</i></span></td>
</tr>
<tr>
<td>2</td>
<td><input type="text" value="Saffron City" disabled></td>
<td><span class="edit"><i class="material-icons">mode_edit</i></span><span class="delete"><i class="material-icons">clear</i></span></td>
</tr>
<tr>
<td>3</td>
<td><input type="text" value="SkyPillar City" disabled></td>
<td><span class="edit"><i class="material-icons">mode_edit</i></span><span class="delete"><i class="material-icons">clear</i></span></td>
</tr>
</tbody>
</table>
<div class="add-location">
<h3>ADD NEW LOCATION</h3>
<form action="">
<input type="text" name="place" required>
<input type="submit" value="ADD">
</form>
</div>
<div class="back">
<a href="#">BACK</a>
</div>
</div>
<script src="js/profile.js"></script>
</body>
</html>
editprofile.php 0 → 100644
View file @ ee075cd5
<!DOCTYPE html>
<html>
<head>
<title>Edit Profile</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<link rel="stylesheet" href="css/profile.css">
</head>
<body>
<div class="apps">
<div class="heading">
<h3>EDIT PROFILE INFORMATION</h3>
</div>
<div class="edit-img">
<div class="profile-img">
<img src="img/profile-placeholder.png" alt="profile image" class="thumbnail">
</div>
<div class="update-img">
<h4>Update profile picture</h4>
<input id="uploadFile" type="text" disabled="disabled">
<div class="fileUpload">
<span>Browse...</span>
<input id="uploadBtn" type="file" class="upload">
</div>
</div>
</div>
<div class="edit-data">
<div class="form-group">
<label for="name">Your Name</label>
<input id="name" type="text" name="name" placeholder="your name" required>
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input id="phone" type="text" name="phone" placeholder="your phone" required>
</div>
<div class="form-group">
<label for="driver">Status Driver</label>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
<div class="submit">
<input type="submit" class="cancel" value="BACK">
<input type="submit" class="save" value="SAVE">
</div>
</div>
</div>
<script src="js/profile.js"></script>
</body>
</html>
img/profile-placeholder.png 0 → 100644
View file @ ee075cd5
img/profile-placeholder.png

1.31 KiB

js/profile.js 0 → 100644
View file @ ee075cd5
document.getElementById("uploadBtn").onchange = function () {
document.getElementById("uploadFile").value = this.value;
};
\ No newline at end of file
js/validation.js 0 → 100644
View file @ ee075cd5
function getUsernameValidation(){
var xmlhttp = new XMLHttpRequest();
if(!xmlhttp){
return;
}
var username = document.getElementById("username");
console.log(username);
var url = "validation.php?u=" + username.value;
console.log(url);
xmlhttp.open("GET", url, true);
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
var response = xmlhttp.responseText;
console.log(response);
if(response === "true"){
document.getElementById("checkUsername").style.display = "block";
}
else {
document.getElementById("checkUsername").style.display = "none";
}
}
}
xmlhttp.send();
}
function getEmailValidation(){
var xmlhttp = new XMLHttpRequest();
if(!xmlhttp){
return;
}
var email = document.getElementById("email");
console.log(email);
var url = "validation.php?e=" + email.value;
console.log(url);
xmlhttp.open("GET", url, true);
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
var response = xmlhttp.responseText;
console.log(response);
if(response === "true"){
document.getElementById("checkEmail").style.display = "block";
}
else {
document.getElementById("checkEmail").style.display = "none";
}
}
}
xmlhttp.send();
}
\ No newline at end of file
login.php 0 → 100644
View file @ ee075cd5
<!DOCTYPE html>
<html>
<head>
<title>Halaman Login</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<link rel="stylesheet" href="css/auth.css">
</head>
<body>
<div class="apps">
<div class="form-heading">
<div class="heading-left">
<hr>
</div>
<div class="heading-title">
LOGIN
</div>
<div class="heading-right">
<hr>
</div>
</div>
<div class="form-login">
<form action="auth.php" method="POST" autocomplete="off">
<div class="form-group">
<label for="username">Username </label>
<input id="username" type="text" name="username" placeholder="your username" required>
</div>
<div class="form-group">
<label for="password">Password </label>
<input id="password" type="password" name="password" placeholder="your password" pattern=".{5,10}" title="5 to 10 characters" required>
</div>
<div class="action">
<div class="register">
<a href="#">Don't have an account ?</a>
</div>
<div class="submit">
<input type="submit" value="GO!">
</div>
</div>
</form>
</div>
</div>
</body>
</html>
signup.php 0 → 100644
View file @ ee075cd5
<!DOCTYPE html>
<html>
<head>
<title>Halaman Signup</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/auth.css">
</head>
<body>
<div class="apps">
<div class="form-heading">
<div class="heading-left">
<hr>
</div>
<div class="heading-title">
SIGNUP
</div>
<div class="heading-right">
<hr>
</div>
</div>
<div class="form-signup">
<form action="createuser.php" method="POST" autocomplete="off">
<div class="form-group">
<label for="name">Your Name</label>
<input id="name" type="text" name="name" placeholder="your name" required>
</div>
<div class="form-group">
<label for="username">Username</label>
<input id="username" type="text" name="username" placeholder="your username" onfocusout="getUsernameValidation()" required> <span><i class="material-icons" id="checkUsername">check</i><i class="material-icons" id="wrongUsername">info</i></span>
</div>
<div class="form-group">
<label for="email">Email</label>
<input id="email" type="text" name="email" placeholder="your email" onfocusout="getEmailValidation()" required><span><i class="material-icons" id="checkEmail">check</i><i class="material-icons" id="wrongEmail">info</i></span>
</div>
<div class="form-group">
<label for="password">Password</label>
<input id="password" type="password" name="password" placeholder="your password" pattern=".{5,10}" title="5 to 10 characters" required>
</div>
<div class="form-group">
<label for="password_conf">Password Confirm</label>
<input id="password_conf" type="password" name="password_conf" placeholder="your password again" pattern=".{5,10}" title="5 to 10 characters" required>
</div>
<div class="form-group">
<label for="phone">Phone Number</label>
<input id="phone" type="text" name="phone" placeholder="your phone" required>
</div>
<input type="checkbox" name="driver" value="True"> Also sign me up as a driver!
<div class="action">
<div class="login">
<a href="#">Already have an account ?</a>
</div>
<div class="submit">
<input type="submit" value="REGISTER">
</div>
</div>
</form>
</div>
</div>
<script src="js/validation.js"></script>
</body>
</html>
validation.php 0 → 100644
View file @ ee075cd5
<?php
if (!empty($_REQUEST['u'])){
$usernames = array("adyanf", "adyanaufalF", "adyanaufalfikri");
$toCheck = $_REQUEST['u'];
if (in_array($toCheck, $usernames)){
echo "false";
}
else {
echo "true";
}
}
if (!empty($_REQUEST['e'])){
$emails = array("adyanaufalf@gmail.com", "adyanaufalfikri@gmail.com", "13515130@std.stei.itb.ac.id");
$toCheck = $_REQUEST['e'];
if (in_array($toCheck, $emails)){
echo "false";
}
else {
echo "true";
}
}
?>
\ No newline at end of file