Spaces:

samirerty
/

anycoder-400042b5

Running

App Files Files Community

samirerty commited on Feb 4

Commit

7acb535

verified ·

1 Parent(s): 8033430

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +467 -19

index.html CHANGED Viewed

@@ -1,19 +1,467 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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>