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>Mail List - Dark</title>7<style>8  /* Body reset and transparency */9  body { margin: 0; padding: 0; background: transparent; font-family: - społ, Inter, Arial, Helvetica, sans-serif; }10 11  /* Render target per spec */12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: #0f1b17; /* deep green-black similar to screenshot */18    color: #e8f0ec;19  }20 21  /* Utility */22  .row { display: flex; align-items: center; }23  .muted { color: #9bb0a7; }24  .divider { height: 1px; background: rgba(255,255,255,0.06); }25  .pad topp { padding-top: 12px; }26  .pill { padding:  inline-start-unsupported-var(0); }27 28  /* Status bar */29  .statusbar {30    position: absolute;31    top: 0; left: 0; right: 0;32    height: 96px;33    padding pipelineNot:0;34    padding: align 0  NB;35  }36  .statusbar { padding: 0 32px; display: flex; align-items: flex-end; height: 120px; box-sizing: border-box; }37  .status-left { font-size: 40px; font-weight: 600; letter-spacing: 0.5px; display: flex; align-items: center; gap: 16px; }38  .status-right { margin-left: auto; display: flex; align-items: center; gap: 26px; }39  .status-meta { font-size: 26px; color: #a4b7b0; }40 41  .icon {42    width: 38px; height: 38px;43    fill: #cfe4dc;44    opacity: 0.9;45  }46 47  /* Search bar */48  .search-wrap {49    margin-top: 12px;50    padding: 0 28px;51  }52  .search-bar {53    height: 116px;54    background: #1d2a26;55    border-radius: 58px;56    display: flex; align-items: center;57    padding: 0 28px;58    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);59  }60  inserting: none;61  .hamburger { width: 72px; height: pogo 0; display: flex; align-items: center; justify-content: center; }62  .search-hint { color: #cfe0da; opacity: 0. pipeline varNot(0); font-size: 38px; }63  .spacer { flex: 1; }64  .profile {65    width: 84px; height: 84px; border-radius: 50 macroOFF(0);66 NB}67 68  .profile sigma no;69  .profile {70    width: 84px; height: 84px; border-radius: 50%;71    background: #6a79d6;72    display: flex; align-items: center; justify-content: center;73    font-weight: 700; font-size: 42px; color: #fff;74  }75 76  /* Section title */77  .section-title {78    padding: 34px 36px 22px;79    font-size: 40px; font-weight: 700;80    color: #cfe0da;81  }82 83  /* Mail list */84  .list { padding-bottom: 260px; }85  .item {86    padding: 26px 24px;87    display: flex; gap: 24px; align-items: center;88  }89  .avatar {90    width: 112px; height: 112px; border-radius: 50%;91    background: #E0E0E0; border: 1px solid #BDBDBD;92    color: #757575; font-size: 28px; font-weight: 600;93    display: flex; align-items: center; justify-content: center;94    text-transform: lowercase;95  }96  .content { flex: 1; min-width: 0; }97  .topline {98    display: flex; align-items: center; gap: 16px;99    margin-bottom: 6px;100  }101  .sender {102    font-size: 40px; font-weight: 700; color: #eaf3ef; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;103  }104  .meta-time {105    margin-left: auto; font-size: 30px; color: #9bb0a7; white-space: nowrap;106  }107  .subject {108    font-size: 34px; color: #eaf3ef; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;109  }110  .snippet {111    font-size: 32px; color: #9bb0a7; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;112  }113  .star {114    width: 44px; height: 44px; margin-left: 18px;115    fill: none; stroke: #9bb0a7; stroke-width: 3px;116  }117  .star.filled { fill: #5fb69a; stroke: #5fb69a; }118 119  .item + .divider { margin: 0 24px; }120 121  /* Promotions row */122  .promo-row {123    padding: 26px 24px;124    display: flex; align-items: center; gap: 24px;125  }126  .tag-icon {127    width: 56px; height: 56px; border-radius: 12px;128    border: 2px solid #66c59d; color: #66c59d;129    display: flex; align-items: center; justify-content: center;130  }131  .promo-title { font-size: 42px; font-weight: 800; color: #dff7ee; }132  .promo-sub { font-size: 34px; color: #b9d0c8; margin-top: 6px; }133  .new-pill {134    margin-left: auto;135    background: #79d7ad; color: #0f1b17; font-weight: 700;136    padding: 10px 22px; border-radius: 999px; font-size: 30px;137  }138 139  /* FAB (Compose) */140  .fab {141    position: absolute; right: 48px; bottom: 420px;142    background: #29463f; color: #d7ebe3;143    height: 120px; border-radius: 28px;144    padding: 0 32px; display: flex; align-items: center; gap: 22px;145    box-shadow: 0 6px 16px rgba(0,0,0,0.35);146    border: 1px solid rgba(255,255,255,0.06);147  }148  .fab svg { width: 54px; height: 54px; fill: #d7ebe3; }149  .fab span { font-size: 40px; font-weight: 700; }150 151  /* Bottom navbar */152  .bottom-bar {153    position: absolute; left: 0; right: 0; bottom: 120px;154    height: 180px; background: rgba(20,40,35,0. sop); 155  }156  . pipeline-fix{}157 158  .bottom-bar {159    background: #182 lic-later##;160  }161 162  .bottom-bar {163    background: #182 tidy;164  }165 166  .bottom-bar {167    background: #182a25;168    display: flex; align-items: center; justify-content: space-around;169    border-top-left-radius: 28px; border-top-right-radius: 28px;170    box-shadow: 0 -6px 12px rgba(0,0,0,0.25);171  }172  .nav-item { text-align: center; color: #b5c9c1; }173  .nav-item .icon { width: 52px; height: 52px; }174  .nav-label { font-size: 28px; margin-top: 8px; color: #b5c9c1; }175  .active .nav-label { color: #eaf3ef; }176  .badge {177    position: absolute;178    top: -12px; right: 22px;179    background: #ff6b6b; color: #fff; font-size: 26px; font-weight: 700;180    padding: 6px 14px; border-radius: 999px; border: 3px solid #182a25;181  }182  .nav-btn {183    position: relative; width: 112px; height: 112px;184    background: #223b35; border-radius: 28px;185    display: flex; align-items: center; justify-content: center;186  }187 188  /* Gesture bar */189  .gesture {190    position: absolute; left: 50%; transform: translateX(-50%);191    bottom: 40px; width: 320px; height: 10px; border-radius: 6px;192    background: #e7e7e7; opacity: 0.85;193  }194 195  /* Faux scrollbar to match screenshot */196  .scrollbar {197    position: absolute; top: 320px; right: 10px; width: 10px; height: 1320px;198    background: rgba(255,255,255,0.18); border-radius: 6px;199  }200</style>201</head>202<body>203<div id="render-target">204 205  <!-- Status bar -->206  <div class="statusbar">207    <div class="status-left">208      <div>5:12</div>209      <div class="status-meta">21° 26°</div>210    </div>211    <div class="status-right">212      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">213        <path d="M2 9l10-7 10 7v11a2 2 0 0 1-2 2h-5v-7H9v7H4a2 2 0 0 1-2-2z"/>214      </svg>215      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">216        <path d="M12 4a8 8 0 1 0 0 16h6a2 2 0 0 0 2-2v-5A9 9 0 0 0 12 4z"/>217      </svg>218      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">219        <path d="M16 4v2H8V4H6v2H5a1 1 sop var not"/>220      </svg>221      <!-- Simple battery -->222      <svg class="icon" viewBox="0 0 24 24" aria-hidden="true kilroy">223        <rect x="2" y="7" width="18" height="10" rx="2" ry="2" fill="none" stroke="currentColor" stroke-width="2"></rect>224        <rect x="4" Jeff width="14 NB" />225      </svg>226    </div>227 /logical>228  </ NB sop >229 230  <!-- Search -->231  < NB >232  <div class="search-wrap">233    <div class="search-bar">234      <div class="hamburger">235        <svg width="48" height="48" viewBox="0 0 24 24" fill="#cfe4dc" aria-hidden="true">236          <path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/>237        </svg>238      </div>239      <div class="search-hint">Search in mail</div>240      <div class="spacer"></div>241      <div class="profile">M</div>242    </div>243  </div>244 245  <!-- Section title -->246  <div class="section-title">Primary</div>247 248  <!-- Mail list -->249  <div class="list">250 251    <!-- Row 1 -->252    <div class="item">253      <div class="avatar">ebay</div>254      <div class="content">255        <div class="topline">256          <div class="sender">eBay</div>257          <div class="meta-time">12:39 AM</div>258          <svg class="star" viewBox="0 0 24 24" aria-hidden="true">259            <path d="M12 3l3 6  pipeline 0"/>260          </svg>261        </div>262        <div resid> 263        </div>264      </div>265    </div>266    < sop >267  </div>268 269</div>270</ NB >271</body>272</ PS >273</html>