Spaces:

dxlorhuggingface
/

mxp

Running

mxp

File size: 19,700 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>POKE: Bitcoin & Ethereum - Login</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, #00172D 0%, #000B18 100%);
            min-height: 100vh;
            overflow-x: hidden;
            position: relative;
        }
        
        .stars-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
        }
        
        .star {
            position: absolute;
            background-color: white;
            border-radius: 50%;
            animation: twinkle var(--duration) infinite ease-in-out;
            opacity: 0;
        }
        
        @keyframes twinkle {
            0%, 100% { opacity: 0.2; }
            50% { opacity: 1; }
        }
        
        .auth-card {
            background: rgba(15, 23, 42, 0.8);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 10px 30px rgba(0, 174, 239, 0.2);
        }
        
        .tab-underline {
            position: relative;
        }
        
        .tab-underline::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 2px;
            background: #00AEEF;
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }
        
        .tab-underline:hover::after {
            transform: scaleX(1);
        }
        
        .tab-underline.active::after {
            transform: scaleX(1);
        }
        
        .input-field {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
        }
        
        .input-field:focus {
            border-color: #00AEEF;
            box-shadow: 0 0 0 2px rgba(0, 174, 239, 0.2);
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #00AEEF 0%, #0082C9 100%);
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(0, 174, 239, 0.3);
        }
        
        .btn-secondary {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
        }
        
        .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-2px);
        }
        
        .flip-container {
            perspective: 1000px;
        }
        
        .flipper {
            transition: 0.6s;
            transform-style: preserve-3d;
            position: relative;
        }
        
        .front, .back {
            backface-visibility: hidden;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }
        
        .front {
            z-index: 2;
            transform: rotateY(0deg);
        }
        
        .back {
            transform: rotateY(180deg);
        }
        
        .flipped {
            transform: rotateY(180deg);
        }
        
        .shake {
            animation: shake 0.5s;
        }
        
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
            20%, 40%, 60%, 80% { transform: translateX(5px); }
        }
        
        .success {
            animation: success 1.5s;
        }
        
        @keyframes success {
            0%, 100% { box-shadow: 0 0 0 0 rgba(0, 255, 159, 0); }
            50% { box-shadow: 0 0 20px 5px rgba(0, 255, 159, 0.5); }
        }
    </style>
