{"id":1869,"date":"2025-06-05T13:34:08","date_gmt":"2025-06-05T11:34:08","guid":{"rendered":"https:\/\/diagzone.org\/?page_id=1869"},"modified":"2025-06-05T13:36:06","modified_gmt":"2025-06-05T11:36:06","slug":"supported-brands-verification","status":"publish","type":"page","link":"https:\/\/diagzone.org\/ar\/supported-brands-verification\/","title":{"rendered":"Diagzone brand verify"},"content":{"rendered":"<style>.kb-row-layout-id1869_ad4c75-c2 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id1869_ad4c75-c2 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id1869_ad4c75-c2 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:0px;padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:0px;grid-template-columns:minmax(0, 1fr);}.kb-row-layout-id1869_ad4c75-c2 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id1869_ad4c75-c2 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id1869_ad4c75-c2 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id1869_ad4c75-c2 alignfull wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-1-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column1869_8787ba-25 > .kt-inside-inner-col,.kadence-column1869_8787ba-25 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column1869_8787ba-25 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column1869_8787ba-25 > .kt-inside-inner-col{flex-direction:column;}.kadence-column1869_8787ba-25 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column1869_8787ba-25 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column1869_8787ba-25{position:relative;}@media all and (max-width: 1024px){.kadence-column1869_8787ba-25 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column1869_8787ba-25 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column1869_8787ba-25 kb-section-dir-vertical\"><div class=\"kt-inside-inner-col\">    <div id=\"brand-verifier-app-container\">\n\t\t<style>\n      #brand-verifier-app-container {\n    max-width: 1300px;\n    margin: 0 auto;\n    background: rgba(255, 255, 255, 0.95);\n    backdrop-filter: blur(10px);\n    border-radius: 20px;\n    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);\n    padding: 1rem;\n    position: relative;\n    overflow: hidden;\n\t\t  \n}\n\n#brand-verifier-app-container::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 4px;\n    background: linear-gradient(90deg, #003cff, #3498db, #9b59b6);\n    border-radius: 20px 20px 0 0;\n}\n\n\/* --- Header Styling --- *\/\n.bva-main-title {\n    font-size: 2.5rem;\n    font-weight: 700;\n    color: #2c3e50;\n    text-align: center;\n    margin: 0 0 0.5rem 0;\n    background: linear-gradient(135deg, #003cff, #3498db);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-clip: text;\n}\n\n.bva-subtitle {\n    font-size: 1.1rem;\n    color: #7f8c8d;\n    text-align: center;\n    margin: 0 0 1.5rem 0;\n    font-weight: 400;\n}\n\n\/* --- Tabs Container --- *\/\n#brand-verifier-tabs {\n    margin-bottom: 1rem;\n}\n\n\/* --- Tabs Bar --- *\/\nul.bva-nav-tabs {\n    list-style-type: none;\n    padding: 0;\n    margin: 0;\n    display: flex;\n    flex-wrap: wrap;\n    background: #f8f9ff;\n    border-radius: 16px;\n    padding: 0.5rem;\n    border: 1px solid #e9ecef;\n}\n\n\/* --- Individual Tab Styling --- *\/\nul.bva-nav-tabs li {\n    flex: 1; \/* Each tab takes equal space *\/\n    min-width: 0; \/* Allows flex items to shrink below content size *\/\n    position: relative;\n    border-radius: 12px;\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    overflow: hidden;\n    margin: 0 0.25rem; \/* Small gap between tabs *\/\n}\n\nul.bva-nav-tabs li:first-child {\n    margin-left: 0;\n}\n\nul.bva-nav-tabs li:last-child {\n    margin-right: 0;\n}\n\nul.bva-nav-tabs li a {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 0.4rem;\n    padding: 0.8rem 0.5rem;\n    text-decoration: none;\n    color: #6c757d;\n    font-weight: 600;\n    font-size: 0.8rem;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    transition: all 0.3s ease;\n    border-radius: 12px;\n    position: relative;\n    background: transparent;\n    width: 100%;\n    height: 100%;\n    box-sizing: border-box;\n}\n\nul.bva-nav-tabs li a i {\n    font-size: 1.4rem;\n    transition: transform 0.3s ease;\n}\n\nul.bva-nav-tabs li a span {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    width: 100%;\n    text-align: center;\n}\n\n\/* --- Active Tab State --- *\/\nul.bva-nav-tabs li.active {\n    background: linear-gradient(135deg, #003cff, #0056b3);\n    box-shadow: 0 4px 15px rgba(0, 60, 255, 0.3);\n    transform: translateY(-2px);\n}\n\nul.bva-nav-tabs li.active a {\n    color: white;\n}\n\n\/* --- Hover Effects --- *\/\nul.bva-nav-tabs li:not(.active):hover {\n    background: white;\n    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n    transform: translateY(-1px);\n}\n\nul.bva-nav-tabs li:not(.active):hover a {\n    color: #003cff;\n}\n\nul.bva-nav-tabs li:hover a i {\n    transform: scale(1.1);\n}\n\n\/* --- Content Area --- *\/\n#brand-verifier-content.bva-content-area {\n    background: white;\n    border-radius: 16px;\n    padding: 1.5rem;\n    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);\n    border: 1px solid #f1f3f4;\n}\n\n\/* --- Form Group --- *\/\n.bva-form-group {\n    margin-bottom: 1.5rem;\n}\n\n.bva-label {\n    display: block;\n    font-weight: 600;\n    color: #2c3e50;\n    margin-bottom: 0.5rem;\n    font-size: 1rem;\n}\n\n\/* --- Input & Button Wrapper --- *\/\n.bva-input-button-wrapper {\n    display: flex;\n    gap: 0.5rem;\n    background: #f8f9fa;\n    border: 2px solid #e9ecef;\n    border-radius: 12px;\n    padding: 0.5rem;\n    transition: all 0.3s ease;\n    position: relative;\n    overflow: hidden;\n}\n\n.bva-input-button-wrapper::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: -100%;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(90deg, transparent, rgba(0, 60, 255, 0.1), transparent);\n    transition: left 0.5s ease;\n}\n\n.bva-input-button-wrapper:focus-within {\n    border-color: #003cff;\n    box-shadow: 0 0 0 4px rgba(0, 60, 255, 0.1);\n    background: white;\n}\n\n.bva-input-button-wrapper:focus-within::before {\n    left: 100%;\n}\n\n\/* --- Input Field --- *\/\n.bva-input {\n    flex-grow: 1;\n    border: none;\n    outline: none;\n    padding: 0.8rem 1rem;\n    font-size: 1rem;\n    background-color: transparent;\n    color: #2c3e50;\n    font-weight: 500;\n    position: relative;\n    z-index: 1;\n}\n\n.bva-input::placeholder {\n    color: #95a5a6;\n    font-weight: 400;\n}\n\n\/* --- Button --- *\/\n.bva-button {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    gap: 0.5rem;\n    padding: 0.8rem 1.5rem;\n    background: linear-gradient(135deg, #003cff, #0056b3);\n    color: white;\n    border: none;\n    border-radius: 8px;\n    font-size: 1rem;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    position: relative;\n    overflow: hidden;\n    z-index: 1;\n}\n\n.bva-button::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: -100%;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(135deg, #0056b3, #003d99);\n    transition: left 0.3s ease;\n    z-index: -1;\n}\n\n.bva-button:hover::before {\n    left: 0;\n}\n\n.bva-button:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 8px 25px rgba(0, 60, 255, 0.3);\n}\n\n.bva-button:disabled {\n    background: #bdc3c7;\n    cursor: not-allowed;\n    transform: none;\n    box-shadow: none;\n}\n\n.bva-button:disabled::before {\n    display: none;\n}\n\n\/* --- Result Area --- *\/\n.bva-result-area {\n    margin-top: 1.5rem;\n    padding: 1rem;\n    min-height: 80px;\n    border-radius: 12px;\n    background: #f8f9ff;\n    border: 2px dashed #e9ecef;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 1rem;\n    color: #6c757d;\n    text-align: center;\n    transition: all 0.3s ease;\n}\n\n\/* --- Result States --- *\/\n.bva-result-area .success {\n    color: #155724;\n    background: linear-gradient(135deg, #d4edda, #c3e6cb);\n    border: 2px solid #28a745;\n    border-radius: 12px;\n    padding: 1.5rem;\n    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.2);\n}\n\n.bva-result-area .error {\n    color: #721c24;\n    background: linear-gradient(135deg, #f8d7da, #f5c6cb);\n    border: 2px solid #dc3545;\n    border-radius: 12px;\n    padding: 1.5rem;\n    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.2);\n}\n\n.bva-result-area .info {\n    color: #0c5460;\n    background: linear-gradient(135deg, #d1ecf1, #bee5eb);\n    border: 2px solid #17a2b8;\n    border-radius: 12px;\n    padding: 1.5rem;\n    box-shadow: 0 4px 15px rgba(23, 162, 184, 0.2);\n}\n\n.bva-result-area .warning {\n    color: #856404;\n    background: linear-gradient(135deg, #fff3cd, #ffeaa7);\n    border: 2px solid #ffc107;\n    border-radius: 12px;\n    padding: 1.5rem;\n    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.2);\n}\n\n\/* ========================================================================\n   RESPONSIVE Design for Mobile & Tablet\n   ======================================================================== *\/\n\n@media (max-width: 768px) {\n    #brand-verifier-app-container {\n        max-width: none;\n        width: 100%;\n        margin: 0;\n        padding: 1rem;\n        border-radius: 16px;\n    }\n\n    .bva-main-title {\n        font-size: 2rem;\n    }\n\n    .bva-subtitle {\n        font-size: 1rem;\n        margin-bottom: 2rem;\n    }\n\n    \/* --- Mobile Tabs - Stack vertically or wrap --- *\/\n    ul.bva-nav-tabs {\n        flex-direction: column;\n        padding: 0.5rem;\n        gap: 0.5rem;\n    }\n\n    ul.bva-nav-tabs li {\n        flex: none;\n        margin: 0;\n        width: 100%;\n    }\n\n    ul.bva-nav-tabs li a {\n        flex-direction: row;\n        padding: 1rem 1.5rem;\n        justify-content: flex-start;\n        gap: 1rem;\n    }\n\n    ul.bva-nav-tabs li a i {\n        font-size: 1.2rem;\n    }\n\n    ul.bva-nav-tabs li a span {\n        font-size: 0.9rem;\n        text-align: left;\n    }\n\n    \/* --- Mobile Input --- *\/\n    #brand-verifier-content.bva-content-area {\n        padding: 1.5rem;\n    }\n\n    .bva-input-button-wrapper {\n        flex-direction: column;\n        gap: 1rem;\n        padding: 1rem;\n    }\n\n    .bva-input {\n        padding: 1rem;\n        text-align: center;\n        background: white;\n        border-radius: 8px;\n    }\n\n    .bva-button {\n        width: 100%;\n        justify-content: center;\n        padding: 1.2rem;\n        font-size: 1.1rem;\n    }\n}\n\n\/* Small mobile screens - keep tabs as columns but smaller *\/\n@media (max-width: 480px) {\n    .bva-main-title {\n        font-size: 1.8rem;\n    }\n\n    ul.bva-nav-tabs li a {\n        padding: 0.8rem 1rem;\n        font-size: 0.8rem;\n    }\n\n    ul.bva-nav-tabs li a i {\n        font-size: 1rem;\n    }\n}\n\n\/* Animation *\/\n@keyframes fadeInUp {\n    from {\n        opacity: 0;\n        transform: translateY(20px);\n    }\n    to {\n        opacity: 1;\n        transform: translateY(0);\n    }\n}\n\n#brand-verifier-app-container {\n    animation: fadeInUp 0.6s ease-out;\n}\n\n.bva-result-area > * {\n    animation: fadeInUp 0.4s ease-out;\n}\n    <\/style>\n    <h2 class=\"bva-main-title\">Brand & Vehicle Verifier for Diagzone!<\/h2>\n    <p class=\"bva-subtitle\">Select a category, type a brand, and hit verify!<\/p>\n\n    <div id=\"brand-verifier-tabs\">\n        <ul class=\"bva-nav-tabs\">\n            <li class=\"active\" data-category=\"ALL\">\n                <a href=\"#\"><i class=\"fa-solid fa-globe\"><\/i> <span>ALL<\/span><\/a>\n            <\/li>\n                                <li data-category=\"Passenger Cars\">\n                        <a href=\"#\">\n                            <i class=\"fa-solid fa-car-side\"><\/i>\n                            <span>Passenger Cars<\/span>\n                        <\/a>\n                    <\/li>\n                                    <li data-category=\"Commercial Trucks\">\n                        <a href=\"#\">\n                            <i class=\"fa-solid fa-truck\"><\/i>\n                            <span>Commercial Trucks<\/span>\n                        <\/a>\n                    <\/li>\n                                    <li data-category=\"Motorcycles\">\n                        <a href=\"#\">\n                            <i class=\"fa-solid fa-motorcycle\"><\/i>\n                            <span>Motorcycles<\/span>\n                        <\/a>\n                    <\/li>\n                                    <li data-category=\"Construction Equipment\">\n                        <a href=\"#\">\n                            <i class=\"fa-solid fa-helmet-safety\"><\/i>\n                            <span>Construction Equipment<\/span>\n                        <\/a>\n                    <\/li>\n                                    <li data-category=\"Agricultural Tractors\">\n                        <a href=\"#\">\n                            <i class=\"fa-solid fa-tractor\"><\/i>\n                            <span>Agricultural Tractors<\/span>\n                        <\/a>\n                    <\/li>\n                                    <li data-category=\"Immo\">\n                        <a href=\"#\">\n                            <i class=\"fa-solid fa-tag\"><\/i>\n                            <span>Immo<\/span>\n                        <\/a>\n                    <\/li>\n                                    <li data-category=\"Electrical cars\">\n                        <a href=\"#\">\n                            <i class=\"fa-solid fa-tag\"><\/i>\n                            <span>Electrical cars<\/span>\n                        <\/a>\n                    <\/li>\n                        <\/ul>\n    <\/div>\n\n    <div id=\"brand-verifier-content\" class=\"bva-content-area\">\n        <div class=\"bva-form-group\">\n            <label for=\"brand-input-tabbed\" class=\"bva-label\">Brand Name:<\/label>\n            <div class=\"bva-input-button-wrapper\">\n                <input type=\"text\" id=\"brand-input-tabbed\" class=\"bva-input\" placeholder=\"e.g., BMW, Caterpillar, Honda\">\n                <button type=\"button\" id=\"verify-brand-button-tabbed\" class=\"bva-button\">\n                    <i class=\"fa-solid fa-magnifying-glass\"><\/i> <span>Verify<\/span>\n                <\/button>\n            <\/div>\n        <\/div>\n\n        <div id=\"brand-verifier-result\" class=\"bva-result-area\">\n            Select a category and enter a brand name to begin.\n        <\/div>\n    <\/div>\n<\/div>\n\n    \n<\/div><\/div>\n\n<\/div><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"","_seopress_titles_title":"Supported brands verification tool | Diagzone","_seopress_titles_desc":"","_seopress_robots_index":"","inline_featured_image":false,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_themeisle_gutenberg_block_has_review":false,"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"iawp_total_views":2436,"footnotes":""},"class_list":["post-1869","page","type-page","status-publish","hentry"],"acf":[],"taxonomy_info":[],"featured_image_src_large":false,"author_info":{"display_name":"diagzone","author_link":"https:\/\/diagzone.org\/ar\/author\/xpro5\/"},"comment_info":0,"_links":{"self":[{"href":"https:\/\/diagzone.org\/ar\/wp-json\/wp\/v2\/pages\/1869","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/diagzone.org\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/diagzone.org\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/diagzone.org\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/diagzone.org\/ar\/wp-json\/wp\/v2\/comments?post=1869"}],"version-history":[{"count":8,"href":"https:\/\/diagzone.org\/ar\/wp-json\/wp\/v2\/pages\/1869\/revisions"}],"predecessor-version":[{"id":1889,"href":"https:\/\/diagzone.org\/ar\/wp-json\/wp\/v2\/pages\/1869\/revisions\/1889"}],"wp:attachment":[{"href":"https:\/\/diagzone.org\/ar\/wp-json\/wp\/v2\/media?parent=1869"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}