Spaces:

Mrdips
/

undefined

Running

App Files Files Community

Mrdips commited on 3 days ago

Commit

c8d5835

verified ·

1 Parent(s): cf9ada6

привет проведи оптимизацию и иинтеграцию с видовс 11

Browse files

Files changed (1) hide show

chat.html +267 -6

chat.html CHANGED Viewed

@@ -1,22 +1,283 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI Chat - The Colorless Wonder</title>
     <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
 </head>
-<body>
     <ai-chat></ai-chat>
-    <div class="card mt-4 text-center">
-        <a href="tools.html" class="text-blue-500 hover:underline">Explore Development Tools & SDKs</a>
-        <div class="mt-2">
-            <a href="index.html" class="text-blue-500 hover:underline">&larr; Back to Home</a>
         </div>
     </div>
     <script src="components/ai-chat.js"></script>
 </body>
 </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>