|
1
|
<!DOCTYPE html> |
|
2
|
<html> |
|
3
|
<head> |
|
4
|
<meta charset="UTF-8"> |
|
5
|
<link rel="preconnect" href="https://fonts.googleapis.com"> |
|
6
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"> |
|
7
|
<style> |
|
8
|
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } |
|
9
|
|
|
10
|
html, body { |
|
11
|
width: 3840px; |
|
12
|
height: 2160px; |
|
13
|
overflow: hidden; |
|
14
|
font-family: 'Inter', system-ui, -apple-system, sans-serif; |
|
15
|
} |
|
16
|
|
|
17
|
.stage { |
|
18
|
position: relative; |
|
19
|
width: 3840px; |
|
20
|
height: 2160px; |
|
21
|
background: linear-gradient(155deg, #eceae4 0%, #d9d6cd 55%, #cdc9bd 100%); |
|
22
|
display: flex; |
|
23
|
align-items: center; |
|
24
|
overflow: hidden; |
|
25
|
} |
|
26
|
|
|
27
|
.glow { |
|
28
|
position: absolute; |
|
29
|
border-radius: 50%; |
|
30
|
filter: blur(180px); |
|
31
|
opacity: 0.55; |
|
32
|
} |
|
33
|
.glow-1 { width: 1400px; height: 1400px; top: -420px; left: -320px; background: #ffffff; opacity: 0.5; } |
|
34
|
.glow-2 { width: 1200px; height: 1200px; bottom: -480px; right: -260px; background: #3a7a56; opacity: 0.16; } |
|
35
|
|
|
36
|
.floor { |
|
37
|
position: absolute; |
|
38
|
left: 0; right: 0; bottom: 260px; |
|
39
|
height: 1px; |
|
40
|
background: linear-gradient(90deg, transparent, rgba(26,52,40,0.10) 30%, rgba(26,52,40,0.10) 70%, transparent); |
|
41
|
} |
|
42
|
|
|
43
|
.text-section { |
|
44
|
position: relative; |
|
45
|
z-index: 2; |
|
46
|
width: 1180px; |
|
47
|
padding-left: 160px; |
|
48
|
padding-right: 60px; |
|
49
|
} |
|
50
|
|
|
51
|
.label { |
|
52
|
font-size: 34px; |
|
53
|
font-weight: 700; |
|
54
|
letter-spacing: 0.18em; |
|
55
|
text-transform: uppercase; |
|
56
|
color: #3a7a56; |
|
57
|
margin-bottom: 34px; |
|
58
|
} |
|
59
|
|
|
60
|
.headline { |
|
61
|
font-size: 96px; |
|
62
|
font-weight: 800; |
|
63
|
line-height: 1.08; |
|
64
|
color: #1a3428; |
|
65
|
margin-bottom: 42px; |
|
66
|
} |
|
67
|
|
|
68
|
.headline .accent { |
|
69
|
color: #3a7a56; |
|
70
|
} |
|
71
|
|
|
72
|
.subtext { |
|
73
|
font-size: 38px; |
|
74
|
font-weight: 400; |
|
75
|
line-height: 1.5; |
|
76
|
color: #5f6a62; |
|
77
|
max-width: 820px; |
|
78
|
} |
|
79
|
|
|
80
|
.window-wrap { |
|
81
|
position: relative; |
|
82
|
z-index: 2; |
|
83
|
flex: 1; |
|
84
|
display: flex; |
|
85
|
align-items: center; |
|
86
|
justify-content: center; |
|
87
|
padding-right: 140px; |
|
88
|
perspective: 2400px; |
|
89
|
} |
|
90
|
|
|
91
|
.window { |
|
92
|
width: 1760px; |
|
93
|
height: 1560px; |
|
94
|
border-radius: 46px; |
|
95
|
background: rgba(255, 255, 255, 0.82); |
|
96
|
border: 1.5px solid rgba(255, 255, 255, 0.9); |
|
97
|
box-shadow: |
|
98
|
0 6px 0 rgba(255,255,255,0.5) inset, |
|
99
|
0 90px 160px rgba(20, 30, 24, 0.28), |
|
100
|
0 30px 60px rgba(20, 30, 24, 0.16); |
|
101
|
overflow: hidden; |
|
102
|
display: flex; |
|
103
|
flex-direction: column; |
|
104
|
transform: rotateY(-4deg) rotateX(1deg); |
|
105
|
} |
|
106
|
|
|
107
|
.sheet-header { |
|
108
|
flex-shrink: 0; |
|
109
|
display: flex; |
|
110
|
align-items: center; |
|
111
|
justify-content: space-between; |
|
112
|
padding: 38px 48px 30px; |
|
113
|
} |
|
114
|
|
|
115
|
.sheet-title { |
|
116
|
font-size: 34px; |
|
117
|
font-weight: 700; |
|
118
|
color: #14211a; |
|
119
|
} |
|
120
|
|
|
121
|
.sheet-action { |
|
122
|
font-size: 24px; |
|
123
|
font-weight: 600; |
|
124
|
color: #3a7a56; |
|
125
|
} |
|
126
|
.sheet-action.muted { color: #9aa39c; } |
|
127
|
|
|
128
|
.divider { |
|
129
|
height: 1.5px; |
|
130
|
background: rgba(20, 33, 26, 0.08); |
|
131
|
margin: 0 48px; |
|
132
|
} |
|
133
|
|
|
134
|
.section { |
|
135
|
padding: 30px 48px 6px; |
|
136
|
} |
|
137
|
|
|
138
|
.section-label { |
|
139
|
font-size: 19px; |
|
140
|
font-weight: 600; |
|
141
|
letter-spacing: 0.08em; |
|
142
|
text-transform: uppercase; |
|
143
|
color: #9aa39c; |
|
144
|
margin-bottom: 16px; |
|
145
|
} |
|
146
|
|
|
147
|
.prompt-box { |
|
148
|
background: rgba(20, 33, 26, 0.05); |
|
149
|
border-radius: 20px; |
|
150
|
padding: 24px 26px; |
|
151
|
font-size: 21px; |
|
152
|
line-height: 1.55; |
|
153
|
color: #3f4a43; |
|
154
|
min-height: 168px; |
|
155
|
} |
|
156
|
|
|
157
|
.footnote { |
|
158
|
font-size: 17px; |
|
159
|
color: #9aa39c; |
|
160
|
margin-top: 14px; |
|
161
|
line-height: 1.5; |
|
162
|
} |
|
163
|
|
|
164
|
.preset-list { |
|
165
|
display: flex; |
|
166
|
flex-direction: column; |
|
167
|
gap: 14px; |
|
168
|
} |
|
169
|
|
|
170
|
.preset-row { |
|
171
|
display: flex; |
|
172
|
align-items: flex-start; |
|
173
|
gap: 18px; |
|
174
|
background: rgba(20, 33, 26, 0.05); |
|
175
|
border-radius: 18px; |
|
176
|
padding: 20px 24px; |
|
177
|
} |
|
178
|
|
|
179
|
.preset-row.active { |
|
180
|
background: rgba(58, 122, 86, 0.12); |
|
181
|
border: 1.5px solid rgba(58, 122, 86, 0.35); |
|
182
|
} |
|
183
|
|
|
184
|
.radio { |
|
185
|
width: 22px; |
|
186
|
height: 22px; |
|
187
|
border-radius: 50%; |
|
188
|
border: 2px solid #c3cac4; |
|
189
|
margin-top: 4px; |
|
190
|
flex-shrink: 0; |
|
191
|
} |
|
192
|
|
|
193
|
.radio.checked { |
|
194
|
border-color: #3a7a56; |
|
195
|
background: #3a7a56; |
|
196
|
box-shadow: inset 0 0 0 4px #fff; |
|
197
|
} |
|
198
|
|
|
199
|
.preset-title { |
|
200
|
font-size: 22px; |
|
201
|
font-weight: 600; |
|
202
|
color: #14211a; |
|
203
|
} |
|
204
|
|
|
205
|
.preset-sub { |
|
206
|
font-size: 18px; |
|
207
|
color: #8a938c; |
|
208
|
margin-top: 3px; |
|
209
|
} |
|
210
|
</style> |
|
211
|
</head> |
|
212
|
<body> |
|
213
|
<div class="stage"> |
|
214
|
<div class="glow glow-1"></div> |
|
215
|
<div class="glow glow-2"></div> |
|
216
|
<div class="floor"></div> |
|
217
|
|
|
218
|
<div class="text-section"> |
|
219
|
<div class="label">Model Settings</div> |
|
220
|
<div class="headline"> |
|
221
|
Set it once. <span class="accent">Keep it private.</span> |
|
222
|
</div> |
|
223
|
<div class="subtext">Tune the system prompt and response style — every setting stays on-device, just like every conversation.</div> |
|
224
|
</div> |
|
225
|
|
|
226
|
<div class="window-wrap"> |
|
227
|
<div class="window"> |
|
228
|
<div class="sheet-header"> |
|
229
|
<span class="sheet-action muted">Cancel</span> |
|
230
|
<span class="sheet-title">Model Settings</span> |
|
231
|
<span class="sheet-action">Save</span> |
|
232
|
</div> |
|
233
|
|
|
234
|
<div class="divider"></div> |
|
235
|
|
|
236
|
<div class="section"> |
|
237
|
<div class="section-label">System Prompt</div> |
|
238
|
<div class="prompt-box">You are Siti, a friendly and capable personal assistant that runs entirely on the user's device. Nothing the user says ever leaves the device.</div> |
|
239
|
</div> |
|
240
|
|
|
241
|
<div class="section"> |
|
242
|
<div class="section-label" style="margin-top: 10px;">Response Style</div> |
|
243
|
<div class="preset-list"> |
|
244
|
<div class="preset-row active"> |
|
245
|
<div class="radio checked"></div> |
|
246
|
<div> |
|
247
|
<div class="preset-title">Balanced</div> |
|
248
|
<div class="preset-sub">General-purpose responses with a bit of creativity.</div> |
|
249
|
</div> |
|
250
|
</div> |
|
251
|
<div class="preset-row"> |
|
252
|
<div class="radio"></div> |
|
253
|
<div> |
|
254
|
<div class="preset-title">Deterministic</div> |
|
255
|
<div class="preset-sub">Reproducible, focused answers.</div> |
|
256
|
</div> |
|
257
|
</div> |
|
258
|
<div class="preset-row"> |
|
259
|
<div class="radio"></div> |
|
260
|
<div> |
|
261
|
<div class="preset-title">Fast</div> |
|
262
|
<div class="preset-sub">Shorter responses with lower latency.</div> |
|
263
|
</div> |
|
264
|
</div> |
|
265
|
</div> |
|
266
|
</div> |
|
267
|
</div> |
|
268
|
</div> |
|
269
|
</div> |
|
270
|
</body> |
|
271
|
</html> |