Hugging Face's logo

Spaces:
weisiren
/
test
Running

App Files Community
weisiren commited on
Commit
28c32e5
·
verified ·
1 Parent(s): ad54002

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1368 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Test
3
- emoji: ⚡
4
- colorFrom: pink
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: test
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1368 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>育见·视界——女性生育决策实验室</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
11
+
12
+ :root {
13
+ --primary: #E51E86;
14
+ --primary-light: #ff63b8;
15
+ --primary-dark: #b0005e;
16
+ --stats: #3498DB;
17
+ --preference: #9B59B6;
18
+ --environment: #2ECC71;
19
+ --decision: #E67E22;
20
+ --high-will: #FF1493;
21
+ --medium-will: #DA70D6;
22
+ --low-will: #87CEFA;
23
+ --warning: #E74C3C;
24
+ --positive: #27AE60;
25
+ }
26
+
27
+ body {
28
+ font-family: 'Noto Sans SC', sans-serif;
29
+ background-color: #fef6f9;
30
+ color: #333;
31
+ transition: all 0.3s ease;
32
+ }
33
+
34
+ .bg-primary {
35
+ background-color: var(--primary);
36
+ }
37
+
38
+ .text-primary {
39
+ color: var(--primary);
40
+ }
41
+
42
+ .border-primary {
43
+ border-color: var(--primary);
44
+ }
45
+
46
+ .hover-bg-primary:hover {
47
+ background-color: var(--primary);
48
+ }
49
+
50
+ .hover-text-primary:hover {
51
+ color: var(--primary);
52
+ }
53
+
54
+ .card-hover {
55
+ transition: all 0.3s ease;
56
+ transform: translateY(0);
57
+ }
58
+
59
+ .card-hover:hover {
60
+ transform: translateY(-5px);
61
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
62
+ }
63
+
64
+ .breathing-effect {
65
+ animation: breathing 2s infinite ease-in-out;
66
+ }
67
+
68
+ @keyframes breathing {
69
+ 0% { box-shadow: 0 0 0 0 rgba(229, 30, 134, 0.4); }
70
+ 70% { box-shadow: 0 0 0 10px rgba(229, 30, 134, 0); }
71
+ 100% { box-shadow: 0 0 0 0 rgba(229, 30, 134, 0); }
72
+ }
73
+
74
+ .tab-active {
75
+ border-bottom: 3px solid var(--primary);
76
+ font-weight: 500;
77
+ }
78
+
79
+ .parameter-tab {
80
+ transition: all 0.3s ease;
81
+ }
82
+
83
+ .parameter-tab:hover {
84
+ transform: translateY(-2px);
85
+ }
86
+
87
+ .stats-tab {
88
+ background-color: var(--stats);
89
+ }
90
+
91
+ .preference-tab {
92
+ background-color: var(--preference);
93
+ }
94
+
95
+ .environment-tab {
96
+ background-color: var(--environment);
97
+ }
98
+
99
+ .decision-tab {
100
+ background-color: var(--decision);
101
+ }
102
+
103
+ .high-will {
104
+ background-color: var(--high-will);
105
+ }
106
+
107
+ .medium-will {
108
+ background-color: var(--medium-will);
109
+ }
110
+
111
+ .low-will {
112
+ background-color: var(--low-will);
113
+ }
114
+
115
+ .slide-fade-enter-active {
116
+ transition: all 0.3s ease;
117
+ }
118
+
119
+ .slide-fade-leave-active {
120
+ transition: all 0.3s ease;
121
+ }
122
+
123
+ .slide-fade-enter-from,
124
+ .slide-fade-leave-to {
125
+ transform: translateX(20px);
126
+ opacity: 0;
127
+ }
128
+
129
+ .flip-card {
130
+ perspective: 1000px;
131
+ }
132
+
133
+ .flip-card-inner {
134
+ transition: transform 0.6s;
135
+ transform-style: preserve-3d;
136
+ }
137
+
138
+ .flip-card:hover .flip-card-inner {
139
+ transform: rotateY(10deg);
140
+ }
141
+
142
+ .bg-pattern {
143
+ background-image: radial-gradient(var(--primary) 1px, transparent 1px);
144
+ background-size: 20px 20px;
145
+ opacity: 0.1;
146
+ }
147
+
148
+ .tooltip {
149
+ position: relative;
150
+ }
151
+
152
+ .tooltip .tooltip-text {
153
+ visibility: hidden;
154
+ width: 200px;
155
+ background-color: #555;
156
+ color: #fff;
157
+ text-align: center;
158
+ border-radius: 6px;
159
+ padding: 8px;
160
+ position: absolute;
161
+ z-index: 1;
162
+ bottom: 125%;
163
+ left: 50%;
164
+ margin-left: -100px;
165
+ opacity: 0;
166
+ transition: opacity 0.3s;
167
+ }
168
+
169
+ .tooltip:hover .tooltip-text {
170
+ visibility: visible;
171
+ opacity: 1;
172
+ }
173
+
174
+ .range-slider::-webkit-slider-thumb {
175
+ -webkit-appearance: none;
176
+ appearance: none;
177
+ width: 20px;
178
+ height: 20px;
179
+ border-radius: 50%;
180
+ background: var(--primary);
181
+ cursor: pointer;
182
+ }
183
+
184
+ .range-slider::-moz-range-thumb {
185
+ width: 20px;
186
+ height: 20px;
187
+ border-radius: 50%;
188
+ background: var(--primary);
189
+ cursor: pointer;
190
+ }
191
+
192
+ .will-indicator {
193
+ width: 100%;
194
+ height: 10px;
195
+ background: linear-gradient(to right, var(--low-will), var(--medium-will), var(--high-will));
196
+ border-radius: 5px;
197
+ }
198
+
199
+ .will-marker {
200
+ position: absolute;
201
+ top: -5px;
202
+ width: 20px;
203
+ height: 20px;
204
+ background-color: white;
205
+ border: 2px solid var(--primary);
206
+ border-radius: 50%;
207
+ transform: translateX(-50%);
208
+ }
209
+
210
+ .dna-bg {
211
+ position: absolute;
212
+ width: 100%;
213
+ height: 100%;
214
+ background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23E51E86' fill-opacity='0.2' fill-rule='evenodd'/%3E%3C/svg%3E");
215
+ }
216
+ </style>
217
+ </head>
218
+ <body class="min-h-screen">
219
+ <div id="app" class="min-h-screen flex flex-col">
220
+ <!-- Role Selection Page -->
221
+ <div id="role-page" class="min-h-screen flex flex-col p-8">
222
+ <header class="mb-8">
223
+ <h1 class="text-3xl font-bold text-primary">育见·视界——女性生育决策实验室</h1>
224
+ </header>
225
+
226
+ <main class="flex-grow flex flex-col items-center justify-center">
227
+ <h2 class="text-2xl font-semibold mb-8 text-gray-700">请选择您的角色</h2>
228
+
229
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full max-w-6xl">
230
+ <!-- Role 1 -->
231
+ <div class="flip-card">
232
+ <div class="flip-card-inner bg-white rounded-xl shadow-md overflow-hidden card-hover breathing-effect" data-role="1">
233
+ <div class="p-6 flex flex-col h-full">
234
+ <div class="flex items-center mb-4">
235
+ <div class="w-16 h-16 rounded-full bg-pink-100 flex items-center justify-center mr-4">
236
+ <i class="fas fa-briefcase text-xl text-primary"></i>
237
+ </div>
238
+ <div>
239
+ <h3 class="text-lg font-semibold">高教育高收入已婚专业人士</h3>
240
+ <p class="text-sm text-gray-500">32岁 | 已婚 | 博士</p>
241
+ </div>
242
+ </div>
243
+ <div class="flex-grow">
244
+ <div class="flex items-center mb-2">
245
+ <span class="w-4 h-4 rounded-full bg-primary mr-2"></span>
246
+ <span class="text-sm">高级管理人员</span>
247
+ </div>
248
+ <div class="flex items-center mb-2">
249
+ <span class="w-4 h-4 rounded-full bg-primary mr-2"></span>
250
+ <span class="text-sm">年收入 > 50万</span>
251
+ </div>
252
+ <div class="flex items-center">
253
+ <span class="w-4 h-4 rounded-full bg-primary mr-2"></span>
254
+ <span class="text-sm">一线城市</span>
255
+ </div>
256
+ </div>
257
+ <div class="mt-4 pt-4 border-t border-gray-100">
258
+ <div class="flex justify-between items-center">
259
+ <span class="text-sm font-medium">生育意愿</span>
260
+ <div class="w-24 h-2 bg-gray-200 rounded-full overflow-hidden">
261
+ <div class="h-full bg-primary" style="width: 70%"></div>
262
+ </div>
263
+ </div>
264
+ </div>
265
+ </div>
266
+ </div>
267
+ </div>
268
+
269
+ <!-- Role 2 -->
270
+ <div class="flip-card">
271
+ <div class="flip-card-inner bg-white rounded-xl shadow-md overflow-hidden card-hover" data-role="2">
272
+ <div class="p-6 flex flex-col h-full">
273
+ <div class="flex items-center mb-4">
274
+ <div class="w-16 h-16 rounded-full bg-pink-100 flex items-center justify-center mr-4">
275
+ <i class="fas fa-user-tie text-xl text-primary"></i>
276
+ </div>
277
+ <div>
278
+ <h3 class="text-lg font-semibold">中等教育中等收入已婚职员</h3>
279
+ <p class="text-sm text-gray-500">28岁 | 已婚 | 本科</p>
280
+ </div>
281
+ </div>
282
+ <div class="flex-grow">
283
+ <div class="flex items-center mb-2">
284
+ <span class="w-4 h-4 rounded-full bg-primary mr-2"></span>
285
+ <span class="text-sm">办公室职员</span>
286
+ </div>
287
+ <div class="flex items-center mb-2">
288
+ <span class="w-4 h-4 rounded-full bg-primary mr-2"></span>
289
+ <span class="text-sm">年收入 15-30万</span>
290
+ </div>
291
+ <div class="flex items-center">
292
+ <span class="w-4 h-4 rounded-full bg-primary mr-2"></span>
293
+ <span class="text-sm">二线城市</span>
294
+ </div>
295
+ </div>
296
+ <div class="mt-4 pt-4 border-t border-gray-100">
297
+ <div class="flex justify-between items-center">
298
+ <span class="text-sm font-medium">生育意愿</span>
299
+ <div class="w-24 h-2 bg-gray-200 rounded-full overflow-hidden">
300
+ <div class="h-full bg-primary" style="width: 60%"></div>
301
+ </div>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </div>
306
+ </div>
307
+
308
+ <!-- Role 3 -->
309
+ <div class="flip-card">
310
+ <div class="flip-card-inner bg-white rounded-xl shadow-md overflow-hidden card-hover" data-role="3">
311
+ <div class="p-6 flex flex-col h-full">
312
+ <div class="flex items-center mb-4">
313
+ <div class="w-16 h-16 rounded-full bg-pink-100 flex items-center justify-center mr-4">
314
+ <i class="fas fa-user-graduate text-xl text-primary"></i>
315
+ </div>
316
+ <div>
317
+ <h3 class="text-lg font-semibold">高教育中等收入单身专业人士</h3>
318
+ <p class="text-sm text-gray-500">30岁 | 单身 | 硕士</p>
319
+ </div>
320
+ </div>
321
+ <div class="flex-grow">
322
+ <div class="flex items-center mb-2">
323
+ <span class="w-4 h-4 rounded-full bg-primary mr-2"></span>
324
+ <span class="text-sm">专业技术人员</span>
325
+ </div>
326
+ <div class="flex items-center mb-2">
327
+ <span class="w-4 h-4 rounded-full bg-primary mr-2"></span>
328
+ <span class="text-sm">年收入 20-40万</span>
329
+ </div>
330
+ <div class="flex items-center">
331
+ <span class="w-4 h-4 rounded-full bg-primary mr-2"></span>
332
+ <span class="text-sm">一线城市</span>
333
+ </div>
334
+ </div>
335
+ <div class="mt-4 pt-4 border-t border-gray-100">
336
+ <div class="flex justify-between items-center">
337
+ <span class="text-sm font-medium">生育意愿</span>
338
+ <div class="w-24 h-2 bg-gray-200 rounded-full overflow-hidden">
339
+ <div class="h-full bg-primary" style="width: 40%"></div>
340
+ </div>
341
+ </div>
342
+ </div>
343
+ </div>
344
+ </div>
345
+ </div>
346
+
347
+ <!-- Role 4 -->
348
+ <div class="flip-card">
349
+ <div class="flip-card-inner bg-white rounded-xl shadow-md overflow-hidden card-hover" data-role="4">
350
+ <div class="p-6 flex flex-col h-full">
351
+ <div class="flex items-center mb-4">
352
+ <div class="w-16 h-16 rounded-full bg-pink-100 flex items-center justify-center mr-4">
353
+ <i class="fas fa-hard-hat text-xl text-primary"></i>
354
+ </div>
355
+ <div>
356
+ <h3 class="text-lg font-semibold">低教育低收入已婚工人</h3>
357
+ <p class="text-sm text-gray-500">35岁 | 已婚 | 高中</p>
358
+ </div>
359
+ </div>
360
+ <div class="flex-grow">
361
+ <div class="flex items-center mb-2">
362
+ <span class="w-4 h-4 rounded-full bg-primary mr-2"></span>
363
+ <span class="text-sm">工厂工人</span>
364
+ </div>
365
+ <div class="flex items-center mb-2">
366
+ <span class="w-4 h-4 rounded-full bg-primary mr-2"></span>
367
+ <span class="text-sm">年收入 < 10万</span>
368
+ </div>
369
+ <div class="flex items-center">
370
+ <span class="w-4 h-4 rounded-full bg-primary mr-2"></span>
371
+ <span class="text-sm">三线城市</span>
372
+ </div>
373
+ </div>
374
+ <div class="mt-4 pt-4 border-t border-gray-100">
375
+ <div class="flex justify-between items-center">
376
+ <span class="text-sm font-medium">生育意愿</span>
377
+ <div class="w-24 h-2 bg-gray-200 rounded-full overflow-hidden">
378
+ <div class="h-full bg-primary" style="width: 80%"></div>
379
+ </div>
380
+ </div>
381
+ </div>
382
+ </div>
383
+ </div>
384
+ </div>
385
+
386
+ <!-- Role 5 -->
387
+ <div class="flip-card">
388
+ <div class="flip-card-inner bg-white rounded-xl shadow-md overflow-hidden card-hover" data-role="5">
389
+ <div class="p-6 flex flex-col h-full">
390
+ <div class="flex items-center mb-4">
391
+ <div class="w-16 h-16 rounded-full bg-pink-100 flex items-center justify-center mr-4">
392
+ <i class="fas fa-lightbulb text-xl text-primary"></i>
393
+ </div>
394
+ <div>
395
+ <h3 class="text-lg font-semibold">高教育高收入单身创业者</h3>
396
+ <p class="text-sm text-gray-500">33岁 | 单身 | MBA</p>
397
+ </div>
398
+ </div>
399
+ <div class="flex-grow">
400
+ <div class="flex items-center mb-2">
401
+ <span class="w-4 h-4 rounded-full bg-primary mr-2"></span>
402
+ <span class="text-sm">��技公司创始人</span>
403
+ </div>
404
+ <div class="flex items-center mb-2">
405
+ <span class="w-4 h-4 rounded-full bg-primary mr-2"></span>
406
+ <span class="text-sm">年收入 > 100万</span>
407
+ </div>
408
+ <div class="flex items-center">
409
+ <span class="w-4 h-4 rounded-full bg-primary mr-2"></span>
410
+ <span class="text-sm">一线城市</span>
411
+ </div>
412
+ </div>
413
+ <div class="mt-4 pt-4 border-t border-gray-100">
414
+ <div class="flex justify-between items-center">
415
+ <span class="text-sm font-medium">生育意愿</span>
416
+ <div class="w-24 h-2 bg-gray-200 rounded-full overflow-hidden">
417
+ <div class="h-full bg-primary" style="width: 30%"></div>
418
+ </div>
419
+ </div>
420
+ </div>
421
+ </div>
422
+ </div>
423
+ </div>
424
+
425
+ <!-- Role 6 -->
426
+ <div class="flip-card">
427
+ <div class="flip-card-inner bg-white rounded-xl shadow-md overflow-hidden card-hover" data-role="6">
428
+ <div class="p-6 flex flex-col h-full">
429
+ <div class="flex items-center mb-4">
430
+ <div class="w-16 h-16 rounded-full bg-pink-100 flex items-center justify-center mr-4">
431
+ <i class="fas fa-user-friends text-xl text-primary"></i>
432
+ </div>
433
+ <div>
434
+ <h3 class="text-lg font-semibold">中等教育低收入单亲家长</h3>
435
+ <p class="text-sm text-gray-500">36岁 | 离异 | 大专</p>
436
+ </div>
437
+ </div>
438
+ <div class="flex-grow">
439
+ <div class="flex items-center mb-2">
440
+ <span class="w-4 h-4 rounded-full bg-primary mr-2"></span>
441
+ <span class="text-sm">服务行业</span>
442
+ </div>
443
+ <div class="flex items-center mb-2">
444
+ <span class="w-4 h-4 rounded-full bg-primary mr-2"></span>
445
+ <span class="text-sm">年收入 < 8万</span>
446
+ </div>
447
+ <div class="flex items-center">
448
+ <span class="w-4 h-4 rounded-full bg-primary mr-2"></span>
449
+ <span class="text-sm">二线城市</span>
450
+ </div>
451
+ </div>
452
+ <div class="mt-4 pt-4 border-t border-gray-100">
453
+ <div class="flex justify-between items-center">
454
+ <span class="text-sm font-medium">生育意愿</span>
455
+ <div class="w-24 h-2 bg-gray-200 rounded-full overflow-hidden">
456
+ <div class="h-full bg-primary" style="width: 20%"></div>
457
+ </div>
458
+ </div>
459
+ </div>
460
+ </div>
461
+ </div>
462
+ </div>
463
+
464
+ <!-- Role 7 - Custom -->
465
+ <div class="flip-card">
466
+ <div class="flip-card-inner bg-white rounded-xl shadow-md overflow-hidden card-hover" data-role="7">
467
+ <div class="p-6 flex flex-col h-full">
468
+ <div class="flex items-center mb-4">
469
+ <div class="w-16 h-16 rounded-full bg-pink-100 flex items-center justify-center mr-4">
470
+ <i class="fas fa-user-edit text-xl text-primary"></i>
471
+ </div>
472
+ <div>
473
+ <h3 class="text-lg font-semibold">自定义角色</h3>
474
+ <p class="text-sm text-gray-500">自定义您的个人资料</p>
475
+ </div>
476
+ </div>
477
+ <div class="flex-grow flex items-center justify-center">
478
+ <div class="text-center">
479
+ <i class="fas fa-sliders-h text-3xl text-primary mb-2"></i>
480
+ <p class="text-sm">自定义所有参数</p>
481
+ </div>
482
+ </div>
483
+ <div class="mt-4 pt-4 border-t border-gray-100">
484
+ <div class="flex justify-between items-center">
485
+ <span class="text-sm font-medium">生育意愿</span>
486
+ <div class="w-24 h-2 bg-gray-200 rounded-full overflow-hidden">
487
+ <div class="h-full bg-gray-400" style="width: 50%"></div>
488
+ </div>
489
+ </div>
490
+ </div>
491
+ </div>
492
+ </div>
493
+ </div>
494
+ </div>
495
+ </main>
496
+
497
+ <footer class="mt-8 flex justify-between">
498
+ <button id="random-role" class="px-6 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-gray-700 font-medium flex items-center">
499
+ <i class="fas fa-random mr-2"></i> 随机角色
500
+ </button>
501
+ <button id="enter-params" class="px-6 py-2 bg-primary hover:bg-primary-dark rounded-full text-white font-medium flex items-center">
502
+ 点击进入 <i class="fas fa-arrow-right ml-2"></i>
503
+ </button>
504
+ </footer>
505
+ </div>
506
+
507
+ <!-- Parameter Settings Page -->
508
+ <div id="params-page" class="min-h-screen hidden p-8">
509
+ <header class="mb-8">
510
+ <h1 class="text-3xl font-bold text-primary">参数设置</h1>
511
+ </header>
512
+
513
+ <div class="flex flex-col lg:flex-row flex-grow gap-6">
514
+ <!-- Left Decoration Area -->
515
+ <div class="hidden lg:block lg:w-1/6 relative">
516
+ <div class="dna-bg"></div>
517
+ <div class="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-center">
518
+ <div class="w-40 h-40 rounded-full bg-pink-50 flex items-center justify-center mb-6">
519
+ <i class="fas fa-user-md text-5xl text-primary"></i>
520
+ </div>
521
+ <div class="w-40 h-40 rounded-full bg-pink-50 flex items-center justify-center">
522
+ <i class="fas fa-baby-carriage text-5xl text-primary"></i>
523
+ </div>
524
+ </div>
525
+ </div>
526
+
527
+ <!-- Center Parameter Area -->
528
+ <div class="lg:w-4/6">
529
+ <div class="bg-white rounded-xl shadow-md p-6 h-full">
530
+ <h2 class="text-xl font-semibold mb-6 text-gray-700">参数设置</h2>
531
+
532
+ <!-- Tabs -->
533
+ <div class="flex mb-6 border-b border-gray-200">
534
+ <button class="parameter-tab stats-tab text-white px-4 py-2 rounded-t-lg mr-2 tab-active" data-tab="stats">
535
+ 基本人口统计
536
+ </button>
537
+ <button class="parameter-tab preference-tab text-white px-4 py-2 rounded-t-lg mr-2" data-tab="preference">
538
+ 生育偏好
539
+ </button>
540
+ <button class="parameter-tab environment-tab text-white px-4 py-2 rounded-t-lg mr-2" data-tab="environment">
541
+ 环境因素
542
+ </button>
543
+ <button class="parameter-tab decision-tab text-white px-4 py-2 rounded-t-lg" data-tab="decision">
544
+ 决策参数
545
+ </button>
546
+ </div>
547
+
548
+ <!-- Tab Content -->
549
+ <div class="tab-content">
550
+ <!-- Stats Tab -->
551
+ <div id="stats-tab" class="tab-pane active">
552
+ <div class="space-y-6">
553
+ <!-- Age -->
554
+ <div class="parameter-group">
555
+ <div class="flex justify-between items-center mb-2">
556
+ <label class="font-medium">年龄</label>
557
+ <span class="text-sm text-gray-500 tooltip">
558
+ <i class="fas fa-info-circle"></i>
559
+ <span class="tooltip-text">年龄影响生育能力和生物钟</span>
560
+ </span>
561
+ </div>
562
+ <div class="flex items-center">
563
+ <span class="text-sm text-gray-500 mr-2">20</span>
564
+ <input type="range" min="20" max="45" value="30" class="w-full range-slider" id="age-slider">
565
+ <span class="text-sm text-gray-500 ml-2">45</span>
566
+ </div>
567
+ <div class="text-right mt-1">
568
+ <span class="text-sm font-medium" id="age-value">30</span>
569
+ <span class="text-sm text-gray-500">岁</span>
570
+ </div>
571
+ </div>
572
+
573
+ <!-- Education -->
574
+ <div class="parameter-group">
575
+ <div class="flex justify-between items-center mb-2">
576
+ <label class="font-medium">教育水平</label>
577
+ <span class="text-sm text-gray-500 tooltip">
578
+ <i class="fas fa-info-circle"></i>
579
+ <span class="tooltip-text">教育水平影响职业发展机会</span>
580
+ </span>
581
+ </div>
582
+ <select class="w-full p-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary">
583
+ <option value="high-school">高中</option>
584
+ <option value="vocational">职校</option>
585
+ <option value="bachelor" selected>本科</option>
586
+ <option value="master">硕士</option>
587
+ <option value="phd">博士</option>
588
+ </select>
589
+ </div>
590
+
591
+ <!-- Income -->
592
+ <div class="parameter-group">
593
+ <div class="flex justify-between items-center mb-2">
594
+ <label class="font-medium">收入水平</label>
595
+ <span class="text-sm text-gray-500 tooltip">
596
+ <i class="fas fa-info-circle"></i>
597
+ <span class="tooltip-text">收入水平影响财务稳定性</span>
598
+ </span>
599
+ </div>
600
+ <div class="flex items-center">
601
+ <span class="text-sm text-gray-500 mr-2">低</span>
602
+ <input type="range" min="1" max="5" value="3" class="w-full range-slider" id="income-slider">
603
+ <span class="text-sm text-gray-500 ml-2">高</span>
604
+ </div>
605
+ <div class="flex justify-between mt-1">
606
+ <span class="text-xs text-gray-500">1级</span>
607
+ <span class="text-xs text-gray-500">2级</span>
608
+ <span class="text-xs text-gray-500">3级</span>
609
+ <span class="text-xs text-gray-500">4级</span>
610
+ <span class="text-xs text-gray-500">5级</span>
611
+ </div>
612
+ </div>
613
+
614
+ <!-- Marital Status -->
615
+ <div class="parameter-group">
616
+ <div class="flex justify-between items-center mb-2">
617
+ <label class="font-medium">婚姻状况</label>
618
+ <span class="text-sm text-gray-500 tooltip">
619
+ <i class="fas fa-info-circle"></i>
620
+ <span class="tooltip-text">婚姻状况影响伴侣可用性</span>
621
+ </span>
622
+ </div>
623
+ <div class="grid grid-cols-2 gap-2">
624
+ <label class="inline-flex items-center p-2 border border-gray-300 rounded-md cursor-pointer">
625
+ <input type="radio" name="marital-status" value="single" class="form-radio text-primary">
626
+ <span class="ml-2">单身</span>
627
+ </label>
628
+ <label class="inline-flex items-center p-2 border border-gray-300 rounded-md cursor-pointer">
629
+ <input type="radio" name="marital-status" value="dating" class="form-radio text-primary">
630
+ <span class="ml-2">恋爱中</span>
631
+ </label>
632
+ <label class="inline-flex items-center p-2 border border-gray-300 rounded-md cursor-pointer">
633
+ <input type="radio" name="marital-status" value="married" checked class="form-radio text-primary">
634
+ <span class="ml-2">已婚</span>
635
+ </label>
636
+ <label class="inline-flex items-center p-2 border border-gray-300 rounded-md cursor-pointer">
637
+ <input type="radio" name="marital-status" value="divorced" class="form-radio text-primary">
638
+ <span class="ml-2">离异</span>
639
+ </label>
640
+ </div>
641
+ </div>
642
+ </div>
643
+ </div>
644
+
645
+ <!-- Preference Tab -->
646
+ <div id="preference-tab" class="tab-pane hidden">
647
+ <div class="space-y-6">
648
+ <!-- Fertility Will -->
649
+ <div class="parameter-group">
650
+ <div class="flex justify-between items-center mb-2">
651
+ <label class="font-medium">生育意愿</label>
652
+ <span class="text-sm text-gray-500 tooltip">
653
+ <i class="fas fa-info-circle"></i>
654
+ <span class="tooltip-text">生育意愿是决策的基础动机</span>
655
+ </span>
656
+ </div>
657
+ <div class="flex items-center">
658
+ <span class="text-sm text-gray-500 mr-2">低</span>
659
+ <input type="range" min="1" max="10" value="5" class="w-full range-slider" id="will-slider">
660
+ <span class="text-sm text-gray-500 ml-2">高</span>
661
+ </div>
662
+ <div class="flex justify-between mt-1">
663
+ <span class="text-xs text-gray-500">1</span>
664
+ <span class="text-xs text-gray-500">2</span>
665
+ <span class="text-xs text-gray-500">3</span>
666
+ <span class="text-xs text-gray-500">4</span>
667
+ <span class="text-xs text-gray-500">5</span>
668
+ <span class="text-xs text-gray-500">6</span>
669
+ <span class="text-xs text-gray-500">7</span>
670
+ <span class="text-xs text-gray-500">8</span>
671
+ <span class="text-xs text-gray-500">9</span>
672
+ <span class="text-xs text-gray-500">10</span>
673
+ </div>
674
+ </div>
675
+
676
+ <!-- Max Children -->
677
+ <div class="parameter-group">
678
+ <div class="flex justify-between items-center mb-2">
679
+ <label class="font-medium">最大期望子女数</label>
680
+ <span class="text-sm text-gray-500 tooltip">
681
+ <i class="fas fa-info-circle"></i>
682
+ <span class="tooltip-text">您希望拥有的最多孩子数量</span>
683
+ </span>
684
+ </div>
685
+ <div class="flex items-center justify-center space-x-4">
686
+ <button class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-700 hover:bg-primary hover:text-white">
687
+ -
688
+ </button>
689
+ <span class="text-xl font-medium" id="children-value">2</span>
690
+ <button class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-700 hover:bg-primary hover:text-white">
691
+ +
692
+ </button>
693
+ </div>
694
+ </div>
695
+
696
+ <!-- Career-Family Priority -->
697
+ <div class="parameter-group">
698
+ <div class="flex justify-between items-center mb-2">
699
+ <label class="font-medium">职业与家庭优先级</label>
700
+ <span class="text-sm text-gray-500 tooltip">
701
+ <i class="fas fa-info-circle"></i>
702
+ <span class="tooltip-text">您如何平衡职业发展与家庭生活</span>
703
+ </span>
704
+ </div>
705
+ <div class="flex items-center">
706
+ <span class="text-sm text-gray-500 mr-2">职业</span>
707
+ <input type="range" min="0" max="100" value="50" class="w-full range-slider" id="priority-slider">
708
+ <span class="text-sm text-gray-500 ml-2">家庭</span>
709
+ </div>
710
+ <div class="flex justify-between mt-1">
711
+ <span class="text-xs text-gray-500">0%</span>
712
+ <span class="text-xs text-gray-500">25%</span>
713
+ <span class="text-xs text-gray-500">50%</span>
714
+ <span class="text-xs text-gray-500">75%</span>
715
+ <span class="text-xs text-gray-500">100%</span>
716
+ </div>
717
+ </div>
718
+ </div>
719
+ </div>
720
+
721
+ <!-- Environment Tab -->
722
+ <div id="environment-tab" class="tab-pane hidden">
723
+ <div class="space-y-6">
724
+ <!-- Healthcare Access -->
725
+ <div class="parameter-group">
726
+ <div class="flex justify-between items-center mb-2">
727
+ <label class="font-medium">医疗保健可及性</label>
728
+ <span class="text-sm text-gray-500 tooltip">
729
+ <i class="fas fa-info-circle"></i>
730
+ <span class="tooltip-text">您所在地区的医疗资源质量</span>
731
+ </span>
732
+ </div>
733
+ <div class="flex items-center justify-between">
734
+ <div class="rating">
735
+ <input type="radio" name="healthcare" value="1" class="mask mask-star bg-yellow-400" />
736
+ <input type="radio" name="healthcare" value="2" class="mask mask-star bg-yellow-400" />
737
+ <input type="radio" name="healthcare" value="3" class="mask mask-star bg-yellow-400" checked />
738
+ <input type="radio" name="healthcare" value="4" class="mask mask-star bg-yellow-400" />
739
+ <input type="radio" name="healthcare" value="5" class="mask mask-star bg-yellow-400" />
740
+ </div>
741
+ </div>
742
+ </div>
743
+
744
+ <!-- Social Pressure -->
745
+ <div class="parameter-group">
746
+ <div class="flex justify-between items-center mb-2">
747
+ <label class="font-medium">社会压力水平</label>
748
+ <span class="text-sm text-gray-500 tooltip">
749
+ <i class="fas fa-info-circle"></i>
750
+ <span class="tooltip-text">来自家庭和社会的生育期望</span>
751
+ </span>
752
+ </div>
753
+ <div class="flex items-center">
754
+ <span class="text-sm text-gray-500 mr-2">低</span>
755
+ <input type="range" min="1" max="3" value="2" class="w-full range-slider" id="pressure-slider">
756
+ <span class="text-sm text-gray-500 ml-2">高</span>
757
+ </div>
758
+ <div class="flex justify-between mt-1">
759
+ <span class="text-xs text-gray-500">低</span>
760
+ <span class="text-xs text-gray-500">中</span>
761
+ <span class="text-xs text-gray-500">高</span>
762
+ </div>
763
+ </div>
764
+
765
+ <!-- Partner Support -->
766
+ <div class="parameter-group">
767
+ <div class="flex justify-between items-center mb-2">
768
+ <label class="font-medium">伴侣支持水平</label>
769
+ <span class="text-sm text-gray-500 tooltip">
770
+ <i class="fas fa-info-circle"></i>
771
+ <span class="tooltip-text">伴侣在育儿方面的参与度</span>
772
+ </span>
773
+ </div>
774
+ <div class="flex items-center">
775
+ <span class="text-sm text-gray-500 mr-2">低</span>
776
+ <input type="range" min="1" max="3" value="2" class="w-full range-slider" id="support-slider">
777
+ <span class="text-sm text-gray-500 ml-2">高</span>
778
+ </div>
779
+ <div class="flex justify-between mt-1">
780
+ <span class="text-xs text-gray-500">低</span>
781
+ <span class="text-xs text-gray-500">中</span>
782
+ <span class="text-xs text-gray-500">高</span>
783
+ </div>
784
+ </div>
785
+ </div>
786
+ </div>
787
+
788
+ <!-- Decision Tab -->
789
+ <div id="decision-tab" class="tab-pane hidden">
790
+ <div class="space-y-6">
791
+ <!-- Planning Horizon -->
792
+ <div class="parameter-group">
793
+ <div class="flex justify-between items-center mb-2">
794
+ <label class="font-medium">规划周期</label>
795
+ <span class="text-sm text-gray-500 tooltip">
796
+ <i class="fas fa-info-circle"></i>
797
+ <span class="tooltip-text">您考虑生育决策的时间框架</span>
798
+ </span>
799
+ </div>
800
+ <select class="w-full p-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary">
801
+ <option value="6">6个月</option>
802
+ <option value="12">12个月</option>
803
+ <option value="24" selected>24个月</option>
804
+ <option value="36">36个月</option>
805
+ <option value="48">48个月</option>
806
+ <option value="60">60个月</option>
807
+ </select>
808
+ </div>
809
+
810
+ <!-- Reassessment Frequency -->
811
+ <div class="parameter-group">
812
+ <div class="flex justify-between items-center mb-2">
813
+ <label class="font-medium">重新评估频率</label>
814
+ <span class="text-sm text-gray-500 tooltip">
815
+ <i class="fas fa-info-circle"></i>
816
+ <span class="tooltip-text">您重新评估生育决策的间隔</span>
817
+ </span>
818
+ </div>
819
+ <select class="w-full p-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary">
820
+ <option value="monthly">月度</option>
821
+ <option value="quarterly" selected>季度</option>
822
+ <option value="semiannual">半年</option>
823
+ <option value="annual">年度</option>
824
+ </select>
825
+ </div>
826
+
827
+ <!-- Financial Threshold -->
828
+ <div class="parameter-group">
829
+ <div class="flex justify-between items-center mb-2">
830
+ <label class="font-medium">财务稳定阈值</label>
831
+ <span class="text-sm text-gray-500 tooltip">
832
+ <i class="fas fa-info-circle"></i>
833
+ <span class="tooltip-text">您认为生育所需的最低经济条件</span>
834
+ </span>
835
+ </div>
836
+ <div class="flex items-center">
837
+ <span class="text-sm text-gray-500 mr-2">低</span>
838
+ <input type="range" min="1" max="3" value="2" class="w-full range-slider" id="threshold-slider">
839
+ <span class="text-sm text-gray-500 ml-2">高</span>
840
+ </div>
841
+ <div class="flex justify-between mt-1">
842
+ <span class="text-xs text-gray-500">低</span>
843
+ <span class="text-xs text-gray-500">中</span>
844
+ <span class="text-xs text-gray-500">高</span>
845
+ </div>
846
+ </div>
847
+ </div>
848
+ </div>
849
+ </div>
850
+ </div>
851
+ </div>
852
+
853
+ <!-- Right Character Preview -->
854
+ <div class="lg:w-1/6">
855
+ <div class="bg-white rounded-xl shadow-md p-6 h-full">
856
+ <h2 class="text-xl font-semibold mb-4 text-gray-700">角色预览</h2>
857
+
858
+ <div class="flex flex-col items-center mb-6">
859
+ <div class="w-24 h-24 rounded-full bg-pink-100 flex items-center justify-center mb-4">
860
+ <i class="fas fa-user text-3xl text-primary"></i>
861
+ </div>
862
+ <div class="text-center">
863
+ <h3 class="font-medium" id="preview-name">高教育中等收入已婚职员</h3>
864
+ <p class="text-sm text-gray-500" id="preview-age">28岁 | 已婚 | 本科</p>
865
+ </div>
866
+ </div>
867
+
868
+ <div class="space-y-4">
869
+ <div>
870
+ <div class="flex justify-between text-sm mb-1">
871
+ <span>生育意愿指数</span>
872
+ <span class="font-medium" id="preview-will">60%</span>
873
+ </div>
874
+ <div class="will-indicator relative">
875
+ <div class="will-marker" style="left: 60%;"></div>
876
+ </div>
877
+ </div>
878
+
879
+ <div>
880
+ <div class="flex justify-between text-sm mb-1">
881
+ <span>职业-家庭平衡</span>
882
+ <span class="font-medium" id="preview-balance">职业 50% | 家庭 50%</span>
883
+ </div>
884
+ <div class="w-full bg-gray-200 rounded-full h-2">
885
+ <div class="bg-gradient-to-r from-blue-500 to-pink-500 h-2 rounded-full" style="width: 100%"></div>
886
+ </div>
887
+ </div>
888
+
889
+ <div class="pt-4 border-t border-gray-100">
890
+ <h4 class="text-sm font-medium mb-2">主要影响因素</h4>
891
+ <div class="flex flex-wrap gap-2">
892
+ <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">收入水平</span>
893
+ <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full">生育意愿</span>
894
+ <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">医疗资源</span>
895
+ </div>
896
+ </div>
897
+ </div>
898
+ </div>
899
+ </div>
900
+ </div>
901
+
902
+ <footer class="mt-8 flex justify-between">
903
+ <button id="back-to-role" class="px-6 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-gray-700 font-medium flex items-center">
904
+ <i class="fas fa-arrow-left mr-2"></i> 返回
905
+ </button>
906
+ <div class="flex space-x-4">
907
+ <button id="random-params" class="px-6 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-gray-700 font-medium flex items-center">
908
+ <i class="fas fa-random mr-2"></i> 随机参数
909
+ </button>
910
+ <button id="enter-scenarios" class="px-6 py-2 bg-primary hover:bg-primary-dark rounded-full text-white font-medium flex items-center">
911
+ 继续 <i class="fas fa-arrow-right ml-2"></i>
912
+ </button>
913
+ </div>
914
+ </footer>
915
+ </div>
916
+
917
+ <!-- Scenario Selection Page -->
918
+ <div id="scenario-page" class="min-h-screen hidden p-8">
919
+ <header class="mb-8">
920
+ <h1 class="text-3xl font-bold text-primary">模拟决策</h1>
921
+ </header>
922
+
923
+ <div class="flex flex-col lg:flex-row flex-grow gap-6">
924
+ <!-- Left Card Library -->
925
+ <div class="lg:w-1/4">
926
+ <div class="bg-white rounded-xl shadow-md p-6 h-full">
927
+ <h2 class="text-xl font-semibold mb-4 text-gray-700">事件卡牌库</h2>
928
+
929
+ <div class="flex overflow-x-auto lg:overflow-x-visible lg:flex-col space-x-4 lg:space-x-0 lg:space-y-4 pb-4 lg:pb-0">
930
+ <!-- Category Tabs -->
931
+ <div class="flex lg:flex-col space-x-2 lg:space-x-0 lg:space-y-2 mb-4">
932
+ <button class="category-tab px-4 py-2 bg-blue-100 text-blue-800 rounded-lg active" data-category="career">
933
+ 职业转折点
934
+ </button>
935
+ <button class="category-tab px-4 py-2 bg-green-100 text-green-800 rounded-lg" data-category="health">
936
+ 健康因素
937
+ </button>
938
+ <button class="category-tab px-4 py-2 bg-yellow-100 text-yellow-800 rounded-lg" data-category="economic">
939
+ 经济环境
940
+ </button>
941
+ <button class="category-tab px-4 py-2 bg-purple-100 text-purple-800 rounded-lg" data-category="social">
942
+ 社会关系
943
+ </button>
944
+ </div>
945
+
946
+ <!-- Career Events -->
947
+ <div id="career-cards" class="category-cards space-y-4">
948
+ <div class="scenario-card p-4 bg-blue-50 rounded-lg border border-blue-100 cursor-pointer" data-id="career1">
949
+ <h3 class="font-medium text-blue-800">产后回归晋升机会</h3>
950
+ <p class="text-sm text-blue-600">测试职业发展与育儿平衡</p>
951
+ </div>
952
+ <div class="scenario-card p-4 bg-blue-50 rounded-lg border border-blue-100 cursor-pointer" data-id="career2">
953
+ <h3 class="font-medium text-blue-800">海外工作机会</h3>
954
+ <p class="text-sm text-blue-600">测试地理迁移对生育决策的影响</p>
955
+ </div>
956
+ <div class="scenario-card p-4 bg-blue-50 rounded-lg border border-blue-100 cursor-pointer" data-id="career3">
957
+ <h3 class="font-medium text-blue-800">创业机会</h3>
958
+ <p class="text-sm text-blue-600">测试职业风险与生育计划的关系</p>
959
+ </div>
960
+ </div>
961
+
962
+ <!-- Health Events -->
963
+ <div id="health-cards" class="category-cards hidden space-y-4">
964
+ <div class="scenario-card p-4 bg-green-50 rounded-lg border border-green-100 cursor-pointer" data-id="health1">
965
+ <h3 class="font-medium text-green-800">幼儿急诊与工作冲突</h3>
966
+ <p class="text-sm text-green-600">测试医疗资源获取</p>
967
+ </div>
968
+ <div class="scenario-card p-4 bg-green-50 rounded-lg border border-green-100 cursor-pointer" data-id="health2">
969
+ <h3 class="font-medium text-green-800">生育健康问题</h3>
970
+ <p class="text-sm text-green-600">测试医疗条件对决策的影响</p>
971
+ </div>
972
+ <div class="scenario-card p-4 bg-green-50 rounded-lg border border-green-100 cursor-pointer" data-id="health3">
973
+ <h3 class="font-medium text-green-800">家族遗传疾病风险</h3>
974
+ <p class="text-sm text-green-600">测试健康风险评估</p>
975
+ </div>
976
+ </div>
977
+
978
+ <!-- Economic Events -->
979
+ <div id="economic-cards" class="category-cards hidden space-y-4">
980
+ <div class="scenario-card p-4 bg-yellow-50 rounded-lg border border-yellow-100 cursor-pointer" data-id="economic1">
981
+ <h3 class="font-medium text-yellow-800">房贷利率上涨冲击</h3>
982
+ <p class="text-sm text-yellow-600">测试经济压力</p>
983
+ </div>
984
+ <div class="scenario-card p-4 bg-yellow-50 rounded-lg border border-yellow-100 cursor-pointer" data-id="economic2">
985
+ <h3 class="font-medium text-yellow-800">育儿补贴政策变化</h3>
986
+ <p class="text-sm text-yellow-600">测试政策支持</p>
987
+ </div>
988
+ <div class="scenario-card p-4 bg-yellow-50 rounded-lg border border-yellow-100 cursor-pointer" data-id="economic3">
989
+ <h3 class="font-medium text-yellow-800">家庭收入波动</h3>
990
+ <p class="text-sm text-yellow-600">测试财务不确定性</p>
991
+ </div>
992
+ </div>
993
+
994
+ <!-- Social Events -->
995
+ <div id="social-cards" class="category-cards hidden space-y-4">
996
+ <div class="scenario-card p-4 bg-purple-50 rounded-lg border border-purple-100 cursor-pointer" data-id="social1">
997
+ <h3 class="font-medium text-purple-800">家庭生育期望</h3>
998
+ <p class="text-sm text-purple-600">测试社会压力应对</p>
999
+ </div>
1000
+ <div class="scenario-card p-4 bg-purple-50 rounded-lg border border-purple-100 cursor-pointer" data-id="social2">
1001
+ <h3 class="font-medium text-purple-800">伴侣育儿分工变化</h3>
1002
+ <p class="text-sm text-purple-600">测试伴侣支持水平</p>
1003
+ </div>
1004
+ <div class="scenario-card p-4 bg-purple-50 rounded-lg border border-purple-100 cursor-pointer" data-id="social3">
1005
+ <h3 class="font-medium text-purple-800">社区育儿资源</h3>
1006
+ <p class="text-sm text-purple-600">测试社会支持网络</p>
1007
+ </div>
1008
+ </div>
1009
+ </div>
1010
+ </div>
1011
+ </div>
1012
+
1013
+ <!-- Center Selected Scenarios -->
1014
+ <div class="lg:w-2/4">
1015
+ <div class="bg-white rounded-xl shadow-md p-6 h-full">
1016
+ <div class="flex justify-between items-center mb-6">
1017
+ <h2 class="text-xl font-semibold text-gray-700">已选择的情景事件</h2>
1018
+ <div class="text-sm text-gray-500">
1019
+ <span id="selected-count">0</span>/5
1020
+ </div>
1021
+ </div>
1022
+
1023
+ <div id="selected-scenarios" class="grid grid-cols-1 gap-4 min-h-[400px]">
1024
+ <div class="flex items-center justify-center h-full">
1025
+ <div class="text-center text-gray-400">
1026
+ <i class="fas fa-hand-pointer text-3xl mb-2"></i>
1027
+ <p>从左侧选择事件添加到模拟中</p>
1028
+ <p class="text-sm">最多可选择5个事件</p>
1029
+ </div>
1030
+ </div>
1031
+ </div>
1032
+ </div>
1033
+ </div>
1034
+
1035
+ <!-- Right Scenario Details -->
1036
+ <div class="lg:w-1/4">
1037
+ <div class="bg-white rounded-xl shadow-md p-6 h-full">
1038
+ <h2 class="text-xl font-semibold mb-4 text-gray-700">事件详情</h2>
1039
+
1040
+ <div id="scenario-details" class="text-center text-gray-400">
1041
+ <i class="fas fa-info-circle text-3xl mb-2"></i>
1042
+ <p>点击事件查看详情</p>
1043
+ </div>
1044
+
1045
+ <div id="scenario-impact" class="mt-6 hidden">
1046
+ <h3 class="font-medium mb-2">影响参数</h3>
1047
+ <div class="space-y-3">
1048
+ <div>
1049
+ <div class="flex justify-between text-sm mb-1">
1050
+ <span>生育意愿</span>
1051
+ <span class="font-medium">-10%</span>
1052
+ </div>
1053
+ <div class="w-full bg-gray-200 rounded-full h-2">
1054
+ <div class="bg-pink-500 h-2 rounded-full" style="width: 30%"></div>
1055
+ </div>
1056
+ </div>
1057
+
1058
+ <div>
1059
+ <div class="flex justify-between text-sm mb-1">
1060
+ <span>职业发展</span>
1061
+ <span class="font-medium">-15%</span>
1062
+ </div>
1063
+ <div class="w-full bg-gray-200 rounded-full h-2">
1064
+ <div class="bg-blue-500 h-2 rounded-full" style="width: 45%"></div>
1065
+ </div>
1066
+ </div>
1067
+
1068
+ <div>
1069
+ <div class="flex justify-between text-sm mb-1">
1070
+ <span>财务稳定</span>
1071
+ <span class="font-medium">-5%</span>
1072
+ </div>
1073
+ <div class="w-full bg-gray-200 rounded-full h-2">
1074
+ <div class="bg-yellow-500 h-2 rounded-full" style="width: 25%"></div>
1075
+ </div>
1076
+ </div>
1077
+ </div>
1078
+
1079
+ <div class="mt-6">
1080
+ <h3 class="font-medium mb-2">系统建议</h3>
1081
+ <div class="bg-pink-50 border border-pink-100 rounded-lg p-3 text-sm text-pink-800">
1082
+ 此事件可能对您的职业发展产生较大影响，建议优先考虑职业规划。
1083
+ </div>
1084
+ </div>
1085
+ </div>
1086
+ </div>
1087
+ </div>
1088
+ </div>
1089
+
1090
+ <footer class="mt-8 flex justify-between">
1091
+ <button id="back-to-params" class="px-6 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-gray-700 font-medium flex items-center">
1092
+ <i class="fas fa-arrow-left mr-2"></i> 返回
1093
+ </button>
1094
+ <div class="flex space-x-4">
1095
+ <button id="random-scenarios" class="px-6 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-gray-700 font-medium flex items-center">
1096
+ <i class="fas fa-random mr-2"></i> 随机事件
1097
+ </button>
1098
+ <button id="enter-decision" class="px-6 py-2 bg-primary hover:bg-primary-dark rounded-full text-white font-medium flex items-center">
1099
+ 继续 <i class="fas fa-arrow-right ml-2"></i>
1100
+ </button>
1101
+ </div>
1102
+ </footer>
1103
+ </div>
1104
+
1105
+ <!-- Decision Simulation Page -->
1106
+ <div id="decision-page" class="min-h-screen hidden p-8">
1107
+ <header class="mb-8">
1108
+ <h1 class="text-3xl font-bold text-primary">决策模拟</h1>
1109
+ </header>
1110
+
1111
+ <div class="flex flex-col lg:flex-row flex-grow gap-6">
1112
+ <!-- Left Character & Scenario Overview -->
1113
+ <div class="lg:w-1/4">
1114
+ <div class="bg-white rounded-xl shadow-md p-6 h-full">
1115
+ <h2 class="text-xl font-semibold mb-4 text-gray-700">角色与情景概览</h2>
1116
+
1117
+ <div class="flex flex-col items-center mb-6">
1118
+ <div class="w-20 h-20 rounded-full bg-pink-100 flex items-center justify-center mb-4">
1119
+ <i class="fas fa-user text-2xl text-primary"></i>
1120
+ </div>
1121
+ <div class="text-center">
1122
+ <h3 class="font-medium">高教育中等收入已婚职员</h3>
1123
+ <p class="text-sm text-gray-500">28岁 | 已婚 | 本科</p>
1124
+ </div>
1125
+ </div>
1126
+
1127
+ <div class="space-y-4 mb-6">
1128
+ <div>
1129
+ <div class="flex justify-between text-sm mb-1">
1130
+ <span>生育意愿指数</span>
1131
+ <span class="font-medium">60%</span>
1132
+ </div>
1133
+ <div class="will-indicator relative">
1134
+ <div class="will-marker" style="left: 60%;"></div>
1135
+ </div>
1136
+ </div>
1137
+
1138
+ <div>
1139
+ <h4 class="text-sm font-medium mb-2">主要影响因素</h4>
1140
+ <div class="flex flex-wrap gap-2">
1141
+ <span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">收入水平</span>
1142
+ <span class="px-2 py-1 bg-purple-100 text-purple-800 text-xs rounded-full">生育意愿</span>
1143
+ <span class="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full">医疗资源</span>
1144
+ </div>
1145
+ </div>
1146
+ </div>
1147
+
1148
+ <div>
1149
+ <h3 class="font-medium mb-2">已选情景事件</h3>
1150
+ <div class="space-y-3">
1151
+ <div class="p-3 bg-blue-50 rounded-lg border border-blue-100">
1152
+ <h4 class="text-sm font-medium text-blue-800">产后回归晋升机会</h4>
1153
+ <p class="text-xs text-blue-600">测试职业发展与育儿平衡</p>
1154
+ </div>
1155
+ <div class="p-3 bg-yellow-50 rounded-lg border border-yellow-100">
1156
+ <h4 class="text-sm font-medium text-yellow-800">房贷利率上涨冲击</h4>
1157
+ <p class="text-xs text-yellow-600">测试经济压力</p>
1158
+ </div>
1159
+ </div>
1160
+ </div>
1161
+ </div>
1162
+ </div>
1163
+
1164
+ <!-- Center Decision Options -->
1165
+ <div class="lg:w-2/4">
1166
+ <div class="bg-white rounded-xl shadow-md p-6 h-full">
1167
+ <h2 class="text-xl font-semibold mb-6 text-gray-700">生育决策选项</h2>
1168
+
1169
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
1170
+ <!-- Option 1 -->
1171
+ <div class="decision-option p-4 bg-white rounded-xl border-2 border-pink-200 hover:border-pink-300 cursor-pointer transition-all">
1172
+ <div class="flex items-start">
1173
+ <div class="w-10 h-10 rounded-full bg-pink-100 flex items-center justify-center mr-3">
1174
+ <i class="fas fa-baby text-pink-500"></i>
1175
+ </div>
1176
+ <div>
1177
+ <h3 class="font-medium">立即生育</h3>
1178
+ <p class="text-sm text-gray-500">测试高生育意愿和紧迫感</p>
1179
+ </div>
1180
+ </div>
1181
+ <div class="mt-3">
1182
+ <div class="flex justify-between text-xs mb-1">
1183
+ <span>生育意愿强度</span>
1184
+ <span class="font-medium">高</span>
1185
+ </div>
1186
+ <div class="w-full bg-gray-200 rounded-full h-2">
1187
+ <div class="bg-pink-500 h-2 rounded-full" style="width: 90%"></div>
1188
+ </div>
1189
+ </div>
1190
+ </div>
1191
+
1192
+ <!-- Option 2 -->
1193
+ <div class="decision-option p-4 bg-white rounded-xl border-2 border-pink-100 hover:border-pink-300 cursor-pointer transition-all">
1194
+ <div class="flex items-start">
1195
+ <div class="w-10 h-10 rounded-full bg-pink-50 flex items-center justify-center mr-3">
1196
+ <i class="fas fa-calendar-check text-pink-400"></i>
1197
+ </div>
1198
+ <div>
1199
+ <h3 class="font-medium">一年内生育</h3>
1200
+ <p class="text-sm text-gray-500">测试短期规划和准备</p>
1201
+ </div>
1202
+ </div>
1203
+ <div class="mt-3">
1204
+ <div class="flex justify-between text-xs mb-1">
1205
+ <span>生育意愿强度</span>
1206
+ <span class="font-medium">中高</span>
1207
+ </div>
1208
+ <div class="w-full bg-gray-200 rounded-full h-2">
1209
+ <div class="bg-pink-400 h-2 rounded-full" style="width: 75%"></div>
1210
+ </div>
1211
+ </div>
1212
+ </div>
1213
+
1214
+ <!-- Option 3 -->
1215
+ <div class="decision-option p-4 bg-white rounded-xl border-2 border-purple-100 hover:border-purple-300 cursor-pointer transition-all">
1216
+ <div class="flex items-start">
1217
+ <div class="w-10 h-10 rounded-full bg-purple-50 flex items-center justify-center mr-3">
1218
+ <i class="fas fa-calendar-alt text-purple-400"></i>
1219
+ </div>
1220
+ <div>
1221
+ <h3 class="font-medium">三年内生育</h3>
1222
+ <p class="text-sm text-gray-500">测试中期规划和职业平衡</p>
1223
+ </div>
1224
+ </div>
1225
+ <div class="mt-3">
1226
+ <div class="flex justify-between text-xs mb-1">
1227
+ <span>生育意愿强度</span>
1228
+ <span class="font-medium">中</span>
1229
+ </div>
1230
+ <div class="w-full bg-gray-200 rounded-full h-2">
1231
+ <div class="bg-purple-400 h-2 rounded-full" style="width: 50%"></div>
1232
+ </div>
1233
+ </div>
1234
+ </div>
1235
+
1236
+ <!-- Option 4 -->
1237
+ <div class="decision-option p-4 bg-white rounded-xl border-2 border-blue-100 hover:border-blue-300 cursor-pointer transition-all">
1238
+ <div class="flex items-start">
1239
+ <div class="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center mr-3">
1240
+ <i class="fas fa-calendar-plus text-blue-400"></i>
1241
+ </div>
1242
+ <div>
1243
+ <h3 class="font-medium">五年后再考虑</h3>
1244
+ <p class="text-sm text-gray-500">测试长期规划和职业优先</p>
1245
+ </div>
1246
+ </div>
1247
+ <div class="mt-3">
1248
+ <div class="flex justify-between text-xs mb-1">
1249
+ <span>生育意愿强度</span>
1250
+ <span class="font-medium">中低</span>
1251
+ </div>
1252
+ <div class="w-full bg-gray-200 rounded-full h-2">
1253
+ <div class="bg-blue-400 h-2 rounded-full" style="width: 30%"></div>
1254
+ </div>
1255
+ </div>
1256
+ </div>
1257
+
1258
+ <!-- Option 5 -->
1259
+ <div class="decision-option p-4 bg-white rounded-xl border-2 border-green-100 hover:border-green-300 cursor-pointer transition-all">
1260
+ <div class="flex items-start">
1261
+ <div class="w-10 h-10 rounded-full bg-green-50 flex items-center justify-center mr-3">
1262
+ <i class="fas fa-dna text-green-400"></i>
1263
+ </div>
1264
+ <div>
1265
+ <h3 class="font-medium">冻卵保留选择权</h3>
1266
+ <p class="text-sm text-gray-500">测试技术辅助生育意愿</p>
1267
+ </div>
1268
+ </div>
1269
+ <div class="mt-3">
1270
+ <div class="flex justify-between text-xs mb-1">
1271
+ <span>生育意愿强度</span>
1272
+ <span class="font-medium">可变</span>
1273
+ </div>
1274
+ <div class="w-full bg-gray-200 rounded-full h-2">
1275
+ <div class="bg-gradient-to-r from-green-400 to-blue-400 h-2 rounded-full" style="width: 60%"></div>
1276
+ </div>
1277
+ </div>
1278
+ </div>
1279
+
1280
+ <!-- Option 6 -->
1281
+ <div class="decision-option p-4 bg-white rounded-xl border-2 border-gray-200 hover:border-gray-400 cursor-pointer transition-all">
1282
+ <div class="flex items-start">
1283
+ <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center mr-3">
1284
+ <i class="fas fa-times text-gray-500"></i>
1285
+ </div>
1286
+ <div>
1287
+ <h3 class="font-medium">选择不生育</h3>
1288
+ <p class="text-sm text-gray-500">测试丁克倾向和原因</p>
1289
+ </div>
1290
+ </div>
1291
+ <div class="mt-3">
1292
+ <div class="flex justify-between text-xs mb-1">
1293
+ <span>生育意愿强度</span>
1294
+ <span class="font-medium">低</span>
1295
+ </div>
1296
+ <div class="w-full bg-gray-200 rounded-full h-2">
1297
+ <div class="bg-gray-400 h-2 rounded-full" style="width: 10%"></div>
1298
+ </div>
1299
+ </div>
1300
+ </div>
1301
+ </div>
1302
+ </div>
1303
+ </div>
1304
+
1305
+ <!-- Right Decision Impact Preview -->
1306
+ <div class="lg:w-1/4">
1307
+ <div class="bg-white rounded-xl shadow-md p-6 h-full">
1308
+ <h2 class="text-xl font-semibold mb-4 text-gray-700">决策影响预览</h2>
1309
+
1310
+ <div id="decision-preview" class="text-center text-gray-400">
1311
+ <i class="fas fa-mouse-pointer text-3xl mb-2"></i>
1312
+ <p>选择一个决策选项查看潜在影响</p>
1313
+ </div>
1314
+
1315
+ <div id="decision-impact" class="hidden">
1316
+ <h3 class="font-medium mb-3">"立即生育"的潜在影响</h3>
1317
+
1318
+ <div class="space-y-4">
1319
+ <div>
1320
+ <h4 class="text-sm font-medium flex items-center mb-1">
1321
+ <i class="fas fa-briefcase mr-2 text-blue-500"></i> 职业发展
1322
+ </h4>
1323
+ <div class="text-xs bg-blue-50 p-2 rounded-lg">
1324
+ <p>短期内职业晋升机会减少30%，3-5年后可能恢复</p>
1325
+ </div>
1326
+ </div>
1327
+
1328
+ <div>
1329
+ <h4 class="text-sm font-medium flex items-center mb-1">
1330
+ <i class="fas fa-wallet mr-2 text-yellow-500"></i> 经济状况
1331
+ </h4>
1332
+ <div class="text-xs bg-yellow-50 p-2 rounded-lg">
1333
+ <p>前两年家庭收入减少25%，育儿成本增加40%</p>
1334
+ </div>
1335
+ </div>
1336
+
1337
+ <div>
1338
+ <h4 class="text-sm font-medium flex items-center mb-1">
1339
+ <i class="fas fa-heartbeat mr-2 text-red-500"></i> 健康因素
1340
+ </h4>
1341
+ <div class="text-xs bg-red-50 p-2 rounded-lg">
1342
+ <p>当前年龄生育健康风险较低(8%)，产后恢复期6-12个月</p>
1343
+ </div>
1344
+ </div>
1345
+
1346
+ <div>
1347
+ <h4 class="text-sm font-medium flex items-center mb-1">
1348
+ <i class="fas fa-users mr-2 text-purple-500"></i> 社会关系
1349
+ </h4>
1350
+ <div class="text-xs bg-purple-50 p-2 rounded-lg">
1351
+ <p>家庭支持��高，伴侣参与意愿强，社会压力缓解</p>
1352
+ </div>
1353
+ </div>
1354
+
1355
+ <div>
1356
+ <h4 class="text-sm font-medium flex items-center mb-1">
1357
+ <i class="fas fa-smile mr-2 text-green-500"></i> 幸福感预测
1358
+ </h4>
1359
+ <div class="text-xs bg-green-50 p-2 rounded-lg">
1360
+ <p>初期压力较大，长期幸福感指数提升20-35%</p>
1361
+ </div>
1362
+ </div>
1363
+ </div>
1364
+
1365
+ <div class="mt-6">
1366
+ <h4 class="text-sm font-medium mb-2">系统建议</h4>
1367
+ <div class="text-xs
1368
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ # 女性生育决策实验室 UI 设计方案,请根据以下要求进行网站的制作 ## 基本信息 - **项目名称**：育见·视界——女性生育决策实验室) - **界面比例**：1920×1080（支持响应式设计） - **主色调**：粉色（HEX：#E51E86） - **设计风格**：扁平化风格与矢量图组合 ## 页面流程 用户体验流程 ：角色选择页 → 参数设置页 → 情景选择页 → 模拟决策页 ## 页面详细设计 ### 1. 角色选择页 - **页面标题**：左上角显示"育见·视界——女性生育决策实验室" - **主要内容**： - 中央区域展示六个角色卡片（并排排列） - 每个角色代表不同的人口统计特征组合（选中后后面页面会自动填充上预设参数）： - 角色1：高教育、高收入、已婚专业人士 - 角色2：中等教育、中等收入、已婚职员 - 角色3：高教育、中等收入、单身专业人士 - 角色4：低教育、低收入、已婚工人 - 角色5：高教育、高收入、单身创业者 - 角色6：中等教育、低收入、单亲家长 - 角色7：自定义 - 每个角色卡片显示基本属性预览（年龄、职业、婚姻状况） - 每个角色使用矢量图表示，图像反映其社会经济地位 - 角色卡片悬停时有呼吸灯效果和属性详情弹出 - **操作按钮**： - 右下角设置"点击进入"按钮 - 左下角设置"随机角色"选项（自动生成随机属性组合） ### 2. 参数设置页 - **页面标题**：左上角显示"参数设置" - **页面布局**： - 左侧：装饰元素区域（与生育决策相关的图形元素） - 中央：参数设置区域（分类标签式布局） - 右侧：人物卡牌预览区（实时反映参数变化） - **参数设置区**： - 标题：参数设置 - 分类标签： 1. **基本人口统计**（蓝色标签） - 年龄（滑块控件，20-45岁，影响生物钟和生育能力） - 教育水平（下拉菜单：高中/职校/本科/硕士/博士，影响职业发展机会） - 收入水平（滑块控件，分5个等级，财务稳定性评估） - 婚姻状况（单选按钮：单身/恋爱中/已婚/离异，伴侣可用性） 2. **生育偏好**（粉紫色标签） - 生育意愿（滑块控件，1-10级，基础动机强度） - 最大期望子女数（数字选择器，0-3+，家庭规模上限） - 职业与家庭优先级（双向滑块，左侧职业-右侧家庭，资源分配偏好） 3. **环境因素**（绿色标签） - 医疗保健可及性（评级控件，1-5星，医疗资源质量） - 社会压力水平（滑块控件，低-中-高，来自家庭和社会的期望） - 伴侣支持水平（滑块控件，低-中-高，伴侣参与度） 4. **决策参数**（橙色标签） - 规划周期（月份选择器，6-60个月，时间框架） - 重新评估频率（下拉菜单：月度/季度/半年/年度，决策调整间隔） - 财务稳定阈值（滑块控件，低-中-高，经济条件触发点） - 每个参数配备： - 描述提示（悬停显示影响说明） - 默认值（基于人口平均值） - 参数重置按钮（恢复默认值） - **人物卡牌**： - 上方显示人物肖像（根据选择的参数动态变化） - 中部显示关键属性（年龄、教育、职业、婚姻状况） - 下部显示生育相关指标： - 生育意愿指数（带颜色指示） - 职业-家庭平衡倾向 - 主要影响因素标签 - 卡片边缘颜色反映生育意愿强度 - **操作按钮**： - 右下角"继续"按钮：保存设置并进入情景选择页 - 左下角"返回"按钮：返回角色选择页 - 中下方"随机参数"按钮：生成随机参数组合 ### 3. 情景选择页 - **页面标题**：左上角显示"模拟决策" - **主要内容**： - 中央区域展示三张扑克牌式卡片，每张卡片代表不同类型的生活事件 - 卡片类别与内容示例： 1. **职业转折点**（影响职业与家庭优先级） - "产后回归晋升机会"（测试职业发展与育儿平衡） - "海外工作机会"（测试地理迁移对生育决策的影响） - "创业机会"（测试职业风险与生育计划的关系） 2. **健康因素**（影响医疗保健可及性和生育能力） - "幼儿急诊与工作冲突"（测试医疗资源获取） - "生育健康问题"（测试医疗条件对决策的影响） - "家族遗传疾病风险"（测试健康风险评估） 3. **经济环境**（影响财务稳定阈值） - "房贷利率上涨冲击"（测试经济压力） - "育儿补贴政策变化"（测试政策支持） - "家庭收入波动"（测试财务不确定性） 4. **社会关系**（影响社会压力和伴侣支持） - "家庭生育期望"（测试社会压力应对） - "伴侣育儿分工变化"（测试伴侣支持水平） - "社区育儿资源"（测试社会支持网络） - **交互功能**： - 左侧卡牌库：可滑动浏览不同类别的事件卡牌 - 中央区域：已选择的事件卡牌（最多5张） - 右侧显示队列状态：如"3/5"（当前选择/最大可选） - 每张卡牌可点击查看详情，显示该事件对各项参数的影响 - 卡牌组合建议：系统根据已选角色特征推荐合适的事件组合 - **操作按钮**： - 右下角"继续"按钮：确认选择并进入决策页 - 左下角"随机事件"按钮：自动生成随机事件组合 ### 4. 模拟决策页 - **页面标题**：左上角显示"决策模拟" - **页面布局**： - 左侧：角色与情景概览区域 - 显示已选角色的关键属性（年龄、教育、收入、婚姻状况） - 显示已选情景事件的简要描述 - 显示当前生育意愿指数和影响因素 - 中央：决策选项区域 - 右侧：决策影响预览区域（选择决策后显示） - **决策选项**： - 六张卡片分别展示不同生育决策选项 - 选项示例： - "立即生育"（测试高生育意愿和紧迫感） - "一年内生育"（测试短期规划和准备） - "三年内生育"（测试中期规划和职业平衡） - "五年后再考虑"（测试长期规划和职业优先） - "冻卵/精保留选择权"（测试技术辅助生育意愿） - "选择不生育"（测试丁克倾向和原因） - 每个选项卡片包含： - 决策名称和图标 - 简短描述 - 该决策对应的生育意愿强度指示 - **决策影响预览**： - 选择决策后，右侧面板显示该决策的潜在影响： - 职业发展轨迹影响 - 经济状况变化预测 - 健康因素考量 - 社会关系变化 - 幸福感指数预测 - 影响以图表和文字说明结合展示 - **操作按钮**： - 右下角"查看详细报告"按钮：生成完整决策分析报告 - 左下角"重新选择情景"按钮：返回情景选择页 - 中下方"保存决策"按钮：保存当前决策结果 - **额外功能**： - "决策比较"选项：可同时选择两个决策进行对比分析 - "敏感性分析"：调整某个参数查看决策变化趋势 ## 视觉与交互设计 ### 背景设计 - 简洁背景中融入与生育决策相关的矢量图形元素 - 背景元素添加简单位移动画，增强视觉层次感 - 不同页面使用相同的设计语言但有细微变化，反映决策流程的进展 ### 色彩方案 - **主色调**：粉色（HEX：#E51E86）作为品牌标识色 - **辅助色系**： - 基本人口统计参数：蓝色系（#3498DB） - 生育偏好参数：粉紫色系（#9B59B6） - 环境因素参数：绿色系（#2ECC71） - 决策参数：橙色系（#E67E22） - **功能色彩**： - 高生育意愿：深粉色（#FF1493） - 中等生育意愿：淡紫色（#DA70D6） - 低生育意愿：淡蓝色（#87CEFA） - 警告/风险：红色（#E74C3C） - 积极/机会：绿色（#27AE60） ### 动效方案 1. **卡牌效果**： - 悬浮时呈现3D翻转效果（CSS transform） - 卡片选择时有轻微放大和高亮效果 - 参数调整时卡片属性平滑过渡变化 2. **装饰元素**： - 使用SVG制作流动线条（如DNA双螺旋变形） - 背景元素随参数变化微妙变化（如生育意愿增加时，背景元素变得更活跃） 3. **转场动画**： - 页面切换使用300ms的滑动过渡效果 - 决策流程前进时向右滑动，后退时向左滑动 - 参数变化时使用平滑过渡效果 4. **反馈动效**： - 参数调整时提供即时视觉反馈 - 决策选择时提供确认动画 - 数据加载时使用优雅的加载动画 ### 交互设计 1. **输入控件**： - 滑块控件：用于连续值（如年龄、收入、生育意愿） - 下拉菜单：用于分类选择（如教育水平、职业类型） - 单选/多选按钮：用于二元或多项选择（如婚姻状况） - 数字选择器：用于精确数值输入（如子女数量） 2. **信息展示**： - 悬停提示：解释各参数对决策的影响 - 实时预览：参数变化即时反映在角色卡片上 - 数据可视化：使用图表展示决策影响和参数关系 3. **辅助功能**： - 参数重置按钮：快速恢复默认设置 - 随机生成功能：自动创建随机参数组合 - 保存/加载功能：保存当前设置或加载预设方案 ### 页面设计风格选择 - 设计风格参考扁平化风格与矢量图组合 ### 响应式设计 - 确保在不同设备上保持良好的用户体验 - 关键元素在各种屏幕尺寸下保持可见性和可用性 - 移动设备上优化触摸交互和垂直滚动布局 - 桌面版提供更丰富的并排信息展示 - 平板设备提供混合体验，根据方向自动调整布局