Skip to content

Administrator / chatgpt.ai-pro.org

Go to a project
Toggle navigation
Toggle navigation pinning
f00232ef by RSA
Options

UI

1 parent b4756f32
Inline Side-by-side
Showing 3 changed files with 121 additions and 57 deletions
client/src/App.css
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
9 .sidemenu { 9 .sidemenu {
10 width:260px; 10 width:260px;
11 padding:10px; 11 padding:10px;
12 background-color: #101827; 12 background-color: #202123;
13 } 13 }
14 /* under 640px do this */ 14 /* under 640px do this */
15 @media (max-width: 640px) { 15 @media (max-width: 640px) {
...@@ -20,18 +20,11 @@ ...@@ -20,18 +20,11 @@
20 20
21 .side-menu-button { 21 .side-menu-button {
22 padding:12px; 22 padding:12px;
23 border:1px solid white;
23 border-radius:5px; 24 border-radius:5px;
24 text-align: left; 25 text-align: left;
25 transition:ease 0.25s all; 26 transition:ease 0.25s all;
26 cursor:pointer; 27 cursor:pointer;
27 /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cedbe9+0,aac5de+17,6199c7+50,3a84c3+51,419ad6+59,4bb8f0+71,3a8bc2+84,26558b+100;Blue+Gloss */
28 background: rgb(206,219,233); /* Old browsers */
29 background: -moz-linear-gradient(-45deg, rgba(206,219,233,1) 0%, rgba(170,197,222,1) 17%, rgba(97,153,199,1) 50%, rgba(58,132,195,1) 51%, rgba(65,154,214,1) 59%, rgba(75,184,240,1) 71%, rgba(58,139,194,1) 84%, rgba(38,85,139,1) 100%); /* FF3.6-15 */
30 background: -webkit-linear-gradient(-45deg, rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%); /* Chrome10-25,Safari5.1-6 */
31 background: linear-gradient(135deg, rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
32 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedbe9', endColorstr='#26558b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
33 text-shadow: 1px 1px 0px black;
34 font-weight: 500;
35 } 28 }
36 .side-menu-button:hover { 29 .side-menu-button:hover {
37 background-color:rgba(255,255,255,0.1); 30 background-color:rgba(255,255,255,0.1);
...@@ -41,17 +34,10 @@ ...@@ -41,17 +34,10 @@
41 padding-right:12px; 34 padding-right:12px;
42 } 35 }
43 36
44 span.info {
45 text-align: left;
46 width: 100% !important;
47 display: block;
48 padding: 10px;
49 line-height: 1.5;
50 }
51 37
52 .chatbox { 38 .chatbox {
53 flex:1; 39 flex:1;
54 background-color:#ffffff; 40 background-color:#343541;
55 position:relative; 41 position:relative;
56 overflow-y:scroll; 42 overflow-y:scroll;
57 padding-bottom:95px; 43 padding-bottom:95px;
...@@ -69,22 +55,22 @@ span.info { ...@@ -69,22 +55,22 @@ span.info {
69 } 55 }
70 56
71 .chat-input-holder { 57 .chat-input-holder {
72 padding:15px; 58 padding:24px;
73 position:absolute; 59 position:absolute;
74 bottom:0; 60 bottom:0;
75 left:0;right:0; 61 left:0;right:0;
76 background: rgb(57 57 57); 62 background: rgb(57 57 57);
77 } 63 }
78 .chat-input-textarea { 64 .chat-input-textarea {
79 background-color: #dddddd; 65 background-color: #40414f;
80 width: 90%; 66 width: 90%;
81 padding: 12px; 67 padding: 12px;
82 border-radius: 5px; 68 border-radius: 5px;
83 color: #101827; 69 color: #ffffff;
84 font-size: 16px; 70 font-size: 1.25em;
85 border: none; 71 border: none;
86 outline: none; 72 outline: none;
87 box-shadow: 0px 7px 6px -6px black; 73 box-shadow: 0 0 8px 0 rgba(0,0,0,0.25);
88 } 74 }
89 75
90 .App-header { 76 .App-header {
...@@ -117,15 +103,15 @@ span.info { ...@@ -117,15 +103,15 @@ span.info {
117 margin-left:auto; 103 margin-left:auto;
118 margin-right:auto; 104 margin-right:auto;
119 display:flex; 105 display:flex;
120 padding: 20px 10px; 106 padding: 12px 24px;
121 } 107 }
122 108
123 section::-webkit-scrollbar { 109 section::-webkit-scrollbar {
124 display: none; 110 display: none;
125 } 111 }
126 .avatar { 112 .avatar {
127 background:#6BA447; 113 background:#ffffff;
128 border-radius:5px; 114 border-radius:50%;
129 width: 40px; 115 width: 40px;
130 height: 40px; 116 height: 40px;
131 display:flex; 117 display:flex;
...@@ -134,29 +120,19 @@ section::-webkit-scrollbar { ...@@ -134,29 +120,19 @@ section::-webkit-scrollbar {
134 padding:5px; 120 padding:5px;
135 font-size:14px; 121 font-size:14px;
136 color:#444654; 122 color:#444654;
137 box-shadow: 0px 5px 5px -3px black;
138 } 123 }
139 124
140 125
141 .avatar.chatgpt { 126 .avatar.chatgpt {
142 background:#667DF1; 127 background:#0da37f;
143 border-radius:5px; 128 border-radius:50%;
144 min-width: 40px; 129 min-width: 40px;
145 min-height: 40px; 130 min-height: 40px;
146 padding:5px; 131 padding:5px;
147 color:white; 132 color:white;
148 box-shadow: 0px 5px 5px -3px black;
149 } 133 }
150 .message { 134 .message {
151 padding: 7px 20px; 135 padding: 7px 20px;
152 line-height: 25px;
153 font-size: 14px;
154 font-family: "Poppins", "Karla", sans-serif;
155 color: #353b4f;
156 -moz-osx-font-smoothing: grayscale;
157 -webkit-font-smoothing: antialiased !important;
158 -moz-font-smoothing: antialiased !important;
159 text-rendering: optimizelegibility !important;
160 } 136 }
161 137
162 .chat-message.false { 138 .chat-message.false {
...@@ -173,20 +149,19 @@ section::-webkit-scrollbar { ...@@ -173,20 +149,19 @@ section::-webkit-scrollbar {
173 } 149 }
174 150
175 .select-models { 151 .select-models {
176 padding:5px 10px; 152 border: 1px solid white;
177 background: #4d4f54; 153 padding: 12px;
178 border-radius:5px; 154 border-radius:5px;
179 color: #5c6aa5; 155 color: white;
180 background: #ffffff; 156 background: transparent;
181 outline:none; 157 outline:none;
182 cursor:pointer; 158 cursor:pointer;
183 max-width:100%; 159 max-width:100%;
184 min-width:100%; 160 min-width:100%;
185 } 161 }
186 .select-models option { 162 .select-models option {
187 background: #2c374b; 163 background: black;
188 color: #ffffff; 164 color: #ffffff;
189 font-size: 12px;
190 } 165 }
191 166
192 .button-picker { 167 .button-picker {
...@@ -194,7 +169,7 @@ section::-webkit-scrollbar { ...@@ -194,7 +169,7 @@ section::-webkit-scrollbar {
194 padding:6px 12px ; 169 padding:6px 12px ;
195 border-radius:5px; 170 border-radius:5px;
196 color:white; 171 color:white;
197 background:#5c6aa5; 172 background:#444654;
198 margin-top:6px; 173 margin-top:6px;
199 cursor: pointer; 174 cursor: pointer;
200 } 175 }
...@@ -238,20 +213,7 @@ section::-webkit-scrollbar { ...@@ -238,20 +213,7 @@ section::-webkit-scrollbar {
238 color:white; 213 color:white;
239 border-radius:5px; 214 border-radius:5px;
240 cursor: pointer; 215 cursor: pointer;
241 /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b4ddb4+0,83c783+17,52b152+33,008a00+67,005700+83,002400+100;Green+3D+%231 */
242 background: rgb(180,221,180); /* Old browsers */
243 background: -moz-linear-gradient(-45deg, rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%); /* FF3.6-15 */
244 background: -webkit-linear-gradient(-45deg, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
245 background: linear-gradient(135deg, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
246 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#002400',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
247 box-shadow: 0 10px 12px -8px black;
248 } 216 }
249 .submit:hover { 217 .submit:hover {
250 background:#066d55; 218 background:#066d55;
251 } 219 }
252
253
254 .ai-logo-container {
255 text-align: center;
256 padding: 10px 0;
257 }
...\ No newline at end of file ...\ No newline at end of file
......
client/src/App.js
1 import './normal.css'; 1 import './normal.css';
2 import './App.css'; 2 import './App.css';
3 import './color_theme_1.css';
3 import { useState, useEffect } from 'react'; 4 import { useState, useEffect } from 'react';
4 import SideMenu from './SideMenu' 5 import SideMenu from './SideMenu'
5 import ChatBox from './ChatBox' 6 import ChatBox from './ChatBox'
......
client/src/color_theme_1.css 0 → 100644
1 .sidemenu {
2 background-color: #101827 !important;
3 }
4
5 .side-menu-button {
6 border:0 solid white;
7 /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cedbe9+0,aac5de+17,6199c7+50,3a84c3+51,419ad6+59,4bb8f0+71,3a8bc2+84,26558b+100;Blue+Gloss */
8 background: rgb(206,219,233); /* Old browsers */
9 background: -moz-linear-gradient(-45deg, rgba(206,219,233,1) 0%, rgba(170,197,222,1) 17%, rgba(97,153,199,1) 50%, rgba(58,132,195,1) 51%, rgba(65,154,214,1) 59%, rgba(75,184,240,1) 71%, rgba(58,139,194,1) 84%, rgba(38,85,139,1) 100%); /* FF3.6-15 */
10 background: -webkit-linear-gradient(-45deg, rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%); /* Chrome10-25,Safari5.1-6 */
11 background: linear-gradient(135deg, rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
12 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedbe9', endColorstr='#26558b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
13 text-shadow: 1px 1px 0px black;
14 font-weight: 500;
15 }
16
17 span.info {
18 text-align: left;
19 width: 100% !important;
20 display: block;
21 padding: 10px;
22 line-height: 1.5;
23 }
24
25 .chatbox {
26 background-color:#ffffff !important;
27 }
28
29 .chat-input-holder {
30 padding:15px !important;
31 background: rgb(57 57 57) !important;
32 }
33 .chat-input-textarea {
34 background-color: #dddddd !important;
35 color: #101827 !important;
36 font-size: 16px !important;
37 box-shadow: 0px 7px 6px -6px black !important;
38 }
39
40 .chat-message.chatgpt {
41 background-color:#ffffff !important;
42 }
43 .chat-message-center {
44 padding: 20px 10px !important;
45 }
46
47 .avatar {
48 background:#6BA447 !important;
49 border-radius:5px !important;
50 box-shadow: 0px 5px 5px -3px black !important;
51 }
52
53
54 .avatar.chatgpt {
55 background:#667DF1 !important;
56 border-radius:5px !important;
57 box-shadow: 0px 5px 5px -3px black !important;
58 }
59 .message {
60 padding: 7px 20px !important;
61 line-height: 25px;
62 font-size: 14px;
63 font-family: "Poppins", "Karla", sans-serif;
64 color: #353b4f;
65 -moz-osx-font-smoothing: grayscale;
66 -webkit-font-smoothing: antialiased !important;
67 -moz-font-smoothing: antialiased !important;
68 text-rendering: optimizelegibility !important;
69 }
70
71 .select-models {
72 padding:5px 10px !important;
73 background: #4d4f54 !important;
74 color: #5c6aa5 !important;
75 background: #ffffff !important;
76 border: 0 solid white;
77 }
78 .select-models option {
79 background: #2c374b !important;
80 color: #ffffff;
81 font-size: 12px;
82 }
83
84 .button-picker {
85 background:#5c6aa5 !important;
86 }
87
88 .submit {
89 /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b4ddb4+0,83c783+17,52b152+33,008a00+67,005700+83,002400+100;Green+3D+%231 */
90 background: rgb(180,221,180); /* Old browsers */
91 background: -moz-linear-gradient(-45deg, rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%); /* FF3.6-15 */
92 background: -webkit-linear-gradient(-45deg, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
93 background: linear-gradient(135deg, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
94 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#002400',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
95 box-shadow: 0 10px 12px -8px black;
96 }
97
98 .ai-logo-container {
99 text-align: center;
100 padding: 10px 0;
101 }
...\ No newline at end of file ...\ No newline at end of file
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!