demo

slava-vishnyakov · Aug 1, 2024 · 7f4269c · 7f4269c
1 parent 17bf029
commit 7f4269c
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 [![Run Tests](https://github.com/slava-vishnyakov/chatlet/actions/workflows/run-tests.yml/badge.svg)](https://github.com/slava-vishnyakov/chatlet/actions/workflows/run-tests.yml)
 
-![Chatlet Demo](docs/img.png)
+[![Chatlet Demo](docs/img.png)](https://slava-vishnyakov.github.io/chatlet/)
 
 Chatlet is a Python wrapper for the OpenRouter API, providing an easy-to-use interface for interacting with various AI models.
 Inspired by [Claudette](https://claudette.answer.ai/), which supports only Anthropic Claude.

diff --git a/docs/index.html b/docs/index.html
@@ -1,11 +1,16 @@
-
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Chatlet Demo</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        // Check if user prefers dark mode
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            document.documentElement.classList.add('dark');
+        }
+    </script>
     <style>
         .code-block {
             background-color: #1e1e1e;
@@ -23,10 +28,25 @@
         .python-string { color: #ce9178; }
         .python-function { color: #dcdcaa; }
         .python-comment { color: #6a9955; }
+
+        /* Dark mode styles */
+        .dark body {
+            background-color: #1a202c;
+            color: #e2e8f0;
+        }
+        .dark .bg-white {
+            background-color: #2d3748;
+        }
+        .dark .text-gray-800 {
+            color: #e2e8f0;
+        }
+        .dark .bg-gray-200 {
+            background-color: #4a5568;
+        }
     </style>
 </head>
-<body class="bg-gray-100 min-h-screen flex items-center justify-center p-4">
-    <div class="max-w-3xl w-full mx-auto p-6 bg-white rounded-lg shadow-lg">
+<body class="bg-gray-100 min-h-screen flex items-center justify-center p-0">
+    <div class="max-w-3xl w-full mx-auto p-6 bg-white shadow-lg">
         <h1 class="text-3xl font-bold mb-6 text-center text-gray-800">Chatlet Demo</h1>
         <div class="space-y-6">
             <!-- User message with code -->