GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mail Inbox - Dark UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #1d130d; /* deep brown-black */15    color: #e9dccb;16  }17 18  /* Status bar */19  .status-bar {20    height: 110px;21    padding: 0 36px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    font-weight: 600;26    letter-spacing: 0.5px;27    font-size: 42px;28    color: #f5e9d9;29  }30  .status-right {31    display: flex;32    align-items: center;33    gap: 28px;34  }35  .icon {36    width: 44px; height: 44px;37  }38 39  /* Search/header area */40  .header {41    padding: 24px 32px 20px 32px;42  }43  .top-row {44    display: flex;45    align-items: center;46    gap: 28px;47  }48  .hamburger {49    width: 72px; height: 72px; border-radius: 36px; display: flex; align-items: center; justify-content: center;50  }51  .search-pill {52    flex: 1;53    height: 110px;54    background: #3d2b21;55    border-radius: 56px;56    display: flex;57    align-items: center;58    padding: 0 44px;59    color: #c9b9a7;60    font-size: 46px;61  }62  .profile {63    width: 92px; height: 92px; border-radius: 46px; overflow: hidden;64    display: flex; align-items: center; justify-content: center;65    background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575; font-size: 24px;66  }67 68  /* Section label */69  .section {70    display: flex; align-items: center; gap: 18px;71    padding: 18px 40px;72    font-size: 42px; color: #f1e5d6;73  }74  .tag-icon {75    width: 42px; height: 42px;76  }77 78  /* Email list */79  .list {80    padding-top: 6px;81  }82  .email {83    display: grid;84    grid-template-columns: 120px 1fr 180px;85    gap: 24px;86    align-items: center;87    padding: 30px 40px;88  }89  .avatar {90    width: 88px; height: 88px; border-radius: 44px;91    background: #E0E0E0; border: 1px solid #BDBDBD;92    display: flex; align-items: center; justify-content: center;93    color: #757575; font-size: 22px;94  }95  .content {96    min-width: 0;97  }98  .from { font-size: 42px; font-weight: 700; color: #f4e7d7; }99  .subject { font-size: 40px; font-weight: 700; color: #f4e7d7; margin-top: 6px; }100  .snippet { font-size: 36px; color: #c6b5a3; margin-top: 6px; }101  .meta {102    text-align: right;103  }104  .date { font-size: 36px; color: #c9b9a7; }105  .star {106    margin-top: 20px;107    width: 48px; height: 48px; margin-left: auto;108  }109 110  /* Attachment chips */111  .attachments {112    display: flex; gap: 24px; margin-top: 18px;113  }114  .chip {115    display: flex; align-items: center; gap: 16px;116    padding: 18px 26px;117    border: 2px solid #6c5748;118    color: #e9dccb;119    border-radius: 40px;120    font-size: 34px;121    background: #2b1e16;122  }123  .chip .img-placeholder {124    width: 42px; height: 42px; border-radius: 8px;125    background: #E0E0E0; border: 1px solid #BDBDBD;126    display: inline-flex; align-items: center; justify-content: center;127    color: #757575; font-size: 20px;128  }129 130  /* Bottom nav */131  .bottom-bar {132    position: absolute;133    left: 0; right: 0; bottom: 120px;134    height: 160px;135    background: #2a1d16;136    display: flex; align-items: center; justify-content: space-around;137    padding: 0 60px;138  }139  .nav-pill {140    background: #3d2b21; border-radius: 44px; height: 100px; width: 160px;141    display: flex; align-items: center; justify-content: center; position: relative;142  }143  .badge {144    position: absolute; top: -8px; right: -8px;145    width: 44px; height: 44px; background: #f3b7c2; color: #3d2b21; border-radius: 22px;146    display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 700;147  }148  .compose {149    position: absolute; right: 40px; bottom: 300px;150    background: #6b503f; color: #f1e5d6;151    height: 130px; padding: 0 44px; border-radius: 36px;152    display: flex; align-items: center; gap: 24px; font-size: 46px; font-weight: 600;153    box-shadow: 0 6px 20px rgba(0,0,0,0.5);154  }155  .gesture {156    position: absolute; left: 50%; transform: translateX(-50%);157    bottom: 36px; width: 300px; height: 14px; background: #e9dccb; border-radius: 8px; opacity: 0.8;158  }159 160  /* subtle dividers */161  .divider { height: 1px; background: #2b1e16; margin: 0 40px; }162 163  /* Utility */164  .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }165</style>166</head>167<body>168<div id="render-target">169 170  <!-- Status Bar -->171  <div class="status-bar">172    <div>10:51</div>173    <div class="status-right">174      <!-- simple sun icon -->175      <svg class="icon" viewBox="0 0 24 24" fill="#e9dccb"><circle cx="12" cy="12" r="5"/><path d="M12 1v3M12 20v3M1 12h3M20 12h3M4.2 4.2l2.2 2.2M17.6 17.6l2.2 2.2M4.2 19.8l2.2-2.2M17.6 6.4l2.2-2.2" stroke="#e9dccb" stroke-width="2"/></svg>176      <!-- cloud -->177      <svg class="icon" viewBox="0 0 24 24"><path d="M6 16h10a4 4 0 0 0 0-8 5 5 0 0 0-9-1 4 4 0 0 0-1 9z" fill="#e9dccb"/></svg>178      <!-- WiFi -->179      <svg class="icon" viewBox="0 0 24 24"><path d="M2 9a14 14 0 0 1 20 0M6 13a9 9 0 0 1 12 0M10 17a4 4 0 0 1 4 0M12 20a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" stroke="#e9dccb" stroke-width="2" fill="none" stroke-linecap="round"/></svg>180      <!-- Battery -->181      <svg class="icon" viewBox="0 0 26 24"><rect x="1" y="5" width="20" height="14" rx="2" stroke="#e9dccb" stroke-width="2" fill="none"/><rect x="3" y="7" width="14" height="10" fill="#e9dccb"/><rect x="22" y="9" width="3" height="6" rx="1" fill="#e9dccb"/></svg>182    </div>183  </div>184 185  <!-- Header with search -->186  <div class="header">187    <div class="top-row">188      <div class="hamburger">189        <svg width="54" height="54" viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18" stroke="#e9dccb" stroke-width="2" stroke-linecap="round"/></svg>190      </div>191      <div class="search-pill">Search in mail</div>192      <div class="profile">[IMG: Profile]</div>193    </div>194  </div>195 196  <!-- Section -->197  <div class="section">198    <svg class="tag-icon" viewBox="0 0 24 24"><path d="M3 7a2 2 0 0 1 2-2h7l9 9-7 7-9-9V7z" fill="#69b073"/></svg>199    <div>Primary</div>200  </div>201 202  <div class="divider"></div>203 204  <!-- List -->205  <div class="list">206 207    <!-- Promotions summary -->208    <div class="email">209      <div class="avatar">[IMG: Tag]</div>210      <div class="content">211        <div class="from">Promotions</div>212        <div class="snippet">eBay</div>213      </div>214      <div class="meta">215        <svg class="star" viewBox="0 0 24 24"><path d="M12 3l3.1 6.3 7 1-5.1 4.8 1.4 7-6.4-3.6-6.4 3.6 1.4-7L2 10.3l7-1z" stroke="#c9b9a7" stroke-width="2" fill="none"/></svg>216      </div>217    </div>218 219    <div class="divider"></div>220 221    <!-- me, Mail -->222    <div class="email">223      <div class="avatar">[IMG: Avatar]</div>224      <div class="content">225        <div class="from">me, Mail <span style="font-weight:400; color:#c9b9a7;">2</span></div>226        <div class="subject ellipsis">All Recipes App</div>227        <div class="snippet ellipsis">Address not found Your message wasn't deli...</div>228      </div>229      <div class="meta">230        <div class="date">Oct 12</div>231        <svg class="star" viewBox="0 0 24 24"><path d="M12 3l3.1 6.3 7 1-5.1 4.8 1.4 7-6.4-3.6-6.4 3.6 1.4-7L2 10.3l7-1z" stroke="#c9b9a7" stroke-width="2" fill="none"/></svg>232      </div>233    </div>234 235    <div class="divider"></div>236 237    <!-- eBay -->238    <div class="email">239      <div class="avatar">[IMG: eBay logo]</div>240      <div class="content">241        <div class="from">eBay</div>242        <div class="subject ellipsis">Recently viewed: New Twin Tubs Washin...</div>243        <div class="snippet">Give it another look</div>244      </div>245      <div class="meta">246        <div class="date">Oct 12</div>247        <svg class="star" viewBox="0 0 24 24"><path d="M12 3l3.1 6.3 7 1-5.1 4.8 1.4 7-6.4-3.6-6.4 3.6 1.4-7L2 10.3l7-1z" stroke="#c9b9a7" stroke-width="2" fill="none"/></svg>248      </div>249    </div>250 251    <div class="divider"></div>252 253    <!-- Cerebra Research with attachments -->254    <div class="email">255      <div class="avatar">[IMG: Avatar]</div>256      <div class="content">257        <div class="from">Cerebra Research</div>258        <div class="subject">(no subject)</div>259        <div class="snippet">(no body)</div>260        <div class="attachments">261          <div class="chip">262            <span class="img-placeholder">IMG</span>263            <span>Screenshot_...</span>264          </div>265          <div class="chip">266            <span class="img-placeholder">IMG</span>267            <span>Screenshot_...</span>268            <span style="margin-left:6px; color:#c9b9a7;">+3</span>269          </div>270        </div>271      </div>272      <div class="meta">273        <div class="date">Oct 6</div>274        <svg class="star" viewBox="0 0 24 24"><path d="M12 3l3.1 6.3 7 1-5.1 4.8 1.4 7-6.4-3.6-6.4 3.6 1.4-7L2 10.3l7-1z" stroke="#c9b9a7" stroke-width="2" fill="none"/></svg>275      </div>276    </div>277 278    <div class="divider"></div>279 280    <!-- me, Mail -->281    <div class="email">282      <div class="avatar">[IMG: Avatar]</div>283      <div class="content">284        <div class="from">me, Mail <span style="font-weight:400; color:#c9b9a7;">2</span></div>285        <div class="subject ellipsis">Check out Samsung Galaxy F54 5G (Stardus...</div>286        <div class="snippet ellipsis">Address not found Your message wasn't deli...</div>287      </div>288      <div class="meta">289        <div class="date">Oct 5</div>290        <svg class="star" viewBox="0 0 24 24"><path d="M12 3l3.1 6.3 7 1-5.1 4.8 1.4 7-6.4-3.6-6.4 3.6 1.4-7L2 10.3l7-1z" stroke="#c9b9a7" stroke-width="2" fill="none"/></svg>291      </div>292    </div>293 294    <div class="divider"></div>295 296    <!-- me, Mail -->297    <div class="email">298      <div class="avatar">[IMG: Avatar]</div>299      <div class="content">300        <div class="from">me, Mail <span style="font-weight:400; color:#c9b9a7;">2</span></div>301        <div class="subject">Travel plans</div>302        <div class="snippet ellipsis">Address not found Your message wasn't deli...</div>303      </div>304      <div class="meta">305        <div class="date">Sep 29</div>306        <svg class="star" viewBox="0 0 24 24"><path d="M12 3l3.1 6.3 7 1-5.1 4.8 1.4 7-6.4-3.6-6.4 3.6 1.4-7L2 10.3l7-1z" stroke="#c9b9a7" stroke-width="2" fill="none"/></svg>307      </div>308    </div>309 310    <div class="divider"></div>311 312    <!-- me, Mail -->313    <div class="email">314      <div class="avatar">[IMG: Avatar]</div>315      <div class="content">316        <div class="from">me, Mail <span style="font-weight:400; color:#c9b9a7;">2</span></div>317        <div class="subject">Reminder App</div>318        <div class="snippet ellipsis">Address not found Your mes...</div>319      </div>320      <div class="meta">321        <div class="date">Sep 28</div>322        <svg class="star" viewBox="0 0 24 24"><path d="M12 3l3.1 6.3 7 1-5.1 4.8 1.4 7-6.4-3.6-6.4 3.6 1.4-7L2 10.3l7-1z" stroke="#c9b9a7" stroke-width="2" fill="none"/></svg>323      </div>324    </div>325 326  </div>327 328  <!-- Compose button -->329  <div class="compose">330    <svg width="60" height="60" viewBox="0 0 24 24"><path d="M3 20h18M6 17l10-10 4 4-10 10H6v-4z" fill="none" stroke="#f1e5d6" stroke-width="2" stroke-linejoin="round"/></svg>331    <span>Compose</span>332  </div>333 334  <!-- Bottom navigation -->335  <div class="bottom-bar">336    <div class="nav-pill">337      <svg width="60" height="60" viewBox="0 0 24 24"><path d="M2 4h20v16H2z" fill="none" stroke="#e9dccb" stroke-width="2"/><path d="M4 6h8v4H4z" fill="#e9dccb"/></svg>338      <div class="badge">1</div>339    </div>340    <div class="nav-pill">341      <svg width="60" height="60" viewBox="0 0 24 24"><path d="M3 5h18v14H3z" fill="none" stroke="#e9dccb" stroke-width="2"/><path d="M9 9l7 3-7 3V9z" fill="#e9dccb"/></svg>342    </div>343  </div>344 345  <!-- Gesture bar -->346  <div class="gesture"></div>347 348</div>349</body>350</html>