Spaces:
Running
Running
Download index.html from mDuck/schoolfest: direct link, hf CLI and curl.
- Browser
- Download file 47.3 kB
-
https://huggingface.co/spaces/mDuck/schoolfest/resolve/main/index.html
- Command line
-
hf download hf://spaces/mDuck/schoolfest/index.html
-
curl -L -o index.html https://huggingface.co/spaces/mDuck/schoolfest/resolve/main/index.html
47.3 kB
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Фестиваль школьного спорта 2025 | Открой в себе супергероя!</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"> | |
| <link href="https://fonts.googleapis.com/css2?family=Ruthless+Sketch:wght@400&display=swap" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;700;900&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --yellow: #FFD700; | |
| --orange: #FF6B35; | |
| --blue: #4361EE; | |
| --green: #38B000; | |
| --red: #D90429; | |
| } | |
| body { | |
| font-family: 'Rubik', sans-serif; | |
| background-color: #f8f9fa; | |
| color: #333; | |
| overflow-x: hidden; | |
| } | |
| .comic-font { | |
| font-family: 'Ruthless Sketch', cursive; | |
| letter-spacing: 1px; | |
| font-style: italic; | |
| font-weight: 400; | |
| } | |
| .comic-box { | |
| border: 4px solid #000; | |
| box-shadow: 8px 8px 0 rgba(0,0,0,0.2); | |
| position: relative; | |
| background: white; | |
| } | |
| .comic-box::before { | |
| content: ""; | |
| position: absolute; | |
| top: -15px; | |
| left: -15px; | |
| right: -15px; | |
| bottom: -15px; | |
| border: 3px dashed var(--orange); | |
| z-index: -1; | |
| opacity: 0.7; | |
| } | |
| .bang { | |
| position: absolute; | |
| font-family: 'Ruthless Sketch', cursive; | |
| font-style: italic; | |
| color: var(--red); | |
| font-size: 3rem; | |
| transform: rotate(-20deg); | |
| text-shadow: 3px 3px 0 #000; | |
| animation: pulse 1.5s infinite alternate; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: rotate(-20deg) scale(1); } | |
| 100% { transform: rotate(-20deg) scale(1.1); } | |
| } | |
| .hero { | |
| background: linear-gradient(135deg, var(--blue), var(--green)); | |
| clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); | |
| } | |
| .comic-card { | |
| transition: all 0.3s ease; | |
| } | |
| .comic-card:hover { | |
| transform: translateY(-10px) rotate(2deg); | |
| box-shadow: 15px 15px 0 rgba(0,0,0,0.3); | |
| } | |
| .comic-stripe { | |
| background: repeating-linear-gradient( | |
| 45deg, | |
| var(--yellow), | |
| var(--yellow) 10px, | |
| var(--orange) 10px, | |
| var(--orange) 20px | |
| ); | |
| height: 10px; | |
| } | |
| .speech-bubble { | |
| position: relative; | |
| background: white; | |
| border: 3px solid #000; | |
| border-radius: 20px; | |
| padding: 15px; | |
| } | |
| .speech-bubble:after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -15px; | |
| left: 50px; | |
| border-width: 15px 15px 0; | |
| border-style: solid; | |
| border-color: white transparent; | |
| display: block; | |
| width: 0; | |
| } | |
| .speech-bubble:before { | |
| content: ''; | |
| position: absolute; | |
| bottom: -18px; | |
| left: 50px; | |
| border-width: 15px 15px 0; | |
| border-style: solid; | |
| border-color: black transparent; | |
| display: block; | |
| width: 0; | |
| z-index: -1; | |
| } | |
| .dot-pattern { | |
| background-image: radial-gradient(circle, #000 1px, transparent 1px); | |
| background-size: 10px 10px; | |
| } | |
| .activity-tag { | |
| position: absolute; | |
| top: -10px; | |
| right: 20px; | |
| background: var(--red); | |
| color: white; | |
| padding: 5px 15px; | |
| border-radius: 20px; | |
| font-weight: bold; | |
| box-shadow: 3px 3px 0 #000; | |
| font-family: 'Ruthless Sketch', cursive; | |
| font-style: italic; | |
| } | |
| .scroll-top { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| background: var(--orange); | |
| color: white; | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| cursor: pointer; | |
| box-shadow: 3px 3px 0 #000; | |
| transition: all 0.3s ease; | |
| z-index: 1000; | |
| } | |
| .scroll-top:hover { | |
| transform: translateY(-5px); | |
| background: var(--red); | |
| } | |
| .map-container { | |
| position: relative; | |
| overflow: hidden; | |
| border: 5px solid #000; | |
| box-shadow: 10px 10px 0 rgba(0,0,0,0.2); | |
| } | |
| .map-container iframe { | |
| width: 100%; | |
| height: 400px; | |
| border: none; | |
| } | |
| .nav-item { | |
| position: relative; | |
| } | |
| .nav-item::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 3px; | |
| bottom: -5px; | |
| left: 0; | |
| background-color: var(--yellow); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-item:hover::after { | |
| width: 100%; | |
| } | |
| .comic-divider { | |
| height: 10px; | |
| background: repeating-linear-gradient( | |
| to right, | |
| var(--blue), | |
| var(--blue) 10px, | |
| var(--green) 10px, | |
| var(--green) 20px | |
| ); | |
| margin: 40px 0; | |
| } | |
| .partner-logo { | |
| filter: grayscale(100%); | |
| transition: all 0.3s ease; | |
| opacity: 0.7; | |
| } | |
| .partner-logo:hover { | |
| filter: grayscale(0%); | |
| opacity: 1; | |
| transform: scale(1.1); | |
| } | |
| @media (max-width: 768px) { | |
| .hero { | |
| clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%); | |
| } | |
| .comic-box::before { | |
| top: -10px; | |
| left: -10px; | |
| right: -10px; | |
| bottom: -10px; | |
| } | |
| .bang { | |
| font-size: 2rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <!-- Навигация --> | |
| <nav class="bg-white shadow-lg sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="comic-font text-3xl font-bold text-blue-600 mr-2">ФШС<span class="text-orange-500">2025</span></div> | |
| <div class="hidden md:flex space-x-6 ml-10"> | |
| <a href="#about" class="nav-item text-gray-800 hover:text-blue-600 font-bold">О фестивале</a> | |
| <a href="#activities" class="nav-item text-gray-800 hover:text-blue-600 font-bold">Активности</a> | |
| <a href="#partners" class="nav-item text-gray-800 hover:text-blue-600 font-bold">Партнёры</a> | |
| <a href="#location" class="nav-item text-gray-800 hover:text-blue-600 font-bold">Где проходит</a> | |
| </div> | |
| </div> | |
| <div> | |
| <a href="#register" class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-6 rounded-full shadow-md transition duration-300 transform hover:scale-105"> | |
| Хочу участвовать! | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Герой-блок --> | |
| <section class="hero text-white py-20 md:py-32 relative overflow-hidden"> | |
| <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 relative"> | |
| <div class="bang" style="top: -30px; left: -20px;">BAM!</div> | |
| <div class="bang" style="bottom: 20px; right: -20px;">POW!</div> | |
| <h1 class="comic-font text-5xl md:text-7xl mb-6 leading-tight"> | |
| Открой в себе <span class="text-yellow-300">супергероя</span> —<br> | |
| на Фестивале школьного спорта! | |
| </h1> | |
| <p class="text-xl mb-8"> | |
| Присоединяйся к самому яркому спортивному событию года!<br> | |
| Москва, 15-17 мая 2025 года | |
| </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-yellow-400 hover:bg-yellow-500 text-gray-900 font-bold py-3 px-8 rounded-full shadow-lg transition duration-300 transform hover:scale-105 text-center"> | |
| <i class="fas fa-running mr-2"></i> Хочу участвовать! | |
| </a> | |
| <a href="#activities" class="bg-transparent border-2 border-white hover:bg-white hover:text-blue-600 font-bold py-3 px-8 rounded-full shadow-lg transition duration-300 transform hover:scale-105 text-center"> | |
| <i class="fas fa-list-ul mr-2"></i> Программа | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="comic-box p-2 bg-white relative"> | |
| <img src="https://images.unsplash.com/photo-1541534741688-6078c6efb9d5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Дети занимаются спортом" class="w-full h-auto max-w-md"> | |
| <div class="activity-tag comic-font">NEW 2025!</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="comic-stripe absolute bottom-0 left-0 right-0"></div> | |
| </section> | |
| <!-- О фестивале --> | |
| <section id="about" class="py-16 bg-white relative"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="comic-font text-4xl md:text-5xl mb-6 text-gray-800"> | |
| <span class="text-blue-600">Фестиваль</span> <span class="text-orange-500">школьного</span> <span class="text-green-500">спорта</span> | |
| </h2> | |
| <div class="w-24 h-2 bg-yellow-400 mx-auto mb-6"></div> | |
| <p class="text-xl text-gray-600 max-w-4xl mx-auto"> | |
| Где обычные школьники становятся настоящими супергероями! | |
| </p> | |
| </div> | |
| <div class="flex flex-col md:flex-row items-center mb-16"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> | |
| <div class="comic-box p-6 dot-pattern"> | |
| <div class="speech-bubble"> | |
| <p class="text-lg leading-relaxed"> | |
| Не все герои носят яркие костюмы и обладают сверхспособностями. Некоторые из них каждый день отправляются в школу или колледж, занимаются спортом и добиваются невероятных высот. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <img src="https://images.unsplash.com/photo-1517649763962-0c623066f6f4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Дети занимаются спортом" class="w-full rounded-lg shadow-xl"> | |
| </div> | |
| </div> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 order-2 md:order-1 mt-10 md:mt-0"> | |
| <img src="https://images.unsplash.com/photo-1547347298-4074fc3086f0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Дети играют в баскетбол" class="w-full rounded-lg shadow-xl"> | |
| </div> | |
| <div class="md:w-1/2 order-1 md:order-2 md:pl-10"> | |
| <div class="comic-box p-6 bg-blue-50"> | |
| <h3 class="comic-font text-3xl text-blue-600 mb-4">Настоящие истории героев</h3> | |
| <p class="text-lg leading-relaxed mb-4"> | |
| Представьте себе мир, где школьники, студенты и их наставники становятся настоящими героями. В нашем уникальном комиксе оживают реальные истории, и вы погрузитесь в мир, где молодые спортсмены стремятся к своим мечтам. | |
| </p> | |
| <p class="text-lg leading-relaxed"> | |
| Возможно, вы не всегда замечаете этих героев, но они среди нас – на нашем Фестивале школьного спорта! Здесь их достижения и упорство становятся источником вдохновения для каждого жителя Москвы. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="comic-divider"></div> | |
| <div class="text-center"> | |
| <h3 class="comic-font text-3xl text-gray-800 mb-6">Итак, мы начинаем путешествие по страницам нашего комикса!</h3> | |
| <a href="#activities" class="inline-block bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 px-8 rounded-full shadow-lg transition duration-300 transform hover:scale-105"> | |
| <i class="fas fa-arrow-down mr-2"></i> Узнать программу | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Карточки активностей --> | |
| <section id="activities" class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="comic-font text-4xl md:text-5xl mb-6 text-gray-800"> | |
| <span class="text-blue-600">Спортивные</span> <span class="text-orange-500">активности</span> | |
| </h2> | |
| <div class="w-24 h-2 bg-green-500 mx-auto mb-6"></div> | |
| <p class="text-xl text-gray-600 max-w-4xl mx-auto"> | |
| Выбери свой путь супергероя! Более 20 видов спорта и активностей для всех возрастов. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8" id="activities-grid"> | |
| <!-- Карточки будут загружены через JavaScript --> | |
| </div> | |
| <div class="text-center mt-16"> | |
| <a href="#full-activities" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full shadow-lg transition duration-300 transform hover:scale-105"> | |
| <i class="fas fa-list-ol mr-2"></i> Посмотреть полную программа | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Полная программа активностей --> | |
| <section id="full-activities" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="comic-font text-4xl md:text-5xl mb-6 text-gray-800"> | |
| <span class="text-orange-500">Полная</span> <span class="text-blue-600">программа</span> <span class="text-green-500">фестиваля</span> | |
| </h2> | |
| <div class="w-24 h-2 bg-yellow-400 mx-auto mb-6"></div> | |
| <p class="text-xl text-gray-600 max-w-4xl mx-auto"> | |
| Все активности, мастер-классы и соревнования Фестиваля школьного спорта 2025 | |
| </p> | |
| </div> | |
| <!-- Баскетбол 3x3 --> | |
| <div class="mb-20 comic-box p-6 bg-white relative"> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/3 mb-6 md:mb-0 md:pr-6"> | |
| <img src="https://images.unsplash.com/photo-1546519638-68e109498ffc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Баскетбол 3x3" class="w-full rounded-lg shadow-md"> | |
| </div> | |
| <div class="md:w-2/3"> | |
| <h3 class="comic-font text-3xl text-blue-600 mb-4">Баскетбол 3x3</h3> | |
| <div class="flex items-center mb-4"> | |
| <span class="bg-yellow-400 text-gray-900 font-bold py-1 px-3 rounded-full text-sm mr-3">Для всех</span> | |
| <span class="bg-green-500 text-white font-bold py-1 px-3 rounded-full text-sm">15-17 мая</span> | |
| </div> | |
| <p class="text-lg leading-relaxed mb-4"> | |
| Динамичная версия классического баскетбола с меньшим количеством игроков. Идеально подходит для уличных площадок и быстрых матчей. Прими участие в турнире или просто поиграй для удовольствия! | |
| </p> | |
| <div class="mb-4"> | |
| <h4 class="font-bold text-lg mb-2">Расписание:</h4> | |
| <ul class="list-disc pl-5"> | |
| <li>15 мая: 10:00-14:00 - Регистрация команд</li> | |
| <li>15 мая: 14:00-18:00 - Групповой этап</li> | |
| <li>16 мая: 11:00-17:00 - Плей-офф</li> | |
| <li>17 мая: 12:00-14:00 - Финал и награждение</li> | |
| </ul> | |
| </div> | |
| <a href="#register" class="inline-block bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-6 rounded-full shadow-md transition duration-300"> | |
| Зарегистрироваться | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Игры ГТО --> | |
| <div class="mb-20 comic-box p-6 bg-white relative"> | |
| <div class="flex flexocol md:flex-row"> | |
| <div class="md:w-1/3 mb-6 md:mb-0 md:pr-6"> | |
| <img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Игры ГТО" class="w-full rounded-lg shadow-md"> | |
| </div> | |
| <div class="md:w-2/3"> | |
| <h3 class="comic-font text-3xl text-blue-600 mb-4">Игры ГТО</h3> | |
| <div class="flex items-center mb-4"> | |
| <span class="bg-yellow-400 text-gray-900 font-bold py-1 px-3 rounded-full text-sm mr-3">Для всех</span> | |
| <span class="bg-green-500 text-white font-bold py-1 px-3 rounded-full text-sm">15-17 мая</span> | |
| </div> | |
| <p class="text-lg leading-relaxed mb-4"> | |
| Проверь свою готовность к труду и обороне! На фестивале ты можешь сдать нормативы ГТО и получить заветный значок. В программе: бег, прыжки, подтягивания, отжимания и другие испытания. | |
| </p> | |
| <div class="mb-4"> | |
| <h4 class="font-bold text-lg mb-2">Этапы:</h4> | |
| <ul class="list-disc pl-5"> | |
| <li>Бег на короткие и длинные дистанции</li> | |
| <li>Прыжки в длину с места</li> | |
| <li>Подтягивания/отжимания</li> | |
| <li>Наклоны вперед</li> | |
| <li>Метание спортивного снаряда</li> | |
| </ul> | |
| </div> | |
| <a href="#register" class="inline-block bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-6 rounded-full shadow-md transition duration-300"> | |
| Зарегистрироваться | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Картинг --> | |
| <div class="mb-20 comic-box p-6 bg-white relative"> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/3 mb-6 md:mb-0 md:pr-6"> | |
| <img src="https://images.unsplash.com/photo-1585086125000-c6b0f8c113e3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Картинг" class="w-full rounded-lg shadow-md"> | |
| </div> | |
| <div class="md:w-2/3"> | |
| <h3 class="comic-font text-3xl text-blue-600 mb-4">Картинг</h3> | |
| <div class="flex items-center mb-4"> | |
| <span class="bg-yellow-400 text-gray-900 font-bold py-1 px-3 rounded-full text-sm mr-3">12+ лет</span> | |
| <span class="bg-green-500 text-white font-bold py-1 px-3 rounded-full text-sm">16-17 мая</span> | |
| </div> | |
| <p class="text-lg leading-relaxed mb-4"> | |
| Почувствуй себя гонщиком Формулы-1! На специально оборудованной трассе ты сможешь попробовать свои силы в картинге. Опытные инструкторы помогут освоить основы управления картом и обеспечат безопасность. | |
| </p> | |
| <div class="mb-4"> | |
| <h4 class="font-bold text-lg mb-2">Расписание:</h4> | |
| <ul class="list-disc pl-5"> | |
| <li>16 мая: 10:00-12:00 - Обучение и тренировки</li> | |
| <li>16 мая: 13:00-17:00 - Квалификационные заезды</li> | |
| <li>17 мая: 11:00-14:00 - Финальные гонки</li> | |
| <li>17 мая: 15:00-16:00 - Награждение победителей</li> | |
| </ul> | |
| </div> | |
| <a href="#register" class="inline-block bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-6 rounded-full shadow-md transition duration-300"> | |
| Зарегистрироваться | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Кнопка "Показать еще" с анимацией --> | |
| <div class="text-center mt-8"> | |
| <button id="show-more" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full shadow-lg transition duration-300 transform hover:scale-105"> | |
| <i class="fas fa-chevron-down mr-2"></i> Показать еще активности | |
| </button> | |
| </div> | |
| <!-- Скрытые активности (появятся при нажатии кнопки) --> | |
| <div id="hidden-activities" class="hidden"> | |
| <!-- Здесь будут остальные активности --> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Партнёры --> | |
| <section id="partners" class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="comic-font text-4xl md:text-5xl mb-6 text-gray-800"> | |
| <span class="text-blue-600">Нас поддерживают</span> <span class="text-orange-500">супергерои</span> | |
| </h2> | |
| <div class="w-24 h-2 bg-green-500 mx-auto mb-6"></div> | |
| <p class="text-xl text-gray-600 max-w-4xl mx-auto"> | |
| Благодарим наших партнёров за помощь в организации фестиваля! | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-8"> | |
| <div class="flex justify-center items-center h-32"> | |
| <img src="https://via.placeholder.com/200x100?text=Департамент+образования" alt="Департамент образования" class="partner-logo max-h-20"> | |
| </div> | |
| <div class="flex justify-center items-center h-32"> | |
| <img src="https://via.placeholder.com/200x100?text=МЦВП" alt="МЦВП" class="partner-logo max-h-20"> | |
| </div> | |
| <div class="flex justify-center items-center h-32"> | |
| <img src="https://via.placeholder.com/200x100?text=Спортивный+бренд" alt="Спортивный бренд" class="partner-logo max-h-20"> | |
| </div> | |
| <div class="flex justify-center items-center h-32"> | |
| <img src="https://via.placeholder.com/200x100?text=Город+Москва" alt="Город Москва" class="partner-logo max-h-20"> | |
| </div> | |
| <div class="flex justify-center items-center h-32"> | |
| <img src="https://via.placeholder.com/200x100?text=Спортивная+федерация" alt="Спортивная федерация" class="partner-logo max-h-20"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Где проходит фестиваль --> | |
| <section id="location" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="comic-font text-4xl md:text-5xl mb-6 text-gray-800"> | |
| <span class="text-orange-500">Где проходит</span> <span class="text-blue-600">фестиваль</span> | |
| </h2> | |
| <div class="w-24 h-2 bg-yellow-400 mx-auto mb-6"></div> | |
| <p class="text-xl text-gray-600 max-w-4xl mx-auto"> | |
| Олимпийский комплекс «Лужники», Южное спортивное ядро | |
| </p> | |
| </div> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <div class="map-container"> | |
| <iframe src="https://yandex.ru/map-widget/v1/?um=constructor%3Ae7c3c7c3c7c3c7c3c7c3c7c3c7c3c7c3c7c3c7c3c7c3c7c3c7c3c7c3c7c3c7c3&source=constructor" frameborder="0"></iframe> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="comic-box p-8 bg-blue-50"> | |
| <h3 class="comic-font text-3xl text-blue-600 mb-4">Как добраться</h3> | |
| <div class="mb-6"> | |
| <h4 class="font-bold text-lg mb-2"><i class="fas fa-subway mr-2 text-orange-500"></i> Метро</h4> | |
| <p class="text-lg">Станция "Спортивная", выход №5. 5 минут пешком до Южного ядра.</p> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="font-bold text-lg mb-2"><i class="fas fa-bus mr-2 text-green-500"></i> Автобус</h4> | |
| <p class="text-lg">Маршруты 64, 216, 255 до остановки "Лужники".</p> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="font-bold text-lg mb-2"><i class="fas fa-car mr-2 text-red-500"></i> На машине</h4> | |
| <p class="text-lg">Парковка доступна на территории комплекса. Рекомендуем использовать общественный транспорт в дни фестиваля.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-2"><i class="fas fa-clock mr-2 text-yellow-500"></i> Время работы</h4> | |
| <p class="text-lg">15 мая: 9:00-20:00<br>16 мая: 9:00-20:00<br>17 мая: 9:00-18:00</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Регистрация --> | |
| <section id="register" class="py-16 bg-gradient-to-r from-blue-600 to-green-500 text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="comic-font text-4xl md:text-5xl mb-6"> | |
| <span class="text-yellow-300">Стань частью</span> <span class="text-white">фестиваля!</span> | |
| </h2> | |
| <div class="w-24 h-2 bg-orange-500 mx-auto mb-6"></div> | |
| <p class="text-xl max-w-4xl mx-auto"> | |
| Зарегистрируйся на фестиваль и выбери активности, в которых хочешь участвовать | |
| </p> | |
| </div> | |
| <div class="max-w-3xl mx-auto comic-box p-8 bg-white text-gray-800"> | |
| <form id="registration-form"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <div> | |
| <label for="name" class="block text-gray-700 font-bold mb-2">ФИО</label> | |
| <input type="text" id="name" name="name" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-gray-700 font-bold mb-2">Email</label> | |
| <input type="email" id="email" name="email" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="phone" class="block text-gray-700 font-bold mb-2">Телефон</label> | |
| <input type="tel" id="phone" name="phone" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="age" class="block text-gray-700 font-bold mb-2">Возраст</label> | |
| <input type="number" id="age" name="age" min="7" max="18" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 font-bold mb-2">Выберите активности</label> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="activity1" name="activities" value="Баскетбол 3x3" class="mr-2"> | |
| <label for="activity1">Баскетбол 3x3</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="activity2" name="activities" value="Игры ГТО" class="mr-2"> | |
| <label for="activity2">Игры ГТО</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="activity3" name="activities" value="Картинг" class="mr-2"> | |
| <label for="activity3">Картинг</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="activity4" name="activities" value="Единоборства" class="mr-2"> | |
| <label for="activity4">Единоборства</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="activity5" name="activities" value="Лазертаг" class="mr-2"> | |
| <label for="activity5">Лазертаг</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="activity6" name="activities" value="Шахматы" class="mr-2"> | |
| <label for="activity6">Шахматы</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="comments" class="block text-gray-700 font-bold mb-2">Дополнительная информация</label> | |
| <textarea id="comments" name="comments" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> | |
| </div> | |
| <div class="flex items-center mb-6"> | |
| <input type="checkbox" id="agree" name="agree" required class="mr-2"> | |
| <label for="agree">Я согласен на обработку персональных данных</label> | |
| </div> | |
| <div class="text-center"> | |
| <button type="submit" class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 px-8 rounded-full shadow-lg transition duration-300 transform hover:scale-105"> | |
| <i class="fas fa-paper-plane mr-2"></i> Отправить заявку | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Футер --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <h3 class="comic-font text-2xl text-yellow-400 mb-4">ФШС 2025</h3> | |
| <p class="mb-4">Фестиваль школьного спорта - это масштабное событие для всех, кто любит спорт и активный образ жизни!</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-white hover:text-yellow-400"><i class="fab fa-vk fa-lg"></i></a> | |
| <a href="#" class="text-white hover:text-yellow-400"><i class="fab fa-telegram fa-lg"></i></a> | |
| <a href="#" class="text-white hover:text-yellow-400"><i class="fab fa-instagram fa-lg"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-4">Контакты</h4> | |
| <ul class="space-y-2"> | |
| <li><i class="fas fa-phone-alt mr-2 text-yellow-400"></i> +7 (495) 123-45-67</li> | |
| <li><i class="fas fa-envelope mr-2 text-yellow-400"></i> info@schoolsportfest.ru</li> | |
| <li><i class="fas fa-map-marker-alt mr-2 text-yellow-400"></i> Москва, Лужники</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-4">Быстрые ссылки</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#about" class="hover:text-yellow-400">О фестивале</a></li> | |
| <li><a href="#activities" class="hover:text-yellow-400">Активности</a></li> | |
| <li><a href="#partners" class="hover:text-yellow-400">Партнёры</a></li> | |
| <li><a href="#location" class="hover:text-yellow-400">Как добраться</a></li> | |
| <li><a href="#register" class="hover:text-yellow-400">Регистрация</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-4">Организаторы</h4> | |
| <p class="mb-2">Департамент образования и науки города Москвы</p> | |
| <p>ГБОУ ДПО МЦВП</p> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 pt-8 text-center text-gray-500"> | |
| <p>© 2025 Фестиваль школьного спорта. Все права защищены.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Кнопка "Наверх" --> | |
| <div id="scroll-top" class="scroll-top hidden"> | |
| <i class="fas fa-arrow-up"></i> | |
| </div> | |
| <script> | |
| // Данные для карточек активностей | |
| const activitiesData = [ | |
| { | |
| title: "Аэробика-Фест", | |
| description: "Зажигательные танцевальные программы и соревнования по аэробике для всех возрастов.", | |
| icon: "fa-heartbeat", | |
| color: "bg-red-500", | |
| age: "Для всех" | |
| }, | |
| { | |
| title: "Баскетбол 3x3", | |
| description: "Динамичная версия классического баскетбола. Собери команду и участвуй в турнире!", | |
| icon: "fa-basketball-ball", | |
| color: "bg-orange-500", | |
| age: "12+ лет" | |
| }, | |
| { | |
| title: "Игры ГТО", | |
| description: "Проверь свою готовность к труду и обороне! Сдай нормативы и получи значок ГТО.", | |
| icon: "fa-medal", | |
| color: "bg-yellow-500", | |
| age: "Для всех" | |
| }, | |
| { | |
| title: "Картинг", | |
| description: "Почувствуй себя гонщиком Формулы-1 на специально оборудованной трассе.", | |
| icon: "fa-car", | |
| color: "bg-green-500", | |
| age: "12+ лет" | |
| }, | |
| { | |
| title: "Единоборства", | |
| description: "Мастер-классы по различным видам единоборств от профессиональных тренеров.", | |
| icon: "fa-user-ninja", | |
| color: "bg-blue-500", | |
| age: "10+ лет" | |
| }, | |
| { | |
| title: "Мастер-классы", | |
| description: "Уникальные обучающие программы от ведущих спортсменов и тренеров.", | |
| icon: "fa-chalkboard-teacher", | |
| color: "bg-indigo-500", | |
| age: "Для всех" | |
| }, | |
| { | |
| title: "Кибер-кафе", | |
| description: "Соревнования по киберспорту и зона отдыха для любителей видеоигр.", | |
| icon: "fa-gamepad", | |
| color: "bg-purple-500", | |
| age: "10+ лет" | |
| }, | |
| { | |
| title: "Лазертаг", | |
| description: "Командные тактические игры с использованием безопасного лазерного оборудования.", | |
| icon: "fa-crosshairs", | |
| color: "bg-pink-500", | |
| age: "10+ лет" | |
| }, | |
| { | |
| title: "Тэг-регби", | |
| description: "Бесконтактная версия регби - идеально подходит для начинающих.", | |
| icon: "fa-football-ball", | |
| color: "bg-red-600", | |
| age: "8+ лет" | |
| }, | |
| { | |
| title: "Волейбол", | |
| description: "Классический и пляжный волейбол для всех уровней подготовки.", | |
| icon: "fa-volleyball-ball", | |
| color: "bg-orange-600", | |
| age: "Для всех" | |
| }, | |
| { | |
| title: "Путь Ниндзя", | |
| description: "Полоса препятствий, вдохновленная известным шоу. Проверь свою ловкость!", | |
| icon: "fa-running", | |
| color: "bg-yellow-600", | |
| age: "8+ лет" | |
| }, | |
| { | |
| title: "Шахматы и шашки", | |
| description: "Турниры по классическим настольным играм для всех возрастов.", | |
| icon: "fa-chess", | |
| color: "bg-green-600", | |
| age: "Для всех" | |
| }, | |
| { | |
| title: "Городки", | |
| description: "Традиционная русская игра. Попробуй свои силы в этом увлекательном виде спорта!", | |
| icon: "fa-dice", | |
| color: "bg-blue-600", | |
| age: "Для всех" | |
| } | |
| ]; | |
| // Заполнение карточек активностей | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const activitiesGrid = document.getElementById('activities-grid'); | |
| activitiesData.forEach(activity => { | |
| const card = document.createElement('div'); | |
| card.className = 'comic-card comic-box p-6 bg-white relative'; | |
| card.innerHTML = ` | |
| <div class="${activity.color} text-white w-12 h-12 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas ${activity.icon} text-xl"></i> | |
| </div> | |
| <h3 class="comic-font text-2xl text-gray-800 mb-2">${activity.title}</h3> | |
| <p class="text-gray-600 mb-4">${activity.description}</p> | |
| <span class="bg-gray-200 text-gray-800 font-bold py-1 px-3 rounded-full text-sm">${activity.age}</span> | |
| `; | |
| activitiesGrid.appendChild(card); | |
| }); | |
| // Показать/скрыть дополнительные активности | |
| const showMoreBtn = document.getElementById('show-more'); | |
| const hiddenActivities = document.getElementById('hidden-activities'); | |
| showMoreBtn.addEventListener('click', function() { | |
| if (hiddenActivities.classList.contains('hidden')) { | |
| hiddenActivities.classList.remove('hidden'); | |
| showMoreBtn.innerHTML = '<i class="fas fa-chevron-up mr-2"></i> Скрыть активности'; | |
| } else { | |
| hiddenActivities.classList.add('hidden'); | |
| showMoreBtn.innerHTML = '<i class="fas fa-chevron-down mr-2"></i> Показать еще активности'; | |
| } | |
| }); | |
| // Кнопка "Наверх" | |
| const scrollTopBtn = document.getElementById('scroll-top'); | |
| window.addEventListener('scroll', function() { | |
| if (window.pageYOffset > 300) { | |
| scrollTopBtn.classList.remove('hidden'); | |
| } else { | |
| scrollTopBtn.classList.add('hidden'); | |
| } | |
| }); | |
| scrollTopBtn.addEventListener('click', function() { | |
| window.scrollTo({ | |
| top: 0, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| // Обработка формы регистрации | |
| const registrationForm = document.getElementById('registration-form'); | |
| registrationForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Здесь можно добавить отправку формы на сервер | |
| alert('Спасибо за регистрацию! Мы свяжемся с вами в ближайшее время.'); | |
| registrationForm.reset(); | |
| }); | |
| }); | |
| </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=mDuck/schoolfest" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |