File size: 8,805 Bytes
36ff679 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 | <!DOCTYPE html>
<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>
.register-gradient {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.form-input:focus {
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.progress-bar {
transition: width 0.3s ease;
}
</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-sm lg:w-96">
<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">Начните свой путь к успешному Telegram-каналу</p>
</div>
<!-- Progress bar -->
<div class="mb-8" data-aos="fade-right" data-aos-delay="50">
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="progress-bar bg-blue-600 h-2 rounded-full" style="width: 33%"></div>
</div>
<div class="text-sm text-gray-500 mt-2">Шаг 1 из 3</div>
</div>
<form class="space-y-6" data-aos="fade-right" data-aos-delay="100">
<div class="grid grid-cols-2 gap-4">
<div>
<label for="first-name" class="block text-sm font-medium text-gray-700">Имя</label>
<input id="first-name" name="first-name" type="text" required
class="form-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="last-name" class="block text-sm font-medium text-gray-700">Фамилия</label>
<input id="last-name" name="last-name" type="text" required
class="form-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="email" class="block text-sm font-medium text-gray-700">Email</label>
<input id="email" name="email" type="email" required
class="form-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="password" class="block text-sm font-medium text-gray-700">Пароль</label>
<input id="password" name="password" type="password" required
class="form-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="confirm-password" class="block text-sm font-medium text-gray-700">Подтвердите пароль</label>
<input id="confirm-password" name="confirm-password" type="password" required
class="form-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="terms" name="terms" type="checkbox" required
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
<label for="terms" class="ml-2 block text-sm text-gray-700">
Я принимаю <a href="#" class="text-blue-600 hover:text-blue-500">условия использования</a>
</label>
</div>
<div>
<button type="submit"
class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md 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 transform hover:scale-105 duration-200">
Продолжить
</button>
</div>
</form>
<div class="mt-6" data-aos="fade-right" data-aos-delay="200">
<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="/login.html"
class="w-full flex justify-center py-2 px-4 border border-gray-300 rounded-md 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">
Войти
</a>
</div>
</div>
</div>
</div>
<!-- Right side - Image -->
<div class="hidden lg:block relative w-0 flex-1 register-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">Более 1000 учеников уже создали успешные 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="users" class="w-12 h-12"></i>
</div>
</div>
</div>
</div>
</div>
<script>
AOS.init({
duration: 800,
easing: 'ease-in-out',
once: true
});
feather.replace();
// Form handling with step progression
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault();
// Get plan from URL parameters
const urlParams = new URLSearchParams(window.location.search);
const plan = urlParams.get('plan') || 'standard';
// Save user data
const userData = {
firstName: document.getElementById('first-name').value,
lastName: document.getElementById('last-name').value,
email: document.getElementById('email').value,
password: document.getElementById('password').value,
plan: plan,
registeredAt: new Date().toISOString()
};
localStorage.setItem('user', JSON.stringify(userData));
// Redirect to payment page
window.location.href = `/payment.html?plan=${plan}`;
});
</script>
</body>
</html> |