{"id":1483,"date":"2026-05-01T05:54:43","date_gmt":"2026-05-01T05:54:43","guid":{"rendered":"https:\/\/zupitex.in\/?page_id=1483"},"modified":"2026-05-01T05:56:24","modified_gmt":"2026-05-01T05:56:24","slug":"login","status":"publish","type":"page","link":"https:\/\/zupitex.in\/index.php\/login\/","title":{"rendered":"LogIn"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1483\" class=\"elementor elementor-1483\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8bb5ed2 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8bb5ed2\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-0e7352a\" data-id=\"0e7352a\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-78b5e52 elementor-widget elementor-widget-shortcode\" data-id=\"78b5e52\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    \n    <style>\n        :root {\n            --primary-color: #768f14;\n            --hover-color: #000;\n            --bg-color: #ffffff;\n            --text-main: #2b2b2b;\n            --text-muted: #6b7280;\n            --input-border: #768f14;\n        }\n\n        \/* Responsive Container *\/\n        .premium-login-wrapper {\n            padding: 20px;\n            display: flex;\n            justify-content: center;\n        }\n\n        .premium-login-container {\n            width: 100%;\n            max-width: 420px;\n            padding: 40px 30px;\n            background: var(--bg-color);\n            border-radius: 20px;\n            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n            box-sizing: border-box;\n        }\n\n        .premium-login-container h2 {\n            text-align: center;\n            color: var(--text-main);\n            margin: 0 0 8px 0;\n            font-size: 28px;\n            font-weight: 700;\n        }\n\n        .premium-login-container p.subtitle {\n            text-align: center;\n            color: var(--text-muted);\n            margin-bottom: 30px;\n            font-size: 15px;\n        }\n\n        .premium-form-group {\n            margin-bottom: 24px;\n            position: relative;\n        }\n\n        .premium-form-group label {\n            display: block;\n            margin-bottom: 8px;\n            font-size: 14px;\n            color: var(--text-main);\n            font-weight: 600;\n        }\n\n        \/* Input Styling *\/\n        .premium-form-group input {\n            width: 100%;\n            padding: 14px 16px;\n            border: 2px solid var(--input-border);\n            border-radius: 12px;\n            font-size: 15px;\n            color: var(--text-main);\n            transition: all 0.3s ease;\n            box-sizing: border-box;\n            background: #fafafa;\n        }\n\n        .premium-form-group input:focus {\n            outline: none;\n            border-color: var(--hover-color);\n            background: #ffffff;\n            box-shadow: 0 0 0 4px rgba(24, 181, 179, 0.15);\n        }\n\n        \/* Password Wrapper & Eye Icon *\/\n        .password-wrapper {\n            position: relative;\n            display: flex;\n            align-items: center;\n        }\n\n        .password-wrapper input {\n            padding-right: 48px; \/* Room for the icon *\/\n        }\n\n        .toggle-password {\n            position: absolute;\n            right: 14px;\n            background: none;\n            border: none;\n            color: var(--text-muted);\n            cursor: pointer;\n            padding: 0;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            transition: color 0.3s ease;\n        }\n\n        .toggle-password:hover {\n            color: var(--hover-color);\n        }\n\n        .toggle-password svg {\n            width: 20px;\n            height: 20px;\n        }\n\n        \/* Button Styling *\/\n        .premium-login-btn {\n            width: 100%;\n            padding: 16px;\n            background: var(--primary-color);\n            color: #fff;\n            border: none;\n            border-radius: 12px;\n            font-size: 16px;\n            font-weight: 600;\n            cursor: pointer;\n            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n        }\n\n        .premium-login-btn:hover {\n            background: var(--hover-color);\n            transform: translateY(-2px);\n            box-shadow: 0 8px 20px rgba(24, 181, 179, 0.3);\n        }\n\n        .premium-login-btn:active {\n            transform: translateY(0);\n        }\n\n        \/* Toaster Notification - Top Right *\/\n        #premium-toast {\n            visibility: hidden;\n            min-width: 250px;\n            max-width: 350px;\n            background: #fff;\n            color: var(--text-main);\n            border-radius: 12px;\n            padding: 16px 24px;\n            position: fixed;\n            z-index: 9999;\n            top: 24px;\n            right: 24px;\n            font-size: 15px;\n            font-weight: 500;\n            box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n            opacity: 0;\n            transform: translateX(120%);\n            transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n            display: flex;\n            align-items: center;\n            gap: 12px;\n        }\n\n        #premium-toast.show {\n            visibility: visible;\n            opacity: 1;\n            transform: translateX(0);\n        }\n\n        #premium-toast.error { \n            border-left: 6px solid var(--primary-color);\n        }\n        \n        #premium-toast.success { \n            border-left: 6px solid #10b981; \n        }\n\n        \/* Mobile Responsiveness *\/\n        @media (max-width: 480px) {\n            .premium-login-container {\n                padding: 30px 20px;\n                border-radius: 16px;\n            }\n            #premium-toast {\n                top: 16px;\n                right: 16px;\n                left: 16px;\n                min-width: auto;\n                transform: translateY(-120%);\n            }\n            #premium-toast.show {\n                transform: translateY(0);\n            }\n        }\n    <\/style>\n\n    <div class=\"premium-login-wrapper\">\n        <div class=\"premium-login-container\">\n            <h2>Welcome Back<\/h2>\n            <p class=\"subtitle\">Please sign in to your account<\/p>\n            \n            <form id=\"premium-login-form\" novalidate>\n                <input type=\"hidden\" id=\"security\" name=\"security\" value=\"64d949c312\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/index.php\/wp-json\/wp\/v2\/pages\/1483\" \/>                \n                <div class=\"premium-form-group\">\n                    <label for=\"login_email\">Email Address<\/label>\n                    <input type=\"email\" id=\"login_email\" name=\"login_email\" required placeholder=\"name@example.com\">\n                <\/div>\n                \n                <div class=\"premium-form-group\">\n                    <label for=\"login_password\">Password<\/label>\n                    <div class=\"password-wrapper\">\n                        <input type=\"password\" id=\"login_password\" name=\"login_password\" required placeholder=\"Enter your password\">\n                        <button type=\"button\" class=\"toggle-password\" id=\"togglePassword\" aria-label=\"Toggle password visibility\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" id=\"eye-icon\">\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\" \/>\n                                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z\" \/>\n                            <\/svg>\n                        <\/button>\n                    <\/div>\n                <\/div>\n                \n                <button type=\"submit\" class=\"premium-login-btn\">Log In<\/button>\n            <\/form>\n        <\/div>\n    <\/div>\n\n    <div id=\"premium-toast\">\n        <span id=\"toast-message\"><\/span>\n    <\/div>\n\n    <script>\n    document.addEventListener('DOMContentLoaded', function() {\n        const form = document.getElementById('premium-login-form');\n        const emailInput = document.getElementById('login_email');\n        const passwordInput = document.getElementById('login_password');\n        const toast = document.getElementById('premium-toast');\n        const toastMessage = document.getElementById('toast-message');\n        const toggleBtn = document.getElementById('togglePassword');\n        const eyeIcon = document.getElementById('eye-icon');\n        let toastTimeout;\n\n        \/\/ --- Password Toggle Logic ---\n        toggleBtn.addEventListener('click', function() {\n            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';\n            passwordInput.setAttribute('type', type);\n            \n            if (type === 'text') {\n                eyeIcon.innerHTML = `<path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21\" \/>`;\n            } else {\n                eyeIcon.innerHTML = `<path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\" \/><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z\" \/>`;\n            }\n        });\n\n        \/\/ --- Toaster Logic ---\n        function showToast(message, type) {\n            clearTimeout(toastTimeout);\n            toastMessage.textContent = message;\n            \n            toast.className = '';\n            void toast.offsetWidth; \n            toast.className = 'show ' + type;\n            \n            toastTimeout = setTimeout(function() {\n                toast.classList.remove('show');\n            }, 4000);\n        }\n\n        \/\/ --- Form Validation & Submission ---\n        form.addEventListener('submit', function(e) {\n            e.preventDefault();\n            \n            const emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n            if (!emailInput.value) {\n                showToast('Please enter your email address.', 'error');\n                emailInput.focus();\n                return;\n            }\n            if (!emailRegex.test(emailInput.value)) {\n                showToast('Please enter a valid email format.', 'error');\n                emailInput.focus();\n                return;\n            }\n            if (!passwordInput.value) {\n                showToast('Please enter your password.', 'error');\n                passwordInput.focus();\n                return;\n            }\n\n            const btn = form.querySelector('.premium-login-btn');\n            const originalBtnText = btn.textContent;\n            btn.textContent = 'Authenticating...';\n            btn.disabled = true;\n\n            const formData = new FormData(form);\n            formData.append('action', 'premium_ajax_login');\n\n            fetch('https:\/\/zupitex.in\/wp-admin\/admin-ajax.php', {\n                method: 'POST',\n                body: formData\n            })\n            .then(response => response.json())\n            .then(data => {\n                if (data.success) {\n                    showToast(data.data.message, 'success');\n                    setTimeout(() => {\n                        \/\/ REDIRECT HAPPENS HERE using the URL sent from PHP\n                        window.location.href = data.data.redirect_url;\n                    }, 1200);\n                } else {\n                    showToast(data.data.message, 'error');\n                    btn.textContent = originalBtnText;\n                    btn.disabled = false;\n                }\n            })\n            .catch(error => {\n                showToast('A server error occurred. Please try again.', 'error');\n                btn.textContent = originalBtnText;\n                btn.disabled = false;\n            });\n        });\n    });\n    <\/script>\n    \n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-1483","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/zupitex.in\/index.php\/wp-json\/wp\/v2\/pages\/1483","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zupitex.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/zupitex.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/zupitex.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zupitex.in\/index.php\/wp-json\/wp\/v2\/comments?post=1483"}],"version-history":[{"count":7,"href":"https:\/\/zupitex.in\/index.php\/wp-json\/wp\/v2\/pages\/1483\/revisions"}],"predecessor-version":[{"id":1500,"href":"https:\/\/zupitex.in\/index.php\/wp-json\/wp\/v2\/pages\/1483\/revisions\/1500"}],"wp:attachment":[{"href":"https:\/\/zupitex.in\/index.php\/wp-json\/wp\/v2\/media?parent=1483"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}