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
Showing
with 1387 additions and 0 deletions
<%--
Created by IntelliJ IDEA.
User: ireneedriadr
Date: 11/3/17
Time: 3:45 PM
To change this template use File | Settings | File Templates.
--%>
<%@ include file="/component/header.html"%>
<%@ include file="/component/nav.html"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<div class="container">
<div class="wrapper row">
<div>
<div class="page-title row txt-center height-fit float-container">
<div class="float-left">
<h1 class="inline-block">TRANSACTION HISTORY</h1>
</div>
</div>
<div class="row inline-flex history-menu">
<a href="/history">
<div class="active">
My Previous Order
</div>
</a>
<a href="/driver_history">
<div>
Driver History
</div>
</a>
</div>
<div class="row txt-center">
<div class="history-list-group">
<form action="hide_history" method="post">
<c:forEach var="item" items="${orderBeans}">
<div class="history-list-item">
<c:choose>
<c:when test="${item.getImage() != null}">
<img src='${item.getImage()}' class='driver-profile' alt='profile-image'>
</c:when>
<c:otherwise>
<img src='img/default-profile.png' class='driver-profile' alt='profile-image'>
</c:otherwise>
</c:choose>
<span class="color-grey date">
<fmt:formatDate value="${item.getTimestamp()}" var="formattedDate" type="date" pattern="EEEE, MMMM dd YYYY"/>
${formattedDate}
</span>
<button type="submit" name="orderId" value="${item.getId()}" class="submit-button button-red">
HIDE
</button>
<span>${item.getName()}</span>
<span class="location">
<div>
${item.getPickup()}
<img src="img/right-arrow.svg" alt=">" height="1" class="arrow-icon">
${item.getDestination()}
</div>
</span>
<span class="rating">
You rated:
<c:forEach begin="1" end="${item.getRating()}" >
<img src="img/gold-star.svg" alt="" class="gold-star">
</c:forEach>
</span>
<span class="comment">
You commented: <br>
<span>${item.getComment()}</span>
</span>
</div>
</c:forEach>
</form>
</div>
</div>
</div>
</div>
</div>
<%@include file="/component/footer.html" %>
<script>
window.onload = toggleActive("nav-history");
</script>
\ No newline at end of file
<%--
Created by IntelliJ IDEA.
User: ireneedriadr
Date: 11/3/17
Time: 5:24 PM
To change this template use File | Settings | File Templates.
--%>
<%@ include file="/component/header.html"%>
<%@ include file="/component/nav.html"%>
<%
String site = new String("login.jsp");
response.setStatus(response.SC_MOVED_TEMPORARILY);
response.setHeader("Location", site);
%>
<%@include file="/component/footer.html" %>
<%@ include file="/component/header.html"%>
<div class="container">
<div id="login-box" class="form-box">
<div id="login-heading" class="form-box-heading">
<div class="form-box-heading-wrapper">
<hr>
<h1 class="txt-center">LOGIN</h1>
<hr>
</div>
</div>
<div class="form-box-body" id="login-box-body">
<span class="color-red">${errorMessage}</span>
<form action="login" method="post" onsubmit="return validateForm(this)">
<div class="form-box-body-wrapper">
<table border="0" class="form-box-table">
<tr>
<td class="table-label">
<label for="username" class="txt-right color-darkgreen">Username</label>
</td>
<td>
<input type="text" name="username" id="username" placeholder="Username" class="form-input">
</td>
</tr>
<tr>
<td class="table-label">
<label for="password" class="txt-right color-darkgreen">Password</label>
</td>
<td>
<input type="password" name="password" id="password" placeholder="Password" class="form-input">
</td>
</tr>
<tr>
</tr>
</table>
<div class="form-box-body-footer">
<div>
<a href="register"><small>Don't have an account?</small></a>
</div>
<div class="txt-right button-container">
<button type="submit" class="submit-button">Go!</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<%@include file="/component/footer.html" %>
<%@ include file="/component/header.html"%>
<%@ include file="/component/nav.html"%>
<div class="container">
<div class="wrapper row">
<div>
<div class="page-title row txt-center height-fit float-container">
<div class="float-left">
<h1 class="inline-block">MAKE AN ORDER</h1>
</div>
</div>
</div>
<div class="order-menu">
<ul class="order-ul">
<li class="order-item active">
<div class="order-number">1</div>
<div class="order-number-desc">Select Destination</div>
</li>
<li class="order-item">
<div class="order-number">2</div>
<div class="order-number-desc">Select a Driver</div>
</li>
<li class="order-item">
<div class="order-number">3</div>
<div class="order-number-desc"><span>Complete your order</div>
</li>
</ul>
</div>
<div class="order-form">
<form action="/find_driver" onsubmit="return validateForm(this)" method="get">
<table>
<tr>
<td>Picking Point</td>
<td><input type="text" name="pickUp" class="form-input" placeholder="Required"></td>
</tr>
<tr>
<td>Destination</td>
<td><input type="text" name="destination" class="form-input" placeholder="Required"></td>
</tr>
<tr>
<td>Preferred Driver</td>
<td><input type="text" name="preferredDriver" class="form-input" placeholder="Optional" optional></td>
</tr>
</table>
<div class="txt-center">
<button type="submit" class="form-input submit-button">OK</button>
</div>
</form>
</div>
</div>
</div>
<%@ include file="/component/footer.html"%>
<script>
window.onload = toggleActive("nav-order");
</script>
<%--
Created by IntelliJ IDEA.
User: ireneedriadr
Date: 11/3/17
Time: 3:23 PM
To change this template use File | Settings | File Templates.
--%>
<%@ include file="/component/header.html"%>
<%@ include file="/component/nav.html"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix = "fmt" uri = "http://java.sun.com/jsp/jstl/fmt" %>
<div class="container">
<div class="wrapper row">
<div>
<div class="page-title row txt-center height-fit float-container">
<div class="float-left">
<h1 class="inline-block">MY PROFILE</h1>
</div>
<div class="float-right txt-right height-100">
<a href="edit_profile">
<img src='img/edit-orange.svg' class='edit-icon inline-block'>
</a>
</div>
</div>
<div id="profile-body" class="row txt-center">
<c:choose>
<c:when test="${userProfile.getImage() != null}">
<img src='${userProfile.getImage()}' class='profile-image' height='80' alt='profile-image'>
</c:when>
<c:otherwise>
<img src='img/default-profile.png' class='profile-image' height='80' alt='profile-image'>
</c:otherwise>
</c:choose>
<br>
<h3>@${userProfile.getUsername()}</h3>
${userProfile.getName()}
<br>
<span class="profile-rating">
<c:if test="${userProfile.getIsDriver()}">
Driver | <img src='img/gold-star.svg' height='15'>
<span class="color-orange">
<fmt:formatNumber type = "number" maxFractionDigits = "1" value = "${driverProfile.getRating()}" />
</span>
&nbsp; (${driverProfile.getVote()} votes)
</c:if>
<c:if test="${!userProfile.getIsDriver()}">
Non-Driver
</c:if>
</span>
<br>
<span> <img src="img/mail.svg" alt=" " >${userProfile.getEmail()}</span>
<br>
<span> <img src="img/phone.svg" alt=" ">${userProfile.getPhoneNumber()}</span>
</div>
<c:if test="${userProfile.getIsDriver()}">
<div id='preferred-loc' class='row txt-center'>
<div class='page-title row txt-center float-container'>
<h2 class='inline-block float-left'>PREFERRED LOCATIONS:</h2>
<span class='float-right'>
<a href="preferred_location">
<img src='img/edit-orange.svg' class='edit-icon inline-block'>
</a>
</span>
</div>
</div>
<ul class='preferred-list'>
<% int tab = 0; %>
<c:forEach items="${preferredLocations}" var="item">
<li style="margin-left: <%= tab%>px">${item.getLocation()}
<% tab = tab + 20;%>
</c:forEach>
</c:if>
</div>
</div>
</div>
<%@ include file="/component/footer.html"%>
<script>
window.onload = toggleActive("nav-profile");
</script>
\ No newline at end of file
<%@ include file="/component/header.html"%>
<div class="container">
<div id="signup-box" class="form-box">
<div id="signup-heading" class="form-box-heading">
<div class="form-box-heading-wrapper">
<hr>
<h1 class="txt-center">SIGN UP</h1>
<hr>
</div>
</div>
<div class="form-box-body" id="signup-box-body">
<span class="color-red">${errorMessage}</span>
<% if (request.getParameter("status") != null) {
out.println("<span class='color-red'>SignUp Gagal</span>");
}
%>
<form action="/register" method="post" onsubmit="return validateForm(this)">
<div class="form-box-body-wrapper">
<table border="0" class="form-box-table">
<tr>
<td class="table-label">
<label for="name" class="txt-right">Your Name</label>
<td>
<input type="text" name="name" id="name" placeholder="Name" class="form-input"> </td>
</td>
<span class="error-text">
</span>
</tr>
<tr>
<td class="table-label">
<label for="username-form" class="txt-right">Username</label>
</td>
<td>
<input type="text" name="username" id="username-form" class="form-input width-90" placeholder="Username" onblur="usernameAJAX()">
<div id="username-check-status" class="ajax-status">
</div>
</td>
</tr>
<tr>
<td class="table-label">
<label for="email-form" class="txt-right">E-mail</label>
</td>
<td>
<input type="text" name="email" class="form-input width-90" placeholder="E-Mail" id="email-form" onblur="emailAJAX()">
<div id="email-check-status" class="ajax-status">
<span></span>
</div>
</td>
</tr>
<tr>
<td class="table-label">
<label for="password-register" class="txt-right">Password</label>
</td>
<td>
<input type="password" name="password" class="form-input" id="password-register" placeholder="Password">
</td>
</tr>
<tr>
<td class="table-label">
<label for="confirm-password" class="txt-right">Confirm Password</label>
</td>
<td>
<input type="password" name="confirm-password" id="confirm-password" placeholder="Re-type Password" class="form-input">
</td>
</tr>
<tr>
<td class="table-label">
<label for="phone-number" class="txt-right">Phone Number</label>
</td>
<td>
<input type="text" name="phoneNumber" id="phone-number" placeholder="Phone Number" class="form-input">
</td>
</tr>
</table>
<div class="form-box-body-footer">
<div class="row">
<input type="checkbox" name="isDriver" id="is-driver" value="1">
<label for="is-driver"><small>Also sign me up as a driver!</small></label>
</div>
<div>
<a href="login"><small>Already have an account?</small></a>
</div>
<div class="txt-right button-container">
<button type="submit" class="form-input submit-button" id="register-submit-button">Register</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1">
<servlet>
<servlet-name>Login</servlet-name>
<servlet-class>com.adaapa.adaojek.servlets.LoginServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Login</servlet-name>
<url-pattern>/login</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>Register</servlet-name>
<servlet-class>com.adaapa.adaojek.servlets.RegisterServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Register</servlet-name>
<url-pattern>/register</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>Index</servlet-name>
<servlet-class>com.adaapa.adaojek.servlets.IndexServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Index</servlet-name>
<url-pattern>/index</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>Order</servlet-name>
<servlet-class>com.adaapa.adaojek.servlets.OrderServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Order</servlet-name>
<url-pattern>/order</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>Logout</servlet-name>
<servlet-class>com.adaapa.adaojek.servlets.LogoutServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Logout</servlet-name>
<url-pattern>/logout</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>Profile</servlet-name>
<servlet-class>com.adaapa.adaojek.servlets.ProfileServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Profile</servlet-name>
<url-pattern>/profile</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>History</servlet-name>
<servlet-class>com.adaapa.adaojek.servlets.HistoryServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>History</servlet-name>
<url-pattern>/history</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>EditProfile</servlet-name>
<servlet-class>com.adaapa.adaojek.servlets.EditProfileServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>EditProfile</servlet-name>
<url-pattern>/edit_profile</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>PreferredLocation</servlet-name>
<servlet-class>com.adaapa.adaojek.servlets.PreferredLocationServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>PreferredLocation</servlet-name>
<url-pattern>/preferred_location</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>PreferredLocation</servlet-name>
<url-pattern>/add_location</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>DeletePreferredLocation</servlet-name>
<servlet-class>com.adaapa.adaojek.servlets.DeletePreferredLocationServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>DeletePreferredLocation</servlet-name>
<url-pattern>/delete_location</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>EditPreferredLocation</servlet-name>
<servlet-class>com.adaapa.adaojek.servlets.EditPreferredLocationServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>EditPreferredLocation</servlet-name>
<url-pattern>/edit_preferred_location</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>FindDriver</servlet-name>
<servlet-class>com.adaapa.adaojek.servlets.FindDriverServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>FindDriver</servlet-name>
<url-pattern>/find_driver</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>DriverHistory</servlet-name>
<servlet-class>com.adaapa.adaojek.servlets.DriverHistoryServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>DriverHistory</servlet-name>
<url-pattern>/driver_history</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>CompleteOrder</servlet-name>
<servlet-class>com.adaapa.adaojek.servlets.CompleteOrderServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>CompleteOrder</servlet-name>
<url-pattern>/complete_order</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>UserHideHistory</servlet-name>
<servlet-class>com.adaapa.adaojek.servlets.UserHideHistoryServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>UserHideHistory</servlet-name>
<url-pattern>/hide_history</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>DriverHideHistory</servlet-name>
<servlet-class>com.adaapa.adaojek.servlets.DriverHideHistoryServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>DriverHideHistory</servlet-name>
<url-pattern>/driver_hide_history</url-pattern>
</servlet-mapping>
</web-app>
<script src="../js/app.js"></script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>AdaApa?</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/app.css">
<link rel="icon" href="img/logo.png">
</head>
<body>
<nav class="navbar">
<div class="row navbar-top">
<div class="inline-block float-left txt-left">
<img src="../img/logo.png" class="margin-auto height-100">
</div>
<div class="inline-block float-right txt-right">
Hi,${user}!
<br>
<a href="/logout">Logout</a>
</div>
</div>
<br>
<div class="inline-flex" id="navbar-menu">
<a href="/order">
<div id="nav-order">
<span>ORDER</span>
</div>
</a>
<a href="/history">
<div id="nav-history">
<span>HISTORY</span>
</div>
</a>
<a href="/profile">
<div id="nav-profile">
<span> MY PROFILE</span>
</div>
</a>
</div>
</nav>
\ No newline at end of file
body {
font-family: sans-serif;
}
.wrapper {
width: 100%;
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-content: center;
}
.row {
width: 100% !important;
}
.txt-center {
text-align: center;
}
.txt-right {
text-align: right;
}
.txt-left {
text-align: left;
}
.color-darkgreen {
color: #00782d;
}
.color-red {
color: #ed2c31;
}
.color-grey {
color: #777;
}
.inline-flex {
display: inline-flex;
}
.form-input {
height: 26px;
border-radius: 3px;
border: 1px solid #00782d;
width: 100%;
}
.ajax-status {
display: inline-block;
}
.ajax-status>*{
content: '';
height: 15px;
width: 15px;
transition: 1s;
background-size: cover;
background-repeat: no-repeat;
}
.ajax-validator-ok {
background-image: url('../img/checked-green.svg');
}
.ajax-validator-not-ok {
background-image: url('../img/cancel-red.svg');
}
.ajax-validator-loading {
background-image: url('../img/loading.svg');
-webkit-animation: rotate 5s infinite; /* Safari 4.0 - 8.0 */
animation: rotate 2s infinite;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
.form-box {
display: block;
justify-content: center;
background: #8bbd3c;
border: 10px solid #00782d;
border-radius: 50px;
margin: auto;
width: 60vh;
height: 60vh;
}
.form-box .form-box-heading {
display: block;
align-content: center;
margin: auto;
width: 100%;
height: 20%;
}
.form-box .form-box-heading .form-box-heading-wrapper {
margin: 10px 0;
display: inline-flex;
width: 100%;
height: auto;
white-space: nowrap
}
.form-box .form-box-heading hr {
width: 80%;
margin: auto 5%;
border: 1px solid #00782d;
height: 0px;
}
.form-box .form-box-heading h1 {
width: fit-content;
transform: scaleY(1.3);
color: #00782d;
word-break: keep-all;
}
.form-box form {
width: 100%;
}
.form-box .form-box-body {
display: block;
width: 75%;
height: 80%;
justify-content: center;
margin: auto;
}
.form-box .form-box-table {
width: 100%;
margin: auto;
}
.form-box .form-box-table td {
padding: 0 5px;
}
.form-box .form-box-table .table-label {
width: 100px;
}
.form-box .form-box-body .form-box-body-footer {
width: 100%;
padding: 0 5px;
}
.form-box .form-box-body .form-box-body-footer div{
width: 60%;
display: inline-block;
margin: 0px;
position: relative;
}
.form-box .form-box-body .form-box-body-footer .button-container{
width: 34%;
display: inline-block;
margin: 0px;
position: relative;
}
.submit-button {
width: 100px;
height: 40px;
border: 1px solid #00782d;
background: #57e500;
font-size: 1.25em;
}
.submit-button:hover {
background: #75FF33;
font-size: 1.25em;
}
#login-box-body {
margin-top: 10vh;
}
#signup-box .form-box-body {
width: 90%;
}
#signup-box .form-box-table .table-label {
width: 120px;
white-space: nowrap;
}
#login-box .form-box-table .table-label label {
font-size: 16pt;
}
#signup-box .form-box-table .table-label label {
font-size: 12pt;
color: #00782d;
}
.width-90 {
width: 88%;
}
.error-text {
font-size: 0.7rem;
color: #CC0000;
display: block;
}
.page-title {
font-size: 10pt;
}
.inline-block {
display: inline-block;
}
.page-title .edit-icon {
margin-top: 18px;
height: 25px;
}
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {display:none;}
.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: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #00782d;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
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%;
}
.navbar {
margin: auto;
width: 80vh;
}
.container {
width: 80vh;
margin: auto;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.nav {
height: 14vh;
}
.navbar-top {
height: 5vh;
}
.margin-auto {
margin: auto;
}
.height-fit {
height: fit-content;
}
.height-100 {
height: 100%;
}
.navbar-top>* {
height: 100%;
}
#navbar-menu {
justify-content: center;
display: flex;
}
#navbar-menu>a {
width: 33%;
text-decoration: none;
color: #000000;
}
#navbar-menu>a:hover {
width: 33%;
text-decoration: none;
background: #AAAAAA;
color: #00782d;
}
#navbar-menu>*>*{
width: 100%;
height: 5vh;
border: 1px solid black;
display: flex;
justify-content: center;
align-content: center;
}
#navbar-menu>*>*>*{
height: fit-content;
margin:auto;
font-size: 1.5rem;
}
#navbar-menu>*>*.active {
background: #00782d;
color: white;
}
.float-container {
overflow: auto;
clear: both;
}
.profile-image {
height: 120px;
border-radius: 50%;
border: 3px solid #151515;
width: 120px;
overflow: hidden;
object-fit: cover;
}
span img {
vertical-align: middle;
height: 1.2rem;
}
h3{
margin: 8px;
}
.preferred-list li {
position:relative;
width:20%;
list-style-type: none;
text-transform: uppercase;
font-family: Arial;
font-size: .875em;
line-height: 1.75em;
}
.preferred-list li::before{
position:absolute;
content:"";
top:50%;
-webkit-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-o-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
margin-left:-10px;
width: 0;
height: 0;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 7px solid black;
}
.order-menu {
width: 100%;
}
.order-menu .order-item {
display: inline-block;
width: 30%;
margin: 5px;
border: 1px solid black;
height: 8vh;
position: relative;
}
.order-menu .order-item.active {
background: #fbff9a;
}
.order-menu .order-number {
display: inline-grid;
margin: 1vh 2px;
height: 6vh;
width: 6vh;
background: lightgrey;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
justify-content: center;
align-content: center;
}
.order-menu .order-number-desc {
position: absolute;
width: 60%;
height: 100%;
height: auto;
display: inline-block;
font-size: 0.8em;
wrap-option: nowrap;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.order-form {
width: 80%;
margin: auto;
}
.order-form table {
width: 100%;
font-size: 1.3rem;
border-spacing: 10px 20px;
}
.order-form table tr td input {
height: 40px;
font-size: 1.2rem;
padding: 2px 5px;
}
.order-form table tr td:nth-child(1) {
width: 35%;
}
.order-ul {
-webkit-padding-start: 20px;
}
.order-panel {
width: 100%;
border: 1px solid black;
min-height: 100px;
border-radius: 10px;
margin: 10px 0;
}
.order-panel .panel-heading {
}
.order-panel .panel-body {
width: 100%;
margin: auto;
}
.no-border {
border: none;
}
.height-auto {
height: auto;
}
#rating-system span {
display: inline-block;
width: 40px;
height: 40px;
margin: 5px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
cursor: hand;
}
#rating-system .grey-star {
background-image: url('../img/grey-star.svg');
}
#rating-system .gold-star {
background-image: url('../img/gold-star.svg');
}
#comment-area {
height: 60px;
font-size: 1.2rem;
margin-bottom: 1vh;
}
.square-image {
width: 150px;
height: 150px;
border: 1px solid black;
object-fit: cover;
}
#save-changes-button {
height: 30px;
}
#back-button {
height: 30px;
color: #000;
background-color: #D50000;
}
#back-button:hover {
height: 30px;
color: #000;
background-color: #FF2222;
}
.edit-table {
border-spacing: 10px 10px;
}
.edit-table {
width: 60vh;
}
.edit-table tr td:nth-child(1) {
width: 10vh;
}
.nowrap {
white-space: nowrap;
}
.preferences-edit {
border-collapse: collapse;
}
.preferences-edit th, .preferences-edit td{
border: 1px solid lightgrey;
padding: 5px;
}
.preferences-edit button{
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 18px;
width: 18px;
border: none;
margin: 2px 5px;
border-radius: 0;
}
.preferences-edit input {
border: 1px solid gray;
text-align: center;
font-size: 1rem;
}
.preferences-edit input[disabled] {
border: 0;
}
.edit-button {
background: url('../img/edit-orange.svg');
}
.save-button {
background: url('../img/save.svg');
}
.delete-button {
background: url('../img/delete.svg');
}
.location-input {
width: 80%;
display: flex;
margin-bottom: 5px;
}
.location-input input[type='text'] {
width: 75%;
height: 32px;
}
.location-input button {
height: 30px;
margin: auto;
}
.driver-list-item {
text-align: left;
margin: 20px auto;
width: 80%;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 1fr;
}
.driver-list-item .first {
grid-row: 1/3;
}
.driver-list-item .second {
grid-column: 2/4;
}
.driver-profile {
border: 1px solid black;
width: 6rem;
height: 6rem;
object-fit: cover;
margin: 0 2rem;
}
.driver-list-item .rating-value {
color: orange;
}
.driver-list-item img {
vertical-align: top;
}
.driver-list-item .name-text {
font-size: 1.4rem;
}
.driver-list-item .submit-button {
font-size: 0.8rem;
}
.history-menu a {
width: 50%;
text-decoration: none;
color: black;
}
.history-menu a:hover {
width: 50%;
text-decoration: none;
color: #34d56b;
}
.history-menu div {
display: inline-flex;
width: 100%;
height: 40px;
border: 1px solid black;
justify-content: center;
flex-direction: column;
text-align: center;
border-collapse: inherit;
}
.history-menu *.active {
color: #000000;
background: #34d56b;
flex-direction: column;
}
.history-list-item {
margin: 15px 0;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: repeat(5,minmax(1fr,200px));
}
.history-list-item>img {
grid-row: 1/6;
grid-column: 1/2;
margin:auto;
}
.history-list-item {
align-content: center;
justify-content: center;
}
.history-list-item .date {
font-size: 0.8rem;
}
.history-list-item>* {
display: inline-flex;
align-items: center;
justify-content: left;
text-align: left;
}
.arrow-icon {
height: 10px;
width: 10px;
}
.history-list-item .submit-button {
width: 60px;
height: 30px;
grid-column: 3;
grid-row: 1/3;
}
.history-list-item .location {
font-size: 0.8rem;
}
.history-list-item .gold-star {
width: 10px;
height: 10px;
}
.button-red {
background: #BB0000;
border-color: #000;
}
.history-list-item .location {
grid-row: 3;
grid-column: 2/4;
}
.history-list-item .rating {
font-size: 0.7rem;
grid-row: 4;
}
.history-list-item .rating span {
color: orange;
}
.history-list-item .comment {
display: inline-block;
grid-row: 5;
font-size: 0.7rem;
}
.history-list-item .comment span {
margin-left: 10px;
display: block;
}
.profile-rating img {
height: 15px;
vertical-align: middle;
}
.color-orange {
color: orange;
}
.display-inline-block{
display: inline-block !important;
}
\ No newline at end of file
TugasBesar2_2017/WebApp/src/main/webapp/img/1.png

