Skip to content

Commit 96e88cf

Browse files
EvMossanEvMossan
committed
Add PC browser UI tweaks
1 parent 4c12ec3 commit 96e88cf

File tree

1 file changed

+176
-169
lines changed

1 file changed

+176
-169
lines changed

‎templates/index.html‎

Lines changed: 176 additions & 169 deletions
Original file line numberDiff line numberDiff line change
@@ -6,198 +6,205 @@
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-
html, body {
10-
height: 100%;
11-
margin: 0;
12-
font-family: Arial, sans-serif;
13-
background-color: #f5f5f5;
14-
overflow: hidden; /* Prevent overflow issues */
15-
}
16-
17-
.container {
18-
display: flex;
19-
flex-direction: column;
20-
height: 100vh; /* Full viewport height */
21-
width: 100%;
22-
max-width: 100vw;
23-
margin: 0;
24-
box-sizing: border-box;
25-
background-color: #ffffff;
26-
border-radius: 10px;
27-
}
9+
/* ─────────────── base / mobile styles ─────────────── */
10+
11+
html, body {
12+
height: 100%;
13+
margin: 0;
14+
font-family: Arial, sans-serif;
15+
background-color: #f5f5f5;
16+
overflow: hidden;
17+
}
2818

29-
.chat-container {
30-
flex-grow: 1;
31-
overflow-y: auto;
32-
background-color: #e0e0e0;
33-
padding: 10px;
34-
box-sizing: border-box;
35-
margin-bottom: 70px; /* Add margin to account for input container height */
36-
}
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+
}
3730

38-
.message {
39-
margin-bottom: 10px;
40-
padding: 10px 15px;
41-
background-color: white;
42-
border-radius: 10px;
43-
word-wrap: break-word;
44-
max-width: 80%;
45-
box-sizing: border-box;
46-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
47-
}
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 */
38+
}
4839

49-
.user-message {
50-
background-color: #aae3c2;
51-
align-self: flex-end;
52-
margin-left: auto;
53-
}
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);
49+
}
5450

55-
.user-image {
56-
align-self: flex-end; /* Align the image to the right */
57-
margin-left: auto;
58-
max-width: 200px;
59-
border: 1px solid #ddd;
60-
border-radius: 10px;
61-
display: block;
62-
margin-top: 10px;
63-
margin-bottom: 10px;
64-
padding: 0; /* No padding */
65-
background-color: transparent; /* No background color */
66-
box-shadow: none; /* Remove any shadow */
67-
}
51+
.user-message {
52+
background-color: #aae3c2;
53+
align-self: flex-end;
54+
margin-left: auto;
55+
}
6856

69-
.assistant-message {
70-
background-color: #F6F6F9;
71-
align-self: flex-start;
72-
margin-right: auto;
73-
}
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+
}
7470

75-
.input-container {
76-
display: flex;
77-
align-items: flex-end;
78-
padding: 10px;
79-
background-color: #f5f5f5;
80-
border-top: 1px solid #ddd;
81-
box-sizing: border-box;
82-
position: sticky; /* Change from fixed to sticky */
83-
bottom: 0;
84-
left: 0;
85-
right: 0;
86-
width: 100%; /* Full width */
87-
}
71+
.assistant-message {
72+
background-color: #F6F6F9;
73+
align-self: flex-start;
74+
margin-right: auto;
75+
}
8876

89-
.textarea-container {
90-
flex-grow: 1;
91-
margin-left: 10px;
92-
display: flex;
93-
flex-direction: column;
94-
}
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%;
89+
}
9590

96-
textarea {
97-
width: 100%;
98-
padding: 10px 10px;
99-
font-size: 16px;
100-
line-height: 17px;
101-
border-radius: 15px;
102-
border: 1px solid #ddd;
103-
background-color: #fff;
104-
resize: none;
105-
height: 40px; /* Set initial height */
106-
max-height: 150px;
107-
overflow-y: auto;
108-
box-sizing: border-box;
109-
overflow: hidden; /* Prevent scrolling until necessary */
110-
}
91+
.textarea-container {
92+
flex-grow: 1;
93+
margin-left: 10px;
94+
display: flex;
95+
flex-direction: column;
96+
}
11197

