GD-ML/AndroidCode

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>Email List UI Mock</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    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16    color: #222;17  }18 19  /* Top header */20  .header {21    width: 100%;22    height: 240px;23    background: #41A8E6;24    position: relative;25  }26  .statusbar {27    height: 90px;28    padding: 0 28px;29    display: flex;30    align-items: center;31    color: #fff;32    font-size: 34px;33    letter-spacing: 0.2px;34    opacity: 0.95;35  }36  .statusbar .left { flex: 1; }37  .statusbar .right {38    display: flex;39    align-items: center;40    gap: 20px;41  }42  .status-icon svg { width: 36px; height: 36px; fill: #fff; opacity: 0.9; }43 44  .appbar {45    height: 150px;46    display: flex;47    align-items: center;48    padding: 0 28px;49    gap: 24px;50  }51  .icon-btn {52    width: 88px;53    height: 88px;54    display: inline-flex;55    align-items: center;56    justify-content: center;57    border-radius: 12px;58  }59  .icon-btn svg {60    width: 54px; height: 54px; fill: #fff;61  }62  .app-actions {63    display: flex;64    align-items: center;65    gap: 36px;66    margin-left: 12px;67  }68 69  /* Mail list */70  .list {71    position: relative;72    background: #fff;73  }74  .mail {75    display: flex;76    align-items: center;77    padding: 34px 34px 34px 34px;78    border-bottom: 1px solid #E6E6E6;79  }80  .avatar {81    width: 116px; height: 116px;82    border-radius: 50%;83    color: #fff;84    font-weight: 700;85    font-size: 56px;86    display: flex;87    align-items: center;88    justify-content: center;89    margin-right: 24px;90  }91  .avatar.yellow { background: #D9B53B; }92  .avatar.orange { background: #F39B4E; }93  .avatar.teal { background: #54A8C1; }94  .avatar.blue { background: #2B8ED1; }95  .avatar.blue-light { background: #56B8E8; }96  .avatar.red { background: #D4675A; }97 98  .content { flex: 1; }99  .row1 {100    display: flex; align-items: center;101  }102  .dot {103    width: 18px; height: 18px; border-radius: 50%;104    background: #2FA8F5; margin-right: 14px;105  }106  .sender {107    font-size: 42px; font-weight: 700; margin-right: 12px;108  }109  .time {110    margin-left: auto;111    font-size: 36px;112    color: #2FA8F5;113    font-weight: 700;114  }115  .subject {116    font-size: 40px; font-weight: 700; margin-top: 10px;117  }118  .preview {119    font-size: 32px; color: #757575; margin-top: 8px;120  }121 122  /* FAB */123  .fab {124    position: absolute;125    right: 70px;126    bottom: 210px;127    width: 160px;128    height: 160px;129    background: #56B8E8;130    border-radius: 50%;131    box-shadow: 0 12px 24px rgba(0,0,0,0.25);132    display: flex; align-items: center; justify-content: center;133  }134  .fab svg { width: 72px; height: 72px; stroke: #fff; stroke-width: 16; fill: none; }135 136  /* Bottom gesture bar */137  .gesture {138    position: absolute;139    left: 0; bottom: 0;140    width: 100%; height: 120px;141    background: #000;142  }143  .gesture .pill {144    width: 280px; height: 14px; border-radius: 20px; background: #fff;145    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);146    opacity: 0.85;147  }148 149  /* Utility for "Yesterday" badge on the right */150  .time.yesterday { color: #2FA8F5; }151  .check-badge {152    position: absolute; left: 80px; width: 116px; height: 116px;153  }154</style>155</head>156<body>157<div id="render-target">158 159  <div class="header">160    <div class="statusbar">161      <div class="left">7:56</div>162      <div class="right">163        <span class="status-icon">164          <svg viewBox="0 0 24 24"><path d="M3 10h18v4H3z"/></svg>165        </span>166        <span class="status-icon">167          <svg viewBox="0 0 24 24"><path d="M12 2l7 7H5z"/></svg>168        </span>169        <span class="status-icon">170          <svg viewBox="0 0 24 24"><path d="M5 4h14v16H5z"/></svg>171        </span>172        <span class="status-icon">173          <svg viewBox="0 0 24 24"><path d="M18 8v8H6V8z"/></svg>174        </span>175        <span style="font-size:34px; color:#fff;">100%</span>176      </div>177    </div>178 179    <div class="appbar">180      <div class="icon-btn">181        <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg>182      </div>183      <div class="app-actions">184        <div class="icon-btn">185          <svg viewBox="0 0 24 24"><path d="M2 6l10 6 10-6v12H2zM2 6l10 6 10-6"/></svg>186        </div>187        <div class="icon-btn">188          <svg viewBox="0 0 24 24"><path d="M12 5v8m0 0l3-3m-3 3l-3-3M5 20h14"/></svg>189        </div>190        <div class="icon-btn">191          <svg viewBox="0 0 24 24"><path d="M6 2h12v20l-6-4-6 4z"/></svg>192        </div>193        <div class="icon-btn">194          <svg viewBox="0 0 24 24"><path d="M7 10h10v8H7zM9 6h6l1 4H8z"/></svg>195        </div>196        <div class="icon-btn">197          <svg viewBox="0 0 24 24"><path d="M6 7h12v14H6zM9 7V5h6v2"/></svg>198        </div>199      </div>200    </div>201  </div>202 203  <div class="list">204    <div class="mail">205      <div class="avatar yellow">W</div>206      <div class="content">207        <div class="row1">208          <div class="dot"></div>209          <div class="sender">Webex</div>210          <div class="time">04:16 AM</div>211        </div>212        <div class="subject">Let's schedule your first meeting!</div>213        <div class="preview">Webex …</div>214      </div>215    </div>216 217    <div class="mail">218      <div class="avatar orange">G</div>219      <div class="content">220        <div class="row1">221          <div class="dot"></div>222          <div class="sender">Google Accounts Team</div>223          <div class="time">02:47 AM</div>224        </div>225        <div class="subject">Updating our Google Account inactivity policy</div>226        <div class="preview">Google Account policy update Every day Google works …</div>227      </div>228    </div>229 230    <div class="mail">231      <div class="avatar teal">F</div>232      <div class="content">233        <div class="row1">234          <div class="dot"></div>235          <div class="sender">Flipboard 10 For Today</div>236          <div class="time">01:25 AM</div>237        </div>238        <div class="subject">Inside the world of 'reborn' doll lovers</div>239        <div class="preview">Flipboard Plus, an interview with the late Ray Liotta. | F…</div>240      </div>241    </div>242 243    <div class="mail">244      <div class="avatar orange">F</div>245      <div class="content">246        <div class="row1">247          <div class="dot"></div>248          <div class="sender">Flipboard</div>249          <div class="time">12:37 AM</div>250        </div>251        <div class="subject">Android users asked — and we listened!</div>252        <div class="preview">Flipboard Now supporting Custom Tabs. Open Flipboard…</div>253      </div>254    </div>255 256    <div class="mail">257      <div class="avatar orange">F</div>258      <div class="content">259        <div class="row1">260          <div class="dot"></div>261          <div class="sender">Flipboard</div>262          <div class="time">Yesterday</div>263        </div>264        <div class="subject">What's new on Flipboard: Stories from U.S. Poli…</div>265        <div class="preview">Flipboard A daily roundup of highlights from your Flipb…</div>266      </div>267    </div>268 269    <div class="mail">270      <div class="avatar teal">C</div>271      <div class="content">272        <div class="row1">273          <div class="dot"></div>274          <div class="sender">Cerebra Dbw</div>275          <div class="time">Yesterday</div>276        </div>277        <div class="subject">Re: Zoomba session</div>278        <div class="preview">We will be available in the Zoomba session. Get Outloo…</div>279      </div>280    </div>281 282    <div class="mail">283      <div class="avatar orange">G</div>284      <div class="content">285        <div class="row1">286          <div class="dot"></div>287          <div class="sender">Google</div>288          <div class="time">Yesterday</div>289        </div>290        <div class="subject">Security alert</div>291        <div class="preview">EasyMail - easy & fast email was granted access to yo…</div>292      </div>293    </div>294 295    <div class="mail">296      <div class="avatar blue">297        <svg viewBox="0 0 24 24" style="width:72px;height:72px;fill:#fff;">298          <path d="M9 12l2 2 4-5 2 2-6 7-4-4z"/>299        </svg>300      </div>301      <div class="content">302        <div class="row1">303          <div class="dot"></div>304          <div class="sender">Cerebra Research</div>305          <div class="time">Yesterday</div>306        </div>307        <div class="subject">Business meeting with the Clients</div>308        <div class="preview">We have a business meeting on August 30, 2023, so yo…</div>309      </div>310    </div>311 312    <div class="mail">313      <div class="avatar red">C</div>314      <div class="content">315        <div class="row1">316          <div class="dot"></div>317          <div class="sender">Cerebra Research</div>318          <div class="time">Yesterday</div>319        </div>320        <div class="subject">M.O.M | Discussion on Multiple Judgm…</div>321        <div class="preview">Task Overlay should be not in this type of video as it is …</div>322      </div>323    </div>324  </div>325 326  <div class="fab">327    <svg viewBox="0 0 48 48">328      <path d="M34 14l-4-4-18 18v4h4z"/>329      <path d="M28 10l4 4"/>330    </svg>331  </div>332 333  <div class="gesture"><div class="pill"></div></div>334</div>335</body>336</html>