summaryrefslogtreecommitdiffstats
path: root/chat/templates
diff options
context:
space:
mode:
authorGravatar Tom van der Lee <tom@vanderlee.io>2026-06-09 22:53:50 +0200
committerGravatar Tom van der Lee <tom@vanderlee.io>2026-06-09 22:53:50 +0200
commita188df3ae359ab770aac85d19d23739286ef6d41 (patch)
tree0cebfd11277f437eea01fa64cda07da56c2cf7ab /chat/templates
downloadwebsocket-chat-a188df3ae359ab770aac85d19d23739286ef6d41.tar.gz
websocket-chat-a188df3ae359ab770aac85d19d23739286ef6d41.tar.bz2
websocket-chat-a188df3ae359ab770aac85d19d23739286ef6d41.zip
Initial commitmain
Diffstat (limited to 'chat/templates')
-rw-r--r--chat/templates/chat.html136
-rw-r--r--chat/templates/room.html451
2 files changed, 587 insertions, 0 deletions
diff --git a/chat/templates/chat.html b/chat/templates/chat.html
new file mode 100644
index 0000000..8542368
--- /dev/null
+++ b/chat/templates/chat.html
@@ -0,0 +1,136 @@
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>dreamchat</title>
8 <style>
9 :root {
10 --grad-start: #c9b8ff;
11 --grad-end: #f9b8e8;
12 --accent: #8b6cef;
13 --surface: #ffffff;
14 --text-main: #2d2040;
15 --text-muted: #8c7faa;
16 --radius-card: 24px;
17 --shadow: 0 8px 32px rgba(139, 108, 239, 0.18);
18 --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
19 }
20
21 * { box-sizing: border-box; margin: 0; padding: 0; }
22
23 body {
24 min-height: 100dvh;
25 background: linear-gradient(135deg, var(--grad-start), var(--grad-end));
26 display: flex;
27 align-items: center;
28 justify-content: center;
29 font-family: var(--font);
30 padding: 24px;
31 }
32
33 .card {
34 background: var(--surface);
35 border-radius: var(--radius-card);
36 box-shadow: var(--shadow);
37 padding: 40px 32px;
38 width: 100%;
39 max-width: 400px;
40 text-align: center;
41 }
42
43 .logo {
44 font-size: 3rem;
45 margin-bottom: 12px;
46 line-height: 1;
47 }
48
49 .title {
50 font-size: 2rem;
51 font-weight: 700;
52 background: linear-gradient(135deg, var(--accent), #e06aba);
53 -webkit-background-clip: text;
54 -webkit-text-fill-color: transparent;
55 background-clip: text;
56 margin-bottom: 8px;
57 }
58
59 .subtitle {
60 color: var(--text-muted);
61 margin-bottom: 28px;
62 font-size: 0.95rem;
63 }
64
65 .input-row {
66 display: flex;
67 gap: 10px;
68 }
69
70 .input-row input {
71 flex: 1;
72 min-width: 0;
73 border: 2px solid #e8e0ff;
74 border-radius: 50px;
75 padding: 12px 18px;
76 font-size: 1rem;
77 font-family: var(--font);
78 color: var(--text-main);
79 outline: none;
80 transition: border-color 0.2s;
81 }
82
83 .input-row input:focus {
84 border-color: var(--accent);
85 }
86
87 .input-row input::placeholder {
88 color: var(--text-muted);
89 }
90
91 .input-row button {
92 background: linear-gradient(135deg, var(--accent), #b06add);
93 color: #fff;
94 border: none;
95 border-radius: 50px;
96 padding: 12px 22px;
97 font-size: 1rem;
98 font-weight: 600;
99 font-family: var(--font);
100 cursor: pointer;
101 white-space: nowrap;
102 transition: opacity 0.15s, transform 0.1s;
103 }
104
105 .input-row button:hover { opacity: 0.9; }
106 .input-row button:active { transform: scale(0.96); }
107 </style>
108</head>
109<body>
110 <div class="card">
111 <div class="logo">💬</div>
112 <h1 class="title">dreamchat</h1>
113 <p class="subtitle">Where do you want to go?</p>
114 <div class="input-row">
115 <input id="room-name-input" type="text" placeholder="Room name"
116 aria-label="Room name"
117 autocomplete="off" autocapitalize="off" spellcheck="false">
118 <button id="room-name-submit">Enter</button>
119 </div>
120 </div>
121
122 <script>
123 document.querySelector('#room-name-input').focus();
124 document.querySelector('#room-name-input').onkeyup = function(event) {
125 if (event.key === 'Enter') {
126 document.querySelector('#room-name-submit').click();
127 }
128 };
129
130 document.querySelector('#room-name-submit').onclick = function() {
131 const roomName = document.querySelector('#room-name-input').value;
132 window.location.pathname = '/' + roomName + '/';
133 };
134 </script>
135</body>
136</html>
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