gpt4free

公开

关注 0 Fork 0 Star 1

返回提交历史

XFEstudio/gpt4free

Add dark mode config, slide system prompt

3703e720

Heiner Lohaus <hlohaus@users.noreply.github.com>

提交于 2024-05-19 03:13

父提交 4bab600

代码差异

3 个文件 +50 -118

Modified g4f/gui/client/index.html +9 -1

@@ -92,6 +92,11 @@

92 92 <div class="settings hidden">

93 93 <div class="paper">

94 94 <h3>Settings</h3>

95 <div class="field">

96 <span class="label">Enable Dark Mode</span>

97 <input type="checkbox" id="darkMode" checked />

98 <label for="darkMode" class="toogle" title=""></label>

99 </div>

95 100 <div class="field">

96 101 <span class="label">Web Access with DuckDuckGo</span>

97 102 <input type="checkbox" id="switch" />

@@ -169,8 +174,11 @@

169 174 </div>

170 175 </div>

171 176 <div class="conversation">

172 <textarea id="systemPrompt" class="box" placeholder="System prompt"></textarea>

177 <textarea id="systemPrompt" class="box" placeholder="System prompt"></textarea>

173 178 <div id="messages" class="box"></div>

179 <button class="slide-systemPrompt">

180 <i class="fa-solid fa-angles-up"></i>

181 </button>

174 182 <div class="toolbar">

175 183 <div id="input-count" class="">

176 184 <button class="hide-input">

Modified g4f/gui/client/static/css/style.css +18 -117

@@ -55,6 +55,7 @@

55 55 --colour-6: #242424;

56 56

57 57 --accent: #8b3dff;

58 --gradient: var(--accent);

58 59 --blur-bg: #16101b66;

59 60 --blur-border: #84719040;

60 61 --user-input: #ac87bb;

@@ -168,7 +169,7 @@ body {

168 169 z-index: -1;

169 170 border-radius: calc(0.5 * var(--size));

170 171 background-color: var(--accent);

171 background: radial-gradient(circle at center, var(--accent), var(--accent));

172 background: radial-gradient(circle at center, var(--gradient), var(--gradient));

172 173 width: 70vw;

173 174 height: 70vw;

174 175 top: 50%;

@@ -378,6 +379,7 @@ body {

378 379 z-index: 1000;

379 380 display: none;

380 381 cursor: pointer;

382 filter: grayscale(1) invert(1);

381 383 }

382 384

383 385 .message .count .fa-clipboard,

@@ -687,8 +689,14 @@ select {

687 689 resize: vertical;

688 690 }

689 691

690 #systemPrompt {

691 padding-left: 35px;

692 .slide-systemPrompt {

693 position: absolute;

694 top: 0;

695 padding: var(--inner-gap) 10px;

696 border: none;

697 background: transparent;

698 cursor: pointer;

699 height: 49px;

692 700 }

693 701

694 702 @media only screen and (min-width: 40em) {

@@ -781,7 +789,7 @@ select {

781 789 }

782 790

783 791 50% {

784 background: white;

792 background: var(--colour-3);

785 793 }

786 794

787 795 100% {

@@ -988,120 +996,13 @@ a:-webkit-any-link {

988 996 width: 1px;

989 997 }

990 998

991 .color-picker>fieldset {

992 border: 0;

993 display: flex;

994 width: fit-content;

995 background: var(--colour-1);

996 margin-inline: auto;

997 border-radius: 8px;

998 -webkit-backdrop-filter: blur(20px);

999 backdrop-filter: blur(20px);

1000 cursor: pointer;

1001 background-color: var(--blur-bg);

1002 border: 1px solid var(--blur-border);

1003 color: var(--colour-3);

1004 display: block;

1005 position: relative;

1006 overflow: hidden;

1007 outline: none;

1008 padding: 6px 16px;

1009 }

1010

1011 .color-picker input[type="radio"]:checked {

1012 background-color: var(--radio-color);

1013 }

1014

1015 .color-picker input[type="radio"]#light {

1016 --radio-color: gray;

1017 }

1018

1019 .color-picker input[type="radio"]#pink {

1020 --radio-color: white;

1021 }

1022

1023 .color-picker input[type="radio"]#blue {

1024 --radio-color: blue;

1025 }

1026

1027 .color-picker input[type="radio"]#green {

1028 --radio-color: green;

1029 }

1030

1031 .color-picker input[type="radio"]#dark {

1032 --radio-color: #232323;

1033 }

1034

1035 .pink {

1036 --colour-1: #ffffff;

1037 --colour-2: #000000;

1038 --colour-3: #000000;

1039 --colour-4: #000000;

1040 --colour-5: #000000;

1041 --colour-6: #000000;

1042

1043 --accent: #ffffff;

1044 --blur-bg: #98989866;

1045 --blur-border: #00000040;

1046 --user-input: #000000;

1047 --conversations: #000000;

1048 }

