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