-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
1307 lines (1233 loc) · 89.3 KB
/
Copy pathindex.html
File metadata and controls
1307 lines (1233 loc) · 89.3 KB
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
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>缘见 YUANJIAN · 实名制严肃婚恋平台（Demo）</title>
<style>
:root{
--ink:#2f2127; --ink2:#7d6a73; --ink3:#ab97a1;
--plum:#382630; --plum-deep:#2a1c24;
--rose:#c25e7f; --rose-deep:#a84a68; --rose-ghost:rgba(194,94,127,.09);
--amber:#a97b3f;
--serif:"Noto Serif SC","Source Han Serif SC","Songti SC","STZhongsong","SimSun",serif;
--line:rgba(47,33,39,.08);
--r-lg:22px; --r-md:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
font-family:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei UI","Microsoft YaHei",system-ui,sans-serif;
color:var(--ink);line-height:1.75;background:#f6edf1;min-height:100vh;overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
/* 背景光斑 —— 毛玻璃的"被磨砂物" */
.orb{position:fixed;border-radius:50%;pointer-events:none;z-index:-1;filter:blur(70px)}
.orb-1{width:560px;height:560px;background:radial-gradient(circle,#f5aecb 0%,rgba(245,174,203,0) 70%);top:-140px;right:-100px;animation:drift1 22s ease-in-out infinite}
.orb-2{width:480px;height:480px;background:radial-gradient(circle,#d8bff2 0%,rgba(216,191,242,0) 70%);top:36%;left:-160px;animation:drift2 26s ease-in-out infinite}
.orb-3{width:520px;height:520px;background:radial-gradient(circle,#f8cfae 0%,rgba(248,207,174,0) 70%);bottom:-180px;right:12%;animation:drift1 30s ease-in-out infinite reverse}
.orb-4{width:360px;height:360px;background:radial-gradient(circle,#f2a9b8 0%,rgba(242,169,184,0) 70%);top:60%;right:-80px;animation:drift2 24s ease-in-out infinite reverse}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(-60px,50px)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(70px,-40px)}}
/* 磨砂颗粒 */
body::after{
content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.045;
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}
/* ================= 情侣背景 · 鼠标视差 ================= */
.scene{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.sc{position:absolute;will-change:transform}
.sc-glow{inset:-80px;background:
radial-gradient(620px 460px at 76% 74%, rgba(255,206,168,.55), transparent 66%),
radial-gradient(760px 540px at 16% 18%, rgba(244,178,206,.38), transparent 66%)}
.sc-hills{left:-5%;bottom:-2px;width:110%;height:44vh}
.sc-couple{right:3%;bottom:-30px;width:min(600px,54vw)}
@media(max-width:920px){.sc-couple{right:-8%;width:74vw;opacity:.75}}
.sc-petals{inset:0}
.sc-petals span{position:absolute;top:-24px;width:11px;height:13px;background:rgba(226,150,180,.5);border-radius:62% 38% 55% 45%;animation:petal linear infinite}
@keyframes petal{0%{transform:translate(0,-4vh) rotate(0);opacity:0}8%{opacity:1}100%{transform:translate(-12vw,108vh) rotate(320deg);opacity:.2}}
/* ================= 开场进场 ================= */
#intro{position:fixed;inset:0;z-index:96;display:flex;align-items:center;justify-content:center;padding:24px;
background:rgba(246,237,241,.30);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
transition:opacity .95s cubic-bezier(.4,0,.2,1),transform .95s cubic-bezier(.4,0,.2,1),filter .95s ease}
#intro.leaving{opacity:0;transform:scale(1.07);filter:blur(12px);pointer-events:none}
.intro-card{border-radius:30px;padding:46px 52px 38px;width:min(530px,94vw);text-align:center;animation:introIn 1.15s cubic-bezier(.22,.8,.3,1) both}
@keyframes introIn{from{opacity:0;transform:translateY(36px) scale(.97)}to{opacity:1;transform:none}}
.intro-logo b{font-family:var(--serif);font-size:40px;letter-spacing:12px;font-weight:600;padding-left:12px}
.intro-logo span{display:block;font-size:10px;letter-spacing:7px;color:var(--ink3);margin-top:6px;padding-left:7px}
.intro-tag{font-family:var(--serif);font-size:15px;letter-spacing:6px;color:var(--ink2);margin:18px 0 6px;padding-left:6px}
#intro .flow-wrap{text-align:left;margin:16px auto 4px;max-width:390px}
.intro-enter{width:100%;margin-top:20px;padding:14px}
body.gated{overflow:hidden}
header,main,footer{transition:opacity 1s ease,transform 1s cubic-bezier(.22,.8,.3,1)}
main{transition-delay:.08s}
footer{transition-delay:.16s}
body.gated header,body.gated main,body.gated footer{opacity:0;transform:translateY(30px)}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:14px;color:var(--ink)}
::placeholder{color:var(--ink3)}
svg{display:block}
/* 毛玻璃面板 */
.glass{
background:rgba(255,255,255,.42);
backdrop-filter:blur(30px) saturate(1.6);-webkit-backdrop-filter:blur(30px) saturate(1.6);
border:1px solid rgba(255,255,255,.62);
box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 24px 60px -24px rgba(140,70,100,.20);
}
.glass-deep{
background:rgba(255,255,255,.58);
backdrop-filter:blur(34px) saturate(1.6);-webkit-backdrop-filter:blur(34px) saturate(1.6);
border:1px solid rgba(255,255,255,.7);
box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 24px 60px -24px rgba(140,70,100,.22);
}
/* ================= 导航 ================= */
header{position:sticky;top:0;z-index:90;border-bottom:1px solid rgba(255,255,255,.55);
background:rgba(252,246,249,.62);backdrop-filter:blur(26px) saturate(1.5);-webkit-backdrop-filter:blur(26px) saturate(1.5)}
.nav-inner{max-width:1160px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:16px 26px}
.logo{display:flex;align-items:baseline;gap:9px;margin-right:20px;white-space:nowrap}
.logo b{font-family:var(--serif);font-size:21px;letter-spacing:4px;color:var(--ink);font-weight:600}
.logo span{font-size:9.5px;letter-spacing:3.5px;color:var(--ink3)}
.demo-chip{font-size:9.5px;letter-spacing:2px;color:var(--rose-deep);border:1px solid rgba(194,94,127,.35);border-radius:4px;padding:1px 7px;align-self:center}
.nav-tabs{display:flex;gap:26px;flex:1;overflow-x:auto;scrollbar-width:none;justify-content:center}
.nav-tabs::-webkit-scrollbar{display:none}
.nav-tab{font-size:14px;color:var(--ink2);white-space:nowrap;position:relative;padding:4px 0;transition:.25s;letter-spacing:1px}
.nav-tab:hover{color:var(--ink)}
.nav-tab.active{color:var(--rose-deep);font-weight:600}
.nav-tab.active::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-5px;width:4px;height:4px;border-radius:50%;background:var(--rose-deep)}
.btn-nav{padding:9px 22px;border-radius:11px;background:var(--plum);color:#fdf7fa;font-size:13.5px;letter-spacing:1px;white-space:nowrap;transition:.25s}
.btn-nav:hover{background:var(--plum-deep)}
main{max-width:1160px;margin:0 auto;padding:0 26px 100px}
.page{display:none}
.page.active{display:block;animation:fadeUp .35s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
/* ================= 通用 ================= */
.btn{padding:12px 30px;border-radius:12px;font-size:14px;letter-spacing:1.5px;transition:.25s;display:inline-flex;align-items:center;gap:8px;justify-content:center}
.btn-primary{background:var(--plum);color:#fdf7fa}
.btn-primary:hover{background:var(--plum-deep);transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.5);border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{background:rgba(255,255,255,.85)}
.btn-rose{background:var(--rose-deep);color:#fdf7fa}
.btn-rose:hover{background:#93405b}
.link{color:var(--rose-deep);font-size:14px;letter-spacing:1px;border-bottom:1px solid rgba(168,74,104,.35);padding-bottom:2px;transition:.2s}
.link:hover{border-color:var(--rose-deep)}
.chip{display:inline-block;font-size:12px;background:var(--rose-ghost);color:var(--rose-deep);border-radius:99px;padding:3px 12px;margin:2.5px;letter-spacing:.5px}
.chip-muted{background:rgba(47,33,39,.06);color:var(--ink2)}
.badge{display:inline-flex;align-items:center;gap:3px;font-size:11px;padding:2px 9px;border-radius:99px;font-weight:500;letter-spacing:.5px;vertical-align:middle}
.b-ok{background:rgba(122,168,116,.16);color:#4d7a48}
.b-gold{background:rgba(169,123,63,.14);color:var(--amber)}
.b-lilac{background:rgba(150,111,197,.14);color:#7a539e}
.b-gray{background:rgba(47,33,39,.07);color:var(--ink2)}
.b-danger{background:rgba(178,74,74,.12);color:#a04040}
.avatar{border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;flex-shrink:0;position:relative;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.avatar.anon span{filter:blur(5px);opacity:.85}
.avatar.anon::after{content:"🔒";position:absolute;right:-3px;bottom:-3px;font-size:12px}
.muted{color:var(--ink2);font-size:13px}
.tiny{color:var(--ink3);font-size:12px}
.eyebrow{font-size:11px;letter-spacing:5px;color:var(--rose-deep);margin-bottom:14px;text-transform:uppercase}
.sec-head{margin:96px 0 34px}
.sec-head h2{font-family:var(--serif);font-size:clamp(24px,3vw,31px);font-weight:600;letter-spacing:3px;line-height:1.6}
.sec-head p{color:var(--ink2);font-size:14px;margin-top:10px;letter-spacing:1px}
.page-title{font-family:var(--serif);font-size:26px;font-weight:600;letter-spacing:3px;margin:44px 0 6px}
.page-sub{color:var(--ink2);font-size:13.5px;margin-bottom:26px;letter-spacing:1px}
/* ================= 首页 hero ================= */
.hero{min-height:58vh;display:flex;align-items:center;padding:70px 0 30px}
.hero-copy{max-width:580px}
.hero h1{font-family:var(--serif);font-size:clamp(34px,4.6vw,52px);font-weight:600;letter-spacing:5px;line-height:1.6}
.hero h1 em{font-style:normal;color:var(--rose-deep)}
.hero .sub{color:var(--ink2);max-width:500px;margin:26px 0 38px;font-size:15px;letter-spacing:.5px}
.hero-cta{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
/* 遇见流程 · stepper hover 微交互 */
.flow{border-radius:var(--r-lg);padding:36px 38px 26px}
.flow-head{font-size:10.5px;letter-spacing:4px;color:var(--ink3);text-transform:uppercase;margin-bottom:14px}
.flow-wrap{position:relative}
.flow-svg{position:absolute;left:0;top:0;pointer-events:none}
.flow-svg path{fill:none;stroke:rgba(47,33,39,.16);stroke-width:2;stroke-linecap:round;transition:d .55s cubic-bezier(.45,0,.2,1)}
.fstep{position:relative;padding:19px 0 19px 76px;cursor:default;transition:transform .45s cubic-bezier(.45,0,.2,1),opacity .45s ease}
.fstep .dot{position:absolute;left:17px;top:50%;width:14px;height:14px;border-radius:50%;background:#d8cbd1;transform:translateY(-50%);transition:.45s cubic-bezier(.45,0,.2,1)}
.fstep .sn{font-size:9.5px;letter-spacing:2.5px;color:var(--ink3);text-transform:uppercase}
.fstep b{display:block;font-size:16px;letter-spacing:1.5px;margin:1px 0 2px;transition:color .3s}
.fstep p{font-size:12px;color:var(--ink2);letter-spacing:.3px}
.flow-wrap.hovering .fstep{opacity:.38}
.flow-wrap.hovering .fstep.on{opacity:1}
.fstep.on{transform:translateX(26px)}
.fstep.on .dot{background:var(--rose-deep);transform:translateY(-50%) scale(1.3);box-shadow:0 0 0 6px rgba(168,74,104,.10)}
.fstep.on b{color:var(--rose-deep)}
.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);margin-top:88px;border-radius:var(--r-lg);overflow:hidden}
@media(max-width:720px){.stats-strip{grid-template-columns:repeat(2,1fr)}}
.stat{padding:30px 20px;text-align:center;position:relative}
.stat + .stat::before{content:"";position:absolute;left:0;top:26%;height:48%;width:1px;background:var(--line)}
@media(max-width:720px){.stat:nth-child(3)::before{display:none}}
.stat b{display:block;font-family:var(--serif);font-size:30px;font-weight:600;color:var(--plum);letter-spacing:1px;font-feature-settings:"tnum"}
.stat span{font-size:12px;color:var(--ink2);letter-spacing:2px}
/* 信任 */
.trust-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.trust{border-radius:var(--r-lg);padding:30px 26px;transition:.35s}
.trust:hover{transform:translateY(-4px)}
.trust .ico{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:var(--rose-deep);background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);margin-bottom:18px}
.trust h3{font-size:15.5px;letter-spacing:2px;margin-bottom:6px}
.trust p{font-size:12.5px;color:var(--ink2);letter-spacing:.3px}
/* 专区卡（编号编辑风） */
.zones-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.zone-card{border-radius:var(--r-lg);padding:34px 30px 28px;cursor:pointer;transition:.35s;position:relative}
.zone-card:hover{transform:translateY(-5px)}
.zone-card .no{font-family:var(--serif);font-size:15px;color:var(--rose-deep);letter-spacing:2px;opacity:.75}
.zone-card h3{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:2.5px;margin:14px 0 2px}
.zone-card .en{font-size:9.5px;letter-spacing:3.5px;color:var(--ink3);text-transform:uppercase}
.zone-card p{font-size:13px;color:var(--ink2);margin:14px 0 20px;letter-spacing:.3px}
.zone-card .go{font-size:13px;color:var(--rose-deep);letter-spacing:1.5px}
.zone-card .go::after{content:" →";transition:.25s}
.zone-card:hover .go::after{padding-left:4px}
/* 情感标语带 */
.vow{text-align:center;padding:130px 20px 110px}
.vow-jp{font-size:11px;letter-spacing:7px;color:var(--ink3);margin-bottom:26px}
.vow h2{font-family:var(--serif);font-size:clamp(26px,4vw,42px);font-weight:600;letter-spacing:8px;line-height:1.9}
.vow h2 em{font-style:normal;color:var(--rose-deep)}
.vow-sub{color:var(--ink2);font-size:13.5px;margin-top:28px;letter-spacing:3px}
/* 红娘直播 */
.live-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.live-card{border-radius:var(--r-lg);overflow:hidden;cursor:pointer;transition:.35s}
.live-card:hover{transform:translateY(-4px)}
.live-cover{height:118px;position:relative}
.live-dot{position:absolute;top:12px;left:14px;background:rgba(160,64,64,.9);color:#fff;font-size:10.5px;letter-spacing:1.5px;padding:2px 11px;border-radius:99px;animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
.live-views{position:absolute;bottom:10px;right:14px;color:rgba(255,255,255,.95);font-size:11px;letter-spacing:1px;background:rgba(40,25,32,.28);backdrop-filter:blur(6px);padding:2px 10px;border-radius:99px}
.live-info{padding:16px 18px;display:flex;gap:12px;align-items:center}
.live-info b{font-size:14px;letter-spacing:.5px}
/* 线下门店 */
.store-band{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;padding:44px;border-radius:var(--r-lg);align-items:center}
@media(max-width:760px){.store-band{grid-template-columns:1fr}}
.store-band h3{font-family:var(--serif);font-size:21px;font-weight:600;letter-spacing:2.5px;margin-bottom:10px}
.store-band p{font-size:13.5px;color:var(--ink2)}
.store-stats{display:grid;gap:14px}
.ss{border-radius:var(--r-md);padding:16px 22px;background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.65);display:flex;align-items:baseline;gap:12px}
.ss b{font-family:var(--serif);font-size:26px;font-weight:600;color:var(--plum);font-feature-settings:"tnum"}
.ss span{font-size:12px;color:var(--ink2);letter-spacing:1px}
/* 安全带 */
.safety{border-radius:var(--r-lg);padding:32px 38px;display:flex;gap:24px;align-items:flex-start}
.safety .ico{color:var(--amber);flex-shrink:0;margin-top:3px}
.safety h3{font-size:15.5px;letter-spacing:2px;color:#8a6330}
.safety p{font-size:13px;color:var(--ink2);margin-top:6px}
/* 用户故事 */
.stories{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.story{border-radius:var(--r-lg);padding:30px;transition:.35s}
.story:hover{transform:translateY(-4px)}
.story .quote{font-family:var(--serif);font-size:34px;color:var(--rose);line-height:1}
.story p{font-size:13.5px;margin:10px 0 20px;letter-spacing:.3px}
.story .who{display:flex;gap:11px;align-items:center}
/* ================= 专区页 ================= */
.zone-pills{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.zone-pill{padding:9px 22px;border-radius:99px;font-size:13.5px;letter-spacing:1px;color:var(--ink2);background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.65);transition:.25s}
.zone-pill:hover{color:var(--ink)}
.zone-pill.active{background:var(--plum);color:#fdf7fa;border-color:var(--plum)}
.zone-hero{border-radius:var(--r-lg);padding:44px 42px;margin-bottom:20px}
.zone-hero .no{font-family:var(--serif);font-size:14px;color:var(--rose-deep);letter-spacing:2px}
.zone-hero h2{font-family:var(--serif);font-size:27px;font-weight:600;letter-spacing:3px;margin:8px 0 2px}
.zone-hero .en{font-size:10px;letter-spacing:4px;color:var(--ink3);text-transform:uppercase}
.zone-hero p{color:var(--ink2);font-size:14px;max-width:660px;margin-top:14px}
.zone-feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:20px 0}
.zf{border-radius:var(--r-md);padding:22px}
.zf b{font-size:14px;display:block;margin-bottom:5px;letter-spacing:1px}
.zf p{font-size:12.5px;color:var(--ink2)}
.zone-note{border-radius:var(--r-md);padding:16px 22px;font-size:12.5px;color:#8a6330;background:rgba(255,246,232,.6);border:1px dashed rgba(169,123,63,.4);margin:18px 0;backdrop-filter:blur(10px)}
.zone-members h3{font-family:var(--serif);font-size:18px;font-weight:600;letter-spacing:2px;margin:30px 0 16px}
/* ================= 会员卡片 & 翻页 ================= */
.filter-bar{border-radius:var(--r-md);padding:14px 18px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:22px}
.filter-bar select{padding:9px 14px;border:1px solid rgba(255,255,255,.7);border-radius:10px;background:rgba(255,255,255,.6);outline:none;font-size:13px;letter-spacing:.5px}
.filter-bar .count{margin-left:auto;font-size:12.5px;color:var(--ink2);letter-spacing:1px}
.m-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:18px}
.m-card{border-radius:var(--r-lg);padding:24px;position:relative;transition:.35s}
.m-card:hover{transform:translateY(-5px)}
.m-top{display:flex;gap:14px;align-items:center}
.m-top h3{font-size:16px;display:flex;gap:7px;align-items:center;flex-wrap:wrap;letter-spacing:.5px}
.m-intro{font-size:13px;color:var(--ink2);margin:13px 0 10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.m-actions{display:flex;gap:10px;margin-top:15px}
.m-actions .btn{padding:9px 18px;font-size:13px;flex:1;border-radius:10px}
.m-report{position:absolute;top:16px;right:18px;color:var(--ink3);font-size:12px;transition:.2s}
.m-report:hover{color:#a04040}
.pager{display:flex;gap:9px;justify-content:center;margin-top:34px;align-items:center}
.pg{min-width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:13.5px;color:var(--ink2);background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.65);transition:.2s;font-feature-settings:"tnum"}
.pg:hover{color:var(--ink);background:rgba(255,255,255,.75)}
.pg.on{background:var(--plum);color:#fdf7fa;border-color:var(--plum)}
.pg:disabled{opacity:.35;pointer-events:none}
/* ================= 缘分配对（滑卡） ================= */
.spark-wrap{display:flex;flex-direction:column;align-items:center}
.spark-card{width:min(430px,100%);border-radius:26px;overflow:hidden}
.spark-photo{height:320px;display:flex;align-items:center;justify-content:center;position:relative}
.spark-photo .initial{font-family:var(--serif);font-size:100px;color:rgba(255,255,255,.9);font-weight:600;text-shadow:0 8px 30px rgba(0,0,0,.12)}
.spark-photo .pn{position:absolute;bottom:12px;right:14px;font-size:10.5px;letter-spacing:1px;color:rgba(255,255,255,.9);background:rgba(40,25,32,.22);backdrop-filter:blur(6px);padding:2px 10px;border-radius:99px}
.spark-photo .rp{position:absolute;top:14px;right:14px;background:rgba(40,25,32,.24);backdrop-filter:blur(6px);color:#fff;font-size:11.5px;letter-spacing:1px;padding:4px 13px;border-radius:99px}
.spark-match{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.85);backdrop-filter:blur(6px);color:var(--rose-deep);font-size:12px;font-weight:600;letter-spacing:1px;padding:4px 13px;border-radius:99px}
.spark-body{padding:24px 26px 26px}
.spark-name{font-family:var(--serif);font-size:22px;font-weight:600;letter-spacing:1px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.spark-meta{color:var(--ink2);font-size:13px;margin:6px 0 10px;letter-spacing:.5px}
.spark-actions{display:flex;gap:22px;justify-content:center;margin:26px 0 2px}
.act{width:60px;height:60px;border-radius:50%;font-size:22px;display:flex;align-items:center;justify-content:center;transition:.25s}
.act:hover{transform:scale(1.08)}
.act-skip{background:rgba(255,255,255,.7);color:var(--ink3);border:1px solid rgba(255,255,255,.8)}
.act-star{background:rgba(150,111,197,.8);color:#fff}
.act-like{background:var(--rose-deep);color:#fff}
.empty{text-align:center;color:var(--ink2);padding:80px 0;font-size:14px;letter-spacing:1px}
/* ================= 动态 ================= */
.composer{border-radius:var(--r-md);padding:16px 20px;display:flex;gap:14px;margin-bottom:18px;align-items:center}
.composer input{flex:1;border:none;background:transparent;outline:none;font-size:14px}
.feed{display:flex;flex-direction:column;gap:16px;max-width:680px;margin:0 auto}
.post{border-radius:var(--r-lg);padding:26px}
.post-head{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.post-body{font-size:14px;margin-bottom:10px;letter-spacing:.3px}
.post-acts{display:flex;gap:26px;font-size:13px;color:var(--ink2);margin-top:12px}
.post-acts button{color:var(--ink2);transition:.2s;letter-spacing:.5px}
.post-acts button:hover{color:var(--rose-deep)}
.post-acts button.liked{color:var(--rose-deep);font-weight:600}
/* ================= 消息 ================= */
.msg-layout{display:grid;grid-template-columns:300px 1fr;gap:18px;min-height:480px}
@media(max-width:780px){.msg-layout{grid-template-columns:1fr}.chat-pane{min-height:420px}}
.conv-list{border-radius:var(--r-lg);padding:12px;overflow:auto}
.conv{display:flex;gap:12px;align-items:center;padding:13px;border-radius:14px;cursor:pointer;transition:.2s}
.conv:hover{background:rgba(255,255,255,.45)}
.conv.active{background:rgba(255,255,255,.68)}
.conv .preview{font-size:12px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:162px}
.chat-pane{border-radius:var(--r-lg);display:flex;flex-direction:column;overflow:hidden}
.chat-head{padding:16px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.chat-head .ops{margin-left:auto;display:flex;gap:16px}
.chat-head .ops button{font-size:12px;color:var(--ink2);letter-spacing:.5px}
.chat-head .ops button:hover{color:#a04040}
.chat-body{flex:1;padding:22px;overflow:auto;display:flex;flex-direction:column;gap:13px}
.bubble{max-width:72%;padding:11px 17px;border-radius:16px;font-size:13.5px;letter-spacing:.3px}
.bubble.them{background:rgba(255,255,255,.8);align-self:flex-start;border-bottom-left-radius:5px}
.bubble.me{background:var(--plum);color:#fdf7fa;align-self:flex-end;border-bottom-right-radius:5px}
.sys-warn{align-self:center;background:rgba(255,246,232,.75);backdrop-filter:blur(8px);border:1px solid rgba(169,123,63,.3);color:#8a6330;font-size:12px;padding:9px 17px;border-radius:12px;text-align:center;max-width:92%}
.sys-warn button{color:#a04040;font-weight:600;font-size:12px;text-decoration:underline}
.chat-input{display:flex;gap:11px;padding:14px;border-top:1px solid var(--line)}
.chat-input input{flex:1;padding:11px 18px;border:1px solid rgba(255,255,255,.75);border-radius:12px;outline:none;background:rgba(255,255,255,.65)}
.chat-input input:focus{border-color:rgba(168,74,104,.5)}
/* ================= 我的 ================= */
.me-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:18px}
@media(max-width:820px){.me-layout{grid-template-columns:1fr}}
.panel{border-radius:var(--r-lg);padding:30px;margin-bottom:18px}
.panel h3{font-size:15px;letter-spacing:2px;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.me-head{display:flex;gap:16px;align-items:center}
.progress{height:6px;background:rgba(47,33,39,.08);border-radius:99px;overflow:hidden;margin-top:10px}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--rose),var(--rose-deep));border-radius:99px}
.v-item{display:flex;align-items:center;gap:10px;padding:13px 0;border-bottom:1px dashed var(--line);font-size:13.5px;letter-spacing:.3px}
.v-item:last-child{border-bottom:none}
.v-item .go{margin-left:auto;color:var(--rose-deep);font-size:12.5px;letter-spacing:.5px}
.toggle-row{display:flex;align-items:center;padding:12px 0;border-bottom:1px dashed var(--line);font-size:13.5px;letter-spacing:.3px}
.toggle-row:last-child{border-bottom:none}
.switch{margin-left:auto;width:42px;height:24px;border-radius:99px;background:rgba(47,33,39,.15);position:relative;transition:.25s;cursor:pointer;flex-shrink:0}
.switch.on{background:var(--rose-deep)}
.switch i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.25s;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.switch.on i{left:21px}
.viewers{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:8px 0 16px}
.viewer{aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:17px;filter:blur(5px);opacity:.8}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px}
@media(max-width:500px){.plans{grid-template-columns:1fr}}
.plan{border-radius:var(--r-md);padding:22px 14px;text-align:center;border:1px solid rgba(255,255,255,.65);background:rgba(255,255,255,.42);cursor:pointer;transition:.25s;position:relative}
.plan:hover{transform:translateY(-3px);background:rgba(255,255,255,.7)}
.plan.hot{border-color:rgba(168,74,104,.45)}
.plan .tag{position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:1px;background:var(--rose-deep);color:#fff;padding:2px 11px;border-radius:99px;white-space:nowrap}
.plan b{display:block;font-family:var(--serif);font-size:23px;font-weight:600;color:var(--plum);font-feature-settings:"tnum"}
.plan .nm{font-size:13px;font-weight:600;margin-top:3px;letter-spacing:1px}
.plan .per{font-size:11px;color:var(--ink3)}
/* ================= 弹窗 / Toast ================= */
.mask{display:none;position:fixed;inset:0;background:rgba(42,28,36,.42);backdrop-filter:blur(8px);z-index:100;align-items:center;justify-content:center;padding:20px}
.mask.open{display:flex}
.modal{border-radius:24px;width:min(440px,100%);padding:34px;position:relative;animation:pop .25s ease;
background:rgba(253,248,250,.9);backdrop-filter:blur(34px);border:1px solid rgba(255,255,255,.8);
box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 30px 80px -20px rgba(60,30,45,.4)}
@keyframes pop{from{transform:scale(.95);opacity:0}to{transform:none;opacity:1}}
.modal h3{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:2px;margin-bottom:4px}
.modal .close{position:absolute;top:18px;right:20px;font-size:18px;color:var(--ink3)}
.steps-dots{display:flex;gap:8px;margin:16px 0 6px}
.sd{width:28px;height:4px;border-radius:99px;background:rgba(47,33,39,.10)}
.sd.on{background:var(--rose-deep)}
.form-row{margin:16px 0}
.form-row label{font-size:12px;color:var(--ink2);display:block;margin-bottom:7px;letter-spacing:1px}
.form-row input{width:100%;padding:12px 16px;border:1px solid rgba(47,33,39,.12);border-radius:12px;outline:none;background:rgba(255,255,255,.8)}
.form-row input:focus{border-color:rgba(168,74,104,.5)}
.code-row{display:flex;gap:10px}
.code-row button{white-space:nowrap;padding:0 16px;border-radius:12px;background:var(--rose-ghost);color:var(--rose-deep);font-size:13px}
.agree{font-size:12px;color:var(--ink2);display:flex;gap:8px;align-items:flex-start;margin:16px 0}
.agree a{color:var(--rose-deep);text-decoration:none}
.modal .btn-primary{width:100%;padding:13px}
.intent-chips{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0 20px}
.ic{padding:8px 17px;border-radius:99px;font-size:13px;border:1px solid rgba(47,33,39,.13);color:var(--ink2);background:rgba(255,255,255,.6);transition:.2s;letter-spacing:.5px}
.ic.on{background:var(--rose-ghost);border-color:rgba(168,74,104,.5);color:var(--rose-deep);font-weight:600}
.match-modal{text-align:center}
.match-modal .hearts{font-size:46px;animation:beat 1.2s ease infinite}
@keyframes beat{0%,100%{transform:scale(1)}12%{transform:scale(1.12)}24%{transform:scale(1)}}
.report-opt{display:block;width:100%;text-align:left;padding:13px 17px;border:1px solid rgba(47,33,39,.10);border-radius:13px;margin:9px 0;font-size:13.5px;background:rgba(255,255,255,.6);transition:.2s;letter-spacing:.3px}
.report-opt:hover{border-color:rgba(160,64,64,.45);color:#a04040;background:rgba(253,244,244,.85)}
#toast{position:fixed;left:50%;bottom:44px;transform:translateX(-50%) translateY(20px);background:rgba(42,28,36,.92);backdrop-filter:blur(10px);color:#fdf7fa;padding:11px 26px;border-radius:99px;font-size:13px;letter-spacing:.5px;opacity:0;pointer-events:none;transition:.3s;z-index:200;max-width:90%;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%)}
footer{border-top:1px solid rgba(255,255,255,.5);padding:40px 26px;text-align:center;font-size:11.5px;color:var(--ink3);letter-spacing:.5px;background:rgba(252,246,249,.5);backdrop-filter:blur(16px)}
footer p{margin:4px 0}
footer b{color:var(--amber);font-weight:600}
</style>
</head>
<body class="gated">
<div class="orb orb-1"></div><div class="orb orb-2"></div><div class="orb orb-3"></div><div class="orb orb-4"></div>
<!-- ============ 情侣背景（SVG 剪影 · 鼠标摇拉视差） ============ -->
<div class="scene" aria-hidden="true">
<div class="sc sc-glow"></div>
<svg class="sc sc-hills" viewBox="0 0 1440 420" preserveAspectRatio="none">
<path d="M0 300 Q 320 236 700 282 T 1440 262 L 1440 420 L 0 420 Z" fill="rgba(128,74,99,.09)"/>
<path d="M0 352 Q 460 296 880 338 T 1440 322 L 1440 420 L 0 420 Z" fill="rgba(96,52,72,.11)"/>
</svg>
<svg class="sc sc-couple" viewBox="0 0 400 300">
<defs>
<radialGradient id="sunGlow" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="rgba(255,216,176,.9)"/>
<stop offset="100%" stop-color="rgba(255,216,176,0)"/>
</radialGradient>
</defs>
<circle cx="206" cy="158" r="132" fill="url(#sunGlow)"/>
<g fill="#33222c" opacity=".9">
<ellipse cx="211" cy="269" rx="62" ry="4" opacity=".22"/>
<!-- 男生 -->
<circle cx="191" cy="103" r="16.5"/>
<path d="M179 268 L178 190 Q176 145 180 133 Q184 124 192 123 Q201 124 204 133 Q209 145 207 190 L206 268 Z"/>
<!-- 女生（头靠男生肩，裙摆微展） -->
<circle cx="220" cy="123" r="14"/>
<path d="M204 268 Q206 225 210 196 Q212 160 216 146 Q219 139 224 139 Q230 139 233 147 Q237 161 238 196 Q243 225 246 268 Z"/>
<!-- 男生环抱的手臂 -->
<path d="M204 140 Q228 146 240 164 Q246 174 244 184 L235 181 Q236 173 230 165 Q220 152 202 149 Z"/>
<!-- 女生依偎的手臂 -->
<path d="M216 148 Q204 146 196 152 L198 160 Q206 155 217 156 Z"/>
</g>
</svg>
<div class="sc sc-petals">
<span style="left:16%;animation-duration:17s"></span>
<span style="left:38%;width:8px;height:10px;animation-duration:21s;animation-delay:4s"></span>
<span style="left:58%;animation-duration:15s;animation-delay:2s"></span>
<span style="left:76%;width:13px;height:15px;animation-duration:19s;animation-delay:7s"></span>
<span style="left:90%;width:8px;height:9px;animation-duration:23s;animation-delay:11s"></span>
</div>
</div>
<!-- ============ 开场进场页 ============ -->
<div id="intro">
<div class="intro-card glass-deep">
<div class="intro-logo"><b>缘见</b><span>YUANJIAN</span></div>
<p class="intro-tag">遇见，从真实开始</p>
<div class="flow-wrap" id="flowWrap">
<svg class="flow-svg" id="flowSvg"><path id="flowPath" d=""/></svg>
<div class="fstep"><span class="dot"></span><div class="sn">Step 1</div><b>实名注册</b><p>身份证与人脸核验，真实是唯一的入场券</p></div>
<div class="fstep"><span class="dot"></span><div class="sn">Step 2</div><b>真心匹配</b><p>算法与红娘双重牵线，只把认真的人介绍给你</p></div>
<div class="fstep"><span class="dot"></span><div class="sn">Step 3</div><b>安心相处</b><p>反诈守护与隐私保护，把心慢慢交出来</p></div>
<div class="fstep"><span class="dot"></span><div class="sn">Step 4</div><b>奔赴现实</b><p>门店约见与城市活动，让喜欢落地成生活</p></div>
</div>
<button class="btn btn-primary intro-enter" onclick="enterSite()">进入缘见</button>
<p class="tiny" style="margin-top:12px;letter-spacing:2px">按 Enter 键亦可进入</p>
</div>
</div>
<header>
<div class="nav-inner">
<div class="logo"><b>缘见</b><span>YUANJIAN</span></div>
<span class="demo-chip">DEMO</span>
<nav class="nav-tabs">
<button class="nav-tab active" data-page="home">首页</button>
<button class="nav-tab" data-page="zones">专区</button>
<button class="nav-tab" data-page="discover">发现</button>
<button class="nav-tab" data-page="spark">缘分配对</button>
<button class="nav-tab" data-page="feed">动态</button>
<button class="nav-tab" data-page="messages">消息</button>
<button class="nav-tab" data-page="me">我的</button>
</nav>
<button class="btn-nav" onclick="openModal('loginModal')">注册 / 登录</button>
</div>
</header>
<main>
<!-- ==================== 首页 ==================== -->
<section class="page active" id="page-home">
<div class="hero">
<div class="hero-copy">
<div class="eyebrow">Yuanjian · 实名制严肃婚恋</div>
<h1>遇见，<br>从<em>真实</em>开始</h1>
<p class="sub">实名核验、分层专区与持证红娘。从县城到都市，从初婚到再出发，让每一次遇见，都值得认真对待。</p>
<div class="hero-cta">
<button class="btn btn-primary" onclick="openModal('loginModal')">开始遇见</button>
<button class="link" onclick="switchPage('zones')">了解五大专区 →</button>
</div>
</div>
</div>
<div class="stats-strip glass reveal">
<div class="stat"><b>100%</b><span>会员实名核验</span></div>
<div class="stat"><b>320+</b><span>覆盖城市 · 含县域</span></div>
<div class="stat"><b>24h</b><span>人工与智能审核</span></div>
<div class="stat"><b>1v1</b><span>持证红娘陪伴</span></div>
</div>
<div class="sec-head reveal">
<div class="eyebrow">Trust First</div>
<h2>信任，是缘见的第一设计</h2>
<p>四重认证体系，杜绝虚假资料与身份造假</p>
</div>
<div class="trust-row reveal">
<div class="trust glass">
<div class="ico"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="5" width="19" height="14" rx="2.5"/><circle cx="8.3" cy="10.8" r="1.9"/><path d="M5.4 15.8c.6-1.5 1.6-2.3 2.9-2.3s2.3.8 2.9 2.3M14.3 9.6h4.2M14.3 13h4.2"/></svg></div>
<h3>实名认证</h3><p>身份证 + 人脸比对核验，未成年人与身份造假无法注册</p>
</div>
<div class="trust glass">
<div class="ico"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4 2.5 8.4 12 12.8l9.5-4.4L12 4z"/><path d="M6.2 10.9v3.9c0 1.5 2.6 2.8 5.8 2.8s5.8-1.3 5.8-2.8v-3.9"/><path d="M21.5 8.4v5.2"/></svg></div>
<h3>学历认证</h3><p>对接学信网核验，海归学历经教育部留服认证</p>
</div>
<div class="trust glass">
<div class="ico"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 9.2 12 4.2l8.5 5"/><path d="M5.2 10.5V17M9.7 10.5V17M14.3 10.5V17M18.8 10.5V17"/><path d="M3.5 18.2h17M3.5 20.5h17"/></svg></div>
<h3>资产认证</h3><p>房产、车辆与收入流水可选认证，高净值专区准入依据</p>
</div>
<div class="trust glass">
<div class="ico"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="9.3" cy="13.6" r="5"/><circle cx="14.7" cy="13.6" r="5"/><path d="m14.7 5.2 1.4 1.8-1.4 1.7-1.4-1.7z"/></svg></div>
<h3>婚姻状况核验</h3><p>主平台仅限单身（未婚 / 离异 / 丧偶），杜绝隐婚欺骗</p>
</div>
</div>
<div class="sec-head reveal">
<div class="eyebrow">Five Zones</div>
<h2>五大专区，每一种人生都有归处</h2>
<p>不同人群，不同规则，不同氛围 —— 分层运营才是严肃婚恋的解法</p>
</div>
<div class="zones-grid reveal">
<div class="zone-card glass" onclick="gotoZone('city')">
<div class="no">壹 / 01</div>
<h3>同城心动</h3><div class="en">Hometown</div>
<p>面向广大县域与三四线城市：视频相亲直播间、红娘连麦牵线、同城线下相亲会，把"知根知底"搬到线上。</p>
<span class="go">进入专区</span>
</div>
<div class="zone-card glass" onclick="gotoZone('elite')">
<div class="no">贰 / 02</div>
<h3>菁英荟</h3><div class="en">The Circle</div>
<p>面向高净值人群：邀请制 + 资产核验准入，私人红娘管家全程服务，高端线下晚宴，隐私保护严格到极致。</p>
<span class="go">进入专区</span>
</div>
<div class="zone-card glass" onclick="gotoZone('scholar')">
<div class="no">叁 / 03</div>
<h3>知遇 · 高知圈层</h3><div class="en">Academia</div>
<p>高学历实名婚恋：学信网学历认证准入，海归需留服认证。按院校与专业圈层匹配，先有共鸣再谈相遇。</p>
<span class="go">进入专区</span>
</div>
<div class="zone-card glass" onclick="gotoZone('mature')">
<div class="no">肆 / 04</div>
<h3>恰好 · 熟龄</h3><div class="en">Right Time</div>
<p>面向 35+ 与再出发人群：离异 / 带娃友好标签、再婚辅导课堂、无年龄焦虑的社区氛围，成熟的人值得成熟的爱。</p>
<span class="go">进入专区</span>
</div>
<div class="zone-card glass" onclick="gotoZone('jp')">
<div class="no">伍 / 05</div>
<h3>樱缘 · 海外版</h3><div class="en">Sakura En</div>
<p>参考日本 Healmate 模式的已婚者情感陪伴社区：极致匿名、马赛克头像、双重密码。仅在日本等允许的市场运营。</p>
<span class="go">进入专区</span>
</div>
</div>
<div class="vow reveal">
<p class="vow-jp">安心できる出会いを、あなたに</p>
<h2>愿你穿过茫茫人海<br>遇见那个可以<em>安心相处</em>的人</h2>
<p class="vow-sub">不必伪装，也不必着急 —— 真诚的人，终会在真诚的地方相遇</p>
</div>
<div class="sec-head reveal" style="margin-top:0">
<div class="eyebrow">Live Matchmaking</div>
<h2>红娘直播间，视频相亲进行时</h2>
<p>持证红娘连麦牵线，真人真声不照骗，父母亲友也能旁听把关</p>
</div>
<div class="live-row reveal">
<div class="live-card glass" onclick="toast('Demo：进入桃姐的直播间')">
<div class="live-cover" style="background:linear-gradient(150deg,#e8a7bf,#b25a7c)"><span class="live-dot">LIVE</span><span class="live-views">1.2万人在看</span></div>
<div class="live-info"><div class="avatar" style="width:38px;height:38px;font-size:15px;background:linear-gradient(135deg,#e8a7bf,#b25a7c)">桃</div><div><b>桃姐牵线 · 洛阳同城专场</b><p class="tiny">5 位嘉宾正在连麦 · 亲友团旁听中</p></div></div>
</div>
<div class="live-card glass" onclick="toast('Demo：进入王姨的直播间')">
<div class="live-cover" style="background:linear-gradient(150deg,#dfb98a,#a9713f)"><span class="live-dot">LIVE</span><span class="live-views">8600人在看</span></div>
<div class="live-info"><div class="avatar" style="width:38px;height:38px;font-size:15px;background:linear-gradient(135deg,#dfb98a,#a9713f)">王</div><div><b>金牌红娘王姨 · 潍坊相亲大会</b><p class="tiny">今晚 8 点开场 · 已报名 42 人</p></div></div>
</div>
<div class="live-card glass" onclick="toast('Demo：进入小鹿的直播间')">
<div class="live-cover" style="background:linear-gradient(150deg,#a9b4e0,#5a68a9)"><span class="live-dot">LIVE</span><span class="live-views">5400人在看</span></div>
<div class="live-info"><div class="avatar" style="width:38px;height:38px;font-size:15px;background:linear-gradient(135deg,#a9b4e0,#5a68a9)">鹿</div><div><b>小鹿主持 · 高学历海归专场</b><p class="tiny">连麦嘉宾均通过学历认证</p></div></div>
</div>
</div>
<div class="sec-head reveal">
<div class="eyebrow">Online × Offline</div>
<h2>线上相识，线下门店安心见</h2>
<p>重要的见面，永远发生在真实世界</p>
</div>
<div class="store-band glass reveal">
<div>
<h3>缘见 · 城市会客厅</h3>
<p>线上聊得来，线下见面才算数。我们在全国铺设城市门店：红娘面对面服务、资料与婚况现场复核、形象顾问指导，以及安全放心的一对一约见室。</p>
<div style="margin:16px 0 22px"><span class="chip">资料现场复核</span><span class="chip">形象顾问</span><span class="chip">独立约见室</span><span class="chip">红娘陪同初见</span><span class="chip">父母咨询接待</span></div>
<button class="btn btn-primary" onclick="toast('Demo：预约距离最近的城市门店')">预约到店咨询</button>
</div>
<div class="store-stats">
<div class="ss"><b>68</b><span>家城市门店 · 覆盖至县级市</span></div>
<div class="ss"><b>300+</b><span>场每月线下活动（相亲会 / 晚宴 / Citywalk）</span></div>
<div class="ss"><b>96%</b><span>到店见面满意度（示例数据）</span></div>
</div>
</div>
<div style="margin-top:70px" class="reveal">
<div class="safety glass">
<div class="ico"><svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 2.6v4.9c0 4.6-3 8.6-7 10.2-4-1.6-7-5.6-7-10.2V5.6L12 3z"/><path d="m9 11.6 2 2 4-4.1"/></svg></div>
<div>
<h3>反诈是底线 · 平台安全承诺</h3>
<p>聊天内容实时检测"投资 / 理财 / 转账 / 博彩"等风险关键词并即时警示；一键举报 24 小时内处置；涉诈账号永久封禁并配合警方取证。请勿向任何未见面的网友转账。</p>
</div>
</div>
</div>
<div class="sec-head reveal">
<div class="eyebrow">Stories</div>
<h2>他们在缘见找到了答案</h2>
<p>以下为虚构示例故事</p>
</div>
<div class="stories reveal">
<div class="story glass"><div class="quote">“</div><p>在县城工作，圈子太小。在同城心动的直播间里被红娘牵线认识了他，三个月后见了双方父母。</p><div class="who"><div class="avatar" style="width:38px;height:38px;font-size:15px;background:linear-gradient(135deg,#e8a7bf,#b25a7c)">冉</div><div><b style="font-size:13.5px">唐冉冉 · 25</b><div class="tiny">绵阳 · 护士</div></div></div></div>
<div class="story glass"><div class="quote">“</div><p>38 岁离异带娃，本以为很难再开始。恰好专区里没人介意我的过去，现在的他视我女儿如己出。</p><div class="who"><div class="avatar" style="width:38px;height:38px;font-size:15px;background:linear-gradient(135deg,#96bfa0,#4d7a58)">姝</div><div><b style="font-size:13.5px">何静姝 · 38</b><div class="tiny">苏州 · 财务总监</div></div></div></div>
<div class="story glass"><div class="quote">“</div><p>工作太忙没时间社交，菁英荟的私人红娘按我的节奏安排了三次晚宴，第二次就遇到了现在的未婚妻。</p><div class="who"><div class="avatar" style="width:38px;height:38px;font-size:15px;background:linear-gradient(135deg,#a9b4e0,#5a68a9)">言</div><div><b style="font-size:13.5px">陆则言 · 34</b><div class="tiny">香港 · 投行 VP</div></div></div></div>
</div>
</section>
<!-- ==================== 专区 ==================== -->
<section class="page" id="page-zones">
<h2 class="page-title">五大专区</h2>
<p class="page-sub">分层运营 · 不同人群适配不同的规则、定价与氛围</p>
<div class="zone-pills" id="zonePills"></div>
<div id="zoneContent"></div>
</section>
<!-- ==================== 发现（列表 + 翻页） ==================== -->
<section class="page" id="page-discover">
<h2 class="page-title">发现</h2>
<p class="page-sub">按条件浏览已实名核验的会员 · 每页 6 位，支持翻页</p>
<div class="filter-bar glass">
<select id="fZone" onchange="setPage(1)"><option value="">全部专区</option><option value="city">同城心动</option><option value="elite">菁英荟</option><option value="scholar">知遇·高知圈层</option><option value="mature">恰好·熟龄</option><option value="jp">樱缘·海外版</option></select>
<select id="fGender" onchange="setPage(1)"><option value="">性别不限</option><option value="女">女</option><option value="男">男</option></select>
<select id="fAge" onchange="setPage(1)"><option value="">年龄不限</option><option value="20-29">20-29 岁</option><option value="30-39">30-39 岁</option><option value="40-49">40-49 岁</option></select>
<select id="fEdu" onchange="setPage(1)"><option value="">学历不限</option><option>大专</option><option>本科</option><option>硕士</option><option>博士</option></select>
<span class="count" id="fCount"></span>
</div>
<div class="m-grid" id="discoverGrid"></div>
<div class="pager" id="pager"></div>
</section>
<!-- ==================== 缘分配对 ==================== -->
<section class="page" id="page-spark">
<h2 class="page-title" style="text-align:center">今日缘分配对</h2>
<p class="page-sub" style="text-align:center">根据你的择偶条件与行为偏好智能推荐</p>
<div class="spark-wrap" id="sparkWrap"></div>
</section>
<!-- ==================== 动态 ==================== -->
<section class="page" id="page-feed">
<h2 class="page-title">缘分动态</h2>
<p class="page-sub">真实生活的分享，比一百句自我介绍更动人</p>
<div class="feed">
<div class="composer glass">
<div class="avatar" style="width:40px;height:40px;font-size:16px;background:linear-gradient(135deg,#8fa3d1,#54689e)">陈</div>
<input id="postInput" placeholder="分享此刻的生活…（发布前将经过内容审核）">
<button class="btn btn-primary" style="padding:9px 22px;font-size:13px" onclick="publishPost()">发布</button>
</div>
<div id="feedList"></div>
</div>
</section>
<!-- ==================== 消息 ==================== -->
<section class="page" id="page-messages">
<h2 class="page-title">消息</h2>
<p class="page-sub">互相心动后即可畅聊 · 全程风险关键词保护</p>
<div class="msg-layout">
<div class="conv-list glass" id="convList"></div>
<div class="chat-pane glass" id="chatPane"></div>
</div>
</section>
<!-- ==================== 我的 ==================== -->
<section class="page" id="page-me">
<h2 class="page-title">我的</h2>
<p class="page-sub">资料 · 认证 · 隐私 · 会员</p>
<div class="me-layout">
<div>
<div class="panel glass">
<div class="me-head">
<div class="avatar" style="width:64px;height:64px;font-size:25px;background:linear-gradient(135deg,#8fa3d1,#54689e)">陈</div>
<div>
<h3 style="margin:0;font-size:17px;letter-spacing:.5px">陈默（示例用户） <span class="badge b-ok">✓ 已实名</span></h3>
<p class="muted">男 · 29 岁 · 178cm · 上海 · 软件工程师 · 硕士 · 未婚</p>
</div>
</div>
<p class="muted" style="margin-top:18px">资料完整度 <b style="color:var(--rose-deep)">80%</b> · 完善资料可提升 3 倍曝光</p>
<div class="progress"><i style="width:80%"></i></div>
<p style="font-size:13.5px;margin-top:18px;font-weight:600;letter-spacing:1px">我的择偶意向</p>
<div><span class="chip">25-32 岁</span><span class="chip">本科及以上</span><span class="chip">上海 / 杭州</span><span class="chip">单身（未婚或离异均可）</span><span class="chip">希望 2 年内结婚</span></div>
</div>
<div class="panel glass">
<h3>我的认证</h3>
<div class="v-item">实名认证（人脸比对） <span class="badge b-ok">已认证</span></div>
<div class="v-item">学历认证（学信网） <span class="badge b-ok">已认证</span></div>
<div class="v-item">婚姻状况核验 <span class="badge b-ok">单身已核验</span></div>
<div class="v-item">资产认证（菁英荟准入） <span class="badge b-gray">未认证</span><button class="go" onclick="toast('Demo：进入资产认证流程（房产 / 车辆 / 收入流水）')">去认证 ›</button></div>
</div>
<div class="panel glass">
<h3>隐私与安全</h3>
<div class="toggle-row">资料仅对互相心动的人可见 <div class="switch on" onclick="flipSwitch(this)"><i></i></div></div>
<div class="toggle-row">位置模糊化（仅显示到区，防跟踪） <div class="switch on" onclick="flipSwitch(this)"><i></i></div></div>
<div class="toggle-row">相册阅后即焚 <div class="switch" onclick="flipSwitch(this)"><i></i></div></div>
<div class="toggle-row">屏蔽手机通讯录联系人 <div class="switch on" onclick="flipSwitch(this)"><i></i></div></div>
<div class="toggle-row">截屏提醒（对方截屏时通知我） <div class="switch on" onclick="flipSwitch(this)"><i></i></div></div>
</div>
</div>
<div>
<div class="panel glass">
<h3>谁看过我 <span class="badge b-lilac">今日 12 位</span></h3>
<div class="viewers">
<div class="viewer" style="background:linear-gradient(135deg,#e8a7bf,#b25a7c)">苏</div>
<div class="viewer" style="background:linear-gradient(135deg,#96bfa0,#4d7a58)">许</div>
<div class="viewer" style="background:linear-gradient(135deg,#dfb98a,#a9713f)">宋</div>
<div class="viewer" style="background:linear-gradient(135deg,#a9b4e0,#5a68a9)">顾</div>
<div class="viewer" style="background:linear-gradient(135deg,#c3a9e0,#7a54a9)">白</div>
<div class="viewer" style="background:linear-gradient(135deg,#dfa0a0,#a95454)">叶</div>
</div>
<button class="btn btn-ghost" style="width:100%" onclick="toast('Demo：开通会员后可查看完整访客列表')">解锁访客列表</button>
</div>
<div class="panel glass">
<h3>恋爱人格测评</h3>
<p class="muted">32 道题，生成你的恋爱人格报告，匹配互补型伴侣（参考大五人格 + 依恋类型理论）。</p>
<button class="btn btn-ghost" style="margin-top:16px;width:100%" onclick="toast('Demo：进入测评（约 8 分钟）')">开始测评</button>
</div>
<div class="panel glass">
<h3>会员方案</h3>
<div class="plans">
<div class="plan" onclick="toast('Demo：跳转支付（心动月卡 ¥68）')"><b>¥68</b><div class="nm">心动卡</div><div class="per">/ 月</div></div>
<div class="plan hot" onclick="toast('Demo：跳转支付（挚爱季卡 ¥168）')"><span class="tag">多数人的选择</span><b>¥168</b><div class="nm">挚爱卡</div><div class="per">/ 季</div></div>
<div class="plan" onclick="toast('Demo：跳转支付（菁英年卡 ¥488）')"><b>¥488</b><div class="nm">菁英卡</div><div class="per">/ 年</div></div>
</div>
<p class="tiny" style="margin-top:16px">会员权益：查看访客 · 无限心动 · 高级筛选 · 已读回执 · 每周置顶曝光。自动续费可随时一键取消，扣费前 5 日短信提醒。</p>
</div>
<div class="panel glass">
<h3>红娘服务</h3>
<p class="muted">国家认证婚介师 1v1 服务：人工筛选、背景复核、牵线安排、约会指导、情感陪跑。</p>
<button class="btn btn-primary" style="margin-top:16px;width:100%" onclick="toast('Demo：预约红娘顾问，将于 24 小时内联系你')">预约红娘咨询</button>
</div>
</div>
</div>
</section>
</main>
<footer>
<p><b>本页面为产品 Demo 演示</b> — 所有人物、头像、故事、聊天内容均为虚构示例，不涉及任何真实用户。</p>
<p>真实上线需具备：ICP 备案与增值电信业务许可证 · 实名认证体系 · 内容安全审核 · 《用户协议》《隐私政策》《个人信息处理规则》</p>
<p>"樱缘·海外版"所示模式仅适用于日本等法律允许的司法辖区；中国大陆婚恋平台依规仅限单身人士注册。</p>
<p>示例备案号：沪ICP备XXXXXXXX号-1 · 仅面向 18 周岁以上用户 · 谨防网络婚恋诈骗</p>
</footer>
<!-- ============ 注册/登录（三步） ============ -->
<div class="mask" id="loginModal">
<div class="modal">
<button class="close" onclick="closeModal('loginModal')">✕</button>
<h3>加入缘见</h3>
<p class="muted">三步完成注册，全程约 2 分钟</p>
<div class="steps-dots"><div class="sd on" id="sd1"></div><div class="sd" id="sd2"></div><div class="sd" id="sd3"></div></div>
<div id="loginStep1">
<div class="form-row"><label>手机号</label><input id="phoneInput" type="tel" maxlength="11" placeholder="请输入手机号"></div>
<div class="form-row"><label>短信验证码</label>
<div class="code-row"><input type="text" maxlength="6" placeholder="请输入验证码"><button id="codeBtn" onclick="sendCode()">获取验证码</button></div>
</div>
<div class="agree">
<input type="checkbox" id="agreeChk" style="margin-top:3px">
<label for="agreeChk">我已阅读并同意 <a href="javascript:toast('Demo：展示《用户协议》')">《用户协议》</a><a href="javascript:toast('Demo：展示《隐私政策》')">《隐私政策》</a>及<a href="javascript:toast('Demo：展示《个人信息处理规则》')">《个人信息处理规则》</a>，并确认本人年满 18 周岁</label>
</div>
<button class="btn btn-primary" onclick="loginStep(2)">下一步：实名认证</button>
</div>
<div id="loginStep2" style="display:none">
<p class="muted" style="margin-bottom:4px">依法实行实名制。信息仅用于核验，加密存储，绝不展示给其他用户。（Demo 不会上传任何数据）</p>
<div class="form-row"><label>真实姓名</label><input placeholder="请输入身份证姓名"></div>
<div class="form-row"><label>身份证号</label><input maxlength="18" placeholder="请输入 18 位身份证号"></div>
<button class="btn btn-primary" onclick="loginStep(3)">核验并继续</button>
</div>
<div id="loginStep3" style="display:none">
<p class="muted">最后一步：选择你的意向，我们为你推荐合适的专区</p>
<div class="intent-chips">
<button class="ic" onclick="this.classList.toggle('on')">认真结婚</button>
<button class="ic" onclick="this.classList.toggle('on')">先恋爱看看</button>
<button class="ic" onclick="this.classList.toggle('on')">离异再出发</button>
<button class="ic" onclick="this.classList.toggle('on')">同城优先</button>
<button class="ic" onclick="this.classList.toggle('on')">希望对方有房</button>
<button class="ic" onclick="this.classList.toggle('on')">接受带娃</button>
</div>
<button class="btn btn-primary" onclick="finishLogin()">完成，开始遇见</button>
</div>
</div>
</div>
<!-- ============ 配对成功 ============ -->
<div class="mask" id="matchModal">
<div class="modal match-modal">
<button class="close" onclick="closeModal('matchModal')">✕</button>
<div class="hearts">💘</div>
<h3>缘分来了</h3>
<p class="muted" id="matchText">你们互相心动了，快去打个招呼吧</p>
<div style="display:flex;gap:12px;margin-top:24px">
<button class="btn btn-ghost" style="flex:1" onclick="closeModal('matchModal')">继续看看</button>
<button class="btn btn-primary" style="flex:1" onclick="closeModal('matchModal');switchPage('messages')">去聊天</button>
</div>
</div>
</div>
<!-- ============ 举报 ============ -->
<div class="mask" id="reportModal">
<div class="modal">
<button class="close" onclick="closeModal('reportModal')">✕</button>
<h3>举报用户</h3>
<p class="muted">24 小时内核实处理，涉嫌违法将保留证据并配合警方</p>
<button class="report-opt" onclick="doReport('涉嫌诈骗 / 诱导投资转账')">涉嫌诈骗 / 诱导投资转账</button>
<button class="report-opt" onclick="doReport('隐瞒婚姻状况')">隐瞒婚姻状况</button>
<button class="report-opt" onclick="doReport('色情低俗内容')">色情低俗内容</button>
<button class="report-opt" onclick="doReport('广告营销骚扰')">广告营销骚扰</button>
<button class="report-opt" onclick="doReport('资料 / 照片冒用他人')">资料 / 照片冒用他人</button>
</div>
</div>
<div id="toast"></div>
<script>
/* ================= 示例数据（全部为虚构人物） ================= */
const ZONE_NAMES={city:'同城心动',elite:'菁英荟',scholar:'知遇·高知圈层',mature:'恰好·熟龄',jp:'樱缘·海外版'};
const PROFILES=[
/* 同城心动（含县域下沉市场） */
{id:1,zone:'city',name:'苏晚晴',gender:'女',age:28,height:163,city:'上海',edu:'硕士',job:'品牌策划',marital:'未婚',tags:['旅行','烘焙','话剧'],verified:['实名','学历'],likedYou:true,match:92,intro:'认真生活，也认真期待一段稳定的关系。',colors:['#e8a7bf','#b25a7c']},
{id:2,zone:'city',name:'林亦辰',gender:'男',age:30,height:180,city:'上海',edu:'硕士',job:'产品经理',marital:'未婚',tags:['篮球','摄影','美食'],verified:['实名','学历'],likedYou:false,match:88,intro:'性格温和，周末喜欢带着相机到处走走。',colors:['#a9b4e0','#5a68a9']},
{id:3,zone:'city',name:'许青禾',gender:'女',age:26,height:160,city:'潍坊',edu:'本科',job:'小学教师',marital:'未婚',tags:['阅读','瑜伽','猫咪'],verified:['实名','学历'],likedYou:true,match:90,intro:'在老家教书，安稳踏实。希望你也在山东，离家近一点。',colors:['#96bfa0','#4d7a58']},
{id:4,zone:'city',name:'陈拾安',gender:'男',age:27,height:175,city:'洛阳',edu:'大专',job:'汽修连锁店长',marital:'未婚',tags:['钓鱼','养车','撸串'],verified:['实名'],likedYou:false,match:81,intro:'自己带三家店，人实在。想找个本地姑娘好好过日子。',colors:['#8fadc1','#4d7590']},
{id:5,zone:'city',name:'唐冉冉',gender:'女',age:25,height:158,city:'绵阳',edu:'大专',job:'护士',marital:'未婚',tags:['追剧','火锅','跳舞'],verified:['实名'],likedYou:true,match:85,intro:'三班倒的小护士，忙但爱笑。你要能哄我开心呀。',colors:['#e0b4a0','#a9694d']},
{id:6,zone:'city',name:'赵砚',gender:'男',age:29,height:178,city:'赣州',edu:'本科',job:'电商创业',marital:'未婚',tags:['直播','健身','脐橙'],verified:['实名','学历'],likedYou:false,match:79,intro:'回老家做农产品电商，事业刚起步，一起打拼可好？',colors:['#c1b08f','#90784d']},
{id:7,zone:'city',name:'叶南絮',gender:'女',age:27,height:165,city:'成都',edu:'本科',job:'设计师',marital:'未婚',tags:['绘画','露营','电影'],verified:['实名','学历'],likedYou:false,match:87,intro:'成都妹子，爱笑爱生活。希望你真诚，其他都可以慢慢来。',colors:['#dfa0a0','#a95454']},
{id:8,zone:'city',name:'沈从周',gender:'男',age:28,height:182,city:'长沙',edu:'本科',job:'结构工程师',marital:'未婚',tags:['夜跑','茶颜','桌游'],verified:['实名','学历'],likedYou:false,match:83,intro:'工地与写字楼之间来回跑，攒了套小房子，就差你了。',colors:['#8fa3d1','#54689e']},
/* 菁英荟（高净值） */
{id:9,zone:'elite',name:'宋知语',gender:'女',age:29,height:167,city:'深圳',edu:'硕士',job:'律所合伙人',marital:'未婚',tags:['健身','红酒','脱口秀'],verified:['实名','学历','资产'],likedYou:false,match:89,intro:'职业理性，生活感性。相信好的感情是彼此成就。',colors:['#dfb98a','#a9713f']},
{id:10,zone:'elite',name:'温叙白',gender:'男',age:31,height:175,city:'上海',edu:'博士',job:'三甲外科医生',marital:'未婚',tags:['跑步','纪录片','手冲'],verified:['实名','学历','资产'],likedYou:true,match:91,intro:'手术台之外，想有一盏为我留的灯。',colors:['#9aa8bc','#5a6e8c']},
{id:11,zone:'elite',name:'陆则言',gender:'男',age:34,height:181,city:'香港',edu:'硕士',job:'投行 VP',marital:'未婚',tags:['帆船','威士忌','爵士'],verified:['实名','学历','资产'],likedYou:false,match:84,intro:'常年两地飞，希望遇到独立而温柔的你。',colors:['#a9b4e0','#5a68a9']},
{id:12,zone:'elite',name:'顾清梧',gender:'女',age:30,height:170,city:'北京',edu:'硕士',job:'基金经理',marital:'未婚',tags:['马术','古典乐','滑雪'],verified:['实名','学历','资产'],likedYou:false,match:86,intro:'看得懂 K 线，也看得懂人心。希望你有趣且坦荡。',colors:['#c3a9e0','#7a54a9']},
{id:13,zone:'elite',name:'韩沐宸',gender:'男',age:32,height:182,city:'杭州',edu:'本科',job:'创业者（A轮）',marital:'未婚',tags:['骑行','滑雪','烹饪'],verified:['实名','资产'],likedYou:false,match:82,intro:'公司刚融了 A 轮，会做一手好菜，想找个人一起吃遍四季。',colors:['#8fc1b4','#4d9081']},
/* 知遇·高知圈层（高学历 / 海归） */
{id:25,zone:'scholar',name:'江眠',gender:'女',age:28,height:166,city:'北京',edu:'硕士',job:'战略咨询顾问',marital:'未婚',tags:['剑桥海归','美术馆','长跑'],verified:['实名','学历'],likedYou:true,match:93,intro:'剑桥毕业回国三年。希望我们聊得来，也走得远。',colors:['#a9b4e0','#54689e']},
{id:26,zone:'scholar',name:'顾之遥',gender:'男',age:31,height:179,city:'北京',edu:'博士',job:'中科院研究员',marital:'未婚',tags:['天体物理','古琴','纪录片'],verified:['实名','学历'],likedYou:false,match:88,intro:'研究星星的人，也想研究和你的一日三餐。',colors:['#9aa8bc','#4d6590']},
{id:27,zone:'scholar',name:'林知夏',gender:'女',age:29,height:161,city:'上海',edu:'硕士',job:'大学讲师',marital:'未婚',tags:['比较文学','话剧','旧书店'],verified:['实名','学历'],likedYou:false,match:90,intro:'在大学教比较文学。想遇到能一起逛旧书店的人。',colors:['#e0a9b8','#a9546a']},
{id:28,zone:'scholar',name:'沈砚秋',gender:'男',age:33,height:177,city:'深圳',edu:'硕士',job:'算法工程师',marital:'未婚',tags:['MIT海归','攀岩','黑胶'],verified:['实名','学历','资产'],likedYou:false,match:86,intro:'代码写得多，情话说得少，但句句都算数。',colors:['#8fc1b4','#4d9081']},
/* 恰好·熟龄（大龄 / 再出发） */
{id:14,zone:'mature',name:'何静姝',gender:'女',age:38,height:164,city:'苏州',edu:'本科',job:'财务总监',marital:'离异',tags:['烘焙','亲子','园艺'],verified:['实名','学历'],likedYou:true,match:88,intro:'带一个 8 岁的女儿，把日子过得很好，只是想有人分享。',colors:['#96bfa0','#4d7a58']},
{id:15,zone:'mature',name:'周景行',gender:'男',age:41,height:176,city:'北京',edu:'博士',job:'高校教授',marital:'离异',tags:['登山','历史','古典乐'],verified:['实名','学历'],likedYou:false,match:85,intro:'离异五年，无孩。愿与你把后半程走成诗。',colors:['#b0a0d1','#6f549e']},
{id:16,zone:'mature',name:'罗曼',gender:'女',age:35,height:166,city:'重庆',edu:'硕士',job:'主治医师',marital:'未婚',tags:['爬山','火锅','摄影'],verified:['实名','学历'],likedYou:false,match:87,intro:'35 岁未婚不是问题，是我一直没打算将就。',colors:['#e0a0b4','#a9546f']},
{id:17,zone:'mature',name:'郑北望',gender:'男',age:39,height:178,city:'青岛',edu:'本科',job:'船务公司总监',marital:'离异',tags:['出海','啤酒','烧烤'],verified:['实名'],likedYou:false,match:80,intro:'离异无孩，性格直爽。想找个能一起看海的人。',colors:['#8fadc1','#4d7590']},
{id:18,zone:'mature',name:'白茉',gender:'女',age:36,height:162,city:'昆明',edu:'大专',job:'花店主理人',marital:'离异',tags:['插花','旅居','咖啡'],verified:['实名'],likedYou:false,match:83,intro:'开了家小花店，带着儿子。日子有花有茶，缺个你。',colors:['#c3a9e0','#7a54a9']},
{id:19,zone:'mature',name:'傅司年',gender:'男',age:44,height:174,city:'南京',edu:'硕士',job:'建筑师',marital:'丧偶',tags:['素描','老城','慢跑'],verified:['实名','学历'],likedYou:false,match:78,intro:'一个人带女儿七年了。她说，爸爸也该有自己的幸福。',colors:['#a8a8b5','#6e6e8c']},
/* 樱缘·海外版（日本 Healmate 模式 · 匿名） */
{id:20,zone:'jp',name:'小春',gender:'女',age:33,height:158,city:'東京',edu:'-',job:'会社員',marital:'匿名会员',tags:['カフェ','散歩','映画'],verified:['実名(非公開)'],likedYou:false,match:76,intro:'家庭も大切に、心の通う友人を探しています。（寻找心灵相通的朋友）',colors:['#e0b4c8','#a9547f'],anon:true},
{id:21,zone:'jp',name:'凛',gender:'女',age:36,height:162,city:'大阪',edu:'-',job:'デザイナー',marital:'匿名会员',tags:['美術館','ワイン','読書'],verified:['実名(非公開)'],likedYou:false,match:74,intro:'週末のランチと、静かな会話ができる方と。（想找能安静吃顿午餐聊聊天的人）',colors:['#c3a9e0','#7a54a9'],anon:true},
{id:22,zone:'jp',name:'悠真',gender:'男',age:38,height:175,city:'横浜',edu:'-',job:'商社勤務',marital:'匿名会员',tags:['ゴルフ','珈琲','ジャズ'],verified:['実名(非公開)'],likedYou:false,match:72,intro:'日々の疲れを癒せる、大人の友情を。（寻找可以治愈日常疲惫的成年人友谊）',colors:['#8fadc1','#4d7590'],anon:true},
{id:23,zone:'jp',name:'葵',gender:'女',age:35,height:160,city:'名古屋',edu:'-',job:'看護師',marital:'匿名会员',tags:['温泉','料理','音楽'],verified:['実名(非公開)'],likedYou:false,match:75,intro:'話を聞いてくれる優しい方がいれば。（希望有位温柔的倾听者）',colors:['#96bfa0','#4d7a58'],anon:true},
{id:24,zone:'jp',name:'蓮',gender:'男',age:41,height:172,city:'東京',edu:'-',job:'経営者',marital:'匿名会员',tags:['釣り','日本酒','写真'],verified:['実名(非公開)'],likedYou:false,match:71,intro:'お互いの生活を尊重できる関係を。（彼此尊重各自生活的关系）',colors:['#c1b08f','#90784d'],anon:true},
];
const FEED_POSTS=[
{pid:1,likes:36,liked:false,comments:8,text:'周末一个人去爬了佘山，山顶的风比想象中温柔。下次想有人一起。',tag:'#一个人也要好好生活'},
{pid:14,likes:52,liked:false,comments:14,text:'女儿今天问我："妈妈你什么时候也谈恋爱呀？"愣了三秒，笑着说快了。',tag:'#再出发'},
{pid:5,likes:28,liked:false,comments:6,text:'夜班下班，护士站的姐妹给我留了一碗热汤圆。生活苦一点，但总有甜。',tag:'#小城生活'},
{pid:10,likes:44,liked:false,comments:9,text:'连做了三台手术，走出医院时天已经亮了。突然很想有个人说一句"辛苦了"。',tag:'#都市夜归人'},
{pid:7,likes:31,liked:false,comments:5,text:'把新家的阳台改成了小花园，薄荷和柠檬草都活了。欢迎来喝茶（并没有）。',tag:'#生活美学'},
];
const CONVERSATIONS=[
{withId:3,type:'user',msgs:[
{from:'them',text:'你好呀，看到我们互相心动了，你的自我介绍写得很真诚'},
{from:'me',text:'你好你好！看到你喜欢阅读，最近在看什么书？'},
{from:'them',text:'在重读《平凡的世界》，你呢？周末有空可以约个书店咖啡'},
]},
{withId:0,type:'matchmaker',msgs:[
{from:'them',text:'你好，我是你的专属红娘顾问小鹿，已经根据你的择偶意向初筛了 3 位契合的会员'},
{from:'them',text:'其中一位苏女士与你的匹配度达 92%，方便的话我为你们安排一次线下咖啡见面？'},
{from:'me',text:'好呀，麻烦帮我约周六下午～'},
]},
{withId:-1,type:'banned',msgs:[
{from:'them',text:'最近我在做一个数字货币的项目，收益很稳定'},
{from:'sys',text:'安全提醒：对方言论涉及投资理财，婚恋交友中此类话题极可能是"杀猪盘"诈骗。请勿转账。'},
{from:'them',text:'带你一起赚点零花钱，先投 5000 试试？'},
{from:'sys',text:'该账号已被平台封禁，证据已固定并同步反诈中心。'},
]},
];
const SPECIAL_USERS={
0:{name:'红娘顾问 · 小鹿',colors:['#dfb98a','#a9713f'],badge:'<span class="badge b-gold">官方红娘</span>'},
'-1':{name:'流星（已封禁）',colors:['#b5b5bd','#8c8c96'],badge:'<span class="badge b-danger">已封禁</span>'},
};
/* ================= 通用 ================= */
function switchPage(name){
document.querySelectorAll('.nav-tab').forEach(t=>t.classList.toggle('active',t.dataset.page===name));
document.querySelectorAll('.page').forEach(p=>p.classList.toggle('active',p.id==='page-'+name));
window.scrollTo({top:0});
}
document.querySelectorAll('.nav-tab').forEach(t=>t.addEventListener('click',()=>switchPage(t.dataset.page)));
function openModal(id){document.getElementById(id).classList.add('open')}
function closeModal(id){document.getElementById(id).classList.remove('open')}
let toastTimer;
function toast(msg){
const t=document.getElementById('toast');
t.textContent=msg;t.classList.add('show');
clearTimeout(toastTimer);toastTimer=setTimeout(()=>t.classList.remove('show'),2500);
}
function flipSwitch(el){el.classList.toggle('on');toast('Demo：设置已'+(el.classList.contains('on')?'开启':'关闭'))}
function avatarHtml(p,size){
const anon=p.anon?' anon':'';
return `<div class="avatar${anon}" style="width:${size}px;height:${size}px;font-size:${Math.round(size*.4)}px;background:linear-gradient(135deg,${p.colors[0]},${p.colors[1]})"><span>${p.name[0]}</span></div>`;
}
function badges(p){
const map={'实名':'b-ok','学历':'b-gold','资产':'b-lilac','実名(非公開)':'b-lilac'};
return p.verified.map(v=>`<span class="badge ${map[v]||'b-gray'}">✓ ${v}</span>`).join('');
}
function maritalChip(p){
if(p.zone==='jp')return '<span class="chip chip-muted">匿名会员</span>';
return p.marital!=='未婚'?`<span class="chip chip-muted">${p.marital}</span>`:'';
}
/* ================= 会员卡片（发现 & 专区共用） ================= */
function memberCard(p){
return `<div class="m-card glass">
<button class="m-report" onclick="openModal('reportModal')">举报</button>
<div class="m-top">
${avatarHtml(p,54)}
<div>
<h3>${p.anon?p.name+'（匿名）':p.name} <span class="tiny">${p.age}岁</span> ${badges(p)}</h3>
<p class="muted">${p.height?p.height+'cm · ':''}${p.city}${p.edu!=='-'?' · '+p.edu:''} · ${p.job}</p>
</div>
</div>
<p class="m-intro">${p.intro}</p>
<div>${maritalChip(p)}${p.tags.map(t=>`<span class="chip">${t}</span>`).join('')}</div>
<div class="m-actions">
<button class="btn btn-primary" onclick="greet('${p.name}')">${p.zone==='jp'?'匿名问候':'打招呼'}</button>
<button class="btn btn-ghost" onclick="toast('Demo：查看${p.name}的完整资料页')">看资料</button>
</div>
</div>`;
}
function greet(name){toast(`已向 ${name} 发送问候，对方回应后即可开启对话`)}
/* ================= 发现：筛选 + 翻页 ================= */
const PAGE_SIZE=6;
let curPage=1;
function filteredList(){
const z=document.getElementById('fZone').value;
const g=document.getElementById('fGender').value;
const a=document.getElementById('fAge').value;
const e=document.getElementById('fEdu').value;
return PROFILES.filter(p=>{
if(z&&p.zone!==z)return false;
if(g&&p.gender!==g)return false;
if(e&&p.edu!==e)return false;
if(a){const[min,max]=a.split('-').map(Number);if(p.age<min||p.age>max)return false;}
return true;
});
}
function setPage(n){curPage=n;renderDiscover()}
function renderDiscover(){
const list=filteredList();
const pages=Math.max(1,Math.ceil(list.length/PAGE_SIZE));
if(curPage>pages)curPage=pages;
const slice=list.slice((curPage-1)*PAGE_SIZE,curPage*PAGE_SIZE);
document.getElementById('fCount').textContent=`共 ${list.length} 位会员 · 第 ${curPage} / ${pages} 页`;
document.getElementById('discoverGrid').innerHTML=slice.length
?slice.map(memberCard).join('')
:'<div class="empty" style="grid-column:1/-1">没有符合条件的会员，试试放宽筛选</div>';
let html=`<button class="pg" ${curPage===1?'disabled':''} onclick="setPage(${curPage-1})">‹</button>`;
for(let i=1;i<=pages;i++)html+=`<button class="pg ${i===curPage?'on':''}" onclick="setPage(${i})">${i}</button>`;
html+=`<button class="pg" ${curPage===pages?'disabled':''} onclick="setPage(${curPage+1})">›</button>`;
document.getElementById('pager').innerHTML=html;
}
/* ================= 五大专区 ================= */
const ZONES={
city:{
no:'壹 / 01',en:'HOMETOWN',title:'同城心动',
desc:'为县域与三四线城市设计的相亲场域。这里不卷学历不卷资产，讲究知根知底、踏实过日子。红娘直播连麦牵线，双方父母也能旁听把关。',
feats:[
['视频相亲直播间','红娘主持连麦，一场直播见 5-8 位同城会员，真人真声不照骗'],
['红娘连麦牵线','本地持证红娘熟悉十里八乡，牵线前先做背景了解'],
['同城线下相亲会','每月一场县城线下活动，见面才是硬道理'],
['亲友团模式','可邀请父母 / 闺蜜旁听把关，全家放心'],
],
note:null,filter:p=>p.zone==='city',
},
elite:{
no:'贰 / 02',en:'THE CIRCLE',title:'菁英荟',
desc:'邀请制高净值圈层。会员需通过资产核验（房产 / 收入流水 / 企业股权任一）+ 现有会员推荐或人工面审进入。极致隐私：资料默认不公开，仅红娘定向推送。',
feats:[
['邀请制准入','现有会员推荐或人工面审，资产核验为硬门槛'],