{"id":727,"date":"2026-02-26T09:42:53","date_gmt":"2026-02-26T09:42:53","guid":{"rendered":"https:\/\/irfan-design.mmtdemo.com\/?page_id=727"},"modified":"2026-02-27T12:00:51","modified_gmt":"2026-02-27T12:00:51","slug":"register-login","status":"publish","type":"page","link":"https:\/\/irfan-design.mmtdemo.com\/index.php\/register-login\/","title":{"rendered":"Register\/Login"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"727\" class=\"elementor elementor-727\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-189d1cf e-flex e-con-boxed e-con e-parent\" data-id=\"189d1cf\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f22df25 elementor-widget elementor-widget-spacer\" data-id=\"f22df25\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-05e0581 e-con-full e-flex e-con e-parent\" data-id=\"05e0581\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f881d7f elementor-widget elementor-widget-shortcode\" data-id=\"f881d7f\" 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\"><!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Login & Register<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bebas+Neue&family=DM+Sans:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n<script src=\"https:\/\/www.google.com\/recaptcha\/api.js\" async defer><\/script>\n<style>\n  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n  :root {\n    --yellow: #F5C800;\n    --black: #111;\n    --border: BLACK;\n    --input-bg: #f7f7f7;\n    --text: #222;\n    --red: #c0392b;\n  }\n\n \n\n  .page-wrapper {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 32px;\n    max-width: 960px;\n    width: 100%;\n  }\n\n  @media (max-width: 700px) {\n    .page-wrapper { grid-template-columns: 1fr; }\n  }\n\n  .section-title {\n    font-family: 'Bebas Neue', sans-serif;\n    font-size: 2.4rem;\n    letter-spacing: 1px;\n    color: var(--black);\n    margin-bottom: 20px;\n  }\n\n  .card {\n    background: #fff;\n    border: 1.5px solid var(--border);\n    border-radius: 4px;\n    padding: 32px 28px;\n  }\n\n  \/* Google Button *\/\n  .google-btn {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    border: 1.5px solid var(--border);\n    border-radius: 4px;\n    padding: 9px 18px;\n    background: #fff;\n    cursor: pointer;\n    font-family: 'DM Sans', sans-serif;\n    font-size: 0.93rem;\n    font-weight: 500;\n    color: var(--text);\n    margin-bottom: 22px;\n    transition: box-shadow 0.2s, background 0.2s;\n  }\n  .google-btn:hover { background: #f5f5f5; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }\n  .google-btn svg { width: 20px; height: 20px; flex-shrink: 0; }\n\n  .divider {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin-bottom: 20px;\n    color: #aaa;\n    font-size: 0.82rem;\n  }\n  .divider::before, .divider::after {\n    content: '';\n    flex: 1;\n    height: 1px;\n    background: var(--border);\n  }\n\n  label {\n    display: block;\n    font-weight: 600;\n    font-size: 0.88rem;\n    margin-bottom: 7px;\n    color: var(--text);\n  }\n  label span.req { color: var(--red); margin-left: 2px; }\n\n  .input-wrap {\n    position: relative;\n    margin-bottom: 18px;\n  }\n\n  input[type=\"text\"],\n  input[type=\"email\"],\n  input[type=\"password\"] {\n    width: 100%;\n    padding: 11px 14px;\n    border: 1.5px solid var(--border);\n    border-radius: 3px;\n    background: var(--input-bg);\n    font-family: 'DM Sans', sans-serif;\n    font-size: 0.95rem;\n    color: var(--text);\n    outline: none;\n    transition: border-color 0.2s, box-shadow 0.2s;\n  }\n  input:focus {\n    border-color: var(--yellow);\n    box-shadow: 0 0 0 3px rgba(245,200,0,0.18);\n    background: #fff;\n  }\n\n  .toggle-pw {\n    position: absolute;\n    right: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    background: none;\n    border: none;\n    cursor: pointer;\n    color: #888;\n    display: flex;\n    align-items: center;\n  }\n  .toggle-pw:hover { color: var(--black); }\n\n  \/* reCAPTCHA fake *\/\n  .captcha-box {\n    border: 1.5px solid var(--border);\n    border-radius: 4px;\n    padding: 14px 16px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    background: #f9f9f9;\n    margin-bottom: 18px;\n    user-select: none;\n    cursor: pointer;\n    transition: box-shadow 0.2s;\n  }\n  .captcha-box:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }\n  .captcha-left { display: flex; align-items: center; gap: 14px; }\n  .captcha-check {\n    width: 24px; height: 24px;\n    border: 2px solid #ccc;\n    border-radius: 2px;\n    background: #fff;\n    display: flex; align-items: center; justify-content: center;\n    transition: all 0.25s;\n    flex-shrink: 0;\n  }\n  .captcha-check.checked {\n    border-color: #4CAF50;\n    background: #4CAF50;\n  }\n  .captcha-check svg { display: none; }\n  .captcha-check.checked svg { display: block; }\n  .captcha-label { font-size: 0.9rem; color: #444; font-weight: 500; }\n\n  .captcha-right { text-align: center; }\n  .captcha-right .rc-icon { font-size: 1.4rem; margin-bottom: 2px; }\n  .captcha-right .rc-text { font-size: 0.62rem; color: #888; line-height: 1.2; }\n\n  \/* Bottom row *\/\n  .login-actions {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    margin-top: 4px;\n  }\n\n  .btn-primary {\n    padding: 10px 26px;\n    background: #fff;\n    border: 2px solid var(--yellow);\n    border-radius: 3px;\n    font-family: 'DM Sans', sans-serif;\n    font-size: 0.95rem;\n    font-weight: 700;\n    color: var(--black);\n    cursor: pointer;\n    transition: background 0.2s, box-shadow 0.2s, transform 0.1s;\n    white-space: nowrap;\n  }\n  .btn-primary:hover {\n    background: var(--yellow);\n    box-shadow: 0 3px 10px rgba(245,200,0,0.35);\n    transform: translateY(-1px);\n  }\n  .btn-primary:active { transform: translateY(0); }\n\n  .btn-register {\n    background: var(--yellow);\n    border: 2px solid var(--yellow);\n    padding: 10px 28px;\n  }\n  .btn-register:hover {\n    background: #e6bb00;\n    border-color: #e6bb00;\n    box-shadow: 0 3px 10px rgba(245,200,0,0.45);\n  }\n\n  .remember-wrap {\n    display: flex;\n    align-items: center;\n    gap: 7px;\n    font-size: 0.88rem;\n    color: #555;\n    cursor: pointer;\n  }\n  .remember-wrap input[type=\"checkbox\"] {\n    width: 16px; height: 16px;\n    accent-color: var(--yellow);\n    cursor: pointer;\n  }\n\n  .lost-pw {\n    margin-top: 14px;\n    font-size: 0.83rem;\n    color: #777;\n    cursor: pointer;\n    text-decoration: underline;\n    display: inline-block;\n  }\n  .lost-pw:hover { color: var(--black); }\n\n  .info-text {\n    font-size: 0.82rem;\n    color: #777;\n    margin-bottom: 16px;\n    line-height: 1.5;\n  }\n\n  .privacy-text {\n    font-size: 0.78rem;\n    color: #888;\n    line-height: 1.55;\n    margin-top: 14px;\n  }\n\n  \/* Animated checkmark on captcha solve *\/\n  @keyframes pop { 0%{transform:scale(0.5);opacity:0} 70%{transform:scale(1.2)} 100%{transform:scale(1);opacity:1} }\n  .captcha-check.checked { animation: pop 0.3s ease; }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"page-wrapper\">\n\n  <!-- LOGIN -->\n  <div>\n    <div class=\"section-title\">Login<\/div>\n    <div class=\"card\">\n\n      <!-- Google Sign In -->\n      <button class=\"google-btn\">\n        <svg viewBox=\"0 0 48 48\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n          <path fill=\"#EA4335\" d=\"M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z\"\/>\n          <path fill=\"#4285F4\" d=\"M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z\"\/>\n          <path fill=\"#FBBC05\" d=\"M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z\"\/>\n          <path fill=\"#34A853\" d=\"M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.18 1.48-4.97 2.36-8.16 2.36-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z\"\/>\n        <\/svg>\n        Sign in with Google\n      <\/button>\n\n      <div class=\"divider\">or<\/div>\n\n      <!-- Username -->\n      <label>Username or email address <span class=\"req\">*<\/span><\/label>\n      <div class=\"input-wrap\">\n        <input type=\"text\" id=\"login-user\" autocomplete=\"username\" placeholder=\"\">\n      <\/div>\n\n      <!-- Password -->\n      <label>Password <span class=\"req\">*<\/span><\/label>\n      <div class=\"input-wrap\">\n        <input type=\"password\" id=\"login-pass\" autocomplete=\"current-password\" placeholder=\"\">\n        <button class=\"toggle-pw\" onclick=\"togglePw('login-pass', this)\" tabindex=\"-1\" aria-label=\"Toggle password\">\n          <svg id=\"eye-login\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n            <path d=\"M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94\"\/>\n            <path d=\"M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19\"\/>\n            <line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"\/>\n          <\/svg>\n        <\/button>\n      <\/div>\n\n      <!-- Real reCAPTCHA -->\n      <div class=\"g-recaptcha\" data-sitekey=\"6LfxjXksAAAAAAgCDWUHFh3bKVbOG5bPQouJe_P_\" data-callback=\"onLoginCaptcha\" style=\"margin-bottom:18px;\"><\/div>\n\n      <!-- Actions -->\n      <div class=\"login-actions\">\n        <button class=\"btn-primary\" onclick=\"handleLogin()\">Log in<\/button>\n        <label class=\"remember-wrap\">\n          <input type=\"checkbox\" id=\"remember\"> Remember me\n        <\/label>\n      <\/div>\n\n      <a class=\"lost-pw\" href=\"#\">Lost your password?<\/a>\n    <\/div>\n  <\/div>\n\n  <!-- REGISTER -->\n  <div>\n    <div class=\"section-title\">Register<\/div>\n    <div class=\"card\">\n\n      <!-- Email -->\n      <label>Email address <span class=\"req\">*<\/span><\/label>\n      <div class=\"input-wrap\">\n        <input type=\"email\" id=\"reg-email\" autocomplete=\"email\" placeholder=\"\">\n      <\/div>\n      <p class=\"info-text\">A link to set a new password will be sent to your email address.<\/p>\n\n      <!-- Real reCAPTCHA -->\n      <div class=\"g-recaptcha\" data-sitekey=\"6LfxjXksAAAAAAgCDWUHFh3bKVbOG5bPQouJe_P_\" data-callback=\"onRegisterCaptcha\" style=\"margin-bottom:14px;\"><\/div>\n\n      <p class=\"privacy-text\">Your personal data will be used to support your experience throughout this website, to manage access to your account, and for other purposes described in our <a href=\"#\" style=\"color:#555;\">privacy policy<\/a>.<\/p>\n\n      <button class=\"btn-primary btn-register\" style=\"margin-top:18px;\" onclick=\"handleRegister()\">Register<\/button>\n    <\/div>\n  <\/div>\n\n<\/div>\n\n<script>\n  let loginCaptchaToken = null;\n  let registerCaptchaToken = null;\n\n  function onLoginCaptcha(token) { loginCaptchaToken = token; }\n  function onRegisterCaptcha(token) { registerCaptchaToken = token; }\n\n  function togglePw(id, btn) {\n    const inp = document.getElementById(id);\n    if (inp.type === 'password') {\n      inp.type = 'text';\n      btn.innerHTML = `<svg width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"\/><circle cx=\"12\" cy=\"12\" r=\"3\"\/><\/svg>`;\n    } else {\n      inp.type = 'password';\n      btn.innerHTML = `<svg width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94\"\/><path d=\"M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19\"\/><line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"\/><\/svg>`;\n    }\n  }\n\n  function handleLogin() {\n    const user = document.getElementById('login-user').value;\n    const pass = document.getElementById('login-pass').value;\n    if (!user || !pass) { alert('Please fill in all required fields.'); return; }\n    if (!loginCaptchaToken) { alert('Please complete the CAPTCHA.'); return; }\n    alert('Login successful! \u2713\\nCAPTCHA verified.');\n  }\n\n  function handleRegister() {\n    const email = document.getElementById('reg-email').value;\n    if (!email) { alert('Please enter your email address.'); return; }\n    if (!registerCaptchaToken) { alert('Please complete the CAPTCHA.'); return; }\n    alert('Registration link sent to: ' + email + ' \u2713\\nCAPTCHA verified.');\n  }\n<\/script>\n<\/body>\n<\/html>\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d00e63a e-flex e-con-boxed e-con e-parent\" data-id=\"d00e63a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e854cd6 elementor-widget elementor-widget-spacer\" data-id=\"e854cd6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\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>Login &#038; Register Login Sign in with Google or Username or email address * Password * Log in Remember me Lost your password? Register Email address * A link to set a new password will be sent to your email address. Your personal data will be used to support your experience throughout this website, to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-727","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/irfan-design.mmtdemo.com\/index.php\/wp-json\/wp\/v2\/pages\/727","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/irfan-design.mmtdemo.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/irfan-design.mmtdemo.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/irfan-design.mmtdemo.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/irfan-design.mmtdemo.com\/index.php\/wp-json\/wp\/v2\/comments?post=727"}],"version-history":[{"count":37,"href":"https:\/\/irfan-design.mmtdemo.com\/index.php\/wp-json\/wp\/v2\/pages\/727\/revisions"}],"predecessor-version":[{"id":882,"href":"https:\/\/irfan-design.mmtdemo.com\/index.php\/wp-json\/wp\/v2\/pages\/727\/revisions\/882"}],"wp:attachment":[{"href":"https:\/\/irfan-design.mmtdemo.com\/index.php\/wp-json\/wp\/v2\/media?parent=727"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}