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>Mobile UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #111316;13 color: #E9ECEF;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute; top: 18px; left: 24px; right: 24px;19 height: 48px; display: flex; align-items: center; justify-content: space-between;20 color: #fff; font-size: 36px; letter-spacing: 0.5px;21 }22 .status-icons { display: flex; align-items: center; gap: 16px; }23 .dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: 0.8; }24 .status-icons svg { width: 36px; height: 36px; fill: none; stroke: #fff; stroke-width: 2.5; opacity: 0.9; }25 26 /* App bar / search */27 .app-bar {28 position: absolute; top: 120px; left: 24px; right: 24px;29 display: flex; align-items: center; gap: 24px;30 }31 .menu-btn {32 width: 72px; height: 72px; border-radius: 16px;33 display: flex; align-items: center; justify-content: center;34 background: transparent;35 }36 .search-pill {37 flex: 1;38 height: 96px; border-radius: 48px;39 background: #1C1F24; border: 1px solid #2C3137;40 display: flex; align-items: center; padding: 0 32px; color: #AAB1B8;41 font-size: 36px;42 }43 .avatar {44 width: 96px; height: 96px; border-radius: 50%;45 border: 1px solid #BDBDBD; background: #E0E0E0;46 display: flex; align-items: center; justify-content: center; color: #757575;47 font-size: 22px;48 }49 50 /* Background mail list (dimmed by sheet overlay) */51 .list-area {52 position: absolute; top: 260px; left: 24px; right: 24px; bottom: 160px;53 overflow: hidden;54 }55 .mail-item {56 height: 180px; display: grid; grid-template-columns: 120px 1fr 160px; align-items: center;57 border-bottom: 1px solid #262B31; color: #D7DBDF;58 }59 .mail-item .avatar { width: 88px; height: 88px; border-radius: 44px; font-size: 18px; }60 .mail-title { font-size: 34px; font-weight: 700; }61 .mail-sub { font-size: 30px; color: #AAB1B8; margin-top: 6px; }62 .mail-date { font-size: 28px; color: #8C939B; text-align: right; padding-right: 24px; }63 64 /* Floating compose */65 .compose-pill {66 position: absolute; right: 48px; bottom: 360px;67 height: 120px; width: 320px; border-radius: 28px;68 background: #2A2F36; border: 1px solid #3A3F47;69 box-shadow: 0 8px 20px rgba(0,0,0,0.4);70 display: flex; align-items: center; justify-content: center; gap: 18px;71 color: #E9ECEF; font-size: 34px;72 }73 .compose-pill svg { width: 40px; height: 40px; stroke: #E9ECEF; stroke-width: 2.5; }74 75 /* Bottom nav + gesture bar */76 .bottom-bar {77 position: absolute; left: 0; right: 0; bottom: 160px;78 height: 120px; display: flex; align-items: center; justify-content: center; gap: 180px;79 }80 .nav-btn {81 width: 120px; height: 120px; border-radius: 60px;82 background: #1C1F24; border: 1px solid #2C3137;83 display: flex; align-items: center; justify-content: center; position: relative;84 }85 .badge {86 position: absolute; top: -10px; right: -10px;87 background: #B34B50; color: #fff; font-size: 26px; height: 54px; min-width: 54px;88 border-radius: 27px; display: flex; align-items: center; justify-content: center; padding: 0 14px;89 border: 3px solid #111316;90 }91 .gesture {92 position: absolute; left: 360px; right: 360px; bottom: 72px;93 height: 12px; background: #DADADA; opacity: 0.85; border-radius: 6px;94 }95 96 /* Sheet overlay */97 .overlay {98 position: absolute; inset: 0; background: rgba(0,0,0,0.55);99 }100 .account-sheet {101 position: absolute; left: 32px; right: 32px; top: 360px;102 background: #2A2F33; border-radius: 48px;103 box-shadow: 0 30px 60px rgba(0,0,0,0.6);104 border: 1px solid #3A3F47;105 padding-bottom: 48px;106 }107 .sheet-header {108 padding: 32px 36px 12px 36px; position: relative;109 text-align: center;110 }111 .sheet-header h1 {112 margin: 12px 0 0 0; font-size: 64px; font-weight: 800; letter-spacing: 0.5px; color: #F1F3F4;113 }114 .close-btn {115 position: absolute; left: 24px; top: 26px; width: 64px; height: 64px;116 display: flex; align-items: center; justify-content: center;117 border-radius: 16px;118 }119 .section { padding: 28px 36px; }120 .row {121 display: grid; grid-template-columns: 96px 1fr 120px; align-items: center; gap: 24px;122 color: #E9ECEF;123 }124 .divider { height: 1px; background: #3A3F47; margin: 16px 0; }125 .small { font-size: 30px; color: #BFC5CC; }126 .email { font-size: 30px; color: #B6BCC3; margin-top: 6px; }127 .count { color: #AAB1B8; font-size: 30px; text-align: right; }128 .btn-outline {129 margin: 26px 36px; height: 96px; border-radius: 18px;130 border: 1.5px solid #7C838B; color: #E9ECEF; font-size: 36px; font-weight: 600;131 display: flex; align-items: center; justify-content: center;132 }133 .icon-cell { width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; }134 .icon-cell svg { width: 48px; height: 48px; stroke-width: 2.5; }135 .warning-dot {136 width: 48px; height: 48px; background: #F6C445; border-radius: 50%;137 display: inline-flex; align-items: center; justify-content: center; font-weight: 900; color: #222;138 }139 .policy-row {140 display: flex; align-items: center; justify-content: center; gap: 30px;141 color: #B6BCC3; font-size: 30px; padding: 12px 0 0 0;142 }143 144 /* Avatar placeholders (per rule) */145 .img-avatar {146 width: 96px; height: 96px; border-radius: 50%;147 background: #E0E0E0; border: 1px solid #BDBDBD;148 color: #757575; display: flex; align-items: center; justify-content: center; font-size: 22px;149 }150</style>151</head>152<body>153<div id="render-target">154 155 <!-- Status bar -->156 <div class="status-bar">157 <div>9:09</div>158 <div class="status-icons">159 <div class="dot"></div>160 <div class="dot"></div>161 <div class="dot"></div>162 <div class="dot"></div>163 <svg viewBox="0 0 24 24">164 <path d="M3 10c2-2 6-2 9 1 3-2 7-2 9 1" stroke-linecap="round"/>165 </svg>166 <svg viewBox="0 0 24 24">167 <path d="M3 12h15" stroke-linecap="round"/>168 <path d="M20 8v8" stroke-linecap="round"/>169 </svg>170 </div>171 </div>172 173 <!-- App bar -->174 <div class="app-bar">175 <div class="menu-btn">176 <svg viewBox="0 0 24 24" width="48" height="48" fill="#AAB1B8">177 <path d="M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z"></path>178 </svg>179 </div>180 <div class="search-pill">Search in mail</div>181 <div class="avatar">[IMG: Avatar]</div>182 </div>183 184 <!-- Background mail list -->185 <div class="list-area">186 <div class="mail-item">187 <div class="avatar">[IMG: Avatar]</div>188 <div>189 <div class="mail-title">Natalie Larson (via Google Drive)</div>190 <div class="mail-sub">Item shared with you: "01. A Voyage to ..." — PDF attached</div>191 </div>192 <div class="mail-date">Oct 3</div>193 </div>194 <div class="mail-item">195 <div class="avatar">[IMG: Avatar]</div>196 <div>197 <div class="mail-title">Weekly Digest</div>198 <div class="mail-sub">Here’s what happened this week in your inbox</div>199 </div>200 <div class="mail-date">Oct 2</div>201 </div>202 </div>203 204 <!-- Floating compose -->205 <div class="compose-pill">206 <svg viewBox="0 0 24 24" fill="none">207 <path d="M4 20h16" stroke-linecap="round"></path>208 <path d="M14 4l6 6-8 8H6V12z" stroke-linejoin="round"></path>209 </svg>210 <div>Compose</div>211 </div>212 213 <!-- Bottom navigation -->214 <div class="bottom-bar">215 <div class="nav-btn">216 <svg viewBox="0 0 24 24" width="46" height="46" fill="none" stroke="#E9ECEF" stroke-width="2">217 <path d="M3 7l9 6 9-6" stroke-linejoin="round"></path>218 <path d="M21 7v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7" stroke-linecap="round"></path>219 </svg>220 <div class="badge">17</div>221 </div>222 <div class="nav-btn">223 <svg viewBox="0 0 24 24" width="46" height="46" fill="none" stroke="#E9ECEF" stroke-width="2">224 <rect x="3" y="5" width="18" height="14" rx="2"></rect>225 <path d="M7 9h10M7 13h10"></path>226 </svg>227 </div>228 </div>229 <div class="gesture"></div>230 231 <!-- Overlay + Google account sheet -->232 <div class="overlay"></div>233 <div class="account-sheet">234 <div class="sheet-header">235 <div class="close-btn">236 <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#D7DBDF" stroke-width="2.5">237 <path d="M5 5l14 14M19 5L5 19" stroke-linecap="round"></path>238 </svg>239 </div>240 <h1>Google</h1>241 </div>242 243 <div class="section">244 <div class="row">245 <div class="img-avatar">[IMG: User Avatar]</div>246 <div>247 <div style="font-size:38px; font-weight:700;">Amelia miller</div>248 <div class="email">amelia.miller2709@gmail.com</div>249 </div>250 <div class="count">17</div>251 </div>252 <div class="btn-outline">Manage your Google Account</div>253 </div>254 255 <div class="divider"></div>256 257 <div class="section">258 <div class="row">259 <div class="icon-cell">260 <svg viewBox="0 0 24 24" fill="none" stroke="#C9D0D6">261 <path d="M12 2l8 4v6c0 5-4.5 8.5-8 10-3.5-1.5-8-5-8-10V6l8-4z"></path>262 <path d="M12 8v6" stroke-width="2.5" stroke-linecap="round"></path>263 </svg>264 </div>265 <div style="font-size:34px;">Recommended actions</div>266 <div style="display:flex; justify-content:flex-end;">267 <div class="warning-dot">!</div>268 </div>269 </div>270 </div>271 272 <div class="divider"></div>273 274 <div class="section">275 <div class="row">276 <div class="icon-cell">277 <svg viewBox="0 0 24 24" fill="none" stroke="#C9D0D6" stroke-width="2.5">278 <path d="M6 16a4 4 0 0 1 0-8 5 5 0 0 1 9-2 4 4 0 0 1 4 4 3 3 0 0 1 0 6H6z" stroke-linecap="round"></path>279 </svg>280 </div>281 <div class="small">Storage used: 0% of 15 GB</div>282 <div></div>283 </div>284 </div>285 286 <div class="divider"></div>287 288 <div class="section">289 <div class="row">290 <div class="img-avatar" style="width:88px;height:88px;">[IMG: User Avatar]</div>291 <div>292 <div style="font-size:36px; font-weight:700;">Jason Smith</div>293 <div class="email">jasonsmith9810244659106538@gmail.com</div>294 </div>295 <div class="count">7</div>296 </div>297 </div>298 299 <div class="divider"></div>300 301 <div class="section">302 <div class="row">303 <div class="img-avatar" style="width:88px;height:88px;">[IMG: User Avatar]</div>304 <div>305 <div style="font-size:36px; font-weight:700;">William Miller</div>306 <div class="email">miller.william197305@gmail.com</div>307 </div>308 <div class="count">1</div>309 </div>310 </div>311 312 <div class="divider"></div>313 314 <div class="section">315 <div class="row">316 <div class="icon-cell">317 <svg viewBox="0 0 24 24" fill="none" stroke="#C9D0D6" stroke-width="2.2">318 <circle cx="12" cy="8" r="3"></circle>319 <path d="M5 20a7 7 0 0 1 14 0" stroke-linecap="round"></path>320 <path d="M19 10h4M21 8v4" stroke-linecap="round"></path>321 </svg>322 </div>323 <div style="font-size:34px;">Add another account</div>324 <div></div>325 </div>326 </div>327 328 <div class="section">329 <div class="row">330 <div class="icon-cell">331 <svg viewBox="0 0 24 24" fill="none" stroke="#C9D0D6" stroke-width="2.2">332 <circle cx="12" cy="12" r="3"></circle>333 <path d="M12 2v3M12 19v3M4.6 4.6l2.1 2.1M17.3 17.3l2.1 2.1M2 12h3M19 12h3M4.6 19.4l2.1-2.1M17.3 6.7l2.1-2.1" stroke-linecap="round"></path>334 </svg>335 </div>336 <div style="font-size:34px;">Manage accounts on this device</div>337 <div></div>338 </div>339 </div>340 341 <div class="section policy-row">342 <div>Privacy Policy</div>343 <div>•</div>344 <div>Terms of Service</div>345 </div>346 </div>347 348</div>349</body>350</html>