From 3703e72073f17faf200545202d9f68f768857951 Mon Sep 17 00:00:00 2001
From: Heiner Lohaus <hlohaus@users.noreply.github.com>
Date: Sun, 19 May 2024 03:13:54 +0200
Subject: [PATCH] Add dark mode config, slide system prompt

---
 g4f/gui/client/index.html           |  10 ++-
 g4f/gui/client/static/css/style.css | 135 ++++------------------------
 g4f/gui/client/static/js/chat.v1.js |  23 +++++
 3 files changed, 50 insertions(+), 118 deletions(-)

diff --git a/g4f/gui/client/index.html b/g4f/gui/client/index.html
index d3cddd3c..3c428f38 100644
--- a/g4f/gui/client/index.html
+++ b/g4f/gui/client/index.html
@@ -92,6 +92,11 @@
         <div class="settings hidden">
             <div class="paper">
             <h3>Settings</h3>
+            <div class="field">
+                <span class="label">Enable Dark Mode</span>
+                <input type="checkbox" id="darkMode" checked />
+                <label for="darkMode" class="toogle" title=""></label>
+            </div>
             <div class="field">
                 <span class="label">Web Access with DuckDuckGo</span>
                 <input type="checkbox" id="switch" />
@@ -169,8 +174,11 @@
             </div>
         </div>
         <div class="conversation">
-            <textarea id="systemPrompt" class="box" placeholder="System prompt"></textarea>    
+            <textarea id="systemPrompt" class="box" placeholder="System prompt"></textarea>
             <div id="messages" class="box"></div>
+            <button class="slide-systemPrompt">
+                <i class="fa-solid fa-angles-up"></i>
+            </button>
             <div class="toolbar">
                 <div id="input-count" class="">
                     <button class="hide-input">
diff --git a/g4f/gui/client/static/css/style.css b/g4f/gui/client/static/css/style.css
index 005cb8bf..c07eb930 100644
--- a/g4f/gui/client/static/css/style.css
+++ b/g4f/gui/client/static/css/style.css
@@ -55,6 +55,7 @@
     --colour-6: #242424;
 
     --accent: #8b3dff;
+    --gradient: var(--accent);
     --blur-bg: #16101b66;
     --blur-border: #84719040;
     --user-input: #ac87bb;
