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>Saved - Mock UI</title>7<style>8 :root{9 --blue:#1A73E8;10 --text:#1F1F1F;11 --muted:#6D6D6D;12 --divider:#E5E5E5;13 }14 body{15 margin:0; padding:0;16 background:transparent;17 font-family: Arial, Helvetica, sans-serif;18 color: var(--text);19 }20 #render-target{21 width:1080px; height:2400px;22 position:relative; overflow:hidden;23 background:#FFFFFF;24 }25 26 /* Status bar */27 .status-bar{28 height:96px;29 padding:0 32px;30 display:flex; align-items:center; justify-content:space-between;31 color:#333;32 font-weight:600;33 font-size:34px;34 }35 .status-icons{ display:flex; align-items:center; gap:22px; color:#666; }36 .status-dot{ width:16px; height:16px; background:#666; border-radius:50%; opacity:.8; }37 .status-cloud{38 width:32px; height:20px; border-radius:10px; background:#9E9E9E; position:relative;39 }40 .status-cloud:after{41 content:""; position:absolute; left:18px; top:-6px;42 width:18px; height:18px; border-radius:50%; background:#BDBDBD;43 }44 45 /* Content wrapper */46 .content{47 padding:16px 48px 320px 48px;48 }49 50 /* Search bar */51 .search-bar{52 height:110px; border:1px solid #E0E0E0; border-radius:55px;53 display:flex; align-items:center; padding:0 28px;54 box-shadow:0 2px 8px rgba(0,0,0,0.04);55 gap:24px;56 }57 .search-input{58 flex:1; color:#9E9E9E; font-size:40px;59 }60 .icon-btn{ width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center; }61 .mic{ background:#F1F3F4; }62 .avatar{63 background:#C0A596; color:#fff; font-weight:700; font-size:40px;64 border:1px solid #B49C8B;65 }66 67 /* Promo card */68 .promo{69 margin-top:32px;70 border:1px solid #EEEEEE; border-radius:24px;71 box-shadow:0 10px 30px rgba(0,0,0,0.06);72 padding:32px; position:relative;73 display:flex; align-items:center; justify-content:space-between;74 }75 .promo h3{ margin:0 0 14px 0; font-size:46px; font-weight:700; }76 .promo p{ margin:0 0 28px 0; font-size:34px; color:var(--muted); line-height:1.35; max-width:560px; }77 .cta{78 display:inline-flex; align-items:center; justify-content:center;79 padding:22px 36px; border-radius:999px; border:1px solid #DADCE0;80 color:var(--blue); font-size:38px; background:#F8FAFF;81 }82 .promo .close{83 position:absolute; right:24px; top:24px; width:64px; height:64px; border-radius:50%;84 display:flex; align-items:center; justify-content:center; color:#777;85 }86 .img-ph{87 width:340px; height:200px; background:#E0E0E0; border:1px solid #BDBDBD; border-radius:16px;88 display:flex; align-items:center; justify-content:center; color:#757575; font-size:28px;89 }90 91 /* Section titles */92 .section-title{93 margin:52px 0 24px; font-size:56px; font-weight:700;94 }95 96 /* Recently saved card */97 .place-card{98 width:620px; border-radius:28px; overflow:hidden;99 border:1px solid #EEEEEE; box-shadow:0 12px 30px rgba(0,0,0,0.08);100 }101 .place-img{102 width:100%; height:330px; background:#E0E0E0; border-bottom:1px solid #BDBDBD;103 display:flex; align-items:center; justify-content:center; color:#757575; font-size:30px;104 }105 .place-body{ padding:28px; }106 .place-title{ font-size:46px; margin:6px 0 8px; font-weight:700; }107 .place-sub{ color:var(--muted); font-size:34px; margin-bottom:20px; }108 .fav-row{ display:flex; align-items:center; gap:14px; color:#777; font-size:34px; }109 .divider{ height:1px; background:var(--divider); margin:26px 0; }110 111 /* Lists */112 .lists-head{113 display:flex; align-items:center; justify-content:space-between; margin-top:56px;114 }115 .lists-head h3{ margin:0; font-size:52px; }116 .new-list{ color:var(--blue); font-size:40px; }117 118 .list-item{119 display:flex; align-items:center; justify-content:space-between;120 padding:26px 8px; 121 }122 .li-left{ display:flex; align-items:center; gap:26px; }123 .li-title{ font-size:42px; }124 .li-sub{ font-size:32px; color:var(--muted); margin-top:6px; }125 .more-dot{ width:10px; height:10px; background:#777; border-radius:50%; box-shadow:12px 0 0 #777, 24px 0 0 #777; }126 127 /* Bottom navigation */128 .bottom-nav{129 position:absolute; left:0; right:0; bottom:120px;130 height:190px; border-top:1px solid #E9E9E9; background:#FFFFFF;131 display:flex; align-items:center; justify-content:space-around;132 }133 .tab{134 display:flex; flex-direction:column; align-items:center; gap:10px; color:#6F6F6F; font-size:30px;135 }136 .tab.active{ color:var(--blue); }137 .saved-pill{138 position:absolute; bottom:96px; left:50%; transform:translateX(-50%);139 width:320px; height:110px; background:#E8F0FF; border-radius:60px;140 z-index:-1;141 }142 .gesture{143 position:absolute; left:50%; transform:translateX(-50%);144 bottom:28px; width:320px; height:12px; border-radius:6px; background:#C7C7C7;145 }146 147 /* Simple helpers */148 .muted{ color:var(--muted); }149</style>150</head>151<body>152<div id="render-target">153 154 <!-- Status bar -->155 <div class="status-bar">156 <div>8:25</div>157 <div class="status-icons">158 <div class="status-cloud"></div>159 <svg width="28" height="28" viewBox="0 0 24 24"><circle cx="12" cy="10" r="3" fill="#666"/><path d="M12 2a8 8 0 0 0-8 8h2a6 6 0 1 1 12 0h2a8 8 0 0 0-8-8z" fill="#666"/></svg>160 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M3 8l9-5 9 5v8l-9 5-9-5V8z" fill="#666"/></svg>161 <svg width="32" height="28" viewBox="0 0 24 24"><path d="M4 10h16v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8z" fill="#666"/><path d="M6 6h12v4H6z" fill="#888"/></svg>162 </div>163 </div>164 165 <div class="content">166 167 <!-- Search bar -->168 <div class="search-bar">169 <svg width="48" height="48" viewBox="0 0 24 24">170 <path d="M12 22s6-7 6-12a6 6 0 0 0-12 0c0 5 6 12 6 12z" fill="#EA4335"/>171 <circle cx="12" cy="10" r="3.5" fill="#34A853"/>172 <path d="M12 6a4 4 0 0 1 4 4h-4V6z" fill="#4285F4"/>173 <path d="M12 10H8a4 4 0 0 1 4-4v4z" fill="#FBBC05"/>174 </svg>175 <div class="search-input">Search here</div>176 <div class="icon-btn mic">177 <svg width="34" height="34" viewBox="0 0 24 24">178 <rect x="9" y="4" width="6" height="10" rx="3" fill="#5F6368"/>179 <path d="M5 11a7 7 0 0 0 14 0" stroke="#5F6368" stroke-width="2" fill="none"/>180 <rect x="11" y="18" width="2" height="3" fill="#5F6368"/>181 </svg>182 </div>183 <div class="icon-btn avatar">C</div>184 </div>185 186 <!-- Promo card -->187 <div class="promo">188 <div>189 <h3>Give your home a precise address</h3>190 <p>Get deliveries fast and trouble-free, no matter where you live</p>191 <div class="cta">Get started</div>192 </div>193 <div class="img-ph">[IMG: Address Illustration]</div>194 <div class="close">195 <svg width="28" height="28" viewBox="0 0 24 24">196 <path d="M6 6l12 12M18 6L6 18" stroke="#666" stroke-width="2" stroke-linecap="round"/>197 </svg>198 </div>199 </div>200 201 <!-- Recently saved -->202 <div class="section-title">Recently saved</div>203 <div class="place-card">204 <div class="place-img">[IMG: School Campus Photo]</div>205 <div class="place-body">206 <div class="place-title">Ramagya School</div>207 <div class="place-sub">Closed · School</div>208 <div class="fav-row">209 <svg width="34" height="34" viewBox="0 0 24 24">210 <path d="M12 21s-7-4.3-7-9.5A4.5 4.5 0 0 1 12 8a4.5 4.5 0 0 1 7 3.5C19 16.7 12 21 12 21z" fill="none" stroke="#D81B60" stroke-width="2"/>211 </svg>212 <span class="muted">Favorites</span>213 </div>214 </div>215 </div>216 217 <!-- Lists -->218 <div class="lists-head">219 <h3>Your lists</h3>220 <div class="new-list">+ New list</div>221 </div>222 223 <div class="divider"></div>224 225 <div class="list-item">226 <div class="li-left">227 <svg width="48" height="48" viewBox="0 0 24 24">228 <path d="M12 21s-7-4.3-7-9.5A4.5 4.5 0 0 1 12 8a4.5 4.5 0 0 1 7 3.5C19 16.7 12 21 12 21z" fill="none" stroke="#D81B60" stroke-width="2"/>229 </svg>230 <div>231 <div class="li-title">Favorites</div>232 <div class="li-sub">Private · 1 place</div>233 </div>234 </div>235 <div class="more-dot"></div>236 </div>237 238 <div class="divider"></div>239 240 <div class="list-item">241 <div class="li-left">242 <svg width="48" height="48" viewBox="0 0 24 24">243 <path d="M4 4h2v12h-2z" fill="#188038"/>244 <path d="M6 6l10-2v8l-10-2z" fill="#34A853"/>245 </svg>246 <div>247 <div class="li-title">Want to go</div>248 <div class="li-sub">Private · 0 places</div>249 </div>250 </div>251 <div class="more-dot"></div>252 </div>253 254 <div class="divider"></div>255 256 <div class="list-item">257 <div class="li-left">258 <svg width="48" height="48" viewBox="0 0 24 24">259 <path d="M12 2l2.8 6h6.2l-5 3.6 1.9 6.4L12 15l-5.9 3 1.9-6.4-5-3.6h6.2L12 2z" fill="#FB8C00"/>260 </svg>261 <div>262 <div class="li-title">Starred places</div>263 <div class="li-sub">Private</div>264 </div>265 </div>266 <div class="more-dot"></div>267 </div>268 269 </div>270 271 <!-- Bottom Navigation -->272 <div class="bottom-nav">273 <div class="tab">274 <svg width="42" height="42" viewBox="0 0 24 24">275 <circle cx="12" cy="12" r="9" stroke="#6F6F6F" stroke-width="2" fill="none"/>276 <path d="M12 3v6l5 5" stroke="#6F6F6F" stroke-width="2" fill="none" stroke-linecap="round"/>277 </svg>278 <div>Explore</div>279 </div>280 <div class="tab">281 <svg width="42" height="42" viewBox="0 0 24 24">282 <rect x="3" y="6" width="18" height="11" rx="2" fill="#6F6F6F"/>283 <circle cx="8" cy="18" r="2" fill="#6F6F6F"/>284 <circle cx="16" cy="18" r="2" fill="#6F6F6F"/>285 </svg>286 <div>Go</div>287 </div>288 <div class="tab active">289 <svg width="42" height="42" viewBox="0 0 24 24">290 <path d="M6 3h12v18l-6-4-6 4V3z" fill="#1A73E8"/>291 </svg>292 <div>Saved</div>293 <div class="saved-pill"></div>294 </div>295 <div class="tab">296 <svg width="42" height="42" viewBox="0 0 24 24">297 <path d="M12 3a5 5 0 0 1 5 5v3l2 2v2H5v-2l2-2V8a5 5 0 0 1 5-5z" fill="#6F6F6F"/>298 </svg>299 <div>Updates</div>300 </div>301 </div>302 303 <!-- Gesture bar -->304 <div class="gesture"></div>305 306</div>307</body>308</html>