|
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
|
/* ── spatial environment ──────────────────────────── */ |
|
18
|
.stage { |
|
19
|
position: relative; |
|
20
|
width: 3840px; |
|
21
|
height: 2160px; |
|
22
|
background: linear-gradient(155deg, #eceae4 0%, #d9d6cd 55%, #cdc9bd 100%); |
|
23
|
display: flex; |
|
24
|
align-items: center; |
|
25
|
overflow: hidden; |
|
26
|
} |
|
27
|
|
|
28
|
/* soft ambient light blobs — implies a real room without faking a photo */ |
|
29
|
.glow { |
|
30
|
position: absolute; |
|
31
|
border-radius: 50%; |
|
32
|
filter: blur(180px); |
|
33
|
opacity: 0.55; |
|
34
|
} |
|
35
|
.glow-1 { width: 1400px; height: 1400px; top: -420px; left: -320px; background: #ffffff; opacity: 0.5; } |
|
36
|
.glow-2 { width: 1200px; height: 1200px; bottom: -480px; right: -260px; background: #3a7a56; opacity: 0.16; } |
|
37
|
|
|
38
|
/* faint floor line to ground the floating window in space */ |
|
39
|
.floor { |
|
40
|
position: absolute; |
|
41
|
left: 0; right: 0; bottom: 260px; |
|
42
|
height: 1px; |
|
43
|
background: linear-gradient(90deg, transparent, rgba(26,52,40,0.10) 30%, rgba(26,52,40,0.10) 70%, transparent); |
|
44
|
} |
|
45
|
|
|
46
|
/* ── text section ─────────────────────────────── */ |
|
47
|
.text-section { |
|
48
|
position: relative; |
|
49
|
z-index: 2; |
|
50
|
width: 1180px; |
|
51
|
padding-left: 160px; |
|
52
|
padding-right: 60px; |
|
53
|
} |
|
54
|
|
|
55
|
.label { |
|
56
|
font-size: 34px; |
|
57
|
font-weight: 700; |
|
58
|
letter-spacing: 0.18em; |
|
59
|
text-transform: uppercase; |
|
60
|
color: #3a7a56; |
|
61
|
margin-bottom: 34px; |
|
62
|
} |
|
63
|
|
|
64
|
.headline { |
|
65
|
font-size: 96px; |
|
66
|
font-weight: 800; |
|
67
|
line-height: 1.08; |
|
68
|
color: #1a3428; |
|
69
|
margin-bottom: 42px; |
|
70
|
} |
|
71
|
|
|
72
|
.headline .accent { |
|
73
|
color: #3a7a56; |
|
74
|
} |
|
75
|
|
|
76
|
.subtext { |
|
77
|
font-size: 38px; |
|
78
|
font-weight: 400; |
|
79
|
line-height: 1.5; |
|
80
|
color: #5f6a62; |
|
81
|
max-width: 820px; |
|
82
|
} |
|
83
|
|
|
84
|
/* ── floating glass window ────────────────────── */ |
|
85
|
.window-wrap { |
|
86
|
position: relative; |
|
87
|
z-index: 2; |
|
88
|
flex: 1; |
|
89
|
display: flex; |
|
90
|
align-items: center; |
|
91
|
justify-content: center; |
|
92
|
padding-right: 140px; |
|
93
|
perspective: 2400px; |
|
94
|
} |
|
95
|
|
|
96
|
.window { |
|
97
|
width: 1980px; |
|
98
|
height: 1560px; |
|
99
|
border-radius: 46px; |
|
100
|
background: rgba(255, 255, 255, 0.78); |
|
101
|
border: 1.5px solid rgba(255, 255, 255, 0.9); |
|
102
|
box-shadow: |
|
103
|
0 6px 0 rgba(255,255,255,0.5) inset, |
|
104
|
0 90px 160px rgba(20, 30, 24, 0.28), |
|
105
|
0 30px 60px rgba(20, 30, 24, 0.16); |
|
106
|
overflow: hidden; |
|
107
|
display: flex; |
|
108
|
flex-direction: column; |
|
109
|
transform: rotateY(-4deg) rotateX(1deg); |
|
110
|
} |
|
111
|
|
|
112
|
/* window chrome */ |
|
113
|
.titlebar { |
|
114
|
flex-shrink: 0; |
|
115
|
display: flex; |
|
116
|
align-items: center; |
|
117
|
gap: 20px; |
|
118
|
padding: 34px 44px 26px; |
|
119
|
} |
|
120
|
|
|
121
|
.brain-icon { |
|
122
|
width: 40px; |
|
123
|
height: 40px; |
|
124
|
color: #3a7a56; |
|
125
|
flex-shrink: 0; |
|
126
|
} |
|
127
|
|
|
128
|
.titlebar-text { |
|
129
|
flex: 1; |
|
130
|
} |
|
131
|
|
|
132
|
.window-title { |
|
133
|
font-size: 30px; |
|
134
|
font-weight: 600; |
|
135
|
color: #14211a; |
|
136
|
} |
|
137
|
|
|
138
|
.window-subtitle { |
|
139
|
font-size: 20px; |
|
140
|
color: #8a938c; |
|
141
|
margin-top: 2px; |
|
142
|
} |
|
143
|
|
|
144
|
.status-pill { |
|
145
|
font-size: 18px; |
|
146
|
font-weight: 600; |
|
147
|
color: #3a7a56; |
|
148
|
background: rgba(58, 122, 86, 0.12); |
|
149
|
padding: 8px 18px; |
|
150
|
border-radius: 999px; |
|
151
|
} |
|
152
|
|
|
153
|
.divider { |
|
154
|
height: 1.5px; |
|
155
|
background: rgba(20, 33, 26, 0.08); |
|
156
|
margin: 0 44px; |
|
157
|
} |
|
158
|
|
|
159
|
/* message area */ |
|
160
|
.messages { |
|
161
|
flex: 1; |
|
162
|
padding: 44px 64px; |
|
163
|
display: flex; |
|
164
|
flex-direction: column; |
|
165
|
justify-content: center; |
|
166
|
gap: 26px; |
|
167
|
} |
|
168
|
|
|
169
|
.row { display: flex; } |
|
170
|
.row.user { justify-content: flex-end; } |
|
171
|
|
|
172
|
.bubble { |
|
173
|
max-width: 66%; |
|
174
|
font-size: 24px; |
|
175
|
line-height: 1.5; |
|
176
|
padding: 20px 26px; |
|
177
|
border-radius: 26px; |
|
178
|
} |
|
179
|
|
|
180
|
.bubble.assistant { |
|
181
|
background: rgba(20, 33, 26, 0.06); |
|
182
|
color: #1a2620; |
|
183
|
} |
|
184
|
|
|
185
|
.bubble.user { |
|
186
|
background: #3a7a56; |
|
187
|
color: #ffffff; |
|
188
|
} |
|
189
|
|
|
190
|
.sender { |
|
191
|
font-size: 16px; |
|
192
|
color: #9aa39c; |
|
193
|
margin-bottom: 8px; |
|
194
|
padding: 0 4px; |
|
195
|
} |
|
196
|
.row.user .sender { text-align: right; } |
|
197
|
|
|
198
|
/* input bar */ |
|
199
|
.input-bar { |
|
200
|
flex-shrink: 0; |
|
201
|
padding: 30px 44px 44px; |
|
202
|
} |
|
203
|
|
|
204
|
.input-row { |
|
205
|
background: rgba(20, 33, 26, 0.06); |
|
206
|
border-radius: 32px; |
|
207
|
padding: 22px 22px 22px 32px; |
|
208
|
display: flex; |
|
209
|
align-items: center; |
|
210
|
justify-content: space-between; |
|
211
|
gap: 16px; |
|
212
|
} |
|
213
|
|
|
214
|
.input-placeholder { |
|
215
|
font-size: 24px; |
|
216
|
color: #9aa39c; |
|
217
|
} |
|
218
|
|
|
219
|
.send-btn { |
|
220
|
width: 52px; |
|
221
|
height: 52px; |
|
222
|
border-radius: 50%; |
|
223
|
background: #3a7a56; |
|
224
|
display: flex; |
|
225
|
align-items: center; |
|
226
|
justify-content: center; |
|
227
|
flex-shrink: 0; |
|
228
|
} |
|
229
|
</style> |
|
230
|
</head> |
|
231
|
<body> |
|
232
|
<div class="stage"> |
|
233
|
<div class="glow glow-1"></div> |
|
234
|
<div class="glow glow-2"></div> |
|
235
|
<div class="floor"></div> |
|
236
|
|
|
237
|
<div class="text-section"> |
|
238
|
<div class="label">Spatial Assistant</div> |
|
239
|
<div class="headline"> |
|
240
|
Your assistant, <span class="accent">right in the room.</span> |
|
241
|
</div> |
|
242
|
<div class="subtext">Ask Siti anything from a floating glass window — every word stays entirely on your Vision Pro.</div> |
|
243
|
</div> |
|
244
|
|
|
245
|
<div class="window-wrap"> |
|
246
|
<div class="window"> |
|
247
|
<div class="titlebar"> |
|
248
|
<svg class="brain-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"> |
|
249
|
<path d="M9.5 2a3.5 3.5 0 0 0-3.5 3.5v.55A3.5 3.5 0 0 0 3 9.5a3.5 3.5 0 0 0 1.06 2.52A3.5 3.5 0 0 0 3.5 14a3.5 3.5 0 0 0 2.53 3.37A3.5 3.5 0 0 0 9.5 21a3.5 3.5 0 0 0 3.5-3.5V5.5A3.5 3.5 0 0 0 9.5 2Z"/> |
|
250
|
<path d="M14.5 2a3.5 3.5 0 0 1 3.5 3.5v.55A3.5 3.5 0 0 1 21 9.5a3.5 3.5 0 0 1-1.06 2.52A3.5 3.5 0 0 1 20.5 14a3.5 3.5 0 0 1-2.53 3.37A3.5 3.5 0 0 1 14.5 21a3.5 3.5 0 0 1-3.5-3.5V5.5A3.5 3.5 0 0 1 14.5 2Z"/> |
|
251
|
</svg> |
|
252
|
<div class="titlebar-text"> |
|
253
|
<div class="window-title">Siti AI</div> |
|
254
|
<div class="window-subtitle">on-device · private</div> |
|
255
|
</div> |
|
256
|
<div class="status-pill">Ready</div> |
|
257
|
</div> |
|
258
|
|
|
259
|
<div class="divider"></div> |
|
260
|
|
|
261
|
<div class="messages"> |
|
262
|
<div class="row user"> |
|
263
|
<div> |
|
264
|
<div class="sender">You</div> |
|
265
|
<div class="bubble user">Explain the difference between a window and a volume in visionOS, in plain terms.</div> |
|
266
|
</div> |
|
267
|
</div> |
|
268
|
<div class="row"> |
|
269
|
<div> |
|
270
|
<div class="sender">Siti</div> |
|
271
|
<div class="bubble assistant">A window is flat, like a page floating in space — good for reading and typing. A volume has real depth, so 3D content can sit inside it and you can walk around it.</div> |
|
272
|
</div> |
|
273
|
</div> |
|
274
|
</div> |
|
275
|
|
|
276
|
<div class="divider"></div> |
|
277
|
|
|
278
|
<div class="input-bar"> |
|
279
|
<div class="input-row"> |
|
280
|
<span class="input-placeholder">Message Siti…</span> |
|
281
|
<div class="send-btn"> |
|
282
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> |
|
283
|
<line x1="12" y1="19" x2="12" y2="5"/> |
|
284
|
<polyline points="5 12 12 5 19 12"/> |
|
285
|
</svg> |
|
286
|
</div> |
|
287
|
</div> |
|
288
|
</div> |
|
289
|
</div> |
|
290
|
</div> |
|
291
|
</div> |
|
292
|
</body> |
|
293
|
</html> |