GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Attractions List UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #ffffff;15 border-radius: 38px;16 box-shadow: 0 6px 24px rgba(0,0,0,0.08);17 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;18 color: #1b2a44;19 }20 .statusbar {21 height: 120px;22 padding: 0 40px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #2f3b4d;27 font-weight: 600;28 font-size: 40px;29 }30 .status-icons { display: flex; align-items: center; gap: 26px; color: #8591a5; font-size: 36px; }31 .header {32 height: 150px;33 padding: 0 36px 0 36px;34 display: flex;35 align-items: center;36 gap: 28px;37 }38 .icon-btn {39 width: 84px;40 height: 84px;41 border-radius: 20px;42 display: flex;43 align-items: center;44 justify-content: center;45 }46 .search {47 flex: 1;48 height: 96px;49 border: 1px solid #d6dbe5;50 border-radius: 24px;51 display: flex;52 align-items: center;53 gap: 22px;54 padding: 0 26px;55 color: #96a1b5;56 font-size: 36px;57 box-shadow: 0 2px 0 rgba(0,0,0,0.02) inset;58 }59 .divider {60 height: 1px;61 background: #e9edf4;62 margin: 10px 0 0 0;63 }64 .title-row {65 height: 120px;66 display: flex;67 align-items: center;68 justify-content: center;69 font-weight: 800;70 font-size: 52px;71 color: #1c2c4a;72 }73 .title-row svg { margin-left: 10px; }74 .list-area {75 position: relative;76 background: #eef2f7;77 padding: 24px 0 320px 0;78 }79 .list-row {80 display: flex;81 align-items: center;82 gap: 24px;83 padding: 26px 48px;84 }85 .checkbox {86 width: 60px;87 height: 60px;88 border: 2px solid #b7bfcd;89 border-radius: 10px;90 background: #f7f8fb;91 }92 .card {93 width: 900px;94 background: #ffffff;95 border-radius: 28px;96 box-shadow: 0 6px 18px rgba(26,42,70,0.06);97 display: flex;98 overflow: hidden;99 }100 .thumb {101 width: 300px;102 margin: 22px 0 22px 22px;103 height: 196px;104 background: #E0E0E0;105 border: 1px solid #BDBDBD;106 border-radius: 22px;107 display: flex;108 align-items: center;109 justify-content: center;110 color: #757575;111 font-size: 28px;112 text-align: center;113 padding: 0 10px;114 }115 .card-body {116 flex: 1;117 padding: 26px 26px 22px 26px;118 display: flex;119 flex-direction: column;120 gap: 10px;121 }122 .card-title {123 display: flex;124 align-items: center;125 gap: 12px;126 font-size: 48px;127 font-weight: 800;128 color: #163257;129 letter-spacing: 0.2px;130 }131 .chev-right {132 width: 28px; height: 28px;133 }134 .badge-row {135 display: flex;136 align-items: center;137 gap: 14px;138 font-size: 30px;139 color: #6b4a2c;140 }141 .badge {142 font-size: 26px;143 color: #6b4a2c;144 background: #f5e8d9;145 border: 1px solid #e4cdb1;146 border-radius: 12px;147 padding: 6px 10px;148 font-weight: 700;149 }150 .subtext {151 font-size: 32px;152 color: #5a6577;153 }154 .city {155 margin-top: 2px;156 font-size: 28px;157 color: #8a94a7;158 }159 .bottom-sheet {160 position: absolute;161 left: 0; right: 0; bottom: 0;162 height: 260px;163 background: #ffffff;164 border-top-left-radius: 34px;165 border-top-right-radius: 34px;166 box-shadow: 0 -8px 20px rgba(0,0,0,0.08);167 padding: 24px 36px;168 }169 .cta {170 width: 100%;171 height: 120px;172 background: #bfc7d4;173 color: #ffffff;174 border-radius: 26px;175 display: flex;176 align-items: center;177 justify-content: center;178 font-size: 44px;179 font-weight: 800;180 }181 .gesture-bar {182 position: absolute;183 bottom: 18px;184 left: 50%;185 transform: translateX(-50%);186 width: 420px;187 height: 12px;188 background: #000000;189 border-radius: 10px;190 opacity: 0.8;191 }192</style>193</head>194<body>195<div id="render-target">196 197 <div class="statusbar">198 <div>12:30</div>199 <div class="status-icons">200 <span>◔</span>201 <span>ⓘ</span>202 <span>◯</span>203 <span>🞇</span>204 <span>•</span>205 <span>206 <!-- wifi icon -->207 <svg width="44" height="44" viewBox="0 0 24 24">208 <path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M8 16c2-2 6-2 8 0M12 19a1 1 0 1 0 0 2 1 1 0 0 0 0-2" fill="none" stroke="#56627a" stroke-width="2" stroke-linecap="round"/>209 </svg>210 </span>211 <span>212 <!-- battery icon -->213 <svg width="44" height="44" viewBox="0 0 24 24">214 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#56627a" fill="none" stroke-width="2"/>215 <rect x="4" y="8" width="12" height="8" fill="#56627a"/>216 <rect x="20" y="10" width="2" height="4" rx="1" fill="#56627a"/>217 </svg>218 </span>219 </div>220 </div>221 222 <div class="header">223 <div class="icon-btn">224 <!-- back arrow -->225 <svg width="52" height="52" viewBox="0 0 24 24">226 <path d="M15 18l-6-6 6-6" stroke="#1e2f4f" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>227 </svg>228 </div>229 <div class="search">230 <!-- search icon -->231 <svg width="42" height="42" viewBox="0 0 24 24">232 <circle cx="11" cy="11" r="7" stroke="#95a3b7" stroke-width="2" fill="none"/>233 <path d="M20 20l-4-4" stroke="#95a3b7" stroke-width="2" stroke-linecap="round"/>234 </svg>235 <span>Search attractions</span>236 </div>237 </div>238 239 <div class="divider"></div>240 241 <div class="title-row">242 Vancouver243 <!-- caret down -->244 <svg width="34" height="34" viewBox="0 0 24 24">245 <path d="M6 9l6 6 6-6" fill="none" stroke="#1c2c4a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>246 </svg>247 </div>248 249 <div class="list-area">250 251 <!-- Row 1 -->252 <div class="list-row">253 <div class="checkbox"></div>254 <div class="card">255 <div class="thumb">[IMG: Gastown at Night]</div>256 <div class="card-body">257 <div class="card-title">258 Gastown259 <svg class="chev-right" viewBox="0 0 24 24">260 <path d="M9 6l6 6-6 6" fill="none" stroke="#5b6e8a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>261 </svg>262 </div>263 <div class="badge-row">264 <div class="badge">Trip.Best</div>265 <div class="subtext">No. 4 of Top Best Things to Do in</div>266 </div>267 <div class="city">Vancouver</div>268 </div>269 </div>270 </div>271 272 <!-- Row 2 -->273 <div class="list-row">274 <div class="checkbox"></div>275 <div class="card">276 <div class="thumb">[IMG: Stanley Park Skyline View]</div>277 <div class="card-body">278 <div class="card-title">279 Stanley Park280 <svg class="chev-right" viewBox="0 0 24 24">281 <path d="M9 6l6 6-6 6" fill="none" stroke="#5b6e8a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>282 </svg>283 </div>284 <div class="badge-row">285 <div class="badge">Trip.Best</div>286 <div class="subtext">No. 1 of Top Best Things to Do in</div>287 </div>288 <div class="city">Greater Vancouver</div>289 </div>290 </div>291 </div>292 293 <!-- Row 3 -->294 <div class="list-row">295 <div class="checkbox"></div>296 <div class="card">297 <div class="thumb">[IMG: Canada Place Aerial]</div>298 <div class="card-body">299 <div class="card-title">300 Canada Place301 <svg class="chev-right" viewBox="0 0 24 24">302 <path d="M9 6l6 6-6 6" fill="none" stroke="#5b6e8a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>303 </svg>304 </div>305 <div class="badge-row">306 <div class="badge">Trip.Best</div>307 <div class="subtext">No. 3 of Top Best Things to Do in</div>308 </div>309 <div class="city">Vancouver</div>310 </div>311 </div>312 </div>313 314 <!-- Row 4 -->315 <div class="list-row">316 <div class="checkbox"></div>317 <div class="card">318 <div class="thumb">[IMG: Granville Island Market View]</div>319 <div class="card-body">320 <div class="card-title">321 Granville Island322 <svg class="chev-right" viewBox="0 0 24 24">323 <path d="M9 6l6 6-6 6" fill="none" stroke="#5b6e8a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>324 </svg>325 </div>326 <div class="badge-row">327 <div class="badge">Trip.Best</div>328 <div class="subtext">No. 5 of Top Best Things to Do in</div>329 </div>330 <div class="city">Vancouver</div>331 </div>332 </div>333 </div>334 335 <!-- Row 5 -->336 <div class="list-row">337 <div class="checkbox"></div>338 <div class="card">339 <div class="thumb">[IMG: Vancouver Aquarium Exhibit]</div>340 <div class="card-body">341 <div class="card-title">342 Vancouver Aquarium343 <svg class="chev-right" viewBox="0 0 24 24">344 <path d="M9 6l6 6-6 6" fill="none" stroke="#5b6e8a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>345 </svg>346 </div>347 <div class="badge-row">348 <div class="badge">Trip.Best</div>349 <div class="subtext">No. 8 of Top Best Things to Do in</div>350 </div>351 <div class="city">Vancouver</div>352 </div>353 </div>354 </div>355 356 <!-- Row 6 -->357 <div class="list-row">358 <div class="checkbox"></div>359 <div class="card">360 <div class="thumb">[IMG: Queen Elizabeth Park Gardens]</div>361 <div class="card-body">362 <div class="card-title">363 Queen Elizabeth Park364 <svg class="chev-right" viewBox="0 0 24 24">365 <path d="M9 6l6 6-6 6" fill="none" stroke="#5b6e8a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>366 </svg>367 </div>368 <div class="badge-row">369 <div class="badge">Trip.Best</div>370 <div class="subtext">No. 6 of Top Best Things to Do in</div>371 </div>372 <div class="city">Vancouver</div>373 </div>374 </div>375 </div>376 377 <!-- Row 7 -->378 <div class="list-row">379 <div class="checkbox"></div>380 <div class="card">381 <div class="thumb">[IMG: VanDusen Botanical Garden Path]</div>382 <div class="card-body">383 <div class="card-title">384 VanDusen Botanical Garden385 <svg class="chev-right" viewBox="0 0 24 24">386 <path d="M9 6l6 6-6 6" fill="none" stroke="#5b6e8a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>387 </svg>388 </div>389 <div class="badge-row">390 <div class="badge">Trip.Best</div>391 <div class="subtext">No. 11 of Top Best Things to Do in</div>392 </div>393 <div class="city">Vancouver</div>394 </div>395 </div>396 </div>397 398 <!-- Row 8 -->399 <div class="list-row">400 <div class="checkbox"></div>401 <div class="card">402 <div class="thumb">[IMG: Gastown Steam Clock]</div>403 <div class="card-body">404 <div class="card-title">405 Gastown Steam Clock406 <svg class="chev-right" viewBox="0 0 24 24">407 <path d="M9 6l6 6-6 6" fill="none" stroke="#5b6e8a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>408 </svg>409 </div>410 <div class="badge-row">411 <div class="badge">Trip.Best</div>412 <div class="subtext">No. 9 of Top Best Things to Do in</div>413 </div>414 <div class="city">Vancouver</div>415 </div>416 </div>417 </div>418 419 </div>420 421 <div class="bottom-sheet">422 <div class="cta">Add to Dec 18 (0)</div>423 </div>424 425 <div class="gesture-bar"></div>426</div>427</body>428</html>