Spaces:
Running
Running
Почему кнопка зарегестрироваться не работает??? Сделай, чтобы работала, продумай полностью личный кабинет, сделай вход чтобы нормально работал. А также, почему когда на главной странице нажимаю выбрать подписку, перебрасывает опять на hit vpn? Мне нужно, чтобы он так не перебрасывал, а перебрасывал на личный кабинет Elite VPN, дизайн личного кабинета придумай очень красивый и функций чтобы там много было - Follow Up Deployment
9821b9f verified | <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Elite VPN - Быстрый и безопасный VPN</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#2563eb', | |
| secondary: '#1d4ed8', | |
| accent: '#3b82f6', | |
| dark: '#0f172a', | |
| light: '#f8fafc' | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'] | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .vpn-gradient { | |
| background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); | |
| } | |
| .feature-card { | |
| transition: all 0.3s ease; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .referral-card { | |
| background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50 text-gray-800"> | |
| <!-- Login Section --> | |
| <section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-900 to-indigo-900"> | |
| <div class="max-w-md w-full p-8 bg-white rounded-2xl shadow-2xl"> | |
| <div class="text-center mb-8"> | |
| <img src="https://example.com/elite-vpn-logo.svg" alt="Elite VPN Logo" class="h-16 mx-auto"> | |
| <h1 class="text-3xl font-bold text-gray-800 mt-4">Elite VPN</h1> | |
| <p class="text-gray-600 mt-2">Премиум защита вашего интернет-соединения</p> | |
| </div> | |
| <form class="space-y-6" action="/login" method="POST"> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700">Email</label> | |
| <input type="email" id="email" required | |
| class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="password" class="block text-sm font-medium text-gray-700">Пароль</label> | |
| <input type="password" id="password" required | |
| class="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <input id="remember-me" name="remember-me" type="checkbox" | |
| class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> | |
| <label for="remember-me" class="ml-2 block text-sm text-gray-700">Запомнить меня</label> | |
| </div> | |
| <div class="text-sm"> | |
| <a href="#" class="font-medium text-blue-600 hover:text-blue-500">Забыли пароль?</a> | |
| </div> | |
| </div> | |
| <div> | |
| <button type="submit" | |
| class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-300"> | |
| Войти | |
| </button> | |
| </div> | |
| </form> | |
| <div class="mt-6"> | |
| <div class="relative"> | |
| <div class="absolute inset-0 flex items-center"> | |
| <div class="w-full border-t border-gray-300"></div> | |
| </div> | |
| <div class="relative flex justify-center text-sm"> | |
| <span class="px-2 bg-white text-gray-500">Нет аккаунта?</span> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <a href="/register" class="w-full flex justify-center py-3 px-4 border border-gray-300 rounded-lg shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-300"> | |
| Зарегистрироваться | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="vpn-gradient text-white"> | |
| <div class="container mx-auto px-4 py-16 md:py-24"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Elite VPN - Премиум защита</h1> | |
| <h2 class="text-2xl md:text-3xl font-semibold mb-8 bg-white text-primary inline-block px-4 py-2 rounded-lg">Дарим вам 100₽ на баланс!</h2> | |
| <p class="text-xl mb-10 max-w-lg">Быстрый, безопасный и доступный VPN для всех ваших устройств</p> | |
| <a href="/register?bonus=100" class="bg-white text-primary px-8 py-4 rounded-full font-bold text-lg hover:bg-gray-100 transition shadow-xl pulse inline-block">Получить бонус</a> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative"> | |
| <div class="absolute -top-10 -left-10 w-64 h-64 bg-blue-300 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob"></div> | |
| <div class="absolute -bottom-10 -right-10 w-64 h-64 bg-indigo-300 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-2000"></div> | |
| <div class="relative"> | |
| <img src="https://cdn.pixabay.com/photo/2021/01/30/20/25/vpn-5965780_1280.png" alt="VPN Illustration" class="w-full max-w-md"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-16 bg-gradient-to-b from-blue-50 to-indigo-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-gray-800">Преимущества Elite VPN</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <div class="feature-card bg-white p-8 rounded-xl shadow-lg border border-gray-100 hover:border-blue-200 transition-all duration-300"> | |
| <div class="w-16 h-16 bg-gradient-to-br from-blue-100 to-blue-200 rounded-full flex items-center justify-center mb-6 shadow-md"> | |
| <i class="fas fa-tag text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-gray-800">Премиум качество</h3> | |
| <p class="text-gray-600">Элитный сервис по доступной цене</p> | |
| </div> | |
| <div class="feature-card bg-light p-8 rounded-xl shadow-lg"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-bolt text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Высокая скорость</h3> | |
| <p class="text-gray-600">Мгновенное подключение без потери скорости интернета</p> | |
| </div> | |
| <div class="feature-card bg-light p-8 rounded-xl shadow-lg"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-globe text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Доступ к любым сайтам</h3> | |
| <p class="text-gray-600">Обходите любые ограничения и блокировки</p> | |
| </div> | |
| <div class="feature-card bg-light p-8 rounded-xl shadow-lg"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-credit-card text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Оплата картами РФ и СБП</h3> | |
| <p class="text-gray-600">Удобные и безопасные способы оплаты</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Referral Program --> | |
| <section class="py-16 bg-gradient-to-b from-indigo-900 to-blue-900 text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Приглашайте друзей и получайте бонусы</h2> | |
| <p class="text-xl max-w-2xl mx-auto">Пригласите друзей в наш сервис и получите вознаграждение за каждого приглашённого</p> | |
| </div> | |
| <div class="flex flex-col md:flex-row justify-center items-center gap-8"> | |
| <div class="referral-card text-white p-8 rounded-xl shadow-xl w-full max-w-md"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-user-friends text-2xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold">Вы получаете</h3> | |
| </div> | |
| <p class="text-4xl font-bold mb-4">50₽</p> | |
| <p>на баланс за каждого друга</p> | |
| </div> | |
| <div class="text-3xl text-primary font-bold"> | |
| <i class="fas fa-plus"></i> | |
| </div> | |
| <div class="referral-card text-white p-8 rounded-xl shadow-xl w-full max-w-md"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-gift text-2xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold">Ваш друг получает</h3> | |
| </div> | |
| <p class="text-4xl font-bold mb-4">100₽</p> | |
| <p>на баланс при регистрации</p> | |
| </div> | |
| </div> | |
| <div class="mt-16 bg-white rounded-xl shadow-lg p-8 max-w-4xl mx-auto"> | |
| <h3 class="text-2xl font-bold mb-6 text-center">Как это работает?</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-primary font-bold text-xl">1</span> | |
| </div> | |
| <p>Получите свою реферальную ссылку</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-primary font-bold text-xl">2</span> | |
| </div> | |
| <p>Поделитесь с друзьями</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-primary font-bold text-xl">3</span> | |
| </div> | |
| <p>Получайте бонусы за каждую регистрацию</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Personal Account Section --> | |
| <section class="py-16 bg-gray-50" id="account"> | |
| <div class="container mx-auto px-4 max-w-6xl"> | |
| <div class="bg-white rounded-2xl shadow-xl overflow-hidden"> | |
| <div class="flex flex-col md:flex-row"> | |
| <!-- Sidebar Navigation --> | |
| <div class="md:w-1/4 bg-gradient-to-b from-blue-900 to-indigo-900 text-white p-6"> | |
| <div class="flex items-center mb-8"> | |
| <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-2xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">Личный кабинет</h3> | |
| <p class="text-sm text-blue-200">Premium статус</p> | |
| </div> | |
| </div> | |
| <nav class="space-y-2"> | |
| <a href="#dashboard" class="block px-4 py-3 rounded-lg bg-blue-800 text-white font-medium"> | |
| <i class="fas fa-tachometer-alt mr-3"></i> Обзор | |
| </a> | |
| <a href="#devices" class="block px-4 py-3 rounded-lg hover:bg-blue-800 text-blue-100 font-medium transition"> | |
| <i class="fas fa-laptop mr-3"></i> Мои устройства | |
| </a> | |
| <a href="#subscription" class="block px-4 py-3 rounded-lg hover:bg-blue-800 text-blue-100 font-medium transition"> | |
| <i class="fas fa-credit-card mr-3"></i> Подписка | |
| </a> | |
| <a href="#settings" class="block px-4 py-3 rounded-lg hover:bg-blue-800 text-blue-100 font-medium transition"> | |
| <i class="fas fa-cog mr-3"></i> Настройки | |
| </a> | |
| <a href="#referrals" class="block px-4 py-3 rounded-lg hover:bg-blue-800 text-blue-100 font-medium transition"> | |
| <i class="fas fa-user-friends mr-3"></i> Рефералы | |
| </a> | |
| <a href="#support" class="block px-4 py-3 rounded-lg hover:bg-blue-800 text-blue-100 font-medium transition"> | |
| <i class="fas fa-question-circle mr-3"></i> Поддержка | |
| </a> | |
| </nav> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="md:w-3/4 p-8" id="dashboard"> | |
| <div class="flex justify-between items-center mb-8"> | |
| <h2 class="text-2xl font-bold text-gray-800">Обзор аккаунта</h2> | |
| <div class="flex items-center space-x-2"> | |
| <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-semibold">Активен</span> | |
| <span class="text-gray-500 text-sm">до 15.12.2023</span> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <div class="bg-blue-50 p-6 rounded-xl"> | |
| <h3 class="text-lg font-semibold mb-2 text-gray-700">Остаток трафика</h3> | |
| <p class="text-3xl font-bold text-primary">∞</p> | |
| <p class="text-sm text-gray-500 mt-1">Неограниченный</p> | |
| </div> | |
| <div class="bg-blue-50 p-6 rounded-xl"> | |
| <h3 class="text-lg font-semibold mb-2 text-gray-700">Подключенные устройства</h3> | |
| <p class="text-3xl font-bold text-primary">1/3</p> | |
| <p class="text-sm text-gray-500 mt-1">из 3 возможных</p> | |
| </div> | |
| <div class="bg-blue-50 p-6 rounded-xl"> | |
| <h3 class="text-lg font-semibold mb-2 text-gray-700">Реферальный баланс</h3> | |
| <p class="text-3xl font-bold text-primary">150₽</p> | |
| <a href="#referrals" class="text-sm text-blue-600 hover:underline mt-1 block">Пригласить друзей</a> | |
| </div> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-xl p-6 mb-8"> | |
| <h3 class="text-xl font-bold mb-4 text-gray-800">Быстрое подключение</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <button class="flex items-center justify-between px-4 py-3 bg-gray-100 hover:bg-gray-200 rounded-lg transition"> | |
| <span>Россия</span> | |
| <i class="fas fa-plug text-blue-500"></i> | |
| </button> | |
| <button class="flex items-center justify-between px-4 py-3 bg-gray-100 hover:bg-gray-200 rounded-lg transition"> | |
| <span>Турция</span> | |
| <i class="fas fa-plug text-blue-500"></i> | |
| </button> | |
| <button class="flex items-center justify-between px-4 py-3 bg-gray-100 hover:bg-gray-200 rounded-lg transition"> | |
| <span>США</span> | |
| <i class="fas fa-plug text-blue-500"></i> | |
| </button> | |
| <button class="flex items-center justify-between px-4 py-3 bg-gray-100 hover:bg-gray-200 rounded-lg transition"> | |
| <span>Германия</span> | |
| <i class="fas fa-plug text-blue-500"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-xl p-6"> | |
| <h3 class="text-xl font-bold mb-4 text-gray-800">История подключений</h3> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Дата</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Локация</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Длительность</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15.11.2023 14:30</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Турция</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2ч 15м</td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">14.11.2023 20:15</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Россия</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4ч 30м</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Доступные тарифы</h2> | |
| <p class="text-xl max-w-2xl mx-auto">Выберите оптимальный вариант для ваших потребностей</p> | |
| </div> | |
| <div class="max-w-4xl mx-auto bg-gradient-to-r from-blue-50 to-indigo-50 rounded-2xl shadow-xl overflow-hidden"> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 p-10"> | |
| <h3 class="text-2xl font-bold mb-2">Базовый тариф</h3> | |
| <div class="flex items-baseline mb-6"> | |
| <span class="text-5xl font-bold text-primary">100₽</span> | |
| <span class="text-gray-600 ml-2">/месяц</span> | |
| </div> | |
| <ul class="space-y-4 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-3"></i> | |
| <span>1 устройство</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-3"></i> | |
| <span>Неограниченный трафик</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-3"></i> | |
| <span>Доступ к 2 локациям (Россия, Турция)</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-3"></i> | |
| <span>Поддержка 24/7</span> | |
| </li> | |
| </ul> | |
| <a href="/account/subscribe" class="block w-full bg-primary text-white text-center py-3 rounded-lg font-semibold hover:bg-secondary transition">Выбрать тариф</a> | |
| </div> | |
| <div class="md:w-1/2 bg-primary text-white p-10"> | |
| <div class="mb-4"> | |
| <span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm font-semibold">Самый популярный</span> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-2">Премиум тариф</h3> | |
| <div class="flex items-baseline mb-6"> | |
| <span class="text-5xl font-bold">250₽</span> | |
| <span class="ml-2">/месяц</span> | |
| </div> | |
| <ul class="space-y-4 mb-8"> | |
| <li class="flex items-center"> | |
| <script> | |
| // Form handling | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Login form handling | |
| const loginForm = document.querySelector('form[action="/login"]'); | |
| if (loginForm) { | |
| loginForm.addEventListener('submit', async function(e) { | |
| e.preventDefault(); | |
| const formData = new FormData(loginForm); | |
| const response = await fetch('/api/login', { | |
| method: 'POST', | |
| body: JSON.stringify(Object.fromEntries(formData)), | |
| headers: { | |
| 'Content-Type': 'application/json' | |
| } | |
| }); | |
| if (response.ok) { | |
| window.location.href = '/account'; | |
| } else { | |
| alert('Ошибка входа. Проверьте email и пароль.'); | |
| } | |
| }); | |
| } | |
| // Smooth scrolling for account navigation | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| }); | |
| </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=Timon2414/vpn-redesign" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |