{"id":239,"date":"2026-09-07T00:51:20","date_gmt":"2026-09-07T00:51:20","guid":{"rendered":"https:\/\/l3eunique.com\/?page_id=239"},"modified":"2026-09-07T00:51:20","modified_gmt":"2026-09-07T00:51:20","slug":"register","status":"publish","type":"page","link":"https:\/\/l3eunique.com\/ar\/register\/","title":{"rendered":"Register"},"content":{"rendered":"\n<style>\n  \/* \u0625\u0644\u063a\u0627\u0621 \u0623\u064a \u0647\u0648\u0627\u0645\u0634 \u0645\u0646 \u0627\u0644\u0642\u0627\u0644\u0628 \u0627\u0644\u062e\u0627\u0631\u062c\u064a *\/\n  html, body {\n    margin: 0 !important;\n    padding: 0 !important;\n    width: 100% !important;\n    height: 100% !important;\n    overflow-x: hidden;\n  }\n\n  \/* \u0627\u0644\u062d\u0627\u0648\u064a\u0629 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0644\u062a\u063a\u0637\u064a\u0629 \u0627\u0644\u0634\u0627\u0634\u0629 \u0628\u0627\u0644\u0643\u0627\u0645\u0644 *\/\n  .custom-register-wrapper {\n    width: 100vw;\n    min-height: 100vh;\n    background: #0f1015;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 40px 20px;\n    box-sizing: border-box;\n    position: relative;\n    left: 50%;\n    right: 50%;\n    margin-left: -50vw !important;\n    margin-right: -50vw !important;\n    font-family: 'Plus Jakarta Sans', sans-serif;\n  }\n\n  \/* \u062a\u0623\u062b\u064a\u0631\u0627\u062a \u0625\u0636\u0627\u0621\u0629 \u062e\u0644\u0641\u064a\u0629 \u0639\u0635\u0631\u064a\u0629 *\/\n  .custom-register-wrapper::before {\n    content: '';\n    position: absolute;\n    width: 450px;\n    height: 450px;\n    background: radial-gradient(circle, rgba(0, 180, 216, 0.18) 0%, rgba(0,0,0,0) 70%);\n    top: -50px;\n    left: -50px;\n    border-radius: 50%;\n    pointer-events: none;\n  }\n\n  .custom-register-wrapper::after {\n    content: '';\n    position: absolute;\n    width: 450px;\n    height: 450px;\n    background: radial-gradient(circle, rgba(184, 151, 88, 0.15) 0%, rgba(0,0,0,0) 70%);\n    bottom: -50px;\n    right: -50px;\n    border-radius: 50%;\n    pointer-events: none;\n  }\n\n  .register-card {\n    width: 100%;\n    max-width: 460px;\n    background: rgba(22, 24, 33, 0.88);\n    backdrop-filter: blur(20px);\n    border: 1px solid rgba(255, 255, 255, 0.12);\n    border-radius: 24px;\n    padding: 36px 28px;\n    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);\n    position: relative;\n    z-index: 10;\n    box-sizing: border-box;\n  }\n\n  .card-header {\n    text-align: center;\n    margin-bottom: 28px;\n  }\n\n  .card-header h2 {\n    color: #ffffff;\n    font-size: 26px;\n    font-weight: 800;\n    margin: 0 0 6px 0;\n    letter-spacing: -0.5px;\n  }\n\n  .card-header p {\n    color: #94a3b8;\n    font-size: 13px;\n    margin: 0;\n  }\n\n  .form-group {\n    margin-bottom: 18px;\n  }\n\n  .form-group label {\n    display: block;\n    color: #cbd5e1;\n    font-size: 13px;\n    font-weight: 600;\n    margin-bottom: 6px;\n  }\n\n  .form-group label span.req {\n    color: #ef4444;\n  }\n\n  .input-wrapper {\n    position: relative;\n    display: flex;\n    align-items: center;\n  }\n\n  .input-wrapper input {\n    width: 100%;\n    padding: 13px 16px;\n    background: rgba(15, 16, 21, 0.7);\n    border: 1.5px solid rgba(255, 255, 255, 0.12);\n    border-radius: 12px;\n    color: #ffffff;\n    font-size: 14px;\n    outline: none;\n    transition: all 0.3s ease;\n    box-sizing: border-box;\n  }\n\n  .input-wrapper input:focus {\n    border-color: #00b4d8;\n    box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.15);\n    background: rgba(15, 16, 21, 0.95);\n  }\n\n  \/* \u0645\u062c\u0645\u0648\u0639\u0629 \u062d\u0642\u0644 \u0627\u0644\u0647\u0627\u062a\u0641 \u0648\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u062f\u0648\u0644 *\/\n  .phone-input-group {\n    display: flex;\n    gap: 8px;\n  }\n\n  .country-select {\n    background: rgba(15, 16, 21, 0.8);\n    border: 1.5px solid rgba(255, 255, 255, 0.12);\n    border-radius: 12px;\n    color: #ffffff;\n    padding: 0 10px;\n    font-size: 13px;\n    outline: none;\n    cursor: pointer;\n    transition: all 0.3s ease;\n  }\n\n  .country-select:focus {\n    border-color: #00b4d8;\n  }\n\n  .country-select option {\n    background: #161821;\n    color: #ffffff;\n  }\n\n  \/* \u0632\u0631\u0627\u0631 \u0639\u0631\u0636 \u0643\u0644\u0645\u0629 \u0627\u0644\u0633\u0631 \u0639\u0646\u062f \u0627\u0644\u0647\u0648\u0644\u062f *\/\n  .toggle-pass-btn {\n    position: absolute;\n    right: 12px;\n    background: transparent;\n    border: none;\n    color: #64748b;\n    cursor: pointer;\n    font-size: 12px;\n    padding: 4px;\n    user-select: none;\n    transition: color 0.2s;\n  }\n\n  .toggle-pass-btn:hover {\n    color: #00b4d8;\n  }\n\n  \/* \u0627\u062e\u062a\u0628\u0627\u0631 \u0627\u0644\u0628\u0648\u062a *\/\n  .captcha-box {\n    background: rgba(15, 16, 21, 0.5);\n    border: 1px dashed rgba(255, 255, 255, 0.15);\n    border-radius: 12px;\n    padding: 12px 16px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 22px;\n  }\n\n  .captcha-label {\n    color: #cbd5e1;\n    font-size: 13px;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n  }\n\n  .captcha-checkbox {\n    width: 18px;\n    height: 18px;\n    accent-color: #00b4d8;\n    cursor: pointer;\n  }\n\n  .captcha-badge {\n    font-size: 10px;\n    color: #64748b;\n    background: rgba(255, 255, 255, 0.05);\n    padding: 3px 6px;\n    border-radius: 4px;\n  }\n\n  .submit-btn {\n    width: 100%;\n    padding: 15px;\n    background: linear-gradient(135deg, #00b4d8 0%, #0077b6 100%);\n    border: none;\n    border-radius: 12px;\n    color: #ffffff;\n    font-weight: 700;\n    font-size: 15px;\n    cursor: pointer;\n    transition: all 0.3s ease;\n    box-shadow: 0 8px 20px rgba(0, 180, 216, 0.3);\n  }\n\n  .submit-btn:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 12px 25px rgba(0, 180, 216, 0.45);\n  }\n\n  .submit-btn:active {\n    transform: scale(0.98);\n  }\n\n  \/* \u062e\u0637\u0648\u0629 \u062a\u0623\u0643\u064a\u062f \u0627\u0644\u0640 OTP *\/\n  .otp-step {\n    display: none;\n    text-align: center;\n  }\n\n  .otp-inputs {\n    display: flex;\n    gap: 8px;\n    justify-content: center;\n    margin: 20px 0;\n  }\n\n  .otp-inputs input {\n    width: 42px;\n    height: 50px;\n    text-align: center;\n    font-size: 18px;\n    font-weight: 700;\n    background: rgba(15, 16, 21, 0.8);\n    border: 1.5px solid rgba(255, 255, 255, 0.15);\n    border-radius: 10px;\n    color: #00b4d8;\n    outline: none;\n  }\n\n  .otp-inputs input:focus {\n    border-color: #00b4d8;\n    box-shadow: 0 0 10px rgba(0, 180, 216, 0.3);\n  }\n\n  .resend-link {\n    color: #64748b;\n    font-size: 12px;\n    margin-top: 14px;\n    display: block;\n  }\n\n  .resend-link span {\n    color: #00b4d8;\n    cursor: pointer;\n    font-weight: 600;\n  }\n<\/style>\n\n<div class=\"custom-register-wrapper\">\n  <div class=\"register-card\">\n    \n    <!-- Step 1: Form Details -->\n    <form id=\"registerForm\" onsubmit=\"handleRegister(event)\">\n      <div class=\"card-header\">\n        <h2>Create Account<\/h2>\n        <p>Please enter your details to register<\/p>\n      <\/div>\n\n      <!-- Full Name (Modified Placeholder) -->\n      <div class=\"form-group\">\n        <label>Full Name<\/label>\n        <div class=\"input-wrapper\">\n          <input type=\"text\" placeholder=\"Your Full Name\" required>\n        <\/div>\n      <\/div>\n\n      <!-- Email Address -->\n      <div class=\"form-group\">\n        <label>Email Address <span class=\"req\">*<\/span><\/label>\n        <div class=\"input-wrapper\">\n          <input type=\"email\" id=\"userEmail\" placeholder=\"example@gmail.com\" required>\n        <\/div>\n      <\/div>\n\n      <!-- Phone Number with Country Flag Selector -->\n      <div class=\"form-group\">\n        <label>Phone Number<\/label>\n        <div class=\"phone-input-group\">\n          <select class=\"country-select\" id=\"countryCode\">\n            <option value=\"+20\">\ud83c\uddea\ud83c\uddec +20<\/option>\n            <option value=\"+966\">\ud83c\uddf8\ud83c\udde6 +966<\/option>\n            <option value=\"+971\">\ud83c\udde6\ud83c\uddea +971<\/option>\n            <option value=\"+1\">\ud83c\uddfa\ud83c\uddf8 +1<\/option>\n            <option value=\"+44\">\ud83c\uddec\ud83c\udde7 +44<\/option>\n          <\/select>\n          <div class=\"input-wrapper\" style=\"flex: 1;\">\n            <input type=\"tel\" placeholder=\"1012345678\">\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- Password -->\n      <div class=\"form-group\">\n        <label>Password <span class=\"req\">*<\/span><\/label>\n        <div class=\"input-wrapper\">\n          <input type=\"password\" id=\"passInput\" placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\" required>\n          <button type=\"button\" class=\"toggle-pass-btn\" \n                  onmousedown=\"showPass()\" onmouseup=\"hidePass()\" \n                  onmouseleave=\"hidePass()\" ontouchstart=\"showPass()\" ontouchend=\"hidePass()\">\n            \ud83d\udc41\ufe0f Hold to View\n          <\/button>\n        <\/div>\n      <\/div>\n\n      <!-- Anti-Bot Check -->\n      <div class=\"captcha-box\">\n        <div class=\"captcha-label\">\n          <input type=\"checkbox\" id=\"botCheck\" class=\"captcha-checkbox\" required>\n          <span>I am not a robot<\/span>\n        <\/div>\n        <span class=\"captcha-badge\">Protected<\/span>\n      <\/div>\n\n      <button type=\"submit\" class=\"submit-btn\">Send Verification Code \u2192<\/button>\n    <\/form>\n\n\n    <!-- Step 2: OTP Verification -->\n    <div id=\"otpStep\" class=\"otp-step\">\n      <div class=\"card-header\">\n        <h2>Verify Your Email<\/h2>\n        <p>A 6-digit code has been sent to <br><b id=\"displayEmail\" style=\"color:#00b4d8;\"><\/b><\/p>\n      <\/div>\n\n      <div class=\"otp-inputs\">\n        <input type=\"text\" maxlength=\"1\" oninput=\"moveNext(this, 1)\">\n        <input type=\"text\" maxlength=\"1\" oninput=\"moveNext(this, 2)\">\n        <input type=\"text\" maxlength=\"1\" oninput=\"moveNext(this, 3)\">\n        <input type=\"text\" maxlength=\"1\" oninput=\"moveNext(this, 4)\">\n        <input type=\"text\" maxlength=\"1\" oninput=\"moveNext(this, 5)\">\n        <input type=\"text\" maxlength=\"1\" oninput=\"moveNext(this, 6)\">\n      <\/div>\n\n      <button type=\"button\" onclick=\"verifyOTP()\" class=\"submit-btn\">Verify &#038; Complete Registration<\/button>\n\n      <a class=\"resend-link\">Didn&#8217;t receive the code? <span onclick=\"alert('Code resent!')\">Resend Code<\/span><\/a>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<script>\n  function showPass() {\n    document.getElementById('passInput').type = 'text';\n  }\n  function hidePass() {\n    document.getElementById('passInput').type = 'password';\n  }\n\n  function handleRegister(e) {\n    e.preventDefault();\n    const email = document.getElementById('userEmail').value;\n    document.getElementById('displayEmail').innerText = email;\n    \n    document.getElementById('registerForm').style.display = 'none';\n    document.getElementById('otpStep').style.display = 'block';\n  }\n\n  function moveNext(elem, index) {\n    if (elem.value.length === 1) {\n      const inputs = document.querySelectorAll('.otp-inputs input');\n      if (index < inputs.length) {\n        inputs[index].focus();\n      }\n    }\n  }\n\n  function verifyOTP() {\n    alert('Account verified successfully!');\n  }\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Create Account Please enter your details to register Full Name Email Address * Phone Number \ud83c\uddea\ud83c\uddec +20\ud83c\uddf8\ud83c\udde6 +966\ud83c\udde6\ud83c\uddea +971\ud83c\uddfa\ud83c\uddf8 +1\ud83c\uddec\ud83c\udde7 +44 Password * \ud83d\udc41\ufe0f Hold to View I am not a robot Protected Send Verification Code \u2192 Verify Your Email A 6-digit code has been sent to Verify &#038; Complete Registration Didn&#8217;t receive the code? [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"postBodyCss":"","postBodyMargin":[],"postBodyPadding":[],"postBodyBackground":{"backgroundType":"classic","gradient":""},"footnotes":""},"class_list":["post-239","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/l3eunique.com\/ar\/wp-json\/wp\/v2\/pages\/239","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/l3eunique.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/l3eunique.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/l3eunique.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/l3eunique.com\/ar\/wp-json\/wp\/v2\/comments?post=239"}],"version-history":[{"count":0,"href":"https:\/\/l3eunique.com\/ar\/wp-json\/wp\/v2\/pages\/239\/revisions"}],"wp:attachment":[{"href":"https:\/\/l3eunique.com\/ar\/wp-json\/wp\/v2\/media?parent=239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}