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>Inbox 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;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15  }16 17  /* Top bars */18  .status-bar {19    height: 90px;20    background: #2196F3;21    color: #fff;22    display: flex;23    align-items: center;24    padding: 0 28px;25    font-size: 30px;26    letter-spacing: 0.5px;27  }28  .status-bar .left { flex: 1; }29  .status-icons {30    display: flex; align-items: center; gap: 22px; font-size: 30px;31  }32  .app-bar {33    height: 150px;34    background: #2196F3;35    color: #fff;36    display: flex;37    align-items: center;38    padding: 0 28px;39    box-shadow: 0 2px 4px rgba(0,0,0,0.15);40  }41  .app-bar .menu {42    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; margin-right: 24px;43  }44  .app-title {45    font-size: 46px; font-weight: 600;46    display: flex; align-items: center;47  }48  .app-title span.arrow {49    display: inline-block; margin-left: 14px; width: 0; height: 0;50    border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 14px solid #fff;51  }52  .app-spacer { flex: 1; }53  .search {54    width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;55  }56 57  /* List */58  .list {59    position: absolute;60    top: 240px; /* 90 + 150 */61    left: 0; right: 0; bottom: 140px; /* leave room for gesture bar */62    overflow: hidden; /* screenshot is static */63    background: #fff;64  }65  .mail {66    display: flex;67    align-items: flex-start;68    padding: 28px 36px;69    border-bottom: 1px solid #EAEAEA;70  }71  .avatar {72    width: 112px; height: 112px; border-radius: 56px;73    color: #fff; font-weight: 700; font-size: 56px;74    display: flex; align-items: center; justify-content: center;75    flex: 0 0 112px;76  }77  .avatar.yellow { background: #E9C043; }78  .avatar.orange { background: #EF8F3A; }79  .avatar.teal { background: #4FA6C2; }80  .avatar.blue { background: #2B86D1; }81  .mail-content { margin-left: 28px; flex: 1; }82  .row-top {83    display: flex; align-items: center; gap: 14px;84  }85  .dot {86    width: 18px; height: 18px; border-radius: 50%; background: #1E88E5; flex: 0 0 18px;87  }88  .sender { font-size: 38px; font-weight: 700; color: #222; }89  .time { margin-left: auto; color: #1E88E5; font-size: 28px; font-weight: 700; }90  .subject { font-size: 32px; font-weight: 700; color: #333; margin: 8px 0 6px; }91  .preview { font-size: 28px; color: #7A7A7A; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 900px; }92  .yesterday { color: #1E88E5; font-size: 28px; font-weight: 700; }93 94  /* Floating action button */95  .fab {96    position: absolute;97    right: 44px;98    bottom: 180px;99    width: 150px; height: 150px;100    background: #42A5F5;101    border-radius: 50%;102    box-shadow: 0 10px 16px rgba(0,0,0,0.25);103    display: flex; align-items: center; justify-content: center;104  }105  .fab svg { width: 72px; height: 72px; fill: #fff; }106 107  /* Gesture bar */108  .gesture-bar {109    position: absolute; left: 0; right: 0; bottom: 0;110    height: 120px; background: #000;111    display: flex; align-items: center; justify-content: center;112  }113  .pill {114    width: 220px; height: 10px; background: #fff; border-radius: 6px;115    opacity: 0.9;116  }117</style>118</head>119<body>120<div id="render-target">121 122  <!-- Status Bar -->123  <div class="status-bar">124    <div class="left">7:55</div>125    <div class="status-icons">126      <span>✉️</span>127      <span>📶</span>128      <span>🔔</span>129      <span>☁️</span>130      <span>📶</span>131      <span>🔋 100%</span>132    </div>133  </div>134 135  <!-- App Bar -->136  <div class="app-bar">137    <div class="menu">138      <svg viewBox="0 0 48 48" width="48" height="48">139        <rect x="6" y="10" width="36" height="4" fill="#fff"></rect>140        <rect x="6" y="22" width="36" height="4" fill="#fff"></rect>141        <rect x="6" y="34" width="36" height="4" fill="#fff"></rect>142      </svg>143    </div>144    <div class="app-title">Inbox <span class="arrow"></span></div>145    <div class="app-spacer"></div>146    <div class="search">147      <svg viewBox="0 0 48 48" width="48" height="48">148        <circle cx="20" cy="20" r="12" stroke="#fff" stroke-width="4" fill="none"></circle>149        <rect x="28" y="28" width="14" height="4" transform="rotate(45 35 30)" fill="#fff"></rect>150      </svg>151    </div>152  </div>153 154  <!-- Mail List -->155  <div class="list">156    <div class="mail">157      <div class="avatar yellow">W</div>158      <div class="mail-content">159        <div class="row-top">160          <div class="dot"></div>161          <div class="sender">Webex</div>162          <div class="time">04:16 AM</div>163        </div>164        <div class="subject">Let’s schedule your first meeting!</div>165        <div class="preview">Webex …</div>166      </div>167    </div>168 169    <div class="mail">170      <div class="avatar orange">G</div>171      <div class="mail-content">172        <div class="row-top">173          <div class="dot"></div>174          <div class="sender">Google Accounts Team</div>175          <div class="time">02:47 AM</div>176        </div>177        <div class="subject">Updating our Google Account inactivity policy</div>178        <div class="preview">Google Account policy update Every day Google works …</div>179      </div>180    </div>181 182    <div class="mail">183      <div class="avatar teal">F</div>184      <div class="mail-content">185        <div class="row-top">186          <div class="dot"></div>187          <div class="sender">Flipboard 10 For Today</div>188          <div class="time">01:25 AM</div>189        </div>190        <div class="subject">Inside the world of 'reborn' doll lovers</div>191        <div class="preview">Flipboard Plus, an interview with the late Ray Liotta. | F…</div>192      </div>193    </div>194 195    <div class="mail">196      <div class="avatar orange">F</div>197      <div class="mail-content">198        <div class="row-top">199          <div class="dot"></div>200          <div class="sender">Flipboard</div>201          <div class="time">12:37 AM</div>202        </div>203        <div class="subject">Android users asked — and we listened!</div>204        <div class="preview">Flipboard Now supporting Custom Tabs. Open Flipboar…</div>205      </div>206    </div>207 208    <div class="mail">209      <div class="avatar orange">F</div>210      <div class="mail-content">211        <div class="row-top">212          <div class="dot"></div>213          <div class="sender">Flipboard</div>214          <div class="time yesterday">Yesterday</div>215        </div>216        <div class="subject">What's new on Flipboard: Stories from U.S. Poli…</div>217        <div class="preview">Flipboard A daily roundup of highlights from your Flipb…</div>218      </div>219    </div>220 221    <div class="mail">222      <div class="avatar blue">C</div>223      <div class="mail-content">224        <div class="row-top">225          <div class="sender">Cerebra Dbw</div>226          <div class="time yesterday">Yesterday</div>227        </div>228        <div class="subject">Re: Zoomba session</div>229        <div class="preview">We will be available in the Zoomba session. Get Outloo…</div>230      </div>231    </div>232 233    <div class="mail">234      <div class="avatar orange">G</div>235      <div class="mail-content">236        <div class="row-top">237          <div class="dot"></div>238          <div class="sender">Google</div>239          <div class="time yesterday">Yesterday</div>240        </div>241        <div class="subject">Security alert</div>242        <div class="preview">EasyMail - easy & fast email was granted access to yo…</div>243      </div>244    </div>245 246    <div class="mail">247      <div class="avatar orange">C</div>248      <div class="mail-content">249        <div class="row-top">250          <div class="dot"></div>251          <div class="sender">Cerebra Research</div>252          <div class="time yesterday">Yesterday</div>253        </div>254        <div class="subject">Business meeting with the Clients</div>255        <div class="preview">We have a business meeting on August 30, 2023, so yo…</div>256      </div>257    </div>258 259    <div class="mail">260      <div class="avatar orange">C</div>261      <div class="mail-content">262        <div class="row-top">263          <div class="dot"></div>264          <div class="sender">Cerebra Research</div>265          <div class="time yesterday">Yesterday</div>266        </div>267        <div class="subject">M.O.M | Discussion on Multiple Judgme…</div>268        <div class="preview">Task Overlay should be not in this type of video as it is …</div>269      </div>270    </div>271  </div>272 273  <!-- Floating Action Button -->274  <div class="fab" aria-label="Compose">275    <svg viewBox="0 0 48 48">276      <path d="M6 34l12 8 20-20-12-8L6 34zm29-22l5 5-3 3-5-5 3-3z" opacity="0.0"></path>277      <path d="M34 10l4 4-18 18-4-4 18-18zm-20 22l2 6 6-2-8-4z" fill="#fff"></path>278      <rect x="8" y="38" width="22" height="4" fill="#fff" rx="2"></rect>279    </svg>280  </div>281 282  <!-- Gesture bar -->283  <div class="gesture-bar">284    <div class="pill"></div>285  </div>286 287</div>288</body>289</html>