Dashboard - Booking History<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n\n body {\n background-color: #f4f6f8;\n color: black;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n padding-top: 70px; \/* Added to prevent content overlap with fixed header *\/\n }\n\n .header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 15px 20px;\n background-color: white;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n position: fixed; \/* Make header fixed *\/\n top: 0; \/* Stick to top *\/\n left: 0;\n width: 100%; \/* Full width *\/\n z-index: 1000; \/* Ensure header stays above other content *\/\n }\n\n .corner-left {\n display: flex;\n align-items: center;\n gap: 15px;\n }\n\n .corner-right {\n display: flex;\n align-items: center;\n gap: 15px;\n }\n\n .duty-btn {\n background-color: #1a73e8;\n color: white;\n border: none;\n padding: 10px 20px;\n border-radius: 20px;\n font-weight: bold;\n cursor: pointer;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n transition: all 0.3s ease;\n }\n\n .duty-btn:hover {\n background-color: #0d5bba;\n transform: translateY(-2px);\n }\n\n .icon-btn {\n background-color: #f1f5fd;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n color: #1a73e8;\n border: none;\n transition: all 0.3s ease;\n }\n\n .icon-btn:hover {\n background-color: #e4ebfa;\n transform: scale(1.1);\n }\n\n .badge {\n position: absolute;\n top: 5px;\n right: 5px;\n background-color: #ff3b30;\n color: white;\n border-radius: 50%;\n width: 18px;\n height: 18px;\n font-size: 12px;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .main-content {\n flex: 1;\n padding: 20px;\n }\n\n .booking-card {\n background: #fff;\n border-radius: 12px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n padding: 15px;\n margin-bottom: 15px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .booking-info {\n flex: 1;\n }\n\n .route {\n font-size: 18px;\n font-weight: bold;\n margin-bottom: 8px;\n }\n\n .route span {\n padding: 4px 8px;\n border-radius: 50%;\n color: #fff;\n font-size: 14px;\n margin-right: 6px;\n }\n\n .route .from { background: green; }\n .route .to { background: orange; }\n\n .details {\n font-size: 14px;\n color: #555;\n }\n\n .fare {\n font-size: 18px;\n font-weight: bold;\n color: #000;\n margin-bottom: 8px;\n text-align: right;\n }\n\n .book-btn {\n background: #007bff;\n color: white;\n border: none;\n padding: 8px 14px;\n border-radius: 6px;\n cursor: pointer;\n font-size: 14px;\n }\n\n .book-btn:hover {\n background: #0056b3;\n }\n\n .footer {\n display: flex;\n justify-content: space-around;\n align-items: center;\n padding: 15px 0;\n background-color: white;\n box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);\n position: fixed;\n bottom: 0;\n width: 100%;\n z-index: 100;\n }\n\n .footer-btn {\n display: flex;\n flex-direction: column;\n align-items: center;\n background: none;\n border: none;\n color: #5f6368;\n cursor: pointer;\n transition: all 0.3s ease;\n font-size: 14px;\n }\n\n .footer-btn i {\n font-size: 20px;\n margin-bottom: 5px;\n }\n\n .footer-btn.active {\n color: #1a73e8;\n }\n\n .footer-btn:hover {\n color: #1a73e8;\n transform: translateY(-3px);\n }\n\n .phone-off {\n position: fixed;\n bottom: 80px;\n right: 20px;\n background-color: #1a73e8;\n width: 60px;\n height: 60px;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n color: white;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);\n cursor: pointer;\n border: none;\n z-index: 100;\n transition: all 0.3s ease;\n }\n\n .phone-off:hover {\n transform: scale(1.1);\n background-color: #0d5bba;\n }\n\n .notification-container {\n position: relative;\n }\n\n \/* Menu Panel Styles *\/\n .menu-panel {\n position: fixed;\n top: 0;\n right: -300px;\n width: 300px;\n height: 100%;\n background-color: white;\n box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);\n transition: right 0.3s ease;\n z-index: 1000;\n padding: 20px;\n display: flex;\n flex-direction: column;\n }\n\n .menu-panel.open {\n right: 0;\n }\n\n .menu-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 30px;\n padding-bottom: 15px;\n border-bottom: 1px solid #eee;\n }\n\n .menu-title {\n font-size: 20px;\n font-weight: bold;\n color: #1a73e8;\n }\n\n .close-menu {\n background: none;\n border: none;\n font-size: 20px;\n cursor: pointer;\n color: #5f6368;\n }\n\n .menu-items {\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n\n .menu-item {\n display: flex;\n align-items: center;\n padding: 15px;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.3s ease;\n color: #5f6368;\n }\n\n .menu-item:hover {\n background-color: #f1f5fd;\n color: #1a73e8;\n }\n\n .menu-item i {\n margin-right: 15px;\n font-size: 18px;\n }\n\n .menu-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n display: none;\n z-index: 999;\n }\n\n .menu-overlay.open {\n display: block;\n }\n\n .logout-btn {\n margin-top: auto;\n background-color: #ff3b30;\n color: white;\n border: none;\n padding: 15px;\n border-radius: 8px;\n font-weight: bold;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 10px;\n transition: all 0.3s ease;\n }\n\n .logout-btn:hover {\n background-color: #e0352a;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"header\">\n <div class=\"corner-left\">\n <button class=\"duty-btn\"><i class=\"fas fa-power-off\"><\/i> Duty On<\/button>\n <\/div>\n <div class=\"corner-right\">\n <button class=\"icon-btn\">\n <i class=\"fas fa-question-circle\"><\/i>\n <\/button>\n <div class=\"notification-container\">\n <button class=\"icon-btn\">\n <i class=\"fas fa-bell\"><\/i>\n <\/button>\n <span class=\"badge\">3<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"main-content\">\n <h2>Booking History<\/h2>\n <div id=\"booking-history\"><\/div>\n <\/div>\n\n <button class=\"phone-off\">\n <i class=\"fas fa-phone-slash\"><\/i>\n <\/button>\n\n <div class=\"footer\">\n <button class=\"footer-btn active\">\n <i class=\"fas fa-home\"><\/i>\n <span>Home<\/span>\n <\/button>\n <button class=\"footer-btn\">\n <i class=\"fas fa-wallet\"><\/i>\n <span>Wallet<\/span>\n <\/button>\n <button class=\"footer-btn\" id=\"menuBtn\">\n <i class=\"fas fa-bars\"><\/i>\n <span>Menu<\/span>\n <\/button>\n <\/div>\n\n \n <div class=\"menu-overlay\" id=\"menuOverlay\"><\/div>\n <div class=\"menu-panel\" id=\"menuPanel\">\n <div class=\"menu-header\">\n <div class=\"menu-title\">Menu<\/div>\n <button class=\"close-menu\" id=\"closeMenu\">\n <i class=\"fas fa-times\"><\/i>\n <\/button>\n <\/div>\n <div class=\"menu-items\">\n <div class=\"menu-item\">\n <i class=\"fas fa-user\"><\/i>\n <span>Profile<\/span>\n <\/div>\n <div class=\"menu-item\">\n <i class=\"fas fa-cog\"><\/i>\n <span>Settings<\/span>\n <\/div>\n <div class=\"menu-item\">\n <i class=\"fas fa-history\"><\/i>\n <span>History<\/span>\n <\/div>\n <div class=\"menu-item\">\n <i class=\"fas fa-question-circle\"><\/i>\n <span>Help & Support<\/span>\n <\/div>\n <div class=\"menu-item\">\n <i class=\"fas fa-shield-alt\"><\/i>\n <span>Privacy Policy<\/span>\n <\/div>\n <\/div>\n <button class=\"logout-btn\" id=\"logoutBtn\">\n <i class=\"fas fa-sign-out-alt\"><\/i>\n Logout\n <\/button>\n <\/div>\n\n <script>\n \/\/ Toggle Duty On\/Off\n const dutyBtn = document.querySelector('.duty-btn');\n dutyBtn.addEventListener('click', function() {\n if (dutyBtn.innerHTML.includes('On')) {\n dutyBtn.innerHTML = '<i class=\"fas fa-power-off\"><\/i> Duty Off';\n dutyBtn.style.backgroundColor = '#ff3b30';\n } else {\n dutyBtn.innerHTML = '<i class=\"fas fa-power-off\"><\/i> Duty On';\n dutyBtn.style.backgroundColor = '#1a73e8';\n }\n });\n\n \/\/ Active state for Footer buttons\n const footerBtns = document.querySelectorAll('.footer-btn');\n footerBtns.forEach(btn => {\n btn.addEventListener('click', function() {\n footerBtns.forEach(b => b.classList.remove('active'));\n this.classList.add('active');\n });\n });\n\n \/\/ Phone Off button functionality\n const phoneOffBtn = document.querySelector('.phone-off');\n phoneOffBtn.addEventListener('click', function() {\n alert('Ending call...');\n });\n\n \/\/ Menu functionality\n const menuBtn = document.getElementById('menuBtn');\n const menuPanel = document.getElementById('menuPanel');\n const menuOverlay = document.getElementById('menuOverlay');\n const closeMenu = document.getElementById('closeMenu');\n\n menuBtn.addEventListener('click', function() {\n menuPanel.classList.add('open');\n menuOverlay.classList.add('open');\n });\n\n closeMenu.addEventListener('click', function() {\n menuPanel.classList.remove('open');\n menuOverlay.classList.remove('open');\n });\n\n menuOverlay.addEventListener('click', function() {\n menuPanel.classList.remove('open');\n menuOverlay.classList.remove('open');\n });\n\n \/\/ Logout button functionality\n const logoutBtn = document.getElementById('logoutBtn');\n logoutBtn.addEventListener('click', function() {\n window.location.href = 'login.html';\n });\n\n \/\/ Load Booking History\n function loadBookings() {\n let bookings = JSON.parse(localStorage.getItem(\"bookings\")) || [];\n let historyDiv = document.getElementById(\"booking-history\");\n historyDiv.innerHTML = \"\";\n\n if (bookings.length === 0) {\n historyDiv.innerHTML = \"<p>No bookings yet.<\/p>\";\n return;\n }\n\n bookings.forEach((booking, index) => {\n historyDiv.innerHTML += `\n <div class=\"booking-card\">\n <div class=\"booking-info\">\n <div class=\"route\">\n <span class=\"from\">1<\/span> ${booking.loading} \n <span class=\"to\">2<\/span> ${booking.unloading}\n <\/div>\n <div class=\"details\">\n ${booking.weight} kg | ${booking.bodyType}\n <\/div>\n <\/div>\n <div>\n <div class=\"fare\">\u20b9${booking.fare}<\/div>\n <button class=\"book-btn\">Book truck<\/button>\n <\/div>\n <\/div>\n `;\n });\n }\n\n window.onload = loadBookings;\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Dashboard – Booking History Duty On 3 Booking History Home Wallet Menu Menu Profile Settings History Help & Support Privacy […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-884","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/truck.ctaindiaload.in\/index.php?rest_route=\/wp\/v2\/pages\/884","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/truck.ctaindiaload.in\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/truck.ctaindiaload.in\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/truck.ctaindiaload.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/truck.ctaindiaload.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=884"}],"version-history":[{"count":4,"href":"https:\/\/truck.ctaindiaload.in\/index.php?rest_route=\/wp\/v2\/pages\/884\/revisions"}],"predecessor-version":[{"id":888,"href":"https:\/\/truck.ctaindiaload.in\/index.php?rest_route=\/wp\/v2\/pages\/884\/revisions\/888"}],"wp:attachment":[{"href":"https:\/\/truck.ctaindiaload.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=884"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Dashboard - Booking History<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n }\n\n body {\n background-color: #f4f6f8;\n color: black;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n padding-top: 70px; \/* Added to prevent content overlap with fixed header *\/\n }\n\n .header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 15px 20px;\n background-color: white;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n position: fixed; \/* Make header fixed *\/\n top: 0; \/* Stick to top *\/\n left: 0;\n width: 100%; \/* Full width *\/\n z-index: 1000; \/* Ensure header stays above other content *\/\n }\n\n .corner-left {\n display: flex;\n align-items: center;\n gap: 15px;\n }\n\n .corner-right {\n display: flex;\n align-items: center;\n gap: 15px;\n }\n\n .duty-btn {\n background-color: #1a73e8;\n color: white;\n border: none;\n padding: 10px 20px;\n border-radius: 20px;\n font-weight: bold;\n cursor: pointer;\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n transition: all 0.3s ease;\n }\n\n .duty-btn:hover {\n background-color: #0d5bba;\n transform: translateY(-2px);\n }\n\n .icon-btn {\n background-color: #f1f5fd;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n color: #1a73e8;\n border: none;\n transition: all 0.3s ease;\n }\n\n .icon-btn:hover {\n background-color: #e4ebfa;\n transform: scale(1.1);\n }\n\n .badge {\n position: absolute;\n top: 5px;\n right: 5px;\n background-color: #ff3b30;\n color: white;\n border-radius: 50%;\n width: 18px;\n height: 18px;\n font-size: 12px;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n .main-content {\n flex: 1;\n padding: 20px;\n }\n\n .booking-card {\n background: #fff;\n border-radius: 12px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n padding: 15px;\n margin-bottom: 15px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .booking-info {\n flex: 1;\n }\n\n .route {\n font-size: 18px;\n font-weight: bold;\n margin-bottom: 8px;\n }\n\n .route span {\n padding: 4px 8px;\n border-radius: 50%;\n color: #fff;\n font-size: 14px;\n margin-right: 6px;\n }\n\n .route .from { background: green; }\n .route .to { background: orange; }\n\n .details {\n font-size: 14px;\n color: #555;\n }\n\n .fare {\n font-size: 18px;\n font-weight: bold;\n color: #000;\n margin-bottom: 8px;\n text-align: right;\n }\n\n .book-btn {\n background: #007bff;\n color: white;\n border: none;\n padding: 8px 14px;\n border-radius: 6px;\n cursor: pointer;\n font-size: 14px;\n }\n\n .book-btn:hover {\n background: #0056b3;\n }\n\n .footer {\n display: flex;\n justify-content: space-around;\n align-items: center;\n padding: 15px 0;\n background-color: white;\n box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);\n position: fixed;\n bottom: 0;\n width: 100%;\n z-index: 100;\n }\n\n .footer-btn {\n display: flex;\n flex-direction: column;\n align-items: center;\n background: none;\n border: none;\n color: #5f6368;\n cursor: pointer;\n transition: all 0.3s ease;\n font-size: 14px;\n }\n\n .footer-btn i {\n font-size: 20px;\n margin-bottom: 5px;\n }\n\n .footer-btn.active {\n color: #1a73e8;\n }\n\n .footer-btn:hover {\n color: #1a73e8;\n transform: translateY(-3px);\n }\n\n .phone-off {\n position: fixed;\n bottom: 80px;\n right: 20px;\n background-color: #1a73e8;\n width: 60px;\n height: 60px;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n color: white;\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);\n cursor: pointer;\n border: none;\n z-index: 100;\n transition: all 0.3s ease;\n }\n\n .phone-off:hover {\n transform: scale(1.1);\n background-color: #0d5bba;\n }\n\n .notification-container {\n position: relative;\n }\n\n \/* Menu Panel Styles *\/\n .menu-panel {\n position: fixed;\n top: 0;\n right: -300px;\n width: 300px;\n height: 100%;\n background-color: white;\n box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);\n transition: right 0.3s ease;\n z-index: 1000;\n padding: 20px;\n display: flex;\n flex-direction: column;\n }\n\n .menu-panel.open {\n right: 0;\n }\n\n .menu-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 30px;\n padding-bottom: 15px;\n border-bottom: 1px solid #eee;\n }\n\n .menu-title {\n font-size: 20px;\n font-weight: bold;\n color: #1a73e8;\n }\n\n .close-menu {\n background: none;\n border: none;\n font-size: 20px;\n cursor: pointer;\n color: #5f6368;\n }\n\n .menu-items {\n display: flex;\n flex-direction: column;\n gap: 10px;\n }\n\n .menu-item {\n display: flex;\n align-items: center;\n padding: 15px;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.3s ease;\n color: #5f6368;\n }\n\n .menu-item:hover {\n background-color: #f1f5fd;\n color: #1a73e8;\n }\n\n .menu-item i {\n margin-right: 15px;\n font-size: 18px;\n }\n\n .menu-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n display: none;\n z-index: 999;\n }\n\n .menu-overlay.open {\n display: block;\n }\n\n .logout-btn {\n margin-top: auto;\n background-color: #ff3b30;\n color: white;\n border: none;\n padding: 15px;\n border-radius: 8px;\n font-weight: bold;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 10px;\n transition: all 0.3s ease;\n }\n\n .logout-btn:hover {\n background-color: #e0352a;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"header\">\n <div class=\"corner-left\">\n <button class=\"duty-btn\"><i class=\"fas fa-power-off\"><\/i> Duty On<\/button>\n <\/div>\n <div class=\"corner-right\">\n <button class=\"icon-btn\">\n <i class=\"fas fa-question-circle\"><\/i>\n <\/button>\n <div class=\"notification-container\">\n <button class=\"icon-btn\">\n <i class=\"fas fa-bell\"><\/i>\n <\/button>\n <span class=\"badge\">3<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"main-content\">\n <h2>Booking History<\/h2>\n <div id=\"booking-history\"><\/div>\n <\/div>\n\n <button class=\"phone-off\">\n <i class=\"fas fa-phone-slash\"><\/i>\n <\/button>\n\n <div class=\"footer\">\n <button class=\"footer-btn active\">\n <i class=\"fas fa-home\"><\/i>\n <span>Home<\/span>\n <\/button>\n <button class=\"footer-btn\">\n <i class=\"fas fa-wallet\"><\/i>\n <span>Wallet<\/span>\n <\/button>\n <button class=\"footer-btn\" id=\"menuBtn\">\n <i class=\"fas fa-bars\"><\/i>\n <span>Menu<\/span>\n <\/button>\n <\/div>\n\n \n <div class=\"menu-overlay\" id=\"menuOverlay\"><\/div>\n <div class=\"menu-panel\" id=\"menuPanel\">\n <div class=\"menu-header\">\n <div class=\"menu-title\">Menu<\/div>\n <button class=\"close-menu\" id=\"closeMenu\">\n <i class=\"fas fa-times\"><\/i>\n <\/button>\n <\/div>\n <div class=\"menu-items\">\n <div class=\"menu-item\">\n <i class=\"fas fa-user\"><\/i>\n <span>Profile<\/span>\n <\/div>\n <div class=\"menu-item\">\n <i class=\"fas fa-cog\"><\/i>\n <span>Settings<\/span>\n <\/div>\n <div class=\"menu-item\">\n <i class=\"fas fa-history\"><\/i>\n <span>History<\/span>\n <\/div>\n <div class=\"menu-item\">\n <i class=\"fas fa-question-circle\"><\/i>\n <span>Help & Support<\/span>\n <\/div>\n <div class=\"menu-item\">\n <i class=\"fas fa-shield-alt\"><\/i>\n <span>Privacy Policy<\/span>\n <\/div>\n <\/div>\n <button class=\"logout-btn\" id=\"logoutBtn\">\n <i class=\"fas fa-sign-out-alt\"><\/i>\n Logout\n <\/button>\n <\/div>\n\n <script>\n \/\/ Toggle Duty On\/Off\n const dutyBtn = document.querySelector('.duty-btn');\n dutyBtn.addEventListener('click', function() {\n if (dutyBtn.innerHTML.includes('On')) {\n dutyBtn.innerHTML = '<i class=\"fas fa-power-off\"><\/i> Duty Off';\n dutyBtn.style.backgroundColor = '#ff3b30';\n } else {\n dutyBtn.innerHTML = '<i class=\"fas fa-power-off\"><\/i> Duty On';\n dutyBtn.style.backgroundColor = '#1a73e8';\n }\n });\n\n \/\/ Active state for Footer buttons\n const footerBtns = document.querySelectorAll('.footer-btn');\n footerBtns.forEach(btn => {\n btn.addEventListener('click', function() {\n footerBtns.forEach(b => b.classList.remove('active'));\n this.classList.add('active');\n });\n });\n\n \/\/ Phone Off button functionality\n const phoneOffBtn = document.querySelector('.phone-off');\n phoneOffBtn.addEventListener('click', function() {\n alert('Ending call...');\n });\n\n \/\/ Menu functionality\n const menuBtn = document.getElementById('menuBtn');\n const menuPanel = document.getElementById('menuPanel');\n const menuOverlay = document.getElementById('menuOverlay');\n const closeMenu = document.getElementById('closeMenu');\n\n menuBtn.addEventListener('click', function() {\n menuPanel.classList.add('open');\n menuOverlay.classList.add('open');\n });\n\n closeMenu.addEventListener('click', function() {\n menuPanel.classList.remove('open');\n menuOverlay.classList.remove('open');\n });\n\n menuOverlay.addEventListener('click', function() {\n menuPanel.classList.remove('open');\n menuOverlay.classList.remove('open');\n });\n\n \/\/ Logout button functionality\n const logoutBtn = document.getElementById('logoutBtn');\n logoutBtn.addEventListener('click', function() {\n window.location.href = 'login.html';\n });\n\n \/\/ Load Booking History\n function loadBookings() {\n let bookings = JSON.parse(localStorage.getItem(\"bookings\")) || [];\n let historyDiv = document.getElementById(\"booking-history\");\n historyDiv.innerHTML = \"\";\n\n if (bookings.length === 0) {\n historyDiv.innerHTML = \"<p>No bookings yet.<\/p>\";\n return;\n }\n\n bookings.forEach((booking, index) => {\n historyDiv.innerHTML += `\n <div class=\"booking-card\">\n <div class=\"booking-info\">\n <div class=\"route\">\n <span class=\"from\">1<\/span> ${booking.loading} \n <span class=\"to\">2<\/span> ${booking.unloading}\n <\/div>\n <div class=\"details\">\n ${booking.weight} kg | ${booking.bodyType}\n <\/div>\n <\/div>\n <div>\n <div class=\"fare\">\u20b9${booking.fare}<\/div>\n <button class=\"book-btn\">Book truck<\/button>\n <\/div>\n <\/div>\n `;\n });\n }\n\n window.onload = loadBookings;\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Dashboard – Booking History Duty On 3 Booking History Home Wallet Menu Menu Profile Settings History Help & Support Privacy […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-884","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/truck.ctaindiaload.in\/index.php?rest_route=\/wp\/v2\/pages\/884","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/truck.ctaindiaload.in\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/truck.ctaindiaload.in\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/truck.ctaindiaload.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/truck.ctaindiaload.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=884"}],"version-history":[{"count":4,"href":"https:\/\/truck.ctaindiaload.in\/index.php?rest_route=\/wp\/v2\/pages\/884\/revisions"}],"predecessor-version":[{"id":888,"href":"https:\/\/truck.ctaindiaload.in\/index.php?rest_route=\/wp\/v2\/pages\/884\/revisions\/888"}],"wp:attachment":[{"href":"https:\/\/truck.ctaindiaload.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=884"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}