A sleek and modern UI for a futuristic AI chat application

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NeoChat AI</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Orbitron', sans-serif;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
        }
        .chat-container {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        .message {
            background: rgba(255, 255, 255, 0.1);
            border-left: 4px solid #00ff9d;
        }
        .user-message {
            border-left-color: #00a8ff;
        }
        .input-area {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
    </style>
</head>
<body class="h-screen flex flex-col text-white">
    <header class="bg-gray-900 p-4">
        <h1 class="text-3xl font-bold text-center text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-green-400">NeoChat AI</h1>
    </header>
    
    <main class="flex-grow p-4 overflow-hidden">
        <div class="chat-container h-full rounded-lg p-4 overflow-y-auto space-y-4">
            <div class="message p-3 rounded-lg">
                <p class="text-sm">Welcome to NeoChat AI. How may I assist you today?</p>
            </div>
            <div class="message user-message p-3 rounded-lg">
                <p class="text-sm">Can you explain quantum computing?</p>
            </div>
            <div class="message p-3 rounded-lg">
                <p class="text-sm">Certainly! Quantum computing harnesses the principles of quantum mechanics to process information. Unlike classical bits, quantum bits or 'qubits' can exist in multiple states simultaneously, enabling complex calculations at unprecedented speeds.</p>
            </div>
        </div>
    </main>
    
    <footer class="bg-gray-900 p-4">
        <div class="input-area flex items-center rounded-full p-2">
            <input type="text" placeholder="Type your message..." class="flex-grow bg-transparent outline-none px-4">
            <button class="bg-blue-500 text-white rounded-full p-2 hover:bg-blue-600 transition duration-300">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
                </svg>
            </button>
        </div>
    </footer>

    <script>
        // Add some futuristic flair with a simple animation
        document.addEventListener('DOMContentLoaded', () => {
            const messages = document.querySelectorAll('.message');
            messages.forEach((msg, index) => {
                setTimeout(() => {
                    msg.style.opacity = '0';
                    msg.style.transform = 'translateY(20px)';
                    msg.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                    setTimeout(() => {
                        msg.style.opacity = '1';
                        msg.style.transform = 'translateY(0)';
                    }, 100);
                }, index * 300);
            });
        });
    </script>
</body>
</html>

SPARKS

FuturisticAIChatApp