Merge pull request #85 from DasunThathsara/dasun

Update driver dashboard

app/views/driver/index.php

@@ -77,7 +77,13 @@
 <main class="page-container">
     <section class="section" id="main">
         <div class="container">
-            <h1>Driver Dashboard</h1>
+            <div class="search">
+                <input type="text" placeholder="Search">
+            </div>
+            <div class="map">
+                <img src="<?php echo URLROOT ?>/images/location.png" alt="">
+                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4231.666368350934!2d79.86014226253688!3d6.902790088271364!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3ae259100761b8f3%3A0x78f0a33054ea929b!2sIndependence%20Square%20Parking%20Lot!5e0!3m2!1sen!2slk!4v1697709991816!5m2!1sen!2slk" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+            </div>
         </div>
     </section>
 </main>

public/css/components/sidenavbar.css

@@ -7,10 +7,17 @@
     height: 100vh;
     width: 250px;
     box-shadow: 0 0 20px 0.1px rgba(0, 0, 0, 0.49);
-    left: -270px; /* Move the sidebar off-screen to the left initially */
+    left: 0;
     transition: left 0.5s ease-in;
 }
 
+@media screen and (max-width: 700px){
+    .sidenav{
+        left: -270px;
+        transition: left 0.5s ease-in;
+    }
+}
+
 .sidenav-toggled{
     left: 0;
 }

public/css/driver.css

@@ -0,0 +1,145 @@
+/* ----------------- Driver Dashboard Styles ---------------- */
+.page-container .section .container .map{
+    margin-right: 20px;
+    margin-left: 270px;
+    margin-top: 30px;
+    border-radius: 20px;
+    box-shadow: 0 0 15px 0.1px rgba(0, 0, 0, 0.10);
+    height: 70vh;
+    transition: 0.5s;
+}
+
+.page-container .section .container .map:hover{
+    box-shadow: 0 0 15px 0.1px rgba(0, 0, 0, 0.2);
+    transition: 0.5s;
+}
+
+.page-container .section .container .search{
+    margin-left: 270px;
+    margin-right: 20px;
+    margin-top: 30px;
+    border-radius: 20px;
+}
+
+.page-container .section .container .search input{
+    height: 50px;
+    border-radius: 20px;
+    transition: 0.5s;
+}
+
+.page-container .section .container .search input:hover{
+    border-radius: 20px;
+    box-shadow: 0 0 15px 0.1px rgba(0, 0, 0, 0.15);
+    scale: 1.03;
+}
+
+.page-container .section .container .search input:focus{
+    border-radius: 20px;
+    box-shadow: 0 0 15px 0.1px rgba(0, 0, 0, 0.15);
+    scale: 1.03;
+}
+
+.page-container .section .container .map iframe{
+    width: 100%;
+    height: 100%;
+    border-radius: 20px;
+}
+
+.page-container .section .container .map img{
+    width: 40px;
+    top: 348px;
+    left: 361px;
+    position: absolute;
+}
+
+@media screen and (max-width: 700px){
+    .page-container .section .container .search{
+        width: 93%;
+        margin-left: 20px;
+        transition: left 0.5s ease-in;
+    }
+
+    .page-container .section .container .map{
+        margin-left: 20px;
+        transition: left 0.5s ease-in;
+    }
+}
+
+/* ----------------- Driver Vehicle Styles ---------------- */
+.page-container .section .container .emptyVehicle{
+    margin-top: 100px;
+    margin-left: 50px;
+    margin-right: 50px;
+    background-color: rgba(253, 198, 62, 0.07);
+    border: 2px dotted rgba(253, 198, 62, 0.24);
+    text-align: center;
+    border-radius: 20px;
+    padding-top: 50px;
+    padding-bottom: 50px;
+    color: rgba(140, 140, 140, 0.87);
+    font-size: 20px;
+}
+
+.page-container .section .container .table-container{
+    margin-left: 5vw;
+    margin-right: 5vw;
+}
+
+.page-container .section .container .table{
+    margin-top: 50px;
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 20px;
+    border-radius: 50px;
+}
+
+.page-container .section .container a{
+    text-decoration: none;
+    background-color: #fdc63e;
+    width: 100%;
+    color: #000000;
+    padding: 12px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: 0.3s;
+    margin-left: 5vw;
+}
+
+.page-container .section .container .sub-option {
+    text-decoration: none;
+    background-color: #fdc63e;
+    width: 100%;
+    color: #000000;
+    padding: 5px 10px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: 0.3s;
+    margin-left: 2px;
+}
+
+.page-container .section .container a:hover{
+    background-color: #ffc400;
+    box-shadow: 0 0 10px 0.1px rgba(0, 0, 0, 0.20);
+}
+
+.page-container .section .container th{
+    background-color: #fccc04;
+    text-align: left;
+    padding: 10px;
+    border: 1px solid #ffffff;
+}
+
+.page-container .section .container tr{
+    background-color: #fff;
+}
+
+.page-container .section .container tr:nth-child(even){
+    background-color: rgba(252, 204, 4, 0.16);
+}
+
+.page-container .section .container td{
+    padding: 10px;
+    border: 1px solid #ffffff;
+}