GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mail UI - Dark</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #121212; color: #EAEAEA;12 }13 14 /* Status bar */15 .status-bar {16 position: absolute; top: 0; left: 0; width: 100%; height: 110px;17 padding: 0 32px; display: flex; align-items: center; justify-content: space-between;18 color: #fff; font-weight: 600; font-size: 38px;19 }20 .status-icons { display: flex; align-items: center; gap: 26px; }21 .status-icons svg { fill: none; stroke: #ffffff; stroke-width: 4px; }22 23 /* Top search header */24 .top-header {25 position: absolute; top: 110px; left: 0; width: 100%;26 padding: 22px 28px; box-sizing: border-box;27 display: flex; align-items: center; gap: 24px;28 }29 .hamburger { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }30 .search-bar {31 flex: 1; height: 104px; background: #2A2F33; border-radius: 24px;32 display: flex; align-items: center; padding: 0 28px; box-sizing: border-box;33 color: #9AA0A6; font-size: 36px;34 }35 .profile {36 width: 84px; height: 84px; border-radius: 50%; background: #7A645A;37 display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 40px;38 }39 40 .section-title {41 position: absolute; top: 250px; left: 32px;42 color: #cfcfcf; font-size: 34px; font-weight: 600;43 }44 45 /* Email list */46 .list { position: absolute; top: 310px; left: 0; width: 100%; }47 .email {48 display: flex; align-items: flex-start; gap: 26px;49 padding: 30px 32px; box-sizing: border-box;50 border-bottom: 1px solid rgba(255,255,255,0.06);51 }52 .avatar {53 width: 88px; height: 88px; border-radius: 50%;54 display: flex; align-items: center; justify-content: center;55 font-weight: 700; font-size: 44px; color: #111;56 flex-shrink: 0;57 }58 .avatar.yellow { background: #F2C94C; }59 .avatar.purple { background: #B99AEC; color: #111; }60 .avatar.green { background: #6FCF97; }61 .avatar.gray { background: #9AA0A6; color: #111; position: relative; }62 .avatar.gray svg { width: 48px; height: 48px; }63 64 .content { flex: 1; min-width: 0; }65 .row-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }66 .sender { font-size: 38px; font-weight: 700; color: #ffffff; }67 .subject { font-size: 34px; font-weight: 700; color: #ffffff; margin-top: 6px; }68 .snippet { font-size: 30px; color: #A7A7A7; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }69 70 .right {71 width: 150px; display: flex; flex-direction: column; align-items: flex-end; gap: 20px; flex-shrink: 0;72 }73 .time { font-size: 30px; color: #cfcfcf; }74 .star-btn svg { width: 46px; height: 46px; stroke: #cfcfcf; fill: none; stroke-width: 4px; }75 76 /* Attachment chips */77 .attachments { display: flex; gap: 18px; margin-top: 16px; flex-wrap: wrap; }78 .chip-img {79 height: 64px; min-width: 260px; padding: 0 18px; border-radius: 32px;80 background: #E0E0E0; border: 1px solid #BDBDBD;81 display: inline-flex; align-items: center; color: #757575; font-size: 28px;82 }83 .chip-img::before {84 content: "🖼️"; margin-right: 12px; font-size: 28px;85 }86 87 /* Bottom navigation */88 .bottom-bar {89 position: absolute; left: 0; bottom: 0; width: 100%; height: 170px;90 background: #1B1B1B; border-top: 1px solid rgba(255,255,255,0.06);91 display: flex; align-items: center; justify-content: space-around;92 }93 .nav-item { color: #cfcfcf; display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 26px; }94 .nav-icon {95 width: 90px; height: 70px; background: #2A2F33; border-radius: 18px;96 display: flex; align-items: center; justify-content: center; position: relative;97 }98 .badge {99 position: absolute; top: -10px; left: -10px; background: #DB4D4D; color: #fff;100 width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center;101 font-size: 28px; font-weight: 700; border: 4px solid #1B1B1B;102 }103 .home-indicator {104 position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);105 width: 220px; height: 12px; background: #8e8e8e; border-radius: 6px; opacity: 0.6;106 }107 108 /* Floating compose */109 .compose {110 position: absolute; right: 40px; bottom: 220px;111 height: 116px; padding: 0 40px; border-radius: 26px;112 background: #3E5162; color: #fff; display: flex; align-items: center; gap: 22px;113 box-shadow: 0 8px 20px rgba(0,0,0,0.35);114 font-size: 40px; font-weight: 600;115 }116 .compose .pencil { width: 44px; height: 44px; }117</style>118</head>119<body>120<div id="render-target">121 122 <!-- Status Bar -->123 <div class="status-bar">124 <div>10:20</div>125 <div class="status-icons">126 <!-- Signal bars -->127 <svg width="48" height="32" viewBox="0 0 48 32">128 <rect x="2" y="18" width="6" height="12" />129 <rect x="12" y="14" width="6" height="16" />130 <rect x="22" y="10" width="6" height="20" />131 <rect x="32" y="6" width="6" height="24" />132 </svg>133 <!-- WiFi icon -->134 <svg width="48" height="32" viewBox="0 0 48 32">135 <path d="M2 10c10-8 34-8 44 0" />136 <path d="M8 16c7-5 25-5 32 0" />137 <path d="M16 22c4-3 12-3 16 0" />138 <circle cx="24" cy="26" r="2" fill="#fff"></circle>139 </svg>140 <!-- Battery -->141 <svg width="64" height="32" viewBox="0 0 64 32">142 <rect x="2" y="6" width="54" height="20" rx="4"></rect>143 <rect x="58" y="12" width="4" height="8" rx="2"></rect>144 <rect x="6" y="10" width="42" height="12" fill="#ffffff"></rect>145 </svg>146 </div>147 </div>148 149 <!-- Search Header -->150 <div class="top-header">151 <div class="hamburger">152 <svg width="54" height="54" viewBox="0 0 54 54">153 <path d="M6 14h42M6 27h42M6 40h42" stroke="#ffffff" stroke-width="6" />154 </svg>155 </div>156 <div class="search-bar">Search in mail</div>157 <div class="profile">I</div>158 </div>159 160 <div class="section-title">Primary</div>161 162 <!-- Email List -->163 <div class="list">164 165 <!-- Email 1 -->166 <div class="email">167 <div class="avatar yellow">G</div>168 <div class="content">169 <div class="row-top">170 <div class="sender">Google</div>171 </div>172 <div class="subject">Security alert</div>173 <div class="snippet">Your password was changed lucaskramer73...</div>174 </div>175 <div class="right">176 <div class="time">6:45 PM</div>177 <div class="star-btn">178 <svg viewBox="0 0 24 24">179 <polygon points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,17 5.5,21 7.5,13.5 2,9 9,9"></polygon>180 </svg>181 </div>182 </div>183 </div>184 185 <!-- Email 2 -->186 <div class="email">187 <div class="avatar yellow">G</div>188 <div class="content">189 <div class="row-top">190 <div class="sender">Google</div>191 </div>192 <div class="subject">Your Google Account was recovered suc...</div>193 <div class="snippet">Account recovered successfully lucaskrame...</div>194 </div>195 <div class="right">196 <div class="time">6:45 PM</div>197 <div class="star-btn">198 <svg viewBox="0 0 24 24">199 <polygon points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,17 5.5,21 7.5,13.5 2,9 9,9"></polygon>200 </svg>201 </div>202 </div>203 </div>204 205 <!-- Email 3 with attachments -->206 <div class="email">207 <div class="avatar purple">C</div>208 <div class="content">209 <div class="row-top">210 <div class="sender">Cerebra Research</div>211 </div>212 <div class="subject">(no subject)</div>213 <div class="snippet">(no body)</div>214 <div class="attachments">215 <div class="chip-img">[IMG: Attachment]</div>216 <div class="chip-img">[IMG: Attachment]</div>217 </div>218 </div>219 <div class="right">220 <div class="time">5:35 PM</div>221 <div class="star-btn">222 <svg viewBox="0 0 24 24">223 <polygon points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,17 5.5,21 7.5,13.5 2,9 9,9"></polygon>224 </svg>225 </div>226 </div>227 </div>228 229 <!-- Email 4 -->230 <div class="email">231 <div class="avatar gray">232 <svg viewBox="0 0 48 48">233 <circle cx="24" cy="18" r="10" fill="#111"></circle>234 <path d="M8 42c4-10 28-10 32 0" fill="#111"></path>235 </svg>236 </div>237 <div class="content">238 <div class="row-top">239 <div class="sender">Cerebra Research</div>240 </div>241 <div class="subject">Shopping list</div>242 <div class="snippet">Books Pen Stamps Plants Desk Chair</div>243 </div>244 <div class="right">245 <div class="time">Sep 26</div>246 <div class="star-btn">247 <svg viewBox="0 0 24 24">248 <polygon points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,17 5.5,21 7.5,13.5 2,9 9,9"></polygon>249 </svg>250 </div>251 </div>252 </div>253 254 <!-- Email 5 -->255 <div class="email">256 <div class="avatar gray">257 <svg viewBox="0 0 48 48">258 <circle cx="24" cy="18" r="10" fill="#111"></circle>259 <path d="M8 42c4-10 28-10 32 0" fill="#111"></path>260 </svg>261 </div>262 <div class="content">263 <div class="row-top">264 <div class="sender">Cerebra Research</div>265 </div>266 <div class="subject">Q29V+W4R New York, USA</div>267 <div class="snippet">https://goo.gl/maps/qtGq4bUVTtcZmu9x6</div>268 </div>269 <div class="right">270 <div class="time">Sep 25</div>271 <div class="star-btn">272 <svg viewBox="0 0 24 24">273 <polygon points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,17 5.5,21 7.5,13.5 2,9 9,9"></polygon>274 </svg>275 </div>276 </div>277 </div>278 279 <!-- Email 6 -->280 <div class="email">281 <div class="avatar green">G</div>282 <div class="content">283 <div class="row-top">284 <div class="sender">Google Pixel</div>285 </div>286 <div class="subject">Lucas, get to know your new Pixel</div>287 <div class="snippet">See quick tips, helpful apps and more</div>288 </div>289 <div class="right">290 <div class="time">Sep 22</div>291 <div class="star-btn">292 <svg viewBox="0 0 24 24">293 <polygon points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,17 5.5,21 7.5,13.5 2,9 9,9"></polygon>294 </svg>295 </div>296 </div>297 </div>298 299 <!-- Email 7 -->300 <div class="email" style="padding-bottom: 140px;">301 <div class="avatar yellow">G</div>302 <div class="content">303 <div class="row-top">304 <div class="sender">Google Community Team</div>305 </div>306 <div class="subject">Lucas, finish setting up yo...</div>307 <div class="snippet">Hi Lucas, Welcome to Google. Your new acc...</div>308 </div>309 <div class="right">310 <div class="time">Sep 22</div>311 <div class="star-btn">312 <svg viewBox="0 0 24 24">313 <polygon points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,17 5.5,21 7.5,13.5 2,9 9,9"></polygon>314 </svg>315 </div>316 </div>317 </div>318 319 </div>320 321 <!-- Floating compose pill -->322 <div class="compose">323 <svg class="pencil" viewBox="0 0 24 24">324 <path d="M4 18l6-2 8-8-4-4-8 8-2 6z" fill="#fff"></path>325 </svg>326 <div>Compose</div>327 </div>328 329 <!-- Bottom Navigation -->330 <div class="bottom-bar">331 <div class="nav-item">332 <div class="nav-icon">333 <div class="badge">4</div>334 <svg width="40" height="40" viewBox="0 0 48 48">335 <rect x="6" y="10" width="36" height="24" rx="4" fill="none" stroke="#cfcfcf" stroke-width="4"></rect>336 <path d="M8 12l16 12 16-12" fill="none" stroke="#cfcfcf" stroke-width="4"></path>337 </svg>338 </div>339 <div>Mail</div>340 </div>341 <div class="nav-item">342 <div class="nav-icon">343 <svg width="40" height="40" viewBox="0 0 48 48">344 <rect x="8" y="12" width="28" height="20" rx="4" fill="none" stroke="#cfcfcf" stroke-width="4"></rect>345 <polygon points="38,16 46,20 46,24 38,28" fill="none" stroke="#cfcfcf" stroke-width="4"></polygon>346 </svg>347 </div>348 <div>Meet</div>349 </div>350 <div class="home-indicator"></div>351 </div>352 353</div>354</body>355</html>