GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Gmail Dark - Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #141317;14 color: #EDEDF1;15 }16 17 /* Top status bar */18 .status-bar {19 height: 88px;20 padding: 0 36px;21 display: flex;22 align-items: center;23 color: #DADAE0;24 font-weight: 600;25 letter-spacing: 1px;26 font-size: 34px;27 }28 .status-right {29 margin-left: auto;30 display: flex;31 align-items: center;32 gap: 22px;33 opacity: 0.9;34 }35 .dot { width: 8px; height: 8px; background:#9DA0A6; border-radius:50%; }36 37 /* Search row */38 .search-row {39 padding: 10px 26px 16px 26px;40 display: flex;41 align-items: center;42 gap: 22px;43 }44 .hamburger {45 width: 70px; height: 70px; border-radius: 14px;46 display: flex; align-items: center; justify-content: center;47 color: #DADAE0;48 }49 .search-box {50 flex: 1;51 background: #27242C;52 border-radius: 38px;53 height: 96px;54 display: flex;55 align-items: center;56 padding: 0 32px;57 color: #B7B8C1;58 font-size: 34px;59 }60 .profile {61 width: 86px; height: 86px; border-radius: 50%;62 background: #6a5952; color:#F4E9E3; font-weight:700;63 display:flex; align-items:center; justify-content:center;64 font-size: 40px;65 }66 67 /* Section label */68 .section-label {69 color:#CFCFE4;70 font-weight:700;71 font-size: 36px;72 padding: 22px 34px 10px 34px;73 }74 75 /* Email list */76 .list {77 padding: 0 24px 140px 24px;78 }79 .email {80 display:flex;81 gap: 24px;82 padding: 28px 10px;83 border-bottom: 1px solid rgba(255,255,255,0.06);84 align-items: flex-start;85 }86 .avatar, .avatar-grey, .icon-pill {87 width: 84px; height: 84px; border-radius: 42px;88 background:#E0E0E0; color:#555; font-weight:700;89 display:flex; align-items:center; justify-content:center;90 font-size: 34px; border: 1px solid #BDBDBD;91 flex: 0 0 84px;92 }93 .avatar-grey { background:#3A3740; border: none; color:#EDEDF1; }94 .icon-pill { background:#1E8E3E; color:#e9ffef; }95 96 .email-content { flex:1; min-width:0; }97 .sender-line {98 display:flex; align-items: baseline; gap: 12px;99 }100 .sender {101 font-size: 40px; font-weight: 700; color:#ECECF5;102 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;103 max-width: 720px;104 }105 .date {106 margin-left:auto; color:#B2B3BD; font-size: 30px; font-weight:600;107 }108 .subject {109 margin-top: 6px; font-size: 36px; font-weight: 700; color:#ECECF7;110 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;111 }112 .snippet {113 margin-top: 6px; font-size: 32px; color:#9CA0AD;114 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;115 }116 .star {117 width: 56px; height: 56px; margin-left: 12px;118 display:flex; align-items:center; justify-content:center; color:#B7BAC8;119 }120 121 /* Promotions row special */122 .promo-row {123 align-items: center;124 }125 .promo-title { font-size: 38px; font-weight: 800; color:#DDE0EC; }126 .promo-sub { font-size: 32px; color:#B6BAC6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }127 .pill-new {128 background:#66D08E; color:#0B2D17; font-weight:800;129 padding: 10px 18px; border-radius: 28px; font-size: 30px;130 margin-left: 12px;131 }132 133 /* Floating compose */134 .compose {135 position: absolute; right: 34px; bottom: 180px;136 background:#6F6281; color:#EEE8F7;137 padding: 26px 38px; border-radius: 32px;138 display:flex; align-items:center; gap: 18px;139 box-shadow: 0 10px 24px rgba(0,0,0,0.35);140 font-size: 36px; font-weight: 700;141 }142 143 /* Bottom nav */144 .bottom-bar {145 position:absolute; bottom: 58px; left: 0; right:0;146 height: 94px; background: #191820; border-top-left-radius: 18px; border-top-right-radius: 18px;147 display:flex; align-items:center; justify-content:center; gap: 160px;148 color:#CFCFE1;149 }150 .badge-mail {151 position:absolute; bottom: 126px; left: 180px;152 background:#7A6C85; color:#FFF;153 width: 120px; height: 76px; border-radius: 40px;154 display:flex; align-items:center; justify-content:center;155 font-weight:800;156 box-shadow: 0 8px 18px rgba(0,0,0,0.35);157 }158 159 /* Simple icon helpers */160 .svg-ic { width: 44px; height: 44px; }161 .small-ic { width: 36px; height: 36px; }162</style>163</head>164<body>165<div id="render-target">166 167 <!-- Status bar -->168 <div class="status-bar">169 8:51170 <div class="status-right">171 <div class="svg-ic">172 <svg viewBox="0 0 24 24" width="44" height="44" fill="#DADAE0">173 <path d="M7 4h2v2H7V4zm4 0h2v2h-2V4zm4 0h2v2h-2V4zM4 9h16v11H4V9zm2 2v7h12v-7H6z"/>174 </svg>175 </div>176 <div class="dot"></div>177 <div class="svg-ic">178 <svg viewBox="0 0 24 24" width="44" height="44" fill="#DADAE0">179 <path d="M20 7H4a2 2 0 00-2 2v6h4v3h12v-3h4V9a2 2 0 00-2-2zm0 6H4V9h16v4z"/>180 </svg>181 </div>182 </div>183 </div>184 185 <!-- Search row -->186 <div class="search-row">187 <div class="hamburger" aria-label="menu">188 <svg class="svg-ic" viewBox="0 0 24 24" fill="#E8E8EF">189 <path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/>190 </svg>191 </div>192 <div class="search-box">193 <svg class="small-ic" viewBox="0 0 24 24" fill="#B7B8C1" style="margin-right:16px">194 <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79L20 21.5 21.5 20 15.5 14zM9.5 14C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>195 </svg>196 Search in mail197 </div>198 <div class="profile">F</div>199 </div>200 201 <!-- Section -->202 <div class="section-label">Primary</div>203 204 <!-- Emails -->205 <div class="list">206 207 <!-- Xe Money Transfer -->208 <div class="email">209 <div class="avatar-grey">X</div>210 <div class="email-content">211 <div class="sender-line">212 <div class="sender">Xe Money Transfer</div>213 <div class="date">12:36 AM</div>214 </div>215 <div class="subject">Your Rate Alert Triggered</div>216 <div class="snippet">Great news! The rate you've been waiting for...</div>217 </div>218 <div class="star" title="star">219 <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#B7BAC8" stroke-width="2">220 <path d="M12 17.3l-6.2 3.7 1.6-6.9L2 9.8l7-.6L12 2l3 7.2 7 .6-5.4 4.3 1.6 6.9z"/>221 </svg>222 </div>223 </div>224 225 <!-- Promotions -->226 <div class="email promo-row">227 <div class="avatar icon-pill">228 <svg viewBox="0 0 24 24" width="46" height="46" fill="#e9ffef">229 <path d="M3 12l7-9 7 9-7 9-7-9zm7 3l3-3-3-3-3 3 3 3z"/>230 </svg>231 </div>232 <div class="email-content">233 <div class="sender-line">234 <div class="promo-title">Promotions</div>235 <span class="pill-new">27 new</span>236 </div>237 <div class="promo-sub">Redfin, JustFly, Tripadvisor, Expedia...</div>238 </div>239 <div class="star">240 <!-- spacer for alignment -->241 </div>242 </div>243 244 <!-- JustFly 1 -->245 <div class="email">246 <div class="avatar-grey">247 <svg viewBox="0 0 24 24" width="46" height="46" fill="#EDEDF1">248 <path d="M2 13l8-1 4-8 2 5 6 2-6 2-2 6-4-6-8 0z"/>249 </svg>250 </div>251 <div class="email-content">252 <div class="sender-line">253 <div class="sender">JustFly</div>254 <div class="date">Nov 18</div>255 </div>256 <div class="subject">✈ Major Airline Deals: Fly from $17.59</div>257 <div class="snippet">Many airlines are offering low prices. Act now...</div>258 </div>259 <div class="star">260 <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#B7BAC8" stroke-width="2">261 <path d="M12 17.3l-6.2 3.7 1.6-6.9L2 9.8l7-.6L12 2l3 7.2 7 .6-5.4 4.3 1.6 6.9z"/>262 </svg>263 </div>264 </div>265 266 <!-- JustFly 2 -->267 <div class="email">268 <div class="avatar-grey">269 <svg viewBox="0 0 24 24" width="46" height="46" fill="#EDEDF1">270 <path d="M2 13l8-1 4-8 2 5 6 2-6 2-2 6-4-6-8 0z"/>271 </svg>272 </div>273 <div class="email-content">274 <div class="sender-line">275 <div class="sender">JustFly</div>276 <div class="date">Nov 18</div>277 </div>278 <div class="subject">✈ United Airlines from $34.20</div>279 <div class="snippet">Low Fares Found with United Airlines. JustFly...</div>280 </div>281 <div class="star">282 <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#B7BAC8" stroke-width="2">283 <path d="M12 17.3l-6.2 3.7 1.6-6.9L2 9.8l7-.6L12 2l3 7.2 7 .6-5.4 4.3 1.6 6.9z"/>284 </svg>285 </div>286 </div>287 288 <!-- Duolingo weekly report -->289 <div class="email">290 <div class="avatar" style="background:#2AAE40; color:#113818; border:none;">D</div>291 <div class="email-content">292 <div class="sender-line">293 <div class="sender">Duolingo</div>294 <div class="date">Nov 18</div>295 </div>296 <div class="subject">📝 Your weekly progress report</div>297 <div class="snippet">Hey farida, check out your progress so far t...</div>298 </div>299 <div class="star">300 <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#B7BAC8" stroke-width="2">301 <path d="M12 17.3l-6.2 3.7 1.6-6.9L2 9.8l7-.6L12 2l3 7.2 7 .6-5.4 4.3 1.6 6.9z"/>302 </svg>303 </div>304 </div>305 306 <!-- Duolingo reminders -->307 <div class="email">308 <div class="avatar" style="background:#2AAE40; color:#113818; border:none;">D</div>309 <div class="email-content">310 <div class="sender-line">311 <div class="sender">Duolingo</div>312 <div class="date">Nov 17</div>313 </div>314 <div class="subject">🚫 These reminders don’t seem to be wo...</div>315 <div class="snippet">We'll stop sending them for now.</div>316 </div>317 <div class="star">318 <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#B7BAC8" stroke-width="2">319 <path d="M12 17.3l-6.2 3.7 1.6-6.9L2 9.8l7-.6L12 2l3 7.2 7 .6-5.4 4.3 1.6 6.9z"/>320 </svg>321 </div>322 </div>323 324 <!-- MakeMyTrip -->325 <div class="email">326 <div class="avatar-grey">MMT</div>327 <div class="email-content">328 <div class="sender-line">329 <div class="sender">MakeMyTrip</div>330 <div class="date">Nov 17</div>331 </div>332 <div class="subject">Today is Your Deadline..</div>333 <div class="snippet">Open now, don't miss this. De...</div>334 </div>335 <div class="star">336 <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#B7BAC8" stroke-width="2">337 <path d="M12 17.3l-6.2 3.7 1.6-6.9L2 9.8l7-.6L12 2l3 7.2 7 .6-5.4 4.3 1.6 6.9z"/>338 </svg>339 </div>340 </div>341 342 </div>343 344 <!-- Floating compose button -->345 <div class="compose">346 <svg viewBox="0 0 24 24" width="44" height="44" fill="#F5F0FF">347 <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 000-1.41l-2.34-2.34a1 1 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>348 </svg>349 Compose350 </div>351 352 <!-- Bottom bar -->353 <div class="bottom-bar">354 <div>355 <svg viewBox="0 0 24 24" width="58" height="58" fill="#D9DAE2">356 <path d="M12 13L3 8V6l9 5 9-5v2l-9 5zm0 2l9-5v8H3V10l9 5z"/>357 </svg>358 </div>359 <div>360 <svg viewBox="0 0 24 24" width="58" height="58" fill="#D9DAE2">361 <path d="M4 4h16v12H5.17L4 17.17V4zm2 2v8h12V6H6zm2 14h10v2H8v-2z"/>362 </svg>363 </div>364 </div>365 366 <!-- Unread count badge near bottom left -->367 <div class="badge-mail">44</div>368 369</div>370</body>371</html>