Track Application<\/title>\r\n\r\n<style>\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n body {\r\n font-family: 'Lato', sans-serif;\r\n background: #f4f6f9;\r\n display: flex;\r\n justify-content: center;\r\n align-items: flex-start;\r\n min-height: 100vh;\r\n padding: 40px 16px;\r\n }\r\n\r\n .card {\r\n background: #fff;\r\n border-radius: 8px;\r\n box-shadow: 0 2px 16px rgba(0,0,0,0.08);\r\n width: 100%;\r\n max-width: 680px;\r\n overflow: hidden;\r\n }\r\n\r\n \/* Step tabs *\/\r\n .steps {\r\n display: flex;\r\n background: #fff;\r\n }\r\n\r\n .step {\r\n flex: 1;\r\n padding: 16px 20px;\r\n font-size: 15px;\r\n font-weight: 600;\r\n color: #888;\r\n background: #f0f0f0;\r\n cursor: default;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);\r\n }\r\n\r\n .step.active {\r\n background: #2779bd;\r\n color: #fff;\r\n }\r\n\r\n .step:not(:first-child) {\r\n padding-left: 36px;\r\n margin-left: -18px;\r\n }\r\n\r\n \/* Progress bar *\/\r\n .progress-bar {\r\n height: 6px;\r\n background: #e0e0e0;\r\n }\r\n\r\n .progress-fill {\r\n height: 100%;\r\n background: #2779bd;\r\n width: 50%;\r\n transition: width 0.4s ease;\r\n }\r\n\r\n \/* Form body *\/\r\n .form-body {\r\n padding: 32px 36px 36px;\r\n }\r\n\r\n .field {\r\n margin-bottom: 20px;\r\n }\r\n\r\n label {\r\n display: block;\r\n font-size: 14px;\r\n font-weight: 600;\r\n color: #333;\r\n margin-bottom: 6px;\r\n }\r\n\r\n .required {\r\n color: #e53e3e;\r\n margin-left: 3px;\r\n }\r\n\r\n input[type=\"text\"] {\r\n width: 100%;\r\n padding: 10px 14px;\r\n border: 1.5px solid #d1d5db;\r\n border-radius: 5px;\r\n font-size: 15px;\r\n font-family: 'Lato', sans-serif;\r\n color: #222;\r\n background: #fff;\r\n transition: border-color 0.2s, box-shadow 0.2s;\r\n outline: none;\r\n }\r\n\r\n input[type=\"text\"]:focus {\r\n border-color: #2779bd;\r\n box-shadow: 0 0 0 3px rgba(39,121,189,0.15);\r\n }\r\n\r\n input.error {\r\n border-color: #e53e3e;\r\n }\r\n\r\n .error-msg {\r\n font-size: 12px;\r\n color: #e53e3e;\r\n margin-top: 4px;\r\n display: none;\r\n }\r\n\r\n .error-msg.show {\r\n display: block;\r\n }\r\n\r\n .form-footer {\r\n display: flex;\r\n justify-content: flex-end;\r\n gap: 10px;\r\n margin-top: 28px;\r\n }\r\n\r\n .btn {\r\n border: none;\r\n padding: 11px 32px;\r\n border-radius: 6px;\r\n font-size: 15px;\r\n font-weight: 700;\r\n font-family: 'Lato', sans-serif;\r\n cursor: pointer;\r\n transition: background 0.2s, transform 0.1s;\r\n }\r\n\r\n .btn-primary {\r\n background: #2779bd;\r\n color: #fff;\r\n }\r\n\r\n .btn-primary:hover { background: #1a5fa0; }\r\n\r\n .btn-secondary {\r\n background: #fff;\r\n color: #333;\r\n border: 1.5px solid #d1d5db;\r\n }\r\n\r\n .btn-secondary:hover { background: #f4f6f9; }\r\n\r\n .btn:active { transform: scale(0.97); }\r\n\r\n \/* Summary styles *\/\r\n .summary-notice {\r\n font-size: 14px;\r\n color: #333;\r\n background: #f0f4f8;\r\n border-radius: 6px;\r\n padding: 12px 16px;\r\n margin-bottom: 24px;\r\n line-height: 1.6;\r\n border: 1px solid #dce3ea;\r\n }\r\n\r\n .summary-field {\r\n margin-bottom: 16px;\r\n }\r\n\r\n .summary-field label {\r\n font-size: 13px;\r\n font-weight: 600;\r\n color: #555;\r\n margin-bottom: 4px;\r\n }\r\n\r\n .summary-value {\r\n width: 100%;\r\n padding: 10px 14px;\r\n border: 1.5px solid #d1d5db;\r\n border-radius: 5px;\r\n font-size: 15px;\r\n color: #222;\r\n background: #f9fafb;\r\n }\r\n\r\n \/* Step panels *\/\r\n .step-panel { display: none; }\r\n .step-panel.active { display: block; }\r\n\r\n \/* Success screen *\/\r\n .success-banner {\r\n text-align: center;\r\n padding: 40px 24px;\r\n }\r\n\r\n .success-icon {\r\n width: 60px;\r\n height: 60px;\r\n background: #e6f4ea;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 auto 18px;\r\n font-size: 28px;\r\n color: #2e7d32;\r\n }\r\n\r\n .success-banner h2 {\r\n font-size: 22px;\r\n font-weight: 700;\r\n color: #1a1a2e;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .success-banner p {\r\n font-size: 14px;\r\n color: #555;\r\n line-height: 1.6;\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"card\">\r\n\r\n \r\n <div class=\"steps\">\r\n <div class=\"step active\" id=\"tab-1\">General Information<\/div>\r\n <div class=\"step\" id=\"tab-2\">Summary<\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"progress-bar\">\r\n <div class=\"progress-fill\" id=\"progressFill\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"form-body\">\r\n\r\n \r\n <div class=\"step-panel active\" id=\"panel-1\">\r\n <div class=\"field\">\r\n <label for=\"lastName\">Last Name <span class=\"required\">*<\/span><\/label>\r\n <input type=\"text\" id=\"lastName\" name=\"lastName\" placeholder=\"Enter last name\">\r\n <div class=\"error-msg\" id=\"lastNameErr\">Last name is required.<\/div>\r\n <\/div>\r\n\r\n <div class=\"field\">\r\n <label for=\"firstName\">First Name <span class=\"required\">*<\/span><\/label>\r\n <input type=\"text\" id=\"firstName\" name=\"firstName\" placeholder=\"Enter first name\">\r\n <div class=\"error-msg\" id=\"firstNameErr\">First name is required.<\/div>\r\n <\/div>\r\n\r\n <div class=\"field\">\r\n <label for=\"middleName\">Middle Name<\/label>\r\n <input type=\"text\" id=\"middleName\" name=\"middleName\" placeholder=\"Enter middle name\">\r\n <\/div>\r\n\r\n <div class=\"field\">\r\n <label for=\"suffixName\">Suffix Name<\/label>\r\n <input type=\"text\" id=\"suffixName\" name=\"suffixName\" placeholder=\"e.g. Jr., Sr., III\">\r\n <\/div>\r\n\r\n <div class=\"form-footer\">\r\n <button class=\"btn btn-primary\" onclick=\"goToSummary()\">Next<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"step-panel\" id=\"panel-2\">\r\n <div class=\"summary-notice\">\r\n <strong>Please review the information you have provided.<\/strong> Click on the \"Previous\" button if you want to make changes.\r\n <\/div>\r\n\r\n <div class=\"summary-field\">\r\n <label>Last Name *<\/label>\r\n <div class=\"summary-value\" id=\"sum-lastName\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"summary-field\">\r\n <label>First Name *<\/label>\r\n <div class=\"summary-value\" id=\"sum-firstName\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"summary-field\">\r\n <label>Middle Name<\/label>\r\n <div class=\"summary-value\" id=\"sum-middleName\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"summary-field\">\r\n <label>Suffix Name<\/label>\r\n <div class=\"summary-value\" id=\"sum-suffixName\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"form-footer\">\r\n <button class=\"btn btn-secondary\" onclick=\"goBack()\">Previous<\/button>\r\n <button class=\"btn btn-primary\" onclick=\"finish()\">Finish<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"step-panel\" id=\"panel-3\">\r\n <div class=\"success-banner\">\r\n <div class=\"success-icon\">✓<\/div>\r\n <h2>Application Submitted!<\/h2>\r\n <p id=\"success-name\" style=\"font-size:16px; font-weight:700; color:#1a1a2e; margin-bottom:8px;\"><\/p>\r\n <p>Your application has been successfully submitted.<br>You will receive a confirmation shortly.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n function goToSummary() {\r\n let valid = true;\r\n\r\n const fields = [\r\n { id: 'lastName', errId: 'lastNameErr' },\r\n { id: 'firstName', errId: 'firstNameErr' }\r\n ];\r\n\r\n fields.forEach(({ id, errId }) => {\r\n const el = document.getElementById(id);\r\n const err = document.getElementById(errId);\r\n if (!el.value.trim()) {\r\n el.classList.add('error');\r\n err.classList.add('show');\r\n valid = false;\r\n } else {\r\n el.classList.remove('error');\r\n err.classList.remove('show');\r\n }\r\n });\r\n\r\n if (!valid) return;\r\n\r\n \/\/ Populate summary\r\n document.getElementById('sum-lastName').textContent = document.getElementById('lastName').value.trim();\r\n document.getElementById('sum-firstName').textContent = document.getElementById('firstName').value.trim();\r\n document.getElementById('sum-middleName').textContent = document.getElementById('middleName').value.trim() || '\u2014';\r\n document.getElementById('sum-suffixName').textContent = document.getElementById('suffixName').value.trim() || 'N\/A';\r\n\r\n showPanel(2);\r\n }\r\n\r\n function goBack() {\r\n showPanel(1);\r\n }\r\n\r\n function finish() {\r\n const firstName = document.getElementById('firstName').value.trim();\r\n const middleName = document.getElementById('middleName').value.trim();\r\n const lastName = document.getElementById('lastName').value.trim();\r\n const suffix = document.getElementById('suffixName').value.trim();\r\n\r\n const fullName = [firstName, middleName, lastName, suffix].filter(Boolean).join(' ');\r\n document.getElementById('success-name').textContent = fullName;\r\n\r\n showPanel(3);\r\n }\r\n\r\n function showPanel(n) {\r\n document.querySelectorAll('.step-panel').forEach((p, i) => {\r\n p.classList.toggle('active', i === n - 1);\r\n });\r\n\r\n document.getElementById('tab-1').classList.toggle('active', n === 1);\r\n document.getElementById('tab-2').classList.toggle('active', n === 2 || n === 3);\r\n\r\n document.getElementById('progressFill').style.width = n === 1 ? '50%' : '100%';\r\n }\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\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>Quickly verify your membership application status with our easy-to-use verification system. Welcome to our track application page! Here, you can […]<\/p>\n","protected":false},"author":2,"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":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"disabled","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-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":"","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-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":"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":""},"mobile":{"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":""}},"footnotes":""},"class_list":["post-12672","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ris.ri2020.com\/index.php?rest_route=\/wp\/v2\/pages\/12672","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ris.ri2020.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ris.ri2020.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ris.ri2020.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ris.ri2020.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12672"}],"version-history":[{"count":75,"href":"https:\/\/ris.ri2020.com\/index.php?rest_route=\/wp\/v2\/pages\/12672\/revisions"}],"predecessor-version":[{"id":18081,"href":"https:\/\/ris.ri2020.com\/index.php?rest_route=\/wp\/v2\/pages\/12672\/revisions\/18081"}],"wp:attachment":[{"href":"https:\/\/ris.ri2020.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}