Bc-AI commited on
Commit
921d65f
·
verified ·
1 Parent(s): 1e208ec

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +630 -19
index.html CHANGED
@@ -1,19 +1,630 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" data-theme="dark">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Project Prism</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
9
+ <style>
10
+ /* ============ TOKENS ============ */
11
+ :root{
12
+ --bg:#05060a;
13
+ --bg-2:#0b0d15;
14
+ --text:#f2f3f7;
15
+ --text-2:#a8adbf;
16
+ --text-3:#6b7186;
17
+ --glass:rgba(255,255,255,.06);
18
+ --glass-2:rgba(255,255,255,.10);
19
+ --glass-border:rgba(255,255,255,.12);
20
+ --glass-border-2:rgba(255,255,255,.22);
21
+ --accent:#8b7cff;
22
+ --accent-2:#5ee7ff;
23
+ --accent-3:#ff6ad5;
24
+ --shadow:0 20px 60px rgba(0,0,0,.55);
25
+ --ease:cubic-bezier(.4,0,.2,1);
26
+ --spring:cubic-bezier(.34,1.56,.64,1);
27
+ }
28
+ [data-theme="light"]{
29
+ --bg:#eef0f7;
30
+ --bg-2:#e2e5f0;
31
+ --text:#101322;
32
+ --text-2:#4a4f63;
33
+ --text-3:#8a8fa3;
34
+ --glass:rgba(255,255,255,.55);
35
+ --glass-2:rgba(255,255,255,.75);
36
+ --glass-border:rgba(0,0,0,.08);
37
+ --glass-border-2:rgba(0,0,0,.16);
38
+ --shadow:0 20px 60px rgba(30,40,90,.15);
39
+ }
40
+
41
+ *{box-sizing:border-box;margin:0;padding:0}
42
+ html,body{height:100%}
43
+ body{
44
+ font-family:'Inter',system-ui,sans-serif;
45
+ background:var(--bg);
46
+ color:var(--text);
47
+ overflow:hidden;
48
+ transition:background .5s var(--ease),color .5s var(--ease);
49
+ -webkit-font-smoothing:antialiased;
50
+ }
51
+ button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
52
+
53
+ /* ambient background blobs */
54
+ .ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:0;transition:opacity 1.2s var(--ease)}
55
+ .ambient.on{opacity:1}
56
+ .blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.35;animation:drift 22s ease-in-out infinite alternate}
57
+ .blob.a{width:55vw;height:55vw;background:var(--accent);top:-20%;left:-15%}
58
+ .blob.b{width:45vw;height:45vw;background:var(--accent-2);bottom:-20%;right:-10%;animation-delay:-8s}
59
+ .blob.c{width:35vw;height:35vw;background:var(--accent-3);top:40%;left:45%;animation-delay:-14s;opacity:.2}
60
+ [data-theme="light"] .blob{opacity:.25}
61
+ @keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(6vw,-5vh) scale(1.15)}}
62
+
63
+ /* glass utility */
64
+ .glass{
65
+ background:var(--glass);
66
+ border:1px solid var(--glass-border);
67
+ backdrop-filter:blur(28px) saturate(160%);
68
+ -webkit-backdrop-filter:blur(28px) saturate(160%);
69
+ box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
70
+ }
71
+
72
+ /* ============ SCREENS ============ */
73
+ .screen{position:fixed;inset:0;z-index:1;display:none;opacity:0;transition:opacity .6s var(--ease)}
74
+ .screen.active{display:flex}
75
+ .screen.show{opacity:1}
76
+
77
+ /* ---- Splash ---- */
78
+ #splash{align-items:center;justify-content:center;background:#000;z-index:50;
79
+ transition:transform .9s cubic-bezier(.7,0,.3,1),opacity .6s}
80
+ #splash.slide-up{transform:translateY(-100%)}
81
+ .splash-title{
82
+ font-weight:800;font-size:clamp(40px,7vw,96px);letter-spacing:-.03em;text-align:center;line-height:1.05;
83
+ animation:titleIn 1.1s var(--ease) both;
84
+ }
85
+ .splash-title small{display:block;font-size:.28em;font-weight:400;letter-spacing:.35em;text-transform:uppercase;color:var(--text-3);margin-bottom:.4em}
86
+ .splash-title .prism{
87
+ background:linear-gradient(90deg,#ff6ad5,#8b7cff,#5ee7ff,#8b7cff,#ff6ad5);
88
+ background-size:300% 100%;
89
+ -webkit-background-clip:text;background-clip:text;color:transparent;
90
+ animation:shimmer 3s linear infinite;
91
+ }
92
+ @keyframes titleIn{from{opacity:0;transform:translateY(20px) scale(.97);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
93
+ @keyframes shimmer{to{background-position:300% 0}}
94
+
95
+ /* ---- Auth ---- */
96
+ #auth{align-items:center;justify-content:center;padding:24px}
97
+ .auth-card{
98
+ width:min(520px,100%);padding:56px 44px;border-radius:28px;text-align:center;
99
+ transform:translateY(20px);opacity:0;transition:all .9s var(--ease)
100
+ }
101
+ #auth.show .auth-card{transform:none;opacity:1}
102
+ .auth-card h1{font-size:30px;font-weight:700;letter-spacing:-.02em;margin-bottom:12px}
103
+ .auth-card p{color:var(--text-2);line-height:1.6;font-size:15px;margin-bottom:36px}
104
+ .auth-card p code{background:var(--glass-2);padding:2px 8px;border-radius:6px;font-family:ui-monospace,monospace;font-size:13px;color:var(--text)}
105
+ .btn-hf{
106
+ display:inline-flex;align-items:center;gap:12px;padding:14px 26px;border-radius:14px;font-weight:600;font-size:15px;
107
+ background:linear-gradient(135deg,#ffd21e,#ff9d00);color:#1a1200;
108
+ box-shadow:0 10px 30px rgba(255,180,0,.25);transition:transform .25s var(--spring),box-shadow .25s
109
+ }
110
+ .btn-hf:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 16px 40px rgba(255,180,0,.35)}
111
+ .btn-hf:active{transform:scale(.98)}
112
+
113
+ /* ---- Dashboard ---- */
114
+ #dash{flex-direction:column;align-items:center;padding:0 40px 40px}
115
+ .prism-stage{position:relative;height:38vh;min-height:220px;width:100%;display:flex;align-items:center;justify-content:center;flex:none}
116
+ .prism-stage svg{height:100%;max-height:300px;overflow:visible}
117
+ .beam-in{stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-dasharray:260;stroke-dashoffset:260;animation:beam 1.2s .3s var(--ease) forwards;filter:drop-shadow(0 0 6px #fff)}
118
+ .beam-out{stroke-width:3;stroke-linecap:round;stroke-dasharray:300;stroke-dashoffset:300;opacity:.95;animation:beam 1.1s var(--ease) forwards}
119
+ .beam-out:nth-child(1){animation-delay:1.25s}
120
+ .beam-out:nth-child(2){animation-delay:1.32s}
121
+ .beam-out:nth-child(3){animation-delay:1.39s}
122
+ .beam-out:nth-child(4){animation-delay:1.46s}
123
+ .beam-out:nth-child(5){animation-delay:1.53s}
124
+ .beam-out:nth-child(6){animation-delay:1.6s}
125
+ @keyframes beam{to{stroke-dashoffset:0}}
126
+ .prism-body{fill:url(#prismFill);stroke:rgba(255,255,255,.5);stroke-width:1.5;opacity:0;animation:fadeIn .8s .1s forwards}
127
+ .prism-glow{opacity:0;animation:fadeIn 1s 1.3s forwards}
128
+ @keyframes fadeIn{to{opacity:1}}
129
+
130
+ .dash-content{width:min(1180px,100%);opacity:0;transform:translateY(24px);transition:all .9s .1s var(--ease)}
131
+ #dash.reveal .dash-content{opacity:1;transform:none}
132
+ .dash-head{text-align:center;margin-bottom:36px}
133
+ .dash-head h1{font-size:clamp(30px,4vw,48px);font-weight:800;letter-spacing:-.03em}
134
+ .dash-head h1 span{background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
135
+ .dash-head p{color:var(--text-2);margin-top:8px}
136
+ .dash-grid{display:grid;grid-template-columns:1.3fr 1fr .9fr;gap:20px}
137
+ @media (max-width:900px){.dash-grid{grid-template-columns:1fr}}
138
+ .card{border-radius:24px;padding:26px;transition:transform .35s var(--ease),border-color .35s}
139
+ .card:hover{transform:translateY(-3px);border-color:var(--glass-border-2)}
140
+ .card h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);font-weight:600;margin-bottom:18px}
141
+ .news-item{padding:14px 0;border-top:1px solid var(--glass-border);display:flex;gap:14px;align-items:flex-start}
142
+ .news-item:first-of-type{border-top:0;padding-top:0}
143
+ .news-dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:none;background:var(--accent)}
144
+ .news-item:nth-child(3) .news-dot{background:var(--accent-2)}
145
+ .news-item:nth-child(4) .news-dot{background:var(--accent-3)}
146
+ .news-item b{display:block;font-weight:600;font-size:15px;margin-bottom:3px}
147
+ .news-item span{color:var(--text-2);font-size:13.5px;line-height:1.5}
148
+ .news-item time{margin-left:auto;font-size:12px;color:var(--text-3);white-space:nowrap}
149
+
150
+ .enter-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:20px}
151
+ .enter-card p{color:var(--text-2);font-size:14.5px;max-width:260px;line-height:1.5}
152
+ .enter-card h2{font-size:24px;font-weight:700;letter-spacing:-.02em}
153
+ .btn-enter{
154
+ display:flex;align-items:center;gap:12px;padding:16px 28px;border-radius:999px;font-weight:600;font-size:16px;
155
+ background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;
156
+ box-shadow:0 12px 34px rgba(139,124,255,.35);transition:transform .3s var(--spring),box-shadow .3s
157
+ }
158
+ .btn-enter:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 18px 44px rgba(139,124,255,.5)}
159
+ .btn-enter .arrow{transition:transform .3s}
160
+ .btn-enter:hover .arrow{transform:translateX(4px)}
161
+
162
+ .usage-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
163
+ .ring{position:relative;width:170px;height:170px}
164
+ .ring svg{width:100%;height:100%;transform:rotate(-90deg)}
165
+ .ring .track{fill:none;stroke:var(--glass-2);stroke-width:12}
166
+ .ring .fill{fill:none;stroke:url(#ringGrad);stroke-width:12;stroke-linecap:round;stroke-dasharray:440;stroke-dashoffset:440;transition:stroke-dashoffset 1.6s .4s var(--ease)}
167
+ #dash.reveal .ring .fill{stroke-dashoffset:calc(440 - 440 * .97)}
168
+ .ring .num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
169
+ .ring .num b{font-size:40px;font-weight:800;letter-spacing:-.04em}
170
+ .ring .num span{font-size:12px;color:var(--text-3)}
171
+ .usage-card small{margin-top:16px;color:var(--text-2);font-size:13px}
172
+
173
+ /* ---- Chat ---- */
174
+ #chat{flex-direction:row}
175
+ .sidebar{
176
+ width:280px;flex:none;height:100%;padding:20px 16px;display:flex;flex-direction:column;gap:8px;
177
+ border-right:1px solid var(--glass-border);transition:margin .45s var(--ease),opacity .4s
178
+ }
179
+ .sidebar.collapsed{margin-left:-280px;opacity:0}
180
+ .sidebar .logo{display:flex;align-items:center;gap:10px;padding:8px 10px 20px;font-weight:700;letter-spacing:-.01em}
181
+ .logo-gem{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--accent-3),var(--accent),var(--accent-2))}
182
+ .btn-new{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:var(--glass-2);border:1px solid var(--glass-border);font-weight:500;transition:.25s}
183
+ .btn-new:hover{border-color:var(--glass-border-2)}
184
+ .sb-label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);padding:18px 10px 6px;font-weight:600}
185
+ .sb-item{padding:10px 12px;border-radius:12px;font-size:14px;color:var(--text-2);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:.2s}
186
+ .sb-item:hover{background:var(--glass);color:var(--text)}
187
+ .sb-item.on{background:var(--glass-2);color:var(--text)}
188
+ .sb-foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;font-size:14px}
189
+ .avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#ffd21e,#ff6ad5);flex:none}
190
+
191
+ .chat-main{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}
192
+ .topbar{display:flex;align-items:center;gap:12px;padding:16px 22px}
193
+ .icon-btn{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--text-2);transition:.25s}
194
+ .icon-btn:hover{background:var(--glass);color:var(--text)}
195
+ .icon-btn svg{width:20px;height:20px}
196
+ .pill{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;font-size:14px;font-weight:500;transition:.25s;position:relative}
197
+ .pill:hover{border-color:var(--glass-border-2)}
198
+ .pill .chev{transition:transform .3s}
199
+ .pill.open .chev{transform:rotate(180deg)}
200
+ .mini-ring{width:22px;height:22px;position:relative}
201
+ .mini-ring svg{transform:rotate(-90deg);width:100%;height:100%}
202
+ .mini-ring circle{fill:none;stroke-width:3}
203
+ .mini-ring .t{stroke:var(--glass-2)}
204
+ .mini-ring .f{stroke:var(--accent-2);stroke-dasharray:56.5;stroke-dashoffset:calc(56.5*.03);stroke-linecap:round}
205
+ .spacer{flex:1}
206
+
207
+ /* theme toggle */
208
+ .theme-toggle{width:64px;height:34px;border-radius:999px;position:relative;padding:3px;transition:.3s}
209
+ .theme-toggle .knob{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:grid;place-items:center;transition:transform .45s var(--spring)}
210
+ [data-theme="light"] .theme-toggle .knob{transform:translateX(30px);background:linear-gradient(135deg,#ffd21e,#ff9d00)}
211
+ .theme-toggle svg{width:14px;height:14px;color:#fff}
212
+ .theme-toggle .sun{display:none}
213
+ [data-theme="light"] .theme-toggle .sun{display:block}
214
+ [data-theme="light"] .theme-toggle .moon{display:none}
215
+
216
+ /* dropdown */
217
+ .dropdown{
218
+ position:absolute;top:calc(100% + 10px);left:0;width:380px;border-radius:20px;padding:8px;z-index:20;
219
+ opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;transition:all .3s var(--spring);transform-origin:top left
220
+ }
221
+ .dropdown.open{opacity:1;transform:none;pointer-events:auto}
222
+ .dd-item{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:14px;text-align:left;width:100%;transition:.2s;position:relative}
223
+ .dd-item + .dd-item{margin-top:4px}
224
+ .dd-item:hover{background:var(--glass-2)}
225
+ .dd-item.selected{background:var(--glass-2);box-shadow:inset 0 0 0 1px var(--glass-border-2)}
226
+ .dd-item.disabled{opacity:.5;cursor:not-allowed}
227
+ .dd-item.disabled:hover{background:none}
228
+ .dd-title{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px}
229
+ .dd-tag{font-size:10.5px;padding:3px 8px;border-radius:999px;background:linear-gradient(135deg,var(--accent-3),var(--accent));color:#fff;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
230
+ .dd-tag.soon{background:var(--glass-2);color:var(--text-2)}
231
+ .dd-row{display:flex;gap:12px;align-items:flex-start}
232
+ .dd-icons{display:flex;gap:6px;flex:none}
233
+ .dd-icons span{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--glass-2);border:1px solid var(--glass-border);color:var(--text-2)}
234
+ .dd-icons svg{width:15px;height:15px}
235
+ .dd-desc{font-size:13px;color:var(--text-2);line-height:1.5;font-weight:400}
236
+ .dd-check{position:absolute;right:14px;top:14px;color:var(--accent-2);opacity:0}
237
+ .dd-item.selected .dd-check{opacity:1}
238
+
239
+ /* chat body */
240
+ .chat-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px}
241
+ .hero-gem{width:64px;height:64px;border-radius:20px;margin-bottom:24px;background:linear-gradient(135deg,var(--accent-3),var(--accent),var(--accent-2));box-shadow:0 20px 60px rgba(139,124,255,.4);animation:floaty 5s ease-in-out infinite}
242
+ @keyframes floaty{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)}}
243
+ .chat-body h1{font-size:clamp(28px,3.4vw,42px);font-weight:800;letter-spacing:-.03em}
244
+ .chat-body h1 span{background:linear-gradient(90deg,var(--accent-3),var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
245
+ .chat-body p{color:var(--text-2);margin-top:10px;font-size:16px}
246
+ .suggest{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap;justify-content:center}
247
+ .suggest button{padding:10px 16px;border-radius:999px;font-size:13.5px;color:var(--text-2);transition:.25s}
248
+ .suggest button:hover{color:var(--text);border-color:var(--glass-border-2);transform:translateY(-2px)}
249
+
250
+ /* composer */
251
+ .composer-wrap{padding:0 22px 22px;display:flex;justify-content:center}
252
+ .composer{width:min(860px,100%);border-radius:24px;padding:10px 10px 10px 12px;display:flex;align-items:flex-end;gap:10px;position:relative;transition:border-color .3s,box-shadow .3s}
253
+ .composer:focus-within{border-color:var(--glass-border-2);box-shadow:var(--shadow),0 0 0 4px rgba(139,124,255,.12)}
254
+ .composer textarea{flex:1;background:none;border:0;outline:0;resize:none;color:var(--text);font:inherit;font-size:15.5px;line-height:1.5;padding:10px 6px;max-height:200px;min-height:44px}
255
+ .composer textarea::placeholder{color:var(--text-3)}
256
+ .plus-btn{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:var(--text-2);transition:.25s;flex:none;position:relative}
257
+ .plus-btn:hover{background:var(--glass-2);color:var(--text)}
258
+ .plus-btn svg{width:20px;height:20px;transition:transform .3s var(--spring)}
259
+ .plus-btn:hover svg{transform:rotate(90deg)}
260
+ .plus-btn .tip{position:absolute;bottom:calc(100% + 8px);left:0;font-size:12px;padding:5px 9px;border-radius:8px;white-space:nowrap;opacity:0;transition:.2s;pointer-events:none}
261
+ .plus-btn:hover .tip{opacity:1}
262
+ .effort-chip{padding:10px 14px;border-radius:999px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;flex:none;transition:.25s;position:relative;height:42px}
263
+ .effort-chip:hover{border-color:var(--glass-border-2)}
264
+ .effort-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--effort-color,var(--accent));box-shadow:0 0 10px var(--effort-color,var(--accent))}
265
+ .send-btn{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;flex:none;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 8px 22px rgba(139,124,255,.35);transition:transform .25s var(--spring),box-shadow .25s}
266
+ .send-btn:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 12px 30px rgba(139,124,255,.5)}
267
+ .send-btn:active{transform:scale(.95)}
268
+ .send-btn svg{width:20px;height:20px}
269
+
270
+ /* effort meter popover */
271
+ .effort-pop{
272
+ position:absolute;bottom:calc(100% + 14px);right:0;width:340px;border-radius:24px;padding:22px 22px 18px;z-index:20;
273
+ opacity:0;transform:translateY(10px) scale(.97);pointer-events:none;transition:all .3s var(--spring);transform-origin:bottom right;text-align:center
274
+ }
275
+ .effort-pop.open{opacity:1;transform:none;pointer-events:auto}
276
+ .effort-pop h4{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);font-weight:600;margin-bottom:4px}
277
+ .gauge{width:100%;touch-action:none;cursor:grab;user-select:none}
278
+ .gauge:active{cursor:grabbing}
279
+ .gauge .arc-track{fill:none;stroke:var(--glass-2);stroke-width:14;stroke-linecap:round}
280
+ .gauge .arc-fill{fill:none;stroke:url(#gaugeGrad);stroke-width:14;stroke-linecap:round;transition:stroke-dashoffset .12s linear}
281
+ .gauge .tick{stroke:var(--text-3);stroke-width:2;stroke-linecap:round}
282
+ .gauge .tick.on{stroke:var(--text)}
283
+ .gauge .lbl{font-size:10px;fill:var(--text-3);font-weight:600;letter-spacing:.04em;text-anchor:middle;transition:.2s}
284
+ .gauge .lbl.on{fill:var(--text);font-size:11px}
285
+ .gauge .needle{stroke:var(--text);stroke-width:3.5;stroke-linecap:round;transform-origin:150px 150px;transition:transform .35s var(--spring);filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
286
+ .gauge.dragging .needle{transition:none}
287
+ .gauge .hub{fill:var(--text)}
288
+ .gauge .hub2{fill:var(--bg)}
289
+ .effort-val{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-top:-6px}
290
+ .effort-val small{display:block;font-size:12.5px;color:var(--text-2);font-weight:400;margin-top:4px;min-height:18px}
291
+
292
+ /* transitions helpers */
293
+ .fade-out{opacity:0!important;transition:opacity .5s var(--ease)!important}
294
+ </style>
295
+ </head>
296
+ <body>
297
+
298
+ <!-- ambient backdrop -->
299
+ <div class="ambient" id="ambient">
300
+ <div class="blob a"></div><div class="blob b"></div><div class="blob c"></div>
301
+ </div>
302
+
303
+ <!-- SVG defs -->
304
+ <svg width="0" height="0" style="position:absolute">
305
+ <defs>
306
+ <linearGradient id="ringGrad" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#8b7cff"/><stop offset="1" stop-color="#5ee7ff"/></linearGradient>
307
+ <linearGradient id="gaugeGrad" x1="0" y1="0" x2="1" y2="0"><stop offset="0" stop-color="#5ee7ff"/><stop offset=".5" stop-color="#8b7cff"/><stop offset="1" stop-color="#ff6ad5"/></linearGradient>
308
+ <linearGradient id="prismFill" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="rgba(255,255,255,.35)"/><stop offset=".5" stop-color="rgba(255,255,255,.08)"/><stop offset="1" stop-color="rgba(255,255,255,.25)"/></linearGradient>
309
+ </defs>
310
+ </svg>
311
+
312
+ <!-- ============ SPLASH ============ -->
313
+ <section class="screen active show" id="splash">
314
+ <h1 class="splash-title"><small>Welcome to Project</small><span class="prism">PRISM</span></h1>
315
+ </section>
316
+
317
+ <!-- ============ AUTH ============ -->
318
+ <section class="screen" id="auth">
319
+ <div class="auth-card glass">
320
+ <h1>Sign in with Hugging Face</h1>
321
+ <p>Make sure you are a member of the<br><code>Project-Prism</code> organisation before continuing.</p>
322
+ <button class="btn-hf" id="btnSignIn">
323
+ <span style="font-size:20px">🤗</span> Sign in with Hugging Face
324
+ </button>
325
+ </div>
326
+ </section>
327
+
328
+ <!-- ============ DASHBOARD ============ -->
329
+ <section class="screen" id="dash">
330
+ <div class="prism-stage">
331
+ <svg viewBox="0 0 520 300" fill="none">
332
+ <!-- incoming white beam -->
333
+ <line class="beam-in" x1="0" y1="185" x2="215" y2="150"/>
334
+ <!-- outgoing spectrum -->
335
+ <g>
336
+ <line class="beam-out" x1="300" y1="140" x2="520" y2="70" stroke="#ff4d6d"/>
337
+ <line class="beam-out" x1="300" y1="143" x2="520" y2="100" stroke="#ff9f43"/>
338
+ <line class="beam-out" x1="300" y1="146" x2="520" y2="130" stroke="#ffd21e"/>
339
+ <line class="beam-out" x1="300" y1="149" x2="520" y2="160" stroke="#4ade80"/>
340
+ <line class="beam-out" x1="300" y1="152" x2="520" y2="190" stroke="#5ee7ff"/>
341
+ <line class="beam-out" x1="300" y1="155" x2="520" y2="220" stroke="#8b7cff"/>
342
+ </g>
343
+ <ellipse class="prism-glow" cx="260" cy="160" rx="70" ry="60" fill="#8b7cff" opacity=".25" style="filter:blur(30px)"/>
344
+ <!-- prism -->
345
+ <polygon class="prism-body" points="260,40 340,240 180,240"/>
346
+ <polygon class="prism-body" points="260,40 300,25 380,225 340,240" style="opacity:.6"/>
347
+ <polygon class="prism-body" points="180,240 340,240 380,225 220,225" style="opacity:.4"/>
348
+ </svg>
349
+ </div>
350
+
351
+ <div class="dash-content">
352
+ <div class="dash-head">
353
+ <h1>Welcome, <span id="username">Astra</span>!</h1>
354
+ <p>Everything's ready. Let's refract something.</p>
355
+ </div>
356
+ <div class="dash-grid">
357
+ <div class="card glass">
358
+ <h3>News</h3>
359
+ <div class="news-item"><i class="news-dot"></i><div><b>Orion Flagship v2.3 shipped</b><span>Better long-context reasoning and a 20% latency drop on research tasks.</span></div><time>2h</time></div>
360
+ <div class="news-item"><i class="news-dot"></i><div><b>Effort meter is live</b><span>Dial in how hard the model thinks — from X-Low to Max.</span></div><time>1d</time></div>
361
+ <div class="news-item"><i class="news-dot"></i><div><b>Prism Ultra is coming</b><span>The power model for all tasks enters private preview next month.</span></div><time>3d</time></div>
362
+ <div class="news-item"><i class="news-dot"></i><div><b>File uploads in chat</b><span>Drop PDFs, images and code straight into the composer.</span></div><time>5d</time></div>
363
+ </div>
364
+
365
+ <div class="card glass enter-card">
366
+ <div>
367
+ <h2>Enter the chat</h2>
368
+ <p>Start a conversation with the current flagship model.</p>
369
+ </div>
370
+ <button class="btn-enter" id="btnEnter">
371
+ <span class="logo-gem" style="width:18px;height:18px;border-radius:5px"></span>
372
+ Orion Flagship
373
+ <svg class="arrow" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
374
+ </button>
375
+ </div>
376
+
377
+ <div class="card glass usage-card">
378
+ <h3 style="align-self:flex-start">Usage remaining today</h3>
379
+ <div class="ring">
380
+ <svg viewBox="0 0 160 160"><circle class="track" cx="80" cy="80" r="70"/><circle class="fill" cx="80" cy="80" r="70"/></svg>
381
+ <div class="num"><b>97%</b><span>of daily quota</span></div>
382
+ </div>
383
+ <small>Resets in 14h 22m</small>
384
+ </div>
385
+ </div>
386
+ </div>
387
+ </section>
388
+
389
+ <!-- ============ CHAT ============ -->
390
+ <section class="screen" id="chat">
391
+ <aside class="sidebar glass" id="sidebar">
392
+ <div class="logo"><span class="logo-gem"></span> Prism</div>
393
+ <button class="btn-new"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>New chat</button>
394
+ <div class="sb-label">Today</div>
395
+ <button class="sb-item on">Refraction index of borosilicate</button>
396
+ <button class="sb-item">Summarize the Orion paper</button>
397
+ <div class="sb-label">Yesterday</div>
398
+ <button class="sb-item">Design tokens for glassmorphism</button>
399
+ <button class="sb-item">Why is the sky blue, really</button>
400
+ <button class="sb-item">Spectral decomposition notes</button>
401
+ <div class="sb-foot glass"><span class="avatar"></span><div><div style="font-weight:600">Astra</div><div style="font-size:12px;color:var(--text-3)">Project-Prism</div></div></div>
402
+ </aside>
403
+
404
+ <div class="chat-main">
405
+ <header class="topbar">
406
+ <button class="icon-btn" id="btnSidebar" title="Toggle sidebar">
407
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
408
+ </button>
409
+
410
+ <!-- model dropdown -->
411
+ <div style="position:relative">
412
+ <button class="pill glass" id="modelPill">
413
+ <span class="logo-gem" style="width:16px;height:16px;border-radius:5px"></span>
414
+ <span id="modelName">Orion Flagship</span>
415
+ <svg class="chev" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><path d="M6 9l6 6 6-6"/></svg>
416
+ </button>
417
+ <div class="dropdown glass" id="modelDropdown">
418
+ <button class="dd-item selected" data-model="Orion Flagship">
419
+ <div class="dd-title">Orion Flagship <span class="dd-tag">Flagship</span></div>
420
+ <div class="dd-row">
421
+ <div class="dd-icons">
422
+ <span title="Reasoning"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M9 18h6M10 21h4M12 3a6 6 0 0 0-4 10.5c.7.6 1 1.4 1 2.5h6c0-1.1.3-1.9 1-2.5A6 6 0 0 0 12 3z"/></svg></span>
423
+ <span title="Long context"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 8h8M8 12h8M8 16h5"/></svg></span>
424
+ </div>
425
+ <div class="dd-desc">Orion Flagship is a proprietary research model at Smilyai. Best for deep reasoning and long documents.</div>
426
+ </div>
427
+ <svg class="dd-check" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5L20 7"/></svg>
428
+ </button>
429
+ <button class="dd-item" data-model="Orion Flagship Mini">
430
+ <div class="dd-title">Orion Flagship Mini</div>
431
+ <div class="dd-desc">Faster variant of Orion. Snappy answers for everyday tasks.</div>
432
+ <svg class="dd-check" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5L20 7"/></svg>
433
+ </button>
434
+ <button class="dd-item disabled" data-model="Prism Ultra" disabled>
435
+ <div class="dd-title">Prism Ultra <span class="dd-tag soon">Coming soon</span></div>
436
+ <div class="dd-desc">Power model for all tasks. The full spectrum.</div>
437
+ </button>
438
+ </div>
439
+ </div>
440
+
441
+ <div class="pill glass" style="cursor:default">
442
+ <span style="color:var(--text-2)">Usage</span><b>97%</b>
443
+ <span class="mini-ring"><svg viewBox="0 0 22 22"><circle class="t" cx="11" cy="11" r="9"/><circle class="f" cx="11" cy="11" r="9"/></svg></span>
444
+ </div>
445
+
446
+ <div class="spacer"></div>
447
+
448
+ <button class="theme-toggle glass" id="themeToggle" title="Toggle theme">
449
+ <span class="knob">
450
+ <svg class="moon" viewBox="0 0 24 24" fill="currentColor"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
451
+ <svg class="sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
452
+ </span>
453
+ </button>
454
+ </header>
455
+
456
+ <main class="chat-body">
457
+ <div class="hero-gem"></div>
458
+ <h1>Welcome to the <span>Prism</span>!</h1>
459
+ <p>Let's refract something.</p>
460
+ <div class="suggest">
461
+ <button class="glass">Explain dispersion like I'm five</button>
462
+ <button class="glass">Draft a research abstract</button>
463
+ <button class="glass">Refactor this function</button>
464
+ </div>
465
+ </main>
466
+
467
+ <div class="composer-wrap">
468
+ <div class="composer glass">
469
+ <button class="plus-btn" title="Attach files">
470
+ <span class="tip glass">Files</span>
471
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
472
+ </button>
473
+ <textarea id="input" rows="1" placeholder="Let your mind wander…"></textarea>
474
+
475
+ <!-- effort meter -->
476
+ <button class="effort-chip glass" id="effortChip"><span class="dot"></span><span id="effortLabel">High</span></button>
477
+ <div class="effort-pop glass" id="effortPop">
478
+ <h4>Effort meter</h4>
479
+ <svg class="gauge" id="gauge" viewBox="0 0 300 175">
480
+ <path class="arc-track" d="M30 150 A120 120 0 0 1 270 150"/>
481
+ <path class="arc-fill" id="arcFill" d="M30 150 A120 120 0 0 1 270 150"/>
482
+ <g id="ticks"></g>
483
+ <g id="labels"></g>
484
+ <line class="needle" id="needle" x1="150" y1="150" x2="150" y2="48"/>
485
+ <circle class="hub" cx="150" cy="150" r="10"/>
486
+ <circle class="hub2" cx="150" cy="150" r="4"/>
487
+ </svg>
488
+ <div class="effort-val"><span id="effortBig">High</span><small id="effortDesc">Drag the needle</small></div>
489
+ </div>
490
+
491
+ <button class="send-btn" title="Send">
492
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
493
+ </button>
494
+ </div>
495
+ </div>
496
+ </div>
497
+ </section>
498
+
499
+ <script>
500
+ /* ============ SCREEN FLOW ============ */
501
+ const $ = s => document.querySelector(s);
502
+ const screens = { splash:$('#splash'), auth:$('#auth'), dash:$('#dash'), chat:$('#chat') };
503
+
504
+ function showScreen(name, cb){
505
+ const el = screens[name];
506
+ el.classList.add('active');
507
+ requestAnimationFrame(()=>requestAnimationFrame(()=>{ el.classList.add('show'); cb && cb(); }));
508
+ }
509
+ function hideScreen(name, done){
510
+ const el = screens[name];
511
+ el.classList.remove('show');
512
+ setTimeout(()=>{ el.classList.remove('active'); done && done(); }, 650);
513
+ }
514
+
515
+ // Splash: hold 2s -> slide up -> black -> fade in auth
516
+ setTimeout(()=>{
517
+ screens.splash.classList.add('slide-up');
518
+ setTimeout(()=>{
519
+ screens.splash.classList.remove('active','show');
520
+ setTimeout(()=>{ $('#ambient').classList.add('on'); showScreen('auth'); }, 500);
521
+ }, 900);
522
+ }, 2000);
523
+
524
+ // Auth -> dashboard (prism animation, then content reveals)
525
+ $('#btnSignIn').addEventListener('click', ()=>{
526
+ hideScreen('auth', ()=>{
527
+ showScreen('dash', ()=>{
528
+ setTimeout(()=> screens.dash.classList.add('reveal'), 1700);
529
+ });
530
+ });
531
+ });
532
+
533
+ // Dashboard -> chat
534
+ $('#btnEnter').addEventListener('click', ()=>{
535
+ hideScreen('dash', ()=> showScreen('chat'));
536
+ });
537
+
538
+ /* ============ THEME ============ */
539
+ $('#themeToggle').addEventListener('click', ()=>{
540
+ const h = document.documentElement;
541
+ h.dataset.theme = h.dataset.theme === 'dark' ? 'light' : 'dark';
542
+ });
543
+
544
+ /* ============ SIDEBAR ============ */
545
+ $('#btnSidebar').addEventListener('click', ()=> $('#sidebar').classList.toggle('collapsed'));
546
+
547
+ /* ============ MODEL DROPDOWN ============ */
548
+ const pill = $('#modelPill'), dd = $('#modelDropdown');
549
+ pill.addEventListener('click', e=>{ e.stopPropagation(); pill.classList.toggle('open'); dd.classList.toggle('open'); closeEffort(); });
550
+ dd.querySelectorAll('.dd-item:not(.disabled)').forEach(item=>{
551
+ item.addEventListener('click', ()=>{
552
+ dd.querySelectorAll('.dd-item').forEach(i=>i.classList.remove('selected'));
553
+ item.classList.add('selected');
554
+ $('#modelName').textContent = item.dataset.model;
555
+ pill.classList.remove('open'); dd.classList.remove('open');
556
+ });
557
+ });
558
+ document.addEventListener('click', e=>{
559
+ if(!dd.contains(e.target)){ pill.classList.remove('open'); dd.classList.remove('open'); }
560
+ if(!$('#effortPop').contains(e.target) && e.target!==$('#effortChip') && !$('#effortChip').contains(e.target)) closeEffort();
561
+ });
562
+
563
+ /* ============ EFFORT METER ============ */
564
+ const LEVELS = [
565
+ {n:'X-Low', d:'Blink-fast replies, minimal reasoning', c:'#5ee7ff'},
566
+ {n:'Low', d:'Quick answers for simple asks', c:'#6fd0ff'},
567
+ {n:'Medium', d:'Balanced speed and depth', c:'#8b7cff'},
568
+ {n:'High', d:'Careful, thorough reasoning', c:'#a97bff'},
569
+ {n:'X-High', d:'Deep multi-step thinking', c:'#d56fe8'},
570
+ {n:'Max', d:'Everything it has. Slow but brilliant', c:'#ff6ad5'},
571
+ ];
572
+ const gauge=$('#gauge'), needle=$('#needle'), arcFill=$('#arcFill');
573
+ const CX=150, CY=150, R=120;
574
+ const ARC_LEN = Math.PI*R; // semicircle length
575
+ arcFill.style.strokeDasharray = ARC_LEN;
576
+
577
+ let level = 3; // High
578
+ const pop=$('#effortPop'), chip=$('#effortChip');
579
+
580
+ // build ticks + labels
581
+ const ticks=$('#ticks'), labels=$('#labels');
582
+ LEVELS.forEach((L,i)=>{
583
+ const a = Math.PI - (i/(LEVELS.length-1))*Math.PI; // rad, left=PI to right=0
584
+ const x1=CX+Math.cos(a)*(R+14), y1=CY-Math.sin(a)*(R+14);
585
+ const x2=CX+Math.cos(a)*(R+22), y2=CY-Math.sin(a)*(R+22);
586
+ const t=document.createElementNS('http://www.w3.org/2000/svg','line');
587
+ t.setAttribute('x1',x1);t.setAttribute('y1',y1);t.setAttribute('x2',x2);t.setAttribute('y2',y2);t.classList.add('tick');ticks.appendChild(t);
588
+ const lx=CX+Math.cos(a)*(R+36), ly=CY-Math.sin(a)*(R+36)+4;
589
+ const l=document.createElementNS('http://www.w3.org/2000/svg','text');
590
+ l.setAttribute('x',lx);l.setAttribute('y',ly);l.classList.add('lbl');l.textContent=L.n.toUpperCase();labels.appendChild(l);
591
+ });
592
+
593
+ function setLevel(i, fromDrag){
594
+ level = Math.max(0, Math.min(LEVELS.length-1, i));
595
+ const L = LEVELS[level];
596
+ const frac = level/(LEVELS.length-1);
597
+ needle.style.transform = `rotate(${-90 + frac*180}deg)`;
598
+ arcFill.style.strokeDashoffset = ARC_LEN*(1-frac);
599
+ $('#effortLabel').textContent = L.n;
600
+ $('#effortBig').textContent = L.n;
601
+ $('#effortDesc').textContent = L.d;
602
+ chip.style.setProperty('--effort-color', L.c);
603
+ ticks.querySelectorAll('.tick').forEach((t,k)=>t.classList.toggle('on',k<=level));
604
+ labels.querySelectorAll('.lbl').forEach((l,k)=>l.classList.toggle('on',k===level));
605
+ }
606
+ setLevel(level);
607
+
608
+ chip.addEventListener('click', e=>{ e.stopPropagation(); pop.classList.toggle('open'); pill.classList.remove('open'); dd.classList.remove('open'); });
609
+ function closeEffort(){ pop.classList.remove('open'); }
610
+
611
+ // drag
612
+ let dragging=false;
613
+ function angleToLevel(clientX, clientY){
614
+ const pt = gauge.createSVGPoint(); pt.x=clientX; pt.y=clientY;
615
+ const p = pt.matrixTransform(gauge.getScreenCTM().inverse());
616
+ let a = Math.atan2(CY-p.y, p.x-CX); // 0..PI across top
617
+ if(a<0) a = p.x<CX ? Math.PI : 0;
618
+ const frac = 1 - a/Math.PI;
619
+ return Math.round(frac*(LEVELS.length-1));
620
+ }
621
+ gauge.addEventListener('pointerdown', e=>{ dragging=true; gauge.classList.add('dragging'); gauge.setPointerCapture(e.pointerId); setLevel(angleToLevel(e.clientX,e.clientY)); });
622
+ gauge.addEventListener('pointermove', e=>{ if(dragging) setLevel(angleToLevel(e.clientX,e.clientY)); });
623
+ ['pointerup','pointercancel'].forEach(ev=>gauge.addEventListener(ev, ()=>{ dragging=false; gauge.classList.remove('dragging'); }));
624
+
625
+ /* ============ TEXTAREA AUTOSIZE ============ */
626
+ const ta=$('#input');
627
+ ta.addEventListener('input', ()=>{ ta.style.height='auto'; ta.style.height=Math.min(ta.scrollHeight,200)+'px'; });
628
+ </script>
629
+ </body>
630
+ </html>