 <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f9f9f9;
            color: #333;
        }
        .cookie-output {
            background-color: #e8e8e8;
            padding: 10px;
            border-radius: 5px;
            margin-top: 10px;
            white-space: pre-wrap;
        }
        button {
            margin: 5px;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
    <script>
        async function fetchUserIP() {
            try {
                const response = await fetch('https://api.ipify.org?format=json');
                const data = await response.json();
                return data.ip;
            } catch (error) {
                console.error('Fehler beim Abrufen der IP-Adresse:', error);
                return 'Unbekannt';
            }
        }

        async function setCookie(name, value, days) {
            const ip = await fetchUserIP();
            const creationDate = new Date().toISOString();
            const fullValue = JSON.stringify({ value, ip, creationDate });
            const date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            const expires = "expires=" + date.toUTCString();
            document.cookie = name + "=" + encodeURIComponent(fullValue) + "; " + expires + "; path=/";
            updateCookieDisplay();
        }

        function getCookie(name) {
            const nameEQ = name + "=";
            const cookies = document.cookie.split(';');
            for (let cookie of cookies) {
                while (cookie.charAt(0) === ' ') {
                    cookie = cookie.substring(1);
                }
                if (cookie.indexOf(nameEQ) === 0) {
                    return decodeURIComponent(cookie.substring(nameEQ.length, cookie.length));
                }
            }
            return null;
        }

        function deleteCookie(name) {
            setCookie(name, "", -1);
        }

        function updateCookieDisplay() {
            const cookieOutput = document.getElementById('cookie-output');
            const cookies = document.cookie.split(';');
            if (cookies.length === 1 && cookies[0] === "") {
                cookieOutput.textContent = "Keine Cookies gesetzt.";
                return;
            }
            cookieOutput.innerHTML = cookies.map(cookie => {
                const [name, value] = cookie.split('=');
                try {
                    const { value: storedValue, ip, creationDate } = JSON.parse(decodeURIComponent(value));
                    return `Name: ${name.trim()}\nWert: ${storedValue}\nIP: ${ip}\nErstellt am: ${new Date(creationDate).toLocaleString()}\n`;
                } catch (e) {
                    return `Name: ${name.trim()}\nWert: ${decodeURIComponent(value)}`;
                }
            }).join('\n\n');
        }

        document.addEventListener('DOMContentLoaded', () => {
            updateCookieDisplay();

            document.getElementById('set-cookie-btn').addEventListener('click', () => {
                const name = document.getElementById('cookie-name').value;
                const value = document.getElementById('cookie-value').value;
                const days = parseInt(document.getElementById('cookie-days').value, 10) || 0;
                setCookie(name, value, days);
            });

            document.getElementById('delete-cookie-btn').addEventListener('click', () => {
                const name = document.getElementById('cookie-name').value;
                deleteCookie(name);
            });
        });
    </script>
</head>
<body>
    <h1>Cookie-Demonstration</h1>
    <p>Mit diesem Tool kannst du Cookies setzen, anzeigen und löschen, um ihre Funktionsweise zu verstehen.</p>

    <div>
        <label for="cookie-name">Cookie-Name:</label>
        <input type="text" id="cookie-name" placeholder="Benutzername">
    </div>
    <div>
        <label for="cookie-value">Cookie-Wert:</label>
        <input type="text" id="cookie-value" placeholder="Marcel">
    </div>
    <div>
        <label for="cookie-days">Gültigkeit (in Tagen):</label>
        <input type="number" id="cookie-days" placeholder="7">
    </div>

    <button id="set-cookie-btn">Cookie setzen</button>
    <button id="delete-cookie-btn">Cookie löschen</button>

    <h2>Aktuelle Cookies:</h2>
    <div id="cookie-output" class="cookie-output"></div>
</body>