112-
#imageInput {
113-
display: none;
114-
}
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;
112+
}
115113

116-
.icon-button, button#sendButton {
117-
margin-left: 10px;
118-
height: 40px;
119-
width: 40px;
120-
background-color: transparent;
121-
border: none;
122-
cursor: pointer;
123-
display: flex;
124-
justify-content: center;
125-
align-items: center;
126-
}
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+
}
127128

128-
.icon-button i {
129-
font-size: 30px;
130-
color: #EE125B;
131-
}
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;
135+
}
132136

133-
button#sendButton {
134-
/* margin-left: 5px; */
135-
height: 40px;
136-
width: 40px;
137-
background-color: transparent; /* Make the background transparent */
138-
color: white;
139-
border: none;
140-
cursor: pointer;
141-
display: flex;
142-
justify-content: center;
143-
align-items: center;
144-
}
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+
}
145151

146-
button#sendButton i {
147-
font-size: 30px; /* Adjust the size of the icon */
148-
color: #EE125B; /* Keep the same arrow color */
149-
}
152+
.image-thumbnail img {
153+
width: 100%;
154+
height: 100%;
155+
object-fit: cover;
156+
}
150157

151-
button#sendButton:disabled {
152-
background-color: transparent; /* Ensure it's still transparent when disabled */
153-
cursor: not-allowed;
154-
}
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;
172+
}
155173

156-
.chat-container::-webkit-scrollbar {
157-
width: 8px;
174+
/* ─────────────── desktop-only tweaks (≥ 768 px) ─────────────── */
175+
@media (min-width: 768px) {
176+
/* centre the app and keep it narrower */
177+
.container {
178+
max-width: 900px; /* adjust to taste */
179+
margin: 0 auto;
180+
border: 1px solid #ddd;
158181
}
159182

160-
.chat-container::-webkit-scrollbar-thumb {
161-
background-color: #ccc;
162-
border-radius: 5px;
183+
/* softer background + shadow for the chat panel */
184+
.chat-container {
185+
margin: 20px;
186+
margin-bottom: 90px; /* space for input bar */
187+
border-radius: 12px;
188+
background-color: #f0f0f0;
189+
box-shadow: 0 2px 6px rgba(0,0,0,0.06);
163190
}
164191

165-
.chat-container::-webkit-scrollbar-track {
166-
background-color: #f1f1f1;
167-
}
192+
/* messages don’t stretch full width on large screens */
193+
.message { max-width: 60%; font-size: 15px; }
194+
.user-image { max-width: 250px; }
168195

169-
.image-thumbnail {
170-
position: relative;
171-
width: 50px;
172-
height: 50px;
173-
border-radius: 5px;
174-
overflow: visible;
196+
/* input bar lifted and centred */
197+
.input-container {
198+
margin: 0 20px 20px;
199+
border-radius: 12px;
175200
border: 1px solid #ddd;
176-
flex-shrink: 0;
177-
margin-right: 10px;
178-
}
179-
180-
.image-thumbnail img {
181-
width: 100%;
182-
height: 100%;
183-
object-fit: cover;
184201
}
185202

186-
.remove-thumbnail {
187-
position: absolute;
188-
top: -10px; /* Adjust the position higher */
189-
right: -10px; /* Adjust to the right */
190-
background-color: #272A2B;
191-
color: white;
192-
border-radius: 50%;
193-
width: 25px; /* Keep button size */
194-
height: 25px;
195-
display: flex;
196-
justify-content: center;
197-
align-items: center;
198-
cursor: pointer;
199-
font-size: 14px; /* Keep font size */
200-
}
203+
/* comfortable textarea / icon sizing */
204+
textarea { font-size: 15px; padding: 12px 12px; }
205+
.icon-button i,
206+
button#sendButton i { font-size: 26px; }
207+
}
201208
</style>
202209
</head>
203210
<body>

0 commit comments

Comments
 (0)