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 (12)
Hide whitespace changes
Inline Side-by-side
Showing
with 994 additions and 0 deletions
css/auth.css 0 → 100644
View file @ 963542de
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/orderojek.css 0 → 100644
View file @ 963542de
.mainHeader {
width: 500px;
height: 50px;
}
.header1 {
float: left;
}
.header2 {
float: right;
font-family: "Trebuchet MS";
}
.title {
font-family: "Hoefler Text";
font-size: 31px;
font-weight: bold;
color: black;
height: 27px;
}
.title.red {
color: #cb0a1d;
}
.title.green {
color : #066422;
}
.subtitle {
color: #4f9500;
font-size: 16px;
}
.username {
padding-top: 10px;
}
.username.bold {
font-weight: bold;
}
.logout {
text-align: right;
text-decoration: underline;
color: blue;
}
.menu {
margin: 10px;
width: 165px;
height: 45px;
display: table-cell;
border: 1px solid black;
text-align: center;
vertical-align: middle;
line-height: 45px;
font-family: "Trebuchet MS";
font-weight: bold;
font-size: 24px;
}
.menu.active {
background: #3a563f;
border: 1px solid #253828;
color: white;
}
.contentBox {
width: 550px;
height: 480px;
margin: 0 auto;
background: white;
}
h1 {
color: #494949;
font-size: 35px;
font-family: "Trebuchet MS";
margin-top: 10px;
margin-bottom: 15px;
}
.stepBox {
color: #414141;
display: inline-block;
border: 1px solid black;
width: 135px;
height: auto;
padding: 3px;
margin-right: 30px;
margin-bottom: 30px;
font-family: "Arial";
font-size: 15px;
}
.stepBox.active {
background: #ffff97;
}
.number {
width: 30px;
height: 30px;
border-radius: 50%;
font-size: 20px;
color: black;
line-height: 30px;
text-align: center;
background: #d1d1d1;
float: left;
margin: 5px;
margin-right: 8px;
}
.step {
margin: 2px;
}
.form {
width: 450px;
display: table;
margin-left: 10px;
}
.formBox {
width: 470px;
}
.labelBox {
float: left;
clear: left;
margin: 10px;
font-family: Arial;
color: #414141;
font-size: 20px;
}
.inputBox {
width: 250px;
height: 25px;
float: right;
clear: right;
margin: 2px;
font-size: 17px;
}
input[type=submit] {
display: table;
margin: 0 auto;
margin-top: 185px;
cursor: pointer;
width: 110px;
height: 50px;
border-radius: 10px;
border: 1px solid black;
background: #82d504;
font-size: 22px;
font-weight: bold;
font-family: Garamond;
}
\ No newline at end of file
css/profile.css 0 → 100644
View file @ 963542de
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 @ 963542de
<!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 @ 963542de
<!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>
history-order.html 0 → 100644
View file @ 963542de
<!DOCTYPE html>
<html>
<head>
<title>History</title>
<link rel="stylesheet" href="css/history.css">
</head>
<body>
<div class="contentBox">
<div class="mainHeader">
<div class="header1">
<div class="title"><span class="title green">PR</span>-<span class=" title red">OJEK</span></div>
<div class="subtitle">wush... wush... ngeeeeeenggg...</div>
</div>
<div class="header2">
<div class="username">Hi, <span class="username bold">pikachu!</span></div>
<div class="logout">Logout</div>
</div>
</div>
<div>
<div class="menu">ORDER</div>
<div class="menu active">HISTORY</div>
<div class="menu">MY PROFILE</div>
</div>
<h1>TRANSACTION HISTORY</h1>
<div>
<div class="submenu active">MY PREVIOUS ORDERS</div>
<div class="submenu">DRIVER HISTORY</div>
</div>
<div class="listBox">
<img src="img/profile-placeholder.png" alt="profile image" class="thumbnail">
<div class="hide-button">HIDE</div>
<div class="date">5 October 2017</div>
<div class="name">Elmo</div>
<div class="route">Magetan-Maospati</div>
<div class="rating">You rated : </div>
<div class="comment">
<div>You commented :
<p>tralalalala senang sekali</p></div>
</div>
</div>
<div class="listBox">
<img src="img/profile-placeholder.png" alt="profile image" class="thumbnail">
<div class="hide-button">HIDE</div>
<div class="date">3 October 2017</div>
<div class="name">Bert</div>
<div class="route">Magetan-Madiun</div>
<div class="rating">You rated :</div>
<div class="comment">You commented :</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
img/profile-placeholder.png 0 → 100644
View file @ 963542de
img/profile-placeholder.png

1.31 KiB

js/profile.js 0 → 100644
View file @ 963542de
document.getElementById("uploadBtn").onchange = function () {
document.getElementById("uploadFile").value = this.value;
};
\ No newline at end of file
js/validation.js 0 → 100644
View file @ 963542de
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 @ 963542de
<!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="login.php" method="POST">
<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>
orderojek.html 0 → 100644
View file @ 963542de
<!DOCTYPE html>
<html>
<head>
<title>Make an order</title>
<link rel="stylesheet" type="text/css" href="order_ojek.css">
</head>
<body>
<div class="contentBox">
<div class="mainHeader">
<div class="header1">
<div class="title"><span class="title green">PR</span>-<span class=" title red">OJEK</span></div>
<div class="subtitle">wush... wush... ngeeeeeenggg...</div>
</div>
<div class="header2">
<div class="username">Hi, <span class="username bold">pikachu!</span></div>
<div class="logout">Logout</div>
</div>
</div>
<div>
<div class="menu active">ORDER</div>
<div class="menu">HISTORY</div>
<div class="menu">MY PROFILE</div>
</div>
<h1>MAKE AN ORDER</h1>
<div class="stepBox active">
<div class="number">1</div>
<div class="step">Select Destination</div>
</div>
<div class="stepBox">
<span class="number">2</span>
<div class="step">Select a Driver</div>
</div>
<div class="stepBox">
<span class="number">3</span>
<div class="step">Complete your order</div>
</div>
<form action="#" method="post" class="form">
<div class="formBox">
<label class="labelBox">Picking Point</label>
<input class="inputBox" type="text" name="selectDestination" id="pickingPoint" required>
</div>
<div class="formBox">
<label class="labelBox">Destination</label>
<input class="inputBox" type="text" name="selectDestination" id="destination" required>
</div>
<div class="formBox">
<label class="labelBox">Preferred Driver</label>
<input class="inputBox" type="text" name="selectDestination" placeholder="(optional)">
</div>
<input type="submit" name="submit" value="NEXT">
</form>
</div>
</body>
</html>
\ No newline at end of file
signup.php 0 → 100644
View file @ 963542de
<!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="register.php" method="POST">
<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 id="checkUsername"><i class="material-icons">check_circle</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 id="checkEmail"><i class="material-icons">check_circle</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 @ 963542de
<?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