Spaces:
Running
Running
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Презентация проектной работы — Модернизация сайта музея «Боевое братство»</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Merriweather:wght@400;700;900&display=swap" rel="stylesheet"> | |
| <style> | |
| * { scroll-behavior: smooth; } | |
| body { font-family: 'Inter', sans-serif; } | |
| h1, h2, h3 { font-family: 'Merriweather', serif; } | |
| .slide { | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 2rem; | |
| page-break-after: always; | |
| } | |
| .slide-content { | |
| max-width: 1200px; | |
| width: 100%; | |
| } | |
| @media print { | |
| .slide { min-height: auto; padding: 1.5rem; } | |
| .no-print { display: none; } | |
| body { font-size: 14pt; } | |
| .slide { page-break-inside: avoid; } | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1f2937 0%, #7f1d1d 100%); | |
| } | |
| .accent-line { | |
| width: 80px; | |
| height: 4px; | |
| background: #eab308; | |
| margin: 1rem 0; | |
| } | |
| .timeline-item { | |
| position: relative; | |
| padding-left: 2rem; | |
| border-left: 2px solid #e5e7eb; | |
| } | |
| .timeline-item::before { | |
| content: ''; | |
| position: absolute; | |
| left: -6px; | |
| top: 0; | |
| width: 10px; | |
| height: 10px; | |
| background: #7f1d1d; | |
| border-radius: 50%; | |
| } | |
| .beta-badge { | |
| background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); | |
| color: white; | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 9999px; | |
| font-size: 0.75rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800"> | |
| <!-- Навигация --> | |
| <nav class="no-print fixed bottom-8 right-8 flex flex-col gap-2 z-50"> | |
| <button onclick="window.scrollTo(0,0)" class="p-3 bg-red-900 text-white rounded-full shadow-lg hover:bg-red-800 transition-all" title="В начало"> | |
| <i data-lucide="arrow-up"></i> | |
| </button> | |
| <button onclick="window.print()" class="p-3 bg-gray-800 text-white rounded-full shadow-lg hover:bg-gray-700 transition-all" title="Сохранить PDF"> | |
| <i data-lucide="printer"></i> | |
| </button> | |
| </nav> | |
| <!-- Слайд 1: Титульный --> | |
| <section class="slide gradient-bg text-white"> | |
| <div class="slide-content text-center"> | |
| <div class="inline-flex items-center gap-2 bg-white/10 backdrop-blur px-4 py-2 rounded-full mb-6 border border-white/20"> | |
| <span class="beta-badge mr-2">Beta</span> | |
| <i data-lucide="graduation-cap" class="w-5 h-5 text-yellow-400"></i> | |
| <span class="text-sm font-medium tracking-wider">ПРОЕКТНАЯ РАБОТА ПО ИНФОРМАТИКЕ</span> | |
| </div> | |
| <h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight"> | |
| Модернизация веб-сайта<br>школьного музея<br> | |
| <span class="text-yellow-400">«Боевое братство»</span> | |
| </h1> | |
| <div class="accent-line mx-auto"></div> | |
| <p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl mx-auto"> | |
| Перенос устаревшего сайта на CMS WordPress с созданием адаптивного дизайна и подготовкой системы для наполнения реальным контентом | |
| </p> | |
| <div class="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto mt-12 text-left"> | |
| <div class="bg-white/5 backdrop-blur p-6 rounded-xl border border-white/10"> | |
| <p class="text-sm text-gray-400 mb-1">Учащийся</p> | |
| <p class="font-semibold text-lg">[ФИО учащегося]</p> | |
| <p class="text-sm text-gray-300">10 «А» класс</p> | |
| </div> | |
| <div class="bg-white/5 backdrop-blur p-6 rounded-xl border border-white/10"> | |
| <p class="text-sm text-gray-400 mb-1">Научный руководитель</p> | |
| <p class="font-semibold text-lg">[ФИО преподавателя]</p> | |
| <p class="text-sm text-gray-300">учитель информатики</p> | |
| </div> | |
| <div class="bg-white/5 backdrop-blur p-6 rounded-xl border border-white/10"> | |
| <p class="text-sm text-gray-400 mb-1">Статус проекта</p> | |
| <p class="font-semibold text-lg text-yellow-400">Beta-версия</p> | |
| <p class="text-sm text-gray-300">2024/2025 уч. год</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Слайд 2: Актуальность --> | |
| <section class="slide bg-white"> | |
| <div class="slide-content"> | |
| <div class="mb-8"> | |
| <div class="flex items-center gap-3 mb-4"> | |
| <div class="p-2 bg-red-100 rounded-lg"> | |
| <i data-lucide="target" class="w-6 h-6 text-red-800"></i> | |
| </div> | |
| <span class="text-sm font-bold text-red-800 tracking-wider uppercase">Актуальность проблемы</span> | |
| </div> | |
| <h2 class="text-4xl font-bold text-gray-900">Почему это важно для школы и района?</h2> | |
| <div class="accent-line"></div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div class="space-y-6"> | |
| <div class="bg-red-50 border-l-4 border-red-800 p-6 rounded-r-xl"> | |
| <h3 class="text-xl font-bold text-red-900 mb-3">Существующая проблема</h3> | |
| <p class="text-gray-700 mb-4"> | |
| У музея «Боевое братство» ГБОУ СОШ № 625 уже есть сайт, созданный много лет назад. | |
| Он не адаптирован под мобильные устройства, имеет устаревший дизайн 2010-х годов и | |
| не соответствует современным требованиям к веб-доступности. | |
| </p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start gap-2"> | |
| <i data-lucide="alert-circle" class="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5"></i> | |
| <span>Нет адаптивной вёрстки (неудобен на телефонах)</span> | |
| </li> | |
| <li class="flex items-start gap-2"> | |
| <i data-lucide="alert-circle" class="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5"></i> | |
| <span>Устаревшая система управления контентом</span> | |
| </li> | |
| <li class="flex items-start gap-2"> | |
| <i data-lucide="alert-circle" class="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5"></i> | |
| <span>Нет возможности самостоятельно обновлять информацию</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-blue-50 border-l-4 border-blue-800 p-6 rounded-r-xl"> | |
| <h3 class="text-xl font-bold text-blue-900 mb-3">Общественная значимость</h3> | |
| <p class="text-gray-700"> | |
| Музей «Боевое братство» — единственный в Невском районе школьный музей, посвящённый | |
| истории региональных вооружённых конфликтов. Современный сайт позволит: | |
| </p> | |
| <ul class="mt-3 space-y-2 text-gray-600"> | |
| <li class="flex items-start gap-2"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5"></i> | |
| <span>Сохранить память о воинах-интернационалистах для молодого поколения</span> | |
| </li> | |
| <li class="flex items-start gap-2"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5"></i> | |
| <span>Организовать онлайн-запись на экскурсии для других школ района</span> | |
| </li> | |
| <li class="flex items-start gap-2"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5"></i> | |
| <span>Создать цифровой архив экспонатов, доступный 24/7</span> | |
| </li> | |
| <li class="flex items-start gap-2"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5"></i> | |
| <span>Привлечь внимание общественности к патриотическому воспитанию</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="space-y-6"> | |
| <div class="bg-gray-100 p-6 rounded-2xl"> | |
| <h3 class="text-lg font-bold text-gray-900 mb-4">Сравнение: Старый vs Новый сайт</h3> | |
| <div class="space-y-4"> | |
| <div class="bg-white p-4 rounded-xl shadow-sm"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="font-semibold text-gray-500">Старый сайт</span> | |
| <span class="px-2 py-1 bg-red-100 text-red-700 rounded text-xs">Устаревший</span> | |
| </div> | |
| <div class="h-2 bg-gray-200 rounded-full overflow-hidden"> | |
| <div class="h-full w-1/4 bg-red-400"></div> | |
| </div> | |
| <div class="flex justify-between mt-1 text-xs text-gray-500"> | |
| <span>Мобильная версия</span> | |
| <span>25%</span> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-xl shadow-sm border-2 border-green-200"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="font-semibold text-gray-900">Новый сайт (Beta)</span> | |
| <span class="px-2 py-1 bg-green-100 text-green-700 rounded text-xs">В разработке</span> | |
| </div> | |
| <div class="h-2 bg-gray-200 rounded-full overflow-hidden"> | |
| <div class="h-full w-3/4 bg-green-500"></div> | |
| </div> | |
| <div class="flex justify-between mt-1 text-xs text-gray-600"> | |
| <span>Адаптивность + CMS</span> | |
| <span>75% (требуется контент)</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-yellow-50 p-6 rounded-xl border border-yellow-200"> | |
| <div class="flex items-start gap-3"> | |
| <i data-lucide="lightbulb" class="w-8 h-8 text-yellow-600 flex-shrink-0"></i> | |
| <div> | |
| <h4 class="font-bold text-gray-900 mb-2">Идея решения</h4> | |
| <p class="text-gray-700 text-sm"> | |
| Создать современный сайт на WordPress с адаптивным дизайном, | |
| который сможет поддерживаться силами школьного музейного актива без | |
| привлечения профессиональных разработчиков для каждого обновления. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Слайд 3: Цели и задачи --> | |
| <section class="slide bg-gray-50"> | |
| <div class="slide-content"> | |
| <div class="text-center mb-12"> | |
| <span class="text-sm font-bold text-red-800 tracking-wider uppercase">Целеполагание</span> | |
| <h2 class="text-4xl font-bold mt-3 mb-4 text-gray-900">Цели и задачи проекта</h2> | |
| <div class="accent-line mx-auto"></div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8 mb-8"> | |
| <div class="bg-white p-8 rounded-2xl shadow-lg border-t-4 border-red-800"> | |
| <h3 class="text-2xl font-bold mb-6 flex items-center gap-3"> | |
| <i data-lucide="flag" class="w-8 h-8 text-red-800"></i> | |
| Главная цель | |
| </h3> | |
| <p class="text-lg text-gray-700 leading-relaxed"> | |
| Разработка и внедрение современного веб-сайта для школьного музея «Боевое братство» | |
| на базе CMS WordPress с целью повышения доступности информации о деятельности музея, | |
| упрощения процесса организации экскурсий и патриотического воспитания учащихся | |
| через современные цифровые технологии. | |
| </p> | |
| </div> | |
| <div class="bg-gradient-to-br from-red-900 to-red-800 text-white p-8 rounded-2xl shadow-lg"> | |
| <h3 class="text-2xl font-bold mb-6 flex items-center gap-3"> | |
| <i data-lucide="info" class="w-8 h-8 text-yellow-400"></i> | |
| Статус проекта | |
| </h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center gap-3 bg-white/10 p-3 rounded-lg"> | |
| <span class="beta-badge">Beta</span> | |
| <span class="text-sm">Техническая основа готова</span> | |
| </div> | |
| <p class="text-red-100 text-sm leading-relaxed"> | |
| В настоящее время сайт находится на стадии бета-тестирования. | |
| Требуется наполнение реальными фотографиями экспонатов, | |
| документами и историческими материалами из фондов музея. | |
| </p> | |
| <div class="bg-yellow-500/20 p-3 rounded-lg border border-yellow-400/30"> | |
| <p class="text-yellow-200 text-sm font-semibold"> | |
| <i data-lucide="alert-triangle" class="w-4 h-4 inline mr-2"></i> | |
| Текущие фото — это placeholder'ы (заглушки) для демонстрации структуры | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-2xl shadow-md"> | |
| <h3 class="text-2xl font-bold mb-6 text-gray-900">Этапы реализации проекта</h3> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="timeline-item"> | |
| <h4 class="font-bold text-gray-900 mb-2">1. Анализ</h4> | |
| <p class="text-sm text-gray-600">Аудит существующего сайта. Изучение потребностей музейного актива и целевой аудитории.</p> | |
| </div> | |
| <div class="timeline-item"> | |
| <h4 class="font-bold text-gray-900 mb-2">2. Проектирование</h4> | |
| <p class="text-sm text-gray-600">Разработка структуры сайта, выбор темы WordPress, создание макетов страниц.</p> | |
| </div> | |
| <div class="timeline-item"> | |
| <h4 class="font-bold text-gray-900 mb-2">3. Разработка</h4> | |
| <p class="text-sm text-gray-600">Установка WordPress, настройка темы Elementor, создание адаптивных шаблонов, базовый функционал.</p> | |
| </div> | |
| <div class="timeline-item"> | |
| <h4 class="font-bold text-gray-900 mb-2">4. Наполнение</h4> | |
| <p class="text-sm text-gray-600 text-red-600 font-medium"> | |
| <i data-lucide="clock" class="w-4 h-4 inline mr-1"></i> | |
| В процессе: добавление реальных фото экспонатов, документов, исторических справок. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Слайд 4: Технологии WordPress --> | |
| <section class="slide bg-white"> | |
| <div class="slide-content"> | |
| <div class="text-center mb-10"> | |
| <span class="text-sm font-bold text-red-800 tracking-wider uppercase">Технологическая база</span> | |
| <h2 class="text-4xl font-bold mt-3 mb-4 text-gray-900">Создание сайта на WordPress</h2> | |
| <div class="accent-line mx-auto"></div> | |
| <p class="text-gray-600 max-w-2xl mx-auto mt-4"> | |
| Выбор CMS WordPress обусловлен необходимостью дальнейшей самостоятельной поддержки сайта | |
| силами школьного музейного актива без глубоких знаний программирования | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-6 mb-8"> | |
| <div class="bg-gray-50 p-6 rounded-2xl border-2 border-gray-200 hover:border-blue-300 transition-all"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center mb-4"> | |
| <i data-lucide="layout-template" class="w-8 h-8 text-blue-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">WordPress CMS</h3> | |
| <p class="text-gray-600 text-sm mb-4"> | |
| Самая популярная система управления контентом в мире. Позволяет легко добавлять | |
| новые экспонаты и редактировать страницы через визуальный интерфейс. | |
| </p> | |
| <div class="flex gap-2 flex-wrap"> | |
| <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs">Открытый код</span> | |
| <span class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs">Лёгкое обновление</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-2xl border-2 border-gray-200 hover:border-purple-300 transition-all"> | |
| <div class="w-16 h-16 bg-purple-100 rounded-2xl flex items-center justify-center mb-4"> | |
| <i data-lucide="move" class="w-8 h-8 text-purple-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Elementor Pro</h3> | |
| <p class="text-gray-600 text-sm mb-4"> | |
| Визуальный конструктор страниц с технологией drag-and-drop. | |
| Позволяет создавать адаптивные макеты без написания кода. | |
| </p> | |
| <div class="flex gap-2 flex-wrap"> | |
| <span class="px-2 py-1 bg-purple-100 text-purple-700 rounded text-xs">Drag & Drop</span> | |
| <span class="px-2 py-1 bg-purple-100 text-purple-700 rounded text-xs">Адаптивность</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-2xl border-2 border-gray-200 hover:border-green-300 transition-all"> | |
| <div class="w-16 h-16 bg-green-100 rounded-2xl flex items-center justify-center mb-4"> | |
| <i data-lucide="smartphone" class="w-8 h-8 text-green-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Адаптивная тема</h3> | |
| <p class="text-gray-600 text-sm mb-4"> | |
| Тема Astra + кастомные CSS-стили. Обеспечивает корректное отображение | |
| на мобильных телефонах, планшетах и компьютерах. | |
| </p> | |
| <div class="flex gap-2 flex-wrap"> | |
| <span class="px-2 py-1 bg-green-100 text-green-700 rounded text-xs">Mobile-first</span> | |
| <span class="px-2 py-1 bg-green-100 text-green-700 rounded text-xs">Retina-ready</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 text-white p-6 rounded-2xl"> | |
| <h3 class="text-xl font-bold mb-4 flex items-center gap-3"> | |
| <i data-lucide="puzzle" class="w-6 h-6 text-yellow-400"></i> | |
| Используемые плагины WordPress | |
| </h3> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4"> | |
| <div class="bg-white/10 p-4 rounded-lg"> | |
| <h4 class="font-semibold text-yellow-400 mb-1">WPForms</h4> | |
| <p class="text-sm text-gray-300">Формы записи на экскурсии с уведомлениями на email</p> | |
| </div> | |
| <div class="bg-white/10 p-4 rounded-lg"> | |
| <h4 class="font-semibold text-yellow-400 mb-1">Envira Gallery</h4> | |
| <p class="text-sm text-gray-300">Адаптивные галереи для фото экспонатов</p> | |
| </div> | |
| <div class="bg-white/10 p-4 rounded-lg"> | |
| <h4 class="font-semibold text-yellow-400 mb-1">Yoast SEO</h4> | |
| <p class="text-sm text-gray-300">Оптимизация для поисковых систем (Яндекс, Google)</p> | |
| </div> | |
| <div class="bg-white/10 p-4 rounded-lg"> | |
| <h4 class="font-semibold text-yellow-400 mb-1">WP Super Cache</h4> | |
| <p class="text-sm text-gray-300">Ускорение загрузки страниц</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Слайд 5: Структура и функционал --> | |
| <section class="slide bg-gray-50"> | |
| <div class="slide-content"> | |
| <div class="text-center mb-10"> | |
| <span class="text-sm font-bold text-red-800 tracking-wider uppercase">Архитектура решения</span> | |
| <h2 class="text-4xl font-bold mt-3 mb-4 text-gray-900">Структура и функционал нового сайта</h2> | |
| <div class="accent-line mx-auto"></div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8 mb-8"> | |
| <div class="space-y-4"> | |
| <h3 class="text-2xl font-bold text-gray-900 mb-4">Разделы сайта</h3> | |
| <div class="bg-white p-4 rounded-xl shadow-sm flex items-start gap-4 border-l-4 border-red-900"> | |
| <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center flex-shrink-0"> | |
| <i data-lucide="home" class="w-5 h-5 text-red-900"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-900">Главная страница</h4> | |
| <p class="text-sm text-gray-600">Слайдер с историей, быстрая навигация, блок с последними новостями</p> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-xl shadow-sm flex items-start gap-4 border-l-4 border-red-800"> | |
| <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center flex-shrink-0"> | |
| <i data-lucide="package" class="w-5 h-5 text-red-800"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-900">Каталог экспонатов</h4> | |
| <p class="text-sm text-gray-600">Фильтрация по эпохам (Афганистан, Чечня), поиск, детальные страницы</p> | |
| <span class="inline-flex items-center mt-1 px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800"> | |
| <i data-lucide="alert-circle" class="w-3 h-3 mr-1"></i> | |
| Требуются реальные фото | |
| </span> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-xl shadow-sm flex items-start gap-4 border-l-4 border-yellow-600"> | |
| <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center flex-shrink-0"> | |
| <i data-lucide="calendar" class="w-5 h-5 text-yellow-700"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-900">Мероприятия и экскурсии</h4> | |
| <p class="text-sm text-gray-600">Календарь событий, онлайн-запись, архив прошедших мероприятий</p> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-xl shadow-sm flex items-start gap-4 border-l-4 border-gray-700"> | |
| <div class="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0"> | |
| <i data-lucide="book-open" class="w-5 h-5 text-gray-700"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-900">Документы музея</h4> | |
| <p class="text-sm text-gray-600">Устав, положение, свидетельство о регистрации в электронном виде</p> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-xl shadow-sm flex items-start gap-4 border-l-4 border-blue-800"> | |
| <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0"> | |
| <i data-lucide="map-pin" class="w-5 h-5 text-blue-800"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-900">Контакты и карта</h4> | |
| <p class="text-sm text-gray-600">Интеграция Яндекс.Карт, форма обратной связи, телефоны</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-2xl shadow-lg"> | |
| <h3 class="text-xl font-bold mb-4 text-gray-900">Административная панель (WordPress)</h3> | |
| <div class="space-y-4"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="font-semibold text-gray-900 mb-2 flex items-center gap-2"> | |
| <i data-lucide="user-check" class="w-5 h-5 text-green-600"></i> | |
| Разные уровни доступа | |
| </h4> | |
| <ul class="text-sm text-gray-600 space-y-1 ml-6"> | |
| <li>• Администратор (техническая поддержка)</li> | |
| <li>• Редактор (куратор музея — может добавлять экспонаты)</li> | |
| <li>• Автор (участники музейного актива)</li> | |
| </ul> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="font-semibold text-gray-900 mb-2 flex items-center gap-2"> | |
| <i data-lucide="upload" class="w-5 h-5 text-blue-600"></i> | |
| Управление медиа | |
| </h4> | |
| <p class="text-sm text-gray-600"> | |
| Библиотека медиафайлов для загрузки фотографий экспонатов | |
| с автоматическим сжатием и созданием миниатюр. | |
| </p> | |
| </div> | |
| <div class="bg-yellow-50 p-4 rounded-lg border border-yellow-200"> | |
| <h4 class="font-semibold text-yellow-800 mb-2 flex items-center gap-2"> | |
| <i data-lucide="image-off" class="w-5 h-5"></i> | |
| Что пока отсутствует (Beta) | |
| </h4> | |
| <ul class="text-sm text-yellow-700 space-y-1"> | |
| <li>• Фотографии реальных экспонатов (используются placeholder'ы)</li> | |
| <li>• Оцифрованные документы из фондов (требуется сканирование)</li> | |
| <li>• Видео-вставки с интервью ветеранов</li> | |
| <li>• Расширенные описания экспонатов с историческим контекстом</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Слайд 6: Процесс разработки --> | |
| <section class="slide bg-white"> | |
| <div class="slide-content"> | |
| <div class="text-center mb-10"> | |
| <span class="text-sm font-bold text-red-800 tracking-wider uppercase">Ход работы</span> | |
| <h2 class="text-4xl font-bold mt-3 mb-4 text-gray-900">Как создавался сайт?</h2> | |
| <div class="accent-line mx-auto"></div> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="bg-gray-50 p-6 rounded-2xl"> | |
| <div class="w-12 h-12 bg-red-900 text-white rounded-full flex items-center justify-center font-bold text-xl mb-4">1</div> | |
| <h3 class="text-xl font-bold mb-3">Подготовка</h3> | |
| <ul class="space-y-2 text-gray-600 text-sm"> | |
| <li class="flex items-start gap-2"> | |
| <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5"></i> | |
| <span>Установка локального сервера (OpenServer)</span> | |
| </li> | |
| <li class="flex items-start gap-2"> | |
| <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5"></i> | |
| <span>Установка WordPress 6.x</span> | |
| </li> | |
| <li class="flex items-start gap-2"> | |
| <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5"></i> | |
| <span>Настройка резервного копирования</span> | |
| </li> | |
| <li class="flex items-start gap-2"> | |
| <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5"></i> | |
| <span>Изучение документации музея</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-2xl"> | |
| <div class="w-12 h-12 bg-red-800 text-white rounded-full flex items-center justify-center font-bold text-xl mb-4">2</div> | |
| <h3 class="text-xl font-bold mb-3">Разработка</h3> | |
| <ul class="space-y-2 text-gray-600 text-sm"> | |
| <li class="flex items-start gap-2"> | |
| <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5"></i> | |
| <span>Адаптация темы под цвета музея (красно-золотые)</span> | |
| </li> | |
| <li class="flex items-start gap-2"> | |
| <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5"></i> | |
| <span>Создание шаблонов страниц в Elementor</span> | |
| </li> | |
| <li class="flex items-start gap-2"> | |
| <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5"></i> | |
| <span>Настройка адаптивности (mobile-friendly)</span> | |
| </li> | |
| <li class="flex items-start gap-2"> | |
| <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5"></i> | |
| <span>Интеграция форм обратной связи</span> | |
| </li> | |
| <li class="flex items-start gap-2"> | |
| <i data-lucide="check" class="w-4 h-4 text-green-600 mt-0.5"></i> | |
| <span>Добавление placeholder-контента</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-red-50 p-6 rounded-2xl border-2 border-red-200"> | |
| <div class="w-12 h-12 bg-yellow-500 text-white rounded-full flex items-center justify-center font-bold text-xl mb-4">3</div> | |
| <h3 class="text-xl font-bold mb-3 text-red-900">Текущий этап</h3> | |
| <ul class="space-y-2 text-red-800 text-sm"> | |
| <li class="flex items-start gap-2"> | |
| <i data-lucide="hourglass" class="w-4 h-4 mt-0.5"></i> | |
| <span class="font-semibold">Сбор реальных материалов:</span> | |
| </li> | |
| <li class="pl-6 text-gray-700">Фотосъёмка экспонатов (камера + штатив)</li> | |
| <li class="pl-6 text-gray-700">Сканирование документов (А4, А3)</li> | |
| <li class="pl-6 text-gray-700">Обработка фото (цветокоррекция, обрезка)</li> | |
| <li class="pl-6 text-gray-700">Написание описаний к экспонатам</li> | |
| <li class="pl-6 text-gray-700">Согласование с руководством музея</li> | |
| </ul> | |
| <div class="mt-4 p-3 bg-white rounded-lg"> | |
| <p class="text-xs text-gray-600"> | |
| <strong>Срок:</strong> до конца 2025/2026 уч. года<br> | |
| <strong>Статус:</strong> Техническая часть — 90%, Контент — 15% | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Слайд 7: Общественная польза --> | |
| <section class="slide bg-gradient-to-br from-red-900 to-red-800 text-white"> | |
| <div class="slide-content"> | |
| <div class="text-center mb-10"> | |
| <span class="text-sm font-bold text-yellow-400 tracking-wider uppercase">Социальная значимость</span> | |
| <h2 class="text-4xl font-bold mt-3 mb-4">Польза для школы и района</h2> | |
| <div class="w-24 h-1 bg-yellow-400 mx-auto"></div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8 mb-8"> | |
| <div class="bg-white/10 backdrop-blur p-6 rounded-2xl border border-white/20"> | |
| <div class="flex items-center gap-3 mb-4"> | |
| <div class="w-12 h-12 bg-yellow-500 rounded-xl flex items-center justify-center"> | |
| <i data-lucide="users" class="w-6 h-6 text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold">Для учащихся</h3> | |
| </div> | |
| <ul class="space-y-3 text-red-100"> | |
| <li class="flex items-start gap-3"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-yellow-400 flex-shrink-0 mt-0.5"></i> | |
| <span>Доступ к историческим материалам 24/7 с любого устройства</span> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-yellow-400 flex-shrink-0 mt-0.5"></i> | |
| <span>Возможность удалённо ознакомиться с экспонатами перед посещением</span> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-yellow-400 flex-shrink-0 mt-0.5"></i> | |
| <span>Участие в оцифровке истории (практика работы с архивами)</span> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-yellow-400 flex-shrink-0 mt-0.5"></i> | |
| <span>Подготовка докладов и проектов по истории с использованием сайта</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-white/10 backdrop-blur p-6 rounded-2xl border border-white/20"> | |
| <div class="flex items-center gap-3 mb-4"> | |
| <div class="w-12 h-12 bg-yellow-500 rounded-xl flex items-center justify-center"> | |
| <i data-lucide="school" class="w-6 h-6 text-white"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold">Для школы и музея</h3> | |
| </div> | |
| <ul class="space-y-3 text-red-100"> | |
| <li class="flex items-start gap-3"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-yellow-400 flex-shrink-0 mt-0.5"></i> | |
| <span>Самостоятельное обновление информации без программиста</span> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-yellow-400 flex-shrink-0 mt-0.5"></i> | |
| <span>Онлайн-запись на экскурсии автоматизирует работу куратора</span> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-yellow-400 flex-shrink-0 mt-0.5"></i> | |
| <span>Повышение статуса музея в районе и городе</span> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <i data-lucide="check-circle" class="w-5 h-5 text-yellow-400 flex-shrink-0 mt-0.5"></i> | |
| <span>Сохранение цифровых копий документов на случай утери оригиналов</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="bg-white text-gray-900 p-6 rounded-2xl"> | |
| <h3 class="text-xl font-bold mb-4 flex items-center gap-3"> | |
| <i data-lucide="heart-handshake" class="w-6 h-6 text-red-800"></i> | |
| Патриотическое воспитание через технологии | |
| </h3> | |
| <p class="text-gray-700 mb-4"> | |
| Сайт решает важную социальную задачу — сохранение памяти о воинах-интернационалистах | |
| в условиях цифровизации. Молодое поколение получает доступ к истории через привычные | |
| им каналы (смартфоны, планшеты), что повышает эффективность патриотического воспитания. | |
| </p> | |
| <div class="flex gap-4 text-sm"> | |
| <div class="flex items-center gap-2 bg-red-50 px-4 py-2 rounded-lg"> | |
| <i data-lucide="shield" class="w-5 h-5 text-red-800"></i> | |
| <span class="font-semibold">Сохранение истории</span> | |
| </div> | |
| <div class="flex items-center gap-2 bg-blue-50 px-4 py-2 rounded-lg"> | |
| <i data-lucide="accessibility" class="w-5 h-5 text-blue-800"></i> | |
| <span class="font-semibold">Доступность информации</span> | |
| </div> | |
| <div class="flex items-center gap-2 bg-green-50 px-4 py-2 rounded-lg"> | |
| <i data-lucide="share-2" class="w-5 h-5 text-green-800"></i> | |
| <span class="font-semibold">Возможность делиться</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Слайд 8: Текущие результаты --> | |
| <section class="slide bg-white"> | |
| <div class="slide-content"> | |
| <div class="text-center mb-10"> | |
| <span class="text-sm font-bold text-red-800 tracking-wider uppercase">Что уже работает</span> | |
| <h2 class="text-4xl font-bold mt-3 mb-4 text-gray-900">Текущие результаты (Beta)</h2> | |
| <div class="accent-line mx-auto"></div> | |
| <p class="text-gray-600 max-w-2xl mx-auto mt-4"> | |
| На данный момент техническая часть проекта выполнена на 90%. | |
| Сайт развёрнут на локальном сервере и готов к наполнению контентом. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-6 mb-8"> | |
| <div class="bg-green-50 p-6 rounded-2xl border-2 border-green-200"> | |
| <div class="w-14 h-14 bg-green-100 rounded-2xl flex items-center justify-center mb-4"> | |
| <i data-lucide="check-circle" class="w-8 h-8 text-green-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2 text-green-900">Готово</h3> | |
| <ul class="space-y-2 text-sm text-gray-700"> | |
| <li>• Адаптивный дизайн (все разрешения)</li> | |
| <li>• Установка WordPress + тема</li> | |
| <li>• Структура всех разделов</li> | |
| <li>• Формы обратной связи</li> | |
| <li>• Карта проезда</li> | |
| <li>• SEO-оптимизация базовая</li> | |
| </ul> | |
| </div> | |
| <div class="bg-yellow-50 p-6 rounded-2xl border-2 border-yellow-200"> | |
| <div class="w-14 h-14 bg-yellow-100 rounded-2xl flex items-center justify-center mb-4"> | |
| <i data-lucide="alert-circle" class="w-8 h-8 text-yellow-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2 text-yellow-900">В процессе</h3> | |
| <ul class="space-y-2 text-sm text-gray-700"> | |
| <li>• Фотосъёмка экспонатов</li> | |
| <li>• Обработка изображений</li> | |
| <li>• Написание текстов описаний</li> | |
| <li>• Сканирование документов</li> | |
| <li>• Тестирование форм</li> | |
| </ul> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-2xl border-2 border-gray-200"> | |
| <div class="w-14 h-14 bg-gray-200 rounded-2xl flex items-center justify-center mb-4"> | |
| <i data-lucide="clock" class="w-8 h-8 text-gray-600"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2 text-gray-900">Запланировано</h3> | |
| <ul class="space-y-2 text-sm text-gray-600"> | |
| <li>• Перенос на школьный хостинг</li> | |
| <li>• Подключение SSL-сертификата</li> | |
| <li>• Интеграция с соцсетями школы</li> | |
| <li>• Модуль виртуального тура</li> | |
| <li>• Мобильное приложение (в перспективе)</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 text-white p-6 rounded-2xl"> | |
| <div class="flex items-start gap-4"> | |
| <div class="w-12 h-12 bg-yellow-500 rounded-full flex items-center justify-center flex-shrink-0"> | |
| <i data-lucide="camera" class="w-6 h-6 text-white"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <h3 class="text-xl font-bold mb-3">Проблема наполнения контентом</h3> | |
| <p class="text-gray-300 mb-4"> | |
| Главная сложность на текущем этапе — сбор и подготовка реальных материалов. | |
| Музей имеет более <strong class="text-yellow-400">200 экспонатов</strong>, но они требуют профессиональной фотосъёмки | |
| и исторического описания. В бета-версии используются временные изображения-заглушки | |
| для демонстрации функционала. | |
| </p> | |
| <div class="grid md:grid-cols-3 gap-4 text-sm"> | |
| <div class="bg-white/10 p-3 rounded-lg"> | |
| <span class="block text-yellow-400 font-bold text-2xl">200+</span> | |
| <span class="text-gray-400">Экспонатов требуют оцифровки</span> | |
| </div> | |
| <div class="bg-white/10 p-3 rounded-lg"> | |
| <span class="block text-yellow-400 font-bold text-2xl">50+</span> | |
| <span class="text-gray-400">Документов для сканирования</span> | |
| </div> | |
| <div class="bg-white/10 p-3 rounded-lg"> | |
| <span class="block text-yellow-400 font-bold text-2xl">20+</span> | |
| <span class="text-gray-400">Страниц требуют наполнения</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Слайд 9: Планы развития --> | |
| <section class="slide bg-gray-50"> | |
| <div class="slide-content"> | |
| <div class="text-center mb-10"> | |
| <span class="text-sm font-bold text-red-800 tracking-wider uppercase">Будущее проекта</span> | |
| <h2 class="text-4xl font-bold mt-3 mb-4 text-gray-900">Планы развития после запуска</h2> | |
| <div class="accent-line mx-auto"></div> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div class="space-y-6"> | |
| <div class="bg-white p-6 rounded-2xl shadow-md border-l-4 border-red-800"> | |
| <h3 class="text-xl font-bold mb-3 flex items-center gap-3"> | |
| <i data-lucide="calendar" class="w-6 h-6 text-red-800"></i> | |
| Ближайшие планы (1-2 месяца) | |
| </h3> | |
| <ul class="space-y-2 text-gray-700"> | |
| <li class="flex items-start gap-2"> | |
| <span class="w-6 h-6 bg-red-100 rounded-full flex items-center justify-center text-xs text-red-800 flex-shrink-0 mt-0.5">1</span> | |
| <span>Полное наполнение сайта реальными фотографиями экспонатов</span> | |
| </li> | |
| <li class="flex items-start gap-2"> | |
| <span class="w-6 h-6 bg-red-100 rounded-full flex items-center justify-center text-xs text-red-800 flex-shrink-0 mt-0.5">2</span> | |
| <span>Перенос сайта с локального сервера на школьный хостинг</span> | |
| </li> | |
| <li class="flex items-start gap-2"> | |
| <span class="w-6 h-6 bg-red-100 rounded-full flex items-center justify-center text-xs text-red-800 flex-shrink-0 mt-0.5">3</span> | |
| <span>Обучение куратора музея работе с админ-панелью WordPress</span> | |
| </li> | |
| <li class="flex items-start gap-2"> | |
| <span class="w-6 h-6 bg-red-100 rounded-full flex items-center justify-center text-xs text-red-800 flex-shrink-0 mt-0.5">4</span> | |
| <span>Публикация анонса на сайте школы 625school.ru</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-white p-6 rounded-2xl shadow-md border-l-4 border-blue-800"> | |
| <h3 class="text-xl font-bold mb-3 flex items-center gap-3"> | |
| <i data-lucide="trending-up" class="w-6 h-6 text-blue-800"></i> | |
| Перспективы (до конца года) | |
| </h3> | |
| <ul class="space-y-2 text-gray-700"> | |
| <li class="flex items-start gap-2"> | |
| <i data-lucide="chevron-right" class="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5"></i> | |
| <span>Создание раздела «Виртуальный тур» (панорамы залов)</span> | |
| </li> | |
| <li class="flex items-start gap-2"> | |
| <i data-lucide="chevron-right" class="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5"></i> | |
| <span>Интеграция с социальными сетями (автопостинг)</span> | |
| </li> | |
| <li class="flex items-start gap-2"> | |
| <i data-lucide="chevron-right" class="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5"></i> | |
| <span>Раздел «Воспоминания ветеранов» (видео-интервью)</span> | |
| </li> | |
| <li class="flex items-start gap-2"> | |
| <i data-lucide="chevron-right" class="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5"></i> | |
| <span>Электронная система учёта посещений</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="bg-white p-6 rounded-2xl shadow-lg"> | |
| <h3 class="text-xl font-bold mb-6 text-gray-900">Ожидаемые показатели эффективности</h3> | |
| <div class="space-y-6"> | |
| <div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="font-medium text-gray-700">Увеличение посещаемости музея</span> | |
| <span class="font-bold text-red-800">+40%</span> | |
| </div> | |
| <div class="h-2 bg-gray-200 rounded-full overflow-hidden"> | |
| <div class="h-full bg-red-800 w-2/5 rounded-full"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">За счёт удобной онлайн-записи и информирования</p> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="font-medium text-gray-700">Охват аудитории (сайт)</span> | |
| <span class="font-bold text-blue-800">500+</span> | |
| </div> | |
| <div class="h-2 bg-gray-200 rounded-full overflow-hidden"> | |
| <div class="h-full bg-blue-800 w-3/5 rounded-full"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">Уникальных посетителей в месяц (прогноз)</p> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="font-medium text-gray-700">Доступность 24/7</span> | |
| <span class="font-bold text-green-800">100%</span> | |
| </div> | |
| <div class="h-2 bg-gray-200 rounded-full overflow-hidden"> | |
| <div class="h-full bg-green-600 w-full rounded-full"></div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-1">Информация о музее доступна круглосуточно</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-xl mt-6"> | |
| <h4 class="font-bold text-gray-900 mb-2 text-sm">Масштабируемость</h4> | |
| <p class="text-sm text-gray-600"> | |
| Созданная на базе WordPress система позволяет легко расширять функционал: | |
| добавлять новые разделы, интегрировать с городскими порталами культуры, | |
| создавать мультиязычную версию (например, для ветеранов из СНГ). | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Слайд 10: Заключение --> | |
| <section class="slide gradient-bg text-white"> | |
| <div class="slide-content text-center max-w-4xl"> | |
| <div class="inline-flex items-center gap-2 bg-white/10 backdrop-blur px-4 py-2 rounded-full mb-6 border border-white/20"> | |
| <i data-lucide="flag" class="w-5 h-5 text-yellow-400"></i> | |
| <span class="text-sm font-medium tracking-wider">ЗАКЛЮЧЕНИЕ</span> | |
| </div> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-8">Итоги проектной работы</h2> | |
| <div class="grid md:grid-cols-2 gap-6 text-left mb-10"> | |
| <div class="bg-white/5 backdrop-blur p-6 rounded-xl border border-white/10"> | |
| <h3 class="text-xl font-bold mb-4 text-yellow-400">Что удалось достичь</h3> | |
| <ul class="space-y-3 text-gray-300"> | |
| <li class="flex items-start gap-3"> | |
| <i data-lucide="check" class="w-5 h-5 text-green-400 flex-shrink-0 mt-0.5"></i> | |
| <span>Создана современная техническая база сайта на WordPress с адаптивным дизайном</span> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <i data-lucide="check" class="w-5 h-5 text-green-400 flex-shrink-0 mt-0.5"></i> | |
| <span>Разработана структура для размещения 200+ экспонатов с категоризацией</span> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <i data-lucide="check" class="w-5 h-5 text-green-400 flex-shrink-0 mt-0.5"></i> | |
| <span>Обеспечена возможность самостоятельного управления контентом школьным музейным активом</span> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <i data-lucide="check" class="w-5 h-5 text-green-400 flex-shrink-0 mt-0.5"></i> | |
| <span>Заложена основа для цифрового архива исторических документов</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-white/5 backdrop-blur p-6 rounded-xl border border-white/10"> | |
| <h3 class="text-xl font-bold mb-4 text-yellow-400">Над чем предстоит работать</h3> | |
| <ul class="space-y-3 text-gray-300"> | |
| <li class="flex items-start gap-3"> | |
| <i data-lucide="camera" class="w-5 h-5 text-yellow-400 flex-shrink-0 mt-0.5"></i> | |
| <span>Провести профессиональную фотосъёмку всех экспонатов музея</span> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <i data-lucide="scan" class="w-5 h-5 text-yellow-400 flex-shrink-0 mt-0.5"></i> | |
| <span>Оцифровать архивные документы и боевые книжки</span> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <i data-lucide="users" class="w-5 h-5 text-yellow-400 flex-shrink-0 mt-0.5"></i> | |
| <span>Записать видео-воспоминания ветеранов для раздела «Живая история»</span> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <i data-lucide="rocket" class="w-5 h-5 text-yellow-400 flex-shrink-0 mt-0.5"></i> | |
| <span>Запустить сайт на постоянном хостинге и обеспечить его продвижение</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-white/20 pt-8"> | |
| <div class="bg-white/10 backdrop-blur rounded-2xl p-6 mb-8 inline-block max-w-2xl"> | |
| <p class="text-xl font-serif italic mb-4"> | |
| «Современные технологии позволяют сохранить память о прошлом тем способом, | |
| который понятен и доступен сегодняшнему поколению. Этот сайт — не просто | |
| интернет-страница, это цифровой мемориал, который будет жить и развиваться | |
| вместе с нашей школой» | |
| </p> | |
| <p class="text-sm text-gray-400">Из пояснительной записки автора проекта</p> | |
| </div> | |
| <div class="flex flex-col md:flex-row gap-4 justify-center items-center mb-8"> | |
| <a href="index.html" target="_blank" class="inline-flex items-center gap-2 px-8 py-4 bg-yellow-500 hover:bg-yellow-400 text-gray-900 font-bold rounded-lg transition-all"> | |
| <i data-lucide="external-link" class="w-5 h-5"></i> | |
| Демо Beta-версии | |
| </a> | |
| <button onclick="window.print()" class="inline-flex items-center gap-2 px-8 py-4 bg-white/10 hover:bg-white/20 text-white font-bold rounded-lg transition-all border border-white/30"> | |
| <i data-lucide="download" class="w-5 h-5"></i> | |
| Сохранить презентацию | |
| </button> | |
| </div> | |
| <div class="text-sm text-gray-400 space-y-1"> | |
| <p class="font-semibold text-gray-300">ГБОУ СОШ № 625 Невского района Санкт-Петербурга</p> | |
| <p>Школьный музей «Боевое братство»</p> | |
| <p>2026-2026 учебный год | Проектная работа по информатике</p> | |
| <p class="mt-2 text-xs text-gray-500"> | |
| <span class="beta-badge text-xs">BETA</span> | |
| Сайт находится на стадии тестирования и наполнения контентом | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <script> | |
| lucide.createIcons(); | |
| // Keyboard navigation | |
| let currentSlide = 0; | |
| const slides = document.querySelectorAll('.slide'); | |
| document.addEventListener('keydown', (e) => { | |
| if (e.key === 'ArrowDown' || e.key === 'PageDown') { | |
| window.scrollBy(0, window.innerHeight); | |
| } else if (e.key === 'ArrowUp' || e.key === 'PageUp') { | |
| window.scrollBy(0, -window.innerHeight); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |