GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Gmail Inbox Mock</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#0f1a1c; color:#dfe7e7;10  }11 12  /* Status bar */13  .status-bar {14    position:absolute; top:0; left:0; right:0; height:90px; 15    color:#cfe1e1; font-size:34px; letter-spacing:1px;16    display:flex; align-items:center; padding:0 28px; box-sizing:border-box;17  }18  .status-right { margin-left:auto; display:flex; align-items:center; gap:18px; }19  .dot { width:12px; height:12px; background:#cfe1e1; border-radius:50%; display:inline-block; }20 21  /* Header search */22  .search-wrap { position:absolute; top:110px; left:30px; right:30px; }23  .search-bar {24    height:100px; border-radius:60px; background:#1d2c2e; 25    display:flex; align-items:center; padding:0 26px; box-sizing:border-box;26    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.04);27  }28  .menu-ico { width:48px; height:48px; margin-right:20px; opacity:.9; }29  .search-text { color:#b9c9c9; font-size:36px; flex:1; }30  .profile {31    width:84px; height:84px; background:#f28b34; color:#102020;32    border-radius:50%; display:flex; align-items:center; justify-content:center;33    font-weight:700; font-size:44px;34  }35 36  /* Section title */37  .section-title { margin:230px 30px 18px 30px; color:#b7c5c5; font-size:34px; }38 39  /* Big card */40  .card {41    margin:0 30px; padding:30px; border-radius:26px; background:#152528;42    box-shadow:0 2px 0 rgba(0,0,0,0.2); 43  }44  .card-head { display:flex; align-items:flex-start; gap:20px; }45  .shield {46    width:60px; height:60px; background:#214a57; border-radius:16px;47    display:flex; align-items:center; justify-content:center;48  }49  .shield svg { width:34px; height:34px; fill:#6bd1ff; }50  .card-title { font-size:44px; line-height:52px; font-weight:700; color:#e7f0f0; }51  .card-body { color:#a9b9b9; font-size:30px; line-height:42px; margin:18px 0 10px 80px; }52  .card-actions { display:flex; gap:40px; margin-left:80px; }53  .link-green { color:#72e4a0; font-weight:700; font-size:34px; }54  .link-plain { color:#c9d2d2; font-size:34px; }55 56  /* Email list */57  .list { margin-top:22px; }58  .row {59    display:flex; align-items:flex-start; gap:26px; padding:26px 30px;60    border-bottom:1px solid rgba(255,255,255,0.05);61  }62  .avatar {63    width:92px; height:92px; border-radius:50%; background:#7b888a;64    display:flex; align-items:center; justify-content:center; color:#0f1a1c;65  }66  .avatar.purple { background:#7a58cc; color:#fff; font-weight:700; font-size:44px; }67  .content { flex:1; }68  .top-line {69    display:flex; align-items:center; gap:10px;70  }71  .sender { font-size:38px; font-weight:700; color:#e6f0f0; }72  .date { margin-left:auto; color:#a5b5b5; font-size:30px; }73  .subject { color:#e6f0f0; font-size:34px; margin-top:6px; }74  .snippet { color:#a5b5b5; font-size:28px; margin-top:6px; }75  .star {76    width:48px; height:48px; margin-left:14px; opacity:.8;77  }78  .star svg { width:100%; height:100%; fill:none; stroke:#a5b5b5; stroke-width:3; }79 80  /* Promotions header */81  .promo {82    display:flex; align-items:center; gap:18px; padding:22px 30px 10px 30px;83  }84  .tag {85    width:50px; height:50px; border-radius:10px; background:#29483f;86    display:flex; align-items:center; justify-content:center;87  }88  .tag svg { width:28px; height:28px; fill:#9ad1aa; }89  .promo-title { font-weight:800; font-size:40px; color:#e6f0f0; }90  .new-pill { margin-left:auto; background:#74d391; color:#032215; padding:10px 16px; border-radius:28px; font-weight:700; }91 92  /* Floating compose */93  .compose {94    position:absolute; right:30px; bottom:360px;95    height:120px; width:440px; background:#1e7a51; border-radius:70px;96    display:flex; align-items:center; justify-content:center; gap:22px;97    box-shadow:0 18px 28px rgba(0,0,0,0.35);98    font-size:44px; font-weight:700;99  }100  .compose .pen { width:56px; height:56px; background:#2aa06e; border-radius:12px; display:flex; align-items:center; justify-content:center; }101  .compose svg { width:34px; height:34px; fill:#cdeedf; }102 103  /* Snackbar */104  .snackbar {105    position:absolute; left:30px; right:30px; bottom:220px;106    background:#233435; color:#eaf2f2; border-radius:18px;107    display:flex; align-items:center; justify-content:space-between;108    padding:28px 30px; font-size:34px; box-shadow:0 10px 20px rgba(0,0,0,0.4);109  }110  .undo { color:#74d391; font-weight:700; }111 112  /* Bottom quick bar */113  .bottom-bar { position:absolute; left:0; right:0; bottom:100px; height:90px; display:flex; justify-content:center; gap:120px; }114  .icon-round {115    width:120px; height:70px; display:flex; align-items:center; justify-content:center; position:relative;116  }117  .env {118    width:120px; height:70px; background:#2e6f53; border-radius:40px; display:flex; align-items:center; justify-content:center;119  }120  .env svg { width:44px; height:44px; fill:#d8f0e5; }121  .count {122    position:absolute; top:-12px; left:64px; background:#f0b6b6; color:#032215; width:56px; height:56px; border-radius:28px;123    display:flex; align-items:center; justify-content:center; font-weight:800;124    border:6px solid #0f1a1c;125  }126  .video {127    width:90px; height:70px; background:#2a3335; border-radius:16px; display:flex; align-items:center; justify-content:center;128  }129  .video svg { width:42px; height:42px; fill:#bcd1d1; }130 131</style>132</head>133<body>134<div id="render-target">135 136  <!-- Status Bar -->137  <div class="status-bar">138    7:24139    <div class="status-right">140      <span class="dot"></span>141      <span class="dot"></span>142      <span class="dot"></span>143      <span style="font-weight:700;">100%</span>144    </div>145  </div>146 147  <!-- Search -->148  <div class="search-wrap">149    <div class="search-bar">150      <svg class="menu-ico" viewBox="0 0 24 24">151        <rect x="3" y="5" width="18" height="2" fill="#b9c9c9"></rect>152        <rect x="3" y="11" width="18" height="2" fill="#b9c9c9"></rect>153        <rect x="3" y="17" width="18" height="2" fill="#b9c9c9"></rect>154      </svg>155      <div class="search-text">Search in mail</div>156      <div class="profile">R</div>157    </div>158  </div>159 160  <!-- Section -->161  <div class="section-title">Primary</div>162 163  <!-- Phishing Protection Card -->164  <div class="card">165    <div class="card-head">166      <div class="shield">167        <svg viewBox="0 0 24 24"><path d="M12 2l8 3v6c0 5.5-3.4 9.4-8 11-4.6-1.6-8-5.5-8-11V5l8-3z"/></svg>168      </div>169      <div class="card-title">170        Get additional protection against phishing171      </div>172    </div>173    <div class="card-body">174      Turn on Enhanced Safe Browsing to get additional protection against dangerous emails175    </div>176    <div class="card-actions">177      <div class="link-green">Continue</div>178      <div class="link-plain">No thanks</div>179    </div>180  </div>181 182  <!-- Email list -->183  <div class="list">184 185    <div class="row">186      <div class="avatar">187        <svg viewBox="0 0 24 24" width="52" height="52">188          <circle cx="12" cy="8" r="4" fill="#d9e2e2"/>189          <path d="M4 20c1.6-4 6-6 8-6s6 2 8 6" fill="#d9e2e2"/>190        </svg>191      </div>192      <div class="content">193        <div class="top-line">194          <div class="sender">Kitchen Stories</div>195          <div class="date">Oct 10</div>196          <div class="star">197            <svg viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 4 1 7-6-3-6 3 1-7-5-4 7-1z"/></svg>198          </div>199        </div>200        <div class="subject">Still want to receive our newsletter?</div>201        <div class="snippet">Please don't forget to confirm your registrat...</div>202      </div>203    </div>204 205    <!-- Promotions header -->206    <div class="promo">207      <div class="tag">208        <svg viewBox="0 0 24 24"><path d="M3 7v6l6 6 12-12-6-6H9L3 7z"/></svg>209      </div>210      <div class="promo-title">Promotions</div>211      <div class="snippet" style="flex:1; margin-left:8px;">Yummly, Yummly, TheFork</div>212      <div class="new-pill">3 new</div>213    </div>214 215    <div class="row">216      <div class="avatar">217        <svg viewBox="0 0 24 24" width="52" height="52">218          <circle cx="12" cy="8" r="4" fill="#d9e2e2"/>219          <path d="M4 20c1.6-4 6-6 8-6s6 2 8 6" fill="#d9e2e2"/>220        </svg>221      </div>222      <div class="content">223        <div class="top-line">224          <div class="sender">Kitchen Stories</div>225          <div class="date">Oct 6</div>226          <div class="star">227            <svg viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 4 1 7-6-3-6 3 1-7-5-4 7-1z"/></svg>228          </div>229        </div>230        <div class="subject">Good news is just one click away!</div>231        <div class="snippet">Please confirm your registration to receive ...</div>232      </div>233    </div>234 235    <div class="row">236      <div class="avatar">237        <svg viewBox="0 0 24 24" width="52" height="52">238          <circle cx="12" cy="8" r="4" fill="#d9e2e2"/>239          <path d="M4 20c1.6-4 6-6 8-6s6 2 8 6" fill="#d9e2e2"/>240        </svg>241      </div>242      <div class="content">243        <div class="top-line">244          <div class="sender">Kitchen Stories</div>245          <div class="date">Oct 6</div>246          <div class="star">247            <svg viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 4 1 7-6-3-6 3 1-7-5-4 7-1z"/></svg>248          </div>249        </div>250        <div class="subject">Welcome to Kitchen Stories!</div>251        <div class="snippet">Thank you for signing up. Let's get cooking....</div>252      </div>253    </div>254 255    <div class="row">256      <div class="avatar purple">G</div>257      <div class="content">258        <div class="top-line">259          <div class="sender">Google Calendar</div>260          <div class="date">Oct 3</div>261          <div class="star">262            <svg viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 4 1 7-6-3-6 3 1-7-5-4 7-1z"/></svg>263          </div>264        </div>265        <div class="subject">Google Calendar now shows...</div>266        <div class="snippet">Google Calendar now shows</div>267      </div>268    </div>269 270  </div>271 272  <!-- Floating Compose -->273  <div class="compose">274    <div class="pen">275      <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L18.81 8.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>276    </div>277    Compose278  </div>279 280  <!-- Snackbar -->281  <div class="snackbar">282    <div>Moved to Promotions</div>283    <div class="undo">Undo</div>284  </div>285 286  <!-- Bottom quick bar -->287  <div class="bottom-bar">288    <div class="icon-round">289      <div class="env">290        <svg viewBox="0 0 24 24"><path d="M2 6h20v12H2V6zm10 6L2 6h20l-10 6z"/></svg>291      </div>292      <div class="count">6</div>293    </div>294    <div class="icon-round">295      <div class="video">296        <svg viewBox="0 0 24 24"><path d="M3 6h14v12H3zM21 8l-4 3v2l4 3z"/></svg>297      </div>298    </div>299  </div>300 301</div>302</body>303</html>