Skip to content

Commit a38568a

Browse files
EvMossanEvMossan
committed
feat(ui): auto light/dark theme via prefers-color-scheme
1 parent 0f6a736 commit a38568a

File tree

1 file changed

+106
-163
lines changed

1 file changed

+106
-163
lines changed

‎templates/index.html‎

Lines changed: 106 additions & 163 deletions
Original file line numberDiff line numberDiff line change
@@ -6,204 +6,147 @@
66
<title>Waste Management Assistant</title>
77
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
88
<style>
9+
/* ──────────────────── CSS variables: light by default ─────────────────── */
10+
:root {
11+
/* neutrals */
12+
--bg-body: #f5f5f5;
13+
--bg-card: #ffffff;
14+
--bg-chat: #e0e0e0;
15+
--bg-user: #aae3c2;
16+
--bg-assistant: #F6F6F9;
17+
--border: #dddddd;
18+
--scroll-track: #f1f1f1;
19+
--scroll-thumb: #cccccc;
20+
21+
/* accent */
22+
--accent-pink: #EE125B;
23+
}
24+
25+
/* ──────────────────── automatic dark-mode palette ─────────────────────── */
26+
@media (prefers-color-scheme: dark) {
27+
:root {
28+
--bg-body: #18191b;
29+
--bg-card: #202124;
30+
--bg-chat: #26272a;
31+
--bg-user: #2d4b3a;
32+
--bg-assistant: #323438;
33+
--border: #3b3c3f;
34+
--scroll-track: #1e1f21;
35+
--scroll-thumb: #575a5d;
36+
--accent-pink: #ff2e7a;
37+
}
38+
}
39+
940
/* ─────────────── base / mobile styles ─────────────── */
1041

1142
html, body {
1243
height: 100%;
1344
margin: 0;
1445
font-family: Arial, sans-serif;
15-
background-color: #f5f5f5;
46+
background-color: var(--bg-body);
1647
overflow: hidden;
1748
}
1849

