add cookie-consent

src/components/Footer.astro

@@ -1,6 +1,7 @@
 ---
 
 import  FooterMenu from '@components/Menus/FooterMenu.astro';
+import  CookieConsent from '@components/Integrations/CookieConsent.astro';
 
 
 interface Props {
@@ -105,7 +106,6 @@ const footerId = `footer-profile`;
     <div class="footer__expanded-bottom">
       <button 
         class="footer__collapse-btn"
-        onclick="toggleFooter(document.querySelector('#${footerId} .footer__toggle'))"
         aria-label="Свернуть футер"
       >
         <svg 
@@ -126,246 +126,9 @@ const footerId = `footer-profile`;
       </button>
     </div>
   </div>
+
+<CookieConsent />
+
 </footer>
 
-<style is:global>
-.footer {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: #303030;
-  border-top: 2px solid #404040;
-  transition: all 0.3s ease;
-  z-index: 100;
-  box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.3);
-  color: #ffffff;
-}
 
-
-
-/* Свернутое состояние */
-.footer__collapsed {
-  padding: 12px 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.footer__toggle {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  max-width: 1200px;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 8px 16px;
-  transition: all 0.2s ease;
-  border-radius: 8px;
-  font-family: inherit;
-  font-size: inherit;
-  color: #ffffff;
-}
-
-.footer__toggle:hover {
-  background: rgba(255, 255, 255, 0.1);
-}
-
-.footer__publication-name {
-  font-size: 1.1rem;
-  font-weight: 600;
-  color: #ffffff;
-  flex: 1;
-  text-align: center;
-  margin: 0 20px;
-}
-
-.footer__arrow {
-  transition: transform 0.3s ease;
-  color: #cccccc;
-}
-
-/* При развернутом состоянии стрелка поворачивается на 180° (вниз) */
-.footer__toggle[aria-expanded="true"] .footer__arrow {
-  transform: rotate(180deg);
-}
-
-.footer__copyright-collapsed {
-  font-size: 0.9rem;
-  color: #cccccc;
-  flex: 1;
-  text-align: right;
-  margin: 0 20px;
-}
-
-/* Раскрытое состояние */
-.footer__expanded {
-  max-height: 0;
-  opacity: 0;
-  overflow: hidden;
-  transition: all 0.3s ease;
-  padding: 0 20px;
-  background: #303030;
-}
-
-.footer__expanded:not([hidden]) {
-  max-height: 400px;
-  opacity: 1;
-  padding: 20px;
-  border-top: 1px solid #404040;
-}
-
-.footer__menu {
-  margin-bottom: 20px;
-}
-
-.footer__menu-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
-  justify-content: center;
-}
-
-.footer__menu-item {
-  margin: 0;
-}
-
-.footer__menu-link {
-  color: #ffffff;
-  text-decoration: none;
-  font-size: 1rem;
-  padding: 8px 12px;
-  border-radius: 6px;
-  transition: all 0.2s ease;
-}
-
-.footer__menu-link:hover {
-  background: rgba(255, 255, 255, 0.15);
-  color: #ffffff;
-}
-
-.footer__copyright-expanded {
-  color: #cccccc;
-  font-size: 0.9rem;
-  line-height: 1.5;
-  margin-bottom: 20px;
-  max-width: 800px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.footer__copyright-expanded p {
-  margin: 0;
-}
-
-.footer__expanded-bottom {
-  display: flex;
-  justify-content: center;
-}
-
-.footer__collapse-btn {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  background: rgba(255, 255, 255, 0.1);
-  border: none;
-  padding: 8px 16px;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 0.9rem;
-  color: #ffffff;
-  transition: all 0.2s ease;
-  font-family: inherit;
-}
-
-.footer__collapse-btn:hover {
-  background: rgba(255, 255, 255, 0.2);
-}
-
-.menu-conf-docs{
-    margin-top: 12px;
-}
-
-.footer__age {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  background-color: #ffffff;
-  color: #000000; 
-  border-radius: 50%; 
-  font-size: 14px;
-  font-weight: 700; 
-  border: 2px solid #404040; 
-  margin-left: 10px; 
-  flex-shrink: 0; 
-  line-height: 1;
-}
-
-
-/* Адаптивность */
-@media (max-width: 768px) {
-  .footer__toggle {
-    flex-direction: column;
-    gap: 8px;
-    text-align: center;
-  }
-
-  .footer__publication-name,
-  .footer__copyright-collapsed {
-    margin: 4px 0;
-    text-align: center;
-    flex: none;
-    width: 100%;
-  }
-
-  .footer__menu-list {
-    flex-direction: column;
-    align-items: center;
-    gap: 12px;
-  }
-
-  .footer__copyright-expanded {
-    font-size: 0.85rem;
-  }
-}
-
-/* Анимация для стрелки */
-@keyframes bounce {
-  0%, 100% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-2px);
-  }
-}
-
-.footer__toggle:hover .footer__arrow {
-  animation: bounce 0.5s ease;
-}
-</style>
-
-<script is:inline>
-function toggleFooter(button) {
-  const footer = button.closest('.footer');
-  const expandedSection = footer.querySelector('.footer__expanded');
-  const isExpanded = button.getAttribute('aria-expanded') === 'true';
-  
-  // Обновляем состояние кнопки
-  button.setAttribute('aria-expanded', !isExpanded);
-  button.setAttribute('aria-label', isExpanded ? 'Развернуть футер' : 'Свернуть футер');
-  
-  // Показываем/скрываем контент
-  if (isExpanded) {
-    expandedSection.setAttribute('hidden', '');
-  } else {
-    expandedSection.removeAttribute('hidden');
-  }
-}
-</script>

src/components/Header/Header.astro

@@ -27,56 +27,3 @@ let menuItems = [];
   <MainMenu menuId={MENU_ID} />
 </header>
 
-<style>
-  .top-bar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center; 
-  }
-
-  .header__subtitle {
-    font-size: 22px;
-    font-weight: bold;
-    margin-left: 42px;
-    position: relative;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-  }
-
-  .header__subtitle::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: -15px;
-    width: 3px;
-    height: 80%;
-    border-left: 3px solid;
-    transform: translate(0, -40%);
-  }
-
-  .header__news-badge {
-    color: inherit;
-    font-weight: inherit;
-    position: relative;
-    padding-right: 10px;
-  }
-
-  .header__news-badge::after {
-    content: '|';
-    position: absolute;
-    right: -2px;
-    color: inherit;
-    font-weight: inherit;
-  }
-
-  .header__subtitle a {
-    text-decoration: none;
-    color: inherit;
-    font-weight: inherit;
-  }
-
-  .header__subtitle a:hover {
-    text-decoration: underline;
-  }
-</style>

src/components/Integrations/CookieConsent.astro

@@ -0,0 +1,6 @@
+<div id="cookie-consent-banner" class="cookie-consent">
+    <div class="cookie-consent-content">
+        <div class="cookie-consent-text">Мы используем файлы cookie для улучшения работы сайта. Продолжая использование сайта, вы соглашаетесь с <a style="color: white; text-decoration: underline;" href="https://profile.ru/zashita-personalnyh-dannyh/" target="_blank">условиями</a></div>
+        <button id="cookie-consent-accept" class="cookie-consent-button">Принять</button>
+    </div>
+</div>

src/layouts/ContentLayout.astro

@@ -7,7 +7,7 @@ import HeaderLine from '../components/Header/HeaderLine.astro';
 
 import Footer from '../components/Footer.astro';
 
-import '../styles/global.css';
+import '../styles/main.css';
 
 ---
 

src/layouts/MainLayout.astro

@@ -7,7 +7,7 @@ import HeaderLine from '../components/Header/HeaderLine.astro';
 
 import Footer from '../components/Footer.astro';
 
-import '../styles/global.css';
+import '../styles/main.css';
 
 ---
 

src/scripts/cookie-consent.js

@@ -0,0 +1,12 @@
+document.addEventListener('DOMContentLoaded', function() {
+    
+    if (!localStorage.getItem('cookie_consent_accepted')) {
+        const banner = document.getElementById('cookie-consent-banner');
+        banner.style.display = 'block';
+
+        document.getElementById('cookie-consent-accept').addEventListener('click', function() {
+            localStorage.setItem('cookie_consent_accepted', 'true');
+            banner.style.display = 'none';
+        });
+    }
+});

src/scripts/main.js

@@ -1,2 +1,4 @@
 import './ContentGrid.js';
 import './embedded-content.js';
+import './cookie-consent.js';
+import './toggleFooter.js';

src/scripts/toggleFooter.js

@@ -0,0 +1,68 @@
+document.addEventListener('DOMContentLoaded', function() {
+  console.log('Footer script initialized');
+  
+  // Функция toggleFooter
+  function toggleFooter(button) {
+    console.log('toggleFooter called');
+    
+    const footer = button.closest('.footer');
+    if (!footer) {
+      console.error('Footer not found');
+      return;
+    }
+    
+    const expandedSection = footer.querySelector('.footer__expanded');
+    if (!expandedSection) {
+      console.error('Expanded section not found');
+      return;
+    }
+    
+    const isExpanded = button.getAttribute('aria-expanded') === 'true';
+    
+    // Обновляем состояние кнопки
+    button.setAttribute('aria-expanded', !isExpanded);
+    button.setAttribute('aria-label', isExpanded ? 'Развернуть футер' : 'Свернуть футер');
+    
+    // Поворачиваем стрелку
+    const arrow = button.querySelector('.footer__arrow');
+    if (arrow) {
+      if (isExpanded) {
+        arrow.style.transform = 'rotate(0deg)';
+      } else {
+        arrow.style.transform = 'rotate(180deg)';
+      }
+    }
+    
+    // Показываем/скрываем контент
+    if (isExpanded) {
+      expandedSection.setAttribute('hidden', '');
+      console.log('Footer collapsed');
+    } else {
+      expandedSection.removeAttribute('hidden');
+      console.log('Footer expanded');
+    }
+  }
+  
+  // Находим основную кнопку разворачивания
+  const toggleButtons = document.querySelectorAll('.footer__toggle');
+  toggleButtons.forEach(button => {
+    button.addEventListener('click', function() {
+      toggleFooter(this);
+    });
+  });
+  
+  // Находим кнопки сворачивания
+  const collapseButtons = document.querySelectorAll('.footer__collapse-btn');
+  collapseButtons.forEach(button => {
+    button.addEventListener('click', function(event) {
+      event.preventDefault();
+      const footer = this.closest('.footer');
+      if (footer) {
+        const toggleButton = footer.querySelector('.footer__toggle');
+        if (toggleButton) {
+          toggleFooter(toggleButton);
+        }
+      }
+    });
+  });
+});

src/styles/components/cookie-consent.css

@@ -0,0 +1,38 @@
+.cookie-consent {
+    display: none;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(51, 51, 51, 0.95); 
+    color: #fff;
+    padding: 15px;
+    z-index: 9999;
+    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
+    text-align: center;
+}
+
+.cookie-consent-content {
+    max-width: 100%;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 15px;
+    font-size: .9rem;
+}
+
+.cookie-consent-button {
+    background: black;
+    color: white;
+    border: none;
+    padding: 6px 20px;
+    cursor: pointer;
+    border-radius: 4px;
+    font-weight: bold;
+}
+
+.cookie-consent-button:hover {
+    background: #72757c;
+}

src/styles/footer.css

@@ -0,0 +1,219 @@
+.footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #303030;
+  border-top: 2px solid #404040;
+  transition: all 0.3s ease;
+  z-index: 100;
+  box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.3);
+  color: #ffffff;
+}
+
+
+/* Свернутое состояние */
+.footer__collapsed {
+  padding: 12px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.footer__toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 1200px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 8px 16px;
+  transition: all 0.2s ease;
+  border-radius: 8px;
+  font-family: inherit;
+  font-size: inherit;
+  color: #ffffff;
+}
+
+.footer__toggle:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.footer__publication-name {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #ffffff;
+  flex: 1;
+  text-align: center;
+  margin: 0 20px;
+}
+
+.footer__arrow {
+  transition: transform 0.3s ease;
+  color: #cccccc;
+}
+
+/* При развернутом состоянии стрелка поворачивается на 180° (вниз) */
+.footer__toggle[aria-expanded="true"] .footer__arrow {
+  transform: rotate(180deg);
+}
+
+.footer__copyright-collapsed {
+  font-size: 0.9rem;
+  color: #cccccc;
+  flex: 1;
+  text-align: right;
+  margin: 0 20px;
+}
+
+/* Раскрытое состояние */
+.footer__expanded {
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  padding: 0 20px;
+  background: #303030;
+}
+
+.footer__expanded:not([hidden]) {
+  max-height: 400px;
+  opacity: 1;
+  padding: 20px;
+  border-top: 1px solid #404040;
+}
+
+.footer__menu {
+  margin-bottom: 20px;
+}
+
+.footer__menu-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  justify-content: center;
+}
+
+.footer__menu-item {
+  margin: 0;
+}
+
+.footer__menu-link {
+  color: #ffffff;
+  text-decoration: none;
+  font-size: 1rem;
+  padding: 8px 12px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.footer__menu-link:hover {
+  background: rgba(255, 255, 255, 0.15);
+  color: #ffffff;
+}
+
+.footer__copyright-expanded {
+  color: #cccccc;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  margin-bottom: 20px;
+  max-width: 800px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.footer__copyright-expanded p {
+  margin: 0;
+}
+
+.footer__expanded-bottom {
+  display: flex;
+  justify-content: center;
+}
+
+.footer__collapse-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  padding: 8px 16px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.9rem;
+  color: #ffffff;
+  transition: all 0.2s ease;
+  font-family: inherit;
+}
+
+.footer__collapse-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.menu-conf-docs{
+    margin-top: 12px;
+}
+
+.footer__age {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background-color: #ffffff;
+  color: #000000; 
+  border-radius: 50%; 
+  font-size: 14px;
+  font-weight: 700; 
+  border: 2px solid #404040; 
+  margin-left: 10px; 
+  flex-shrink: 0; 
+  line-height: 1;
+}
+
+
+/* Адаптивность */
+@media (max-width: 768px) {
+  .footer__toggle {
+    flex-direction: column;
+    gap: 8px;
+    text-align: center;
+  }
+
+  .footer__publication-name,
+  .footer__copyright-collapsed {
+    margin: 4px 0;
+    text-align: center;
+    flex: none;
+    width: 100%;
+  }
+
+  .footer__menu-list {
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .footer__copyright-expanded {
+    font-size: 0.85rem;
+  }
+}
+
+/* Анимация для стрелки */
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-2px);
+  }
+}
+
+.footer__toggle:hover .footer__arrow {
+  animation: bounce 0.5s ease;
+}

src/styles/global.css

@@ -1,13 +1,3 @@
-@import './reset.css';
-@import './ContentLayout.css';
-@import './mainmenu.css';
-@import './article.css';
-@import './embedded-content.css';
-@import './components/ContentGrid.css';
-@import './components/theme-colors.css';
-@import './components/RelatedPosts.css';
-
-
 html{
     font-family: Roboto,sans-serif;
     line-height: 1.15;

src/styles/main.css

@@ -0,0 +1,12 @@
+@import './reset.css';
+@import './global.css';
+@import './ContentLayout.css';
+@import './header.css';
+@import './mainmenu.css';
+@import './article.css';
+@import './footer.css';
+@import './embedded-content.css';
+@import './components/ContentGrid.css';
+@import './components/theme-colors.css';
+@import './components/RelatedPosts.css';
+@import './components/cookie-consent.css';