GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Gmail Dark 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:#0f1f22; color:#e9f0ef;10  }11  .status-bar {12    height:120px; padding:0 36px; display:flex; align-items:center; justify-content:space-between;13    color:#cfe3e1; font-weight:600; letter-spacing:0.5px;14  }15  .status-left { display:flex; align-items:center; gap:18px; font-size:42px; }16  .status-right { display:flex; align-items:center; gap:22px; }17  .sb-icon { width:40px; height:40px; opacity:0.9; }18  .search-wrap { padding:0 36px; }19  .search-bar {20    height:120px; border-radius:60px; background:#1b2c2f;21    display:flex; align-items:center; justify-content:space-between; padding:0 30px;22  }23  .search-left { display:flex; align-items:center; gap:24px; color:#c9d8d7; }24  .hamburger { width:44px; height:44px; }25  .search-text { font-size:40px; color:#c9d8d7; }26  .avatar {27    width:92px; height:92px; border-radius:50%; background:#d56f2f; color:#fff;28    display:flex; align-items:center; justify-content:center; font-size:40px; font-weight:700;29  }30  .section-title { margin:28px 36px 12px; font-size:36px; color:#a7bbb9; }31  /* Card */32  .card {33    margin:0 36px; padding:34px; border-radius:30px; background:#172a2d; border:1px solid rgba(255,255,255,0.08);34  }35  .card-top { display:flex; align-items:flex-start; gap:26px; }36  .g-shield { width:56px; height:56px; }37  .card-title { font-size:48px; line-height:56px; font-weight:700; color:#eaf3f2; }38  .card-desc { margin-top:12px; font-size:34px; color:#b8c8c7; line-height:46px; }39  .card-actions { margin-top:26px; display:flex; gap:36px; }40  .btn {41    padding:18px 28px; border-radius:18px; font-size:36px; font-weight:700;42  }43  .btn.primary { background:#1f8f66; color:#eafff6; }44  .btn.ghost { background:transparent; color:#b7c6c5; }45  /* List items */46  .list { margin-top:34px; }47  .mail-item {48    padding:26px 36px; display:flex; align-items:flex-start; gap:26px;49    border-bottom:1px solid rgba(255,255,255,0.04);50  }51  .avatar-grey {52    width:86px; height:86px; border-radius:50%; background:#778486; display:flex; align-items:center; justify-content:center;53  }54  .mail-content { flex:1; }55  .mail-first { display:flex; align-items:center; justify-content:space-between; }56  .from { font-size:42px; font-weight:700; color:#e9f1f0; }57  .date { font-size:34px; color:#a8b7b6; }58  .subject { margin-top:6px; font-size:40px; font-weight:800; color:#e9f1f0; }59  .snippet { margin-top:6px; font-size:34px; color:#a8b7b6; }60  .star {61    width:52px; height:52px; margin-left:12px;62  }63  /* Promotions row */64  .promo-label { font-size:46px; font-weight:800; color:#e9f1f0; }65  .tag-left { width:64px; height:64px; border-radius:12px; background:#143; display:flex; align-items:center; justify-content:center; }66  .promo-row { padding:22px 36px; display:flex; align-items:center; gap:22px; }67  .promo-sub { font-size:38px; color:#b8c8c7; }68  .pill {69    margin-left:auto; background:#6fb77b; color:#0e1f22; font-weight:800; font-size:34px;70    padding:10px 20px; border-radius:26px;71  }72  /* Compose button */73  .compose {74    position:absolute; right:36px; bottom:408px;75    background:#2b7b55; height:120px; border-radius:30px;76    display:flex; align-items:center; gap:24px; padding:0 40px; color:#eafff6; font-size:42px; font-weight:800;77    box-shadow:0 10px 24px rgba(0,0,0,0.4);78  }79  .pencil { width:52px; height:52px; }80  /* Bottom bar */81  .bottom-bar {82    position:absolute; left:0; right:0; bottom:0; height:160px; background:#0f1f22;83    border-top:1px solid rgba(255,255,255,0.08); display:flex; align-items:center; justify-content:center; gap:220px;84  }85  .nav-item { display:flex; flex-direction:column; align-items:center; color:#a8b7b6; }86  .nav-icon { width:72px; height:72px; border-radius:36px; background:#1b2c2f; display:flex; align-items:center; justify-content:center; position:relative; }87  .nav-icon.selected { background:#1f8f66; color:#fff; }88  .badge {89    position:absolute; right:-8px; top:-10px; background:#ff6d6d; color:#fff; font-size:30px; font-weight:800;90    padding:8px 16px; border-radius:26px;91  }92  .nav-label { margin-top:12px; font-size:30px; }93</style>94</head>95<body>96<div id="render-target">97  <!-- Status Bar -->98  <div class="status-bar">99    <div class="status-left">100      <div>7:22</div>101    </div>102    <div class="status-right">103      <!-- simple wifi icon -->104      <svg class="sb-icon" viewBox="0 0 24 24" fill="#cfe3e1"><path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 4c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 4c1-1 3-1 4 0l-2 2-2-2z"/></svg>105      <!-- signal icon -->106      <svg class="sb-icon" viewBox="0 0 24 24" fill="#cfe3e1"><path d="M3 18h2V6H3v12zm4 0h2V9H7v9zm4 0h2V3h-2v15zm4 0h2V12h-2v6zm4 0h2V15h-2v3z"/></svg>107      <!-- battery -->108      <svg class="sb-icon" viewBox="0 0 24 24" fill="#cfe3e1"><path d="M16 4h2v2h2v12h-2v2h-2v-2H6V6h10V4zm-8 4v8h10V8H8z"/></svg>109      <div style="font-size:40px;">100%</div>110    </div>111  </div>112 113  <!-- Search Bar -->114  <div class="search-wrap">115    <div class="search-bar">116      <div class="search-left">117        <svg class="hamburger" viewBox="0 0 24 24" fill="#c9d8d7"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>118        <div class="search-text">Search in mail</div>119      </div>120      <div class="avatar">R</div>121    </div>122  </div>123 124  <!-- Primary -->125  <div class="section-title">Primary</div>126 127  <!-- Phishing protection card -->128  <div class="card">129    <div class="card-top">130      <svg class="g-shield" viewBox="0 0 24 24" fill="#5aa0ff"><path d="M12 2l7 3v6c0 5-3.7 9.6-7 11-3.3-1.4-7-6-7-11V5l7-3z"/></svg>131      <div>132        <div class="card-title">Get additional protection against phishing</div>133        <div class="card-desc">Turn on Enhanced Safe Browsing to get additional protection against dangerous emails</div>134      </div>135    </div>136    <div class="card-actions">137      <div class="btn primary">Continue</div>138      <div class="btn ghost">No thanks</div>139    </div>140  </div>141 142  <!-- Kitchen Stories item -->143  <div class="list">144    <div class="mail-item">145      <div class="avatar-grey"></div>146      <div class="mail-content">147        <div class="mail-first">148          <div class="from">Kitchen Stories</div>149          <div style="display:flex; align-items:center; gap:18px;">150            <div class="date">Oct 10</div>151            <svg class="star" viewBox="0 0 24 24" fill="none" stroke="#9fb0af" stroke-width="2"><path d="M12 17.5l-6.2 3.3 1.2-6.9-5-4.8 6.9-1 3.1-6.1 3.1 6.1 6.9 1-5 4.8 1.2 6.9z"/></svg>152          </div>153        </div>154        <div class="subject">Still want to receive our newsletter?</div>155        <div class="snippet">Please don't forget to confirm your registrat...</div>156      </div>157    </div>158 159    <!-- Promotions row -->160    <div class="promo-row">161      <div class="tag-left">162        <svg width="36" height="36" viewBox="0 0 24 24" fill="#82c597"><path d="M3 7l6-4h9l3 4-9 10L3 7z"/></svg>163      </div>164      <div>165        <div class="promo-label">Promotions</div>166        <div class="promo-sub">Yummly, Yummly, TheFork</div>167      </div>168      <div class="pill">3 new</div>169    </div>170 171    <!-- Mail item 2 -->172    <div class="mail-item">173      <div class="avatar-grey"></div>174      <div class="mail-content">175        <div class="mail-first">176          <div class="from">Kitchen Stories</div>177          <div style="display:flex; align-items:center; gap:18px;">178            <div class="date">Oct 6</div>179            <svg class="star" viewBox="0 0 24 24" fill="none" stroke="#9fb0af" stroke-width="2"><path d="M12 17.5l-6.2 3.3 1.2-6.9-5-4.8 6.9-1 3.1-6.1 3.1 6.1 6.9 1-5 4.8 1.2 6.9z"/></svg>180          </div>181        </div>182        <div class="subject">Good news is just one click away!</div>183        <div class="snippet">Please confirm your registration to receive ...</div>184      </div>185    </div>186 187    <!-- Mail item 3 -->188    <div class="mail-item">189      <div class="avatar-grey"></div>190      <div class="mail-content">191        <div class="mail-first">192          <div class="from">Kitchen Stories</div>193          <div style="display:flex; align-items:center; gap:18px;">194            <div class="date">Oct 6</div>195            <svg class="star" viewBox="0 0 24 24" fill="none" stroke="#9fb0af" stroke-width="2"><path d="M12 17.5l-6.2 3.3 1.2-6.9-5-4.8 6.9-1 3.1-6.1 3.1 6.1 6.9 1-5 4.8 1.2 6.9z"/></svg>196          </div>197        </div>198        <div class="subject">Welcome to Kitchen Stories!</div>199        <div class="snippet">Thank you for signing up. Let's get cooking...</div>200      </div>201    </div>202 203    <!-- Mail item 4 -->204    <div class="mail-item">205      <div class="avatar-grey"></div>206      <div class="mail-content">207        <div class="mail-first">208          <div class="from">OpenTable | Tanivera Pizza e Pasta</div>209          <div style="display:flex; align-items:center; gap:18px;">210            <div class="date">Oct 6</div>211            <svg class="star" viewBox="0 0 24 24" fill="none" stroke="#9fb0af" stroke-width="2"><path d="M12 17.5l-6.2 3.3 1.2-6.9-5-4.8 6.9-1 3.1-6.1 3.1 6.1 6.9 1-5 4.8 1.2 6.9z"/></svg>212          </div>213        </div>214        <div class="subject">How was Tanivera Pizza e Pasta?</div>215        <div class="snippet">OpenTable OpenTable How was Tanivera Piz...</div>216      </div>217    </div>218 219    <!-- Mail item 5 -->220    <div class="mail-item" style="border-bottom:none;">221      <div style="width:86px; height:86px; border-radius:50%; background:#7e57c2; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800;">G</div>222      <div class="mail-content">223        <div class="mail-first">224          <div class="from">Google Calendar</div>225          <div style="display:flex; align-items:center; gap:18px;">226            <div class="date">3</div>227            <svg class="star" viewBox="0 0 24 24" fill="none" stroke="#9fb0af" stroke-width="2"><path d="M12 17.5l-6.2 3.3 1.2-6.9-5-4.8 6.9-1 3.1-6.1 3.1 6.1 6.9 1-5 4.8 1.2 6.9z"/></svg>228          </div>229        </div>230        <div class="subject">Google Calendar now shows events from...</div>231        <div class="snippet">Google Calendar updates and notifications...</div>232      </div>233    </div>234  </div>235 236  <!-- Compose Button -->237  <div class="compose">238    <svg class="pencil" viewBox="0 0 24 24" fill="#eafff6"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zm18-11.5a1 1 0 0 0 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>239    <div>Compose</div>240  </div>241 242  <!-- Bottom navigation -->243  <div class="bottom-bar">244    <div class="nav-item">245      <div class="nav-icon selected">246        <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff"><path d="M12 13L3 7v10h18V7l-9 6zm9-9H3l9 6 9-6z"/></svg>247        <div class="badge">7</div>248      </div>249      <div class="nav-label">Mail</div>250    </div>251    <div class="nav-item">252      <div class="nav-icon">253        <svg width="44" height="44" viewBox="0 0 24 24" fill="#a8b7b6"><path d="M20 3H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h5l3 3 3-3h5a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z"/></svg>254      </div>255      <div class="nav-label">Meet</div>256    </div>257  </div>258</div>259</body>260</html>