{"id":61,"date":"2025-09-09T19:39:35","date_gmt":"2025-09-09T19:39:35","guid":{"rendered":"https:\/\/truck.ctaindiaload.in\/?page_id=61"},"modified":"2025-09-16T15:41:40","modified_gmt":"2025-09-16T15:41:40","slug":"vehicle-type-select","status":"publish","type":"page","link":"https:\/\/truck.ctaindiaload.in\/?page_id=61","title":{"rendered":"Vehicle Type Select"},"content":{"rendered":"\t\t
\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 Select Vehicle<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n max-width: 350px;\n margin: 0 auto;\n padding: 15px;\n background-color: #f9f9f9;\n text-align: center;\n }\n .container {\n background: #fff;\n padding: 15px;\n border-radius: 10px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);\n }\n .header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 15px;\n }\n .title {\n font-size: 18px;\n color: #333;\n font-weight: bold;\n }\n .progress {\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background-color: #e0e0e0;\n position: relative;\n }\n .progress::after {\n content: '';\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: #9c27b0;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n .menu-dots {\n font-size: 20px;\n color: #ccc;\n }\n .vehicle-options {\n display: flex;\n flex-direction: column;\n gap: 10px;\n margin-bottom: 20px;\n }\n .vehicle-card {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 10px;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n background-color: #f9f9f9;\n transition: all 0.3s ease;\n font-size: 14px;\n }\n .vehicle-card:hover {\n border-color: #ff5722;\n box-shadow: 0 3px 6px rgba(255, 87, 34, 0.2);\n }\n .vehicle-card.selected {\n border-color: #ff5722;\n background-color: #ffebee;\n box-shadow: 0 3px 6px rgba(255, 87, 34, 0.2);\n }\n .vehicle-name {\n color: #333;\n }\n .vehicle-radio {\n width: 18px;\n height: 18px;\n border: 2px solid #ccc;\n border-radius: 50%;\n background-color: #fff;\n cursor: pointer;\n position: relative;\n }\n input[type=\"radio\"] {\n display: none;\n }\n input[type=\"radio\"]:checked + .vehicle-radio {\n background-color: #ff5722;\n border-color: #ff5722;\n }\n input[type=\"radio\"]:checked + .vehicle-radio::after {\n content: '';\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background-color: #fff;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n .next-btn {\n width: 100%;\n padding: 10px;\n font-size: 16px;\n color: #fff;\n background-color: #ff5722;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n box-shadow: 0 4px 8px rgba(255, 87, 34, 0.2);\n transition: background-color 0.3s ease, box-shadow 0.3s ease;\n }\n .next-btn:hover {\n background-color: #e64a19;\n box-shadow: 0 6px 12px rgba(230, 74, 25, 0.3);\n }\n .next-btn:disabled {\n background-color: #ccc;\n cursor: not-allowed;\n box-shadow: none;\n }\n <\/style>\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n const cards = document.querySelectorAll('.vehicle-card');\n const radioButtons = document.querySelectorAll('input[name=\"vehicle\"]');\n const nextBtn = document.querySelector('.next-btn');\n\n cards.forEach((card, index) => {\n card.addEventListener('click', () => {\n radioButtons.forEach(r => r.checked = false);\n radioButtons[index].checked = true;\n cards.forEach(c => c.classList.remove('selected'));\n card.classList.add('selected');\n nextBtn.disabled = false;\n });\n });\n\n nextBtn.addEventListener('click', () => {\n const selectedVehicle = document.querySelector('input[name=\"vehicle\"]:checked');\n if (selectedVehicle) {\n window.location.href = 'city-select.html';\n } else {\n alert('Please select a vehicle!');\n }\n });\n\n nextBtn.disabled = true;\n });\n <\/script>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <div class=\"title\">Select vehicle<\/div>\n <div class=\"progress\"><\/div>\n <div class=\"menu-dots\">\u22ee\u22ee\u22ee<\/div>\n <\/div>\n <form>\n <div class=\"vehicle-options\">\n <label class=\"vehicle-card\">\n <div class=\"vehicle-name\">Tata Ace<\/div>\n <input type=\"radio\" name=\"vehicle\" value=\"tata-ace\">\n <div class=\"vehicle-radio\"><\/div>\n <\/label>\n <label class=\"vehicle-card\">\n <div class=\"vehicle-name\">8\/9\/10ft Pickup<\/div>\n <input type=\"radio\" name=\"vehicle\" value=\"8-9-10ft-pickup\">\n <div class=\"vehicle-radio\"><\/div>\n <\/label>\n <label class=\"vehicle-card\">\n <div class=\"vehicle-name\">Tata 407<\/div>\n <input type=\"radio\" name=\"vehicle\" value=\"tata-407\">\n <div class=\"vehicle-radio\"><\/div>\n <\/label>\n <label class=\"vehicle-card\">\n <div class=\"vehicle-name\">14ft<\/div>\n <input type=\"radio\" name=\"vehicle\" value=\"14ft\">\n <div class=\"vehicle-radio\"><\/div>\n <\/label>\n <\/div>\n <button type=\"button\" class=\"next-btn\" disabled>Next<\/button>\n <\/form>\n <\/div>\n<\/body>\n<\/script>\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>Select Vehicle Select vehicle \u22ee\u22ee\u22ee Tata Ace 8\/9\/10ft Pickup Tata 407 14ft Next<\/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-61","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/truck.ctaindiaload.in\/index.php?rest_route=\/wp\/v2\/pages\/61","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=61"}],"version-history":[{"count":25,"href":"https:\/\/truck.ctaindiaload.in\/index.php?rest_route=\/wp\/v2\/pages\/61\/revisions"}],"predecessor-version":[{"id":622,"href":"https:\/\/truck.ctaindiaload.in\/index.php?rest_route=\/wp\/v2\/pages\/61\/revisions\/622"}],"wp:attachment":[{"href":"https:\/\/truck.ctaindiaload.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=61"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}