|
|
| <!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); |
| } |
| |
| |
| .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; |
| } |
| |
| |
| * { |
| transition-property: background-color, border-color, color, fill, stroke; |
| transition-timing-function: ease; |
| transition-duration: 150ms; |
| } |
| |
| |
| ::-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 { |
| position: fixed; |
| top: 16px; |
| right: 16px; |
| z-index: 1000; |
| } |
| |
| @media (max-width: 640px) { |
| .theme-toggle { |
| top: 8px; |
| right: 8px; |
| } |
| } |
| </style> |
| </head> |
| <body class="light"> |
| |
| <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> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| if (typeof feather !== 'undefined') { |
| feather.replace(); |
| } |
| }); |
| |
| |
| 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'); |
| } |
| |
| |
| if (typeof feather !== 'undefined') { |
| feather.replace(); |
| } |
| |
| |
| window.dispatchEvent(new CustomEvent('themechange', { |
| detail: { theme: isDark ? 'light' : 'dark' } |
| })); |
| } |
| |
| |
| 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(); |
| } |
| } |
| |
| |
| initTheme(); |
| |
| |
| 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> |
|
|
