GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Gmail Dark - Promotions</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }7 #render-target {8 position: relative;9 overflow: hidden;10 width: 1440px;11 height: 3120px;12 background: #141D13; /* deep dark green */13 color: #E6EAD9;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1440px;22 height: 120px;23 padding: 0 40px;24 box-sizing: border-box;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #DCE6CB;29 font-size: 48px;30 letter-spacing: 1px;31 }32 .status-icons { display: flex; gap: 30px; align-items: center; }33 .icon {34 width: 54px; height: 54px;35 }36 37 /* Top app bar */38 .top-bar {39 position: absolute;40 top: 120px;41 left: 0;42 width: 1440px;43 height: 150px;44 padding: 0 36px;45 box-sizing: border-box;46 display: flex;47 align-items: center;48 justify-content: space-between;49 }50 .left-top { display: flex; align-items: center; gap: 28px; }51 .top-title { font-size: 64px; font-weight: 600; color: #DDE7CE; }52 .right-actions { display: flex; gap: 50px; align-items: center; }53 54 /* Select all row */55 .select-row {56 position: absolute;57 top: 270px;58 left: 0;59 width: 1440px;60 height: 120px;61 padding: 0 46px;62 box-sizing: border-box;63 display: flex;64 align-items: center;65 gap: 28px;66 color: #CFE0C0;67 font-size: 54px;68 }69 .checkbox {70 width: 54px; height: 54px; border: 4px solid #A9B99B; border-radius: 8px;71 }72 73 /* Section header */74 .section-header {75 position: absolute;76 top: 390px;77 left: 0;78 width: 1440px;79 height: 180px;80 padding: 0 46px;81 box-sizing: border-box;82 display: flex;83 align-items: center;84 gap: 28px;85 border-top: 1px solid #2A3427;86 border-bottom: 1px solid #2A3427;87 }88 .tag-icon { width: 70px; height: 70px; }89 .section-text { display: flex; flex-direction: column; }90 .section-title { font-size: 66px; font-weight: 700; color: #E6ECD7; }91 .section-sub { font-size: 48px; color: #B6C4A9; margin-top: 8px; }92 93 /* Email list */94 .list {95 position: absolute;96 top: 570px;97 left: 0;98 width: 1440px;99 padding: 24px 32px;100 box-sizing: border-box;101 }102 .email-item {103 position: relative;104 display: flex;105 align-items: flex-start;106 gap: 30px;107 padding: 34px 22px;108 border-bottom: 1px solid #2A3427;109 }110 .avatar {111 width: 120px; height: 120px; border-radius: 60px;112 background: #F4C542; color: #1D1D1D; font-weight: 700;113 display: flex; justify-content: center; align-items: center;114 font-size: 66px;115 }116 .email-content {117 flex: 1;118 }119 .sender-line {120 display: flex;121 align-items: baseline;122 gap: 16px;123 }124 .sender {125 font-size: 58px; font-weight: 600; color: #E6ECD7;126 }127 .badge {128 background: #2E3A2B; color: #DDE7CE; border-radius: 22px;129 padding: 6px 14px; font-size: 40px; font-weight: 700;130 }131 .subject {132 font-size: 56px; margin-top: 12px; font-weight: 700; color: #E6ECD7;133 }134 .snippet {135 font-size: 44px; color: #AEBCA1; margin-top: 10px;136 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;137 }138 .meta {139 position: absolute; right: 140px; top: 40px; font-size: 42px; color: #C1CFB4;140 }141 .star {142 position: absolute; right: 60px; top: 92px; width: 60px; height: 60px;143 }144 145 /* Highlighted selected item */146 .email-item.selected {147 background: rgba(86, 124, 78, 0.25);148 border-radius: 30px;149 }150 .check-circle {151 width: 120px; height: 120px; border-radius: 60px;152 background: #9ED08A; color: #1C2517;153 display: flex; align-items: center; justify-content: center;154 }155 156 /* Compose button */157 .compose {158 position: absolute;159 right: 80px;160 bottom: 240px;161 height: 140px;162 width: 520px;163 background: #2F4A32;164 color: #E8F1DB;165 border-radius: 70px;166 display: flex; align-items: center; justify-content: center; gap: 28px;167 box-shadow: 0 10px 30px rgba(0,0,0,0.4);168 font-size: 56px; font-weight: 600;169 }170 .compose .pen { width: 70px; height: 70px; }171 172 /* Bottom home indicator */173 .home-indicator {174 position: absolute; bottom: 120px; left: 50%; transform: translateX(-50%);175 width: 520px; height: 16px; background: #334234; border-radius: 8px;176 }177</style>178</head>179<body>180<div id="render-target">181 182 <!-- Status bar -->183 <div class="status-bar">184 <div>11:54</div>185 <div class="status-icons">186 <!-- simple status icons -->187 <svg class="icon" viewBox="0 0 24 24">188 <circle cx="12" cy="12" r="10" fill="#AFC0A5"></circle>189 </svg>190 <svg class="icon" viewBox="0 0 24 24">191 <rect x="3" y="3" width="18" height="18" rx="4" fill="#AFC0A5"></rect>192 </svg>193 <svg class="icon" viewBox="0 0 24 24">194 <path d="M3 12h18" stroke="#AFC0A5" stroke-width="3" />195 <path d="M12 3v18" stroke="#AFC0A5" stroke-width="3" />196 </svg>197 <svg class="icon" viewBox="0 0 24 24">198 <path d="M3 12h18" stroke="#AFC0A5" stroke-width="3" />199 </svg>200 </div>201 </div>202 203 <!-- Top app bar -->204 <div class="top-bar">205 <div class="left-top">206 <svg class="icon" viewBox="0 0 60 60">207 <path d="M40 10 L20 30 L40 50" stroke="#DDE7CE" stroke-width="8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>208 </svg>209 <div class="top-title">1</div>210 </div>211 <div class="right-actions">212 <!-- Download -->213 <svg class="icon" viewBox="0 0 60 60">214 <path d="M30 10 v22" stroke="#DDE7CE" stroke-width="6" stroke-linecap="round"/>215 <path d="M18 28 L30 40 L42 28" stroke="#DDE7CE" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>216 <rect x="14" y="44" width="32" height="8" rx="4" fill="#DDE7CE"/>217 </svg>218 <!-- Trash -->219 <svg class="icon" viewBox="0 0 60 60">220 <rect x="18" y="20" width="24" height="28" rx="4" stroke="#DDE7CE" stroke-width="6" fill="none"/>221 <rect x="22" y="12" width="16" height="6" rx="3" fill="#DDE7CE"/>222 </svg>223 <!-- Envelope -->224 <svg class="icon" viewBox="0 0 60 60">225 <rect x="10" y="16" width="40" height="28" rx="4" stroke="#DDE7CE" stroke-width="6" fill="none"/>226 <path d="M10 20 L30 34 L50 20" stroke="#DDE7CE" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>227 </svg>228 <!-- More (vertical dots) -->229 <svg class="icon" viewBox="0 0 60 60">230 <circle cx="30" cy="16" r="5" fill="#DDE7CE"/>231 <circle cx="30" cy="30" r="5" fill="#DDE7CE"/>232 <circle cx="30" cy="44" r="5" fill="#DDE7CE"/>233 </svg>234 </div>235 </div>236 237 <!-- Select all -->238 <div class="select-row">239 <div class="checkbox"></div>240 <div>Select all</div>241 </div>242 243 <!-- Promotions section header -->244 <div class="section-header">245 <svg class="tag-icon" viewBox="0 0 80 80">246 <path d="M18 20 h32 l12 12 v22 l-22 22 -24 -24 z" fill="none" stroke="#C5D4B7" stroke-width="6"/>247 <circle cx="36" cy="34" r="6" fill="#C5D4B7"/>248 </svg>249 <div class="section-text">250 <div class="section-title">Promotions</div>251 <div class="section-sub">Emma at SideChef</div>252 </div>253 </div>254 255 <!-- Email List -->256 <div class="list">257 258 <!-- 1st email -->259 <div class="email-item">260 <div class="avatar">M</div>261 <div class="email-content">262 <div class="sender-line">263 <div class="sender">me, Mail</div>264 <div class="badge">2</div>265 </div>266 <div class="subject">Thank you for the gift</div>267 <div class="snippet">Recipient inbox full Your message couldn't b...</div>268 </div>269 <div class="meta">6:45 PM</div>270 <svg class="star" viewBox="0 0 60 60">271 <path d="M30 8 L35 22 L50 22 L38 32 L42 46 L30 38 L18 46 L22 32 L10 22 L25 22 Z"272 fill="none" stroke="#C5D4B7" stroke-width="4"/>273 </svg>274 </div>275 276 <!-- 2nd email -->277 <div class="email-item">278 <div class="avatar">M</div>279 <div class="email-content">280 <div class="sender-line">281 <div class="sender">me, Mail</div>282 <div class="badge">2</div>283 </div>284 <div class="subject">(no subject)</div>285 <div class="snippet">Recipient inbox full Your message couldn't b...</div>286 </div>287 <div class="meta">Oct 12</div>288 <svg class="star" viewBox="0 0 60 60">289 <path d="M30 8 L35 22 L50 22 L38 32 L42 46 L30 38 L18 46 L22 32 L10 22 L25 22 Z"290 fill="none" stroke="#C5D4B7" stroke-width="4"/>291 </svg>292 </div>293 294 <!-- 3rd email -->295 <div class="email-item">296 <div class="avatar">M</div>297 <div class="email-content">298 <div class="sender-line">299 <div class="sender">me, Mail</div>300 <div class="badge">2</div>301 </div>302 <div class="subject">(no subject)</div>303 <div class="snippet">Recipient inbox full Your message couldn't b...</div>304 </div>305 <div class="meta">Oct 11</div>306 <svg class="star" viewBox="0 0 60 60">307 <path d="M30 8 L35 22 L50 22 L38 32 L42 46 L30 38 L18 46 L22 32 L10 22 L25 22 Z"308 fill="none" stroke="#C5D4B7" stroke-width="4"/>309 </svg>310 </div>311 312 <!-- 4th email -->313 <div class="email-item">314 <div class="avatar">M</div>315 <div class="email-content">316 <div class="sender-line">317 <div class="sender">me, Mail</div>318 <div class="badge">2</div>319 </div>320 <div class="subject">Check out Men's Under Armour T-Shirt S...</div>321 <div class="snippet">Recipient inbox full Your message couldn't b...</div>322 </div>323 <div class="meta">Oct 6</div>324 <svg class="star" viewBox="0 0 60 60">325 <path d="M30 8 L35 22 L50 22 L38 32 L42 46 L30 38 L18 46 L22 32 L10 22 L25 22 Z"326 fill="none" stroke="#C5D4B7" stroke-width="4"/>327 </svg>328 </div>329 330 <!-- Highlighted selected email -->331 <div class="email-item selected">332 <div class="check-circle">333 <svg viewBox="0 0 60 60" width="60" height="60">334 <path d="M14 32 L26 44 L46 20" stroke="#1F2A18" stroke-width="8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>335 </svg>336 </div>337 <div class="email-content">338 <div class="sender-line">339 <div class="sender">Google Community Team</div>340 </div>341 <div class="subject">Quentin, take the next step by customizing...</div>342 <div class="snippet">Access your account features and services...</div>343 </div>344 <div class="meta">Oct 4</div>345 <svg class="star" viewBox="0 0 60 60">346 <path d="M30 8 L35 22 L50 22 L38 32 L42 46 L30 38 L18 46 L22 32 L10 22 L25 22 Z"347 fill="none" stroke="#C5D4B7" stroke-width="4"/>348 </svg>349 </div>350 351 </div>352 353 <!-- Compose button -->354 <div class="compose">355 <svg class="pen" viewBox="0 0 60 60">356 <path d="M14 46 L26 44 L48 22 L38 12 L16 34 Z" fill="none" stroke="#E8F1DB" stroke-width="6" stroke-linejoin="round"/>357 <rect x="12" y="46" width="18" height="6" rx="3" fill="#E8F1DB"/>358 </svg>359 <div>Compose</div>360 </div>361 362 <!-- Home indicator -->363 <div class="home-indicator"></div>364 365</div>366</body>367</html>