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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #F3F5F9;15 color: #0E1A2B;16 }17 .status-bar {18 height: 90px;19 padding: 0 36px;20 display: flex;21 align-items: center;22 font-size: 38px;23 color: #2E3440;24 }25 .status-bar .icons {26 margin-left: auto;27 display: flex;28 gap: 26px;29 align-items: center;30 }31 /* Header with back and search */32 .header {33 padding: 16px 32px 24px 32px;34 }35 .header-row {36 display: flex;37 align-items: center;38 gap: 24px;39 }40 .nav-back {41 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;42 }43 .nav-back svg { width: 40px; height: 40px; fill: none; stroke: #2E3440; stroke-width: 6; }44 .search {45 flex: 1;46 height: 108px;47 border-radius: 22px;48 background: #FFFFFF;49 border: 1px solid #D9DEE7;50 display: flex;51 align-items: center;52 padding: 0 28px;53 box-shadow: 0 2px 0 rgba(0,0,0,0.02);54 }55 .search svg { width: 42px; height: 42px; stroke: #8892A0; stroke-width: 6; fill: none; }56 .search input {57 border: none; outline: none; flex: 1;58 margin-left: 16px; font-size: 40px; color: #6B7484;59 }60 .divider { height: 1px; background: #E6EAF1; margin-top: 12px; }61 .title-row {62 text-align: center;63 font-weight: 800;64 font-size: 52px;65 color: #1A2A44;66 padding: 28px 0;67 display: flex;68 align-items: center;69 justify-content: center;70 gap: 12px;71 }72 .title-row svg { width: 26px; height: 26px; fill: #1A2A44; }73 /* List */74 .list {75 padding: 0 32px;76 }77 .list-item {78 display: flex;79 align-items: center;80 gap: 24px;81 margin: 22px 0;82 }83 .check {84 width: 44px; height: 44px;85 border: 3px solid #B9C2D3;86 border-radius: 8px;87 background: #EEF1F6;88 display: flex; align-items: center; justify-content: center;89 flex-shrink: 0;90 }91 .check.selected {92 background: #2F5BFF;93 border-color: #2F5BFF;94 }95 .check.selected svg { width: 30px; height: 30px; fill: none; stroke: #FFFFFF; stroke-width: 6; }96 .card {97 flex: 1;98 background: #FFFFFF;99 border-radius: 26px;100 box-shadow: 0 8px 20px rgba(25, 36, 59, 0.06);101 display: flex;102 padding: 24px;103 gap: 24px;104 align-items: center;105 }106 .thumb {107 width: 300px; height: 180px;108 border-radius: 22px;109 background: #E0E0E0;110 border: 1px solid #BDBDBD;111 display: flex; align-items: center; justify-content: center;112 color: #757575; font-size: 28px; text-align: center;113 }114 .card-content { flex: 1; }115 .card-title {116 display: flex; align-items: center; gap: 14px;117 font-size: 52px; font-weight: 800; color: #163055; line-height: 1.2;118 }119 .card-title svg { width: 28px; height: 28px; fill: #7B8798; }120 .card-sub {121 margin-top: 10px;122 display: flex; align-items: center; flex-wrap: wrap; gap: 14px;123 font-size: 34px; color: #6B7484;124 }125 .tag {126 padding: 10px 16px;127 background: #F4E6D3;128 color: #8B5C35;129 border: 1px solid #E3D1B5;130 border-radius: 14px;131 font-weight: 700;132 font-size: 30px;133 }134 .location {135 margin-top: 6px;136 font-size: 32px;137 color: #7A8698;138 }139 /* Bottom sheet */140 .bottom-sheet {141 position: absolute;142 left: 0; right: 0; bottom: 72px;143 background: #FFFFFF;144 border-top-left-radius: 34px;145 border-top-right-radius: 34px;146 box-shadow: 0 -10px 24px rgba(18, 28, 45, 0.16);147 padding: 26px 36px 40px;148 }149 .chips {150 display: flex; gap: 18px; flex-wrap: wrap;151 margin-bottom: 24px;152 }153 .chip {154 display: inline-flex; align-items: center; gap: 18px;155 padding: 22px 28px;156 border-radius: 16px;157 border: 2px solid #C9D6F3;158 color: #3359A8;159 background: #F7FAFF;160 font-size: 40px;161 }162 .chip .close {163 width: 38px; height: 38px;164 display: inline-flex; align-items: center; justify-content: center;165 border-radius: 50%;166 background: #E9EFFD; color: #3359A8; font-weight: 800;167 font-size: 32px;168 }169 .cta {170 margin-top: 16px;171 height: 120px;172 background: #3E68FF;173 color: #FFFFFF;174 font-size: 46px; font-weight: 800;175 border-radius: 22px;176 display: flex; align-items: center; justify-content: center;177 box-shadow: 0 10px 22px rgba(62,104,255,0.35);178 }179 .home-indicator {180 position: absolute; bottom: 18px; left: 50%;181 transform: translateX(-50%);182 width: 360px; height: 12px; background: #111; opacity: 0.12; border-radius: 12px;183 }184</style>185</head>186<body>187<div id="render-target">188 <!-- Status bar -->189 <div class="status-bar">190 <div>12:28</div>191 <div class="icons">192 <span>ib</span>193 <span>◎</span>194 <span>N</span>195 <span style="width:28px;height:28px;background:#8A909A;border-radius:4px;display:inline-block;"></span>196 <span>•</span>197 <svg viewBox="0 0 24 24" width="40" height="40"><path d="M3 10h18l-2 2v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-6l-2-2zM7 6h10l1 2H6l1-2z" fill="#5A5F6B"/></svg>198 <svg viewBox="0 0 24 24" width="40" height="40"><path d="M6 2h12v20H6z" fill="#5A5F6B"/></svg>199 </div>200 </div>201 202 <!-- Header with back and search -->203 <div class="header">204 <div class="header-row">205 <div class="nav-back">206 <svg viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7" /></svg>207 </div>208 <div class="search">209 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"></circle><path d="M21 21l-5-5"></path></svg>210 <input type="text" placeholder="Search attractions">211 </div>212 </div>213 <div class="divider"></div>214 </div>215 216 <!-- City title -->217 <div class="title-row">218 <span>Vancouver</span>219 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" /></svg>220 </div>221 222 <!-- List -->223 <div class="list">224 225 <!-- Gastown -->226 <div class="list-item">227 <div class="check"></div>228 <div class="card">229 <div class="thumb">[IMG: Gastown Night Street]</div>230 <div class="card-content">231 <div class="card-title">232 <span>Gastown</span>233 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"></path></svg>234 </div>235 <div class="card-sub">236 <span class="tag">Trip.Best</span>237 <span>No. 4 of Top Best Things to Do in</span>238 </div>239 <div class="location">Vancouver</div>240 </div>241 </div>242 </div>243 244 <!-- Stanley Park -->245 <div class="list-item">246 <div class="check"></div>247 <div class="card">248 <div class="thumb">[IMG: Stanley Park Waterfront]</div>249 <div class="card-content">250 <div class="card-title">251 <span>Stanley Park</span>252 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"></path></svg>253 </div>254 <div class="card-sub">255 <span class="tag">Trip.Best</span>256 <span>No. 1 of Top Best Things to Do in</span>257 </div>258 <div class="location">Greater Vancouver</div>259 </div>260 </div>261 </div>262 263 <!-- Canada Place -->264 <div class="list-item">265 <div class="check"></div>266 <div class="card">267 <div class="thumb">[IMG: Aerial Canada Place]</div>268 <div class="card-content">269 <div class="card-title">270 <span>Canada Place</span>271 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"></path></svg>272 </div>273 <div class="card-sub">274 <span class="tag">Trip.Best</span>275 <span>No. 3 of Top Best Things to Do in</span>276 </div>277 <div class="location">Vancouver</div>278 </div>279 </div>280 </div>281 282 <!-- Granville Island -->283 <div class="list-item">284 <div class="check"></div>285 <div class="card">286 <div class="thumb">[IMG: Granville Island Overhead]</div>287 <div class="card-content">288 <div class="card-title">289 <span>Granville Island</span>290 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"></path></svg>291 </div>292 <div class="card-sub">293 <span class="tag">Trip.Best</span>294 <span>No. 5 of Top Best Things to Do in</span>295 </div>296 <div class="location">Vancouver</div>297 </div>298 </div>299 </div>300 301 <!-- Vancouver Aquarium -->302 <div class="list-item">303 <div class="check"></div>304 <div class="card">305 <div class="thumb">[IMG: Vancouver Aquarium Exhibit]</div>306 <div class="card-content">307 <div class="card-title">308 <span>Vancouver Aquarium</span>309 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"></path></svg>310 </div>311 <div class="card-sub">312 <span class="tag">Trip.Best</span>313 <span>No. 8 of Top Best Things to Do in</span>314 </div>315 <div class="location">Vancouver</div>316 </div>317 </div>318 </div>319 320 <!-- Queen Elizabeth Park (selected) -->321 <div class="list-item">322 <div class="check selected">323 <svg viewBox="0 0 24 24"><path d="M5 13l5 5 9-11"></path></svg>324 </div>325 <div class="card">326 <div class="thumb">[IMG: Queen Elizabeth Park Garden]</div>327 <div class="card-content">328 <div class="card-title">329 <span>Queen Elizabeth Park</span>330 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"></path></svg>331 </div>332 <div class="card-sub">333 <span class="tag">Trip.Best</span>334 <span>No. 6 of Top Best Things to Do in</span>335 </div>336 <div class="location">Vancouver</div>337 </div>338 </div>339 </div>340 341 <!-- VanDusen Botanical Garden -->342 <div class="list-item">343 <div class="check"></div>344 <div class="card">345 <div class="thumb">[IMG: VanDusen Botanical Garden Path]</div>346 <div class="card-content">347 <div class="card-title">348 <span>VanDusen Botanical Garden</span>349 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"></path></svg>350 </div>351 <div class="card-sub">352 <span class="tag">Trip.Best</span>353 <span>No. 11 of Top Best Things to Do in</span>354 </div>355 <div class="location">Vancouver</div>356 </div>357 </div>358 </div>359 360 <!-- Gastown Steam Clock (peek) -->361 <div class="list-item">362 <div class="check"></div>363 <div class="card">364 <div class="thumb">[IMG: Gastown Steam Clock]</div>365 <div class="card-content">366 <div class="card-title">367 <span>Gastown Steam Clock</span>368 <svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"></path></svg>369 </div>370 </div>371 </div>372 </div>373 374 </div>375 376 <!-- Bottom sheet -->377 <div class="bottom-sheet">378 <div class="chips">379 <div class="chip">380 <span>Queen Elizabeth Park</span>381 <span class="close">×</span>382 </div>383 </div>384 <div class="cta">Add to Dec 17 (1)</div>385 </div>386 387 <div class="home-indicator"></div>388</div>389</body>390</html>