13 #permalink COOKIE - sekcja plików cookie

Oto opis stylizacji sekcji cookies (plików cookie) oraz jej elementów:

.cookie: To główny kontener sekcji plików cookie. Ma styl display: flex;, który ustawia elementy w sekcji w jednym rzędzie, justify-content: center;, co wyśrodkowuje zawartość poziomo, position: fixed;, co trzyma sekcję na stałe na dole ekranu, bottom: 0;, aby umieścić ją na dolnej krawędzi strony, width: 100%;, co sprawia, że zajmuje pełną szerokość strony, oraz height: 30%;, co ustawia jej wysokość na 30% widoku ekranu. Ma tło w kolorze ciemnoszarym (background-color: rgb(37, 37, 37);) oraz biały kolor tekstu (color: #ffffff;). Z-index ustawiony jest na 9, co oznacza, że jest na wierzchu innych elementów na stronie. Sekcja jest domyślnie niewidoczna (opacity: 0) i pojawia się płynnie z efektem animacji (animation: show-cookies 0.5s 0.5s forwards;). Jest także przesunięta na dół o 100% swojej wysokości (transform: translateY(100%);).
.cookie__box: Jest to kontener wewnątrz sekcji cookies. Ma maksymalną szerokość 500 pikseli i wysokość 30 pikseli.
.cookie__title: Tytuł sekcji cookies. Ma margines na dole wynoszący 0.7em, szerokość równą 50% szerokości rodzica oraz rozmiar czcionki 2rem.
.cookie__content: Kontener dla treści sekcji cookies. Elementy wewnątrz są rozmieszczone w kolumnie (flex-direction: column;), wycentrowane w pionie i poziomie (justify-content: center; align-items: center;) oraz mają odstęp między nimi 1em.
.cookie__img: Ikona plików cookie (🍪). Ma duży rozmiar czcionki 3rem.
.cookie__text: Tekst informujący o wykorzystywaniu plików cookie. Ma margines na dole wynoszący 1em i niewielki rozmiar czcionki 0.7rem.
.cookie__btn: Przycisk "Accept" służący do akceptacji plików cookie. Ma kursor myszy w postaci wskaźnika, a jego szerokość dostosowuje się do zawartości (width: -moz-fit-content; width: fit-content;). Posiada padding 0.7em na górze i dole oraz 1.7em poziomo, rozmiar czcionki 1.5rem, tekst wyśrodkowany, tło przezroczyste z białym obramowaniem o grubości 1px i białą czcionką. Ponadto, posiada zaokrąglone rogi (border-radius: 10px;).
Media Query (min-width: 768px): W tym punkcie definiowane są zmiany wizualne dla większych ekranów. Przycisk "Accept" ma efekt zmiany koloru tła na biały i czcionki na czarną po najechaniu kursorem (transition: background-color 0.3s ease, color 0.3s ease;).
Wstawienie HTML: Sekcja cookies jest zawarta wewnątrz elementu div o klasie "cookie". Wewnątrz tego kontenera znajduje się tytuł z ikoną plików cookie oraz treść informacyjna i przycisk "Accept".

Example

Markup

    <div class="cookie">
        <div class="cookie__box">
            <p class="cookie__title">
                <span class="cookie__img">🍪</span> We use cookie filles
            </p>
            <div class="cookie__content">
                <p class="cookie__text">
                    This website uses cookies to enhance your browsing experience. By
                    clicking "Accept," you consent to their use. For more information,
                    please refer to our Privacy Policy.
                </p>
                <button class="cookie__btn">Accept</button>
            </div>
        </div>
    </div>
      <script>
        document.addEventListener('DOMContentLoaded', (event) => {
        const cookieContainer = document.querySelector('.cookie');
        const acceptButton = document.querySelector('.cookie__btn');
        const hideCookieBanner = () => {
            cookieContainer.style.display = 'none';
        };
        const cookieAccepted = localStorage.getItem('cookieAccepted');
        if (cookieAccepted) {
            hideCookieBanner();
        }
        acceptButton.addEventListener('click', () => {
            localStorage.setItem('cookieAccepted', 'true');
            hideCookieBanner();
        });
    });
    </script>

Source: styleCart.css, line 911