GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Attractions List</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: "Inter", Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #F5F7FB;15 }16 17 /* Status bar (visual placeholder) */18 .statusbar {19 height: 90px;20 display: flex;21 align-items: center;22 padding: 0 36px;23 color: #8A93A8;24 font-size: 32px;25 }26 27 /* Header with back + search */28 .header {29 padding: 20px 36px 0 36px;30 }31 .back-row {32 display: flex;33 align-items: center;34 gap: 24px;35 }36 .icon-btn {37 width: 64px;38 height: 64px;39 display: flex;40 align-items: center;41 justify-content: center;42 color: #1E2A44;43 }44 .searchbar {45 margin-top: 24px;46 height: 110px;47 border: 1px solid #DCE3EE;48 border-radius: 24px;49 background: #FFFFFF;50 display: flex;51 align-items: center;52 padding: 0 28px;53 gap: 20px;54 color: #A2A9BB;55 font-size: 40px;56 }57 .divider {58 margin-top: 26px;59 height: 2px;60 background: #E6EBF3;61 width: 100%;62 }63 .city-row {64 text-align: center;65 padding: 24px 0 10px 0;66 font-weight: 800;67 font-size: 56px;68 color: #1B2A4A;69 display: flex;70 align-items: center;71 justify-content: center;72 gap: 16px;73 }74 .city-row .city {75 line-height: 1;76 }77 78 /* List */79 .list {80 padding: 24px 36px 280px 36px; /* bottom space for sheet */81 }82 .list-item {83 display: grid;84 grid-template-columns: 84px 1fr;85 align-items: center;86 gap: 20px;87 margin-bottom: 26px;88 }89 .checkbox {90 width: 54px;91 height: 54px;92 border: 2px solid #A9B3C8;93 border-radius: 8px;94 background: #F0F3F8;95 display: flex;96 align-items: center;97 justify-content: center;98 }99 .checkbox.selected {100 border-color: #2F63FF;101 background: #2F63FF;102 }103 104 .card {105 background: #FFFFFF;106 border-radius: 28px;107 box-shadow: 0 6px 16px rgba(27, 42, 74, 0.08);108 padding: 22px;109 display: grid;110 grid-template-columns: 320px 1fr;111 gap: 24px;112 }113 .img {114 width: 320px;115 height: 200px;116 background: #E0E0E0;117 border: 1px solid #BDBDBD;118 border-radius: 24px;119 display: flex;120 align-items: center;121 justify-content: center;122 color: #757575;123 font-size: 34px;124 text-align: center;125 padding: 8px;126 }127 .content {128 display: flex;129 flex-direction: column;130 gap: 12px;131 }132 .title-row {133 display: flex;134 align-items: center;135 gap: 14px;136 font-weight: 800;137 color: #15335E;138 font-size: 52px;139 line-height: 1.15;140 }141 .badge {142 display: inline-flex;143 align-items: center;144 gap: 8px;145 padding: 6px 12px;146 border-radius: 12px;147 background: #F4E7D8;148 color: #8B5B2E;149 font-size: 30px;150 font-weight: 700;151 }152 .desc {153 color: #7A6A57;154 font-size: 34px;155 }156 .sub {157 color: #697587;158 font-size: 32px;159 }160 161 /* Bottom sheet */162 .bottom-sheet {163 position: absolute;164 left: 0;165 right: 0;166 bottom: 90px;167 background: #FFFFFF;168 border-top-left-radius: 36px;169 border-top-right-radius: 36px;170 box-shadow: 0 -12px 20px rgba(0,0,0,0.08);171 padding: 28px 36px 34px 36px;172 }173 .chip {174 display: inline-flex;175 align-items: center;176 gap: 18px;177 border: 2px solid #3966FF;178 color: #3966FF;179 border-radius: 20px;180 padding: 18px 24px;181 font-size: 36px;182 font-weight: 700;183 background: #F8FAFF;184 margin-bottom: 26px;185 }186 .action-btn {187 height: 120px;188 background: #3F66FF;189 color: #FFFFFF;190 border-radius: 20px;191 display: flex;192 align-items: center;193 justify-content: center;194 font-size: 44px;195 font-weight: 800;196 margin-top: 8px;197 }198 199 /* Home indicator */200 .home-indicator {201 position: absolute;202 bottom: 20px;203 left: 50%;204 transform: translateX(-50%);205 width: 240px;206 height: 16px;207 background: #111213;208 border-radius: 8px;209 }210 211 /* Utility SVG styles */212 svg { display: block; }213</style>214</head>215<body>216<div id="render-target">217 218 <!-- Status bar visual placeholder -->219 <div class="statusbar">220 <div style="font-weight:700;">12:32</div>221 </div>222 223 <div class="header">224 <div class="back-row">225 <div class="icon-btn">226 <svg width="44" height="44" viewBox="0 0 24 24">227 <path d="M15 4 L7 12 L15 20" fill="none" stroke="#1E2A44" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>228 </svg>229 </div>230 <div class="searchbar" style="flex:1">231 <svg width="44" height="44" viewBox="0 0 24 24">232 <circle cx="11" cy="11" r="7" fill="none" stroke="#A2A9BB" stroke-width="2"></circle>233 <path d="M20 20 L16 16" stroke="#A2A9BB" stroke-width="2" stroke-linecap="round"></path>234 </svg>235 <span>Search attractions</span>236 </div>237 </div>238 239 <div class="divider"></div>240 241 <div class="city-row">242 <span class="city">Vancouver</span>243 <svg width="32" height="32" viewBox="0 0 24 24">244 <path d="M6 9 L12 15 L18 9" fill="none" stroke="#1B2A4A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>245 </svg>246 </div>247 </div>248 249 <div class="list">250 251 <!-- Gastown -->252 <div class="list-item">253 <div class="checkbox"></div>254 <div class="card">255 <div class="img">[IMG: Gastown at night]</div>256 <div class="content">257 <div class="title-row">258 <span>Gastown</span>259 <svg width="36" height="36" viewBox="0 0 24 24">260 <path d="M9 6 L15 12 L9 18" fill="none" stroke="#15335E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>261 </svg>262 </div>263 <div class="desc">264 <span class="badge">🏅 Trip.Best</span>265 <span> No. 4 of Top Best Things to Do in</span>266 </div>267 <div class="sub">Vancouver</div>268 </div>269 </div>270 </div>271 272 <!-- Stanley Park -->273 <div class="list-item">274 <div class="checkbox"></div>275 <div class="card">276 <div class="img">[IMG: Stanley Park waterfront]</div>277 <div class="content">278 <div class="title-row">279 <span>Stanley Park</span>280 <svg width="36" height="36" viewBox="0 0 24 24">281 <path d="M9 6 L15 12 L9 18" fill="none" stroke="#15335E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>282 </svg>283 </div>284 <div class="desc">285 <span class="badge">🏅 Trip.Best</span>286 <span> No. 1 of Top Best Things to Do in</span>287 </div>288 <div class="sub">Greater Vancouver</div>289 </div>290 </div>291 </div>292 293 <!-- Canada Place (selected) -->294 <div class="list-item">295 <div class="checkbox selected">296 <svg width="34" height="34" viewBox="0 0 24 24">297 <path d="M5 12 L10 17 L19 8" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>298 </svg>299 </div>300 <div class="card">301 <div class="img">[IMG: Canada Place aerial]</div>302 <div class="content">303 <div class="title-row">304 <span>Canada Place</span>305 <svg width="36" height="36" viewBox="0 0 24 24">306 <path d="M9 6 L15 12 L9 18" fill="none" stroke="#15335E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>307 </svg>308 </div>309 <div class="desc">310 <span class="badge">🏅 Trip.Best</span>311 <span> No. 3 of Top Best Things to Do in</span>312 </div>313 <div class="sub">Vancouver</div>314 </div>315 </div>316 </div>317 318 <!-- Granville Island -->319 <div class="list-item">320 <div class="checkbox"></div>321 <div class="card">322 <div class="img">[IMG: Granville Island market]</div>323 <div class="content">324 <div class="title-row">325 <span>Granville Island</span>326 <svg width="36" height="36" viewBox="0 0 24 24">327 <path d="M9 6 L15 12 L9 18" fill="none" stroke="#15335E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>328 </svg>329 </div>330 <div class="desc">331 <span class="badge">🏅 Trip.Best</span>332 <span> No. 5 of Top Best Things to Do in</span>333 </div>334 <div class="sub">Vancouver</div>335 </div>336 </div>337 </div>338 339 <!-- Vancouver Aquarium -->340 <div class="list-item">341 <div class="checkbox"></div>342 <div class="card">343 <div class="img">[IMG: Vancouver Aquarium exhibit]</div>344 <div class="content">345 <div class="title-row">346 <span>Vancouver Aquarium</span>347 <svg width="36" height="36" viewBox="0 0 24 24">348 <path d="M9 6 L15 12 L9 18" fill="none" stroke="#15335E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>349 </svg>350 </div>351 <div class="desc">352 <span class="badge">🏅 Trip.Best</span>353 <span> No. 8 of Top Best Things to Do in</span>354 </div>355 <div class="sub">Vancouver</div>356 </div>357 </div>358 </div>359 360 <!-- Queen Elizabeth Park -->361 <div class="list-item">362 <div class="checkbox"></div>363 <div class="card">364 <div class="img">[IMG: Queen Elizabeth Park garden]</div>365 <div class="content">366 <div class="title-row">367 <span>Queen Elizabeth Park</span>368 <svg width="36" height="36" viewBox="0 0 24 24">369 <path d="M9 6 L15 12 L9 18" fill="none" stroke="#15335E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>370 </svg>371 </div>372 <div class="desc">373 <span class="badge">🏅 Trip.Best</span>374 <span> No. 6 of Top Best Things to Do in</span>375 </div>376 <div class="sub">Vancouver</div>377 </div>378 </div>379 </div>380 381 <!-- VanDusen Botanical Garden -->382 <div class="list-item">383 <div class="checkbox"></div>384 <div class="card">385 <div class="img">[IMG: VanDusen Botanical Garden]</div>386 <div class="content">387 <div class="title-row">388 <span>VanDusen Botanical Garden</span>389 <svg width="36" height="36" viewBox="0 0 24 24">390 <path d="M9 6 L15 12 L9 18" fill="none" stroke="#15335E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>391 </svg>392 </div>393 <div class="desc">394 <span class="badge">🏅 Trip.Best</span>395 <span> No. 11 of Top Best Things to Do in</span>396 </div>397 <div class="sub">Vancouver</div>398 </div>399 </div>400 </div>401 402 <!-- Gastown Steam Clock -->403 <div class="list-item">404 <div class="checkbox"></div>405 <div class="card">406 <div class="img">[IMG: Gastown Steam Clock]</div>407 <div class="content">408 <div class="title-row">409 <span>Gastown Steam Clock</span>410 <svg width="36" height="36" viewBox="0 0 24 24">411 <path d="M9 6 L15 12 L9 18" fill="none" stroke="#15335E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>412 </svg>413 </div>414 <div class="desc">415 <span class="badge">🏅 Trip.Best</span>416 <span> No. 9 of Top Best Things to Do in</span>417 </div>418 <div class="sub">Vancouver</div>419 </div>420 </div>421 </div>422 423 </div>424 425 <!-- Bottom sheet -->426 <div class="bottom-sheet">427 <div class="chip">428 <span>Canada Place</span>429 <svg width="28" height="28" viewBox="0 0 24 24">430 <path d="M6 6 L18 18 M18 6 L6 18" stroke="#3966FF" stroke-width="2" stroke-linecap="round"></path>431 </svg>432 </div>433 <div class="action-btn">Add to Dec 19 (1)</div>434 </div>435 436 <div class="home-indicator"></div>437</div>438</body>439</html>