@@ -168,7 +169,7 @@ body {
     z-index: -1;
     border-radius: calc(0.5 * var(--size));
     background-color: var(--accent);
-    background: radial-gradient(circle at center, var(--accent), var(--accent));
+    background: radial-gradient(circle at center, var(--gradient), var(--gradient));
     width: 70vw;
     height: 70vw;
     top: 50%;
@@ -378,6 +379,7 @@ body {
     z-index: 1000;
     display: none;
     cursor: pointer;
+    filter: grayscale(1) invert(1);
 }
 
 .message .count .fa-clipboard,
@@ -687,8 +689,14 @@ select {
     resize: vertical;
 }
 
-#systemPrompt {
-    padding-left: 35px;
+.slide-systemPrompt {
+    position: absolute;
+    top: 0;
+    padding: var(--inner-gap) 10px;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    height: 49px;
 }
 
 @media only screen and (min-width: 40em) {
@@ -781,7 +789,7 @@ select {
     }
 
     50% {
-        background: white;
+        background: var(--colour-3);
     }
 
     100% {
@@ -988,120 +996,13 @@ a:-webkit-any-link {
     width: 1px;
 }
 
-.color-picker>fieldset {
-    border: 0;
-    display: flex;
-    width: fit-content;
-    background: var(--colour-1);
-    margin-inline: auto;
-    border-radius: 8px;
-    -webkit-backdrop-filter: blur(20px);
-    backdrop-filter: blur(20px);
-    cursor: pointer;
-    background-color: var(--blur-bg);
-    border: 1px solid var(--blur-border);
-    color: var(--colour-3);
-    display: block;
-    position: relative;
-    overflow: hidden;
-    outline: none;
-    padding: 6px 16px;
-}
-
-.color-picker input[type="radio"]:checked {
-    background-color: var(--radio-color);
-}
-
-.color-picker input[type="radio"]#light {
-    --radio-color: gray;
-}
-
-.color-picker input[type="radio"]#pink {
-    --radio-color: white;
-}
-
-.color-picker input[type="radio"]#blue {
-    --radio-color: blue;
-}
-
-.color-picker input[type="radio"]#green {
-    --radio-color: green;
-}
-
-.color-picker input[type="radio"]#dark {
-    --radio-color: #232323;
-}
-
-.pink {
-    --colour-1: #ffffff;
-    --colour-2: #000000;
-    --colour-3: #000000;
-    --colour-4: #000000;
-    --colour-5: #000000;
-    --colour-6: #000000;
-
-    --accent: #ffffff;
-    --blur-bg: #98989866;
-    --blur-border: #00000040;
-    --user-input: #000000;
-    --conversations: #000000;
-}
-
-.blue {
-    --colour-1: hsl(209 50% 90%);
-    --clr-card-bg: hsl(209 50% 100%);
-    --colour-3: hsl(209 50% 15%);
-    --conversations: hsl(209 50% 25%);
-}
-
-.green {
-    --colour-1: hsl(109 50% 90%);
-    --clr-card-bg: hsl(109 50% 100%);
-    --colour-3: hsl(109 50% 15%);
-    --conversations: hsl(109 50% 25%);
-}
-
-.dark {
-    --colour-1: hsl(209 50% 10%);
-    --clr-card-bg: hsl(209 50% 5%);
-    --colour-3: hsl(209 50% 90%);
-    --conversations: hsl(209 50% 80%);
-}
-
-:root:has(#pink:checked) {
+.white {
+    --blur-bg: transparent;
+    --accent: #007bff;
+    --gradient: #ccc;
+    --conversations: #0062cc;
     --colour-1: #ffffff;
-    --colour-2: #000000;
-    --colour-3: #000000;
-    --colour-4: #000000;
-    --colour-5: #000000;
-    --colour-6: #000000;
-
-    --accent: #ffffff;
-    --blur-bg: #98989866;
-    --blur-border: #00000040;
-    --user-input: #000000;
-    --conversations: #000000;
-}
-
-:root:has(#blue:checked) {
-    --colour-1: hsl(209 50% 90%);
-    --clr-card-bg: hsl(209 50% 100%);
-    --colour-3: hsl(209 50% 15%);
-    --conversations: hsl(209 50% 25%);
-}
-
-:root:has(#green:checked) {
-    --colour-1: hsl(109 50% 90%);
-    --clr-card-bg: hsl(109 50% 100%);
-    --colour-3: hsl(109 50% 15%);
-    --conversations: hsl(109 50% 25%);
-}
-
-:root:has(#dark:checked) {
-    --colour-1: hsl(209 50% 10%);
-    --clr-card-bg: hsl(209 50% 5%);
-    --colour-3: hsl(209 50% 90%);
-    --conversations: hsl(209 50% 80%);
+    --colour-3: #212529;
 }
 
 #send-button {
diff --git a/g4f/gui/client/static/js/chat.v1.js b/g4f/gui/client/static/js/chat.v1.js
index 1d0b0dce..47bfdd3b 100644
--- a/g4f/gui/client/static/js/chat.v1.js
+++ b/g4f/gui/client/static/js/chat.v1.js
@@ -1108,8 +1108,11 @@ async function on_api() {
     await load_settings_storage()
 
     const hide_systemPrompt = document.getElementById("hide-systemPrompt")
+    const slide_systemPrompt_icon = document.querySelector(".slide-systemPrompt i");
     if (hide_systemPrompt.checked) {
         systemPrompt.classList.add("hidden");
+        slide_systemPrompt_icon.classList.remove("fa-angles-up");
+        slide_systemPrompt_icon.classList.add("fa-angles-down");
     }
     hide_systemPrompt.addEventListener('change', async (event) => {
         if (event.target.checked) {
@@ -1118,6 +1121,13 @@ async function on_api() {
             systemPrompt.classList.remove("hidden");
         }
     });
+    document.querySelector(".slide-systemPrompt")?.addEventListener("click", () => {
+        hide_systemPrompt.click();
+        let checked = hide_systemPrompt.checked;
+        systemPrompt.classList[checked ? "add": "remove"]("hidden");
+        slide_systemPrompt_icon.classList[checked ? "remove": "add"]("fa-angles-up");
+        slide_systemPrompt_icon.classList[checked ? "add": "remove"]("fa-angles-down");
+    });
     const messageInputHeight = document.getElementById("message-input-height");
     if (messageInputHeight) {
         if (messageInputHeight.value) {
@@ -1127,6 +1137,19 @@ async function on_api() {
             messageInput.style.maxHeight = `${messageInputHeight.value}px`;
         });
     }
+    const darkMode = document.getElementById("darkMode");
+    if (darkMode) {
+        if (!darkMode.checked) {
+            document.body.classList.add("white");
+        }
+        darkMode.addEventListener('change', async (event) => {
+            if (event.target.checked) {
+                document.body.classList.remove("white");
+            } else {
+                document.body.classList.add("white");
+            }
+        });
+    }
 }
 
 async function load_version() {