GD-ML/AndroidCode
13.4k
1<html>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: Roboto, Arial, sans-serif; }7 #render-target {8 position: relative;9 width: 1080px;10 height: 2400px;11 overflow: hidden;12 background:#121212;13 color:#EDEDED;14 }15 16 /* Status bar */17 .status-bar{18 height:90px;19 padding:0 36px;20 display:flex;21 align-items:center;22 justify-content:space-between;23 color:#EDEDED;24 font-size:34px;25 letter-spacing:0.5px;26 }27 .status-right{28 display:flex; align-items:center; gap:24px;29 }30 .dot{ width:18px; height:18px; background:#BDBDBD; border-radius:50%; opacity:.8;}31 .battery{32 width:44px; height:22px; border:2px solid #E0E0E0; border-radius:4px; position:relative;33 }34 .battery:after{content:""; position:absolute; right:-6px; top:6px; width:4px; height:10px; background:#E0E0E0; border-radius:1px;}35 .battery .level{position:absolute; left:2px; top:2px; bottom:2px; right:10px; background:#E0E0E0;}36 37 /* Search */38 .search-wrap{39 padding:10px 30px 16px;40 }41 .search-bar{42 background:#1E1E1E;43 border-radius:60px;44 height:120px;45 display:flex;46 align-items:center;47 padding:0 34px;48 border:1px solid #2A2A2A;49 }50 .hamburger{ width:54px; height:54px; margin-right:22px;}51 .hamburger svg path{ stroke:#EDEDED; stroke-width:6; }52 .search-text{ color:#BDBDBD; font-size:40px; flex:1;}53 .account-pill{54 width:96px; height:96px; border-radius:50%; background:#3A4B57;55 display:flex; align-items:center; justify-content:center; font-weight:700; font-size:44px;56 }57 58 /* Section label */59 .section-title{60 padding:26px 40px 16px;61 color:#BDBDBD;62 font-size:34px;63 }64 65 /* Email list */66 .list{ }67 .email-item{68 display:flex; align-items:flex-start;69 padding:26px 32px;70 gap:28px;71 border-bottom:1px solid #222;72 }73 .avatar{74 width:96px; height:96px; border-radius:50%;75 display:flex; align-items:center; justify-content:center;76 font-size:46px; font-weight:700; color:#111;77 }78 .av-purple{ background:#B39DDB; }79 .av-yellow{ background:#FFD54F; }80 .av-grey{ background:#9E9E9E; color:#222; }81 .content{ flex:1; }82 .row1{83 display:flex; align-items:center; justify-content:space-between;84 margin-top:4px;85 }86 .from{ font-size:42px; font-weight:700; color:#EDEDED; }87 .time{ font-size:34px; color:#BDBDBD; margin-right:18px; }88 .row2{89 display:flex; align-items:center; justify-content:space-between; margin-top:8px;90 }91 .subject{ font-size:40px; font-weight:800; color:#EDEDED; }92 .snippet{ font-size:34px; color:#A7A7A7; margin-top:6px; }93 .icon-area{ display:flex; align-items:center; gap:26px; }94 .icon-btn{ width:56px; height:56px; display:flex; align-items:center; justify-content:center; }95 .star svg{ width:44px; height:44px; fill:none; stroke:#BDBDBD; stroke-width:3; }96 .more{ color:#BDBDBD; font-size:50px; line-height:0; }97 98 /* Promotions row */99 .tag{100 width:52px; height:34px; border-radius:6px; border:2px solid #7CB342; position:relative; margin-right:8px;101 }102 .promo{103 display:flex; align-items:center; gap:18px;104 }105 .badge{106 font-size:34px; color:#0C2B12; background:#9CCC65; padding:10px 22px; border-radius:40px; font-weight:700;107 }108 109 /* Floating compose */110 .compose{111 position:absolute; right:28px; bottom:280px;112 background:#2F3E58;113 border-radius:70px;114 padding:26px 40px;115 display:flex; align-items:center; gap:24px;116 box-shadow:0 8px 20px rgba(0,0,0,.5);117 }118 .compose .pen{119 width:52px; height:52px; border-radius:12px; background:#5C6BC0;120 display:flex; align-items:center; justify-content:center;121 }122 .compose .pen svg path{ fill:#fff; }123 .compose span{ font-size:44px; font-weight:700; color:#EDEDED; }124 125 /* Bottom small mail pill */126 .bottom-pill{127 position:absolute; left:54px; bottom:280px;128 background:#2A2A2A; color:#EDEDED; border-radius:60px; padding:18px 30px; display:flex; align-items:center; gap:16px;129 }130 .bottom-pill .envelope{ width:50px; height:36px; border:2px solid #D2A4A8; border-radius:6px; position:relative;}131 .bottom-pill .envelope:before{132 content:""; position:absolute; left:0; right:0; top:0; bottom:0;133 border-top:2px solid #D2A4A8; transform:skewY(-20deg);134 }135 .bottom-pill .count{136 background:#E8A9B1; color:#2A2A2A; font-weight:700; font-size:28px; padding:6px 12px; border-radius:26px;137 margin-left:4px;138 }139 140 /* Home indicator */141 .home-indicator{142 position:absolute; bottom:40px; left:50%; transform:translateX(-50%);143 width:360px; height:14px; border-radius:8px; background:#E0E0E0; opacity:.85;144 }145</style>146</head>147<body>148<div id="render-target">149 150 <!-- Status bar -->151 <div class="status-bar">152 <div>2:40</div>153 <div class="status-right">154 <div class="dot"></div>155 <div class="dot"></div>156 <div class="dot"></div>157 <div class="battery"><div class="level"></div></div>158 </div>159 </div>160 161 <!-- Search -->162 <div class="search-wrap">163 <div class="search-bar">164 <div class="hamburger">165 <svg viewBox="0 0 24 24">166 <path d="M3 6h18M3 12h18M3 18h18" fill="none" />167 </svg>168 </div>169 <div class="search-text">Search in mail</div>170 <div class="account-pill">C</div>171 </div>172 </div>173 174 <div class="section-title">Primary</div>175 176 <div class="list">177 <!-- Email 1 -->178 <div class="email-item">179 <div class="avatar av-purple">C</div>180 <div class="content">181 <div class="row1">182 <div class="from">me, Cerebra <span style="color:#BDBDBD; font-weight:600;">2</span></div>183 <div class="icon-area">184 <div class="time">2:12 PM</div>185 <div class="icon-btn star">186 <svg viewBox="0 0 24 24"><path d="M12 17.3l5.5 3.2-1.5-6.3 4.9-4.1-6.4-.5L12 3 9.5 9.6 3 10.1l4.9 4.1-1.5 6.3z"/></svg>187 </div>188 </div>189 </div>190 <div class="row2">191 <div class="subject">OFFICIAL WEEKEND PARTY</div>192 </div>193 <div class="snippet">I don't know anything about On Tue, Aug 8, ...</div>194 </div>195 </div>196 197 <!-- Email 2 -->198 <div class="email-item">199 <div class="avatar av-yellow">M</div>200 <div class="content">201 <div class="row1">202 <div class="from">me, Mail <span style="color:#BDBDBD; font-weight:600;">2</span></div>203 <div class="icon-area">204 <div class="time">1:02 PM</div>205 <div class="icon-btn star">206 <svg viewBox="0 0 24 24"><path d="M12 17.3l5.5 3.2-1.5-6.3 4.9-4.1-6.4-.5L12 3 9.5 9.6 3 10.1l4.9 4.1-1.5 6.3z"/></svg>207 </div>208 </div>209 </div>210 <div class="subject">Official weekend party</div>211 <div class="snippet">Address not found Your message wasn't deli...</div>212 </div>213 </div>214 215 <!-- Email 3 -->216 <div class="email-item">217 <div class="avatar av-purple">C</div>218 <div class="content">219 <div class="row1">220 <div class="from">Cerebra, me <span style="color:#BDBDBD; font-weight:600;">2</span></div>221 <div class="icon-area">222 <div class="time">12:44 PM</div>223 <div class="icon-btn star">224 <svg viewBox="0 0 24 24"><path d="M12 17.3l5.5 3.2-1.5-6.3 4.9-4.1-6.4-.5L12 3 9.5 9.6 3 10.1l4.9 4.1-1.5 6.3z"/></svg>225 </div>226 </div>227 </div>228 <div class="subject">Leave Approval</div>229 <div class="snippet">As per Business requirements, your leave ca...</div>230 </div>231 </div>232 233 <!-- Email 4 -->234 <div class="email-item">235 <div class="avatar av-grey" style="color:#222;">👤</div>236 <div class="content">237 <div class="row1">238 <div class="from">Glow Nurture</div>239 <div class="icon-area">240 <div class="time">10:19 AM</div>241 <div class="more">⋯</div>242 <div class="icon-btn star">243 <svg viewBox="0 0 24 24"><path d="M12 17.3l5.5 3.2-1.5-6.3 4.9-4.1-6.4-.5L12 3 9.5 9.6 3 10.1l4.9 4.1-1.5 6.3z"/></svg>244 </div>245 </div>246 </div>247 <div class="subject">Your baby on Day 300</div>248 </div>249 </div>250 251 <!-- Promotions -->252 <div class="email-item">253 <div class="tag"></div>254 <div class="content">255 <div class="row1">256 <div class="promo">257 <div class="from">Promotions</div>258 </div>259 <div class="badge">51 new</div>260 </div>261 <div class="snippet">Enfamil Family Beginnings®, Xavier ...</div>262 </div>263 </div>264 265 <!-- Email 5 -->266 <div class="email-item">267 <div class="avatar av-grey">👤</div>268 <div class="content">269 <div class="row1">270 <div class="from">Glow Nurture</div>271 <div class="icon-area">272 <div class="time" style="width:130px; text-align:right;">Aug 7</div>273 <div class="more">⋯</div>274 <div class="icon-btn star">275 <svg viewBox="0 0 24 24"><path d="M12 17.3l5.5 3.2-1.5-6.3 4.9-4.1-6.4-.5L12 3 9.5 9.6 3 10.1l4.9 4.1-1.5 6.3z"/></svg>276 </div>277 </div>278 </div>279 <div class="subject">Your baby on Day 299</div>280 </div>281 </div>282 283 <!-- Email 6 -->284 <div class="email-item">285 <div class="avatar av-grey">👤</div>286 <div class="content">287 <div class="row1">288 <div class="from">Glow</div>289 <div class="icon-area">290 <div class="time" style="width:130px; text-align:right;">Aug 7</div>291 <div class="more">⋯</div>292 <div class="icon-btn star">293 <svg viewBox="0 0 24 24"><path d="M12 17.3l5.5 3.2-1.5-6.3 4.9-4.1-6.4-.5L12 3 9.5 9.6 3 10.1l4.9 4.1-1.5 6.3z"/></svg>294 </div>295 </div>296 </div>297 <div class="subject">Want a chance to win a $500 giveaway?</div>298 <div class="snippet">Create your Glow Registry and share to the...</div>299 </div>300 </div>301 302 <!-- Email 7 (partially visible) -->303 <div class="email-item">304 <div class="avatar" style="background:#FBC02D; color:#111;">G</div>305 <div class="content">306 <div class="row1">307 <div class="from">Google Accounts Team</div>308 <div class="icon-area">309 <div class="time" style="width:130px; text-align:right;">Aug 7</div>310 <div class="icon-btn star">311 <svg viewBox="0 0 24 24"><path d="M12 17.3l5.5 3.2-1.5-6.3 4.9-4.1-6.4-.5L12 3 9.5 9.6 3 10.1l4.9 4.1-1.5 6.3z"/></svg>312 </div>313 </div>314 </div>315 <div class="subject">Updating our Google Accounts ...</div>316 </div>317 </div>318 </div>319 320 <!-- Bottom overlays -->321 <div class="bottom-pill">322 <div class="envelope"></div>323 <div>Mail</div>324 <div class="count">99</div>325 </div>326 327 <div class="compose">328 <div class="pen">329 <svg viewBox="0 0 24 24">330 <path d="M3 17.3V21h3.7l10.8-10.8-3.7-3.7L3 17.3zm14.9-9.1l2.1-2.1c.4-.4.4-1 0-1.4l-1.7-1.7c-.4-.4-1-.4-1.4 0l-2.1 2.1 3.1 3.1z"/>331 </svg>332 </div>333 <span>Compose</span>334 </div>335 336 <div class="home-indicator"></div>337 338</div>339</body>340</html>