summaryrefslogtreecommitdiffstats
path: root/g4f/gui/client
diff options
context:
space:
mode:
Diffstat (limited to 'g4f/gui/client')
-rw-r--r--g4f/gui/client/index.html10
-rw-r--r--g4f/gui/client/static/css/style.css135
-rw-r--r--g4f/gui/client/static/js/chat.v1.js23
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
@@ -93,6 +93,11 @@
<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" />
<label for="switch" class="toogle" title="Add the pages of the first 5 search results to the query."></label>
@@ -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() {
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-01 09:10:12 +0100