| 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> |