{"id":66,"date":"2025-09-09T19:40:19","date_gmt":"2025-09-09T19:40:19","guid":{"rendered":"https:\/\/truck.ctaindiaload.in\/?page_id=66"},"modified":"2025-09-12T18:57:49","modified_gmt":"2025-09-12T18:57:49","slug":"city-select","status":"publish","type":"page","link":"https:\/\/truck.ctaindiaload.in\/?page_id=66","title":{"rendered":"City 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 City<\/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: 8px;\n box-shadow: 0 2px 6px 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: 16px;\n color: #333;\n font-weight: bold;\n }\n .progress {\n width: 16px;\n height: 16px;\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: 18px;\n color: #ccc;\n }\n .city-options {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 10px;\n margin-bottom: 20px;\n max-height: 300px;\n overflow-y: auto;\n }\n .city-card {\n display: flex;\n flex-direction: column;\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 min-height: 60px;\n justify-content: center;\n }\n .city-card:hover {\n border-color: #ff5722;\n box-shadow: 0 2px 4px rgba(255, 87, 34, 0.2);\n }\n .city-card.selected {\n border-color: #ff5722;\n background-color: #ffebee;\n box-shadow: 0 2px 4px rgba(255, 87, 34, 0.2);\n }\n .city-name {\n font-size: 13px;\n color: #333;\n margin-bottom: 8px;\n }\n .city-radio {\n width: 16px;\n height: 16px;\n border: 2px solid #ccc;\n border-radius: 50%;\n background-color: #fff;\n cursor: pointer;\n transition: all 0.3s ease;\n }\n .city-radio:checked {\n background-color: #ff5722;\n border-color: #ff5722;\n }\n .city-radio:checked::after {\n content: '';\n width: 6px;\n height: 6px;\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: 14px;\n color: #fff;\n background-color: #ff5722;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n box-shadow: 0 2px 4px 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 4px 8px 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('.city-card');\n const radioButtons = document.querySelectorAll('input[name=\"city\"]');\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 selectedCity = document.querySelector('input[name=\"city\"]:checked');\n if (selectedCity) {\n window.location.href = 'aadhaar-update.html';\n } else {\n alert('Please select a city!');\n }\n });\n\n \/\/ Initially disable next button\n nextBtn.disabled = true;\n });\n <\/script>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <div class=\"title\">Select City<\/div>\n <div class=\"progress\"><\/div>\n <div class=\"menu-dots\">\u22ee\u22ee\u22ee<\/div>\n <\/div>\n <form>\n <div class=\"city-options\">\n <label class=\"city-card\">\n <div class=\"city-name\">Mumbai<\/div>\n <input type=\"radio\" name=\"city\" value=\"mumbai\" style=\"position: relative; z-index: 1;\">\n <div class=\"city-radio\"><\/div>\n <\/label>\n <label class=\"city-card\">\n <div class=\"city-name\">Maharashtra<\/div>\n <input type=\"radio\" name=\"city\" value=\"maharashtra\" style=\"position: relative; z-index: 1;\">\n <div class=\"city-radio\"><\/div>\n <\/label>\n <label class=\"city-card\">\n <div class=\"city-name\">Gujarat<\/div>\n <input type=\"radio\" name=\"city\" value=\"gujarat\" style=\"position: relative; z-index: 1;\">\n <div class=\"city-radio\"><\/div>\n <\/label>\n <label class=\"city-card\">\n <div class=\"city-name\">Rajasthan<\/div>\n <input type=\"radio\" name=\"city\" value=\"rajasthan\" style=\"position: relative; z-index: 1;\">\n <div class=\"city-radio\"><\/div>\n <\/label>\n <label class=\"city-card\">\n <div class=\"city-name\">Madhya Pradesh<\/div>\n <input type=\"radio\" name=\"city\" value=\"madhya-pradesh\" style=\"position: relative; z-index: 1;\">\n <div class=\"city-radio\"><\/div>\n <\/label>\n <label class=\"city-card\">\n <div class=\"city-name\">Telangana<\/div>\n <input type=\"radio\" name=\"city\" value=\"telangana\" style=\"position: relative; z-index: 1;\">\n <div class=\"city-radio\"><\/div>\n <\/label>\n <label class=\"city-card\">\n <div class=\"city-name\">Chhattisgarh<\/div>\n <input type=\"radio\" name=\"city\" value=\"chhattisgarh\" style=\"position: relative; z-index: 1;\">\n <div class=\"city-radio\"><\/div>\n <\/label>\n <label class=\"city-card\">\n <div class=\"city-name\">Karnataka<\/div>\n <input type=\"radio\" name=\"city\" value=\"karnataka\" style=\"position: relative; z-index: 1;\">\n <div class=\"city-radio\"><\/div>\n <\/label>\n <label class=\"city-card\">\n <div class=\"city-name\">Tamil Nadu<\/div>\n <input type=\"radio\" name=\"city\" value=\"tamil-nadu\" style=\"position: relative; z-index: 1;\">\n <div class=\"city-radio\"><\/div>\n <\/label>\n <label class=\"city-card\">\n <div class=\"city-name\">Kochi<\/div>\n <input type=\"radio\" name=\"city\" value=\"kochi\" style=\"position: relative; z-index: 1;\">\n <div class=\"city-radio\"><\/div>\n <\/label>\n <label class=\"city-card\">\n <div class=\"city-name\">Goa<\/div>\n <input type=\"radio\" name=\"city\" value=\"goa\" style=\"position: relative; z-index: 1;\">\n <div class=\"city-radio\"><\/div>\n <\/label>\n <label class=\"city-card\">\n <div class=\"city-name\">Odisha<\/div>\n <input type=\"radio\" name=\"city\" value=\"odisha\" style=\"position: relative; z-index: 1;\">\n <div class=\"city-radio\"><\/div>\n <\/label>\n <label class=\"city-card\">\n <div class=\"city-name\">Jharkhand<\/div>\n <input type=\"radio\" name=\"city\" value=\"jharkhand\" style=\"position: relative; z-index: 1;\">\n <div class=\"city-radio\"><\/div>\n <\/label>\n <label class=\"city-card\">\n <div class=\"city-name\">West Bengal<\/div>\n <input type=\"radio\" name=\"city\" value=\"west-bengal\" style=\"position: relative; z-index: 1;\">\n <div class=\"city-radio\"><\/div>\n <\/label>\n <label class=\"city-card\">\n <div class=\"city-name\">Bihar<\/div>\n <input type=\"radio\" name=\"city\" value=\"bihar\" style=\"position: relative; z-index: 1;\">\n <div class=\"city-radio\"><\/div>\n <\/label>\n <label class=\"city-card\">\n <div class=\"city-name\">Assam<\/div>\n <input type=\"radio\" name=\"city\" value=\"assam\" style=\"position: relative; z-index: 1;\">\n <div class=\"city-radio\"><\/div>\n <\/label>\n <label class=\"city-card\">\n <div class=\"city-name\">Uttar Pradesh<\/div>\n <input type=\"radio\" name=\"city\" value=\"uttar-pradesh\" style=\"position: relative; z-index: 1;\">\n <div class=\"city-radio\"><\/div>\n <\/label>\n <label class=\"city-card\">\n <div class=\"city-name\">Delhi<\/div>\n <input type=\"radio\" name=\"city\" value=\"delhi\" style=\"position: relative; z-index: 1;\">\n <div class=\"city-radio\"><\/div>\n <\/label>\n <label class=\"city-card\">\n <div class=\"city-name\">Punjab<\/div>\n <input type=\"radio\" name=\"city\" value=\"punjab\" style=\"position: relative; z-index: 1;\">\n <div class=\"city-radio\"><\/div>\n <\/label>\n <label class=\"city-card\">\n <div class=\"city-name\">Haryana<\/div>\n <input type=\"radio\" name=\"city\" value=\"haryana\" style=\"position: relative; z-index: 1;\">\n <div class=\"city-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 \/\/ \/\/ \u092a\u094d\u0930\u0924\u094d\u092f\u0947\u0915 \u092a\u0947\u091c\u091a\u094d\u092f\u093e \u0936\u0947\u0935\u091f\u0940 (Next \u092c\u091f\u0923\u0935\u0930)\ndocument.querySelector('.next-btn').addEventListener('click', () => {\n localStorage.setItem('onboarded', 'true'); \/\/ \u092a\u094d\u0930\u0917\u0924\u0940 \u0905\u092a\u0921\u0947\u091f\n \/\/ \u0907\u0924\u0930 \u0932\u0949\u091c\u093f\u0915...\n});\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 City Select City \u22ee\u22ee\u22ee Mumbai Maharashtra Gujarat Rajasthan Madhya Pradesh Telangana Chhattisgarh Karnataka Tamil Nadu Kochi Goa Odisha Jharkhand […]<\/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-66","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/truck.ctaindiaload.in\/index.php?rest_route=\/wp\/v2\/pages\/66","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=66"}],"version-history":[{"count":19,"href":"https:\/\/truck.ctaindiaload.in\/index.php?rest_route=\/wp\/v2\/pages\/66\/revisions"}],"predecessor-version":[{"id":493,"href":"https:\/\/truck.ctaindiaload.in\/index.php?rest_route=\/wp\/v2\/pages\/66\/revisions\/493"}],"wp:attachment":[{"href":"https:\/\/truck.ctaindiaload.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=66"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}