Ramka pokazująca informacje o cookies - jak stworzyć

Aby stworzyć ramkę (modal) informującą użytkowników o używaniu plików cookies na stronie internetowej, możesz użyć HTML, CSS oraz JavaScript. Poniżej znajdziesz przykładowy kod, który można wstawić na stronę, aby wyświetlić taką informację. Można go dostosować według własnych potrzeb.

HTML:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Informacja o cookies</title>
    <link rel="stylesheet" href="styles.css"> <!-- Połącz z plikiem CSS -->
</head>
<body>
    <!-- Twoja treść strony tutaj -->

    <!-- Ramka cookies -->
    <div id="cookieConsent" class="cookie-container">
        <div class="cookie-content">
            <p>Ta strona używa plików cookie, aby zapewnić Ci najlepsze doświadczenie na naszej stronie. <a href="#">Dowiedz się więcej</a></p>
            <button id="acceptCookies" class="cookie-btn">Akceptuję</button>
        </div>
    </div>

    <script src="script.js"></script> <!-- Połącz z plikiem JavaScript -->
</body>
</html>

CSS (styles.css):

/* Styl dla ramki cookies */
.cookie-container {
    display: none; /* Na początku ukryte, będzie widoczne przez JS */
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    z-index: 1000;
    max-width: 400px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
}

.cookie-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
}

.cookie-content p {
    margin: 0 0 10px;
    font-size: 14px;
}

.cookie-content a {
    color: #007bff;
    text-decoration: none;
}

.cookie-content a:hover {
    text-decoration: underline;
}

.cookie-btn {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
}

.cookie-btn:hover {
    background-color: #0056b3;
}

JavaScript (script.js):

document.addEventListener('DOMContentLoaded', function() {
    // Sprawdź, czy użytkownik wcześniej zaakceptował cookies
    if (!localStorage.getItem('cookiesAccepted')) {
        document.getElementById('cookieConsent').style.display = 'block';
    }

    // Po kliknięciu w "Akceptuję"
    document.getElementById('acceptCookies').addEventListener('click', function() {
        localStorage.setItem('cookiesAccepted', 'true');
        document.getElementById('cookieConsent').style.display = 'none';
    });
});

Opis działania:

HTML: Tworzy strukturę ramki informacyjnej, zawierającą komunikat o plikach cookies oraz przycisk akceptacji.
CSS: Definiuje wygląd ramki, aby była atrakcyjna i dobrze widoczna na stronie.
JavaScript: Odpowiada za wyświetlanie ramki, jeśli użytkownik wcześniej nie zaakceptował cookies, oraz za ukrywanie ramki po kliknięciu w przycisk „Akceptuję”. Informacja o akceptacji zostaje zapisana w localStorage, więc ramka nie będzie ponownie wyświetlana, chyba że użytkownik wyczyści dane przeglądarki.

Ten prosty kod można łatwo dostosować, dodając dodatkowe funkcje lub zmieniając styl ramki.