Add files via upload

index.html

@@ -26,7 +26,7 @@
     <meta name="twitter:image" content="https://images.ctfassets.net/kftzwdyauwt9/2CPrXUZS0yLGo894hU24zv/b9e1759c6f213a8888e17852266c515b/apple-art-2a-3x4.jpg?w=640&amp;q=90&amp;fm=webp"/>
     <meta name="twitter:image:width" content="1600"/>
     <meta name="twitter:image:height" content="900"/>
-    <link rel="icon" href="favi.ico"/>
+    <link rel="icon" href="f.ico"/>
     <style>
         body {
             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
@@ -337,7 +337,17 @@ <h2>F\EXIBILITY-2O</h2>
             </div>
         </div>
     </div>
+    <style>
+        .dark-mode .message.user {
+            background-color: #444; /* Darker tone for user messages */
+        }
+
+        .dark-mode .message.model {
+            background-color: #333; /* Darker tone for model messages */
+        }
+    </style>
     <script>
+
         document.addEventListener('DOMContentLoaded', function () {
             var popup = document.getElementById('popup');
             var closeBtn = document.getElementById('close-btn');
@@ -353,6 +363,10 @@ <h2>F\EXIBILITY-2O</h2>
                 popup.style.display = 'none';
             });
         });
+
+
+
+
     </script>
     <div class="chat-container">
         <div class="sidebar">
@@ -380,7 +394,68 @@ <h3>Discover Me</h3>
 
                     </div>
                 </li>
+
+
+                <li class="chat-list-item" id="dark-mode-toggle">
+                    <div class="avatar">
+                        <img src="https://emojiisland.com/cdn/shop/products/Waxing_crescent_moon_emoji_icon_png_large.png?v=1571606089" alt="Avatar">
+                    </div>
+                    <div class="chat-info">
+                        <h3>Dark mode</h3>
+                    </div>
+                </li>
             </ul>
+            <script>
+                document.addEventListener('DOMContentLoaded', function () {
+                    var darkModeToggle = document.getElementById('dark-mode-toggle');
+
+                    darkModeToggle.addEventListener('click', function () {
+                        // Toggle dark mode classes
+                        document.body.classList.toggle('dark-mode');
+                        var chatContainer = document.querySelector('.chat-container');
+                        chatContainer.classList.toggle('dark-mode');
+                        var sidebar = document.querySelector('.sidebar');
+                        sidebar.classList.toggle('dark-mode');
+                        var chatWindow = document.querySelector('.chat-window');
+                        chatWindow.classList.toggle('dark-mode');
+                        var chatInputContainer = document.querySelector('.chat-input-container');
+                        chatInputContainer.classList.toggle('dark-mode');
+                        var chatInput = document.querySelector('.chat-input input');
+                        chatInput.classList.toggle('dark-mode');
+
+                        // Toggle message text color
+                        var messages = document.querySelectorAll('.message .text');
+                        messages.forEach(function(message) {
+                            message.classList.toggle('dark-mode-text');
+                        });
+
+                        // Toggle logo image
+                        var logo = document.querySelector('.logo');
+                        if (document.body.classList.contains('dark-mode')) {
+                            logo.src = 'logodark.png';
+                        } else {
+                            logo.src = 'logo.jpg'; // Change back to light mode logo
+                        }
+                    });
+                });
+
+
+
+            </script>
+            <style>
+                .dark-mode {
+                    background-color: #000;
+                    color: #fff;
+                }
+
+                .dark-mode .chat-window {
+                    background-color: #000;
+                }
+
+                .dark-mode .chat-input {
+                    background-color: #212121;
+                }
+            </style>
         </div>
         <div class="chat-window">
             <div class="chat-header">