{"id":331,"date":"2026-02-02T15:26:54","date_gmt":"2026-02-02T15:26:54","guid":{"rendered":"https:\/\/bonusbuilder.online\/upgrade\/"},"modified":"2026-02-02T15:26:54","modified_gmt":"2026-02-02T15:26:54","slug":"upgrade","status":"publish","type":"page","link":"https:\/\/bonusbuilder.online\/upgrade\/","title":{"rendered":"Upgrade"},"content":{"rendered":"    <section class=\"form-part\">\r\n        <div class=\"container\">\r\n            <div class=\"upgrade-card\">\r\n                <h2 class=\"design_header_text\">You are one step away from upgrading your account. Please enter your username and password.<\/h2>\r\n                <p class=\"design_para_content\">Note: If you don't have an account, <a href=\"https:\/\/bonusbuilder.online\/membership-checkout\/?pmpro_level=1\" target=\"_blank\">register<\/a> first then visit this page.<\/p>\r\n                <form method=\"post\" action=\"\" class=\"form-horizontal\" id=\"form-horizontal\">\r\n                    <div class=\"row\">\r\n                        <div class=\"col-md-12\">\r\n                            <div class=\"form-group\">\r\n                                <label class=\"control-label\">Username<\/label>\r\n                                <input class=\"form-control input-lg\" type=\"text\" name=\"username\" size=\"15\" value=\"\">\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"col-md-12\">\r\n                            <div class=\"form-group\">\r\n                                <label class=\"control-label\">Password<\/label>\r\n                                <input class=\"form-control input-lg\" type=\"password\" name=\"password\" size=\"15\" value=\"\">\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"col-md-12\">\r\n                            <div class=\"signup_form_error\"><\/div>\r\n                        <\/div>\r\n                        <div class=\"col-md-12 text-center\">\r\n                            <input class=\"btn main-btn join_button\" type=\"button\" value=\"Upgrade\">\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/form>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n   <style>\r\n\/* ============================\r\n   UPGRADE FORM - ORANGE BLACK THEME\r\n   ============================ *\/\r\n\r\n\/* Primary content adjustment *\/\r\n#primary {\r\n    padding-top: 0px;\r\n}\r\n\r\n\/* Site content styling *\/\r\n.site-content {\r\n    border-top: 1px solid rgba(255, 107, 53, 0.2);\r\n    margin-top: -8px;\r\n}\r\n\r\n\/* Main form container styling *\/\r\n.upgrade-card {\r\n    max-width: 550px;\r\n    margin: 60px auto;\r\n    padding: 40px;\r\n    border-radius: 20px;\r\n    background: linear-gradient(135deg, #0a0a0a 0%, #141414 50%, #1a1a1a 100%) !important;\r\n    color: #ffffff;\r\n    position: relative;\r\n    overflow: hidden;\r\n    font-family: 'DM Sans', 'Inter', sans-serif;\r\n    border: 1px solid rgba(255, 107, 53, 0.3);\r\n    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 107, 53, 0.1);\r\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n}\r\n\r\n.upgrade-card:hover {\r\n    transform: translateY(-5px);\r\n    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 107, 53, 0.2);\r\n}\r\n\r\n\/* Background gradient effect *\/\r\n.upgrade-card::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: -50%;\r\n    left: -50%;\r\n    width: 200%;\r\n    height: 200%;\r\n    background: radial-gradient(circle, \r\n        rgba(255, 107, 53, 0.08) 0%,\r\n        rgba(255, 69, 0, 0.06) 40%,\r\n        rgba(224, 58, 0, 0.04) 70%,\r\n        rgba(0, 0, 0, 0) 100%);\r\n    z-index: 0;\r\n    pointer-events: none;\r\n}\r\n\r\n\/* Additional accent overlay *\/\r\n.upgrade-card::after {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    height: 3px;\r\n    background: linear-gradient(90deg, #ff6b35, #ff4500, #e03a00, #ff6b35);\r\n    background-size: 200% auto;\r\n    animation: gradientMove 3s ease infinite;\r\n    z-index: 1;\r\n    border-radius: 3px 3px 0 0;\r\n}\r\n\r\n@keyframes gradientMove {\r\n    0% { background-position: 0% 50%; }\r\n    50% { background-position: 100% 50%; }\r\n    100% { background-position: 0% 50%; }\r\n}\r\n\r\n\/* Header text styling *\/\r\n.design_header_text {\r\n    color: #ff6b35 !important;\r\n    font-size: 24px !important;\r\n    font-weight: 700 !important;\r\n    margin-bottom: 20px !important;\r\n    text-align: center !important;\r\n    position: relative;\r\n    z-index: 2;\r\n    font-family: 'Syne', 'Poppins', sans-serif;\r\n    letter-spacing: -0.3px;\r\n}\r\n\r\n\/* Paragraph content styling *\/\r\n.design_para_content {\r\n    color: #cbd5e1 !important;\r\n    text-align: center !important;\r\n    margin-bottom: 30px !important;\r\n    position: relative;\r\n    z-index: 2;\r\n    font-size: 14px !important;\r\n    line-height: 1.6;\r\n}\r\n\r\n\/* Links styling *\/\r\n.design_para_content a {\r\n    color: #ff6b35 !important;\r\n    text-decoration: none !important;\r\n    font-weight: 600 !important;\r\n    transition: all 0.3s ease;\r\n    border-bottom: 1px solid transparent;\r\n}\r\n\r\n.design_para_content a:hover {\r\n    color: #ff8c5a !important;\r\n    border-bottom-color: #ff6b35;\r\n}\r\n\r\n\/* Form container *\/\r\n.form-horizontal {\r\n    position: relative;\r\n    z-index: 2;\r\n}\r\n\r\n\/* Form groups *\/\r\n.form-group {\r\n    margin-bottom: 24px !important;\r\n}\r\n\r\n\/* Labels *\/\r\n.control-label {\r\n    display: block !important;\r\n    margin-bottom: 8px !important;\r\n    font-weight: 600 !important;\r\n    color: #ff8c5a !important;\r\n    font-size: 13px;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.5px;\r\n}\r\n\r\n\/* Form inputs *\/\r\n.form-control {\r\n    width: 100% !important;\r\n    padding: 14px 18px !important;\r\n    border: 2px solid rgba(255, 107, 53, 0.3) !important;\r\n    border-radius: 12px !important;\r\n    background: rgba(30, 30, 30, 0.95) !important;\r\n    color: #ffffff !important;\r\n    font-size: 15px !important;\r\n    transition: all 0.3s ease !important;\r\n    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2) !important;\r\n    font-family: 'DM Sans', sans-serif;\r\n}\r\n\r\n.form-control:focus {\r\n    border-color: #ff6b35 !important;\r\n    box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.2), inset 0 2px 5px rgba(0, 0, 0, 0.2) !important;\r\n    outline: none;\r\n    background: rgba(40, 40, 40, 0.98) !important;\r\n}\r\n\r\n.form-control::placeholder {\r\n    color: rgba(203, 213, 225, 0.5);\r\n}\r\n\r\n\/* Submit button *\/\r\n.main-btn {\r\n    position: relative !important;\r\n    padding: 14px 35px !important;\r\n    border-radius: 12px !important;\r\n    font-size: 16px !important;\r\n    font-weight: 700 !important;\r\n    text-transform: uppercase !important;\r\n    letter-spacing: 1px !important;\r\n    background: linear-gradient(90deg, #ff6b35, #ff4500, #e03a00) !important;\r\n    background-size: 200% auto !important;\r\n    border: none !important;\r\n    color: #fff !important;\r\n    cursor: pointer !important;\r\n    transition: all 0.3s ease !important;\r\n    overflow: hidden !important;\r\n    z-index: 1 !important;\r\n    width: 80%;\r\n    margin: 0 auto;\r\n    display: block;\r\n    font-family: 'Syne', sans-serif;\r\n    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);\r\n}\r\n\r\n\/* Button hover effect *\/\r\n.main-btn::before {\r\n    content: '' !important;\r\n    position: absolute !important;\r\n    top: 0 !important;\r\n    left: -100% !important;\r\n    width: 100% !important;\r\n    height: 100% !important;\r\n    background: linear-gradient(90deg, \r\n        rgba(255, 255, 255, 0.2) 0%,\r\n        rgba(255, 255, 255, 0.3) 50%,\r\n        rgba(255, 255, 255, 0.2) 100%) !important;\r\n    transition: all 0.5s ease !important;\r\n    z-index: -1 !important;\r\n}\r\n\r\n.main-btn:hover {\r\n    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.45) !important;\r\n    transform: translateY(-3px) !important;\r\n    background-position: right center !important;\r\n}\r\n\r\n.main-btn:hover::before {\r\n    left: 100% !important;\r\n}\r\n\r\n.main-btn:active {\r\n    transform: translateY(0) !important;\r\n    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.35) !important;\r\n}\r\n\r\n\/* Error messages *\/\r\n.signup_form_error {\r\n    color: #ff6b6b !important;\r\n    padding: 12px !important;\r\n    border-radius: 10px !important;\r\n    margin-bottom: 20px !important;\r\n    text-align: center !important;\r\n    background: rgba(255, 107, 107, 0.1) !important;\r\n    border-left: 4px solid #ff6b6b !important;\r\n    display: none;\r\n    font-size: 14px;\r\n}\r\n\r\n.signup_form_error .alert {\r\n    margin: 0;\r\n}\r\n\r\n\/* Success message styling *\/\r\n#form-horizontal h1 {\r\n    font-family: 'Syne', sans-serif;\r\n    color: #ff6b35;\r\n    text-align: center;\r\n    font-size: 24px;\r\n    font-weight: 700;\r\n    background: linear-gradient(90deg, #ff6b35, #ff8c5a);\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n    background-clip: text;\r\n    margin: 20px 0;\r\n}\r\n\r\n\/* Animation *\/\r\n@keyframes fadeInUp {\r\n    from { \r\n        opacity: 0; \r\n        transform: translateY(20px); \r\n    }\r\n    to { \r\n        opacity: 1; \r\n        transform: translateY(0); \r\n    }\r\n}\r\n\r\n.upgrade-card {\r\n    animation: fadeInUp 0.5s ease-out forwards !important;\r\n}\r\n\r\n.main-btn {\r\n    animation: gradientShift 3s ease infinite !important;\r\n}\r\n\r\n@keyframes gradientShift {\r\n    0% { background-position: 0% 50%; }\r\n    50% { background-position: 100% 50%; }\r\n    100% { background-position: 0% 50%; }\r\n}\r\n\r\n\/* ============================\r\n   RESPONSIVE DESIGN\r\n   ============================ *\/\r\n\r\n\/* Tablet - 1024px and below *\/\r\n@media (max-width: 1024px) {\r\n    .upgrade-card {\r\n        max-width: 500px;\r\n        padding: 35px;\r\n        margin: 50px auto;\r\n    }\r\n    \r\n    .design_header_text {\r\n        font-size: 22px !important;\r\n        margin-bottom: 18px !important;\r\n    }\r\n    \r\n    .design_para_content {\r\n        font-size: 13px !important;\r\n        margin-bottom: 25px !important;\r\n    }\r\n    \r\n    .main-btn {\r\n        width: 70%;\r\n        padding: 12px 30px !important;\r\n    }\r\n}\r\n\r\n\/* Tablet - 768px and below *\/\r\n@media (max-width: 768px) {\r\n    .upgrade-card {\r\n        max-width: 90%;\r\n        padding: 30px;\r\n        margin: 40px auto;\r\n        border-radius: 16px;\r\n    }\r\n    \r\n    .design_header_text {\r\n        font-size: 20px !important;\r\n        margin-bottom: 15px !important;\r\n    }\r\n    \r\n    .design_para_content {\r\n        font-size: 12px !important;\r\n        margin-bottom: 22px !important;\r\n    }\r\n    \r\n    .form-group {\r\n        margin-bottom: 20px !important;\r\n    }\r\n    \r\n    .control-label {\r\n        font-size: 12px !important;\r\n        margin-bottom: 6px !important;\r\n    }\r\n    \r\n    .form-control {\r\n        padding: 12px 16px !important;\r\n        font-size: 14px !important;\r\n        border-radius: 10px !important;\r\n    }\r\n    \r\n    .main-btn {\r\n        width: 80%;\r\n        padding: 12px 25px !important;\r\n        font-size: 14px !important;\r\n        border-radius: 10px !important;\r\n    }\r\n}\r\n\r\n\/* Mobile - 480px and below *\/\r\n@media (max-width: 480px) {\r\n    #primary {\r\n        padding-top: 0px;\r\n    }\r\n    \r\n    .upgrade-card {\r\n        max-width: 95%;\r\n        padding: 25px 20px;\r\n        margin: 30px auto;\r\n        border-radius: 14px;\r\n    }\r\n    \r\n    .design_header_text {\r\n        font-size: 18px !important;\r\n        margin-bottom: 12px !important;\r\n    }\r\n    \r\n    .design_para_content {\r\n        font-size: 12px !important;\r\n        margin-bottom: 20px !important;\r\n    }\r\n    \r\n    .form-group {\r\n        margin-bottom: 18px !important;\r\n    }\r\n    \r\n    .control-label {\r\n        font-size: 11px !important;\r\n        margin-bottom: 5px !important;\r\n    }\r\n    \r\n    .form-control {\r\n        padding: 10px 14px !important;\r\n        font-size: 13px !important;\r\n        border-radius: 8px !important;\r\n    }\r\n    \r\n    .main-btn {\r\n        width: 100%;\r\n        padding: 10px 20px !important;\r\n        font-size: 13px !important;\r\n        border-radius: 8px !important;\r\n        letter-spacing: 0.5px !important;\r\n    }\r\n    \r\n    .signup_form_error {\r\n        font-size: 12px;\r\n        padding: 10px !important;\r\n    }\r\n}\r\n\r\n\/* Small Mobile - 360px and below *\/\r\n@media (max-width: 360px) {\r\n    .upgrade-card {\r\n        padding: 20px 15px;\r\n        margin: 20px auto;\r\n    }\r\n    \r\n    .design_header_text {\r\n        font-size: 16px !important;\r\n    }\r\n    \r\n    .design_para_content {\r\n        font-size: 11px !important;\r\n    }\r\n    \r\n    .form-control {\r\n        padding: 8px 12px !important;\r\n        font-size: 12px !important;\r\n    }\r\n    \r\n    .main-btn {\r\n        padding: 8px 15px !important;\r\n        font-size: 12px !important;\r\n    }\r\n}\r\n\r\n\/* Layout adjustments *\/\r\nhtml, body {\r\n    height: 100%;\r\n    margin: 0;\r\n    display: flex;\r\n    flex-direction: column;\r\n}\r\n\r\n#page {\r\n    flex: 1;\r\n    display: flex;\r\n    flex-direction: column;\r\n}\r\n\r\n.site-footer {\r\n    margin-top: auto;\r\n}\r\n\r\n.page-header {\r\n    display: none;\r\n}\r\n<\/style>\r\n\r\n    <script src=\"\/\/code.jquery.com\/jquery-1.10.2.js\"><\/script>\r\n    <script>\r\n    jQuery(document).ready(function($){\r\n        $(\".join_button\").click(function(){\r\n            var btn = $(this);\r\n            var original = btn.val();\r\n            btn.val('Processing...');\r\n            $('.signup_form_error').html('');\r\n           \r\n\r\n            var username = $(\"input[name='username']\").val().trim();\r\n            var password = $(\"input[name='password']\").val().trim();\r\n\r\n            if (username === \"\") {\r\n                $('.signup_form_error').html('<div class=\"alert alert-danger\">Username is required.<\/div>');\r\n                 $('.signup_form_error').show();\r\n                btn.val(original);\r\n                return;\r\n            }\r\n            if (password === \"\") {\r\n                $('.signup_form_error').html('<div class=\"alert alert-danger\">Password is required.<\/div>');\r\n                 $('.signup_form_error').show();\r\n                btn.val(original);\r\n                return;\r\n            }\r\n\r\n            $.ajax({\r\n                type: \"post\",\r\n                url: \"https:\/\/bonusbuilder.online\/wp-admin\/admin-ajax.php\",\r\n                data: {\r\n                    action: \"user_plan_upgrade\",\r\n                    t: \"\",\r\n                    d: \"\",\r\n                    username: username,\r\n                    password: password,\r\n                },\r\n                success: function(response) {\r\n                    try {\r\n                        var res = JSON.parse(response);\r\n                        if(res.status === false){\r\n                            $('.signup_form_error').html('<div class=\"alert alert-danger\">' + res.message + '<\/div>');\r\n                             $('.signup_form_error').show();\r\n                        } else {\r\n                            $('#form-horizontal').html('<h1>' + res.message + '<\/h1>');\r\n                            $(\".design_header_text, .design_para_content\").hide();\r\n                        }\r\n                    } catch (e) {\r\n                        $('.signup_form_error').html('<div class=\"alert alert-danger\">Unexpected error. Please try again.<\/div>');\r\n                         $('.signup_form_error').show();\r\n                    }\r\n                    btn.val(original);\r\n                }\r\n            });\r\n        });\r\n    });\r\n    <\/script>\r\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pmpro_default_level":"","footnotes":""},"class_list":["post-331","page","type-page","status-publish","hentry","pmpro-has-access"],"_links":{"self":[{"href":"https:\/\/bonusbuilder.online\/v\/wp\/v2\/pages\/331","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bonusbuilder.online\/v\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bonusbuilder.online\/v\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bonusbuilder.online\/v\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bonusbuilder.online\/v\/wp\/v2\/comments?post=331"}],"version-history":[{"count":0,"href":"https:\/\/bonusbuilder.online\/v\/wp\/v2\/pages\/331\/revisions"}],"wp:attachment":[{"href":"https:\/\/bonusbuilder.online\/v\/wp\/v2\/media?parent=331"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}