1049

1050 .blue {

1051 --colour-1: hsl(209 50% 90%);

1052 --clr-card-bg: hsl(209 50% 100%);

1053 --colour-3: hsl(209 50% 15%);

1054 --conversations: hsl(209 50% 25%);

1055 }

1056

1057 .green {

1058 --colour-1: hsl(109 50% 90%);

1059 --clr-card-bg: hsl(109 50% 100%);

1060 --colour-3: hsl(109 50% 15%);

1061 --conversations: hsl(109 50% 25%);

1062 }

1063

1064 .dark {

1065 --colour-1: hsl(209 50% 10%);

1066 --clr-card-bg: hsl(209 50% 5%);

1067 --colour-3: hsl(209 50% 90%);

1068 --conversations: hsl(209 50% 80%);

1069 }

1070

1071 :root:has(#pink:checked) {

999 .white {

1000 --blur-bg: transparent;

1001 --accent: #007bff;

1002 --gradient: #ccc;

1003 --conversations: #0062cc;

1072 1004 --colour-1: #ffffff;

1073 --colour-2: #000000;

1074 --colour-3: #000000;

1075 --colour-4: #000000;

1076 --colour-5: #000000;

1077 --colour-6: #000000;

1078

1079 --accent: #ffffff;

1080 --blur-bg: #98989866;

1081 --blur-border: #00000040;

1082 --user-input: #000000;

1083 --conversations: #000000;

1084 }

1085

1086 :root:has(#blue:checked) {

1087 --colour-1: hsl(209 50% 90%);

1088 --clr-card-bg: hsl(209 50% 100%);

1089 --colour-3: hsl(209 50% 15%);

1090 --conversations: hsl(209 50% 25%);

1091 }

1092

1093 :root:has(#green:checked) {

1094 --colour-1: hsl(109 50% 90%);

1095 --clr-card-bg: hsl(109 50% 100%);

1096 --colour-3: hsl(109 50% 15%);

1097 --conversations: hsl(109 50% 25%);

1098 }

1099

1100 :root:has(#dark:checked) {

1101 --colour-1: hsl(209 50% 10%);

1102 --clr-card-bg: hsl(209 50% 5%);

1103 --colour-3: hsl(209 50% 90%);

1104 --conversations: hsl(209 50% 80%);

1005 --colour-3: #212529;

1105 1006 }

1106 1007

1107 1008 #send-button {

Modified g4f/gui/client/static/js/chat.v1.js +23 -0

@@ -1108,8 +1108,11 @@ async function on_api() {

1108 1108 await load_settings_storage()

1109 1109

1110 1110 const hide_systemPrompt = document.getElementById("hide-systemPrompt")

1111 const slide_systemPrompt_icon = document.querySelector(".slide-systemPrompt i");

1111 1112 if (hide_systemPrompt.checked) {

1112 1113 systemPrompt.classList.add("hidden");

1114 slide_systemPrompt_icon.classList.remove("fa-angles-up");

1115 slide_systemPrompt_icon.classList.add("fa-angles-down");

1113 1116 }

1114 1117 hide_systemPrompt.addEventListener('change', async (event) => {

1115 1118 if (event.target.checked) {

@@ -1118,6 +1121,13 @@ async function on_api() {

1118 1121 systemPrompt.classList.remove("hidden");

1119 1122 }

1120 1123 });

1124 document.querySelector(".slide-systemPrompt")?.addEventListener("click", () => {

1125 hide_systemPrompt.click();

1126 let checked = hide_systemPrompt.checked;

1127 systemPrompt.classList[checked ? "add": "remove"]("hidden");

1128 slide_systemPrompt_icon.classList[checked ? "remove": "add"]("fa-angles-up");

1129 slide_systemPrompt_icon.classList[checked ? "add": "remove"]("fa-angles-down");

1130 });

1121 1131 const messageInputHeight = document.getElementById("message-input-height");

1122 1132 if (messageInputHeight) {

1123 1133 if (messageInputHeight.value) {

@@ -1127,6 +1137,19 @@ async function on_api() {

1127 1137 messageInput.style.maxHeight = `${messageInputHeight.value}px`;

1128 1138 });

1129 1139 }

1140 const darkMode = document.getElementById("darkMode");

1141 if (darkMode) {

1142 if (!darkMode.checked) {

1143 document.body.classList.add("white");

1144 }

1145 darkMode.addEventListener('change', async (event) => {

1146 if (event.target.checked) {

1147 document.body.classList.remove("white");

1148 } else {

1149 document.body.classList.add("white");

1150 }

1151 });

1152 }

1130 1153 }

1131 1154

1132 1155 async function load_version() {