summaryrefslogtreecommitdiffstats
path: root/chat/templates/room.html
diff options
context:
space:
mode:
Diffstat (limited to 'chat/templates/room.html')
-rw-r--r--chat/templates/room.html451
1 files changed, 451 insertions, 0 deletions
diff --git a/chat/templates/room.html b/chat/templates/room.html
new file mode 100644
index 0000000..de76f67
--- /dev/null
+++ b/chat/templates/room.html
@@ -0,0 +1,451 @@
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="utf-8"/>
5 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
6 <meta name="theme-color" content="#c9b8ff">
7 <title>{{ room_name }} — dreamchat</title>
8 <style>
9 :root {
10 --grad-start: #c9b8ff;
11 --grad-end: #f9b8e8;
12 --accent: #8b6cef;
13 --bubble-in-bg: #f0ebff;
14 --bubble-in-text: #2d2040;
15 --surface: #ffffff;
16 --text-main: #2d2040;
17 --text-muted: #8c7faa;
18 --radius-bubble: 18px;
19 --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
20 }
21
22 * { box-sizing: border-box; margin: 0; padding: 0; }
23
24 body {
25 height: 100dvh;
26 display: flex;
27 flex-direction: column;
28 background: linear-gradient(160deg, #ede7ff 0%, #fce4f6 100%);
29 font-family: var(--font);
30 overflow: hidden;
31 }
32
33 /* ---- Header ---- */
34 .room-header {
35 display: flex;
36 align-items: center;
37 gap: 12px;
38 padding: 10px 16px;
39 padding-top: calc(10px + env(safe-area-inset-top));
40 background: rgba(255, 255, 255, 0.75);
41 backdrop-filter: blur(12px);
42 -webkit-backdrop-filter: blur(12px);
43 border-bottom: 1px solid rgba(139, 108, 239, 0.12);
44 flex-shrink: 0;
45 }
46
47 .back-btn {
48 display: flex;
49 align-items: center;
50 justify-content: center;
51 width: 32px;
52 height: 32px;
53 border-radius: 50%;
54 color: var(--accent);
55 text-decoration: none;
56 font-size: 1.2rem;
57 font-weight: 600;
58 transition: background 0.15s;
59 flex-shrink: 0;
60 }
61
62 .back-btn:hover { background: #f0ebff; }
63
64 .header-center {
65 flex: 1;
66 min-width: 0;
67 display: flex;
68 flex-direction: column;
69 gap: 2px;
70 }
71
72 .room-title {
73 font-size: 1.05rem;
74 font-weight: 700;
75 background: linear-gradient(135deg, var(--accent), #e06aba);
76 -webkit-background-clip: text;
77 -webkit-text-fill-color: transparent;
78 background-clip: text;
79 white-space: nowrap;
80 overflow: hidden;
81 text-overflow: ellipsis;
82 }
83
84 .username-row { display: flex; align-items: center; }
85
86 .username-chip {
87 display: flex;
88 align-items: center;
89 gap: 4px;
90 background: none;
91 border: none;
92 padding: 0;
93 font-size: 0.78rem;
94 font-family: var(--font);
95 color: var(--text-muted);
96 cursor: pointer;
97 transition: color 0.15s;
98 }
99
100 .username-chip:hover { color: var(--accent); }
101 .edit-icon { font-size: 0.7rem; }
102
103 .username-edit {
104 font-size: 0.78rem;
105 font-family: var(--font);
106 color: var(--text-main);
107 border: none;
108 border-bottom: 1.5px solid var(--accent);
109 outline: none;
110 background: transparent;
111 width: 130px;
112 padding: 1px 2px;
113 }
114
115 .disconnect-btn {
116 display: flex;
117 align-items: center;
118 justify-content: center;
119 width: 32px;
120 height: 32px;
121 background: none;
122 border: 1.5px solid #d0c5f0;
123 color: var(--text-muted);
124 border-radius: 50%;
125 font-size: 0.85rem;
126 cursor: pointer;
127 flex-shrink: 0;
128 transition: background 0.15s, border-color 0.15s;
129 }
130
131 .disconnect-btn:hover { background: #f0ebff; border-color: var(--accent); }
132
133 /* ---- Message area ---- */
134 .chat-log {
135 flex: 1;
136 overflow-y: auto;
137 -webkit-overflow-scrolling: touch;
138 padding: 16px 12px;
139 display: flex;
140 flex-direction: column;
141 gap: 6px;
142 }
143
144 /* ---- Bubbles ---- */
145 .bubble-row {
146 display: flex;
147 width: 100%;
148 }
149
150 .bubble-row.sent { justify-content: flex-end; }
151 .bubble-row.recv { justify-content: flex-start; }
152
153 .bubble-wrapper {
154 display: flex;
155 flex-direction: column;
156 max-width: 72%;
157 gap: 3px;
158 }
159
160 .bubble-row.sent .bubble-wrapper { align-items: flex-end; }
161 .bubble-row.recv .bubble-wrapper { align-items: flex-start; }
162
163 .bubble {
164 padding: 10px 15px;
165 border-radius: var(--radius-bubble);
166 font-size: 0.97rem;
167 line-height: 1.45;
168 word-wrap: break-word;
169 animation: pop-in 0.15s ease-out;
170 }
171
172 .sent .bubble {
173 background: linear-gradient(135deg, var(--accent), #b06add);
174 color: #ffffff;
175 border-bottom-right-radius: 4px;
176 }
177
178 .recv .bubble {
179 background: var(--bubble-in-bg);
180 color: var(--bubble-in-text);
181 border-bottom-left-radius: 4px;
182 box-shadow: 0 2px 8px rgba(139, 108, 239, 0.1);
183 }
184
185 .bubble-sender {
186 font-size: 0.75rem;
187 font-weight: 600;
188 color: var(--accent);
189 padding: 0 4px;
190 }
191
192 .bubble-time {
193 font-size: 0.7rem;
194 color: var(--text-muted);
195 padding: 0 4px;
196 }
197
198 @keyframes pop-in {
199 from { opacity: 0; transform: scale(0.9) translateY(4px); }
200 to { opacity: 1; transform: scale(1) translateY(0); }
201 }
202
203 /* ---- Input bar ---- */
204 .input-bar {
205 display: flex;
206 align-items: center;
207 gap: 10px;
208 padding: 12px 16px;
209 padding-bottom: calc(12px + env(safe-area-inset-bottom));
210 background: rgba(255, 255, 255, 0.85);
211 backdrop-filter: blur(12px);
212 -webkit-backdrop-filter: blur(12px);
213 border-top: 1px solid rgba(139, 108, 239, 0.12);
214 flex-shrink: 0;
215 }
216
217 .input-bar input {
218 flex: 1;
219 min-width: 0;
220 border: 2px solid #e8e0ff;
221 border-radius: 50px;
222 padding: 11px 18px;
223 font-size: 1rem;
224 font-family: var(--font);
225 color: var(--text-main);
226 background: #fff;
227 outline: none;
228 transition: border-color 0.2s;
229 }
230
231 .input-bar input:focus { border-color: var(--accent); }
232 .input-bar input::placeholder { color: var(--text-muted); }
233
234 .send-btn {
235 display: flex;
236 align-items: center;
237 justify-content: center;
238 width: 44px;
239 height: 44px;
240 background: linear-gradient(135deg, var(--accent), #b06add);
241 color: #fff;
242 border: none;
243 border-radius: 50%;
244 font-size: 1rem;
245 cursor: pointer;
246 flex-shrink: 0;