Captcha design

login/index.html

@@ -15,36 +15,58 @@
             justify-content: center;
             align-items: center;
             background-color: var(--main-bg-color);
-            display: flex; 
+            display: flex;
             height: 100dvh;
             margin: 0;
         }
 
         .auth-card {
-            background-color: rgba(255, 255, 255, 0.015); 
+            background-color: rgba(255, 255, 255, 0.015);
             border: var(--border-width) solid var(--light-border-color);
             border-radius: 1.2rem;
             width: 100%;
             max-width: 24rem;
-            overflow: hidden; 
+            overflow: hidden;
-            box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3); 
+            box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.3);
         }
 
         .auth-container {
             display: flex;
-            width: 200%; 
+            width: 300%;
-            transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1); 
+            transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
         }
 
         .auth-box {
-            width: 50%;
+            width: 33.333%;
             display: flex;
             flex-direction: column;
-            padding: 2.5rem 2rem; 
+            padding: 2.5rem 2rem;
         }
 
         .show-register {
-            transform: translateX(-50%);
+            transform: translateX(-33.333%);
+        }
+
+        .show-captcha {
+            transform: translateX(-66.666%);
+        }
+
+        .captcha-img {
+            width: 100%;
+            background-color: #222;
+            margin-bottom: 1rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: var(--border-width) solid var(--light-border-color);
+            border-radius: 1.2rem;
+            overflow: hidden;
+        }
+
+        .captcha-img img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
         }
 
         .auth-header {
@@ -92,7 +114,7 @@
             width: 100%;
             margin: 0 !important;
         }
-        
+
 
         .submit-button {
             margin: 1.5rem 0 0 0 !important;
@@ -104,9 +126,11 @@
             border: none;
             font-size: 1.05rem;
         }
+
         button:hover {
             background-color: rgba(255, 255, 255, 0.5);
         }
+
         .footer-links {
             text-align: center;
             margin-top: 2rem;
@@ -146,7 +170,7 @@
         <div class="auth-box" id="login-box">
             <div class="auth-header">
                 <h1>Larpix</h1>
-                <p>Sign in to your secure instance.</p>
+                <p>Sign in to your larpix instance.</p>
             </div>
 
             <form id="form-login">
@@ -180,7 +204,7 @@
         <div class="auth-box" id="register-box">
             <div class="auth-header">
                 <h1>Join Larpix</h1>
-                <p>Start your encrypted journey today.</p>
+                <p>Create new larpix account.</p>
             </div>
 
             <form id="form-register">
@@ -216,29 +240,80 @@
             </div>
         </div>
 
+        <div class="auth-box" id="captcha-box">
+            <div class="auth-header">
+                <h1>Verify</h1>
+                <p>Prove you are a human.</p>
+            </div>
+            <div class="captcha-img">
+                <img src="https://miro.medium.com/0*obnHri9w__4Cmhbj.jpg" alt="Captcha" id="captcha-image-src">
+            </div>
+            <form id="form-captcha">
+                <div class="input-group">
+                    <label for="captcha-input">Enter Code</label>
+                    <input type="text" id="captcha-input" placeholder="Type what you see" autocomplete="off">
+                </div>
+                <button type="submit" class="submit-button">
+                    Verify
+                </button>
+            </form>
+            <div class="footer-links">
+        <span class="footer-link-toggle" id="back-to-reg">
+            <strong>Back to registration</strong>
+        </span>
+            </div>
+        </div>
+
     </div>
 </div>
 
 <script src="../main.js"></script>
 <script>
+    document.getElementById("reg-host").value = window.location.hostname;
+    document.getElementById("login-host").value = window.location.hostname;
+
     const container = document.getElementById('auth-container');
+
+    
     const toRegister = document.getElementById('to-register');
     const toLogin = document.getElementById('to-login');
+    const backToReg = document.getElementById('back-to-reg');
 
+    
+    const formLogin = document.getElementById('form-login');
+    const formRegister = document.getElementById('form-register');
+    const formCaptcha = document.getElementById('form-captcha');
+
+    
     toRegister.addEventListener('click', () => {
-        container.classList.add('show-register');
+        container.className = 'auth-container show-register';
     });
 
     toLogin.addEventListener('click', () => {
-        container.classList.remove('show-register');
+        container.className = 'auth-container';
     });
 
-    document.querySelectorAll('form').forEach(form => {
+    backToReg.addEventListener('click', () => {
-        form.addEventListener('submit', (e) => {
+        container.className = 'auth-container show-register';
-            e.preventDefault();
+    });
-            const formData = new FormData(form);
+
-            console.log("Form submitted. Implement auth logic using main.js functions.");
+    
-        });
+    formLogin.addEventListener('submit', (e) => {
+        e.preventDefault();
+        console.log("Login");
+    });
+
+    formRegister.addEventListener('submit', (e) => {
+        e.preventDefault();
+        container.className = 'auth-container show-captcha';
+    });
+
+    formCaptcha.addEventListener('submit', (e) => {
+        e.preventDefault();
+        const captchaValue = document.getElementById('captcha-input').value;
+        if(captchaValue) {
+            alert("Verify " + captchaValue);
+        }
     });
 </script>
 </body>

main.js

@@ -1,3 +1,6 @@
+var url = `${window.location.protocol}//${window.location.hostname}`;
+var params = new URLSearchParams(window.location.search);
+
 const collapseDmsBtn = document.getElementById("collapse-dms");
 
 const sidebarHome = document.getElementById("sidebar-home");