PAN Update<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n max-width: 400px;\n margin: 0 auto;\n padding: 20px;\n background-color: #f9f9f9;\n text-align: center;\n }\n .container {\n background: #fff;\n padding: 20px;\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: 20px;\n }\n .title {\n font-size: 20px;\n color: #333;\n font-weight: bold;\n }\n .progress {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background-color: #e0e0e0;\n position: relative;\n }\n .progress::after {\n content: '';\n width: 10px;\n height: 10px;\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: 24px;\n color: #ccc;\n }\n .form-group {\n margin-bottom: 20px;\n }\n label {\n display: block;\n font-size: 16px;\n color: #333;\n margin-bottom: 10px;\n }\n input[type=\"file\"], input[type=\"text\"], input[type=\"number\"] {\n width: 100%;\n padding: 12px;\n font-size: 16px;\n border: 1px solid #ccc;\n border-radius: 5px;\n box-sizing: border-box;\n }\n .upload-area {\n border: 2px dashed #ccc;\n border-radius: 8px;\n padding: 40px 20px;\n text-align: center;\n cursor: pointer;\n transition: all 0.3s ease;\n }\n .upload-area:hover {\n border-color: #ff5722;\n background-color: #ffebee;\n }\n .upload-text {\n color: #666;\n margin-bottom: 10px;\n }\n .preview {\n max-width: 100%;\n border-radius: 8px;\n margin-top: 10px;\n display: none;\n }\n .next-btn {\n width: 100%;\n padding: 12px;\n font-size: 18px;\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 .terms {\n font-size: 12px;\n color: #757575;\n margin-top: 10px;\n }\n .terms a {\n color: #2196f3;\n text-decoration: none;\n }\n .terms a:hover {\n text-decoration: underline;\n }\n <\/style>\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n const photoInput = document.querySelector('input[type=\"file\"]');\n const panNumber = document.querySelector('input[type=\"text\"]');\n const panName = document.querySelector('input[type=\"text\"]#pan_name');\n const nextBtn = document.querySelector('.next-btn');\n const uploadArea = document.querySelector('.upload-area');\n const preview = document.createElement('img');\n preview.className = 'preview';\n uploadArea.appendChild(preview);\n\n \/\/ Enable Next button when all fields are filled\n function validateForm() {\n const hasPhoto = photoInput.files.length > 0;\n const hasPan = panNumber.value.length === 10 && \/^[A-Z]{5}[0-9]{4}[A-Z]$\/.test(panNumber.value);\n const hasName = panName.value.trim() !== '';\n nextBtn.disabled = !(hasPhoto && hasPan && hasName);\n }\n\n \/\/ Upload area click to trigger file input\n uploadArea.addEventListener('click', () => photoInput.click());\n\n \/\/ Photo preview\n photoInput.addEventListener('change', (e) => {\n const file = e.target.files[0];\n if (file) {\n const reader = new FileReader();\n reader.onload = (event) => {\n preview.src = event.target.result;\n preview.style.display = 'block';\n };\n reader.readAsDataURL(file);\n if (file.size > 5 * 1024 * 1024) {\n alert('File size must be less than 5MB!');\n photoInput.value = '';\n preview.style.display = 'none';\n }\n }\n validateForm();\n });\n\n \/\/ PAN number validation (10 chars: 5 letters, 4 numbers, 1 letter)\n panNumber.addEventListener('input', (e) => {\n let value = e.target.value.toUpperCase().replace(\/[^A-Z0-9]\/g, '').slice(0, 10);\n e.target.value = value;\n validateForm();\n });\n\n \/\/ Name validation\n panName.addEventListener('input', validateForm);\n\n \/\/ Next button click\n nextBtn.addEventListener('click', () => {\n if (!nextBtn.disabled) {\n window.location.href = 'rc-update.html';\n } else {\n alert('Please upload PAN photo and enter valid details!');\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\">PAN Update<\/div>\n <div class=\"progress\"><\/div>\n <div class=\"menu-dots\">\u22ee\u22ee\u22ee<\/div>\n <\/div>\n <form enctype=\"multipart\/form-data\">\n <div class=\"form-group\">\n <label for=\"pan_photo\">Upload PAN Card Photo<\/label>\n <div class=\"upload-area\">\n <div class=\"upload-text\">Click to upload PAN photo (JPG\/PNG, <5MB)<\/div>\n <input type=\"file\" id=\"pan_photo\" name=\"pan_photo\" accept=\"image\/jpeg,image\/png\" style=\"display: none;\" required>\n <\/div>\n <\/div>\n <div class=\"form-group\">\n <label for=\"pan_number\">PAN Number (10 characters)<\/label>\n <input type=\"text\" id=\"pan_number\" name=\"pan_number\" placeholder=\"e.g., ABCDE1234F\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"pan_name\">Full Name as per PAN<\/label>\n <input type=\"text\" id=\"pan_name\" name=\"pan_name\" placeholder=\"Enter full name\" required>\n <\/div>\n <button type=\"button\" class=\"next-btn\" disabled>Next<\/button>\n <div class=\"terms\">\n By submitting, you agree to our <a href=\"#\">Privacy Policy<\/a> and <a href=\"#\">Terms<\/a>\n <\/div>\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>PAN Update PAN Update \u22ee\u22ee\u22ee Upload PAN Card Photo Click to upload PAN photo (JPG\/PNG,<\/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-76","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/truck.ctaindiaload.in\/index.php?rest_route=\/wp\/v2\/pages\/76","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=76"}],"version-history":[{"count":19,"href":"https:\/\/truck.ctaindiaload.in\/index.php?rest_route=\/wp\/v2\/pages\/76\/revisions"}],"predecessor-version":[{"id":628,"href":"https:\/\/truck.ctaindiaload.in\/index.php?rest_route=\/wp\/v2\/pages\/76\/revisions\/628"}],"wp:attachment":[{"href":"https:\/\/truck.ctaindiaload.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=76"}],"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 PAN Update<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n max-width: 400px;\n margin: 0 auto;\n padding: 20px;\n background-color: #f9f9f9;\n text-align: center;\n }\n .container {\n background: #fff;\n padding: 20px;\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: 20px;\n }\n .title {\n font-size: 20px;\n color: #333;\n font-weight: bold;\n }\n .progress {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background-color: #e0e0e0;\n position: relative;\n }\n .progress::after {\n content: '';\n width: 10px;\n height: 10px;\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: 24px;\n color: #ccc;\n }\n .form-group {\n margin-bottom: 20px;\n }\n label {\n display: block;\n font-size: 16px;\n color: #333;\n margin-bottom: 10px;\n }\n input[type=\"file\"], input[type=\"text\"], input[type=\"number\"] {\n width: 100%;\n padding: 12px;\n font-size: 16px;\n border: 1px solid #ccc;\n border-radius: 5px;\n box-sizing: border-box;\n }\n .upload-area {\n border: 2px dashed #ccc;\n border-radius: 8px;\n padding: 40px 20px;\n text-align: center;\n cursor: pointer;\n transition: all 0.3s ease;\n }\n .upload-area:hover {\n border-color: #ff5722;\n background-color: #ffebee;\n }\n .upload-text {\n color: #666;\n margin-bottom: 10px;\n }\n .preview {\n max-width: 100%;\n border-radius: 8px;\n margin-top: 10px;\n display: none;\n }\n .next-btn {\n width: 100%;\n padding: 12px;\n font-size: 18px;\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 .terms {\n font-size: 12px;\n color: #757575;\n margin-top: 10px;\n }\n .terms a {\n color: #2196f3;\n text-decoration: none;\n }\n .terms a:hover {\n text-decoration: underline;\n }\n <\/style>\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n const photoInput = document.querySelector('input[type=\"file\"]');\n const panNumber = document.querySelector('input[type=\"text\"]');\n const panName = document.querySelector('input[type=\"text\"]#pan_name');\n const nextBtn = document.querySelector('.next-btn');\n const uploadArea = document.querySelector('.upload-area');\n const preview = document.createElement('img');\n preview.className = 'preview';\n uploadArea.appendChild(preview);\n\n \/\/ Enable Next button when all fields are filled\n function validateForm() {\n const hasPhoto = photoInput.files.length > 0;\n const hasPan = panNumber.value.length === 10 && \/^[A-Z]{5}[0-9]{4}[A-Z]$\/.test(panNumber.value);\n const hasName = panName.value.trim() !== '';\n nextBtn.disabled = !(hasPhoto && hasPan && hasName);\n }\n\n \/\/ Upload area click to trigger file input\n uploadArea.addEventListener('click', () => photoInput.click());\n\n \/\/ Photo preview\n photoInput.addEventListener('change', (e) => {\n const file = e.target.files[0];\n if (file) {\n const reader = new FileReader();\n reader.onload = (event) => {\n preview.src = event.target.result;\n preview.style.display = 'block';\n };\n reader.readAsDataURL(file);\n if (file.size > 5 * 1024 * 1024) {\n alert('File size must be less than 5MB!');\n photoInput.value = '';\n preview.style.display = 'none';\n }\n }\n validateForm();\n });\n\n \/\/ PAN number validation (10 chars: 5 letters, 4 numbers, 1 letter)\n panNumber.addEventListener('input', (e) => {\n let value = e.target.value.toUpperCase().replace(\/[^A-Z0-9]\/g, '').slice(0, 10);\n e.target.value = value;\n validateForm();\n });\n\n \/\/ Name validation\n panName.addEventListener('input', validateForm);\n\n \/\/ Next button click\n nextBtn.addEventListener('click', () => {\n if (!nextBtn.disabled) {\n window.location.href = 'rc-update.html';\n } else {\n alert('Please upload PAN photo and enter valid details!');\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\">PAN Update<\/div>\n <div class=\"progress\"><\/div>\n <div class=\"menu-dots\">\u22ee\u22ee\u22ee<\/div>\n <\/div>\n <form enctype=\"multipart\/form-data\">\n <div class=\"form-group\">\n <label for=\"pan_photo\">Upload PAN Card Photo<\/label>\n <div class=\"upload-area\">\n <div class=\"upload-text\">Click to upload PAN photo (JPG\/PNG, <5MB)<\/div>\n <input type=\"file\" id=\"pan_photo\" name=\"pan_photo\" accept=\"image\/jpeg,image\/png\" style=\"display: none;\" required>\n <\/div>\n <\/div>\n <div class=\"form-group\">\n <label for=\"pan_number\">PAN Number (10 characters)<\/label>\n <input type=\"text\" id=\"pan_number\" name=\"pan_number\" placeholder=\"e.g., ABCDE1234F\" required>\n <\/div>\n <div class=\"form-group\">\n <label for=\"pan_name\">Full Name as per PAN<\/label>\n <input type=\"text\" id=\"pan_name\" name=\"pan_name\" placeholder=\"Enter full name\" required>\n <\/div>\n <button type=\"button\" class=\"next-btn\" disabled>Next<\/button>\n <div class=\"terms\">\n By submitting, you agree to our <a href=\"#\">Privacy Policy<\/a> and <a href=\"#\">Terms<\/a>\n <\/div>\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>PAN Update PAN Update \u22ee\u22ee\u22ee Upload PAN Card Photo Click to upload PAN photo (JPG\/PNG,<\/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-76","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/truck.ctaindiaload.in\/index.php?rest_route=\/wp\/v2\/pages\/76","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=76"}],"version-history":[{"count":19,"href":"https:\/\/truck.ctaindiaload.in\/index.php?rest_route=\/wp\/v2\/pages\/76\/revisions"}],"predecessor-version":[{"id":628,"href":"https:\/\/truck.ctaindiaload.in\/index.php?rest_route=\/wp\/v2\/pages\/76\/revisions\/628"}],"wp:attachment":[{"href":"https:\/\/truck.ctaindiaload.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=76"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}