</head>
<body class="text-white">
    <!-- Star Background -->
    <div class="stars-bg" id="stars-bg"></div>
    
    <!-- Main Content -->
    <div class="container mx-auto px-4 py-12 flex items-center justify-center min-h-screen">
        <div class="w-full max-w-md">
            <!-- Logo -->
            <div class="text-center mb-8">
                <div class="text-4xl font-bold mb-2">
                    <span class="text-[#00AEEF]">POKE</span>
                    <span class="text-[#00FF9F]">:</span>
                </div>
                <div class="text-lg text-gray-400">Bitcoin & Ethereum</div>
                <div class="text-sm text-gray-500 mt-1">Fast. Fair. Secure.</div>
            </div>
            
            <!-- Auth Card -->
            <div class="auth-card rounded-2xl p-8 relative overflow-hidden">
                <!-- Tabs -->
                <div class="flex justify-center space-x-8 mb-8">
                    <button id="login-tab" class="tab-underline active font-medium text-lg px-2 py-1 focus:outline-none">
                        Login
                    </button>
                    <button id="signup-tab" class="tab-underline font-medium text-lg px-2 py-1 focus:outline-none">
                        Sign Up
                    </button>
                </div>
                
                <!-- Flip Container -->
                <div class="flip-container">
                    <div class="flipper" id="flipper">
                        <!-- Login Form (Front) -->
                        <div class="front">
                            <form id="login-form" class="space-y-6">
                                <div>
                                    <label for="login-email" class="block text-sm font-medium text-gray-400 mb-1">Email</label>
                                    <input type="email" id="login-email" class="w-full px-4 py-3 rounded-lg input-field focus:outline-none" required>
                                </div>
                                
                                <div class="relative">
                                    <label for="login-password" class="block text-sm font-medium text-gray-400 mb-1">Password</label>
                                    <input type="password" id="login-password" class="w-full px-4 py-3 rounded-lg input-field focus:outline-none pr-10" required>
                                    <button type="button" class="absolute right-3 bottom-3 text-gray-500 hover:text-gray-300 focus:outline-none" id="toggle-login-password">
                                        <i class="far fa-eye"></i>
                                    </button>
                                </div>
                                
                                <div class="flex justify-between items-center">
                                    <div class="flex items-center">
                                        <input type="checkbox" id="remember-me" class="rounded bg-gray-700 border-gray-600 focus:ring-[#00AEEF]">
                                        <label for="remember-me" class="ml-2 text-sm text-gray-400">Remember me</label>
                                    </div>
                                    <a href="#" class="text-sm text-[#00AEEF] hover:text-[#00FF9F]">Forgot password?</a>
                                </div>
                                
                                <button type="submit" class="w-full py-3 px-4 rounded-lg btn-primary font-medium focus:outline-none">
                                    Login
                                </button>
                                
                                <div class="relative flex items-center justify-center my-6">
                                    <div class="flex-grow border-t border-gray-700"></div>
                                    <span class="flex-shrink mx-4 text-gray-500 text-sm">OR</span>
                                    <div class="flex-grow border-t border-gray-700"></div>
                                </div>
                                
                                <button type="button" class="w-full py-3 px-4 rounded-lg btn-secondary font-medium flex items-center justify-center space-x-2">
                                    <i class="fab fa-google text-red-500"></i>
                                    <span>Continue with Google</span>
                                </button>
                            </form>
                        </div>
                        
                        <!-- Signup Form (Back) -->
                        <div class="back">
                            <form id="signup-form" class="space-y-6">
                                <div>
                                    <label for="signup-name" class="block text-sm font-medium text-gray-400 mb-1">Full Name</label>
                                    <input type="text" id="signup-name" class="w-full px-4 py-3 rounded-lg input-field focus:outline-none" required>
                                </div>
                                
                                <div>
                                    <label for="signup-email" class="block text-sm font-medium text-gray-400 mb-1">Email</label>
                                    <input type="email" id="signup-email" class="w-full px-4 py-3 rounded-lg input-field focus:outline-none" required>
                                </div>
                                
                                <div class="relative">
                                    <label for="signup-password" class="block text-sm font-medium text-gray-400 mb-1">Password</label>
                                    <input type="password" id="signup-password" class="w-full px-4 py-3 rounded-lg input-field focus:outline-none pr-10" required>
                                    <button type="button" class="absolute right-3 bottom-3 text-gray-500 hover:text-gray-300 focus:outline-none" id="toggle-signup-password">
                                        <i class="far fa-eye"></i>
                                    </button>
                                </div>
                                
                                <div class="relative">
                                    <label for="signup-confirm-password" class="block text-sm font-medium text-gray-400 mb-1">Confirm Password</label>
                                    <input type="password" id="signup-confirm-password" class="w-full px-4 py-3 rounded-lg input-field focus:outline-none pr-10" required>
                                    <button type="button" class="absolute right-3 bottom-3 text-gray-500 hover:text-gray-300 focus:outline-none" id="toggle-signup-confirm-password">
                                        <i class="far fa-eye"></i>
                                    </button>
                                </div>
                                
                                <div class="flex items-center">
                                    <input type="checkbox" id="terms" class="rounded bg-gray-700 border-gray-600 focus:ring-[#00AEEF]" required>
                                    <label for="terms" class="ml-2 text-sm text-gray-400">
                                        I agree to the <a href="#" class="text-[#00AEEF] hover:text-[#00FF9F]">Terms of Service</a> and <a href="#" class="text-[#00AEEF] hover:text-[#00FF9F]">Privacy Policy</a>
                                    </label>
                                </div>
                                
                                <button type="submit" class="w-full py-3 px-4 rounded-lg btn-primary font-medium focus:outline-none">
                                    Create Account
                                </button>
                                
                                <div class="relative flex items-center justify-center my-6">
                                    <div class="flex-grow border-t border-gray-700"></div>
                                    <span class="flex-shrink mx-4 text-gray-500 text-sm">OR</span>
                                    <div class="flex-grow border-t border-gray-700"></div>
                                </div>
                                
                                <button type="button" class="w-full py-3 px-4 rounded-lg btn-secondary font-medium flex items-center justify-center space-x-2">
                                    <i class="fab fa-google text-red-500"></i>
                                    <span>Continue with Google</span>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="text-center mt-6 text-gray-500 text-sm">
                © 2023 POKE Finance. All rights reserved.
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Create stars
            const starsBg = document.getElementById('stars-bg');
            for (let i = 0; i < 100; i++) {
                const star = document.createElement('div');
                star.classList.add('star');
                
                // Random size between 1px and 3px
                const size = Math.random() * 2 + 1;
                star.style.width = `${size}px`;
                star.style.height = `${size}px`;
                
                // Random position
                star.style.left = `${Math.random() * 100}%`;
                star.style.top = `${Math.random() * 100}%`;
                
                // Random animation duration between 2s and 5s
                const duration = Math.random() * 3 + 2;
                star.style.setProperty('--duration', `${duration}s`);
                
                starsBg.appendChild(star);
            }
            
            // Tab switching
            const loginTab = document.getElementById('login-tab');
            const signupTab = document.getElementById('signup-tab');
            const flipper = document.getElementById('flipper');
            
            loginTab.addEventListener('click', function() {
                if (flipper.classList.contains('flipped')) {
                    flipper.classList.remove('flipped');
                    loginTab.classList.add('active');
                    signupTab.classList.remove('active');
                }
            });
            
            signupTab.addEventListener('click', function() {
                if (!flipper.classList.contains('flipped')) {
                    flipper.classList.add('flipped');
                    signupTab.classList.add('active');
                    loginTab.classList.remove('active');
                }
            });
            
            // Password visibility toggle
            function setupPasswordToggle(passwordId, toggleId) {
                const passwordInput = document.getElementById(passwordId);
                const toggleButton = document.getElementById(toggleId);
                
                toggleButton.addEventListener('click', function() {
                    const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                    passwordInput.setAttribute('type', type);
                    
                    // Toggle eye icon
                    const icon = toggleButton.querySelector('i');
                    if (type === 'password') {
                        icon.classList.remove('fa-eye-slash');
                        icon.classList.add('fa-eye');
                    } else {
                        icon.classList.remove('fa-eye');
                        icon.classList.add('fa-eye-slash');
                    }
                });
            }
            
            setupPasswordToggle('login-password', 'toggle-login-password');
            setupPasswordToggle('signup-password', 'toggle-signup-password');
            setupPasswordToggle('signup-confirm-password', 'toggle-signup-confirm-password');
            
            // Form validation and submission
            document.getElementById('login-form').addEventListener('submit', function(e) {
                e.preventDefault();
                
                const email = document.getElementById('login-email').value;
                const password = document.getElementById('login-password').value;
                
                // Simple validation
                if (!email || !password) {
                    this.classList.add('shake');
                    setTimeout(() => this.classList.remove('shake'), 500);
                    return;
                }
                
                // Simulate successful login
                this.classList.add('success');
                setTimeout(() => {
                    this.classList.remove('success');
                    alert('Login successful!');
                }, 1500);
            });
            
            document.getElementById('signup-form').addEventListener('submit', function(e) {
                e.preventDefault();
                
                const name = document.getElementById('signup-name').value;
                const email = document.getElementById('signup-email').value;
                const password = document.getElementById('signup-password').value;
                const confirmPassword = document.getElementById('signup-confirm-password').value;
                const terms = document.getElementById('terms').checked;
                
                // Simple validation
                if (!name || !email || !password || !confirmPassword || !terms) {
                    this.classList.add('shake');
                    setTimeout(() => this.classList.remove('shake'), 500);
                    return;
                }
                
                if (password !== confirmPassword) {
                    this.classList.add('shake');
                    setTimeout(() => this.classList.remove('shake'), 500);
                    alert('Passwords do not match!');
                    return;
                }
                
                // Simulate successful signup
                this.classList.add('success');
                setTimeout(() => {
                    this.classList.remove('success');
                    alert('Account created successfully!');
                    flipper.classList.remove('flipped');
                    loginTab.classList.add('active');
                    signupTab.classList.remove('active');
                }, 1500);
            });
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=dxlorhuggingface/mxp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>