{"id":18,"date":"2026-08-19T07:50:49","date_gmt":"2026-08-19T07:50:49","guid":{"rendered":"https:\/\/ecdroide.atz.li\/?page_id=18"},"modified":"2026-08-19T08:28:21","modified_gmt":"2026-08-19T08:28:21","slug":"login","status":"publish","type":"page","link":"https:\/\/ecdroide.atz.li\/?page_id=18","title":{"rendered":"Login"},"content":{"rendered":"    <div class=\"auth-container max-w-md mx-auto my-10 px-4\">\n        <!-- Auth Card -->\n        <div class=\"bg-white rounded-2xl shadow-xl border border-slate-100 p-6 sm:p-8\">\n            \n            <!-- Tab Switcher -->\n            <div class=\"flex rounded-xl bg-slate-100 p-1 mb-6\">\n                <button type=\"button\" id=\"tab-login-btn\" onclick=\"switchAuthTab('login')\" class=\"flex-1 py-2 text-sm font-semibold rounded-lg transition-all bg-white text-sky-700 shadow-sm\">\n                    Sign In\n                <\/button>\n                <button type=\"button\" id=\"tab-register-btn\" onclick=\"switchAuthTab('register')\" class=\"flex-1 py-2 text-sm font-semibold rounded-lg transition-all text-slate-500 hover:text-slate-800\">\n                    Create Account\n                <\/button>\n            <\/div>\n\n            <!-- Error Notifications -->\n            \n            <!-- LOGIN FORM -->\n            <div id=\"auth-login-panel\" class=\"\">\n                <div class=\"text-center mb-6\">\n                    <h2 class=\"text-2xl font-extrabold text-slate-900 tracking-tight\">Welcome Back<\/h2>\n                    <p class=\"text-xs sm:text-sm text-slate-500 mt-1\">Sign in to access your dashboard and orders<\/p>\n                <\/div>\n\n                <form method=\"post\" action=\"\" class=\"space-y-4\">\n                    <input type=\"hidden\" id=\"custom_auth_nonce\" name=\"custom_auth_nonce\" value=\"6e7e008c9a\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/index.php?rest_route=%2Fwp%2Fv2%2Fpages%2F18\" \/>                    <input type=\"hidden\" name=\"auth_action\" value=\"login\" \/>\n                    <input type=\"hidden\" name=\"redirect_to\" value=\"\" \/>\n\n                    <div>\n                        <label class=\"block text-xs font-semibold text-slate-700 mb-1\">Username or Email<\/label>\n                        <input type=\"text\" name=\"log\" required class=\"w-full px-3.5 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm text-slate-800 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:bg-white transition-all\" placeholder=\"name@example.com\" \/>\n                    <\/div>\n\n                    <div>\n                        <div class=\"flex justify-between items-center mb-1\">\n                            <label class=\"block text-xs font-semibold text-slate-700\">Password<\/label>\n                            <a href=\"https:\/\/ecdroide.atz.li\/?page_id=9&#038;lost-password\" class=\"text-xs text-sky-600 hover:text-sky-700 font-medium\">Forgot?<\/a>\n                        <\/div>\n                        <div class=\"relative\">\n                            <input type=\"password\" id=\"login_password\" name=\"pwd\" required class=\"w-full pl-3.5 pr-10 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm text-slate-800 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:bg-white transition-all\" placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\" \/>\n                            <button type=\"button\" onclick=\"togglePasswordVisibility('login_password', this)\" aria-label=\"Show\/Hide Password\" class=\"absolute right-3 top-1\/2 -translate-y-1\/2 text-slate-500 hover:text-slate-700 p-1 focus:outline-none flex items-center justify-center\">\n                                <!-- Eye Icon (Left image in prompt: Open Eye) -->\n                                <svg class=\"w-5 h-5 eye-icon\" viewBox=\"0 0 100 50\" fill=\"currentColor\">\n                                    <path d=\"M50 2C24 2 2 25 2 25S24 48 50 48s48-23 48-23S76 2 50 2zm0 38c-8.3 0-15-6.7-15-15s6.7-15 15-15 15 6.7 15 15-6.7 15-15 15z\"\/>\n                                    <path d=\"M50 16c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm4 6c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.3-3 3-3z\"\/>\n                                <\/svg>\n                                <!-- Eye-Slash Icon (Right image in prompt: Eye with Diagonal Slash) -->\n                                <svg class=\"w-5 h-5 eye-off-icon hidden\" viewBox=\"0 0 100 50\" fill=\"currentColor\">\n                                    <path d=\"M50 2C24 2 2 25 2 25S24 48 50 48s48-23 48-23S76 2 50 2zm0 38c-8.3 0-15-6.7-15-15s6.7-15 15-15 15 6.7 15 15-6.7 15-15 15z\"\/>\n                                    <path d=\"M50 16c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm4 6c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.3-3 3-3z\"\/>\n                                    <line x1=\"22\" y1=\"-8\" x2=\"78\" y2=\"58\" stroke=\"currentColor\" stroke-width=\"7\" stroke-linecap=\"round\"\/>\n                                <\/svg>\n                            <\/button>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"flex items-center\">\n                        <label class=\"flex items-center text-xs text-slate-600 cursor-pointer\">\n                            <input type=\"checkbox\" name=\"rememberme\" value=\"forever\" class=\"rounded border-slate-300 text-sky-600 focus:ring-sky-500 mr-2\" \/>\n                            <span>Remember me<\/span>\n                        <\/label>\n                    <\/div>\n\n                    <button type=\"submit\" class=\"w-full py-3 px-4 bg-gradient-to-r from-sky-500 to-blue-600 hover:from-sky-600 hover:to-blue-700 text-white font-semibold rounded-xl shadow-md hover:shadow-lg transition-all duration-200 flex items-center justify-center gap-2\">\n                        <span>Sign In<\/span>\n                    <\/button>\n                <\/form>\n            <\/div>\n\n            <!-- REGISTER FORM -->\n            <div id=\"auth-register-panel\" class=\"hidden\">\n                <div class=\"text-center mb-6\">\n                    <h2 class=\"text-2xl font-extrabold text-slate-900 tracking-tight\">Create Account<\/h2>\n                    <p class=\"text-xs sm:text-sm text-slate-500 mt-1\">Join ecdroide for exclusive perks and seamless ordering<\/p>\n                <\/div>\n\n                <form method=\"post\" action=\"\" id=\"register-form\" onsubmit=\"return validatePasswords()\" class=\"space-y-4\">\n                    <input type=\"hidden\" id=\"custom_auth_nonce\" name=\"custom_auth_nonce\" value=\"6e7e008c9a\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/index.php?rest_route=%2Fwp%2Fv2%2Fpages%2F18\" \/>                    <input type=\"hidden\" name=\"auth_action\" value=\"register\" \/>\n                    <input type=\"hidden\" name=\"redirect_to\" value=\"\" \/>\n\n                    <div>\n                        <label class=\"block text-xs font-semibold text-slate-700 mb-1\">Username <span class=\"text-rose-500\">*<\/span><\/label>\n                        <input type=\"text\" name=\"reg_username\" required value=\"\" class=\"w-full px-3.5 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm text-slate-800 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:bg-white transition-all\" placeholder=\"e.g. john_doe\" \/>\n                    <\/div>\n\n                    <div>\n                        <label class=\"block text-xs font-semibold text-slate-700 mb-1\">Email Address <span class=\"text-rose-500\">*<\/span><\/label>\n                        <input type=\"email\" name=\"reg_email\" required value=\"\" class=\"w-full px-3.5 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm text-slate-800 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:bg-white transition-all\" placeholder=\"john@example.com\" \/>\n                    <\/div>\n\n                    <div>\n                        <label class=\"block text-xs font-semibold text-slate-700 mb-1\">Password <span class=\"text-rose-500\">*<\/span><\/label>\n                        <div class=\"relative\">\n                            <input type=\"password\" id=\"reg_password\" name=\"reg_password\" required minlength=\"6\" oninput=\"checkPasswordMatchLive()\" class=\"w-full pl-3.5 pr-10 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm text-slate-800 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:bg-white transition-all\" placeholder=\"At least 6 characters\" \/>\n                            <button type=\"button\" onclick=\"togglePasswordVisibility('reg_password', this)\" aria-label=\"Show\/Hide Password\" class=\"absolute right-3 top-1\/2 -translate-y-1\/2 text-slate-500 hover:text-slate-700 p-1 focus:outline-none flex items-center justify-center\">\n                                <!-- Eye Icon -->\n                                <svg class=\"w-5 h-5 eye-icon\" viewBox=\"0 0 100 50\" fill=\"currentColor\">\n                                    <path d=\"M50 2C24 2 2 25 2 25S24 48 50 48s48-23 48-23S76 2 50 2zm0 38c-8.3 0-15-6.7-15-15s6.7-15 15-15 15 6.7 15 15-6.7 15-15 15z\"\/>\n                                    <path d=\"M50 16c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm4 6c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.3-3 3-3z\"\/>\n                                <\/svg>\n                                <!-- Eye-Slash Icon -->\n                                <svg class=\"w-5 h-5 eye-off-icon hidden\" viewBox=\"0 0 100 50\" fill=\"currentColor\">\n                                    <path d=\"M50 2C24 2 2 25 2 25S24 48 50 48s48-23 48-23S76 2 50 2zm0 38c-8.3 0-15-6.7-15-15s6.7-15 15-15 15 6.7 15 15-6.7 15-15 15z\"\/>\n                                    <path d=\"M50 16c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm4 6c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.3-3 3-3z\"\/>\n                                    <line x1=\"22\" y1=\"-8\" x2=\"78\" y2=\"58\" stroke=\"currentColor\" stroke-width=\"7\" stroke-linecap=\"round\"\/>\n                                <\/svg>\n                            <\/button>\n                        <\/div>\n                    <\/div>\n\n                    <div>\n                        <label class=\"block text-xs font-semibold text-slate-700 mb-1\">Confirm Password <span class=\"text-rose-500\">*<\/span><\/label>\n                        <div class=\"relative\">\n                            <input type=\"password\" id=\"reg_password_confirm\" name=\"reg_password_confirm\" required minlength=\"6\" oninput=\"checkPasswordMatchLive()\" class=\"w-full pl-3.5 pr-10 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm text-slate-800 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:bg-white transition-all\" placeholder=\"Re-enter your password\" \/>\n                            <button type=\"button\" onclick=\"togglePasswordVisibility('reg_password_confirm', this)\" aria-label=\"Show\/Hide Password\" class=\"absolute right-3 top-1\/2 -translate-y-1\/2 text-slate-500 hover:text-slate-700 p-1 focus:outline-none flex items-center justify-center\">\n                                <!-- Eye Icon -->\n                                <svg class=\"w-5 h-5 eye-icon\" viewBox=\"0 0 100 50\" fill=\"currentColor\">\n                                    <path d=\"M50 2C24 2 2 25 2 25S24 48 50 48s48-23 48-23S76 2 50 2zm0 38c-8.3 0-15-6.7-15-15s6.7-15 15-15 15 6.7 15 15-6.7 15-15 15z\"\/>\n                                    <path d=\"M50 16c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm4 6c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.3-3 3-3z\"\/>\n                                <\/svg>\n                                <!-- Eye-Slash Icon -->\n                                <svg class=\"w-5 h-5 eye-off-icon hidden\" viewBox=\"0 0 100 50\" fill=\"currentColor\">\n                                    <path d=\"M50 2C24 2 2 25 2 25S24 48 50 48s48-23 48-23S76 2 50 2zm0 38c-8.3 0-15-6.7-15-15s6.7-15 15-15 15 6.7 15 15-6.7 15-15 15z\"\/>\n                                    <path d=\"M50 16c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm4 6c1.7 0 3 1.3 3 3s-1.3 3-3 3-3-1.3-3-3 1.3-3 3-3z\"\/>\n                                    <line x1=\"22\" y1=\"-8\" x2=\"78\" y2=\"58\" stroke=\"currentColor\" stroke-width=\"7\" stroke-linecap=\"round\"\/>\n                                <\/svg>\n                            <\/button>\n                        <\/div>\n                        <p id=\"password-match-msg\" class=\"text-xs mt-1.5 hidden\"><\/p>\n                    <\/div>\n\n                    <button type=\"submit\" class=\"w-full py-3 px-4 bg-gradient-to-r from-sky-500 to-blue-600 hover:from-sky-600 hover:to-blue-700 text-white font-semibold rounded-xl shadow-md hover:shadow-lg transition-all duration-200 flex items-center justify-center gap-2\">\n                        <span>Create Account<\/span>\n                    <\/button>\n                <\/form>\n            <\/div>\n\n        <\/div>\n    <\/div>\n\n    <script>\n    function switchAuthTab(tab) {\n        const loginPanel = document.getElementById('auth-login-panel');\n        const registerPanel = document.getElementById('auth-register-panel');\n        const loginBtn = document.getElementById('tab-login-btn');\n        const registerBtn = document.getElementById('tab-register-btn');\n\n        if (tab === 'login') {\n            loginPanel.classList.remove('hidden');\n            registerPanel.classList.add('hidden');\n            loginBtn.className = 'flex-1 py-2 text-sm font-semibold rounded-lg transition-all bg-white text-sky-700 shadow-sm';\n            registerBtn.className = 'flex-1 py-2 text-sm font-semibold rounded-lg transition-all text-slate-500 hover:text-slate-800';\n        } else {\n            loginPanel.classList.add('hidden');\n            registerPanel.classList.remove('hidden');\n            registerBtn.className = 'flex-1 py-2 text-sm font-semibold rounded-lg transition-all bg-white text-sky-700 shadow-sm';\n            loginBtn.className = 'flex-1 py-2 text-sm font-semibold rounded-lg transition-all text-slate-500 hover:text-slate-800';\n        }\n    }\n\n    function togglePasswordVisibility(inputId, btn) {\n        const input = document.getElementById(inputId);\n        const eyeIcon = btn.querySelector('.eye-icon');\n        const eyeOffIcon = btn.querySelector('.eye-off-icon');\n\n        if (input.type === 'password') {\n            input.type = 'text';\n            if (eyeIcon) eyeIcon.classList.add('hidden');\n            if (eyeOffIcon) eyeOffIcon.classList.remove('hidden');\n        } else {\n            input.type = 'password';\n            if (eyeIcon) eyeIcon.classList.remove('hidden');\n            if (eyeOffIcon) eyeOffIcon.classList.add('hidden');\n        }\n    }\n\n    function checkPasswordMatchLive() {\n        const p1 = document.getElementById('reg_password').value;\n        const p2 = document.getElementById('reg_password_confirm').value;\n        const msg = document.getElementById('password-match-msg');\n\n        if (!p2) {\n            msg.classList.add('hidden');\n            return;\n        }\n\n        msg.classList.remove('hidden');\n        if (p1 === p2) {\n            msg.textContent = '\u2713 Passwords match';\n            msg.className = 'text-xs mt-1.5 text-emerald-600 font-medium';\n        } else {\n            msg.textContent = '\u2715 Passwords do not match';\n            msg.className = 'text-xs mt-1.5 text-rose-500 font-medium';\n        }\n    }\n\n    function validatePasswords() {\n        const p1 = document.getElementById('reg_password').value;\n        const p2 = document.getElementById('reg_password_confirm').value;\n\n        if (p1 !== p2) {\n            alert('Passwords do not match! Please check and confirm your passwords.');\n            return false;\n        }\n        return true;\n    }\n    <\/script>\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":0,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-18","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ecdroide.atz.li\/index.php?rest_route=\/wp\/v2\/pages\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ecdroide.atz.li\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ecdroide.atz.li\/index.php?rest_route=\/wp\/v2\/types\/page"}],"replies":[{"embeddable":true,"href":"https:\/\/ecdroide.atz.li\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=18"}],"version-history":[{"count":1,"href":"https:\/\/ecdroide.atz.li\/index.php?rest_route=\/wp\/v2\/pages\/18\/revisions"}],"predecessor-version":[{"id":22,"href":"https:\/\/ecdroide.atz.li\/index.php?rest_route=\/wp\/v2\/pages\/18\/revisions\/22"}],"wp:attachment":[{"href":"https:\/\/ecdroide.atz.li\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}