не работает регистрация и вход переделай и пересмотри свой главный экран - Initial Deployment
36ff679 verified | <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Оплата - TG Channel Pro</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| .payment-gradient { | |
| background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); | |
| } | |
| .card-input:focus { | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); | |
| } | |
| .card-front, .card-back { | |
| transform-style: preserve-3d; | |
| transition: transform 0.6s ease; | |
| } | |
| .flipped .card-front { | |
| transform: rotateY(180deg); | |
| } | |
| .flipped .card-back { | |
| transform: rotateY(0deg); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased"> | |
| <div class="min-h-screen flex"> | |
| <!-- Left side - Form --> | |
| <div class="flex-1 flex flex-col justify-center py-12 px-4 sm:px-6 lg:px-20 xl:px-24"> | |
| <div class="mx-auto w-full max-w-md"> | |
| <div data-aos="fade-right"> | |
| <a href="/index.html" class="flex items-center mb-8"> | |
| <i data-feather="message-square" class="text-blue-500 mr-2"></i> | |
| <span class="text-xl font-semibold text-gray-900">TG Channel Pro</span> | |
| </a> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-2">Оплата курса</h2> | |
| <p class="text-gray-600 mb-8">Завершите регистрацию и получите доступ к обучению</p> | |
| </div> | |
| <!-- Order Summary --> | |
| <div class="bg-gray-50 rounded-lg p-6 mb-8" data-aos="fade-right" data-aos-delay="50"> | |
| <h3 class="font-semibold text-lg mb-4">Детали заказа</h3> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between"> | |
| <span>Курс "Как продать Telegram-канал"</span> | |
| <span class="font-semibold" id="plan-price">14 900 ₽</span> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-600"> | |
| <span>Тариф: <span id="plan-name">Стандарт</span></span> | |
| <span>Единоразовый платеж</span> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-200 mt-4 pt-4"> | |
| <div class="flex justify-between font-semibold text-lg"> | |
| <span>Итого:</span> | |
| <span id="total-price">14 900 ₽</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Payment Form --> | |
| <form class="space-y-6" data-aos="fade-right" data-aos-delay="100"> | |
| <!-- Card Preview --> | |
| <div class="relative h-48 mb-6" id="card-preview"> | |
| <div class="card-front absolute inset-0 bg-gradient-to-r from-blue-600 to-blue-800 rounded-xl p-6 text-white shadow-xl"> | |
| <div class="flex justify-between items-start mb-8"> | |
| <i data-feather="credit-card" class="w-8 h-8"></i> | |
| <span class="text-sm">ДЕБЕТОВАЯ/КРЕДИТНАЯ</span> | |
| </div> | |
| <div class="mb-4"> | |
| <span class="text-2xl font-mono tracking-wider" id="card-preview-number">•••• •••• •••• ••••</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <div class="text-xs uppercase opacity-80">Владелец карты</div> | |
| <span id="card-preview-name">IVAN IVANOV</span> | |
| </div> | |
| <div> | |
| <div class="text-xs uppercase opacity-80">Срок действия</div> | |
| <span id="card-preview-expiry">••/••</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="card-back absolute inset-0 bg-gradient-to-r from-gray-700 to-gray-900 rounded-xl p-6 text-white shadow-xl transform rotateY(180deg)"> | |
| <div class="h-8 bg-black mt-6 mb-4"></div> | |
| <div class="bg-white h-10 rounded flex items-center px-4"> | |
| <span class="text-black font-mono text-sm" id="card-preview-cvv">•••</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="card-number" class="block text-sm font-medium text-gray-700">Номер карты</label> | |
| <input id="card-number" name="card-number" type="text" placeholder="1234 5678 9012 3456" required | |
| class="card-input mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition duration-150"> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <label for="card-expiry" class="block text-sm font-medium text-gray-700">Срок действия</label> | |
| <input id="card-expiry" name="card-expiry" type="text" placeholder="MM/YY" required | |
| class="card-input mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition duration-150"> | |
| </div> | |
| <div> | |
| <label for="card-cvv" class="block text-sm font-medium text-gray-700">CVV</label> | |
| <input id="card-cvv" name="card-cvv" type="text" placeholder="123" required | |
| class="card-input mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition duration-150"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="card-name" class="block text-sm font-medium text-gray-700">Имя на карте</label> | |
| <input id="card-name" name="card-name" type="text" placeholder="IVAN IVANOV" required | |
| class="card-input mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 transition duration-150"> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="save-card" name="save-card" type="checkbox" | |
| class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> | |
| <label for="save-card" class="ml-2 block text-sm text-gray-700"> | |
| Сохранить данные карты для будущих платежей | |
| </label> | |
| </div> | |
| <div> | |
| <button type="submit" | |
| class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition transform hover:scale-105 duration-200"> | |
| <i data-feather="lock" class="mr-2 w-4 h-4"></i> | |
| Оплатить <span id="pay-amount">14 900 ₽</span> | |
| </button> | |
| </div> | |
| </form> | |
| <div class="mt-6 text-center" data-aos="fade-right" data-aos-delay="200"> | |
| <p class="text-sm text-gray-600"> | |
| Ваши платежные данные защищены SSL-шифрованием | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right side - Image --> | |
| <div class="hidden lg:block relative w-0 flex-1 payment-gradient"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="text-center text-white px-12" data-aos="fade-left"> | |
| <h3 class="text-3xl font-bold mb-6">Инвестиция в ваше будущее!</h3> | |
| <p class="text-xl opacity-90 mb-8">Начните зарабатывать на своем Telegram-канале уже через месяц</p> | |
| <div class="w-24 h-24 mx-auto bg-white bg-opacity-20 rounded-full flex items-center justify-center"> | |
| <i data-feather="shield" class="w-12 h-12"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| feather.replace(); | |
| // Get plan from URL and update prices | |
| const urlParams = new URLSearchParams(window.location.search); | |
| const plan = urlParams.get('plan') || 'standard'; | |
| const prices = { | |
| 'basic': 9900, | |
| 'standard': 14900, | |
| 'premium': 24900 | |
| }; | |
| const planNames = { | |
| 'basic': 'Базовый', | |
| 'standard': 'Стандарт', | |
| 'premium': 'Премиум' | |
| }; | |
| document.getElementById('plan-price').textContent = `${prices[plan].toLocaleString()} ₽`; | |
| document.getElementById('total-price').textContent = `${prices[plan].toLocaleString()} ₽`; | |
| document.getElementById('pay-amount').textContent = `${prices[plan].toLocaleString()} ₽`; | |
| document.getElementById('plan-name').textContent = planNames[plan]; | |
| // Card preview animation | |
| const cardPreview = document.getElementById('card-preview'); | |
| const cvvInput = document.getElementById('card-cvv'); | |
| cvvInput.addEventListener('focus', () => { | |
| cardPreview.classList.add('flipped'); | |
| }); | |
| cvvInput.addEventListener('blur', () => { | |
| cardPreview.classList.remove('flipped'); | |
| }); | |
| // Real-time card preview | |
| document.getElementById('card-number').addEventListener('input', (e) => { | |
| const value = e.target.value.replace(/\D/g, '').substring(0, 16); | |
| const formatted = value.replace(/(.{4})/g, '$1 ').trim(); | |
| document.getElementById('card-preview-number').textContent = formatted || '•••• •••• •••• ••••'; | |
| }); | |
| document.getElementById('card-expiry').addEventListener('input', (e) => { | |
| const value = e.target.value.replace(/\D/g, '').substring(0, 4); | |
| let formatted = value; | |
| if (value.length > 2) { | |
| formatted = value.substring(0, 2) + '/' + value.substring(2); | |
| } | |
| document.getElementById('card-preview-expiry').textContent = formatted || '••/••'; | |
| }); | |
| document.getElementById('card-cvv').addEventListener('input', (e) => { | |
| const value = e.target.value.replace(/\D/g, '').substring(0, 3); | |
| document.getElementById('card-preview-cvv').textContent = value || '•••'; | |
| }); | |
| document.getElementById('card-name').addEventListener('input', (e) => { | |
| const value = e.target.value.toUpperCase(); | |
| document.getElementById('card-preview-name').textContent = value || 'IVAN IVANOV'; | |
| }); | |
| // Form submission | |
| document.querySelector('form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Simulate payment processing | |
| const userData = JSON.parse(localStorage.getItem('user') || '{}'); | |
| userData.paymentStatus = 'completed'; | |
| userData.paymentDate = new Date().toISOString(); | |
| userData.accessGranted = true; | |
| localStorage.setItem('user', JSON.stringify(userData)); | |
| // Show success animation and redirect | |
| setTimeout(() => { | |
| window.location.href = '/dashboard.html'; | |
| }, 2000); | |
| }); | |
| </script> | |
| </body> | |
| </html> |