Hugging Face's logo

Spaces:
SpiceeChat
/
README
Sleeping

App Files Community
README
File size: 32,709 Bytes
dda5e4e
ea3bfec
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
import http.server
import socketserver
import os

HTML_CONTENT = r"""<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SpiceeChat</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap');
#sc-wrap *, #sc-wrap *::before, #sc-wrap *::after { margin: 0; padding: 0; box-sizing: border-box; }
#sc-wrap {
  --rose: #c94b6e; --rose-dark: #a03358; --rose-light: #f4d0db;
  --cream: #faf7f4; --dark: #1a1118; --dark-2: #2d1f2a;
  --muted: #8a7580; --border: rgba(201,75,110,0.15);
  font-family: 'DM Sans', sans-serif;
  background: var(--cream);
  color: var(--dark);
  overflow-x: hidden;
  width: 100%;
}
/* NAV */
#sc-wrap .sc-nav {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 20px 60px; background: white;
  border-bottom: 1px solid var(--border);
}
#sc-wrap .sc-nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
#sc-wrap .sc-nav-logo img { height: 36px; width: 36px; border-radius: 50%; object-fit: cover; }
#sc-wrap .sc-nav-logo span { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 600; color: var(--dark); }
#sc-wrap .sc-nav-links { display: flex; align-items: center; gap: 32px; list-style: none; }
#sc-wrap .sc-nav-links a { text-decoration: none; color: var(--muted); font-size: 0.9rem; transition: color 0.2s; }
#sc-wrap .sc-nav-links a:hover { color: var(--rose); }
#sc-wrap .sc-nav-cta { background: var(--rose); color: white !important; padding: 9px 22px; border-radius: 100px; font-weight: 500 !important; }
#sc-wrap .sc-nav-cta:hover { background: var(--rose-dark) !important; }
/* HERO */
#sc-wrap .sc-hero {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 80px 40px 60px;
  background: var(--cream); position: relative;
}
#sc-wrap .sc-hero::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(201,75,110,0.07) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}
#sc-wrap .sc-hero > * { position: relative; z-index: 1; }
#sc-wrap .sc-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--rose-light); color: var(--rose-dark);
  padding: 6px 18px; border-radius: 100px;
  font-size: 0.78rem; font-weight: 500; letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: 28px;
}
#sc-wrap .sc-hero-logo {
  width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-bottom: 28px;
  box-shadow: 0 0 0 8px rgba(201,75,110,0.1), 0 0 0 16px rgba(201,75,110,0.05);
}
#sc-wrap .sc-h1 {
  font-family: 'Cormorant Garamond', serif; font-size: clamp(3rem,7vw,5.5rem);
  font-weight: 300; line-height: 1.05; color: var(--dark); max-width: 800px;
}
#sc-wrap .sc-h1 em { font-style: italic; color: var(--rose); }
#sc-wrap .sc-sub {
  margin-top: 20px; font-size: 1.05rem; color: var(--muted); font-weight: 300;
  max-width: 500px; line-height: 1.7;
}
#sc-wrap .sc-actions { display: flex; gap: 14px; margin-top: 40px; flex-wrap: wrap; justify-content: center; }
#sc-wrap .sc-btn {
  padding: 14px 36px; border-radius: 100px; font-size: 0.92rem;
  font-weight: 500; text-decoration: none; cursor: pointer; border: none;
  font-family: 'DM Sans', sans-serif; transition: all 0.2s; display: inline-block;
}
#sc-wrap .sc-btn-primary { background: var(--rose); color: white; box-shadow: 0 4px 20px rgba(201,75,110,0.3); }
#sc-wrap .sc-btn-primary:hover { background: var(--rose-dark); transform: translateY(-2px); }
#sc-wrap .sc-btn-secondary { background: transparent; color: var(--dark); border: 1px solid rgba(26,17,24,0.2); }
#sc-wrap .sc-btn-secondary:hover { border-color: var(--rose); color: var(--rose); transform: translateY(-2px); }
#sc-wrap .sc-trust {
  margin-top: 48px; display: flex; align-items: center; gap: 20px;
  color: var(--muted); font-size: 0.82rem; flex-wrap: wrap; justify-content: center;
}
#sc-wrap .sc-tdiv { width: 1px; height: 14px; background: var(--border); }
/* STATS */
#sc-wrap .sc-stats {
  background: white; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 50px 60px;
}
#sc-wrap .sc-stats-grid {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4,1fr); gap: 32px; text-align: center;
}
#sc-wrap .sc-stat-num { font-family: 'Cormorant Garamond', serif; font-size: 2.8rem; font-weight: 300; color: var(--rose); line-height: 1; margin-bottom: 6px; }
#sc-wrap .sc-stat-label { font-size: 0.82rem; color: var(--muted); font-weight: 300; }
/* SECTIONS */
#sc-wrap .sc-section { padding: 80px 60px; max-width: 1100px; margin: 0 auto; }
#sc-wrap .sc-label { font-size: 0.75rem; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--rose); margin-bottom: 14px; }
#sc-wrap .sc-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(2rem,4vw,3rem); font-weight: 300; line-height: 1.15; color: var(--dark); max-width: 580px; }
#sc-wrap .sc-title em { font-style: italic; color: var(--rose); }
#sc-wrap .sc-intro { color: var(--muted); font-size: 0.92rem; margin-top: 14px; max-width: 520px; line-height: 1.7; font-weight: 300; }
/* HOW */
#sc-wrap .sc-how-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 2px;
  margin-top: 48px; background: var(--border); border: 1px solid var(--border);
  border-radius: 20px; overflow: hidden;
}
#sc-wrap .sc-how-card { background: var(--cream); padding: 40px 36px; transition: background 0.3s; }
#sc-wrap .sc-how-card:hover { background: white; }
#sc-wrap .sc-how-num { font-family: 'Cormorant Garamond', serif; font-size: 2.8rem; font-weight: 300; color: var(--rose-light); line-height: 1; margin-bottom: 18px; }
#sc-wrap .sc-how-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 400; color: var(--dark); margin-bottom: 10px; }
#sc-wrap .sc-how-card p { font-size: 0.87rem; color: var(--muted); line-height: 1.7; font-weight: 300; }
/* FEATURES DARK */
#sc-wrap .sc-dark { background: var(--dark); padding: 80px 0; }
#sc-wrap .sc-dark-inner { max-width: 1100px; margin: 0 auto; padding: 0 60px; }
#sc-wrap .sc-dark .sc-label { color: var(--rose-light); }
#sc-wrap .sc-dark .sc-title { color: white; }
#sc-wrap .sc-dark .sc-intro { color: rgba(255,255,255,0.4); }
#sc-wrap .sc-feat-grid {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 1px;
  margin-top: 48px; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.06); border-radius: 20px; overflow: hidden;
}
#sc-wrap .sc-feat-card { background: var(--dark-2); padding: 40px; transition: background 0.3s; }
#sc-wrap .sc-feat-card:hover { background: #381c32; }
#sc-wrap .sc-feat-icon { width: 44px; height: 44px; border-radius: 10px; background: rgba(201,75,110,0.15); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; font-size: 1.3rem; }
#sc-wrap .sc-feat-card h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 400; color: white; margin-bottom: 10px; }
#sc-wrap .sc-feat-card p { font-size: 0.87rem; color: rgba(255,255,255,0.45); line-height: 1.7; font-weight: 300; }
/* CHAT DEMO */
#sc-wrap .sc-demo-inner { max-width: 720px; margin: 0 auto; padding: 0 60px 80px; }
#sc-wrap .sc-demo-head { text-align: center; margin-bottom: 44px; }
#sc-wrap .sc-demo-head .sc-label { color: var(--rose-light); }
#sc-wrap .sc-demo-head .sc-title { color: white; max-width: 100%; text-align: center; }
#sc-wrap .sc-demo-sub { color: rgba(255,255,255,0.4); font-size: 0.9rem; margin-top: 10px; }
#sc-wrap .sc-chat { background: #1f1120; border: 1px solid rgba(201,75,110,0.2); border-radius: 20px; overflow: hidden; }
#sc-wrap .sc-chat-hdr { display: flex; align-items: center; gap: 12px; padding: 18px 24px; border-bottom: 1px solid rgba(255,255,255,0.06); }
#sc-wrap .sc-chat-av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid var(--rose); }
#sc-wrap .sc-chat-name { font-weight: 500; color: white; font-size: 0.92rem; }
#sc-wrap .sc-chat-status { font-size: 0.75rem; color: #4ade80; margin-top: 2px; }
#sc-wrap .sc-chat-body { padding: 24px; display: flex; flex-direction: column; gap: 14px; min-height: 180px; max-height: 300px; overflow-y: auto; }
#sc-wrap .sc-msg { display: flex; }
#sc-wrap .sc-msg.ai { justify-content: flex-start; }
#sc-wrap .sc-msg.user { justify-content: flex-end; }
#sc-wrap .sc-bubble { padding: 12px 18px; border-radius: 16px; font-size: 0.88rem; line-height: 1.6; max-width: 82%; }
#sc-wrap .sc-msg.ai .sc-bubble { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.85); border-bottom-left-radius: 3px; }
#sc-wrap .sc-msg.user .sc-bubble { background: var(--rose); color: white; border-bottom-right-radius: 3px; }
#sc-wrap .sc-msg.typing .sc-bubble { color: rgba(255,255,255,0.35); font-style: italic; }
#sc-wrap .sc-suggs { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 24px; border-top: 1px solid rgba(255,255,255,0.06); }
#sc-wrap .sc-sugg {
  background: rgba(201,75,110,0.1); border: 1px solid rgba(201,75,110,0.25);
  color: rgba(255,255,255,0.7); padding: 8px 14px; border-radius: 100px;
  font-size: 0.8rem; cursor: pointer; transition: background 0.2s;
  font-family: 'DM Sans', sans-serif;
}
#sc-wrap .sc-sugg:hover { background: rgba(201,75,110,0.25); color: white; }
#sc-wrap .sc-sugg:disabled { opacity: 0.3; cursor: default; }
/* MODELS */
#sc-wrap .sc-models-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; margin-top: 48px; max-width: 750px; }
#sc-wrap .sc-model { border: 1px solid var(--border); border-radius: 18px; padding: 32px 28px; background: white; transition: all 0.2s; position: relative; overflow: hidden; }
#sc-wrap .sc-model::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--rose), #e8829a); }
#sc-wrap .sc-model:hover { border-color: rgba(201,75,110,0.3); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(201,75,110,0.1); }
#sc-wrap .sc-mtag { display: inline-block; font-size: 0.7rem; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--rose); background: var(--rose-light); padding: 3px 10px; border-radius: 100px; margin-bottom: 16px; }
#sc-wrap .sc-model h3 { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 400; color: var(--dark); margin-bottom: 8px; }
#sc-wrap .sc-model p { font-size: 0.85rem; color: var(--muted); line-height: 1.7; font-weight: 300; margin-bottom: 20px; }
#sc-wrap .sc-mmeta { display: flex; flex-direction: column; gap: 5px; font-size: 0.78rem; color: var(--muted); padding-top: 18px; border-top: 1px solid var(--border); }
#sc-wrap .sc-mmeta span { display: flex; align-items: center; gap: 6px; }
#sc-wrap .sc-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--rose); flex-shrink: 0; }
/* TESTIMONIALS */
#sc-wrap .sc-testi-wrap { background: white; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 80px 0; }
#sc-wrap .sc-testi-inner { max-width: 1100px; margin: 0 auto; padding: 0 60px; }
#sc-wrap .sc-testi-head { text-align: center; margin-bottom: 48px; }
#sc-wrap .sc-testi-head .sc-title { max-width: 100%; text-align: center; }
#sc-wrap .sc-testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
#sc-wrap .sc-tcard { border: 1px solid var(--border); border-radius: 18px; padding: 32px 28px; background: var(--cream); }
#sc-wrap .sc-tquote { font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-weight: 300; color: var(--dark); line-height: 1.6; font-style: italic; margin-bottom: 24px; }
#sc-wrap .sc-tquote::before { content: '"'; color: var(--rose); }
#sc-wrap .sc-tauthor { display: flex; align-items: center; gap: 12px; }
#sc-wrap .sc-tav { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: 0.95rem; flex-shrink: 0; }
#sc-wrap .sc-taname { font-weight: 500; font-size: 0.88rem; color: var(--dark); }
#sc-wrap .sc-taloc { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
/* FAQ */
#sc-wrap .sc-faq { margin-top: 48px; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
#sc-wrap .sc-fitem { background: white; padding: 24px 32px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background 0.2s; }
#sc-wrap .sc-fitem:last-child { border-bottom: none; }
#sc-wrap .sc-fitem:hover { background: var(--cream); }
#sc-wrap .sc-fq { font-weight: 500; color: var(--dark); font-size: 0.95rem; display: flex; justify-content: space-between; align-items: center; }
#sc-wrap .sc-farrow { color: var(--rose); transition: transform 0.3s; }
#sc-wrap .sc-fitem.open .sc-farrow { transform: rotate(180deg); }
#sc-wrap .sc-fa { display: none; margin-top: 14px; font-size: 0.87rem; color: var(--muted); line-height: 1.75; font-weight: 300; }
#sc-wrap .sc-fitem.open .sc-fa { display: block; }
/* CTA */
#sc-wrap .sc-cta { text-align: center; padding: 100px 60px; max-width: 780px; margin: 0 auto; }
#sc-wrap .sc-cta h2 { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.2rem,5vw,3.6rem); font-weight: 300; line-height: 1.1; margin-bottom: 18px; color: var(--dark); }
#sc-wrap .sc-cta h2 em { font-style: italic; color: var(--rose); }
#sc-wrap .sc-cta p { color: var(--muted); font-size: 1rem; font-weight: 300; margin-bottom: 40px; line-height: 1.7; }
#sc-wrap .sc-eform { display: flex; gap: 10px; max-width: 460px; margin: 0 auto; }
#sc-wrap .sc-eform input { flex: 1; padding: 14px 22px; border: 1px solid rgba(26,17,24,0.15); border-radius: 100px; font-size: 0.88rem; font-family: 'DM Sans', sans-serif; background: white; color: var(--dark); outline: none; transition: border-color 0.2s; }
#sc-wrap .sc-eform input:focus { border-color: var(--rose); }
#sc-wrap .sc-eform input::placeholder { color: var(--muted); }
#sc-wrap .sc-success { display: none; margin-top: 18px; color: var(--rose); font-size: 0.92rem; }
/* FOOTER */
#sc-wrap .sc-footer { background: var(--dark); color: rgba(255,255,255,0.4); padding: 40px 60px; display: flex; align-items: center; justify-content: space-between; font-size: 0.82rem; font-weight: 300; flex-wrap: wrap; gap: 16px; }
#sc-wrap .sc-footer a { color: rgba(255,255,255,0.4); text-decoration: none; }
#sc-wrap .sc-footer a:hover { color: var(--rose-light); }
#sc-wrap .sc-flogo { display: flex; align-items: center; gap: 10px; color: white; font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; }
#sc-wrap .sc-flogo img { height: 26px; width: 26px; border-radius: 50%; object-fit: cover; }
</style>
</head>
<body>
<div id="sc-wrap">
  <!-- NAV -->
  <div class="sc-nav">
    <a href="https://huggingface.co/SpiceeChat" target="_blank" class="sc-nav-logo">
      <img src="https://huggingface.co/spaces/SpiceeChat/README/resolve/main/SpiceeChat_org_logo.png" alt="SpiceeChat">
      <span>SpiceeChat</span>
    </a>
    <ul class="sc-nav-links">
      <li><a href="#sc-how">How it works</a></li>
      <li><a href="#sc-demo">Meet Cinder</a></li>
      <li><a href="#sc-models">Models</a></li>
      <li><a href="#sc-waitlist" class="sc-nav-cta">Join Waitlist</a></li>
    </ul>
  </div>
  <!-- HERO -->
  <div class="sc-hero">
    <div class="sc-eyebrow">&#10022; AI-Powered Dating Intelligence</div>
    <img class="sc-hero-logo" src="https://huggingface.co/spaces/SpiceeChat/README/resolve/main/SpiceeChat_org_logo.png" alt="SpiceeChat">
    <h1 class="sc-h1">Love, finally <em>understood</em></h1>
    <p class="sc-sub">SpiceeChat uses machine learning to end dating fatigue &#8212; smarter matching, real conversations, genuine connection. No swiping, no algorithms optimised for your screen time.</p>
    <div class="sc-actions">
      <a href="#sc-waitlist" class="sc-btn sc-btn-primary">Get Early Access</a>
      <a href="#sc-how" class="sc-btn sc-btn-secondary">See how it works</a>
    </div>
    <div class="sc-trust">
      <span>Open Source on Hugging Face</span>
      <div class="sc-tdiv"></div>
      <span>Apache 2.0 License</span>
      <div class="sc-tdiv"></div>
      <span>No ads. Ever.</span>
    </div>
  </div>
  <!-- STATS -->
  <div class="sc-stats">
    <div class="sc-stats-grid">
      <div><div class="sc-stat-num">118k+</div><div class="sc-stat-label">Dating profiles analyzed</div></div>
      <div><div class="sc-stat-num">2</div><div class="sc-stat-label">AI models in production</div></div>
      <div><div class="sc-stat-num">1.5B</div><div class="sc-stat-label">Parameters (Cinder model)</div></div>
      <div><div class="sc-stat-num">100%</div><div class="sc-stat-label">Open source & transparent</div></div>
    </div>
  </div>
  <!-- HOW IT WORKS -->
  <div id="sc-how" class="sc-section">
    <div class="sc-label">How it works</div>
    <h2 class="sc-title">Three steps to <em>better</em> love</h2>
    <p class="sc-intro">Dating apps have been broken for years. We're fixing that with AI that actually understands people &#8212; not just their photos.</p>
    <div class="sc-how-grid">
      <div class="sc-how-card">
        <div class="sc-how-num">01</div>
        <h3>Share your story</h3>
        <p>Tell us who you are, what you value, and what you're really looking for. No checkboxes, no forced categories &#8212; just a real conversation. Our AI listens to what you say, not what a dropdown menu forced you to pick.</p>
      </div>
      <div class="sc-how-card">
        <div class="sc-how-num">02</div>
        <h3>AI reads the signals</h3>
        <p>Bio2Tags extracts deep personality signals from what people write &#8212; interests, values, communication style, emotional maturity. We build a picture of who someone truly is, not just who they claim to be in a photo.</p>
      </div>
      <div class="sc-how-card">
        <div class="sc-how-num">03</div>
        <h3>Meet who matters</h3>
        <p>Cinder, your personal AI companion, guides every step &#8212; from first message anxiety to navigating a third date, from heartbreak recovery to understanding what you actually need in a partner.</p>
      </div>
    </div>
  </div>
  <!-- FEATURES -->
  <div class="sc-dark" id="sc-features">
    <div class="sc-dark-inner">
      <div class="sc-label">Features</div>
      <h2 class="sc-title" style="color:white;">Built for <em>real</em> humans</h2>
      <p class="sc-intro">Every feature exists to solve a real problem &#8212; not to keep you scrolling.</p>
      <div class="sc-feat-grid">
        <div class="sc-feat-card">
          <div class="sc-feat-icon">&#129504;</div>
          <h3>Personality Intelligence</h3>
          <p>Bio2Tags reads bios the way a perceptive friend would &#8212; picking up on tone, values, and what someone's not saying. Clean, structured tags that actually mean something for compatibility.</p>
        </div>
        <div class="sc-feat-card">
          <div class="sc-feat-icon">&#128172;</div>
          <h3>Cinder AI Companion</h3>
          <p>Available at 2am when you're spiralling about a text left on read. Cinder is empathetic, honest, and grounded in real relationship psychology. No clich&#233;s, no toxic positivity.</p>
        </div>
        <div class="sc-feat-card">
          <div class="sc-feat-icon">&#128274;</div>
          <h3>Privacy by Design</h3>
          <p>Your data stays yours. We don't sell it, we don't profile you for advertisers, and we don't share anything with third parties. Dating is already vulnerable enough.</p>
        </div>
        <div class="sc-feat-card">
          <div class="sc-feat-icon">&#9889;</div>
          <h3>Open Weights, Always</h3>
          <p>Every model is released on Hugging Face under Apache 2.0. Download, audit, fine-tune, and deploy yourself. No black boxes, no lock-in, no trust-me-bro AI.</p>
        </div>
      </div>
    </div>
  </div>
  <!-- CHAT DEMO -->
  <div class="sc-dark" id="sc-demo">
    <div class="sc-demo-inner">
      <div class="sc-demo-head">
        <div class="sc-label" style="color:var(--rose-light);">Meet Cinder</div>
        <h2 class="sc-title" style="color:white; max-width:100%; text-align:center;">Your companion for <em>love</em></h2>
        <p class="sc-demo-sub">Tap a question to see Cinder in action.</p>
      </div>
      <div class="sc-chat">
        <div class="sc-chat-hdr">
          <img src="https://huggingface.co/spaces/SpiceeChat/README/resolve/main/SpiceeChat_org_logo.png" alt="Cinder" class="sc-chat-av">
          <div>
            <div class="sc-chat-name">Cinder</div>
            <div class="sc-chat-status">&#9679; Online</div>
          </div>
        </div>
        <div class="sc-chat-body" id="sc-chat-body">
          <div class="sc-msg ai"><div class="sc-bubble">Hey! I'm Cinder &#8212; your companion for all things love and dating. What's on your heart today?</div></div>
        </div>
        <div class="sc-suggs">
          <button class="sc-sugg" onclick="scSend(this)" data-reply="That's a lot to carry. Grief after a long relationship is completely real &#8212; it's not weakness, it's love that doesn't have anywhere to go yet. Give yourself permission to feel it without rushing to 'get over it'. Start small &#8212; rediscover one thing that was just yours. Not revenge glow-ups, not dating apps immediately. Just you, reconnecting with yourself first. &#128153;">I just got out of a 3-year relationship &#128148;</button>
          <button class="sc-sugg" onclick="scSend(this)" data-reply="Photos first &#8212; use 3-5 that show you actually doing things you love, not posed headshots. Then your bio: skip 'I love to travel and laugh' (everyone does) and say something specific. 'Terrible at cooking but excellent at finding the best takeout in any city' tells me more about you than a paragraph of generic adjectives. Be specific, be honest, and don't be afraid to be a little weird &#8212; the right person will love it.">How do I make my profile stand out? &#10024;</button>
          <button class="sc-sugg" onclick="scSend(this)" data-reply="Workplace crushes &#8212; classic, complicated, and not automatically a bad idea. Key question: could you handle it professionally if it didn't work out? If you're in different departments, the risk is lower. My advice: get to know them naturally first. If the feeling grows and seems mutual, a low-pressure coffee is a perfectly fine next step. Just don't let it live rent-free in your head for six months. &#128516;">I have a crush on my coworker &#128556;</button>
          <button class="sc-sugg" onclick="scSend(this)" data-reply="The biggest one? Expecting your partner to just know what you need without telling them. People aren't mind readers, and assuming they should be leads to quiet resentment that builds over months. The second one is losing yourself &#8212; merging your identity so completely that you forget what you actually liked before them. Healthy relationships are two whole people choosing each other. Keep your friendships, your interests, your ambitions.">Biggest mistakes in new relationships?</button>
        </div>
      </div>
    </div>
  </div>
  <!-- MODELS -->
  <div id="sc-models" class="sc-section">
    <div class="sc-label">Our Models</div>
    <h2 class="sc-title">The <em>intelligence</em> behind SpiceeChat</h2>
    <p class="sc-intro">Every model is open source, openly trained, and built with a single purpose &#8212; to help real people form real connections.</p>
    <div class="sc-models-grid">
      <div class="sc-model">
        <div class="sc-mtag">Flagship</div>
        <h3>Cinder 1.5B</h3>
        <p>Your AI companion for all things dating and relationships. Trained on 118k+ real dating profiles. Empathetic, grounded, never preachy.</p>
        <div class="sc-mmeta">
          <span><div class="sc-dot"></div>1.5B parameters</span>
          <span><div class="sc-dot"></div>Qwen2.5 base &#183; QLoRA fine-tuned</span>
          <span><div class="sc-dot"></div>Apache 2.0</span>
        </div>
      </div>
      <div class="sc-model">
        <div class="sc-mtag">Utility</div>
        <h3>Bio2Tags</h3>
        <p>Transforms any biography into structured personality tags in milliseconds. The backbone of smart matching &#8212; who someone is matters more than how they look.</p>
        <div class="sc-mmeta">
          <span><div class="sc-dot"></div>360M parameters</span>
          <span><div class="sc-dot"></div>SmolLM2 base &#183; 1,387 curated pairs</span>
          <span><div class="sc-dot"></div>Apache 2.0</span>
        </div>
      </div>
    </div>
  </div>
  <!-- TESTIMONIALS -->
  <div class="sc-testi-wrap">
    <div class="sc-testi-inner">
      <div class="sc-testi-head">
        <div class="sc-label">What people say</div>
        <h2 class="sc-title">Real people. <em>Real</em> results.</h2>
      </div>
      <div class="sc-testi-grid">
        <div class="sc-tcard">
          <div class="sc-tquote">I've used every dating app out there. SpiceeChat is the first thing that felt like it actually understood what I was looking for &#8212; not just what I was swiping on.</div>
          <div class="sc-tauthor">
            <div class="sc-tav" style="background:#f4d0db; color:#a03358;">S</div>
            <div><div class="sc-taname">Sofia R.</div><div class="sc-taloc">London, UK</div></div>
          </div>
        </div>
        <div class="sc-tcard">
          <div class="sc-tquote">Cinder helped me realize I was looking for the wrong things in relationships entirely. That one conversation changed how I approach dating.</div>
          <div class="sc-tauthor">
            <div class="sc-tav" style="background:#e8d5f0; color:#6a2d8f;">M</div>
            <div><div class="sc-taname">Marcus T.</div><div class="sc-taloc">Toronto, CA</div></div>
          </div>
        </div>
        <div class="sc-tcard">
          <div class="sc-tquote">The Bio2Tags model described my personality from my bio better than I ever could. Finally, a platform that gets nuance instead of flattening everyone into five categories.</div>
          <div class="sc-tauthor">
            <div class="sc-tav" style="background:#d0e8f4; color:#1a6a8f;">A</div>
            <div><div class="sc-taname">Aisha K.</div><div class="sc-taloc">Dubai, UAE</div></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- FAQ -->
  <div class="sc-section" id="sc-faq">
    <div class="sc-label">FAQ</div>
    <h2 class="sc-title">Questions we <em>actually</em> get asked</h2>
    <div class="sc-faq">
      <div class="sc-fitem" onclick="scFaq(this)">
        <div class="sc-fq">Is SpiceeChat actually free? <span class="sc-farrow">&#8595;</span></div>
        <div class="sc-fa">Yes. Our models are open source under Apache 2.0 &#8212; free to use, study, and build on. The platform is in early access. No hidden fees, no paywalls on core features.</div>
      </div>
      <div class="sc-fitem" onclick="scFaq(this)">
        <div class="sc-fq">How is this different from a regular dating app? <span class="sc-farrow">&#8595;</span></div>
        <div class="sc-fa">Most dating apps optimise for screen time, not connection. SpiceeChat uses machine learning to understand personality, values, and communication style. Cinder helps you navigate relationships, not just collect matches.</div>
      </div>
      <div class="sc-fitem" onclick="scFaq(this)">
        <div class="sc-fq">What does Cinder actually do? <span class="sc-farrow">&#8595;</span></div>
        <div class="sc-fa">Cinder is your personal AI relationship companion. She helps you understand what you want, gives real advice on dating situations, helps you recover from heartbreak, and supports you through everything in between &#8212; like the friend who always has time and never gets tired of your situationship updates.</div>
      </div>
      <div class="sc-fitem" onclick="scFaq(this)">
        <div class="sc-fq">Is my data private? <span class="sc-farrow">&#8595;</span></div>
        <div class="sc-fa">Completely. We don't sell your data, we don't show ads, and we don't share anything with third parties. Dating is already vulnerable enough &#8212; your data shouldn't be too.</div>
      </div>
      <div class="sc-fitem" onclick="scFaq(this)">
        <div class="sc-fq">Can I use the models in my own app? <span class="sc-farrow">&#8595;</span></div>
        <div class="sc-fa">Yes &#8212; all models are Apache 2.0 and on Hugging Face. Cinder 1.5B and Bio2Tags are free to download, fine-tune, and deploy commercially. We believe in open AI, not walled gardens.</div>
      </div>
    </div>
  </div>
  <!-- CTA -->
  <div id="sc-waitlist">
    <div class="sc-cta">
      <h2>Ready to find something <em>real?</em></h2>
      <p>Join the waitlist. Be among the first to experience dating intelligence that actually works &#8212; and actually cares about you finding what you're looking for.</p>
      <div class="sc-eform">
        <input type="email" id="sc-email" placeholder="your@email.com">
        <button class="sc-btn sc-btn-primary" onclick="scSignup()">Join</button>
      </div>
      <div class="sc-success" id="sc-success">&#10022; You're on the list. We'll be in touch soon.</div>
    </div>
  </div>
  <!-- FOOTER -->
  <div class="sc-footer">
    <div class="sc-flogo">
      <img src="https://huggingface.co/spaces/SpiceeChat/README/resolve/main/SpiceeChat_org_logo.png" alt="SpiceeChat">
      SpiceeChat
    </div>
    <div>
      <a href="https://huggingface.co/SpiceeChat" target="_blank">Hugging Face</a>
      &nbsp;&#183;&nbsp;
      <a href="https://dating-fatigue.com" target="_blank">dating-fatigue.com</a>
      &nbsp;&#183;&nbsp;
      Apache 2.0 License
    </div>
    <div>&#169; 2026 SpiceeChat</div>
  </div>
</div>
<script>
function scSend(btn) {
  var reply = btn.getAttribute('data-reply');
  var question = btn.textContent.trim();
  var btns = document.querySelectorAll('.sc-sugg');
  btns.forEach(function(b) { b.disabled = true; });
  var body = document.getElementById('sc-chat-body');
  var uMsg = document.createElement('div');
  uMsg.className = 'sc-msg user';
  uMsg.innerHTML = '<div class="sc-bubble">' + question + '</div>';
  body.appendChild(uMsg);
  var typing = document.createElement('div');
  typing.className = 'sc-msg ai typing';
  typing.innerHTML = '<div class="sc-bubble">Cinder is typing...</div>';
  body.appendChild(typing);
  body.scrollTop = body.scrollHeight;
  setTimeout(function() {
    body.removeChild(typing);
    var aMsg = document.createElement('div');
    aMsg.className = 'sc-msg ai';
    aMsg.innerHTML = '<div class="sc-bubble">' + reply + '</div>';
    body.appendChild(aMsg);
    body.scrollTop = body.scrollHeight;
    setTimeout(function() {
      btns.forEach(function(b) { b.disabled = false; });
    }, 1000);
  }, 1500);
}
function scSignup() {
  var input = document.getElementById('sc-email');
  var msg = document.getElementById('sc-success');
  if (input.value && input.value.indexOf('@') > -1) {
    input.disabled = true; input.style.opacity = '0.4';
    document.querySelector('.sc-eform button').disabled = true;
    document.querySelector('.sc-eform button').style.opacity = '0.4';
    msg.style.display = 'block';
  } else {
    input.style.borderColor = '#c94b6e';
    setTimeout(function() { input.style.borderColor = ''; }, 1500);
  }
}
function scFaq(el) {
  var isOpen = el.classList.contains('open');
  document.querySelectorAll('.sc-fitem').forEach(function(f) { f.classList.remove('open'); });
  if (!isOpen) el.classList.add('open');
}
</script>
</body>
</html>
"""

# Write the HTML to a static file
STATIC_DIR = "/app/static"

os.makedirs(STATIC_DIR, exist_ok=True)

with open(os.path.join(STATIC_DIR, "index.html"), "w", encoding="utf-8") as f:
    f.write(HTML_CONTENT)

PORT = int(os.environ.get("PORT", 7860))

class Handler(http.server.SimpleHTTPRequestHandler):
    extensions_map = http.server.SimpleHTTPRequestHandler.extensions_map.copy()
    extensions_map.update({
        ".html": "text/html; charset=utf-8",
    })

    def end_headers(self):
        self.send_header("Content-Type", "text/html; charset=utf-8")
        super().end_headers()

    def __init__(self, *args, **kwargs):
        super().__init__(*args, directory=STATIC_DIR, **kwargs)

with socketserver.TCPServer(("0.0.0.0", PORT), Handler) as httpd:
    print(f"SpiceeChat is live on port {PORT}")
    httpd.serve_forever()