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, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#F5F7FA; border-radius:38px; box-shadow:0 20px 50px rgba(0,0,0,0.08);12 color:#1E2A3B;13 }14 15 /* Status bar */16 .status-bar { position:absolute; top:0; left:0; right:0; height:96px; padding:24px 32px; display:flex; align-items:center; justify-content:space-between; color:#404A5A; font-weight:600; }17 .status-left { display:flex; align-items:center; gap:18px; }18 .status-right { display:flex; align-items:center; gap:18px; }19 .dot { width:10px; height:10px; background:#7C8698; border-radius:50%; display:inline-block; }20 21 /* Header with search */22 .header { position:absolute; top:96px; left:0; right:0; padding:24px 36px 18px; }23 .search-row { display:flex; align-items:center; gap:24px; }24 .back-btn { width:72px; height:72px; display:flex; align-items:center; justify-content:center; }25 .search-field {26 flex:1; height:84px; background:#ECEFF3; border:1px solid #D7DDE8; border-radius:20px;27 display:flex; align-items:center; gap:18px; padding:0 22px; color:#97A3B5; font-size:34px; font-weight:500;28 }29 .search-field svg { width:36px; height:36px; fill:#97A3B5; }30 .divider { height:2px; background:#E6EAF0; margin-top:24px; }31 32 /* Title */33 .city-title { position:absolute; top:228px; left:0; right:0; text-align:center; font-size:48px; font-weight:800; color:#1D2E4C; }34 .city-title .caret { display:inline-block; vertical-align:middle; margin-left:14px; }35 .city-title svg { width:28px; height:28px; fill:#6A778C; }36 37 /* List */38 .list { position:absolute; top:320px; left:0; right:0; padding:0 24px 0 24px; }39 .list-row { display:flex; align-items:flex-start; gap:24px; margin:24px 0; }40 .check-col { width:92px; display:flex; align-items:center; justify-content:center; }41 .checkbox {42 width:62px; height:62px; border-radius:8px; border:2px solid #9FB1CC; background:#F2F5FA;43 }44 .checkbox.selected { border-color:#3A63FF; background:#3A63FF; position:relative; }45 .checkbox.selected:after {46 content:''; position:absolute; width:22px; height:12px; border-left:4px solid #fff; border-bottom:4px solid #fff;47 transform:rotate(-45deg); left:16px; top:20px;48 }49 50 .card {51 flex:1; background:#FFFFFF; border-radius:30px; box-shadow:0 6px 14px rgba(25,40,60,0.08);52 padding:20px; display:flex; gap:22px; align-items:center;53 }54 .thumb {55 width:320px; height:190px; border-radius:26px; overflow:hidden; flex-shrink:0;56 background:#E0E0E0; border:1px solid #BDBDBD; display:flex; justify-content:center; align-items:center; color:#757575; font-size:28px; text-align:center; padding:10px;57 }58 .card-content { flex:1; }59 .title-row { display:flex; align-items:center; justify-content:space-between; }60 .card-title { font-size:44px; font-weight:800; color:#1D3457; }61 .card-title small { font-weight:700; color:#7C8AA0; font-size:38px; }62 .arrow-right svg { width:36px; height:36px; fill:#8A96AB; }63 .badge-row { display:flex; align-items:center; gap:14px; margin-top:10px; }64 .badge {65 font-size:26px; color:#7A4D2A; background:#F4E7D9; border:1px solid #D2B293; border-radius:10px;66 padding:6px 10px; font-weight:700;67 }68 .subtext { font-size:28px; color:#6B788E; }69 .location { font-size:26px; color:#8A96AB; margin-top:6px; }70 71 /* Bottom sheet */72 .bottom-sheet {73 position:absolute; left:0; right:0; bottom:0; height:420px; background:#FFFFFF;74 border-top-left-radius:32px; border-top-right-radius:32px; box-shadow:0 -10px 30px rgba(0,0,0,0.08);75 padding:32px 40px;76 }77 .chip-row { display:flex; gap:18px; align-items:center; }78 .chip {79 background:#ECF1FF; border:1px solid #BFD0FF; color:#3156FF; border-radius:16px; padding:18px 24px;80 font-size:30px; font-weight:700; display:flex; align-items:center; gap:16px;81 }82 .chip .x {83 width:30px; height:30px; border-radius:8px; background:#D6E1FF; color:#3156FF; display:flex; align-items:center; justify-content:center; font-weight:900;84 }85 .cta {86 margin-top:36px; background:#3462FF; color:#fff; font-size:42px; font-weight:800;87 border-radius:20px; height:120px; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 20px rgba(52,98,255,0.35);88 }89 90 /* Home indicator */91 .home-indicator { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); width:300px; height:10px; background:#0F0F12; border-radius:10px; opacity:0.85; }92 93</style>94</head>95<body>96<div id="render-target">97 98 <!-- Status bar -->99 <div class="status-bar">100 <div class="status-left">101 <div style="font-size:36px; font-weight:800;">12:27</div>102 <span class="dot"></span>103 <span class="dot"></span>104 <span class="dot"></span>105 </div>106 <div class="status-right">107 <!-- Simple wifi icon -->108 <svg viewBox="0 0 24 24" width="36" height="36" fill="#6E778A"><path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 4c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 4c1-1 3-1 4 0l-2 2-2-2z"/></svg>109 <!-- Battery icon -->110 <svg viewBox="0 0 24 24" width="36" height="36" fill="#6E778A"><rect x="2" y="6" width="18" height="12" rx="2" ry="2"></rect><rect x="20" y="10" width="2" height="4"></rect><rect x="4" y="8" width="10" height="8" fill="#6E778A"></rect></svg>111 </div>112 </div>113 114 <!-- Header with search -->115 <div class="header">116 <div class="search-row">117 <div class="back-btn">118 <svg viewBox="0 0 24 24" width="48" height="48" fill="#2B3A53"><path d="M15.5 4.5L7 12l8.5 7.5-1.8 2.1L3.8 12 13.7 2.4z"/></svg>119 </div>120 <div class="search-field">121 <svg viewBox="0 0 24 24"><path d="M10 2a8 8 0 105.3 14l4.7 4.7-2 2-4.7-4.7A8 8 0 1010 2z"/></svg>122 <span>Search attractions</span>123 </div>124 </div>125 <div class="divider"></div>126 </div>127 128 <!-- City title -->129 <div class="city-title">130 Vancouver131 <span class="caret">132 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6z"/></svg>133 </span>134 </div>135 136 <!-- List of attractions -->137 <div class="list">138 139 <!-- Gastown -->140 <div class="list-row">141 <div class="check-col">142 <div class="checkbox"></div>143 </div>144 <div class="card">145 <div class="thumb">[IMG: Gastown Night]</div>146 <div class="card-content">147 <div class="title-row">148 <div class="card-title">Gastown</div>149 <div class="arrow-right">150 <svg viewBox="0 0 24 24"><path d="M8 5l8 7-8 7z"/></svg>151 </div>152 </div>153 <div class="badge-row">154 <div class="badge">Trip.Best</div>155 <div class="subtext">No. 4 of Top Best Things to Do in Vancouver</div>156 </div>157 <div class="location">Vancouver</div>158 </div>159 </div>160 </div>161 162 <!-- Stanley Park (selected) -->163 <div class="list-row">164 <div class="check-col">165 <div class="checkbox selected"></div>166 </div>167 <div class="card">168 <div class="thumb">[IMG: Stanley Park Seawall]</div>169 <div class="card-content">170 <div class="title-row">171 <div class="card-title">Stanley Park</div>172 <div class="arrow-right">173 <svg viewBox="0 0 24 24"><path d="M8 5l8 7-8 7z"/></svg>174 </div>175 </div>176 <div class="badge-row">177 <div class="badge">Trip.Best</div>178 <div class="subtext">No. 1 of Top Best Things to Do in Greater Vancouver</div>179 </div>180 <div class="location">Greater Vancouver</div>181 </div>182 </div>183 </div>184 185 <!-- Canada Place -->186 <div class="list-row">187 <div class="check-col">188 <div class="checkbox"></div>189 </div>190 <div class="card">191 <div class="thumb">[IMG: Canada Place Aerial]</div>192 <div class="card-content">193 <div class="title-row">194 <div class="card-title">Canada Place</div>195 <div class="arrow-right">196 <svg viewBox="0 0 24 24"><path d="M8 5l8 7-8 7z"/></svg>197 </div>198 </div>199 <div class="badge-row">200 <div class="badge">Trip.Best</div>201 <div class="subtext">No. 3 of Top Best Things to Do in Vancouver</div>202 </div>203 <div class="location">Vancouver</div>204 </div>205 </div>206 </div>207 208 <!-- Granville Island -->209 <div class="list-row">210 <div class="check-col">211 <div class="checkbox"></div>212 </div>213 <div class="card">214 <div class="thumb">[IMG: Granville Island Market]</div>215 <div class="card-content">216 <div class="title-row">217 <div class="card-title">Granville Island</div>218 <div class="arrow-right">219 <svg viewBox="0 0 24 24"><path d="M8 5l8 7-8 7z"/></svg>220 </div>221 </div>222 <div class="badge-row">223 <div class="badge">Trip.Best</div>224 <div class="subtext">No. 5 of Top Best Things to Do in Vancouver</div>225 </div>226 <div class="location">Vancouver</div>227 </div>228 </div>229 </div>230 231 <!-- Vancouver Aquarium -->232 <div class="list-row">233 <div class="check-col">234 <div class="checkbox"></div>235 </div>236 <div class="card">237 <div class="thumb">[IMG: Vancouver Aquarium Exhibit]</div>238 <div class="card-content">239 <div class="title-row">240 <div class="card-title">Vancouver Aquarium</div>241 <div class="arrow-right">242 <svg viewBox="0 0 24 24"><path d="M8 5l8 7-8 7z"/></svg>243 </div>244 </div>245 <div class="badge-row">246 <div class="badge">Trip.Best</div>247 <div class="subtext">No. 8 of Top Best Things to Do in Vancouver</div>248 </div>249 <div class="location">Vancouver</div>250 </div>251 </div>252 </div>253 254 <!-- Queen Elizabeth Park -->255 <div class="list-row">256 <div class="check-col">257 <div class="checkbox"></div>258 </div>259 <div class="card">260 <div class="thumb">[IMG: Queen Elizabeth Park Garden]</div>261 <div class="card-content">262 <div class="title-row">263 <div class="card-title">Queen Elizabeth Park</div>264 <div class="arrow-right">265 <svg viewBox="0 0 24 24"><path d="M8 5l8 7-8 7z"/></svg>266 </div>267 </div>268 <div class="badge-row">269 <div class="badge">Trip.Best</div>270 <div class="subtext">No. 6 of Top Best Things to Do in Vancouver</div>271 </div>272 <div class="location">Vancouver</div>273 </div>274 </div>275 </div>276 277 <!-- VanDusen Botanical Garden -->278 <div class="list-row">279 <div class="check-col">280 <div class="checkbox"></div>281 </div>282 <div class="card">283 <div class="thumb">[IMG: VanDusen Botanical Garden Path]</div>284 <div class="card-content">285 <div class="title-row">286 <div class="card-title">VanDusen Botanical Garden</div>287 <div class="arrow-right">288 <svg viewBox="0 0 24 24"><path d="M8 5l8 7-8 7z"/></svg>289 </div>290 </div>291 <div class="badge-row">292 <div class="badge">Trip.Best</div>293 <div class="subtext">No. 11 of Top Best Things to Do in Vancouver</div>294 </div>295 <div class="location">Vancouver</div>296 </div>297 </div>298 </div>299 300 <!-- Gastown Steam Clock -->301 <div class="list-row">302 <div class="check-col">303 <div class="checkbox"></div>304 </div>305 <div class="card">306 <div class="thumb">[IMG: Gastown Steam Clock]</div>307 <div class="card-content">308 <div class="title-row">309 <div class="card-title">Gastown Steam Clock</div>310 <div class="arrow-right">311 <svg viewBox="0 0 24 24"><path d="M8 5l8 7-8 7z"/></svg>312 </div>313 </div>314 </div>315 </div>316 </div>317 318 </div>319 320 <!-- Bottom sheet -->321 <div class="bottom-sheet">322 <div class="chip-row">323 <div class="chip">324 Stanley Park325 <span class="x">×</span>326 </div>327 </div>328 <div class="cta">Add to Dec 16 (1)</div>329 </div>330 331 <div class="home-indicator"></div>332 333</div>334</body>335</html>