GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Saved - Mock UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #1f1f1f; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #FFFFFF;14 }15 16 /* Top status bar */17 .status-bar {18 height: 70px;19 padding: 16px 28px;20 font-size: 30px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #333;25 }26 .status-right { display: flex; gap: 18px; align-items: center; }27 .icon-small svg { width: 34px; height: 34px; fill: #555; }28 29 /* Search */30 .search-row {31 padding: 12px 28px 6px;32 }33 .search-pill {34 background: #fff;35 border-radius: 60px;36 height: 112px;37 display: flex;38 align-items: center;39 padding: 0 26px;40 box-shadow: 0 2px 10px rgba(0,0,0,0.08);41 border: 1px solid #E6E6E6;42 gap: 22px;43 }44 .search-input {45 font-size: 42px;46 color: #8a8a8a;47 flex: 1;48 }49 .avatar {50 width: 92px;51 height: 92px;52 background: #D1582A;53 color: #fff;54 border-radius: 50%;55 display: flex; align-items: center; justify-content: center;56 font-size: 44px; font-weight: bold;57 }58 59 /* Home/Work chips area */60 .chips {61 display: flex;62 align-items: stretch;63 padding: 8px 28px 10px;64 gap: 22px;65 }66 .chip-card {67 flex: 1;68 background: #fff;69 border-radius: 26px;70 border: 1px solid #e8e8e8;71 padding: 26px;72 display: flex;73 gap: 20px;74 align-items: center;75 }76 .chip-icon {77 width: 76px; height: 76px; border-radius: 20px; background: #F2F6FF;78 display: flex; align-items: center; justify-content: center; border: 1px solid #E0E6FF;79 }80 .chip-title { font-size: 40px; font-weight: 700; }81 .chip-sub { font-size: 28px; color: #6f6f6f; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }82 .chip-col { flex: 1; }83 .divider-vert { width: 2px; background: #ececec; }84 .set-work { color: #2a6bef; font-size: 30px; margin-top: 8px; }85 86 /* Section titles */87 .section-title {88 padding: 22px 28px 8px;89 font-size: 54px;90 font-weight: 800;91 }92 93 /* Recently saved cards */94 .card-row {95 padding: 10px 28px 10px;96 display: flex;97 gap: 28px;98 overflow: hidden;99 }100 .rs-card {101 width: 320px;102 background: #fff;103 border-radius: 22px;104 border: 1px solid #e6e6e6;105 overflow: hidden;106 box-shadow: 0 2px 8px rgba(0,0,0,0.04);107 }108 .img-ph {109 width: 100%; height: 210px;110 background: #E0E0E0;111 border-bottom: 1px solid #BDBDBD;112 display: flex; align-items: center; justify-content: center;113 color: #6f6f6f; font-size: 28px;114 }115 .card-body { padding: 22px; }116 .card-title { font-size: 40px; font-weight: 700; margin-bottom: 10px; }117 .card-sub { font-size: 28px; color: #6f6f6f; }118 .flag-row { display: flex; align-items: center; gap: 12px; margin-top: 18px; color: #3e7f2f; font-size: 30px; }119 120 /* Your lists header */121 .lists-header {122 padding: 18px 28px 8px;123 display: flex; align-items: center; justify-content: space-between;124 }125 .lists-header .title { font-size: 54px; font-weight: 800; }126 .new-list { color: #2a6bef; font-size: 40px; font-weight: 600; display: flex; align-items: center; gap: 14px; }127 128 /* List items */129 .list-item {130 padding: 26px 28px;131 display: flex;132 align-items: center;133 justify-content: space-between;134 border-bottom: 1px solid #efefef;135 }136 .li-left { display: flex; align-items: center; gap: 24px; }137 .li-icon {138 width: 72px; height: 72px; border-radius: 18px; background: #E9F2FF;139 display: flex; align-items: center; justify-content: center; border: 1px solid #D8E6FF;140 }141 .li-text .name { font-size: 44px; font-weight: 700; }142 .li-text .sub { font-size: 30px; color: #757575; margin-top: 6px; }143 .kebab { width: 12px; height: 40px; display: flex; align-items: center; justify-content: center; }144 .kebab span { display: block; width: 10px; height: 10px; background: #5f5f5f; border-radius: 50%; margin: 3px 0; }145 146 /* Bottom navigation */147 .bottom-nav {148 position: absolute;149 left: 0; right: 0; bottom: 0;150 height: 180px;151 background: #F6F7FB;152 border-top: 1px solid #e6e6e6;153 display: flex; align-items: center; justify-content: space-around;154 padding-bottom: 10px;155 }156 .bn-item { display: flex; flex-direction: column; align-items: center; color: #666; gap: 10px; }157 .bn-item.active { color: #0b5fe5; }158 .bn-item svg { width: 60px; height: 60px; }159 .bn-label { font-size: 30px; }160 .center-pill {161 position: absolute;162 left: 50%;163 transform: translateX(-50%);164 bottom: 160px;165 width: 220px; height: 100px;166 background: #eaf0ff;167 border-radius: 40px;168 display: flex; align-items: center; justify-content: center;169 border: 1px solid #d5e1ff;170 }171 .center-pill .bookmark {172 width: 78px; height: 78px; background: #0b5fe5; border-radius: 22px;173 display: flex; align-items: center; justify-content: center;174 box-shadow: 0 4px 12px rgba(11,95,229,0.3);175 }176 .spacer-bottom { height: 240px; } /* space so bottom nav doesn't overlap content */177</style>178</head>179<body>180<div id="render-target">181 182 <!-- Status bar -->183 <div class="status-bar">184 <div>8:43</div>185 <div class="status-right">186 <div class="icon-small" title="signal">187 <svg viewBox="0 0 24 24"><path d="M2 20h2v-2H2v2zm4 0h2v-6H6v6zm4 0h2v-10h-2V20zm4 0h2V6h-2v14zm4 0h2V2h-2v18z"/></svg>188 </div>189 <div class="icon-small" title="wifi">190 <svg viewBox="0 0 24 24"><path d="M12 20.5l-2.5-2.5h5L12 20.5zM2 8.5C6.4 4.8 17.6 4.8 22 8.5l-1.6 1.6C16.9 6.7 7.1 6.7 3.6 10.1L2 8.5zm4 4c3.2-2.8 8.8-2.8 12 0l-1.6 1.6c-2.6-2.2-6.2-2.2-8.8 0L6 12.5zm4 4c1.6-1.4 2.4-1.4 4 0l-2 2-2-2z"/></svg>191 </div>192 <div class="icon-small" title="battery">193 <svg viewBox="0 0 24 24"><path d="M16 6h2v2h2v8h-2v2h-2V6zM2 8h12v8H2V8z"/></svg>194 </div>195 </div>196 </div fuse></div>197 198 <!-- Search -->199 <div class="search-row">200 <div class="search-pill">201 <div class="icon-small">202 <svg viewBox="0 0 24 24"><path d="M12 2C7.6 2 4 5.6 4 10c0 6 8 12 8 12s8-6 8-12c0-4.4-3.6-8-8-8zm0 11.2c-1.8 0-3.2-1.4-3.2-3.2S10.2 6.8 12 6.8s3.2 1.4 3.2 3.2S13.8 13.2 12 13.2z"/></svg>203 </div>204 <div class="search-input">Search here</div>205 <div class="icon-small">206 <svg viewBox="0 0 24 24"><path d="M12 3a3 3 0 0 0-3 3v6a3 3 0 1 0 6 0V6a3 3 0 0 0-3-3zm-5 8v1a5 5 0 0 0 10 0v-1h2v1a7 7 0 0 1-14 0v-1h2z"/></svg>207 </div>208 <div class="avatar">C</div>209 </div>210 </div>211 212 <!-- Home & Work chips -->213 <div class="chips">214 <div class="chip-card">215 <div class="chip-icon">216 <svg width="44" height="44" viewBox="0 0 24 24" fill="#2a6bef"><path d="M12 3l9 8h-3v8h-5v-5H11v5H6v-8H3l9-8z"/></svg>217 </div>218 <div class="chip-col">219 <div class="chip-title">Home</div>220 <div class="chip-sub">Q29V+W4R New York...</div>221 </div>222 </div>223 <div class="divider-vert"></div>224 <div class="chip-card">225 <div class="chip-icon" style="background:#F8F8FF">226 <svg width="44" height="44" viewBox="0 0 24 24" fill="#2a6bef"><path d="M4 7h16v10H4V7zm2-3h12v3H6V4zm2 5h8v2H8V9zm0 4h5v2H8v-2z"/></svg>227 </div>228 <div class="chip-col">229 <div class="chip-title">Work</div>230 <div class="set-work">Set work</div>231 </div>232 </div>233 </div>234 235 <!-- Recently Saved -->236 <div class="section-title">Recently saved</div>237 <div class="card-row">238 <div class="rs-card">239 <div class="img-ph">[IMG: Evansville Skyline]</div>240 <div class="card-body">241 <div class="card-title">Evansville</div>242 <div class="card-sub">Evansville</div>243 </div>244 </div>245 <div class="rs-card">246 <div class="img-ph">[IMG: Little Beet Restaurant Front]</div>247 <div class="card-body">248 <div class="card-title">Little Beet</div>249 <div class="card-sub">Dine‑in · Kerbside pi...</div>250 <div class="flag-row">251 <svg width="34" height="34" viewBox="0 0 24 24" fill="#3e7f2f"><path d="M5 3v18h2v-6h7l-1-3 1-3H7V3H5z"/></svg>252 <span>Want to go</span>253 </div>254 </div>255 </div>256 <div class="rs-card">257 <div class="img-ph">[IMG: Waterfront Park]</div>258 <div class="card-body">259 <div class="card-title">Hallett'</div>260 <div class="card-sub">Want to go</div>261 </div>262 </div>263 </div>264 265 <!-- Your Lists -->266 <div class="lists-header">267 <div class="title">Your lists</div>268 <div class="new-list">269 <svg width="38" height="38" viewBox="0 0 24 24" fill="#2a6bef"><path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2h6z"/></svg>270 <span>New list</span>271 </div>272 </div>273 274 <div class="list-item">275 <div class="li-left">276 <div class="li-icon">277 <svg width="36" height="36" viewBox="0 0 24 24" fill="#2a6bef"><path d="M12 2l8 7-1.5 1.3L12 4 5.5 10.3 4 9l8-7zM5 11h14v9H5v-9z"/></svg>278 </div>279 <div class="li-text">280 <div class="name">Evansville</div>281 <div class="sub">Private · 1 place</div>282 </div>283 </div>284 <div class="kebab"><span></span><span></span><span></span></div>285 </div>286 287 <div class="list-item">288 <div class="li-left">289 <div class="li-icon" style="background:#F0F6FF">290 <svg width="34" height="34" viewBox="0 0 24 24" fill="#2a6bef"><path d="M3 5h18v2H3V5zm0 6h18v2H3v-2zm0 6h12v2H3v-2z"/></svg>291 </div>292 <div class="li-text">293 <div class="name">Labeled</div>294 <div class="sub">Private · 1 place</div>295 </div>296 </div>297 <div class="kebab"><span></span><span></span><span></span></div>298 </div>299 300 <div class="list-item">301 <div class="li-left">302 <div class="li-icon" style="background:#E9FBEA; border-color:#CFEFD3">303 <svg width="34" height="34" viewBox="0 0 24 24" fill="#2f8f3d"><path d="M6 2v20l6-6 6 6V2H6z"/></svg>304 </div>305 <div class="li-text">306 <div class="name">Want to go</div>307 <div class="sub">Private · 3 places</div>308 </div>309 </div>310 <div class="kebab"><span></span><span></span><span></span></div>311 </div>312 313 <div class="list-item">314 <div class="li-left">315 <div class="li-icon">316 <svg width="34" height="34" viewBox="0 0 24 24" fill="#2a6bef"><path d="M12 2a5 5 0 0 0-5 5v1H5v5h2v7h10v-7h2V8h-2V7a5 5 0 0 0-5-5zm-3 6V7a3 3 0 1 1 6 0v1H9z"/></svg>317 </div>318 <div class="li-text">319 <div class="name">delight</div>320 <div class="sub">Private · 1 place</div>321 </div>322 </div>323 <div class="kebab"><span></span><span></span><span></span></div>324 </div>325 326 <div class="spacer-bottom"></div>327 328 <!-- Center selected pill (Saved) -->329 <div class="center-pill">330 <div class="bookmark">331 <svg width="42" height="42" viewBox="0 0 24 24" fill="#fff"><path d="M6 2h12v20l-6-4-6 4V2z"/></svg>332 </div>333 </div>334 335 <!-- Bottom Navigation -->336 <div class="bottom-nav">337 <div class="bn-item">338 <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l10 9h-3v9h-5v-6H10v6H5v-9H2l10-9z"/></svg>339 <div class="bn-label">Explore</div>340 </div>341 <div class="bn-item">342 <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3 7 7 3-7 3-3 7-3-7-7-3 7-3 3-7z"/></svg>343 <div class="bn-label">Go</div>344 </div>345 <div class="bn-item active">346 <svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 2h12v18l-6-3-6 3V2z"/></svg>347 <div class="bn-label">Saved</div>348 </div>349 <div class="bn-item">350 <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l2.4 6.9L22 9l-5 3.8 1.9 6.8L12 16l-6.9 3.6L7 12.8 2 9l7.6-0.1L12 2z"/></svg>351 <div class="bn-label">Contribute</div>352 </div>353 <div class="bn-item">354 <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zM18 16v-5a6 6 0 1 0-12 0v5l-2 2v2h16v-2l-2-2z"/></svg>355 <div class="bn-label">Updates</div>356 </div>357 </div>358 359</div>360</body>361</html>