Spaces:

Korgik12
/

korgik12

Running

App Files Files Community

Korgik12 commited on Jun 1, 2025

Commit

e781793

verified ·

1 Parent(s): 33e7a1c

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +984 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Korgik12
-emoji: 🔥
-colorFrom: gray
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: korgik12
+emoji: 🐳
+colorFrom: pink
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,984 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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>
+    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        body {
+            font-family: 'Open Sans', sans-serif;
+            scroll-behavior: smooth;
+        }
+        h1, h2, h3, h4 {
+            font-family: 'Cormorant Garamond', serif;
+        }
+        .bg-pattern {
+            background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm-6 60c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm29 22c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-19-48c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3z' fill='%23b22234' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
+        }
+        .timeline-item:not(:last-child):after {
+            content: '';
+            position: absolute;
+            left: 50%;
+            bottom: -20px;
+            transform: translateX(-50%);
+            width: 2px;
+            height: 20px;
+            background-color: #B22234;
+        }
+        .dropdown:hover .dropdown-menu {
+            display: block;
+        }
+        .mobile-menu {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.3s ease-out;
+        }
+        .mobile-menu.open {
+            max-height: 500px;
+        }
+        .hero-slide {
+            opacity: 0;
+            transition: opacity 1s ease-in-out;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+        }
+        .hero-slide.active {
+            opacity: 1;
+        }
+        .sitemap-column {
+            column-count: 2;
+            column-gap: 2rem;
+        }
+        @media (max-width: 768px) {
+            .sitemap-column {
+                column-count: 1;
+            }
+        }
+    </style>
+</head>
+<body class="bg-white text-gray-800">
+    <!-- Header -->
+    <header class="sticky top-0 z-50 bg-white shadow-md">
+        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
+            <div class="flex items-center">
+                <img src="https://i.imgur.com/JQl0XxW.png" alt="Герб казачьего общества" class="h-12 mr-3">
+                <div>
+                    <h1 class="text-xl font-bold text-[#B22234]">Казачье Общество</h1>
+                    <p class="text-xs text-gray-600">Хутор Кабардинка</p>
+                </div>
+            </div>
+            <!-- Desktop Navigation -->
+            <nav class="hidden md:flex space-x-8">
+                <a href="#home" class="text-[#B22234] font-semibold hover:text-[#0038A8] transition">Главная</a>
+                <div class="dropdown relative">
+                    <button class="text-gray-800 font-semibold hover:text-[#B22234] transition flex items-center">
+                        О нас <i class="fas fa-chevron-down ml-1 text-xs"></i>
+                    </button>
+                    <div class="dropdown-menu absolute hidden mt-2 py-2 w-48 bg-white rounded-md shadow-lg z-10">
+                        <a href="#history" class="block px-4 py-2 text-gray-800 hover:bg-[#B22234] hover:text-white">История</a>
+                        <a href="#leadership" class="block px-4 py-2 text-gray-800 hover:bg-[#B22234] hover:text-white">Руководство</a>
+                        <a href="#documents" class="block px-4 py-2 text-gray-800 hover:bg-[#B22234] hover:text-white">Документы</a>
+                    </div>
+                </div>
+                <a href="#activities" class="text-gray-800 font-semibold hover:text-[#B22234] transition">Деятельность</a>
+                <a href="#join" class="text-gray-800 font-semibold hover:text-[#B22234] transition">Вступление</a>
+                <a href="#media" class="text-gray-800 font-semibold hover:text-[#B22234] transition">Медиа</a>
+                <a href="#contacts" class="text-gray-800 font-semibold hover:text-[#B22234] transition">Контакты</a>
+                <a href="#sitemap" class="text-gray-800 font-semibold hover:text-[#B22234] transition">Карта сайта</a>
+            </nav>
+            <!-- Mobile menu button -->
+            <button id="mobile-menu-button" class="md:hidden text-[#B22234]">
+                <i class="fas fa-bars text-2xl"></i>
+            </button>
+        </div>
+        <!-- Mobile Navigation -->
+        <div id="mobile-menu" class="mobile-menu md:hidden bg-white">
+            <div class="container mx-auto px-4 py-2 flex flex-col space-y-3">
+                <a href="#home" class="py-2 border-b border-gray-200">Главная</a>
+                <div class="py-2 border-b border-gray-200">
+                    <button class="flex items-center justify-between w-full" onclick="toggleMobileSubmenu('about-submenu')">
+                        О нас <i class="fas fa-chevron-down text-xs"></i>
+                    </button>
+                    <div id="about-submenu" class="pl-4 mt-2 hidden">
+                        <a href="#history" class="block py-2">История</a>
+                        <a href="#leadership" class="block py-2">Руководство</a>
+                        <a href="#documents" class="block py-2">Документы</a>
+                    </div>
+                </div>
+                <a href="#activities" class="py-2 border-b border-gray-200">Деятельность</a>
+                <a href="#join" class="py-2 border-b border-gray-200">Вступление</a>
+                <a href="#media" class="py-2 border-b border-gray-200">Медиа</a>
+                <a href="#contacts" class="py-2 border-b border-gray-200">Контакты</a>
+                <a href="#sitemap" class="py-2">Карта сайта</a>
+            </div>
+        </div>
+    </header>
+    <!-- Hero Section -->
+    <section id="home" class="relative h-screen max-h-[700px] overflow-hidden bg-gray-900">
+        <!-- Hero Slides -->
+        <div class="hero-slide active" style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://i.imgur.com/5XJQY9a.jpg') center/cover;">
+            <div class="container mx-auto h-full flex items-center px-4">
+                <div class="max-w-2xl text-white">
+                    <h2 class="text-4xl md:text-5xl font-bold mb-4">Сохраняя традиции - строим будущее</h2>
+                    <p class="text-xl mb-8">Объединяем казаков для сохранения культуры, защиты Отечества и служения обществу</p>
+                    <a href="#join" class="bg-[#B22234] hover:bg-[#8a1b2a] text-white font-bold py-3 px-6 rounded transition">Присоединиться</a>
+                </div>
+            </div>
+        </div>
+        <div class="hero-slide" style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://i.imgur.com/8LJQY9a.jpg') center/cover;">
+            <div class="container mx-auto h-full flex items-center px-4">
+                <div class="max-w-2xl text-white">
+                    <h2 class="text-4xl md:text-5xl font-bold mb-4">Патриотическое воспитание</h2>
+                    <p class="text-xl mb-8">Работа с молодежью - основа сильного казачьего общества</p>
+                    <a href="#activities" class="bg-[#0038A8] hover:bg-[#002d87] text-white font-bold py-3 px-6 rounded transition">Наша деятельность</a>
+                </div>
+            </div>
+        </div>
+        <div class="hero-slide" style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://i.imgur.com/9XJQY9a.jpg') center/cover;">
+            <div class="container mx-auto h-full flex items-center px-4">
+                <div class="max-w-2xl text-white">
+                    <h2 class="text-4xl md:text-5xl font-bold mb-4">Культурные традиции</h2>
+                    <p class="text-xl mb-8">Сохраняем и развиваем богатое наследие казачьей культуры</p>
+                    <a href="#media" class="bg-[#FFD700] hover:bg-[#e6c400] text-gray-900 font-bold py-3 px-6 rounded transition">Галерея</a>
+                </div>
+            </div>
+        </div>
+        <!-- Hero Indicators -->
+        <div class="absolute bottom-8 left-0 right-0 flex justify-center space-x-2">
+            <button class="w-3 h-3 rounded-full bg-white opacity-50 hero-indicator active" data-slide="0"></button>
+            <button class="w-3 h-3 rounded-full bg-white opacity-50 hero-indicator" data-slide="1"></button>
+            <button class="w-3 h-3 rounded-full bg-white opacity-50 hero-indicator" data-slide="2"></button>
+        </div>
+    </section>
+    <!-- Info Cards Section -->
+    <section class="py-12 bg-gray-50">
+        <div class="container mx-auto px-4">
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <!-- Members Counter -->
+                <div class="bg-white p-6 rounded-lg shadow-md text-center border-t-4 border-[#B22234]">
+                    <div class="text-5xl font-bold text-[#B22234] mb-2" id="members-counter">0</div>
+                    <h3 class="text-xl font-semibold mb-2">Казаков в обществе</h3>
+                    <p class="text-gray-600">Присоединяйтесь к нашему дружному сообществу</p>
+                </div>
+                <!-- Next Event -->
+                <div class="bg-white p-6 rounded-lg shadow-md text-center border-t-4 border-[#0038A8]">
+                    <div class="text-2xl font-bold text-[#0038A8] mb-2">15 июля 2023</div>
+                    <h3 class="text-xl font-semibold mb-2">День казачки</h3>
+                    <p class="text-gray-600">Традиционные гуляния и концерт в центре хутора</p>
+                    <a href="#" class="inline-block mt-3 text-[#0038A8] hover:underline">Подробнее →</a>
+                </div>
+                <!-- News -->
+                <div class="bg-white p-6 rounded-lg shadow-md text-center border-t-4 border-[#FFD700]">
+                    <div class="text-2xl font-bold text-gray-800 mb-2">Новости</h3>
+                    <p class="text-gray-600 mb-3">Казачий отряд помог в организации детского праздника</p>
+                    <a href="#media" class="inline-block mt-1 bg-[#FFD700] hover:bg-[#e6c400] text-gray-900 font-bold py-2 px-4 rounded transition">Все новости</a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- About Section -->
+    <section id="about" class="py-16 bg-pattern">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center mb-12 text-[#B22234]">О нашем обществе</h2>
+            <!-- History -->
+            <div id="history" class="mb-20">
+                <h3 class="text-2xl font-semibold mb-8 text-center">Наша история</h3>
+                <!-- Timeline -->
+                <div class="relative max-w-4xl mx-auto">
+                    <!-- Timeline Item -->
+                    <div class="timeline-item mb-16 relative">
+                        <div class="flex flex-col md:flex-row items-center">
+                            <div class="md:w-1/2 md:pr-8 mb-6 md:mb-0">
+                                <div class="bg-white p-6 rounded-lg shadow-md">
+                                    <h4 class="text-xl font-bold text-[#B22234] mb-2">1864 год</h4>
+                                    <p>Основание хутора Кабардинка казаками-переселенцами из станицы Кабардинской. Первые 25 семей обосновались на этом месте, начав строительство хутора.</p>
+                                </div>
+                            </div>
+                            <div class="hidden md:block md:w-1/2"></div>
+                        </div>
+                    </div>
+                    <!-- Timeline Item -->
+                    <div class="timeline-item mb-16 relative">
+                        <div class="flex flex-col md:flex-row items-center">
+                            <div class="hidden md:block md:w-1/2 md:pr-8"></div>
+                            <div class="md:w-1/2 md:pl-8 mb-6 md:mb-0">
+                                <div class="bg-white p-6 rounded-lg shadow-md">
+                                    <h4 class="text-xl font-bold text-[#B22234] mb-2">1917 год</h4>
+                                    <p>Хутор значительно разросся до 120 дворов. Казаки хутора активно участвовали в Первой мировой войне, многие были награждены георгиевскими крестами.</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Timeline Item -->
+                    <div class="timeline-item mb-16 relative">
+                        <div class="flex flex-col md:flex-row items-center">
+                            <div class="md:w-1/2 md:pr-8 mb-6 md:mb-0">
+                                <div class="bg-white p-6 rounded-lg shadow-md">
+                                    <h4 class="text-xl font-bold text-[#B22234] mb-2">1990 год</h4>
+                                    <p>Возрождение казачьего общества в хуторе после долгих лет забвения. Первый сход казаков, избрание атамана, начало работы по восстановлению традиций.</p>
+                                </div>
+                            </div>
+                            <div class="hidden md:block md:w-1/2"></div>
+                        </div>
+                    </div>
+                    <!-- Timeline Item -->
+                    <div class="timeline-item mb-16 relative">
+                        <div class="flex flex-col md:flex-row items-center">
+                            <div class="hidden md:block md:w-1/2 md:pr-8"></div>
+                            <div class="md:w-1/2 md:pl-8 mb-6 md:mb-0">
+                                <div class="bg-white p-6 rounded-lg shadow-md">
+                                    <h4 class="text-xl font-bold text-[#B22234] mb-2">2023 год</h4>
+                                    <p>Современное казачье общество насчитывает 215 членов, активно участвует в общественной жизни региона, охране порядка, патриотическом воспитании молодежи.</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Archive Photos -->
+                <div class="mt-12 grid grid-cols-2 md:grid-cols-4 gap-4">
+                    <div class="group relative overflow-hidden rounded-lg cursor-pointer">
+                        <img src="https://i.imgur.com/1XJQY9a.jpg" alt="Казаки 1910 год" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
+                        <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                            <span class="text-white font-semibold">Казаки 1910 год</span>
+                        </div>
+                    </div>
+                    <div class="group relative overflow-hidden rounded-lg cursor-pointer">
+                        <img src="https://i.imgur.com/2XJQY9a.jpg" alt="Хутор 1950 год" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
+                        <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                            <span class="text-white font-semibold">Хутор 1950 год</span>
+                        </div>
+                    </div>
+                    <div class="group relative overflow-hidden rounded-lg cursor-pointer">
+                        <img src="https://i.imgur.com/3XJQY9a.jpg" alt="Первое возрождение" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
+                        <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                            <span class="text-white font-semibold">Первое возрождение</span>
+                        </div>
+                    </div>
+                    <div class="group relative overflow-hidden rounded-lg cursor-pointer">
+                        <img src="https://i.imgur.com/4XJQY9a.jpg" alt="Современный парад" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
+                        <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                            <span class="text-white font-semibold">Современный парад</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Leadership -->
+            <div id="leadership" class="mb-20">
+                <h3 class="text-2xl font-semibold mb-8 text-center">Наше руководство</h3>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                    <!-- Ataman -->
+                    <div class="bg-white rounded-lg shadow-md overflow-hidden">
+                        <img src="https://i.imgur.com/6XJQY9a.jpg" alt="Атаман" class="w-full h-64 object-cover">
+                        <div class="p-6">
+                            <h4 class="text-xl font-bold text-[#B22234] mb-2">Иван Петрович Сидоров</h4>
+                            <p class="text-gray-600 font-semibold mb-3">Атаман казачьего общества</p>
+                            <p class="text-gray-700 mb-4">Потомственный казак, служил в вооруженных силах, награжден медалями. Возглавляет общество с 2015 года.</p>
+                            <button onclick="openModal('ataman-modal')" class="w-full bg-[#0038A8] hover:bg-[#002d87] text-white font-bold py-2 px-4 rounded transition">Написать атаману</button>
+                        </div>
+                    </div>
+                    <!-- Elder 1 -->
+                    <div class="bg-white rounded-lg shadow-md overflow-hidden">
+                        <img src="https://i.imgur.com/7XJQY9a.jpg" alt="Старейшина" class="w-full h-64 object-cover">
+                        <div class="p-6">
+                            <h4 class="text-xl font-bold text-[#B22234] mb-2">Петр Васильевич Ковалев</h4>
+                            <p class="text-gray-600 font-semibold mb-3">Старейшина, ответственный за традиции</p>
+                            <p class="text-gray-700 mb-4">Хранитель казачьих обычаев, организатор фольклорных ансамблей, знаток истории казачества.</p>
+                            <button onclick="openModal('elder1-modal')" class="w-full bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded transition">Обратиться</button>
+                        </div>
+                    </div>
+                    <!-- Elder 2 -->
+                    <div class="bg-white rounded-lg shadow-md overflow-hidden">
+                        <img src="https://i.imgur.com/8XJQY9a.jpg" alt="Старейшина" class="w-full h-64 object-cover">
+                        <div class="p-6">
+                            <h4 class="text-xl font-bold text-[#B22234] mb-2">Сергей Николаевич Лопатин</h4>
+                            <p class="text-gray-600 font-semibold mb-3">Старейшина, ответственный за молодежь</p>
+                            <p class="text-gray-700 mb-4">Руководитель школы молодого казака, организатор военно-патриотических сборов.</p>
+                            <button onclick="openModal('elder2-modal')" class="w-full bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded transition">Обратиться</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Documents -->
+            <div id="documents">
+                <h3 class="text-2xl font-semibold mb-8 text-center">Наши документы</h3>
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    <!-- Document 1 -->
+                    <div class="bg-white p-6 rounded-lg shadow-md flex items-start">
+                        <div class="bg-[#B22234] text-white p-3 rounded-full mr-4">
+                            <i class="fas fa-file-alt text-xl"></i>
+                        </div>
+                        <div>
+                            <h4 class="text-lg font-bold mb-1">Устав казачьего общества</h4>
+                            <p class="text-gray-600 text-sm mb-2">PDF, 1.2 MB</p>
+                            <a href="#" class="text-[#0038A8] hover:underline flex items-center">
+                                <i class="fas fa-download mr-2"></i> Скачать
+                            </a>
+                        </div>
+                    </div>
+                    <!-- Document 2 -->
+                    <div class="bg-white p-6 rounded-lg shadow-md flex items-start">
+                        <div class="bg-[#0038A8] text-white p-3 rounded-full mr-4">
+                            <i class="fas fa-scroll text-xl"></i>
+                        </div>
+                        <div>
+                            <h4 class="text-lg font-bold mb-1">Положение о приеме</h4>
+                            <p class="text-gray-600 text-sm mb-2">PDF, 0.8 MB</p>
+                            <a href="#" class="text-[#0038A8] hover:underline flex items-center">
+                                <i class="fas fa-download mr-2"></i> Скачать
+                            </a>
+                        </div>
+                    </div>
+                    <!-- Document 3 -->
+                    <div class="bg-white p-6 rounded-lg shadow-md flex items-start">
+                        <div class="bg-[#FFD700] text-gray-900 p-3 rounded-full mr-4">
+                            <i class="fas fa-award text-xl"></i>
+                        </div>
+                        <div>
+                            <h4 class="text-lg font-bold mb-1">Сертификат регистрации</h4>
+                            <p class="text-gray-600 text-sm mb-2">PDF, 1.5 MB</p>
+                            <a href="#" class="text-[#0038A8] hover:underline flex items-center">
+                                <i class="fas fa-download mr-2"></i> Скачать
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Activities Section -->
+    <section id="activities" class="py-16 bg-gray-50">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center mb-12 text-[#0038A8]">Направления деятельности</h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
+                <!-- Activity 1 -->
+                <div class="bg-white p-6 rounded-lg shadow-md text-center hover:shadow-lg transition-shadow">
+                    <div class="bg-[#B22234] text-white p-4 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
+                        <i class="fas fa-shield-alt text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Охрана порядка</h3>
+                    <p class="text-gray-700">Участие в охране общественного порядка совместно с правоохранительными органами.</p>
+                    <a href="#" class="inline-block mt-4 text-[#0038A8] hover:underline">Подробнее →</a>
+                </div>
+                <!-- Activity 2 -->
+                <div class="bg-white p-6 rounded-lg shadow-md text-center hover:shadow-lg transition-shadow">
+                    <div class="bg-[#0038A8] text-white p-4 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
+                        <i class="fas fa-child text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Патриотическое воспитание</h3>
+                    <p class="text-gray-700">Работа с молодежью, военно-патриотические клубы, уроки мужества.</p>
+                    <a href="#" class="inline-block mt-4 text-[#0038A8] hover:underline">Подробнее →</a>
+                </div>
+                <!-- Activity 3 -->
+                <div class="bg-white p-6 rounded-lg shadow-md text-center hover:shadow-lg transition-shadow">
+                    <div class="bg-[#FFD700] text-gray-900 p-4 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
+                        <i class="fas fa-music text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Культурные мероприятия</h3>
+                    <p class="text-gray-700">Фестивали, концерты, возрождение традиций и обрядов казачества.</p>
+                    <a href="#" class="inline-block mt-4 text-[#0038A8] hover:underline">Подробнее →</a>
+                </div>
+                <!-- Activity 4 -->
+                <div class="bg-white p-6 rounded-lg shadow-md text-center hover:shadow-lg transition-shadow">
+                    <div class="bg-[#B22234] text-white p-4 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4">
+                        <i class="fas fa-church text-2xl"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Сотрудничество с РПЦ</h3>
+                    <p class="text-gray-700">Участие в церковных службах, восстановление храмов, духовное окормление.</p>
+                    <a href="#" class="inline-block mt-4 text-[#0038A8] hover:underline">Подробнее →</a>
+                </div>
+            </div>
+            <!-- Projects -->
+            <h3 class="text-2xl font-semibold mb-8 text-center">Наши проекты</h3>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <!-- Project 1 -->
+                <div class="bg-white rounded-lg shadow-md overflow-hidden">
+                    <img src="https://i.imgur.com/9XJQY9a.jpg" alt="Школа молодого казака" class="w-full h-64 object-cover">
+                    <div class="p-6">
+                        <div class="flex justify-between items-start mb-3">
+                            <h4 class="text-xl font-bold text-[#0038A8]">Школа молодого казака</h4>
+                            <span class="bg-[#B22234] text-white text-xs font-bold px-3 py-1 rounded-full">Активный</span>
+                        </div>
+                        <p class="text-gray-700 mb-4">Еженедельные занятия для подростков 12-17 лет: история казачества, строевая подготовка, основы верховой езды, традиционные ремесла.</p>
+                        <div class="flex justify-between items-center">
+                            <div>
+                                <p class="text-sm text-gray-600"><i class="fas fa-calendar-alt mr-2"></i> Каждую субботу 10:00-14:00</p>
+                                <p class="text-sm text-gray-600"><i class="fas fa-map-marker-alt mr-2"></i> Штаб казачьего общества</p>
+                            </div>
+                            <a href="#" class="text-[#0038A8] hover:underline font-semibold">Узнать больше</a>
+                        </div>
+                    </div>
+                </div>
+                <!-- Project 2 -->
+                <div class="bg-white rounded-lg shadow-md overflow-hidden">
+                    <img src="https://i.imgur.com/10XJQY9a.jpg" alt="Казачий музей" class="w-full h-64 object-cover">
+                    <div class="p-6">
+                        <div class="flex justify-between items-start mb-3">
+                            <h4 class="text-xl font-bold text-[#0038A8]">Казачий музей под открытым небом</h4>
+                            <span class="bg-gray-500 text-white text-xs font-bold px-3 py-1 rounded-full">Завершен</span>
+                        </div>
+                        <p class="text-gray-700 mb-4">Воссоздание традиционной казачьей усадьбы XIX века с предметами быта, оружием и реконструкцией построек.</p>
+                        <div class="flex justify-between items-center">
+                            <div>
+                                <p class="text-sm text-gray-600"><i class="fas fa-calendar-alt mr-2"></i> Открыт ежедневно 9:00-18:00</p>
+                                <p class="text-sm text-gray-600"><i class="fas fa-map-marker-alt mr-2"></i> Центральная площадь хутора</p>
+                            </div>
+                            <a href="#" class="text-[#0038A8] hover:underline font-semibold">Узнать больше</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Join Section -->
+    <section id="join" class="py-16 bg-[#B22234] text-white">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center mb-6">Вступление в казачье общество</h2>
+            <p class="text-center max-w-2xl mx-auto mb-12">Стань частью многовековой традиции служения Отечеству и сохранения казачьей культуры</p>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
+                <!-- Requirements -->
+                <div>
+                    <h3 class="text-2xl font-semibold mb-6">Условия вступления</h3>
+                    <div class="space-y-4">
+                        <div class="flex items-start">
+                            <div class="bg-[#FFD700] text-gray-900 rounded-full w-8 h-8 flex items-center justify-center mr-4 flex-shrink-0">
+                                <span class="font-bold">1</span>
+                            </div>
+                            <div>
+                                <h4 class="font-bold mb-1">Возраст</h4>
+                                <p class="text-gray-200">От 18 лет. Для молодежи 14-18 лет - подготовительная группа.</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <div class="bg-[#FFD700] text-gray-900 rounded-full w-8 h-8 flex items-center justify-center mr-4 flex-shrink-0">
+                                <span class="font-bold">2</span>
+                            </div>
+                            <div>
+                                <h4 class="font-bold mb-1">Рекомендации</h4>
+                                <p class="text-gray-200">Две рекомендации от действующих членов общества или от казачьего священника.</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <div class="bg-[#FFD700] text-gray-900 rounded-full w-8 h-8 flex items-center justify-center mr-4 flex-shrink-0">
+                                <span class="font-bold">3</span>
+                            </div>
+                            <div>
+                                <h4 class="font-bold mb-1">Испытательный срок</h4>
+                                <p class="text-gray-200">6 месяцев участия в жизни общества перед принятием решения советом старейшин.</p>
+                            </div>
+                        </div>
+                        <div class="flex items-start">
+                            <div class="bg-[#FFD700] text-gray-900 rounded-full w-8 h-8 flex items-center justify-center mr-4 flex-shrink-0">
+                                <span class="font-bold">4</span>
+                            </div>
+                            <div>
+                                <h4 class="font-bold mb-1">Обязательства</h4>
+                                <p class="text-gray-200">Соблюдение уставов, участие в мероприятиях, регулярные взносы (1000 руб./мес).</p>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- FAQ -->
+                    <div class="mt-12">
+                        <h3 class="text-2xl font-semibold mb-6">Частые вопросы</h3>
+                        <div class="space-y-4">
+                            <div class="border-b border-[#8a1b2a] pb-4">
+                                <button class="flex justify-between items-center w-full text-left" onclick="toggleFAQ('faq1')">
+                                    <span class="font-semibold">Нужно ли военное образование для вступления?</span>
+                                    <i class="fas fa-chevron-down ml-2 transition-transform" id="faq1-icon"></i>
+                                </button>
+                                <div id="faq1" class="hidden mt-2 text-gray-200">
+                                    <p>Военное образование не является обязательным, но приветствуется. Основное требование - разделение ценностей казачества и готовность служить обществу.</p>
+                                </div>
+                            </div>
+                            <div class="border-b border-[#8a1b2a] pb-4">
+                                <button class="flex justify-between items-center w-full text-left" onclick="toggleFAQ('faq2')">
+                                    <span class="font-semibold">Обязательна ли военная служба для членов общества?</span>
+                                    <i class="fas fa-chevron-down ml-2 transition-transform" id="faq2-icon"></i>
+                                </button>
+                                <div id="faq2" class="hidden mt-2 text-gray-200">
+                                    <p>Нет, участие в военной службе добровольное. Однако все члены общества проходят базовую военную подготовку и могут быть призваны в случае необходимости.</p>
+                                </div>
+                            </div>
+                            <div class="border-b border-[#8a1b2a] pb-4">
+                                <button class="flex justify-between items-center w-full text-left" onclick="toggleFAQ('faq3')">
+                                    <span class="font-semibold">Могут ли женщины вступать в общество?</span>
+                                    <i class="fas fa-chevron-down ml-2 transition-transform" id="faq3-icon"></i>
+                                </button>
+                                <div id="faq3" class="hidden mt-2 text-gray-200">
+                                    <p>Да, женщины могут вступать в общество и участвовать во всех видах деятельности, кроме несения караульной службы. Существует отдельное направление "Казачки", занимающееся культурными и благотворительными проектами.</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- Application Form -->
+                <div class="bg-white rounded-lg shadow-lg p-8 text-gray-800">
+                    <h3 class="text-2xl font-semibold mb-6 text-[#B22234]">Онлайн-заявка</h3>
+                    <form id="join-form">
+                        <div class="mb-4">
+                            <label for="fullname" class="block text-gray-700 font-medium mb-2">ФИО *</label>
+                            <input type="text" id="fullname" name="fullname" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#B22234]">
+                        </div>
+                        <div class="mb-4">
+                            <label for="birthdate" class="block text-gray-700 font-medium mb-2">Дата рождения *</label>
+                            <input type="date" id="birthdate" name="birthdate" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#B22234]">
+                        </div>
+                        <div class="mb-4">
+                            <label for="phone" class="block text-gray-700 font-medium mb-2">Телефон *</label>
+                            <input type="tel" id="phone" name="phone" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#B22234]">
+                        </div>
+                        <div class="mb-4">
+                            <label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
+                            <input type="email" id="email" name="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#B22234]">
+                        </div>
+                        <div class="mb-4">
+                            <label for="experience" class="block text-gray-700 font-medium mb-2">Опыт/навыки</label>
+                            <textarea id="experience" name="experience" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#B22234]">
+                            </textarea>
+                            <p class="text-sm text-gray-500">Военная подготовка, ремесла, верховная езда и т.д.</p>
+                        </div>
+                        <div class="mb-4">
+                            <label for="motivation" class="block text-gray-700 font-medium mb-2">Мотивация вступления *</label>
+                            <textarea id="motivation" name="motivation" rows="3" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#B22234]"></textarea>
+                        </div>
+                        <div class="mb-6">
+                            <div class="flex items-start">
+                                <input type="checkbox" id="agreement" name="agreement" required class="mt-1 mr-2">
+                                <label for="agreement" class="text-gray-700">Я согласен на обработку персональных данных и ознакомлен с уставом общества</label>
+                            </div>
+                        </div>
+                        <button type="submit" class="w-full bg-[#B22234] hover:bg-[#8a1b2a] text-white font-bold py-3 px-6 rounded transition">
+                            Отправить заявку
+                        </button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Media Section -->
+    <section id="media" class="py-16 bg-white">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center mb-12 text-[#0038A8]">Медиа</h2>
+            <!-- News -->
+            <div class="mb-20">
+                <div class="flex justify-between items-center mb-8">
+                    <h3 class="text-2xl font-semibold">Новости</h3>
+                    <div class="flex space-x-2">
+                        <button class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded-md">Все</button>
+                        <button class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded-md">#История</button>
+                        <button class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded-md">#Событие</button>
+                        <button class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded-md">#Объявление</button>
+                    </div>
+                </div>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                    <!-- News 1 -->
+                    <div class="bg-white rounded-lg shadow-md overflow-hidden border border-gray-100 hover:shadow-lg transition-shadow">
+                        <img src="https://i.imgur.com/11XJQY9a.jpg" alt="Празднование Дня казака" class="w-full h-48 object-cover">
+                        <div class="p-6">
+                            <div class="flex justify-between items-center mb-3">
+                                <span class="text-sm text-gray-500">15.06.2023</span>
+                                <span class="bg-[#B22234] text-white text-xs font-bold px-2 py-1 rounded">#Событие</span>
+                            </div>
+                            <h4 class="text-xl font-bold mb-3">Торжественное празднование Дня казака</h4>
+                            <p class="text-gray-700 mb-4">В хуторе Кабардинка прошли масштабные гуляния по случаю традиционного праздника с участием гостей из соседних станиц.</p>
+                            <a href="#" class="text-[#0038A8] hover:underline font-semibold">Читать далее →</a>
+                        </div>
+                    </div>
+                    <!-- News 2 -->
+                    <div class="bg-white rounded-lg shadow-md overflow-hidden border border-gray-100 hover:shadow-lg transition-shadow">
+                        <img src="https://i.imgur.com/12XJQY9a.jpg" alt="Открытие музея" class="w-full h-48 object-cover">
+                        <div class="p-6">
+                            <div class="flex justify-between items-center mb-3">
+                                <span class="text-sm text-gray-500">02.05.2023</span>
+                                <span class="bg-[#0038A8] text-white text-xs font-bold px-2 py-1 rounded">#История</span>
+                            </div>
+                            <h4 class="text-xl font-bold mb-3">Открытие казачьего музея под открытым небом</h4>
+                            <p class="text-gray-700 mb-4">После двух лет работы завершен проект по созданию музея казачьего быта с уникальными экспонатами XIX века.</p>
+                            <a href="#" class="text-[#0038A8] hover:underline font-semibold">Читать далее →</a>
+                        </div>
+                    </div>
+                    <!-- News 3 -->
+                    <div class="bg-white rounded-lg shadow-md overflow-hidden border border-gray-100 hover:shadow-lg transition-shadow">
+                        <img src="https://i.imgur.com/13XJQY9a.jpg" alt="Патриотический урок" class="w-full h-48 object-cover">
+                        <div class="p-6">
+                            <div class="flex justify-between items-center mb-3">
+                                <span class="text-sm text-gray-500">22.04.2023</span>
+                                <span class="bg-[#FFD700] text-gray-900 text-xs font-bold px-2 py-1 rounded">#Объявление</span>
+                            </div>
+                            <h4 class="text-xl font-bold mb-3">Казаки провели урок мужества для школьников</h4>
+                            <p class="text-gray-700 mb-4">В рамках патриотического воспитания члены общества организовали серию встреч с учащимися местных школ.</p>
+                            <a href="#" class="text-[#0038A8] hover:underline font-semibold">Читать далее →</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="mt-8 text-center">
+                    <a href="#" class="inline-block bg-[#0038A8] hover:bg-[#002d87] text-white font-bold py-3 px-6 rounded transition">
+                        Все новости
+                    </a>
+                    <button class="ml-4 inline-block bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-3 px-6 rounded transition">
+                        Предложить новость
+                    </button>
+                </div>
+            </div>
+            <!-- Gallery -->
+            <div class="mb-12">
+                <div class="flex justify-between items-center mb-8">
+                    <h3 class="text-2xl font-semibold">Фотогалерея</h3>
+                    <div class="flex space-x-2">
+                        <button class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded-md">Все</button>
+                        <button class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded-md">2023</button>
+                        <button class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded-md">2022</button>
+                        <button class="px-3 py-1 bg-gray-200 hover:bg-gray-300 rounded-md">История</button>
+                    </div>
+                </div>
+                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+                    <div class="group relative overflow-hidden rounded-lg cursor-pointer h-48">
+                        <img src="https://i.imgur.com/14XJQY9a.jpg" alt="Парад" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
+                        <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                            <span class="text-white font-semibold">Парад 2023</span>
+                        </div>
+                    </div>
+                    <div class="group relative overflow-hidden rounded-lg cursor-pointer h-48">
+                        <img src="https://i.imgur.com/15XJQY9a.jpg" alt="Тренировка" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
+                        <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                            <span class="text-white font-semibold">Тренировка</span>
+                        </div>
+                    </div>
+                    <div class="group relative overflow-hidden rounded-lg cursor-pointer h-48">
+                        <img src="https://i.imgur.com/16XJQY9a.jpg" alt="Церковная служба" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
+                        <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                            <span class="text-white font-semibold">Церковная служба</span>
+                        </div>
+                    </div>
+                    <div class="group relative overflow-hidden rounded-lg cursor-pointer h-48">
+                        <img src="https://i.imgur.com/17XJQY9a.jpg" alt="Ремесла" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
+                        <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                            <span class="text-white font-semibold">Традиционные ремесла</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="mt-8 text-center">
+                    <a href="#" class="inline-block bg-[#B22234] hover:bg-[#8a1b2a] text-white font-bold py-3 px-6 rounded transition">
+                        Вся галерея
+                    </a>
+                </div>
+            </div>
+            <!-- Videos -->
+            <div>
+                <h3 class="text-2xl font-semibold mb-8 text-center">Видео</h3>
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                    <div class="bg-gray-200 aspect-video flex items-center justify-center">
+                        <div class="text-center">
+                            <i class="fas fa-play-circle text-5xl text-[#B22234] mb-2"></i>
+                            <p>Видео с празднования Дня казака</p>
+                        </div>
+                    </div>
+                    <div class="bg-gray-200 aspect-video flex items-center justify-center">
+                        <div class="text-center">
+                            <i class="fas fa-play-circle text-5xl text-[#B22234] mb-2"></i>
+                            <p>Интервью с атаманом</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="mt-8 text-center">
+                    <a href="#" class="inline-block bg-[#0038A8] hover:bg-[#002d87] text-white font-bold py-3 px-6 rounded transition">
+                        Все видео
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Contacts Section -->
+    <section id="contacts" class="py-16 bg-gray-100">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center mb-12 text-[#B22234]">Контакты</h2>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
+                <!-- Map and Info -->
+                <div>
+                    <div class="bg-white p-6 rounded-lg shadow-md mb-8">
+                        <div class="aspect-w-16 aspect-h-9 bg-gray-300 mb-4">
+                            <!-- Здесь будет карта -->
+                            <div class="w-full h-64 bg-gray-300 flex items-center justify-center">
+                                <i class="fas fa-map-marked-alt text-4xl text-[#0038A8]"></i>
+                            </div>
+                        </div>
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                            <div>
+                                <h4 class="font-bold text-lg mb-2">Штаб казачьего общества</h4>
+                                <p class="text-gray-700 mb-1"><i class="fas fa-map-marker-alt text-[#B22234] mr-2"></i> ул. Казачья, 15, х. Кабардинка</p>
+                                <p class="text-gray-700"><i class="fas fa-clock text-[#B22234] mr-2"></i> Пн-Пт: 9:00-18:00</p>
+                            </div>
+                            <div>
+                                <h4 class="font-bold text-lg mb-2">Контакты</h4>
+                                <p class="text-gray-700 mb-1"><i class="fas fa-phone-alt text-[#B22234] mr-2"></i> +7 (XXX) XXX-XX-XX</p>
+                                <p class="text-gray-700"><i class="fas fa-envelope text-[#B22234] mr-2"></i> kazak@kabardinka.ru</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-white p-6 rounded-lg shadow-md">
+                        <h4 class="font-bold text-lg mb-4">Мы в социальных сетях</h4>
+                        <div class="flex space-x-4">
+                            <a href="#" class="bg-[#0077FF] text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-[#0066DD] transition">
+                                <i class="fab fa-vk"></i>
+                            </a>
+                            <a href="#" class="bg-[#0088CC] text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-[#0077BB] transition">
+                                <i class="fab fa-telegram"></i>
+                            </a>
+                            <a href="#" class="bg-[#FF0000] text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-[#DD0000] transition">
+                                <i class="fab fa-youtube"></i>
+                            </a>
+                            <a href="#" class="bg-[#4267B2] text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-[#3B5998] transition">
+                                <i class="fab fa-facebook-f"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                <!-- Contact Form -->
+                <div class="bg-white rounded-lg shadow-lg p-8">
+                    <h3 class="text-2xl font-semibold mb-6 text-[#0038A8]">Обратная связь</h3>
+                    <form id="contact-form">
+                        <div class="mb-4">
+                            <label for="contact-name" class="block text-gray-700 font-medium mb-2">Ваше имя *</label>
+                            <input type="text" id="contact-name" name="contact-name" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#B22234]">
+                        </div>
+                        <div class="mb-4">
+                            <label for="contact-email" class="block text-gray-700 font-medium mb-2">Email *</label>
+                            <input type="email" id="contact-email" name="contact-email" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#B22234]">
+                        </div>
+                        <div class="mb-4">
+                            <label for="contact-subject" class="block text-gray-700 font-medium mb-2">Тема</label>
+                            <select id="contact-subject" name="contact-subject" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#B22234]">
+                                <option value="general">Общий вопрос</option>
+                                <option value="join">Вступление в общество</option>
+                                <option value="event">Участие в мероприятии</option>
+                                <option value="partnership">Сотрудничество</option>
+                            </select>
+                        </div>
+                        <div class="mb-4">
+                            <label for="contact-message" class="block text-gray-700 font-medium mb-2">Сообщение *</label>
+                            <textarea id="contact-message" name="contact-message" rows="5" required class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#B22234]"></textarea>
+                        </div>
+                        <div class="mb-6">
+                            <div class="flex items-start">
+                                <input type="checkbox" id="contact-agreement" name="contact-agreement" required class="mt-1 mr-2">
+                                <label for="contact-agreement" class="text-gray-700">Я согласен на обработку персональных данных</label>
+                            </div>
+                        </div>
+                        <button type="submit" class="w-full bg-[#B22234] hover:bg-[#8a1b2a] text-white font-bold py-3 px-6 rounded transition">
+                            Отправить сообщение
+                        </button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Sitemap Section -->
+    <section id="sitemap" class="py-16 bg-white">
+        <div class="container mx-auto px-4">
+            <h2 class="text-3xl font-bold text-center mb-12 text-[#0038A8]">Карта сайта</h2>
+            <div class="bg-gray-50 p-8 rounded-lg shadow-md">
+                <h3 class="text-2xl font-semibold mb-6 text-[#B22234]">Структура сайта</h3>
+                <div class="sitemap-column">
+                    <div class="mb-6">
+                        <h4 class="text-xl font-bold mb-3 text-[#0038A8]">Главная</h4>
+                        <ul class="space-y-2 pl-4">
+                            <li><a href="#home" class="text-gray-700 hover:text-[#B22234]">Главная страница</a></li>
+                            <li><a href="#home" class="text-gray-700 hover:text-[#B22234]">Информационные блоки</a></li>
+                        </ul>
+                    </div>
+                    <div class="mb-6">
+                        <h4 class="text-xl font-bold mb-3 text-[#0038A8]">О нас</h4>
+                        <ul class="space-y-2 pl-4">
+                            <li><a href="#history" class="text-gray-700 hover:text-[#B22234]">История казачества</a></li>
+                            <li><a href="#leadership" class="text-gray-700 hover:text-[#B22234]">Руководство общества</a></li>
+                            <li><a href="#documents" class="text-gray-700 hover:text-[#B22234]">Уставные документы</a></li>
+                        </ul>
+                    </div>
+                    <div class="mb-6">
+                        <h4 class="text-xl font-bold mb-3 text-[#0038A8]">Деятельность</h4>
+                        <ul class="space-y-2 pl-4">
+                            <li><a href="#activities" class="text-gray-700 hover:text-[#B22234]">Основные направления</a></li>
+                            <li><a href="#activities" class="text-gray-700 hover:text-[#B22234]">Текущие проекты</a></li>
+                            <li><a href="#activities" class="text-gray-700 hover:text-[#B22234]">Планы на будущее</a></li>
+                        </ul>
+                    </div>
+                    <div class="mb-6">
+                        <h4 class="text-xl font-bold mb-3 text-[#0038A8]">Вступление</h4>
+                        <ul class="space-y-2 pl-4">
+                            <li><a href="#join" class="text-gray-700 hover:text-[#B22234]">Условия вступления</a></li>
+                            <li><a href="#join" class="text-gray-700 hover:text-[#B22234]">Порядок приема</a></li>
+                            <li><a href="#join" class="text-gray-700 hover:text-[#B22234]">Онлайн-заявка</a></li>
+                        </ul>
+                    </div>
+                    <div class="mb-6">
+                        <h4 class="text-xl font-bold mb-3 text-[#0038A8]">Медиа</h4>
+                        <ul class="space-y-2 pl-4">
+                            <li><a href="#media" class="text-gray-700 hover:text-[#B22234]">Новости</a></li>
+                            <li><a href="#media" class="text-gray-700 hover:text-[#B22234]">Фотогалерея</a></li>
+                            <li><a href="#media" class="text-gray-700 hover:text-[#B22234]">Видеоархив</a></li>
+                        </ul>
+                    </div>
+                    <div class="mb-6">
+                        <h4 class="text-xl font-bold mb-3 text-[#0038A8]">Контакты</h4>
+                        <ul class="space-y-2 pl-4">
+                            <li><a href="#contacts" class="text-gray-700 hover:text-[#B22234]">Адрес штаба</a></li>
+                            <li><a href="#contacts" class="text-gray-700 hover:text-[#B22234]">Контактная информация</a></li>
+                            <li><a href="#contacts" class="text-gray-700 hover:text-[#B22234]">Обратная связь</a></li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="mt-8 bg-[#FFD700] bg-opacity-20 p-4 rounded-lg">
+                    <h4 class="text-lg font-bold mb-2 text-[#B22234]">Поиск по сайту</h4>
+                    <div class="flex">
+                        <input type="text" placeholder="Введите запрос..." class="px-4 py-2 border border-gray-300 rounded-l-md w-full focus:outline-none focus:ring-2 focus:ring-[#B22234]">
+                        <button class="bg-[#B22234] text-white px-4 py-2 rounded-r-md hover:bg-[#8a1b2a] transition">
+                            <i class="fas fa-search"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <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>
+                    <h4 class="text-xl font-bold mb-4 text-[#FFD700]">Казачье общество</h4>
+                    <p class="mb-4">Сохраняя традиции - строим будущее. Хутор Кабардинка.</p>
+                    <div class="flex space-x-4">
+                        <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-vk"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-telegram"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-youtube"></i></a>
+                    </div>
+                </div>
+                <div>
+                    <h4 class="text-xl font-bold mb-4">Навигация</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#home" class="text-gray-400 hover:text-white transition">Главная</a></li>
+                        <li><a href="#history" class="text-gray-400 hover:text-white transition">История</a></li>
+                        <li><a href="#leadership" class="text-gray-400 hover:text-white transition">Руководство</a></li>
+                        <li><a href="#activities" class="text-gray-400 hover:text-white transition">Деятельность</a></li>
+                        <li><a href="#join" class="text-gray-400 hover:text-white transition">Вступление</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-xl font-bold mb-4">Контакты</h4>
+                    <ul class="space-y-2">
+                        <li class="flex items-start">
+                            <i class="fas fa-map-marker-alt mt-1 mr-2 text-[#B22234]"></i>
+                            <span>ул. Казачья, 15, х. Кабардинка</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-phone-alt mr-2 text-[#B22234]"></i>
+                            <span>+7 (XXX) XXX-XX-XX</span>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-envelope mr-2 text-[#B22234]"></i>
+                            <span>kazak@kabardinka.ru</span>
+                        </li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-xl font-bold mb-4">Подписаться на новости</h4>
+                    <form class="flex">
+                        <input type="email" placeholder="Ваш email" class="px-4 py-2 rounded-l-md focus:outline-none text-gray-900 w-full">
+                        <button type="submit" class="bg-[#B22234] hover:bg-[#8a1b2a] px-4 py-2 rounded-r-md transition">
+                            <i class="fas fa-paper-plane"></i>
+                        </button>
+                    </form>
+                    <p class="text-sm text-gray-400 mt-2">Только важные объявления и новости</p>
+                </div>
+            </div>
+            <div class="pt-8 border-t border-gray-800 text-center text-gray-
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ Допиши остальные страницы сайта согласно его структуры, добавь фотографии подходящие по тематики сайта, покажи карту сайта