chat.html

<!DOCTYPE html>
<html lang="en" class="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#0078d4">
    <title>AI Chat - The Colorless Wonder</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="windows11.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <style>
        :root {
            --win11-bg: rgba(243, 243, 243, 0.85);
            --win11-bg-dark: rgba(32, 32, 32, 0.85);
            --win11-acrylic: rgba(243, 243, 243, 0.75);
            --win11-acrylic-dark: rgba(32, 32, 32, 0.75);
            --win11-border: rgba(0, 0, 0, 0.08);
            --win11-border-dark: rgba(255, 255, 255, 0.08);
            --win11-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
            --win11-shadow-dark: 0 8px 32px rgba(0, 0, 0, 0.3);
            --win11-radius: 8px;
            --win11-radius-lg: 12px;
            --win11-text: #1b1b1b;
            --win11-text-secondary: #6b6b6b;
            --win11-primary: #0078d4;
            --win11-primary-hover: #1a86d9;
            --win11-primary-dark: #60cdff;
        }

        .dark {
            --win11-bg: rgba(32, 32, 32, 0.85);
            --win11-acrylic: rgba(32, 32, 32, 0.75);
            --win11-border: rgba(255, 255, 255, 0.08);
            --win11-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            --win11-text: #ffffff;
            --win11-text-secondary: #a0a0a0;
            --win11-primary: #60cdff;
            --win11-primary-hover: #8ad4ff;
        }

        body {
            font-family: 'Segoe UI', 'Segoe UI Variable', -apple-system, BlinkMacSystemFont, sans-serif;
            background: linear-gradient(135deg, 
                rgba(0, 120, 212, 0.08) 0%,
                rgba(0, 120, 212, 0.04) 50%,
                rgba(0, 120, 212, 0.08) 100%);
            min-height: 100vh;
            backdrop-filter: blur(30px) saturate(125%);
            -webkit-backdrop-filter: blur(30px) saturate(125%);
        }

        .dark body {
            background: linear-gradient(135deg, 
                rgba(0, 120, 212, 0.12) 0%,
                rgba(0, 120, 212, 0.06) 50%,
                rgba(0, 120, 212, 0.12) 100%);
        }

        .win11-window {
            background: var(--win11-acrylic);
            backdrop-filter: blur(40px) saturate(150%);
            -webkit-backdrop-filter: blur(40px) saturate(150%);
            border: 1px solid var(--win11-border);
            box-shadow: var(--win11-shadow);
            border-radius: var(--win11-radius-lg);
        }

        .win11-button {
            background: rgba(0, 0, 0, 0.04);
            border: 1px solid var(--win11-border);
            border-radius: var(--win11-radius);
            transition: all 0.15s ease;
        }

        .win11-button:hover {
            background: rgba(0, 0, 0, 0.08);
        }

        .dark .win11-button {
            background: rgba(255, 255, 255, 0.04);
        }

        .dark .win11-button:hover {
            background: rgba(255, 255, 255, 0.08);
        }

        .win11-input {
            background: rgba(0, 0, 0, 0.04);
            border: 1px solid var(--win11-border);
            border-radius: var(--win11-radius);
            transition: all 0.2s ease;
        }

        .win11-input:focus {
            background: rgba(0, 0, 0, 0.06);
            border-color: var(--win11-primary);
            box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.2);
            outline: none;
        }

        .dark .win11-input {
            background: rgba(255, 255, 255, 0.04);
        }

        .dark .win11-input:focus {
            background: rgba(255, 255, 255, 0.06);
        }

        .win11-link {
            color: var(--win11-primary);
            text-decoration: none;
            border-radius: 4px;
            padding: 2px 4px;
            margin: -2px -4px;
            transition: background 0.15s ease;
        }

        .win11-link:hover {
            background: rgba(0, 120, 212, 0.1);
            text-decoration: underline;
        }

        .win11-card {
            background: var(--win11-acrylic);
            backdrop-filter: blur(30px) saturate(125%);
            -webkit-backdrop-filter: blur(30px) saturate(125%);
            border: 1px solid var(--win11-border);
            border-radius: var(--win11-radius-lg);
        }

        /* Windows 11 Title Bar */
        .win11-titlebar {
            height: 32px;
            display: flex;
            align-items: center;
            padding: 0 12px;
            border-bottom: 1px solid var(--win11-border);
            user-select: none;
        }

        .win11-titlebar-drag {
            flex: 1;
            height: 100%;
            -webkit-app-region: drag;
        }

        /* Smooth animations */
        * {
            transition-property: background-color, border-color, color, fill, stroke;
            transition-timing-function: ease;
            transition-duration: 150ms;
        }

        /* Scrollbar styling */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, 0.3);
        }

        .dark ::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.2);
        }

        .dark ::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        /* Theme toggle button */
        .theme-toggle {
            position: fixed;
            top: 16px;
            right: 16px;
            z-index: 1000;
        }

        @media (max-width: 640px) {
            .theme-toggle {
                top: 8px;
                right: 8px;
            }
        }
    </style>
</head>
<body class="light">
    <!-- Theme Toggle Button -->
    <button class="theme-toggle win11-button p-2" onclick="toggleTheme()" title="Toggle Theme">
        <i data-feather="sun" class="w-5 h-5 text-yellow-500 dark:hidden"></i>
        <i data-feather="moon" class="w-5 h-5 text-yellow-300 hidden dark:block"></i>
    </button>

    <ai-chat></ai-chat>
    
    <div class="win11-card mx-auto mt-6 p-4 text-center max-w-md" style="margin-left: auto; margin-right: auto; margin-top: 24px;">
        <a href="tools.html" class="win11-link">Explore Development Tools & SDKs</a>
        <div class="mt-3">
            <a href="index.html" class="win11-link">
                <i data-feather="arrow-left" class="w-4 h-4 inline mr-1"></i>
                Back to Home
            </a>
        </div>
    </div>
    
    <script src="components/ai-chat.js"></script>
    <script>
        // Initialize Feather icons
        document.addEventListener('DOMContentLoaded', function() {
            if (typeof feather !== 'undefined') {
                feather.replace();
            }
        });

        // Theme toggle functionality
        function toggleTheme() {
            const html = document.documentElement;
            const isDark = html.classList.contains('dark');
            
            if (isDark) {
                html.classList.remove('dark');
                html.classList.add('light');
                localStorage.setItem('theme', 'light');
            } else {
                html.classList.remove('light');
                html.classList.add('dark');
                localStorage.setItem('theme', 'dark');
            }
            
            // Re-initialize feather icons for theme change
            if (typeof feather !== 'undefined') {
                feather.replace();
            }
            
            // Dispatch custom event for components
            window.dispatchEvent(new CustomEvent('themechange', { 
                detail: { theme: isDark ? 'light' : 'dark' }
            }));
        }

        // Check system preference
        function initTheme() {
            const saved = localStorage.getItem('theme');
            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
            
            if (saved) {
                document.documentElement.classList.remove('light', 'dark');
                document.documentElement.classList.add(saved);
            } else if (prefersDark) {
                document.documentElement.classList.remove('light', 'dark');
                document.documentElement.classList.add('dark');
            }
            
            if (typeof feather !== 'undefined') {
                feather.replace();
            }
        }

        // Initialize theme on load
        initTheme();

        // Listen for system theme changes
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
            if (!localStorage.getItem('theme')) {
                document.documentElement.classList.remove('light', 'dark');
                document.documentElement.classList.add(e.matches ? 'dark' : 'light');
            }
        });
    </script>
</body>
</html>