-
-
-
- Parcel content/Qty: 3 Pack of nylon strip
-
-
- ID: 5671GF
-
- Date: 12/3/2018
-
- OnitshaPresent Location
-
- CalaberPickup Location
-
-
-
Status
-
-
-
-
- Parcel content/Qty: 3 Pack of nylon strip
-
-
- ID: 5671GF
-
- Date: 12/3/2018
-
-
Present Location:
-
-
-
Pickup Location:
-
Calabar
+
+
1
+
12/3/2018
+
5671GF
+
3 Packs of nylon strip
+
✎
+
+
+
+
+
+ Parcel content: Pack of nylon strip
+
+
+ Tracking ID: 5671GF...
+
+ Date: 12/3/2018
+
+ Price:
+ ₦500
+
+
+ Pickup Address:
+ 120 Mark Street Obalende Lagos Nigeria
+
+
+ Desination Address:
+ 22 Burka Street Kano Nigeria
+
+
+
+
+
+
+ Name:
+ Collins Uwam
+
+
Update Parcel
+
Present Location:
+
+
+
Status
+
-
Status
-
+
+
+
-
+
-
+
diff --git a/UI/css/main.css b/UI/css/main.css
index efcf120..27bdaf0 100644
--- a/UI/css/main.css
+++ b/UI/css/main.css
@@ -33,19 +33,9 @@ body {
flex: 1 1 100%;
}
-#top-head {
- display: flex;
- flex-direction: row;
- justify-content: space-around;
- background: antiquewhite;
-}
-/* All the descendants of top-head */
-.top-head > * {
- flex: 1 1 100%;
-}
#top-img {
- height: 100px;
+ height: 80px;
width: 100px;
cursor: pointer;
margin: 2px;
@@ -53,6 +43,7 @@ body {
#sub-head {
display: flex;
flex-direction: row;
+ max-height: 80px;
flex: 1 1 auto;
justify-content: space-between;
background: darkred;
@@ -95,6 +86,7 @@ font-family: 'Inknut Antiqua', serif;
display: inline-block;
height: 40px;
width: 40px;
+ outline: none;
border-radius: 20px;
font-size: 32px;
font-weight: bolder;
@@ -115,47 +107,39 @@ input {
}
.my-parcel {
display: flex;
+ margin-right: 15px;
}
#my-parcels {
/* display: inline-block; */
- margin-top: 10px;
- background: transparent;
- padding: 10px;
- color: brown;
+ margin-top: 12px;
+ /* background: transparent; */
+ padding: 5px;
+ color: white;
max-height: fit-content;
font-size: 1.2em;
font-weight: bolder;
- border: 1px solid green;
+ /* border: 2px solid green; */
}
-#signin {
- margin-top: 10px;
- margin-left: 10px;
- color: yellowgreen;
- height: 30px;
- cursor: pointer;
+#login {
+ margin-top: 5px;
background: transparent;
- font-size: 1.1em;
+ width: max-content;
+ display: inline-block;
+ padding: 5px;
+ cursor: pointer;
+ color: white;
+ border-radius: 3px;
+ text-align: center;
+ font-size: .9em;
font-weight: bolder;
- border: 1px solid green;
-}
-
-#my-parcels:hover, #signin:hover, #top-img:hover {
- box-shadow: 3px 5px 5px 5px gray;
-}
-
-.cart img {
- width: 20px;
- height: 22px;
- transform: rotate(0deg);
- padding-right: 5px;
-}
-
+}
#signup {
- margin-top: 10px;
+ margin-top: 5px;
background: green;
width: max-content;
- padding: 5px;
+ padding: 7px;
+ padding-top: 3px;
cursor: pointer;
color: white;
border-radius: 3px;
@@ -163,37 +147,48 @@ input {
font-size: .9em;
font-weight: bolder;
}
-#signup:hover {
+#signup:hover, #login:hover {
background: rgba(153, 205, 50, 0.87);
}
+.cart img {
+ width: 20px;
+ height: 22px;
+ transform: rotate(0deg);
+ padding-right: 5px;
+}
+
+
+
#open {
display: flex;
/* border: 1px solid blue; */
justify-content: space-between;
align-items: stretch;
flex-basis: 100%;
+ margin-top: 5px;
+}
+#open li {
+ font-family: 'Times New Roman', Times, serif;
+ margin: 5px;
+}
+#open li:hover {
+ transform: scale(1.1);
}
li {
list-style: none;
padding-bottom: 5px;
}
-#open li a {
- flex: 1 1 100%;
- text-decoration: none;
- padding-right: 5px;
- /* margin: 5px; */
- font-size: 20px;
- color: white;
- margin-left: 60px;
- list-style: none;
-}
+
/* PARCEL-SUBMIT */
#search-header {
padding: 10px;
+ margin-top: 5px;
margin-right: 20px;
+ align-self: center;
+
}
#track {
display: inline-block;
@@ -202,16 +197,27 @@ li {
font-size: 20px;
}
+
/*Search button*/
.search-go {
margin: 0;
- padding: 5px 0px;
+ padding: 7px 0px;
+ padding-left: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
- border:1px solid #0076a3; border-right:0px;
+ /* border:1px solid #0076a3; border-right:0px; */
border-top-left-radius: 1px 1px;
border-bottom-left-radius: 5px 5px;
}
+.button-go{
+ width: auto;
+ padding: 8px;
+ padding-right: 10px;
+ font-size: .7em;
+ border-radius: 3px;
+ color: white;
+ background: green;
+}
.search-button {
margin: 0;
padding: 5px 20px;
@@ -222,12 +228,12 @@ li {
text-align: center;
text-decoration: none;
color: #ffffff;
- border: solid 1px #0076a3; border-right:0px;
+ /* border: solid 1px #0076a3; border-right:0px; */
background: green;
border-top-right-radius: 1px 1px;
border-bottom-right-radius: 1px 1px;
}
-.search-button:hover, .auth-login-form input[type=submit]:hover, #get-qoute:hover {
+.search-button:hover, .auth-login-form input[type=submit]:hover, #get-qoute:hover, .button-go:hover {
text-decoration: none;
background: rgba(153, 205, 50, 0.87);
}
@@ -238,12 +244,16 @@ li {
.search-clear {
clear:both;
}
+input.search-go:hover {
+ border: 2px solid green;
+}
/* SECTION */
.section {
/* width: 80vh; */
- height: 90vh;
+ height: 100vh;
margin-left: 60px;
margin-right: 60px;
+ overflow: auto;
}
#welcome {
@@ -301,10 +311,10 @@ li {
font-size: 1.2em;
}
-#exist {
- /* margin-left: 40px; */
+/* #exist {
+ /* margin-left: 40px;
-}
+} */
/* FORM */
#auth-login-form {
background: rgba(122, 56, 36, 0.4);
@@ -320,18 +330,24 @@ li {
#auth-login-form form label {
display: block;
float: left;
+ color: black;
padding: 5px;
}
#auth-login-form input {
width: 100%;
border-radius: 2px;
- outline: none;
+ box-shadow:none;
+ border: none;
+ /* outline: none; */
border: none;
margin-bottom: 15px;
padding: 10px;
box-sizing: border-box;
}
+.form0 input[type=email]:hover {
+ border: 1px solid green;
+}
#auth-login-form form input[type=submit] {
background: green;
@@ -371,7 +387,7 @@ li {
.overlay {
background: rgba(122, 56, 36, 0.8);
width: 100vw;
- height: 352px;
+ height: 350px;
margin-top: 60px;
top: 0;
left: 0;
@@ -380,7 +396,7 @@ li {
z-index: 2;
}
.overlay-home {
- margin-top: 165px;
+ margin-top: 80px;
}
#form2 {
margin: 2em 0;
@@ -424,7 +440,7 @@ li {
display: inline;
font-size: 12px;
color: rgba(0, 128, 0, 0.801);
- text-align:start;
+ text-align: center;
}
/**
* Translate down and scale the label up to cover the placeholder,
@@ -463,7 +479,7 @@ li {
#form2 input:focus + label {
transform: translate(0, 0) scale(1.5);
color: white;
- cursor: pointer;
+ margin-bottom: 7px;
}
#option {
color: green;
@@ -494,15 +510,16 @@ li {
background: green;
font-size: 1.2em;
border-radius: 3px;
- box-shadow: 1px 1px 2px 1px gray;
+ outline: none;
}
#call-action {
- font-size: xx-large;
+ font-size: 3em;
font-family: 'Patrick Hand', cursive;
opacity: .7;
font-weight: bolder;
- color: rgb(252, 252, 252);
- letter-spacing: .2em;
+ color: white;
+ margin-top: 3px;
+ letter-spacing: .1em;
}
#personnel {
display: flex;
@@ -560,10 +577,10 @@ letter-spacing: 0.1em;
}
.plan a {
text-decoration: none;
- background: rgba(122, 56, 36, 0.966);
+ background: rgba(216, 191, 184, 0.966);
/* background: rgb(54, 16, 124); */
padding: 10px;
- color: yellow;
+ color: rgb(54, 16, 90);
border-radius:4px;
}
.plan a:hover {
@@ -571,9 +588,9 @@ letter-spacing: 0.1em;
}
.plan h4 {
text-transform: uppercase;
- color: rgba(27, 194, 63, 0.637);
+ color: rgb(148, 104, 104);;
letter-spacing: 2px;
- text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
+ text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}
.img-icon {
@@ -619,6 +636,7 @@ letter-spacing: 0.1em;
border-top: 2px solid rgba(128, 128, 128, 0.568);
box-shadow: 0px 2px 2px 1px gray;
text-align: center;
+ margin: 10px;
}
.p {
color: rgb(54, 16, 90);
@@ -629,7 +647,7 @@ letter-spacing: 0.1em;
li {
text-align: center;
font-size: .9em;
- font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+ font-family: 'Times New Roman', Times, serif;
}
.plan > * {
@@ -703,7 +721,8 @@ letter-spacing: 0.1em;
}
/*Modal*/
-#modal {
+
+#modal2 {
z-index: 2;
display: none;
text-align: center;
@@ -716,6 +735,26 @@ letter-spacing: 0.1em;
color: #fff;
}
+
+#signup2 {
+ margin-top: 5px;
+ background: green;
+ width: max-content;
+ padding: 7px;
+ padding-top: 3px;
+ cursor: pointer;
+ color: white;
+ border-radius: 3px;
+ text-align: center;
+ font-size: .9em;
+ font-weight: bolder;
+}
+#signup2:hover, #login:hover {
+ background: rgba(153, 205, 50, 0.87);
+
+}
+
+
#auth-btn {
display: block;
@@ -755,7 +794,7 @@ letter-spacing: 0.1em;
max-width: 500px;
}
-#auth-form {
+#auth-form2 {
max-width: 500px;
padding: 20px;
border: 4px solid bisque;
@@ -766,43 +805,55 @@ letter-spacing: 0.1em;
border-radius: 3px;
}
-#auth-form form label {
+#auth-form2 form label {
display: block;
+ color: white;
float: left;
padding: 5px;
}
-#auth-form input {
+#auth-form2 input {
width: 100%;
border-radius: 5px;
outline: none;
border: none;
margin-bottom: 13px;
+ font-size: 1.2em;
padding: 10px;
box-sizing: border-box;
}
-#auth-form #login-open {
+#auth-form2 #login-open {
+ display: inline-block;
outline: none;
cursor: pointer;
width: 60px;
margin-left: 0px;
+ text-decoration: underline;
padding: 5px;
background: transparent;
color: lightskyblue;
font-size: 1.2em;
}
-#auth-form form input[type=submit] {
+#auth-form2 form input[type=submit], #submit-modal {
background: green;
color: #fff;
+ text-align: center;
cursor: pointer;
width: 40%;
}
-#auth-form form input[type=submit]:hover {
+#auth-form2 form input[type=submit]:hover, #submit-modal:hover {
background: rgba(153, 205, 50, 0.87);
}
+#submit-modal {
+ display: block;
+ text-align: center;
+ align-self: center;
+ margin-left: 120px;
+ border-radius: 5px;
+}
#close-signup {
float: right;
@@ -823,20 +874,38 @@ letter-spacing: 0.1em;
/* Admin dashoboard */
.admin-body {
- max-width: 90%;
- margin-left: 30px;
- margin-right: 10px;
+ max-width: 100%;
+ /* margin: 20px; */
+ background: white;
+}
+.dash-acc-div {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ /* margin-left: 100px; */
+ /* margin-right: 80px; */
}
.dashboard-article h3 {
- color: brown;
- margin-bottom: 0px;
+ color: rgb(71, 41, 41);
+ margin-bottom: 15px;
text-align: center;
}
-.dashboard-article h5 {
- color: cadetblue;
+#admin-span {
+ color: black;
+ margin-left: 5px;
+ margin-bottom: 0px;
text-align: center;
+ font-size: 1.2em;
+}
+.dashboard-article h6 {
+ color: darkslateblue;
+ font-size: .7em;
+ letter-spacing: .9;
+ line-height: .5em;
}
+
.dashboard-article {
z-index: 1;
}
@@ -847,7 +916,7 @@ letter-spacing: 0.1em;
#toggleNav {
display: block;
- color: blue;
+ color: whitesmoke;
text-decoration: none;
line-height: 2em;
z-index: 3;
@@ -861,51 +930,60 @@ letter-spacing: 0.1em;
list-style: none;
justify-content: center;
display: block;
- color: green;
+ color: rgb(244, 241, 247);
text-decoration: none;
line-height: 2em;
- font-weight: 900;
+ font-weight: bolder;
+ font-size: 1em;
text-align: center;
padding: 5px;
}
-
-
-.dashboard-accordion {
- background-color: burlywood;
+.admin-update{
+ color: blue;
+}
+.dashboard-accordion, .dashboard-header {
color: #444;
- cursor: pointer;
justify-content: space-between;
display: flex;
padding: 18px;
width: 80%;
- margin-top: 20px;
- margin-left: 20px;
- border: none;
- color: darkblue;
- font-family: cursive;
- font-weight: bold;
- /* text-align: left; */
- font-size: 15px;
+ border: 1px solid brown ;
+ font-size: 1.2em;
+ font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
transition: 0.4s;
border-radius: 4px;
}
-
+.dashboard-header {
+ background: rgb(252, 133, 133);
+ border-bottom-left-radius: 0px;
+ border-bottom-right-radius: 0px;
+}
+.dashboard-accordion.one{
+ border-top-left-radius: 0px;
+ border-top-right-radius: 0px;
+}
+.admin-dropdown {
+ border: 2px solid #ccc;
+ padding-right: 20px;
+ background-color: brown;
+ border-radius: 5px;
+}
+.accon-dropdown a{
+ font-size: 1em;
+}
.active, .dashboard-accordion:hover {
background-color: #ccc;
}
.dashboard-accordion:after {
- content: '\002B';
+ /* content: '\002B'; */
+ /* content: '\25b4'; */
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
-.active:after {
- content: "\2212";
-}
-
.dashboard-panel {
padding: 0 18px;
background-color: #ffffff;
@@ -917,23 +995,61 @@ letter-spacing: 0.1em;
.item {
display: flex;
- justify-content: space-around;
+ margin-left: 50px;
+ margin-top: 20px;
}
.item-item{
display: flex;
flex-direction: column;
- justify-content: space-between;
+ justify-content: stretch;
height: auto;
+ font-size: 1.2em;
+}
+.item-item p {
+ color: rgb(95, 94, 94);
+}
+
+.item-item span {
+ font-family: Arial, sans-serif;
+
+}
+.item-item select {
+ padding: 5px;
+ font-size: 1em;
+}
+.item-address {
+ margin-left: 60px;
+}
+.select-span {
+ display: block;
+margin-bottom: 5px;
+}
+.select-cancel {
+ color: red;
+}
+.select-deliver {
+ color: green;
+}
+.select-moving {
+ color: goldenrod;
+}
+.select-pending {
+ color: dodgerblue;
+}
+.update-h5 {
+ color: rgb(136, 228, 136);
+ font-size: 1.2em;
}
.footer {
text-align: center;
margin-top: 70px;
- background: antiquewhite;
+ background: rgb(122, 2, 2);
align-self: flex-end;
right: 0;
overflow-y: hidden;
bottom: 0;
+ color: floralwhite;
left: 0;
padding: .4rem;
height: 5%;
@@ -941,5 +1057,35 @@ letter-spacing: 0.1em;
.footer-login {
position: fixed;
}
+/* FEEDBACK */
+.sendit-logo {
+ padding-top: 0px;
+ font-style: normal;
+ font-weight: normal;
+ font-size: 1.7em;
+ margin-right: 5px;
+ margin-top: 6px;
+}
+.sendit-logo #span-logo{
+ font-size: 1em;
+ color: rgb(240, 173, 91);
+}
+.our-services {
+margin-top: 5px;
+font-size: 1.4em;
+}
+
+
+
+/* .footer-place-order {
+ /* position: fixed; */
+ /* left: 0;
+ bottom: 0;
+ width: 100%; */
+ /* background-color: red; */
+ /* color: white;
+ text-align: center;
+ }
+} */
diff --git a/UI/css/place_order.css b/UI/css/place_order.css
index 2a2ef3b..117c3a9 100644
--- a/UI/css/place_order.css
+++ b/UI/css/place_order.css
@@ -1,55 +1,3 @@
-#place-order-area {
- display: flex;
- flex-basis: 1 1 80%;
- margin-top: 20px;
- max-height: 90vh;
- overflow: auto;
-}
-
-#parcel-details {
- display: flex;
- /* flex-direction: column; */
- justify-content: space-evenly;
- box-shadow: 1px 2px 3px 2px gray;
-}
-.display-list {
- position: absolute;
- display: flex;
- flex-direction: column;
- margin-top: 10px;
- margin-left: 380px;
- width: 80%;
- /* height: 100px; */
-}
-.display-list h5 {
- color: slategray;
- font-weight: bolder;
- font-size: 1.2em;
-}
-.parcel-list {
- box-shadow: 1px 2px 3px 2px gray;
- margin-right: 20px;
- display: flex;
- justify-content: space-evenly;
- flex: 1 1 80%;
- width: 80%;
- margin-top: 5px;
- padding-top: 10px;
- font-weight: bolder;
- /* cursor: pointer; */
-
-}
-.parcel-list p, label {
- padding: 3px;
- font-style: oblique;
- display: inline;
-
-}
-.parcel-list p {
- color: steelblue;
-
-}
-
.cart-parcel img {
width: 30px;
transform: rotateX(120deg);
@@ -104,19 +52,6 @@
}
-/* .cancel-order {
- background: transparent;
- color: red;
- padding: 5px;
- margin-left: 20px;
- font-weight: bolder;
- outline: none;
- border: none;
-} */
-
-/*Place order div*/
-
-/* flexbox starts here */
/* THE ACCORDION */
.container {
width: 100%
@@ -131,7 +66,6 @@ button.accordion {
text-align: center;
outline: none;
font-size: 1.2em;
- /* transition: 0s; */
font-weight: bolder;
float: left;
height: 100px
@@ -141,7 +75,7 @@ button.accordion {
display: flex;
flex-direction: column;
padding: 0 18px;
- background-color: white;
+ /* background-color: white; */
max-height: 0;
z-index: 2;
overflow: hidden;
@@ -157,39 +91,35 @@ button.accordion {
.panel-open {
max-height: 80%;
- transition: max-height 0s ease-out
+ transition: max-height 0s ease-out;
+ /* overflow: auto; */
}
button.accordion:hover {
/* border: 1px solid rgba(128, 128, 128, 0.568); */
- box-shadow: 1px 1px 1px 1px goldenrod;
+ box-shadow: 3px 3px 3px 3px rgb(32, 218, 110);
}
-/* button.accordion:nth-of-type(1),
-div.panel:nth-of-type(2) {
- background: wheat;
-} */
-
/*Background colors of each section, both accordion and panels*/
button.accordion:nth-of-type(1) {
- background: wheat;
+ background: slategray;
}
button.accordion:nth-of-type(2) {
- background: lightblue
+ background: rgb(190, 83, 83);
}
button.accordion:nth-of-type(3) {
- background: purple
+ background: slategray;
}
button.accordion:nth-of-type(4) {
- background: teal
+ background: rgb(190, 83, 83);
}
-
+/*
button.accordion:nth-of-type(5) {
- background: orange
-}
+ background: rgb(112, 73, 1);
+} */
.flex-form {
@@ -198,9 +128,10 @@ button.accordion:nth-of-type(5) {
justify-content: space-around;
border: 20px solid rgba(0, 0, 0, 0.2);
border-radius: 5px;
+ height: 30px;
}
.flex-form > * {
- /* flex: 1 1 100%; */
+ flex: 1 1 100%;
flex-wrap: nowrap;
border: 0;
padding: 4px;
@@ -221,9 +152,10 @@ button.accordion:nth-of-type(5) {
margin-left: 0px;
}
-.flex-form input[type="submit"]:hover, input[type="number"]:hover, .location:hover{
+.flex-form input[type="submit"]:hover, .flex-form input[type="number"]:hover {
border: 2px solid green;
}
+
input[type="submit"] {
background-color: rgb(27, 194, 63);
border: 0;
@@ -238,8 +170,9 @@ input[type="submit"] {
input[type="submit"]:hover {
background: forestgreen;
}
+
label {
- color: goldenrod;
+ color: rgb(43, 2, 53);
}
.po {
@@ -249,29 +182,70 @@ label {
text-align: start;
font-weight: bolder;
}
-#return-details {
+.return-details {
display: flex;
flex: 1 1 100%;
+ /* max-height: 100%; */
justify-content: space-evenly;
margin-top: 40px;
}
#signup-form{
display: block;
+ width: auto;
+ max-height: 100%;
+ overflow: auto;
margin-top: 40px;
border-top: 1px solid bisque;
padding-top: 10px;
}
-#signup-form input[type="text"], input[type="email"], input[type="phone"], .address,.fullname {
+#signup-form input[type="text"], input[type="email"], input[type="phone"], .address,.fullname, select {
display: block;
- border: 5px solid rgba(0, 0, 0, 0.2);
+ border: 2px solid rgba(0, 0, 0, 0.2);
border-radius: 5px;
margin-bottom: 30px;
- height: 5px;
- width: 200px;
+ /* height: 2px; */
+ width: 350px;
}
#signup-form input[type="text"]:hover, input[type="email"]:hover, input[type="phone"]:hover, .address:hover, .fullname:hover {
outline-color: green;
}
+.signup-form-select {
+ padding: 5px;
+}
+
+.help- {
+border: 2px solid floralwhite;
+width: 350px;
+padding: 5px;
+background: white;
+margin-left: 150px;
+border-radius: 5px;
+margin-top: 40px;
+font-family: 'Courier New', Courier, monospace;
+font-weight: bolder;
+}
+#help-button {
+ background-color: rgb(27, 194, 63);
+ margin-top: 20px;
+ margin-left: 230px;
+ width: 40%;
+ border-radius: 5px;
+ cursor: pointer;
+}
+#help-button:hover {
+ background: springgreen;
+}
+.help- h4 {
+ text-align: center;
+ color: steelblue;
+ font-size: 1.2em;
+}
+#checkbox {
+ color: steelblue;
+}
+.help- a {
+ color: blue;
+}
.my-details {
margin-bottom: 30px;
}
@@ -397,6 +371,15 @@ aside h3 {
.float-flex {
display: flex;
}
+#google-map {
+ /* display: flex; */
+ display: none;
+ background-color: grey;
+ height: 500px; /* The height is 400 pixels */
+ width: 60%; /* The width is the width of the web page */
+ justify-content: center;
+ align-items: center;
+}
@media screen and (max-width: 500px) {
div{width:70%;}
}
@@ -433,3 +416,286 @@ aside h3 {
top: initial;
}
}
+/* FEEDBACK PLACEHOLD */
+#avatar {
+ margin-top: 10px;
+ height: 30px;
+ width: 30px;
+ border-radius: 100%;
+ margin-left: 20px;
+}
+#avatarName {
+ display: inline;
+ padding-bottom: 20px;
+ font-weight: bold;
+ text-align: center;
+
+}
+.dropbtn {
+ background-color: #4CAF50;
+ color: white;
+ padding: 16px;
+ font-size: 16px;
+ border: none;
+ /* cursor: pointer; */
+}
+
+.dropdown {
+ position: relative;
+ display: inline-block;
+
+}
+
+.dropdown-content {
+ display: none;
+ position: absolute;
+ right: 0;
+ margin-top: 18px;
+ background-color: brown;
+ min-width: 80px;
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+ z-index: 1;
+}
+
+.dropdown-content a {
+ color: white;
+ font-size: .6em;
+ text-align: start;
+ padding: 5px 5px;
+ text-decoration: none;
+ display: block;
+}
+
+.dropdown-content a:hover {background-color: white; color: blue;}
+.dropdown:hover .dropdown-content {display: block;}
+.dropdown:hover .dropbtn {background-color: #3e8e41;}
+
+.profile_tags{
+ padding: 20px;
+ background: lemonchiffon;
+}
+.section-order {
+ background: white;
+}
+
+/* Tables */
+.order-sum-wrap {
+ display: flex;
+ margin-top: 20px;
+ justify-content: space-between;
+ max-width: 80%;
+ margin-left: 80px;
+ padding-left: 0px;
+}
+
+.aside-diva {
+ margin-top: 15px;
+
+}
+.aside-diva #add-parcel{
+ font-size: 1.2em;
+ background: green;
+ color: white;
+ border-radius: 5px;
+ margin-bottom: 10px;
+}
+.aside-diva #add-parcel:hover {
+ background: rgba(153, 205, 50, 0.87);
+ outline: none;
+}
+ .order-wrapper {
+max-width: 80%;
+display: flex;
+flex-direction: column;
+justify-content: center;
+/* margin: 10px; */
+margin-left: 80px;
+max-height: auto;
+ }
+ .order-wrapper > * {
+ flex-basis: 100%;
+ }
+
+ .order-history {
+ /* border: gray 1px #cccccc; */
+ border: green 1px solid;
+ display: flex;
+ height: fit-content;
+ text-align: center;
+ font-size: 1.2em;
+ font-weight: 300;
+ font-family: 'Times New Roman', Times, serif;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .order-column {
+ text-align: center;
+ padding: 5px;
+ }
+ .id{
+ flex: 0.2;
+ }
+ .date {
+ flex: 0.4;
+ font-size: .9em;
+ }
+ .parcel-content,.TrackingID, .status {
+ flex: .6;
+ }
+ .edit-col {
+ flex: .4;
+ }
+
+ .TrackingID {
+ color: purple;
+ /* font-weight: bold; */
+ }
+
+ .order-history-title {
+ margin-top: 520px;
+ }
+
+ .column-head {
+ display: flex;
+ background: white;
+ font-weight: normal;
+ font-family: 'Times New Roman', Times, serif;
+ color: brown;
+ }
+ .edit {
+ color: green;
+ cursor: pointer;
+ }
+ .order-even {
+ background: rgb(212, 210, 210);
+ }
+ .order-odd {
+ background: rgb(212, 210, 210);
+ }
+
+ .complete {
+ display: none;
+ }
+ .edit-icon {
+ display: inline-block;
+ color: black;
+ transform: rotateZ(90deg);
+ }
+ .delete-code {
+ color: black;
+ /* padding-left: 3px; */
+ font-size: .8em;
+ }
+ .delete {
+ color: red;
+ }
+ .edit, .delete {
+ display: inline-block;
+ /* margin: 10px; */
+ font-size: 18px;
+ cursor: pointer;
+ }
+.dropdown3 {
+ position: relative;
+ display: inline-block;
+}
+.dropbtn3 {
+ background: transparent;
+ color: green;
+ padding: 5px;
+ outline: none;
+ font-size: 1.5em;
+ border: none;
+ cursor: pointer;
+}
+.dropdown-content3 {
+ display: none;
+ position: absolute;
+ background-color: #f1f1f1;
+ min-width: 80px;
+ overflow: auto;
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+ z-index: 1;
+}
+.dropdown-content3 a {
+ color: black;
+ /* padding: 12px 16px; */
+ text-decoration: none;
+ display: block;
+}
+
+.dropdown3 a:hover {background-color: #ddd;}
+
+.show3 {display: block;
+}
+.add-parcel-wr {
+ background: rgba(235, 234, 234, 0.144);
+}
+
+.add-parcel-item {
+ display: flex;
+ flex-direction: column;
+ margin: 50px auto;
+ border: #cccccc 1px solid;
+ padding: 10px;
+ border-radius: 10px;
+ position: relative;
+ max-width: 600px;
+ }
+ .add-parcel-item legend {
+ text-align: center;
+ font-size: 1.5em;
+ }
+ form3 {
+ display: flex;
+ flex-direction: column;
+ background: transparent;
+ padding: 20px;
+ border-radius: 5px;
+ }
+
+ form3 label {
+ color: gray;
+ margin-bottom: 10px;
+ font-weight: bold;
+ }
+
+ form3 input, input[type=email], .address, input[type=phone] {
+ padding: 10px;
+ border-radius: 2px;
+ outline: none;
+ border: 1px solid gray;
+ margin-bottom: 10px;
+ width: 100%;
+ box-sizing: border-box;
+ box-shadow: 1px 1px 2px 1px gainsboro;
+ }
+
+ form3 input[type='submit'] {
+ background: green;
+ color: #fff;
+ font-weight: bold;
+ width: 50%;
+ align-self: center;
+ cursor: pointer;
+ }
+
+ .sub-input {
+ display: flex;
+ justify-content: space-between;
+ width: 100%
+ }
+
+ .weight, .quantity {
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ }
+ .quantity {
+ text-align: end;
+ margin-left: 10px;
+ }
+
+
+
diff --git a/UI/img/avater.jpg b/UI/img/avater.jpg
new file mode 100644
index 0000000..36c27d2
Binary files /dev/null and b/UI/img/avater.jpg differ
diff --git a/UI/img/avater2 - Copy.jpg b/UI/img/avater2 - Copy.jpg
new file mode 100644
index 0000000..0af09f2
Binary files /dev/null and b/UI/img/avater2 - Copy.jpg differ
diff --git a/UI/img/avater2.jpg b/UI/img/avater2.jpg
new file mode 100644
index 0000000..7bc2566
Binary files /dev/null and b/UI/img/avater2.jpg differ
diff --git a/UI/img/globe.jpg b/UI/img/globe.jpg
deleted file mode 100644
index cb735e3..0000000
Binary files a/UI/img/globe.jpg and /dev/null differ
diff --git a/UI/img/logo.png b/UI/img/logo.png
deleted file mode 100644
index 1164ea6..0000000
Binary files a/UI/img/logo.png and /dev/null differ
diff --git a/UI/img/profile-photo.jpg b/UI/img/profile-photo.jpg
deleted file mode 100644
index 46a8bcb..0000000
Binary files a/UI/img/profile-photo.jpg and /dev/null differ
diff --git a/UI/index.html b/UI/index.html
index a36c22b..22eab73 100644
--- a/UI/index.html
+++ b/UI/index.html
@@ -4,7 +4,7 @@
-
MailXpress | Welcome
+
SendIT | Welcome
@@ -18,44 +18,34 @@
-
-
-
-
-

-
-
-
-
-
- My Parcels
-
-
-
@@ -68,16 +58,16 @@
Want to Send a Parcel?
+
+
+
Choose Your Price
@@ -101,10 +94,10 @@
-
+
+ Fast-track
- FROM
- ₦500
@@ -113,7 +106,7 @@
- Between 0-1kg
- - ₦500 cover included
+ - ₦150 cover included
- Door to door courier service
@@ -121,20 +114,21 @@
-
+
-
+
INTERNATIONAL
- FROM
- - ₦500
+ - ₦1000
- INCL VAT
- Between 0-1kg
+ - ₦350 cover included
- Worldwide Delivery Service
@@ -145,9 +139,9 @@
-
+
COURIER COLLECTION
- Between 0-1kg
- - £20 cover included
- - Over 4,500 nationwide
+ - ₦200 cover included
+ - Over 50 nationwide
View Price List
@@ -178,6 +172,22 @@
+
+
+
diff --git a/UI/js/add.js b/UI/js/add.js
new file mode 100644
index 0000000..7aaa925
--- /dev/null
+++ b/UI/js/add.js
@@ -0,0 +1,66 @@
+const addActive = document.getElementById('add-parcel');
+const addSubmit = document.getElementById('add-submit');
+const activityTitle = document.getElementById('activity-title');
+const addActivity = document.getElementById('add-activity');
+const never = document.getElementById('never');
+const form = document.getElementById('form');
+
+
+
+const display = () => {
+ activityTitle.style.display = "block";
+ addActivity.style.display = "flex";
+};
+let id = 1;
+const increment = () => {
+ id += 1;
+
+}
+
+ const unsubmit = (event) => {
+ event.preventDefault()
+ let Date = document.querySelector('.date').value;
+ let TrackingID = document.querySelector('.TrackingID').value;
+ let ParcelContent = document.querySelector('.parcel-content').value;
+ let location = document.getElementById('location').value;
+ let status = document.querySelector('.status').value;
+ let Edit = document.querySelector('.edit-col').value;
+
+ increment();
+ const addActivities = document.createElement('DIV');
+ addActivities.innerHTML = `
+
${id}
+
${date}
+
${ParcelContent}
+
${location}
+
+ ${status}
+
+
+
+
+
+
+
+
+`;
+const up = document.querySelector('.order-wrapper');
+up.appendChild(addActivities);
+};
+
+ const close = () => {
+ activityTitle.style.display = "none";
+ addActivity.style.display = "none";
+};
+addActive.addEventListener('click', display);
+addSubmit.addEventListener('click', unsubmit);
+never.addEventListener('click', close);
\ No newline at end of file
diff --git a/UI/js/google_map.js b/UI/js/google_map.js
new file mode 100644
index 0000000..0f3a403
--- /dev/null
+++ b/UI/js/google_map.js
@@ -0,0 +1,38 @@
+// Initialize and add the map
+function initMap() {
+ // The location of Uluru
+ var uluru = {lat: -25.344, lng: 131.036};
+ // The map, centered at Uluru
+ var map = new google.maps.Map(
+ document.querySelector('#map'), {zoom: 4, center: uluru});
+ // The marker, positioned at Uluru
+ var marker = new google.maps.Marker({position: uluru, map: map});
+ }
+///Google API key for map for javascript API
+// AIzaSyBzxWs5mI9SiYypzy3jl_UOXddZqDnkfNk
+//RESTRICTED NAME
+// Map API KEY
+
+// This API key can be used in this project and with any API that supports it. To use this key in your application, pass it with the key=API_KEY parameter.
+
+// Creation date
+// Nov 11, 2018, 6:30:37 PM
+// Created by
+// obijoyce@gmail.com (you)
+
+
+// 2
+// Google Distance Matrix
+// AIzaSyCW40oxWuEacXk1GF9ViC04yUXKKejc56I
+// RESTRICTED NAME
+// MatrixMap
+
+// //
+// MailXpress
+// Project name
+
+// mailxpress-222217
+// Project ID
+
+// 857682987159
+// Project nu
\ No newline at end of file
diff --git a/UI/js/main.js b/UI/js/main.js
index cdadc25..4fdb7e2 100644
--- a/UI/js/main.js
+++ b/UI/js/main.js
@@ -1,14 +1,33 @@
-const signup = document.getElementById('signup');
-const is_exist = document.getElementById('exist');
-const modal = document.getElementById("modal");
-const auth_form = document.getElementById('auth-form');
+let accordion2 = document.getElementsByClassName("dashboard-accordion");
+for (i of accordion2) {
+ i.addEventListener("click", function () {
+ this.classList.toggle("active");
+ let panel = this.nextElementSibling;
+ if (panel.style.maxHeight){
+ panel.style.maxHeight = null;
+ } else {
+ panel.style.maxHeight = panel.scrollHeight + "px";
+ }
+ });
+}
+
+const modal = document.getElementById("modal2");
+const authForm = document.getElementById('auth-form2');
-const modalForm = (event) => {
- if (event.target === signup) {
- modal.style.display = 'block';
- auth_form.style.display = 'block';
- }
-};
-signup.addEventListener('click', modalForm);
+const modalForm = (event) => {
+ if (event.target.id === 'signup2' || event.target.id === 'signup') {
+ modal.style.display = 'block';
+ authForm.style.display = 'block';
+ }
+};
+document.querySelector('#signup2').addEventListener('click', modalForm);
+document.querySelector('#signup').addEventListener('click', modalForm);
+// const signupMain = document.querySelector('#signup');
+// signup.addEventListener('click', modalForm);
+window.onclick = (event) => {
+ if (event.target === modal || event.target.id === 'close-signup') {
+ modal.style.display = 'none';
+ }
+};
diff --git a/UI/js/place_order.js b/UI/js/place_order.js
index d102b32..101a5ec 100644
--- a/UI/js/place_order.js
+++ b/UI/js/place_order.js
@@ -1,56 +1,20 @@
-// Toggle between accordion
-const accordion = document.getElementsByClassName("accordion");
-let activeItem = -1;
-// Iterate through the element and get the clicked class
-for (let current = 0; current < accordion.length; current++) {
- accordion[current].addEventListener('click', function() {
- accordion[current].style.borderRight = "thick solid gray";
- // remove the currently displayed element
- if (current !== activeItem && activeItem !== -1) {
- accordion[activeItem].classList.remove('active');
- accordion[activeItem].style.borderRight = 'none';
- accordion[activeItem].nextElementSibling.classList.remove('panel-open');
- }
- // open the clicked item
-
- this.nextElementSibling.classList.toggle('panel-open');
- activeItem = this.classList.toggle('active') ? current : -1;
-
- // Hide the list and open when no item is active
- const displayList = document.querySelector('.display-list');
- if(current === activeItem){
- displayList.style.display = 'none';
- } else {
- displayList.style.display = 'block';
- }
- });
-}
-let accordion = document.getElementsByClassName("dashboard-accordion");
-for (i of accordion) {
- i.addEventListener("click", function () {
- this.classList.toggle("active");
- let panel = this.nextElementSibling;
- if (panel.style.maxHeight){
- panel.style.maxHeight = null;
- } else {
- panel.style.maxHeight = panel.scrollHeight + "px";
- }
- });
+
+const myFunction = () => {
+ document.getElementById("myDropdown3").classList.toggle("show3");
}
-const toggleNav = document.querySelector("#toggleNav");
-const open = document.getElementById("open");
+// Close the dropdown if the user clicks outside of it
+window.onclick = (event) => {
+ if (!event.target.matches('.dropbtn3')) {
- const switchForm = () => {
- console.log("Clickde");
- if (open.style.display === "none"){
- return open.style.display = "flex";
- }else{
- return open.style.display = "none";
+ var dropdowns = document.getElementsByClassName("dropdown-content3");
+ var i;
+ for (i = 0; i < dropdowns.length; i++) {
+ var openDropdown = dropdowns[i];
+ if (openDropdown.classList.contains('show3')) {
+ openDropdown.classList.remove('show3');
+ }
}
-
-};
-
-
-toggleNav.addEventListener('click', switchForm);
\ No newline at end of file
+ }
+}
diff --git a/UI/login.html b/UI/login.html
index a3afa4d..8b5cc48 100644
--- a/UI/login.html
+++ b/UI/login.html
@@ -3,8 +3,8 @@