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 - Vancouver</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #F2F4F8;15 }16 17 /* Status bar */18 .status-bar {19 height: 110px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 padding: 0 40px;24 color: #778196;25 font-weight: 600;26 font-size: 38px;27 }28 .status-icons {29 display: flex;30 align-items: center;31 gap: 24px;32 }33 .icon-dot { width: 16px; height: 16px; background: #778196; border-radius: 50%; }34 .icon-rect { width: 26px; height: 26px; background: #778196; border-radius: 4px; }35 36 /* Top search area */37 .top-row {38 display: flex;39 align-items: center;40 padding: 0 36px 24px 36px;41 gap: 24px;42 }43 .back-btn {44 width: 72px;45 height: 72px;46 display: flex;47 align-items: center;48 justify-content: center;49 }50 .search-box {51 flex: 1;52 height: 100px;53 background: #FFFFFF;54 border: 1px solid #D8DEE8;55 border-radius: 24px;56 display: flex;57 align-items: center;58 padding: 0 28px;59 color: #B0BCCE;60 font-size: 38px;61 box-shadow: 0 2px 0 rgba(0,0,0,0.02);62 }63 .search-box svg { margin-right: 18px; }64 65 .divider {66 height: 1px;67 background: #E7ECF3;68 margin: 10px 0 0 0;69 }70 71 /* Section title */72 .section-title {73 text-align: center;74 font-size: 48px;75 font-weight: 800;76 color: #142A4B;77 padding: 26px 0 18px 0;78 }79 .section-title .caret {80 display: inline-block;81 vertical-align: middle;82 margin-left: 12px;83 }84 85 /* List area */86 .list-area {87 padding: 0 24px 0 24px;88 }89 .list-row {90 display: flex;91 align-items: center;92 gap: 22px;93 margin: 26px 0;94 }95 .checkbox {96 width: 64px;97 height: 64px;98 border: 4px solid #AEB7C7;99 border-radius: 10px;100 background: transparent;101 }102 .card {103 width: 950px;104 height: 210px;105 background: #FFFFFF;106 border-radius: 26px;107 box-shadow: 0 6px 18px rgba(41,56,76,0.08);108 display: flex;109 overflow: hidden;110 }111 .card-img {112 width: 340px;113 height: 100%;114 background: #E0E0E0;115 border-right: 1px solid #BDBDBD;116 display: flex;117 align-items: center;118 justify-content: center;119 color: #757575;120 font-size: 30px;121 text-align: center;122 padding: 0 14px;123 }124 .card-body {125 flex: 1;126 padding: 20px 26px;127 display: flex;128 flex-direction: column;129 justify-content: center;130 }131 .card-title {132 display: flex;133 align-items: center;134 gap: 12px;135 color: #183355;136 font-weight: 800;137 font-size: 46px;138 line-height: 1.1;139 }140 .meta {141 margin-top: 8px;142 display: flex;143 align-items: center;144 gap: 16px;145 flex-wrap: wrap;146 color: #6A7283;147 font-size: 32px;148 }149 .badge {150 font-size: 28px;151 color: #7A4B27;152 background: #F3E7DA;153 border: 1px solid #D9C2A8;154 border-radius: 10px;155 padding: 6px 12px;156 font-weight: 700;157 }158 .location {159 color: #8792A5;160 font-size: 30px;161 margin-top: 6px;162 }163 164 /* Bottom sheet */165 .bottom-sheet {166 position: absolute;167 left: 0;168 right: 0;169 bottom: 100px;170 height: 240px;171 background: #FFFFFF;172 border-radius: 34px 34px 0 0;173 box-shadow: 0 -10px 30px rgba(35,49,70,0.12);174 padding-top: 30px;175 }176 .action-btn {177 width: 960px;178 height: 120px;179 margin: 0 auto;180 background: #B7C0CF;181 color: #FFFFFF;182 font-size: 42px;183 border-radius: 24px;184 display: flex;185 align-items: center;186 justify-content: center;187 font-weight: 800;188 letter-spacing: 0.5px;189 }190 191 /* Home indicator */192 .home-indicator {193 position: absolute;194 bottom: 24px;195 left: 50%;196 transform: translateX(-50%);197 width: 200px;198 height: 12px;199 background: #000000;200 border-radius: 8px;201 opacity: 0.85;202 }203</style>204</head>205<body>206<div id="render-target">207 208 <!-- Status Bar -->209 <div class="status-bar">210 <div>12:27</div>211 <div class="status-icons">212 <div class="icon-rect"></div>213 <div class="icon-dot"></div>214 <div class="icon-rect" style="width:36px;height:36px;"></div>215 <div class="icon-dot"></div>216 <!-- Wi-Fi icon -->217 <svg width="40" height="28" viewBox="0 0 40 28" fill="none" xmlns="http://www.w3.org/2000/svg">218 <path d="M4 9c8-6 24-6 32 0M10 14c6-4 14-4 20 0M16 19c4-2 8-2 12 0M20 24l-4 4h8l-4-4z" stroke="#778196" stroke-width="2" stroke-linecap="round"/>219 </svg>220 <!-- Battery icon -->221 <svg width="60" height="28" viewBox="0 0 60 28" xmlns="http://www.w3.org/2000/svg">222 <rect x="2" y="4" width="48" height="20" rx="4" stroke="#778196" stroke-width="3" fill="none"/>223 <rect x="6" y="8" width="32" height="12" rx="3" fill="#778196"/>224 <rect x="52" y="10" width="6" height="8" rx="2" fill="#778196"/>225 </svg>226 </div>227 </div>228 229 <!-- Top Search Row -->230 <div class="top-row">231 <div class="back-btn">232 <svg width="42" height="42" viewBox="0 0 24 24">233 <path d="M15 19l-7-7 7-7" fill="none" stroke="#1A2F4D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>234 </svg>235 </div>236 <div class="search-box">237 <svg width="34" height="34" viewBox="0 0 24 24">238 <circle cx="11" cy="11" r="7" stroke="#B0BCCE" stroke-width="2" fill="none"/>239 <path d="M21 21l-4-4" stroke="#B0BCCE" stroke-width="2" stroke-linecap="round"/>240 </svg>241 <span>Search attractions</span>242 </div>243 </div>244 <div class="divider"></div>245 246 <!-- Section Title -->247 <div class="section-title">248 Vancouver249 <span class="caret">250 <svg width="22" height="22" viewBox="0 0 24 24">251 <path d="M6 9l6 6 6-6" stroke="#142A4B" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>252 </svg>253 </span>254 </div>255 256 <!-- List -->257 <div class="list-area">258 259 <!-- Gastown -->260 <div class="list-row">261 <div class="checkbox"></div>262 <div class="card">263 <div class="card-img">[IMG: Gastown night lights]</div>264 <div class="card-body">265 <div class="card-title">266 Gastown267 <svg width="24" height="24" viewBox="0 0 24 24">268 <path d="M9 6l6 6-6 6" fill="none" stroke="#6A7283" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>269 </svg>270 </div>271 <div class="meta">272 <span class="badge">Trip.Best</span>273 <span>No. 4 of Top Best Things to Do in Vancouver</span>274 </div>275 <div class="location">Vancouver</div>276 </div>277 </div>278 </div>279 280 <!-- Stanley Park -->281 <div class="list-row">282 <div class="checkbox"></div>283 <div class="card">284 <div class="card-img">[IMG: Stanley Park skyline view]</div>285 <div class="card-body">286 <div class="card-title">287 Stanley Park288 <svg width="24" height="24" viewBox="0 0 24 24">289 <path d="M9 6l6 6-6 6" fill="none" stroke="#6A7283" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>290 </svg>291 </div>292 <div class="meta">293 <span class="badge">Trip.Best</span>294 <span>No. 1 of Top Best Things to Do in Greater Vancouver</span>295 </div>296 <div class="location">Greater Vancouver</div>297 </div>298 </div>299 </div>300 301 <!-- Canada Place -->302 <div class="list-row">303 <div class="checkbox"></div>304 <div class="card">305 <div class="card-img">[IMG: Canada Place aerial]</div>306 <div class="card-body">307 <div class="card-title">308 Canada Place309 <svg width="24" height="24" viewBox="0 0 24 24">310 <path d="M9 6l6 6-6 6" fill="none" stroke="#6A7283" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>311 </svg>312 </div>313 <div class="meta">314 <span class="badge">Trip.Best</span>315 <span>No. 3 of Top Best Things to Do in Vancouver</span>316 </div>317 <div class="location">Vancouver</div>318 </div>319 </div>320 </div>321 322 <!-- Granville Island -->323 <div class="list-row">324 <div class="checkbox"></div>325 <div class="card">326 <div class="card-img">[IMG: Granville Island aerial]</div>327 <div class="card-body">328 <div class="card-title">329 Granville Island330 <svg width="24" height="24" viewBox="0 0 24 24">331 <path d="M9 6l6 6-6 6" fill="none" stroke="#6A7283" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>332 </svg>333 </div>334 <div class="meta">335 <span class="badge">Trip.Best</span>336 <span>No. 5 of Top Best Things to Do in Vancouver</span>337 </div>338 <div class="location">Vancouver</div>339 </div>340 </div>341 </div>342 343 <!-- Vancouver Aquarium -->344 <div class="list-row">345 <div class="checkbox"></div>346 <div class="card">347 <div class="card-img">[IMG: Globe at Vancouver Aquarium]</div>348 <div class="card-body">349 <div class="card-title">350 Vancouver Aquarium351 <svg width="24" height="24" viewBox="0 0 24 24">352 <path d="M9 6l6 6-6 6" fill="none" stroke="#6A7283" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>353 </svg>354 </div>355 <div class="meta">356 <span class="badge">Trip.Best</span>357 <span>No. 8 of Top Best Things to Do in Vancouver</span>358 </div>359 <div class="location">Vancouver</div>360 </div>361 </div>362 </div>363 364 <!-- Queen Elizabeth Park -->365 <div class="list-row">366 <div class="checkbox"></div>367 <div class="card">368 <div class="card-img">[IMG: Queen Elizabeth Park garden]</div>369 <div class="card-body">370 <div class="card-title">371 Queen Elizabeth Park372 <svg width="24" height="24" viewBox="0 0 24 24">373 <path d="M9 6l6 6-6 6" fill="none" stroke="#6A7283" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>374 </svg>375 </div>376 <div class="meta">377 <span class="badge">Trip.Best</span>378 <span>No. 6 of Top Best Things to Do in Vancouver</span>379 </div>380 <div class="location">Vancouver</div>381 </div>382 </div>383 </div>384 385 <!-- VanDusen Botanical Garden -->386 <div class="list-row">387 <div class="checkbox"></div>388 <div class="card">389 <div class="card-img">[IMG: VanDusen botanical path]</div>390 <div class="card-body">391 <div class="card-title">392 VanDusen Botanical Garden393 <svg width="24" height="24" viewBox="0 0 24 24">394 <path d="M9 6l6 6-6 6" fill="none" stroke="#6A7283" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>395 </svg>396 </div>397 <div class="meta">398 <span class="badge">Trip.Best</span>399 <span>No. 11 of Top Best Things to Do in Vancouver</span>400 </div>401 <div class="location">Vancouver</div>402 </div>403 </div>404 </div>405 406 <!-- Gastown Steam Clock -->407 <div class="list-row">408 <div class="checkbox"></div>409 <div class="card">410 <div class="card-img">[IMG: Gastown Steam Clock at night]</div>411 <div class="card-body">412 <div class="card-title">413 Gastown Steam Clock414 <svg width="24" height="24" viewBox="0 0 24 24">415 <path d="M9 6l6 6-6 6" fill="none" stroke="#6A7283" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>416 </svg>417 </div>418 <div class="meta">419 <span class="badge">Trip.Best</span>420 <span>No. 9 of Top Best Things to Do in Vancouver</span>421 </div>422 <div class="location">Vancouver</div>423 </div>424 </div>425 </div>426 427 </div>428 429 <!-- Bottom sheet action -->430 <div class="bottom-sheet">431 <div class="action-btn">Add to Dec 16 (0)</div>432 </div>433 434 <!-- Home indicator -->435 <div class="home-indicator"></div>436 437</div>438</body>439</html>