Spaces:
Running
Running
| <html lang="fa" dir="rtl"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Secure Chat | Liquid Login</title> | |
| <!-- Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- Phosphor Icons (Modern & Clean) --> | |
| <script src="https://unpkg.com/@phosphor-icons/web"></script> | |
| <!-- Google Fonts: Vazirmatn for Persian Typography --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;300;400;500;700&display=swap" rel="stylesheet"> | |
| <style> | |
| /* | |
| * Core Styling & Animations | |
| */ | |
| body { | |
| font-family: 'Vazirmatn', sans-serif; | |
| background-color: #050505; | |
| overflow: hidden; /* Prevent scroll on mobile during animations */ | |
| } | |
| /* Animated Background Mesh */ | |
| .bg-mesh { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100vw; | |
| height: 100vh; | |
| z-index: -1; | |
| background: radial-gradient(circle at 50% 50%, #1a1a2e 0%, #000000 100%); | |
| overflow: hidden; | |
| } | |
| .orb { | |
| position: absolute; | |
| border-radius: 50%; | |
| filter: blur(80px); | |
| opacity: 0.6; | |
| animation: float 10s infinite ease-in-out alternate; | |
| } | |
| .orb-1 { width: 400px; height: 400px; background: #4f46e5; top: -10%; left: -10%; animation-delay: 0s; } | |
| .orb-2 { width: 300px; height: 300px; background: #ec4899; bottom: 10%; right: -5%; animation-delay: -2s; } | |
| .orb-3 { width: 200px; height: 200px; background: #06b6d4; top: 40%; left: 40%; animation-delay: -4s; } | |
| @keyframes float { | |
| 0% { transform: translate(0, 0) scale(1); } | |
| 100% { transform: translate(30px, 50px) scale(1.1); } | |
| } | |
| /* | |
| * The "Liquid Glass" Effect | |
| * Uses backdrop-filter to blur whatever is behind the element. | |
| */ | |
| .glass-panel { | |
| background: rgba(255, 255, 255, 0.03); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); | |
| } | |
| /* Input Styling */ | |
| .input-group input:focus ~ label, | |
| .input-group input:not(:placeholder-shown) ~ label { | |
| top: -10px; | |
| right: 10px; | |
| font-size: 0.75rem; | |
| color: #a78bfa; | |
| background: rgba(0,0,0,0.8); | |
| padding: 0 5px; | |
| border-radius: 4px; | |
| } | |
| .custom-input { | |
| background: rgba(0, 0, 0, 0.2); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| transition: all 0.3s ease; | |
| } | |
| .custom-input:focus { | |
| border-color: #8b5cf6; | |
| box-shadow: 0 0 15px rgba(139, 92, 246, 0.3); | |
| outline: none; | |
| } | |
| /* Button Shimmer */ | |
| .btn-primary { | |
| background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%); | |
| position: relative; | |
| overflow: hidden; | |
| transition: transform 0.2s; | |
| } | |
| .btn-primary:active { | |
| transform: scale(0.98); | |
| } | |
| .btn-primary::after { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: linear-gradient(to bottom right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 100%); | |
| transform: rotate(45deg) translateY(-100%); | |
| transition: transform 0.5s; | |
| } | |
| .btn-primary:hover::after { | |
| transform: rotate(45deg) translateY(100%); | |
| } | |
| /* Transitions */ | |
| .fade-enter { opacity: 0; transform: translateY(20px); } | |
| .fade-enter-active { opacity: 1; transform: translateY(0); transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); } | |
| .fade-exit { opacity: 1; transform: translateY(0); } | |
| .fade-exit-active { opacity: 0; transform: translateY(-20px); transition: all 0.4s ease-in; } | |
| /* Loader */ | |
| .loader { | |
| border: 3px solid rgba(255,255,255,0.1); | |
| border-left-color: #fff; | |
| border-radius: 50%; | |
| width: 24px; | |
| height: 24px; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } | |
| /* Success Checkmark Animation */ | |
| .checkmark__circle { stroke-dasharray: 166; stroke-dashoffset: 166; stroke-width: 2; stroke-miterlimit: 10; stroke: #4bb71b; fill: none; animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards; } | |
| .checkmark { width: 56px; height: 56px; border-radius: 50%; display: block; stroke-width: 2; stroke: #fff; stroke-miterlimit: 10; margin: 10% auto; box-shadow: inset 0px 0px 0px #4bb71b; animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both; } | |
| .checkmark__check { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards; } | |
| @keyframes stroke { 100% { stroke-dashoffset: 0; } } | |
| @keyframes scale { 0%, 100% { transform: none; } 50% { transform: scale3d(1.1, 1.1, 1); } } | |
| @keyframes fill { 100% { box-shadow: inset 0px 0px 0px 30px #4bb71b; } } | |
| </style> | |
| </head> | |
| <body class="text-white flex items-center justify-center min-h-screen p-4"> | |
| <!-- Dynamic Background --> | |
| <div class="bg-mesh"> | |
| <div class="orb orb-1"></div> | |
| <div class="orb orb-2"></div> | |
| <div class="orb orb-3"></div> | |
| </div> | |
| <!-- Main Container --> | |
| <main id="app-container" class="glass-panel w-full max-w-md rounded-3xl p-8 relative overflow-hidden min-h-[500px] flex flex-col justify-center"> | |
| <!-- Header / Logo Area --> | |
| <div class="text-center mb-8 relative z-10"> | |
| <div class="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-tr from-indigo-500 to-purple-500 mb-4 shadow-lg shadow-indigo-500/30"> | |
| <i class="ph-fill ph-chat-teardrop-text text-3xl text-white"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold tracking-tight">ورود به چت روم</h1> | |
| <p class="text-gray-400 text-sm mt-2">اتصال امن با پروتکل رمزنگاری شده</p> | |
| </div> | |
| <!-- VIEW 1: Phone Number Input --> | |
| <div id="view-phone" class="transition-all duration-500"> | |
| <form id="phone-form" onsubmit="handlePhoneSubmit(event)"> | |
| <div class="input-group relative mb-6"> | |
| <input type="tel" id="phone" placeholder=" " class="custom-input w-full px-4 py-4 rounded-xl text-white text-lg tracking-widest text-center" required maxlength="11" pattern="09[0-9]{9}"> | |
| <label for="phone" class="absolute right-4 top-4 text-gray-400 transition-all pointer-events-none">شماره موبایل</label> | |
| </div> | |
| <!-- Captcha Simulation --> | |
| <div class="mb-6 bg-black/20 rounded-xl p-3 flex items-center justify-between border border-white/5"> | |
| <div class="flex items-center gap-2 select-none"> | |
| <i class="ph-duotone ph-shield-check text-green-400 text-xl"></i> | |
| <span class="font-mono text-lg tracking-widest line-through decoration-red-500/50 text-gray-300">X8kP9m</span> | |
| </div> | |
| <button type="button" onclick="refreshCaptcha()" class="text-gray-400 hover:text-white transition-colors"> | |
| <i class="ph-bold ph-arrows-clockwise"></i> | |
| </button> | |
| </div> | |
| <button type="submit" class="btn-primary w-full py-4 rounded-xl font-bold text-lg shadow-lg shadow-indigo-500/20 flex items-center justify-center gap-2 group"> | |
| <span>دریافت کد تایید</span> | |
| <i class="ph-bold ph-arrow-left group-hover:-translate-x-1 transition-transform"></i> | |
| </button> | |
| </form> | |
| </div> | |
| <!-- VIEW 2: Verification Code --> | |
| <div id="view-code" class="hidden opacity-0 transition-all duration-500"> | |
| <div class="text-center mb-6"> | |
| <p class="text-gray-300">کد ۵ رقمی به شماره <span id="display-phone" class="text-white font-bold ltr inline-block"></span> ارسال شد.</p> | |
| </div> | |
| <form id="code-form" onsubmit="handleCodeSubmit(event)"> | |
| <div class="flex justify-center gap-2 mb-6 dir-ltr"> | |
| <!-- OTP Inputs --> | |
| <input type="text" maxlength="1" class="otp-input custom-input w-12 h-14 rounded-lg text-center text-2xl font-bold focus:bg-white/10" onkeyup="moveToNext(this, 0)" onfocus="this.select()"> | |
| <input type="text" maxlength="1" class="otp-input custom-input w-12 h-14 rounded-lg text-center text-2xl font-bold focus:bg-white/10" onkeyup="moveToNext(this, 1)" onfocus="this.select()"> | |
| <input type="text" maxlength="1" class="otp-input custom-input w-12 h-14 rounded-lg text-center text-2xl font-bold focus:bg-white/10" onkeyup="moveToNext(this, 2)" onfocus="this.select()"> | |
| <input type="text" maxlength="1" class="otp-input custom-input w-12 h-14 rounded-lg text-center text-2xl font-bold focus:bg-white/10" onkeyup="moveToNext(this, 3)" onfocus="this.select()"> | |
| <input type="text" maxlength="1" class="otp-input custom-input w-12 h-14 rounded-lg text-center text-2xl font-bold focus:bg-white/10" onkeyup="moveToNext(this, 4)" onfocus="this.select()"> | |
| </div> | |
| <button type="submit" class="btn-primary w-full py-4 rounded-xl font-bold text-lg shadow-lg shadow-indigo-500/20 mb-4"> | |
| تایید و ورود | |
| </button> | |
| </form> | |
| <div class="text-center"> | |
| <button id="resend-btn" onclick="resendCode()" disabled class="text-sm text-gray-500 disabled:cursor-not-allowed hover:text-indigo-400 transition-colors flex items-center justify-center gap-2 mx-auto"> | |
| <i class="ph-bold ph-clock-counter-clockwise"></i> | |
| <span id="timer-text">ارسال مجدد کد (02:00)</span> | |
| </button> | |
| </div> | |
| <button onclick="goBack()" class="mt-6 w-full text-center text-gray-500 text-sm hover:text-white"> | |
| تغییر شماره موبایل | |
| </button> | |
| </div> | |
| <!-- VIEW 3: Loading State --> | |
| <div id="view-loading" class="hidden flex-col items-center justify-center absolute inset-0 bg-black/40 backdrop-blur-md z-20 rounded-3xl"> | |
| <div class="loader mb-4"></div> | |
| <p class="text-indigo-300 animate-pulse">در حال بررسی...</p> | |
| </div> | |
| <!-- VIEW 4: Success State --> | |
| <div id="view-success" class="hidden flex-col items-center justify-center text-center"> | |
| <div class="checkmark-wrapper mb-4"> | |
| <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"> | |
| <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/> | |
| <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/> | |
| </svg> | |
| </div> | |
| <h2 class="text-2xl font-bold text-white mb-2">ورود موفق!</h2> | |
| <p class="text-gray-400 mb-6">در حال انتقال به داشبورد...</p> | |
| <button class="px-6 py-2 rounded-full border border-white/20 hover:bg-white/10 transition-colors text-sm"> | |
| رفتن به چت روم | |
| </button> | |
| </div> | |
| </main> | |
| <!-- Footer Credit --> | |
| <div class="fixed bottom-4 text-center w-full pointer-events-none"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="pointer-events-auto text-xs text-gray-600 hover:text-indigo-400 transition-colors bg-black/50 px-3 py-1 rounded-full backdrop-blur-sm border border-white/5"> | |
| Built with anycoder | |
| </a> | |
| </div> | |
| <script> | |
| // --- State Management --- | |
| let currentPhone = ""; | |
| let countdownInterval; | |
| let timeLeft = 120; // 2 minutes | |
| // --- DOM Elements --- | |
| const views = { | |
| phone: document.getElementById('view-phone'), | |
| code: document.getElementById('view-code'), | |
| loading: document.getElementById('view-loading'), | |
| success: document.getElementById('view-success') | |
| }; | |
| // --- Functions --- | |
| function handlePhoneSubmit(e) { | |
| e.preventDefault(); | |
| const phoneInput = document.getElementById('phone'); | |
| currentPhone = phoneInput.value; | |
| if(currentPhone.length !== 11) { | |
| shakeElement(phoneInput); | |
| return; | |
| } | |
| // Simulate API Call | |
| showLoading(true); | |
| setTimeout(() => { | |
| showLoading(false); | |
| switchView('code'); | |
| document.getElementById('display-phone').innerText = currentPhone; | |
| startTimer(); | |
| // Auto focus first OTP input | |
| document.querySelector('.otp-input').focus(); | |
| }, 1500); | |
| } | |
| function handleCodeSubmit(e) { | |
| e.preventDefault(); | |
| // Collect OTP | |
| const inputs = document.querySelectorAll('.otp-input'); | |
| let code = ""; | |
| inputs.forEach(input => code += input.value); | |
| if(code.length < 5) { | |
| inputs.forEach(i => i.style.borderColor = '#ef4444'); | |
| setTimeout(() => inputs.forEach(i => i.style.borderColor = ''), 1000); | |
| return; | |
| } | |
| showLoading(true); | |
| // Simulate Verification | |
| setTimeout(() => { | |
| showLoading(false); | |
| switchView('success'); | |
| }, 2000); | |
| } | |
| function resendCode() { | |
| if(timeLeft > 0) return; | |
| // Reset Timer Logic | |
| timeLeft = 120; | |
| startTimer(); | |
| // Visual Feedback | |
| const btn = document.getElementById('resend-btn'); | |
| const originalContent = btn.innerHTML; | |
| btn.innerHTML = '<i class="ph-bold ph-paper-plane-right text-green-400"></i> <span class="text-green-400">کد ارسال شد</span>'; | |
| setTimeout(() => { | |
| btn.innerHTML = originalContent; | |
| }, 2000); | |
| } | |
| function startTimer() { | |
| clearInterval(countdownInterval); | |
| const btn = document.getElementById('resend-btn'); | |
| const text = document.getElementById('timer-text'); | |
| btn.disabled = true; | |
| btn.classList.add('opacity-50'); | |
| updateTimerDisplay(); | |
| countdownInterval = setInterval(() => { | |
| timeLeft--; | |
| updateTimerDisplay(); | |
| if (timeLeft <= 0) { | |
| clearInterval(countdownInterval); | |
| btn.disabled = false; | |
| btn.classList.remove('opacity-50'); | |
| text.innerText = "ارسال مجدد کد"; | |
| } | |
| }, 1000); | |
| } | |
| function updateTimerDisplay() { | |
| const minutes = Math.floor(timeLeft / 60); | |
| const seconds = timeLeft % 60; | |
| const formattedTime = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; | |
| document.getElementById('timer-text').innerText = `ارسال مجدد کد (${formattedTime})`; | |
| } | |
| // --- Navigation Helpers --- | |
| function switchView(viewName) { | |
| // Hide all views | |
| Object.values(views).forEach(el => { | |
| if(!el.classList.contains('hidden')) { | |
| el.classList.add('fade-exit-active'); | |
| setTimeout(() => { | |
| el.classList.add('hidden'); | |
| el.classList.remove('fade-exit-active'); | |
| }, 400); | |
| } | |
| }); | |
| // Show target view | |
| const target = views[viewName]; | |
| target.classList.remove('hidden'); | |
| target.classList.add('fade-enter'); | |
| // Trigger reflow | |
| void target.offsetWidth; | |
| target.classList.add('fade-enter-active'); | |
| setTimeout(() => { | |
| target.classList.remove('fade-enter', 'fade-enter-active'); | |
| }, 500); | |
| } | |
| function goBack() { | |
| clearInterval(countdownInterval); | |
| switchView('phone'); | |
| document.getElementById('phone').value = ""; | |
| } | |
| function showLoading(show) { | |
| if(show) { | |
| views.loading.classList.remove('hidden'); | |
| views.loading.classList.add('flex'); | |
| } else { | |
| views.loading.classList.add('hidden'); | |
| views.loading.classList.remove('flex'); | |
| } | |
| } | |
| function shakeElement(element) { | |
| element.animate([ | |
| { transform: 'translateX(0)' }, | |
| { transform: 'translateX(-5px)' }, | |
| { transform: 'translateX(5px)' }, | |
| { transform: 'translateX(-5px)' }, | |
| { transform: 'translateX(0)' } | |
| ], { | |
| duration: 300, | |
| iterations: 1 | |
| }); | |
| } | |
| function refreshCaptcha() { | |
| const icon = document.querySelector('.ph-arrows-clockwise'); | |
| icon.classList.add('animate-spin'); | |
| setTimeout(() => icon.classList.remove('animate-spin'), 500); | |
| // In a real app, this would fetch a new captcha image/key | |
| } | |
| // --- OTP Input Logic --- | |
| function moveToNext(input, index) { | |
| // Allow only numbers | |
| input.value = input.value.replace(/[^0-9]/g, ''); | |
| const inputs = document.querySelectorAll('.otp-input'); | |
| if (input.value && index < inputs.length - 1) { | |
| inputs[index + 1].focus(); | |
| } | |
| // Handle Backspace | |
| input.addEventListener('keydown', (e) => { | |
| if (e.key === 'Backspace' && !input.value && index > 0) { | |
| inputs[index - 1].focus(); | |
| } | |
| }); | |
| } | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // Optional: Add parallax effect to orbs on mouse move | |
| document.addEventListener('mousemove', (e) => { | |
| const x = e.clientX / window.innerWidth; | |
| const y = e.clientY / window.innerHeight; | |
| document.querySelectorAll('.orb').forEach((orb, index) => { | |
| const speed = (index + 1) * 20; | |
| orb.style.transform = `translate(${x * speed}px, ${y * speed}px)`; | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |