From 8f9e67ec0817f55d96d15243f9d87d72299a4fd4 Mon Sep 17 00:00:00 2001 From: Profile Profile Date: Mon, 16 Mar 2026 11:06:01 +0300 Subject: [PATCH] add cookie-consent --- src/components/Footer.astro | 245 +----------------- src/components/Header/Header.astro | 53 ---- .../Integrations/CookieConsent.astro | 6 + src/layouts/ContentLayout.astro | 2 +- src/layouts/MainLayout.astro | 2 +- src/scripts/cookie-consent.js | 12 + src/scripts/main.js | 4 +- src/scripts/toggleFooter.js | 68 +++++ src/styles/components/cookie-consent.css | 38 +++ src/styles/footer.css | 219 ++++++++++++++++ src/styles/global.css | 10 - src/styles/main.css | 12 + 12 files changed, 364 insertions(+), 307 deletions(-) create mode 100644 src/components/Integrations/CookieConsent.astro create mode 100644 src/scripts/cookie-consent.js create mode 100644 src/scripts/toggleFooter.js create mode 100644 src/styles/components/cookie-consent.css create mode 100644 src/styles/footer.css create mode 100644 src/styles/main.css diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 20e7df6..f708372 100644 --- a/src/components/Footer.astro +++ b/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`;
+ + + - - - \ No newline at end of file diff --git a/src/components/Header/Header.astro b/src/components/Header/Header.astro index fca434c..dfa9640 100644 --- a/src/components/Header/Header.astro +++ b/src/components/Header/Header.astro @@ -27,56 +27,3 @@ let menuItems = []; - \ No newline at end of file diff --git a/src/components/Integrations/CookieConsent.astro b/src/components/Integrations/CookieConsent.astro new file mode 100644 index 0000000..43e68a8 --- /dev/null +++ b/src/components/Integrations/CookieConsent.astro @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/src/layouts/ContentLayout.astro b/src/layouts/ContentLayout.astro index 40c56e5..bae1b1f 100644 --- a/src/layouts/ContentLayout.astro +++ b/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'; --- diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro index 10dc749..399a176 100644 --- a/src/layouts/MainLayout.astro +++ b/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'; --- diff --git a/src/scripts/cookie-consent.js b/src/scripts/cookie-consent.js new file mode 100644 index 0000000..9438e80 --- /dev/null +++ b/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'; + }); + } +}); \ No newline at end of file diff --git a/src/scripts/main.js b/src/scripts/main.js index 05b1eb8..ad12189 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1,2 +1,4 @@ import './ContentGrid.js'; -import './embedded-content.js'; \ No newline at end of file +import './embedded-content.js'; +import './cookie-consent.js'; +import './toggleFooter.js'; \ No newline at end of file diff --git a/src/scripts/toggleFooter.js b/src/scripts/toggleFooter.js new file mode 100644 index 0000000..e1147c5 --- /dev/null +++ b/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); + } + } + }); + }); +}); \ No newline at end of file diff --git a/src/styles/components/cookie-consent.css b/src/styles/components/cookie-consent.css new file mode 100644 index 0000000..e7fb610 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/styles/footer.css b/src/styles/footer.css new file mode 100644 index 0000000..b13d861 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/styles/global.css b/src/styles/global.css index 52de374..0011d31 100644 --- a/src/styles/global.css +++ b/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; diff --git a/src/styles/main.css b/src/styles/main.css new file mode 100644 index 0000000..ee01261 --- /dev/null +++ b/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'; \ No newline at end of file