Spaces:
Running
Running
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Молодёжный Инфо Хаб</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap'); | |
| body { | |
| font-family: 'Rubik', sans-serif; | |
| line-height: 1.4; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .card-hover { | |
| transition: all 0.2s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .news-card { | |
| height: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .news-content { | |
| flex-grow: 1; | |
| padding: 1rem; | |
| } | |
| .compact-section { | |
| margin-bottom: 2rem; | |
| } | |
| .compact-card { | |
| padding: 1.25rem; | |
| } | |
| .dense-grid { | |
| gap: 1rem; | |
| } | |
| /* Auth modal styles */ | |
| .modal { | |
| z-index: 1000; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <div id="vanta-bg" class="fixed inset-0 z-0"></div> | |
| <div class="relative z-10 min-h-screen"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="message-square" class="w-6 h-6"></i> | |
| <h1 class="text-xl font-bold">YouthPulse Messenger</h1> | |
| </div> | |
| <a href="messenger.html" class="bg-white text-purple-700 px-4 py-1.5 rounded-full text-sm font-medium hover:bg-purple-100 transition flex items-center"> | |
| <i data-feather="send" class="inline mr-1 w-4 h-4"></i> Перейти в чат | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-6"> | |
| <!-- Messenger Preview Section --> | |
| <section class="compact-section"> | |
| <div class="flex items-center mb-4"> | |
| <i data-feather="message-square" class="w-5 h-5 mr-2 text-purple-600"></i> | |
| <h2 class="text-xl font-bold text-gray-800">Последние сообщения</h2> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden"> | |
| <div class="divide-y divide-gray-200"> | |
| <div class="p-4 hover:bg-purple-50 transition cursor-pointer" onclick="location.href='messenger.html'"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/people/40x40/1" alt="User" class="w-10 h-10 rounded-full mr-3"> | |
| <div class="flex-grow"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="font-bold">Алексей Петров</h3> | |
| <span class="text-xs text-gray-500">10:32</span> | |
| </div> | |
| <p class="text-sm text-gray-600 truncate">Привет! Как дела? Посмотри, какое красивое место!</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 hover:bg-purple-50 transition cursor-pointer" onclick="location.href='messenger.html'"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/people/40x40/2" alt="User" class="w-10 h-10 rounded-full mr-3"> | |
| <div class="flex-grow"> | |
| <div class="flex justify-between items-center"> | |
| <h3 class="font-bold">Мария Иванова</h3> | |
| <span class="text-xs text-gray-500">09:15</span> | |
| </div> | |
| <p class="text-sm text-gray-600 truncate">Когда встречаемся? У меня есть новости!</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-3 text-center bg-purple-100"> | |
| <a href="messenger.html" class="text-purple-700 font-medium text-sm hover:underline">Все сообщения →</a> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="gradient-bg text-white py-6 mt-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-3 md:mb-0"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="zap" class="w-5 h-5"></i> | |
| <span class="text-lg font-bold">YouthPulse Hub</span> | |
| </div> | |
| <p class="mt-1 text-purple-200 text-sm">Вся информация в одном месте</p> | |
| </div> | |
| <div class="flex flex-col md:flex-row items-center justify-center space-y-2 md:space-y-0 md:space-x-6"> | |
| <a href="messenger.html" class="bg-white text-purple-700 px-4 py-2 rounded-full text-sm font-medium hover:bg-purple-100 transition flex items-center"> | |
| <i data-feather="message-square" class="inline mr-2 w-4 h-4"></i> Начать общение | |
| </a> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="hover:text-purple-300 transition"><i data-feather="instagram" class="w-4 h-4"></i></a> | |
| <a href="#" class="hover:text-purple-300 transition"><i data-feather="twitter" class="w-4 h-4"></i></a> | |
| <a href="#" class="hover:text-purple-300 transition"><i data-feather="facebook" class="w-4 h-4"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-purple-400 mt-4 pt-4 text-center text-purple-200 text-xs"> | |
| <p>© 2023 YouthPulse Hub. Все права защищены.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Vanta.js background | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x764ba2, | |
| backgroundColor: 0xf8fafc, | |
| size: 0.8 | |
| }); | |
| // Feather icons | |
| feather.replace(); | |
| // Auth modal | |
| function openAuthModal() { | |
| const modal = document.createElement('div'); | |
| modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50'; | |
| modal.innerHTML = ` | |
| <div class="bg-white rounded-lg p-6 w-full max-w-md"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold">Вход по номеру телефона</h3> | |
| <button onclick="this.parentElement.parentElement.parentElement.remove()" class="text-gray-500 hover:text-gray-700"> | |
| <i data-feather="x"></i> | |
| </button> | |
| </div> | |
| <div id="phone-step"> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2">Номер телефона</label> | |
| <input type="tel" id="phone-input" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="+7 (___) ___-__-__"> | |
| </div> | |
| <button onclick="sendSmsCode()" class="w-full bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition"> | |
| Получить код | |
| </button> | |
| </div> | |
| <div id="code-step" class="hidden"> | |
| <div class="mb-4"> | |
| <label class="block text-gray-700 mb-2">Код из SMS</label> | |
| <input type="text" id="code-input" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Введите 4-значный код"> | |
| </div> | |
| <button onclick="verifyCode()" class="w-full bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition"> | |
| Подтвердить | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| document.body.appendChild(modal); | |
| feather.replace(); | |
| } | |
| function sendSmsCode() { | |
| const phone = document.getElementById('phone-input').value; | |
| if (!phone) return alert('Введите номер телефона'); | |
| // Here you would normally call your backend API to send SMS | |
| document.getElementById('phone-step').classList.add('hidden'); | |
| document.getElementById('code-step').classList.remove('hidden'); | |
| } | |
| function verifyCode() { | |
| const code = document.getElementById('code-input').value; | |
| if (!code || code.length !== 4) return alert('Введите корректный код'); | |
| // Here you would verify the code with your backend | |
| alert('Успешный вход!'); | |
| document.querySelector('[onclick="openAuthModal()"]').textContent = 'Мой профиль'; | |
| document.querySelector('.modal').remove(); | |
| } | |
| // Smooth scroll for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |