| <!DOCTYPE html> |
| <html lang="ru"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>LinguaMind - Онлайн олимпиада по лингвистике</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"> |
| <style> |
| .gradient-bg { |
| background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%); |
| } |
| .level-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); |
| } |
| .floating { |
| animation: floating 3s ease-in-out infinite; |
| } |
| @keyframes floating { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-15px); } |
| 100% { transform: translateY(0px); } |
| } |
| .language-icon { |
| transition: all 0.3s ease; |
| } |
| .language-icon:hover { |
| transform: scale(1.2) rotate(10deg); |
| } |
| .progress-ring__circle { |
| transition: stroke-dashoffset 0.5s; |
| transform: rotate(-90deg); |
| transform-origin: 50% 50%; |
| } |
| </style> |
| </head> |
| <body class="font-sans bg-gray-50"> |
| |
| <header class="gradient-bg text-white shadow-lg"> |
| <div class="container mx-auto px-4 py-6"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="flex items-center mb-4 md:mb-0"> |
| <i class="fas fa-language text-4xl mr-3"></i> |
| <h1 class="text-3xl font-bold">LinguaMind</h1> |
| </div> |
| <nav class="flex space-x-1 md:space-x-6"> |
| <a href="#about" class="px-3 py-2 rounded hover:bg-white hover:bg-opacity-20 transition">Об олимпиаде</a> |
| <a href="#levels" class="px-3 py-2 rounded hover:bg-white hover:bg-opacity-20 transition">Уровни</a> |
| <a href="#schedule" class="px-3 py-2 rounded hover:bg-white hover:bg-opacity-20 transition">Расписание</a> |
| <a href="#register" class="px-3 py-2 rounded bg-white text-purple-700 font-semibold hover:bg-gray-100 transition">Регистрация</a> |
| </nav> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section class="gradient-bg text-white py-16 md:py-24"> |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-10 md:mb-0"> |
| <h2 class="text-4xl md:text-5xl font-bold mb-6">Онлайн олимпиада по лингвистике для всех уровней</h2> |
| <p class="text-xl mb-8">Проверьте свои знания языков, решите уникальные лингвистические задачи и получите шанс выиграть ценные призы!</p> |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
| <a href="#register" class="bg-white text-purple-700 font-bold py-3 px-6 rounded-lg text-center hover:bg-gray-100 transition">Участвовать</a> |
| <a href="#about" class="bg-transparent border-2 border-white text-white font-bold py-3 px-6 rounded-lg text-center hover:bg-white hover:bg-opacity-20 transition">Узнать больше</a> |
| </div> |
| </div> |
| <div class="md:w-1/2 flex justify-center"> |
| <img src="https://illustrations.popsy.co/amber/digital-nomad.svg" alt="Linguistics Illustration" class="w-full max-w-md floating"> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="about" class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12">Что такое LinguaMind?</h2> |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="bg-gray-50 p-6 rounded-xl shadow-md"> |
| <div class="text-purple-600 text-4xl mb-4"> |
| <i class="fas fa-globe"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Многоязычные задачи</h3> |
| <p class="text-gray-600">Задачи на материале десятков языков мира - от распространённых до экзотических.</p> |
| </div> |
| <div class="bg-gray-50 p-6 rounded-xl shadow-md"> |
| <div class="text-purple-600 text-4xl mb-4"> |
| <i class="fas fa-brain"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Разные уровни сложности</h3> |
| <p class="text-gray-600">Участвуйте на подходящем вам уровне - от новичка до профессионального лингвиста.</p> |
| </div> |
| <div class="bg-gray-50 p-6 rounded-xl shadow-md"> |
| <div class="text-purple-600 text-4xl mb-4"> |
| <i class="fas fa-laptop-code"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3">Онлайн-формат</h3> |
| <p class="text-gray-600">Удобное участие из любой точки мира в любое время в течение отведённого периода.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="levels" class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-4">Уровни олимпиады</h2> |
| <p class="text-center text-gray-600 max-w-2xl mx-auto mb-12">Выберите подходящий уровень сложности в зависимости от вашей подготовки</p> |
| |
| <div class="grid md:grid-cols-3 gap-8"> |
| |
| <div class="bg-white p-6 rounded-xl shadow-md level-card transition duration-300"> |
| <div class="flex justify-between items-start mb-4"> |
| <h3 class="text-xl font-bold text-green-600">Начинающий</h3> |
| <span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">1 уровень</span> |
| </div> |
| <p class="text-gray-600 mb-6">Для тех, кто только начинает знакомство с лингвистикой. Базовые задачи на логику и анализ языковых данных.</p> |
| <div class="mb-6"> |
| <h4 class="font-semibold mb-2">Пример задачи:</h4> |
| <p class="text-gray-600 italic">"В языке X слово 'дом' звучит как 'kata', а слово 'дома' - как 'katar'. Как будет звучать слово 'кошки'?"</p> |
| </div> |
| <div class="flex items-center justify-between"> |
| <div> |
| <span class="text-2xl font-bold">40 мин</span> |
| <span class="text-gray-500 block text-sm">на решение</span> |
| </div> |
| <a href="#register" class="bg-green-100 text-green-700 font-semibold py-2 px-4 rounded-lg hover:bg-green-200 transition">Выбрать</a> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white p-6 rounded-xl shadow-md level-card transition duration-300"> |
| <div class="flex justify-between items-start mb-4"> |
| <h3 class="text-xl font-bold text-yellow-600">Продвинутый</h3> |
| <span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded">2 уровень</span> |
| </div> |
| <p class="text-gray-600 mb-6">Для участников с опытом решения лингвистических задач. Более сложные системы и нетривиальные языки.</p> |
| <div class="mb-6"> |
| <h4 class="font-semibold mb-2">Пример задачи:</h4> |
| <p class="text-gray-600 italic">"Проанализируйте парадигму спряжения глагола в языке Y и восстановите недостающие формы."</p> |
| </div> |
| <div class="flex items-center justify-between"> |
| <div> |
| <span class="text-2xl font-bold">60 мин</span> |
| <span class="text-gray-500 block text-sm">на решение</span> |
| </div> |
| <a href="#register" class="bg-yellow-100 text-yellow-700 font-semibold py-2 px-4 rounded-lg hover:bg-yellow-200 transition">Выбрать</a> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white p-6 rounded-xl shadow-md level-card transition duration-300"> |
| <div class="flex justify-between items-start mb-4"> |
| <h3 class="text-xl font-bold text-red-600">Эксперт</h3> |
| <span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded">3 уровень</span> |
| </div> |
| <p class="text-gray-600 mb-6">Для опытных лингвистов. Задачи на стыке дисциплин с элементами креативного мышления.</p> |
| <div class="mb-6"> |
| <h4 class="font-semibold mb-2">Пример задачи:</h4> |
| <p class="text-gray-600 italic">"Реконструируйте праформу для следующих слов в родственных языках, учитывая исторические изменения."</p> |
| </div> |
| <div class="flex items-center justify-between"> |
| <div> |
| <span class="text-2xl font-bold">90 мин</span> |
| <span class="text-gray-500 block text-sm">на решение</span> |
| </div> |
| <a href="#register" class="bg-red-100 text-red-700 font-semibold py-2 px-4 rounded-lg hover:bg-red-200 transition">Выбрать</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12">Языки в олимпиаде</h2> |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-6"> |
| <div class="flex flex-col items-center p-4 language-icon"> |
| <i class="fas fa-language text-5xl text-blue-500 mb-2"></i> |
| <span class="font-medium">Индоевропейские</span> |
| </div> |
| <div class="flex flex-col items-center p-4 language-icon"> |
| <i class="fas fa-language text-5xl text-green-500 mb-2"></i> |
| <span class="font-medium">Алтайские</span> |
| </div> |
| <div class="flex flex-col items-center p-4 language-icon"> |
| <i class="fas fa-language text-5xl text-yellow-500 mb-2"></i> |
| <span class="font-medium">Афразийские</span> |
| </div> |
| <div class="flex flex-col items-center p-4 language-icon"> |
| <i class="fas fa-language text-5xl text-red-500 mb-2"></i> |
| <span class="font-medium">Уральские</span> |
| </div> |
| <div class="flex flex-col items-center p-4 language-icon"> |
| <i class="fas fa-language text-5xl text-purple-500 mb-2"></i> |
| <span class="font-medium">Австронезийские</span> |
| </div> |
| <div class="flex flex-col items-center p-4 language-icon"> |
| <i class="fas fa-language text-5xl text-indigo-500 mb-2"></i> |
| <span class="font-medium">Искусственные</span> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="schedule" class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12">Расписание олимпиады</h2> |
| |
| <div class="max-w-3xl mx-auto"> |
| |
| <div class="relative"> |
| |
| <div class="absolute left-1/2 w-1 h-full bg-purple-200 transform -translate-x-1/2"></div> |
| |
| |
| <div class="mb-8"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="flex-1 md:text-right md:pr-8 mb-4 md:mb-0"> |
| <h3 class="text-xl font-bold">Регистрация</h3> |
| <p class="text-gray-600">1 - 15 октября</p> |
| </div> |
| <div class="w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center text-white z-10"> |
| <i class="fas fa-user-plus"></i> |
| </div> |
| <div class="flex-1 md:text-left md:pl-8 mt-4 md:mt-0"> |
| <p>Заполните форму и выберите уровень участия</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mb-8"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="flex-1 md:text-right md:pr-8 mb-4 md:mb-0"> |
| <h3 class="text-xl font-bold">Первый тур</h3> |
| <p class="text-gray-600">20 - 25 октября</p> |
| </div> |
| <div class="w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center text-white z-10"> |
| <i class="fas fa-pencil-alt"></i> |
| </div> |
| <div class="flex-1 md:text-left md:pl-8 mt-4 md:mt-0"> |
| <p>Онлайн-тестирование по выбранному уровню сложности</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mb-8"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="flex-1 md:text-right md:pr-8 mb-4 md:mb-0"> |
| <h3 class="text-xl font-bold">Второй тур</h3> |
| <p class="text-gray-600">5 - 10 ноября</p> |
| </div> |
| <div class="w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center text-white z-10"> |
| <i class="fas fa-brain"></i> |
| </div> |
| <div class="flex-1 md:text-left md:pl-8 mt-4 md:mt-0"> |
| <p>Творческие задания для прошедших в финал</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mb-8"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="flex-1 md:text-right md:pr-8 mb-4 md:mb-0"> |
| <h3 class="text-xl font-bold">Результаты</h3> |
| <p class="text-gray-600">20 ноября</p> |
| </div> |
| <div class="w-8 h-8 rounded-full bg-purple-600 flex items-center justify-center text-white z-10"> |
| <i class="fas fa-trophy"></i> |
| </div> |
| <div class="flex-1 md:text-left md:pl-8 mt-4 md:mt-0"> |
| <p>Объявление победителей и вручение призов</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="grid md:grid-cols-4 gap-8 text-center"> |
| <div class="p-6"> |
| <div class="text-5xl font-bold text-purple-600 mb-2" id="participants-count">0</div> |
| <div class="text-gray-600">Участников</div> |
| </div> |
| <div class="p-6"> |
| <div class="text-5xl font-bold text-purple-600 mb-2" id="countries-count">0</div> |
| <div class="text-gray-600">Стран</div> |
| </div> |
| <div class="p-6"> |
| <div class="text-5xl font-bold text-purple-600 mb-2">12+</div> |
| <div class="text-gray-600">Языковых семей</div> |
| </div> |
| <div class="p-6"> |
| <div class="text-5xl font-bold text-purple-600 mb-2">100%</div> |
| <div class="text-gray-600">Онлайн</div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="register" class="py-16 gradient-bg text-white"> |
| <div class="container mx-auto px-4"> |
| <div class="max-w-3xl mx-auto bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-xl p-8 shadow-xl"> |
| <h2 class="text-3xl font-bold text-center mb-8">Регистрация на олимпиаду</h2> |
| |
| <form id="registration-form" class="space-y-6"> |
| <div> |
| <label for="name" class="block mb-2 font-medium">ФИО</label> |
| <input type="text" id="name" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:ring-2 focus:ring-white" required> |
| </div> |
| |
| <div> |
| <label for="email" class="block mb-2 font-medium">Email</label> |
| <input type="email" id="email" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:ring-2 focus:ring-white" required> |
| </div> |
| |
| <div> |
| <label for="level" class="block mb-2 font-medium">Уровень сложности</label> |
| <select id="level" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:ring-2 focus:ring-white text-white" required> |
| <option value="" disabled selected>Выберите уровень</option> |
| <option value="beginner">Начинающий (1 уровень)</option> |
| <option value="intermediate">Продвинутый (2 уровень)</option> |
| <option value="expert">Эксперт (3 уровень)</option> |
| </select> |
| </div> |
| |
| <div> |
| <label for="language" class="block mb-2 font-medium">Основной язык</label> |
| <input type="text" id="language" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:ring-2 focus:ring-white" placeholder="На каком языке вам удобнее получать задания?"> |
| </div> |
| |
| <div class="flex items-center"> |
| <input type="checkbox" id="agree" class="w-5 h-5 rounded bg-white bg-opacity-20 border border-white border-opacity-30 focus:ring-0" required> |
| <label for="agree" class="ml-3">Я согласен с <a href="#" class="underline hover:no-underline">правилами олимпиады</a></label> |
| </div> |
| |
| <button type="submit" class="w-full bg-white text-purple-700 font-bold py-3 px-6 rounded-lg hover:bg-gray-100 transition">Зарегистрироваться</button> |
| </form> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-white"> |
| <div class="container mx-auto px-4 max-w-4xl"> |
| <h2 class="text-3xl font-bold text-center mb-12">Частые вопросы</h2> |
| |
| <div class="space-y-4"> |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> |
| <button class="faq-question w-full flex justify-between items-center p-4 bg-gray-50 hover:bg-gray-100 transition"> |
| <span class="font-medium text-left">Нужно ли знать много языков для участия?</span> |
| <i class="fas fa-chevron-down transition-transform"></i> |
| </button> |
| <div class="faq-answer hidden p-4 border-t border-gray-200"> |
| <p>Нет, это распространённое заблуждение. Лингвистические задачи построены так, что все необходимые данные предоставляются в условии. Ваша задача - анализировать эти данные и находить закономерности.</p> |
| </div> |
| </div> |
| |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> |
| <button class="faq-question w-full flex justify-between items-center p-4 bg-gray-50 hover:bg-gray-100 transition"> |
| <span class="font-medium text-left">Как проходит онлайн-олимпиада?</span> |
| <i class="fas fa-chevron-down transition-transform"></i> |
| </button> |
| <div class="faq-answer hidden p-4 border-t border-gray-200"> |
| <p>После регистрации вы получите доступ к личному кабинету. В день олимпиады вам нужно будет войти в систему в любое удобное время в течение отведённого периода (например, с 10:00 до 22:00). После начала тестирования запускается таймер, и вы получаете доступ к заданиям.</p> |
| </div> |
| </div> |
| |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> |
| <button class="faq-question w-full flex justify-between items-center p-4 bg-gray-50 hover:bg-gray-100 transition"> |
| <span class="font-medium text-left">Можно ли участвовать в нескольких уровнях?</span> |
| <i class="fas fa-chevron-down transition-transform"></i> |
| </button> |
| <div class="faq-answer hidden p-4 border-t border-gray-200"> |
| <p>Да, вы можете зарегистрироваться на несколько уровней, но учтите, что они проходят в разное время, и вам нужно будет успеть выполнить все задания в отведённые сроки.</p> |
| </div> |
| </div> |
| |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> |
| <button class="faq-question w-full flex justify-between items-center p-4 bg-gray-50 hover:bg-gray-100 transition"> |
| <span class="font-medium text-left">Какие призы можно получить?</span> |
| <i class="fas fa-chevron-down transition-transform"></i> |
| </button> |
| <div class="faq-answer hidden p-4 border-t border-gray-200"> |
| <p>Победители получают дипломы, ценные призы (электронные книги, подписки на лингвистические ресурсы), а также возможность опубликовать свои решения в сборнике олимпиады. Все участники получают электронные сертификаты.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12">Отзывы участников</h2> |
| |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="bg-white p-6 rounded-xl shadow-md"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 font-bold mr-4">АК</div> |
| <div> |
| <h4 class="font-semibold">Анна К.</h4> |
| <div class="flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| </div> |
| <p class="text-gray-600 italic">"Участвовала впервые на начинающем уровне. Задачи очень интересные, заставляют думать нестандартно. Организация на высшем уровне!"</p> |
| </div> |
| |
| <div class="bg-white p-6 rounded-xl shadow-md"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 font-bold mr-4">МС</div> |
| <div> |
| <h4 class="font-semibold">Михаил С.</h4> |
| <div class="flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star-half-alt"></i> |
| </div> |
| </div> |
| </div> |
| <p class="text-gray-600 italic">"Отличный формат для проверки своих лингвистических навыков. Особенно понравились задачи на редких языках - настоящий вызов для мозга!"</p> |
| </div> |
| |
| <div class="bg-white p-6 rounded-xl shadow-md"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 font-bold mr-4">ЕП</div> |
| <div> |
| <h4 class="font-semibold">Елена П.</h4> |
| <div class="flex text-yellow-400"> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| <i class="fas fa-star"></i> |
| </div> |
| </div> |
| </div> |
| <p class="text-gray-600 italic">"Участвую третий год подряд, каждый раз повышаю уровень. Отличная возможность развиваться в лингвистике, не выходя из дома."</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-purple-700 text-white"> |
| <div class="container mx-auto px-4 text-center"> |
| <h2 class="text-3xl font-bold mb-6">Готовы проверить свои лингвистические способности?</h2> |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Присоединяйтесь к тысячам участников по всему миру!</p> |
| <a href="#register" class="inline-block bg-white text-purple-700 font-bold py-3 px-8 rounded-lg hover:bg-gray-100 transition">Зарегистрироваться сейчас</a> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-900 text-white py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="grid md:grid-cols-4 gap-8"> |
| <div> |
| <h3 class="text-xl font-bold mb-4 flex items-center"> |
| <i class="fas fa-language mr-2"></i> LinguaMind |
| </h3> |
| <p class="text-gray-400">Онлайн олимпиада по лингвистике для всех уровней подготовки.</p> |
| </div> |
| |
| <div> |
| <h4 class="font-bold mb-4">Навигация</h4> |
| <ul class="space-y-2"> |
| <li><a href="#about" class="text-gray-400 hover:text-white transition">Об олимпиаде</a></li> |
| <li><a href="#levels" class="text-gray-400 hover:text-white transition">Уровни</a></li> |
| <li><a href="#schedule" class="text-gray-400 hover:text-white transition">Расписание</a></li> |
| <li><a href="#register" class="text-gray-400 hover:text-white transition">Регистрация</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="font-bold mb-4">Контакты</h4> |
| <ul class="space-y-2"> |
| <li class="flex items-center text-gray-400"><i class="fas fa-envelope mr-2"></i> info@linguamind.com</li> |
| <li class="flex items-center text-gray-400"><i class="fas fa-phone mr-2"></i> +7 (123) 456-7890</li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="font-bold mb-4">Соцсети</h4> |
| <div class="flex space-x-4"> |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-purple-600 transition"> |
| <i class="fab fa-vk"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-purple-600 transition"> |
| <i class="fab fa-telegram"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-purple-600 transition"> |
| <i class="fab fa-youtube"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> |
| <p>© 2023 LinguaMind. Все права защищены.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| function animateCount(elementId, target, duration = 2000) { |
| const element = document.getElementById(elementId); |
| const start = 0; |
| const increment = target / (duration / 16); |
| let current = start; |
| |
| const timer = setInterval(() => { |
| current += increment; |
| if (current >= target) { |
| clearInterval(timer); |
| current = target; |
| } |
| element.textContent = Math.floor(current).toLocaleString(); |
| }, 16); |
| } |
| |
| |
| document.querySelectorAll('.faq-question').forEach(button => { |
| button.addEventListener('click', () => { |
| const answer = button.nextElementSibling; |
| const icon = button.querySelector('i'); |
| |
| answer.classList.toggle('hidden'); |
| icon.classList.toggle('rotate-180'); |
| }); |
| }); |
| |
| |
| document.getElementById('registration-form').addEventListener('submit', function(e) { |
| e.preventDefault(); |
| alert('Спасибо за регистрацию! Мы отправили подтверждение на ваш email.'); |
| this.reset(); |
| }); |
| |
| |
| function animateOnScroll() { |
| const elements = document.querySelectorAll('.level-card, .language-icon'); |
| |
| elements.forEach(element => { |
| const elementPosition = element.getBoundingClientRect().top; |
| const screenPosition = window.innerHeight / 1.2; |
| |
| if (elementPosition < screenPosition) { |
| element.style.opacity = '1'; |
| element.style.transform = 'translateY(0)'; |
| } |
| }); |
| } |
| |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| |
| document.querySelectorAll('.level-card, .language-icon').forEach(el => { |
| el.style.opacity = '0'; |
| el.style.transform = 'translateY(20px)'; |
| el.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; |
| }); |
| |
| |
| animateCount('participants-count', 5243); |
| animateCount('countries-count', 37); |
| |
| |
| window.addEventListener('scroll', animateOnScroll); |
| |
| animateOnScroll(); |
| }); |
| </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=evgenii89/lings" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
