не работает регистрация и вход переделай и пересмотри свой главный экран - 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> | |
| .sidebar-gradient { | |
| background: linear-gradient(180deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .progress-ring__circle { | |
| transition: stroke-dashoffset 0.35s; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| .module-completed { | |
| background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased bg-gray-100"> | |
| <div class="flex h-screen"> | |
| <!-- Sidebar --> | |
| <div class="sidebar-gradient w-64 text-white flex-shrink-0"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-8"> | |
| <i data-feather="message-square" class="text-white mr-2"></i> | |
| <span class="text-xl font-semibold">TG Channel Pro</span> | |
| </div> | |
| <nav class="space-y-2"> | |
| <a href="#" class="flex items-center px-4 py-3 bg-white bg-opacity-20 rounded-lg"> | |
| <i data-feather="home" class="mr-3 w-5 h-5"></i> | |
| <span>Главная</span> | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 hover:bg-white hover:bg-opacity-10 rounded-lg transition"> | |
| <i data-feather="book-open" class="mr-3 w-5 h-5"></i> | |
| <span>Модули</span> | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 hover:bg-white hover:bg-opacity-10 rounded-lg transition"> | |
| <i data-feather="bar-chart-2" class="mr-3 w-5 h-5"></i> | |
| <span>Прогресс</span> | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 hover:bg-white hover:bg-opacity-10 rounded-lg transition"> | |
| <i data-feather="users" class="mr-3 w-5 h-5"></i> | |
| <span>Сообщество</span> | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 hover:bg-white hover:bg-opacity-10 rounded-lg transition"> | |
| <i data-feather="settings" class="mr-3 w-5 h-5"></i> | |
| <span>Настройки</span> | |
| </a> | |
| </nav> | |
| </div> | |
| <div class="absolute bottom-0 w-64 p-6"> | |
| <div class="bg-white bg-opacity-10 rounded-lg p-4"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 bg-white bg-opacity-20 rounded-full flex items-center justify-center"> | |
| <i data-feather="user" class="w-5 h-5"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <div class="text-sm font-medium" id="user-name">Иван Иванов</div> | |
| <div class="text-xs opacity-75" id="user-email">ivan@example.com</div> | |
| </div> | |
| </div> | |
| <button onclick="logout()" class="w-full flex items-center justify-center py-2 bg-white bg-opacity-20 rounded-lg hover:bg-opacity-30 transition"> | |
| <i data-feather="log-out" class="mr-2 w-4 h-4"></i> | |
| Выйти | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 overflow-auto"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center h-16"> | |
| <h1 class="text-2xl font-semibold text-gray-900">Личный кабинет</h1> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-2 text-gray-600 hover:text-gray-900 rounded-lg hover:bg-gray-100 transition"> | |
| <i data-feather="bell"></i> | |
| </button> | |
| <button class="p-2 text-gray-600 hover:text-gray-900 rounded-lg hover:bg-gray-100 transition"> | |
| <i data-feather="help-circle"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Dashboard Content --> | |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <!-- Welcome Section --> | |
| <div class="bg-gradient-to-r from-blue-600 to-blue-800 rounded-xl p-8 text-white mb-8" data-aos="fade-up"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h2 class="text-2xl font-bold mb-2">Добро пожаловать, <span id="welcome-name">Иван</span>!</h2> | |
| <p class="opacity-90">Вы на <span class="font-semibold">12%</span> пути к созданию успешного Telegram-канала</p> | |
| </div> | |
| <div class="w-20 h-20"> | |
| <svg class="w-full h-full" viewBox="0 0 36 36"> | |
| <path class="text-white opacity-20" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke-width="2"/> | |
| <path class="text-white" stroke-dasharray="12, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" fill="none" stroke-width="2" stroke-linecap="round"/> | |
| <text x="18" y="22" class="text-[8px] font-semibold fill-white text-center">12%</text> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Progress Overview --> | |
| <div class="grid md:grid-cols-3 gap-6 mb-8"> | |
| <div class="bg-white rounded-xl p-6 shadow-sm" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-semibold text-gray-700">Пройдено модулей</h3> | |
| <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center"> | |
| <i data-feather="check-circle" class="text-blue-600 w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <div class="text-3xl font-bold text-gray-900">1/5</div> | |
| <div class="text-sm text-gray-500 mt-1">из 5 модулей</div> | |
| </div> | |
| <div class="bg-white rounded-xl p-6 shadow-sm" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-semibold text-gray-700">Выполнено заданий</h3> | |
| <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center"> | |
| <i data-feather="file-text" class="text-green-600 w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <div class="text-3xl font-bold text-gray-900">2/8</div> | |
| <div class="text-sm text-gray-500 mt-1">из 8 заданий</div> | |
| </div> | |
| <div class="bg-white rounded-xl p-6 shadow-sm" data-aos="fade-up" data-aos-delay="300"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-semibold text-gray-700">Активность</h3> | |
| <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center"> | |
| <i data-feather="activity" class="text-purple-600 w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <div class="text-3xl font-bold text-gray-900">4 дня</div> | |
| <div class="text-sm text-gray-500 mt-1">подряд учитесь</div> | |
| </div> | |
| </div> | |
| <!-- Current Module --> | |
| <div class="bg-white rounded-xl p-6 shadow-sm mb-8" data-aos="fade-up"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <h2 class="text-xl font-semibold text-gray-900">Текущий модуль</h2> | |
| <span class="px-3 py-1 bg-blue-100 text-blue-800 text-sm font-medium rounded-full"> | |
| Активный | |
| </span> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center mr-4"> | |
| <span class="text-white font-bold text-lg">2</span> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-lg">Контент-стратегия</h3> | |
| <p class="text-gray-600">Создание контент-плана и повышение вовлеченности</p> | |
| </div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-3">Следующие уроки:</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i data-feather="play-circle" class="text-gray-400 mr-2 w-4 h-4"></i> | |
| <span>Создание контент-плана</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i data-feather="play-circle" class="text-gray-400 mr-2 w-4 h-4"></i> | |
| <span>Методы повышения вовлеченности</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-700 mb-3">Прогресс модуля:</h4> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 30%"></div> | |
| </div> | |
| <div class="text-sm text-gray-500 mt-2">3 из 10 уроков пройдено</div> | |
| </div> | |
| </div> | |
| <button class="mt-6 w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-medium transition"> | |
| Продолжить обучение | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Recent Activity --> | |
| <div class="bg-white rounded-xl p-6 shadow-sm" data-aos="fade-up"> | |
| <h2 class="text-xl font-semibold text-gray-900 mb-6">Последняя активность</h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-center p-4 bg-green-50 rounded-lg"> | |
| <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-4"> | |
| <i data-feather="check-circle" class="text-green-600 w-5 h-5"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="font-medium">Задание выполнено</div> | |
| <div class="text-sm text-gray-600">Оценка текущего канала</div> | |
| </div> | |
| <div class="text-sm text-gray-500">2 часа назад</div> | |
| </div> | |
| <div class="flex items-center p-4 bg-blue-50 rounded-lg"> | |
| <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-4"> | |
| <i data-feather="book-open" class="text-blue-600 w-5 h-5"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="font-medium">Урок пройден</div> | |
| <div class="text-sm text-gray-600">Типы Telegram-каналов</div> | |
| </div> | |
| <div class="text-sm text-gray-500">Вчера</div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| feather.replace(); | |
| // Load user data | |
| const userData = JSON.parse(localStorage.getItem('user') || '{}'); | |
| if (!userData.email) { | |
| window.location.href = '/login.html'; | |
| } | |
| // Update user info | |
| document.getElementById('user-name').textContent = `${userData.firstName} ${userData.lastName}`; | |
| document.getElementById('user-email').textContent = userData.email; | |
| document.getElementById('welcome-name').textContent = userData.firstName; | |
| function logout() { | |
| localStorage.removeItem('user'); | |
| window.location.href = '/index.html'; | |
| } | |
| // Save user data to file (simulated) | |
| function saveUserData() { | |
| const users = JSON.parse(localStorage.getItem('users') || '[]'); | |
| const existingUserIndex = users.findIndex(u => u.email === userData.email); | |
| if (existingUserIndex > -1) { | |
| users[existingUserIndex] = userData; | |
| } else { | |
| users.push(userData); | |
| } | |
| localStorage.setItem('users', JSON.stringify(users)); | |
| } | |
| // Initial save | |
| saveUserData(); | |
| </script> | |
| </body> | |
| </html> |