diff --git a/.gitignore b/.gitignore index 3e8b050..99a817b 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,12 @@ node_modules/ -package-lock.json \ No newline at end of file +package-lock.json +package.json +app.js +weight.js +.env +.eslintrc.json +.babelrc +.nyc_output/ +coverage/ + diff --git a/UI/add_parcel.html b/UI/add_parcel.html new file mode 100644 index 0000000..1408bfd --- /dev/null +++ b/UI/add_parcel.html @@ -0,0 +1,99 @@ + + + + + + + SendIT | Add Parcel + + + + + + + + + + +
+
+
+ +
+
+ + Track A Parcel + + + +
+
+
+
+
+ +
+ +
+ +
+ +
+
+ + Add a Parcel + + + + +
+
+ + +
+
+ + +
+
+ + + + + + + + + + + + + +
+
+
+ + + + \ No newline at end of file diff --git a/UI/admin_page.html b/UI/admin_page.html index 97b3dce..7e81268 100644 --- a/UI/admin_page.html +++ b/UI/admin_page.html @@ -14,806 +14,327 @@ -
- -

Delivery Order Summary

-
October 2018
-
-

- ID: 5671GF

-

- Date: 12/3/2018

-

-

- Parcel content/Qty: 3 Pack of nylon strip -

-
-
-
-
-

- 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

+
- Status - -
+
+ +
+
+ + Track A Parcel + + + +
+
-
-
-

- ID: 6701GF

-

- Date: 5/9/2018

-

-

- Parcel content/Qty: 3 Books -

-
-
-
-
-

- 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

+
+
+
+
-
+ -
-

- ID: 5671GF

-

- Date: 12/3/2018

-

-

- Parcel content/Qty: 3 Pack of nylon strip -

-
-
-
-
-

- 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

+
- Status - -
+
Admin
+

Order Delivery Summary

+ +
+
+
S/N
+
Date
+
TrackingID
+
Parcel Content/Qty
+
Update
+
-
-
-

- ID: 5671GF

-

- Date: 12/3/2018

-

-

- Parcel content/Qty: 3 Pack of nylon strip -

-
-
-
-
-

- 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

- - Status - -
+
+

1

+

12/3/2018

+

5671GF

+

3 Packs of nylon strip

+
-
-
-

- ID: 5671GF

-

- Date: 12/3/2018

-

-

- Parcel content/Qty: 3 Pack of nylon strip -

-
-
-
-
-

- 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

+
+
+
+

+ 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 +

- Status - -
-
-
-
-

- ID: 5671GF

-

- Date: 12/3/2018

-

-

- Parcel content/Qty: 3 Pack of nylon strip -

-
-
-
-
-

- 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

- Status - -
-
-
-
-

- ID: 5671GF

-

- Date: 12/3/2018

-

-

- Parcel content/Qty: 3 Pack of nylon strip -

-
-
-
-
-

- 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

+
+
+

+ Name: + Mr JohnBull Akumaka +

+
Update Parcel
+ Present Location: + - Status - -
-
-
-
-

- ID: 5671GF

-

- Date: 12/3/2018

-

-

- Parcel content/Qty: 3 Pack of nylon strip -

-
-
-
-
-

- 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

+ Status + - Status - +
-
-
-

- ID: 5671GF

-

- Date: 12/3/2018

-

-

- Parcel content/Qty: 3 Pack of nylon strip -

-
-
-
-
-

- 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: + Mrs Eula Blessing +

+
Update Parcel
+ Present Location: + - Status - + Status + + +
-
-
-

- ID: 5671GF

-

- Date: 12/3/2018

-

-

- Parcel content/Qty: 3 Pack of nylon strip -

-
-
-
-
-

- 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: + Mr Ebube Eruka +

+
Update Parcel
+ Present Location: + - Status - + Status + + +
-
-
-

- ID: 5671GF

-

- Date: 12/3/2018

-

-

- Parcel content/Qty: 3 Pack of nylon strip -

-
-
-
-
-

- 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 @@
-
- -
- - logo -
-
-
- - cart - My Parcels
- -
-
Track A Parcel - - + +
+
+
+ Sign In +
+
@@ -68,16 +58,16 @@

Want to Send a Parcel?

- +
- +
- +
@@ -88,6 +78,9 @@
+
+ +

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

  • FROM
  • @@ -157,8 +151,8 @@

  • 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 @@ - MailXpress | Login - + SendIT | Login + @@ -15,63 +15,56 @@
-
-
- - logo - -
-
-
- - cart - My Parcels
- -
-
+
Track A Parcel - - + +
+
+
+ +
+
-

Welcome to Mail Xpress

+

Welcome to SendIT

Sign in or register with Us

Existing Customer?

-
+ Login Here - + +

Forgot Password? @@ -82,12 +75,12 @@

Sign in or register with Us

-

New to Mail Xpress?

+

New to SendIT?

Benefits of using - Mail Xpress: + SendIT:

  • @@ -97,12 +90,12 @@

    Sign in or register with Us

  • Pay online and print your own label.
- +
-