Add dark mode config, slide system prompt

This commit is contained in:
Heiner Lohaus 2024-05-19 03:13:54 +02:00
parent 4bab6009c1
commit 3703e72073
3 changed files with 50 additions and 118 deletions

View File

@ -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">

View File

@ -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 {
.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;
}
.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) {
--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 {

View File

@ -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() {