| |
|
| | <!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> |
| |
|