543 KiB

TugasBesar2_2017/WebApp/src/main/webapp/img/2.png

307 KiB

TugasBesar2_2017/WebApp/src/main/webapp/img/3.png

157 KiB

TugasBesar2_2017/WebApp/src/main/webapp/img/4.png

140 KiB

TugasBesar2_2017/WebApp/src/main/webapp/img/5.png

286 KiB

TugasBesar2_2017/WebApp/src/main/webapp/img/6.png

401 KiB

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 426.667 426.667" style="enable-background:new 0 0 426.667 426.667;" xml:space="preserve">
<path style="fill:#F05228;" d="M213.333,0C95.514,0,0,95.514,0,213.333s95.514,213.333,213.333,213.333
s213.333-95.514,213.333-213.333S331.153,0,213.333,0z M330.995,276.689l-54.302,54.306l-63.36-63.356l-63.36,63.36l-54.302-54.31
l63.356-63.356l-63.356-63.36l54.302-54.302l63.36,63.356l63.36-63.356l54.302,54.302l-63.356,63.36L330.995,276.689z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
viewBox="0 0 426.7 426.7" style="enable-background:new 0 0 426.7 426.7;" xml:space="preserve">
<style type="text/css">
.st0{fill:#00782D;}
</style>
<path class="st0" d="M213.3,0C95.5,0,0,95.5,0,213.3s95.5,213.3,213.3,213.3c117.8,0,213.3-95.5,213.3-213.3S331.2,0,213.3,0z
M174.2,322.9L80.3,229l31.3-31.3l62.6,62.6l140.9-140.9l31.3,31.3L174.2,322.9z"/>
</svg>
TugasBesar2_2017/WebApp/src/main/webapp/img/default-profile.png

2.08 KiB