<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Segoe+UI:wght@400;600&display=swap">
    <title>Fun-Fri AI</title>
<style>
    #user-info {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.1);
    padding: 10px 15px;
    border-radius: 24px;  /* Updated to match other elements */
    backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);  /* Added to match other elements */
    color: #ffffff;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 1000;
    max-width: 200px;
    word-wrap: break-word;
    white-space: normal;
}

    #datetime {
        opacity: 0.8;
        white-space: normal;
        word-wrap: break-word;
        line-height: 1.4;
    }

    #user-login {
        font-weight: 600;
        white-space: normal;
        word-wrap: break-word;
        line-height: 1.4;
    }

    body {
        font-family: 'Segoe UI', Arial, sans-serif;
        margin: 0;
        background-color: #000000;
        color: #ffffff;
        display: flex;
        flex-direction: column;
        height: 100vh;
        overflow: hidden;
        position: relative;
    }

    #chat-wrapper {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
        width: 100%;
        box-sizing: border-box;
        z-index: 2;
        position: relative;
    }

    #chat-container {
        flex: 1;
        width: 75%;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        padding: 20px;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(20px) saturate(150%);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 24px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        scrollbar-width: thin;
        scrollbar-color: #555555 transparent;
        box-sizing: border-box;
    }

    #input-container {
        display: flex;
        align-items: flex-start;
        width: 75%;
        margin-top: 10px;
        max-height: 50vh;
        gap: 12px;
        overflow: visible;
        box-sizing: border-box;
        padding: 0 20px;
    }

    #user-input-container {
    display: flex;
    flex: 1;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px) saturate(150%);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

    #user-input {
        flex: 1;
        width: calc(100% - 20px);
        min-height: 24px;
        max-height: none;
        border: none;
        background: transparent;
        color: #ffffff;
        font-size: 1rem;
        outline: none;
        padding: 8px 10px;
        margin: 0;
        line-height: 24px;
        caret-color: #ffffff;
        white-space: pre-wrap;
        overflow-wrap: break-word;
        word-break: break-word;
        overflow-y: auto;
    }

    #send-button {
        width: 40px;
        height: 40px;
        border: none;
        border-radius: 50%;
        background-color: #ffffff;
        color: #000000;
        font-size: 1.8rem;
        font-weight: 900;
        cursor: pointer;
        transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        padding: 0;
        line-height: 1;
        text-align: center;
    }

    #send-button:hover {
        background-color: #f5f5f5;
        box-shadow: 0 4px 10px rgba(255, 255, 255, 0.3);
        transform: scale(1.05);
    }

    #send-button::before {
        content: "→";
        display: block;
        margin-top: -2px;
    }

    .user-message,
    .ai-message {
        opacity: 0;
        transform: translateY(10px);
        animation: fadeInMessage 0.5s forwards ease-in-out;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .user-message {
        align-items: flex-end;
        align-self: flex-end;
    }

    .ai-message {
        align-items: flex-start;
        align-self: flex-start;
    }

    .message-label {
        font-size: 0.9rem;
        opacity: 0.8;
        margin-bottom: 4px;
    }

    .message-content {
        margin-left: 16px;
    }

    @keyframes fadeInMessage {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    #three-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
</style>
</head>
<body>
    <div id="user-info">
        <div id="datetime">Current Date and Time (Local): 2025-01-12 17:38:03</div>
    </div>

    <div id="chat-wrapper">
        <div id="chat-container"></div>
        <div id="input-container">
            <div id="user-input-container">
                <div id="user-input" contenteditable="true" role="textbox" aria-multiline="true"></div>
            </div>
            <button id="send-button" aria-label="Send message"></button>
        </div>
    </div>

    <div id="three-background"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        // Three.js background setup
        function hexToRGB(hex) {
            const bigint = parseInt(hex.slice(1), 16);
            const r = (bigint >> 16) & 255;
            const g = (bigint >> 8) & 255;
            const b = bigint & 255;
            return { r: r / 255, g: g / 255, b: b / 255 };
        }

        let particleColors = ["#FFFFFF"];
        let particleCount = 1000;
        let scene = new THREE.Scene();
        let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        let renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.getElementById("three-background").appendChild(renderer.domElement);

        let particles = new THREE.BufferGeometry();
        let positions = new Float32Array(particleCount * 3);
        let colors = new Float32Array(particleCount * 3);

        for (let i = 0; i < particleCount; i++) {
            positions[i * 3] = (Math.random() * 2 - 1) * 500;
            positions[i * 3 + 1] = (Math.random() * 2 - 1) * 500;
            positions[i * 3 + 2] = (Math.random() * 2 - 1) * 500;

            const randomColor = particleColors[Math.floor(Math.random() * particleColors.length)];
            const { r, g, b } = hexToRGB(randomColor);

            colors[i * 3] = r;
            colors[i * 3 + 1] = g;
            colors[i * 3 + 2] = b;
        }

        particles.setAttribute('position', new THREE.BufferAttribute(positions, 3));
        particles.setAttribute('color', new THREE.BufferAttribute(colors, 3));

        const particleMaterial = new THREE.PointsMaterial({ size: 3, vertexColors: true });
        const particleSystem = new THREE.Points(particles, particleMaterial);
        scene.add(particleSystem);

        camera.position.z = 500;

        function animateParticles() {
            requestAnimationFrame(animateParticles);
            particleSystem.rotation.x += 0.001;
            particleSystem.rotation.y += 0.001;
            renderer.render(scene, camera);
        }

        animateParticles();

        function toggleParticleColors() {
            const colors = particleSystem.geometry.attributes.color.array;
            for (let i = 0; i < particleCount; i++) {
                const randomColor = particleColors[Math.floor(Math.random() * particleColors.length)];
                const { r, g, b } = hexToRGB(randomColor);

                colors[i * 3] = r;
                colors[i * 3 + 1] = g;
                colors[i * 3 + 2] = b;
            }
            particleSystem.geometry.attributes.color.needsUpdate = true;
        }

        // Chat functionality
        const apiKey = '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';
        const chatContainer = document.getElementById('chat-container');
        const userInput = document.getElementById('user-input');
        const sendButton = document.getElementById('send-button');

        function updateDateTime() {
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            
            const dateTimeString = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            document.getElementById('datetime').textContent = `Current Date and Time (Local): ${dateTimeString}`;
        }

        setInterval(updateDateTime, 1000);
        updateDateTime();

        function addUserMessage(message) {
            const userMessage = document.createElement('div');
            userMessage.className = 'user-message';
            
            const label = document.createElement('div');
            label.className = 'message-label';
            label.textContent = 'You:';
            
            const content = document.createElement('div');
            content.className = 'message-content';
            content.textContent = message;
            
            userMessage.appendChild(label);
            userMessage.appendChild(content);
            chatContainer.appendChild(userMessage);
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }

        function addAIMessage(message) {
            const aiMessage = document.createElement('div');
            aiMessage.className = 'ai-message';
            
            const label = document.createElement('div');
            label.className = 'message-label';
            label.textContent = 'AI:';
            
            const content = document.createElement('div');
            content.className = 'message-content';
            content.innerHTML = message;
            
            aiMessage.appendChild(label);
            aiMessage.appendChild(content);
            chatContainer.appendChild(aiMessage);
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }

        async function sendMessage() {
            const message = userInput.innerText.trim();
            if (!message) return;

            addUserMessage(message);
            userInput.innerText = '';
            
            try {
                const response = await fetch('https://api.groq.com/openai/v1/chat/completions', {
                    method: 'POST',
                    headers: {
                        Authorization: `Bearer ${apiKey}`,
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        model: 'gemma2-9b-it',
                        messages: [{ role: 'user', content: message }],
                        temperature: 0.9,
                        max_tokens: 200,
                    }),
                });

                if (!response.ok) throw new Error('Error communicating with AI');

                const data = await response.json();
                const aiResponse = data.choices[0].message.content;
                addAIMessage(aiResponse);
            } catch (err) {
                console.error(err);
                addAIMessage("Sorry, I encountered an error while processing your request.");
            }
        }

        // Event listeners
        userInput.addEventListener('keydown', (e) => {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                sendMessage();
            }
        });

        sendButton.addEventListener('click', sendMessage);

        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });

        // Initial AI greeting
        document.addEventListener('DOMContentLoaded', () => {
            addAIMessage("Hello! How can I help you? 😃");
        });
    </script>
</body>
</html>