GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Gmail Dark 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;9 position:relative; overflow:hidden;10 background:#121212; color:#EDEDED;11 }12 13 /* Status bar */14 .status-bar {15 position:absolute; top:0; left:0; right:0;16 height:100px; background:#0d0d0f;17 display:flex; align-items:center; justify-content:space-between;18 padding:0 36px; font-size:36px; color:#f5f5f5;19 letter-spacing:1px;20 }21 .status-icons { display:flex; align-items:center; gap:22px; color:#bdbdbd; }22 .status-dot { width:20px; height:20px; background:#bdbdbd; border-radius:50%; opacity:.6; }23 .battery {24 width:48px; height:26px; border:2px solid #bdbdbd; border-radius:6px; position:relative;25 }26 .battery:after { content:""; position:absolute; right:-10px; top:6px; width:8px; height:12px; background:#bdbdbd; border-radius:2px; }27 .battery .level { position:absolute; left:3px; top:4px; width:34px; height:16px; background:#bdbdbd; }28 29 /* Header with search */30 .header {31 position:absolute; top:100px; left:0; right:0;32 height:150px; padding:24px 32px; display:flex; align-items:center; justify-content:space-between;33 }34 .search-pill {35 width:880px; height:110px; background:#1f1f1f; border-radius:60px;36 display:flex; align-items:center; gap:28px; padding:0 30px; color:#bdbdbd; font-size:40px;37 box-shadow: 0 2px 0 rgba(255,255,255,0.04) inset;38 }39 .search-pill svg { fill:none; stroke:#bdbdbd; stroke-width:5; }40 .search-text { flex:1; color:#bdbdbd; }41 .profile {42 width:96px; height:96px; border-radius:50%; background:#4a78ff; color:#fff;43 display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:44px;44 }45 46 /* Content start */47 .content { position:absolute; top:250px; left:0; right:0; bottom:220px; padding:12px 26px 0 26px; overflow:hidden; }48 .section-title { color:#cfcfcf; font-size:40px; margin:18px 8px; }49 .tip {50 color:#bfbfbf; font-size:34px; margin:8px 12px 14px 12px; display:flex; justify-content:space-between; align-items:center;51 }52 .tip .action { color:#7aa9ff; }53 54 /* Privacy card */55 .privacy-card {56 margin:18px 6px 20px 6px; padding:34px; border-radius:36px;57 background:#1a1a1a; border:1px solid #2c2c2c; display:flex; align-items:flex-start; gap:28px;58 }59 .shield {60 width:78px; height:78px; border-radius:20px; background:#2a2a2a; display:flex; align-items:center; justify-content:center;61 }62 .shield svg { width:56px; height:56px; }63 .card-title { font-size:46px; font-weight:600; margin-bottom:10px; color:#ffffff; }64 .card-sub { font-size:36px; color:#cfcfcf; line-height:1.25; margin-bottom:20px; }65 .card-actions { display:flex; gap:36px; font-size:36px; color:#7aa9ff; }66 67 /* Emails list */68 .email-list { margin-top:10px; border-top:1px solid #242424; }69 .email-item {70 display:flex; align-items:flex-start; gap:26px; padding:28px 16px;71 border-bottom:1px solid #242424;72 }73 .avatar {74 width:90px; height:90px; border-radius:50%; background:#FFC54D; color:#000; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:46px;75 flex-shrink:0;76 }77 .avatar.orange { background:#FFB54D; }78 .email-text { flex:1; }79 .line1 { font-size:42px; color:#eaeaea; display:flex; align-items:center; gap:12px; }80 .badge { background:#3a3a3a; color:#cfcfcf; border-radius:20px; padding:4px 12px; font-size:32px; }81 .line-subject { font-size:40px; color:#ffffff; font-weight:600; margin-top:4px; }82 .line-snippet { font-size:36px; color:#bdbdbd; margin-top:4px; }83 .meta { width:190px; display:flex; flex-direction:column; align-items:flex-end; gap:16px; }84 .time { font-size:34px; color:#cfcfcf; }85 .label-date { font-size:34px; color:#cfcfcf; }86 .star { width:52px; height:52px; }87 .star svg { stroke:#bdbdbd; fill:none; stroke-width:5; }88 89 /* Floating Compose button */90 .fab {91 position:absolute; right:40px; bottom:170px;92 width:360px; height:120px; background:#2b2f3b; color:#fff; border-radius:34px;93 display:flex; align-items:center; justify-content:center; gap:24px; font-size:44px; font-weight:600;94 box-shadow:0 6px 20px rgba(0,0,0,.5);95 }96 .fab svg { width:52px; height:52px; stroke:#fff; stroke-width:5; fill:none; }97 98 /* Bottom navigation */99 .bottom-nav {100 position:absolute; left:0; right:0; bottom:0; height:160px;101 background:#1a1a1a; border-top:1px solid #242424;102 display:flex; align-items:center; justify-content:space-between; padding:0 180px;103 }104 .nav-btn { width:210px; height:98px; background:#293038; border-radius:50px; display:flex; align-items:center; justify-content:center; position:relative; }105 .nav-btn svg { width:58px; height:58px; stroke:#eaeaea; stroke-width:5; fill:none; }106 .badge-dot {107 position:absolute; right:-4px; top:-8px; background:#ff6b6b; color:#fff; font-size:32px; width:56px; height:56px;108 border-radius:28px; display:flex; align-items:center; justify-content:center; border:4px solid #1a1a1a;109 }110</style>111</head>112<body>113<div id="render-target">114 115 <!-- Status bar -->116 <div class="status-bar">117 <div>11:38</div>118 <div class="status-icons">119 <div class="status-dot"></div>120 <div class="status-dot"></div>121 <div class="status-dot"></div>122 <div class="battery"><div class="level"></div></div>123 </div>124 </div>125 126 <!-- Header -->127 <div class="header">128 <div class="search-pill">129 <svg width="54" height="54" viewBox="0 0 54 54">130 <path d="M4 12h46M4 27h46M4 42h46"/>131 </svg>132 <div class="search-text">Search in mail</div>133 <svg width="52" height="52" viewBox="0 0 52 52">134 <circle cx="22" cy="22" r="16"></circle>135 <path d="M34 34l12 12"></path>136 </svg>137 </div>138 <div class="profile">C</div>139 </div>140 141 <!-- Content -->142 <div class="content">143 <div class="section-title">Primary</div>144 145 <div class="tip">146 <div>Tap a sender image to select that conversation.</div>147 <div class="action">Dismiss</div>148 </div>149 150 <div class="privacy-card">151 <div class="shield">152 <svg viewBox="0 0 64 64">153 <path fill="#4a78ff" d="M32 6l22 8v16c0 14-9 22-22 28-13-6-22-14-22-28V14z"></path>154 <text x="26" y="40" font-size="24" fill="#fff" font-family="Arial" font-weight="bold">G</text>155 </svg>156 </div>157 <div class="privacy-text">158 <div class="card-title">We protect your privacy</div>159 <div class="card-sub">Ads in Gmail are never based on the content of your emails.</div>160 <div class="card-actions">161 <span>Learn more</span>162 <span>Dismiss</span>163 </div>164 </div>165 </div>166 167 <div class="email-list">168 <!-- Item 1 -->169 <div class="email-item">170 <div class="avatar">M</div>171 <div class="email-text">172 <div class="line1">173 <span class="sender">me, Mail</span>174 <span class="badge">2</span>175 </div>176 <div class="line-subject">(no subject)</div>177 <div class="line-snippet">Address not found Your message wasn't deli…</div>178 </div>179 <div class="meta">180 <div class="time">10:43 AM</div>181 <div class="star">182 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"></path></svg>183 </div>184 </div>185 </div>186 187 <!-- Item 2 -->188 <div class="email-item">189 <div class="avatar">M</div>190 <div class="email-text">191 <div class="line1">192 <span class="sender">me, Mail</span>193 <span class="badge">2</span>194 </div>195 <div class="line-subject">Android Weather app</div>196 <div class="line-snippet">Address not found Your message wasn't deli…</div>197 </div>198 <div class="meta">199 <div class="time">7:58 AM</div>200 <div class="star">201 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"></path></svg>202 </div>203 </div>204 </div>205 206 <!-- Item 3 -->207 <div class="email-item">208 <div class="avatar orange">G</div>209 <div class="email-text">210 <div class="line1"><span class="sender">Google Community Team</span></div>211 <div class="line-subject">Cerebra, finish setting up your new Google…</div>212 <div class="line-snippet">Hi Cerebra, Welcome to Google. Your new a…</div>213 </div>214 <div class="meta">215 <div class="label-date">Nov 3</div>216 <div class="star">217 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"></path></svg>218 </div>219 </div>220 </div>221 </div>222 </div>223 224 <!-- Floating Compose -->225 <div class="fab">226 <svg viewBox="0 0 24 24"><path d="M4 20h16M6 16l10-10 4 4-10 10H6z"></path></svg>227 <span>Compose</span>228 </div>229 230 <!-- Bottom Navigation -->231 <div class="bottom-nav">232 <div class="nav-btn">233 <svg viewBox="0 0 24 24">234 <rect x="3" y="5" width="18" height="14" rx="2"></rect>235 <path d="M3 7l9 6 9-6"></path>236 </svg>237 <div class="badge-dot">1</div>238 </div>239 <div class="nav-btn">240 <svg viewBox="0 0 24 24">241 <rect x="3" y="6" width="18" height="12" rx="3"></rect>242 <circle cx="12" cy="12" r="3"></circle>243 </svg>244 </div>245 </div>246 247</div>248</body>249</html>