19-
.container {
20-
display: flex;
21-
flex-direction: column;
22-
height: 100vh;
23-
width: 100%;
24-
max-width: 100vw;
25-
margin: 0;
26-
box-sizing: border-box;
27-
background-color: #ffffff;
28-
border-radius: 10px;
29-
}
30-
31-
.chat-container {
32-
flex-grow: 1;
33-
overflow-y: auto;
34-
background-color: #e0e0e0;
35-
padding: 10px;
36-
box-sizing: border-box;
37-
margin-bottom: 70px; /* reserve space for input bar */
50+
.container{
51+
display:flex;
52+
flex-direction:column;
53+
height:100vh;
54+
width:100%;
55+
max-width:100vw;
56+
margin:0;
57+
box-sizing:border-box;
58+
background:var(--bg-card);
59+
border-radius:10px;
3860
}
3961

40-
.message {
41-
margin-bottom: 10px;
42-
padding: 10px 15px;
43-
background-color: white;
44-
border-radius: 10px;
45-
word-wrap: break-word;
46-
max-width: 80%;
47-
box-sizing: border-box;
48-
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
62+
.chat-container{
63+
flex-grow:1;
64+
overflow-y:auto;
65+
background:var(--bg-chat);
66+
padding:10px;
67+
box-sizing:border-box;
68+
margin-bottom:70px;/* reserve space for input bar */
4969
}
5070

51-
.user-message {
52-
background-color: #aae3c2;
53-
align-self: flex-end;
54-
margin-left: auto;
71+
.message{
72+
margin-bottom:10px;
73+
padding:10px 15px;
74+
border-radius:10px;
75+
word-wrap:break-word;
76+
max-width:80%;
77+
box-sizing:border-box;
78+
box-shadow:0 1px 3px rgba(0,0,0,0.1);
5579
}
5680

57-
.user-image {
58-
align-self: flex-end;
59-
margin-left: auto;
60-
max-width: 200px;
61-
border: 1px solid #ddd;
62-
border-radius: 10px;
63-
display: block;
64-
margin-top: 10px;
65-
margin-bottom: 10px;
66-
padding: 0;
67-
background-color: transparent;
68-
box-shadow: none;
69-
}
81+
.user-message {background:var(--bg-user); align-self:flex-end;margin-left:auto;}
82+
.assistant-message{background:var(--bg-assistant); align-self:flex-start;margin-right:auto;}
7083

71-
.assistant-message {
72-
background-color: #F6F6F9;
73-
align-self: flex-start;
74-
margin-right: auto;
84+
.user-image{
85+
align-self:flex-end;margin-left:auto;
86+
max-width:200px;border:1px solid var(--border);
87+
border-radius:10px;display:block;margin-top:10px;margin-bottom:10px;
88+
background:transparent;box-shadow:none;padding:0;
7589
}
7690

77-
.input-container {
78-
display: flex;
79-
align-items: flex-end;
80-
padding: 10px;
81-
background-color: #f5f5f5;
82-
border-top: 1px solid #ddd;
83-
box-sizing: border-box;
84-
position: sticky;
85-
bottom: 0;
86-
left: 0;
87-
right: 0;
88-
width: 100%;
91+
.input-container{
92+
display:flex;align-items:flex-end;padding:10px;
93+
background:var(--bg-body);border-top:1px solid var(--border);
94+
box-sizing:border-box;position:sticky;bottom:0;left:0;right:0;width:100%;
8995
}
9096

91-
.textarea-container {
92-
flex-grow: 1;
93-
margin-left: 10px;
94-
display: flex;
95-
flex-direction: column;
96-
}
97+
.textarea-container{flex-grow:1;margin-left:10px;display:flex;flex-direction:column;}
9798

98-
textarea {
99-
width: 100%;
100-
padding: 10px 10px;
101-
font-size: 16px;
102-
line-height: 17px;
103-
border-radius: 15px;
104-
border: 1px solid #ddd;
105-
background-color: #fff;
106-
resize: none;
107-
height: 40px;
108-
max-height: 150px;
109-
overflow-y: auto;
110-
box-sizing: border-box;
111-
overflow: hidden;
99+
textarea{
100+
width:100%;padding:10px 10px;font-size:16px;line-height:17px;
101+
border-radius:15px;border:1px solid var(--border);background:#fff;
102+
resize:none;height:40px;max-height:150px;overflow-y:auto;box-sizing:border-box;
112103
}
113104

114-
#imageInput { display: none; }
115-
116-
.icon-button,
117-
button#sendButton {
118-
margin-left: 10px;
119-
height: 40px;
120-
width: 40px;
121-
background-color: transparent;
122-
border: none;
123-
cursor: pointer;
124-
display: flex;
125-
justify-content: center;
126-
align-items: center;
127-
}
105+
#imageInput{display:none;}
128106

129-
.icon-button i { font-size: 30px; color: #EE125B; }
130-
button#sendButton i { font-size: 30px; color: #EE125B; }
131-
button#sendButton { color: white; }
132-
button#sendButton:disabled {
133-
background-color: transparent;
134-
cursor: not-allowed;
107+
.icon-button,button#sendButton{
108+
margin-left:10px;height:40px;width:40px;background:transparent;border:none;
109+
cursor:pointer;display:flex;justify-content:center;align-items:center;
135110
}
111+
.icon-button i,button#sendButton i{font-size:30px;color:var(--accent-pink);}
112+
button#sendButton:disabled{cursor:not-allowed;}
136113

137-
.chat-container::-webkit-scrollbar { width: 8px; }
138-
.chat-container::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 5px; }
139-
.chat-container::-webkit-scrollbar-track { background-color: #f1f1f1; }
140-
141-
.image-thumbnail {
142-
position: relative;
143-
width: 50px;
144-
height: 50px;
145-
border-radius: 5px;
146-
overflow: visible;
147-
border: 1px solid #ddd;
148-
flex-shrink: 0;
149-
margin-right: 10px;
150-
}
114+
.chat-container::-webkit-scrollbar{width:8px;}
115+
.chat-container::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:5px;}
116+
.chat-container::-webkit-scrollbar-track{background:var(--scroll-track);}
151117

152-
.image-thumbnail img {
153-
width: 100%;
154-
height: 100%;
155-
object-fit: cover;
118+
.image-thumbnail{
119+
position:relative;width:50px;height:50px;border-radius:5px;overflow:visible;
120+
border:1px solid var(--border);flex-shrink:0;margin-right:10px;
156121
}
157-
158-
.remove-thumbnail {
159-
position: absolute;
160-
top: -10px;
161-
right: -10px;
162-
background-color: #272A2B;
163-
color: white;
164-
border-radius: 50%;
165-
width: 25px;
166-
height: 25px;
167-
display: flex;
168-
justify-content: center;
169-
align-items: center;
170-
cursor: pointer;
171-
font-size: 14px;
122+
.image-thumbnail img{width:100%;height:100%;object-fit:cover;}
123+
.remove-thumbnail{
124+
position:absolute;top:-10px;right:-10px;background:#272A2B;color:#fff;
125+
border-radius:50%;width:25px;height:25px;display:flex;justify-content:center;
126+
align-items:center;cursor:pointer;font-size:14px;
172127
}
173128

174129
/* ─────────────── desktop-only tweaks (≥ 768 px) ─────────────── */
175130
@media (min-width:768px){
176-
/* centre the whole card */
177-
.container{
178-
max-width:900px;
179-
margin:0 auto;
180-
border:1px solid #ddd;
181-
}
182-
/* nicer chat panel */
183-
.chat-container{
184-
margin:20px;
185-
margin-bottom:90px; /* space for toolbar */
186-
border-radius:12px;
187-
background:#f0f0f0;
188-
box-shadow:0 2px 6px rgba(0,0,0,.06);
189-
}
190-
.message {max-width:60%;font-size:15px;}
191-
.user-image {max-width:250px;}
131+
.container{
132+
max-width:900px;margin:0 auto;border:1px solid var(--border);
133+
}
134+
.chat-container{
135+
margin:20px;margin-bottom:90px;border-radius:12px;
136+
background:var(--bg-chat);box-shadow:0 2px 6px rgba(0,0,0,.06);
137+
}
138+
.message {max-width:60%;font-size:15px;}
139+
.user-image{max-width:250px;}
192140

193-
/* keep toolbar inside the container */
194-
.input-container{
195-
position:static; /* drop sticky so it stays in the card */
196-
width:auto;
197-
margin:0 20px 20px;
198-
border:1px solid #ddd;
199-
border-radius:12px;
141+
.input-container{
142+
position:static;width:auto;margin:0 20px 20px;
143+
border:1px solid var(--border);border-radius:12px;
144+
}
145+
textarea{font-size:15px;padding:12px;}
146+
.icon-button i,#sendButton i{font-size:26px;}
200147
}
201-
202-
textarea {font-size:15px;padding:12px;}
203-
.icon-button i,
204-
#sendButton i {font-size:26px;}
205-
}
206148
</style>
149+
207150
</head>
208151
<body>
209152

0 commit comments

Comments
 (0)