GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Gmail Dark</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #121212;13 color: #EDEDED;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 100px;23 padding: 24px 32px;24 box-sizing: border-box;25 color: #FFFFFF;26 font-size: 40px;27 display: flex;28 align-items: center;29 justify-content: space-between;30 }31 .status-icons {32 display: flex;33 gap: 24px;34 align-items: center;35 }36 .status-dot {37 width: 20px; height: 20px; background: #FFF; border-radius: 50%;38 }39 .icon-svg { width: 48px; height: 48px; fill: #FFFFFF; }40 41 /* Search bar */42 .search-wrap {43 position: absolute;44 top: 120px;45 left: 30px;46 right: 30px;47 height: 120px;48 display: flex;49 align-items: center;50 }51 .search-pill {52 flex: 1;53 height: 120px;54 background: #1F1F1F;55 border-radius: 60px;56 display: flex;57 align-items: center;58 padding: 0 32px;59 box-sizing: border-box;60 color: #B0B0B0;61 font-size: 44px;62 letter-spacing: 0.2px;63 }64 .hamburger {65 width: 60px; height: 60px; margin-right: 28px;66 }67 .search-text { flex: 1; }68 .account {69 width: 110px; height: 110px; border-radius: 55px;70 margin-left: 22px;71 background: #7A4EF4;72 color: #FFF;73 display: flex; align-items: center; justify-content: center;74 font-weight: bold; font-size: 48px;75 }76 77 .section-label {78 position: absolute;79 top: 280px;80 left: 32px;81 font-size: 40px;82 color: #BDBDBD;83 }84 85 /* Email list */86 .list {87 position: absolute;88 top: 340px;89 left: 0;90 width: 100%;91 padding-bottom: 260px;92 }93 .email-item {94 display: grid;95 grid-template-columns: 140px 1fr 180px 100px;96 align-items: center;97 column-gap: 16px;98 padding: 28px 32px;99 box-sizing: border-box;100 border-bottom: 1px solid rgba(255,255,255,0.06);101 }102 .avatar {103 width: 96px; height: 96px; border-radius: 48px;104 background: #F2B233; color: #2B2B2B;105 display: flex; align-items: center; justify-content: center;106 font-weight: bold; font-size: 44px;107 }108 .avatar.gray {109 background: #8E8E8E; color: #1B1B1B;110 }111 .sender {112 font-size: 44px; color: #EDEDED; font-weight: 700; line-height: 1.2;113 }114 .subject { font-size: 40px; color: #E0E0E0; margin-top: 6px; }115 .snippet { font-size: 36px; color: #9AA0A6; margin-top: 4px; }116 .date { font-size: 36px; color: #C7C7C7; text-align: right; }117 .star {118 display: flex; justify-content: center;119 }120 .star svg { width: 56px; height: 56px; }121 .star.gray svg { fill: #8A8A8A; }122 .star.blue svg { fill: #5EA3FF; }123 124 /* Drive chip */125 .chip {126 display: inline-flex; align-items: center;127 background: #2A2A2A; border: 1px solid #3D3D3D;128 color: #DADADA; border-radius: 40px; padding: 12px 22px;129 font-size: 34px; margin-top: 14px;130 }131 132 /* Floating compose */133 .compose-fab {134 position: absolute;135 right: 40px;136 bottom: 420px;137 width: 420px;138 height: 150px;139 background: #3A3F46;140 border-radius: 40px;141 display: flex; align-items: center; gap: 26px;142 padding: 0 40px;143 box-shadow: 0 6px 20px rgba(0,0,0,0.5);144 }145 .compose-fab span { font-size: 44px; color: #FFFFFF; }146 .pencil {147 width: 64px; height: 64px; fill: #FFFFFF;148 background: rgba(255,255,255,0.12);149 border-radius: 18px; padding: 14px; box-sizing: border-box;150 }151 152 /* Bottom bar */153 .bottom-bar {154 position: absolute;155 left: 0; right: 0; bottom: 0;156 height: 180px; background: #0F0F0F;157 border-top: 1px solid rgba(255,255,255,0.08);158 display: flex; align-items: center; justify-content: center; gap: 140px;159 }160 .nav-pill {161 width: 240px; height: 110px; background: #232323;162 border-radius: 60px; display: flex; align-items: center; justify-content: center;163 position: relative;164 }165 .nav-pill.active { background: #2C2C2C; }166 .badge {167 position: absolute; top: -8px; right: -8px;168 width: 80px; height: 80px; background: #EB4D4D; color: #FFF;169 border-radius: 40px; display: flex; align-items: center; justify-content: center;170 font-size: 34px; font-weight: bold;171 border: 4px solid #232323;172 }173 .nav-icon { width: 60px; height: 60px; fill: #FFFFFF; }174</style>175</head>176<body>177<div id="render-target">178 179 <!-- Status Bar -->180 <div class="status-bar">181 <div>8:19</div>182 <div class="status-icons">183 <div class="status-dot"></div>184 <div class="status-dot"></div>185 <div class="status-dot"></div>186 <div class="status-dot"></div>187 <!-- WiFi -->188 <svg class="icon-svg" viewBox="0 0 24 24">189 <path d="M12 18.5l2.5 2.5-2.5 2.5-2.5-2.5L12 18.5z" opacity="0.0"/>190 <path d="M12 18a2 2 0 0 0-1.4.6l-2.2 2.2 1.4 1.4 2.2-2.2a2 2 0 0 0 0-2.8z" fill="#FFFFFF"/>191 <path d="M2 8c2.9-2.7 6.6-4 10-4s7.1 1.3 10 4l-1.7 1.7C17.9 7.3 15.1 6.5 12 6.5S6.1 7.3 3.7 9.7L2 8z" />192 </svg>193 <!-- Battery -->194 <svg class="icon-svg" viewBox="0 0 24 24">195 <path d="M18 6h2v12h-2z" />196 <rect x="3" y="7" width="14" height="10" rx="2" ry="2" fill="#FFFFFF"></rect>197 </svg>198 </div>199 </div>200 201 <!-- Search Bar -->202 <div class="search-wrap">203 <div class="search-pill">204 <svg class="hamburger" viewBox="0 0 24 24">205 <path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z" fill="#BFBFBF"></path>206 </svg>207 <div class="search-text">Search in mail</div>208 </div>209 <div class="account">A</div>210 </div>211 212 <div class="section-label">Primary</div>213 214 <!-- Email List -->215 <div class="list">216 217 <!-- Item 1 -->218 <div class="email-item">219 <div class="avatar">N</div>220 <div>221 <div class="sender">Natalie Larson</div>222 <div class="subject">You have to try this recipe I found...</div>223 <div class="snippet">Hi, I just found this great recipe using the fr...</div>224 </div>225 <div class="date">Oct 5</div>226 <div class="star gray">227 <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.5 3 1.1-6.3L3 9.6l6.3-.9L12 3.7l2.7 5 6.3.9-4.6 4.4 1.1 6.3z"/></svg>228 </div>229 </div>230 231 <!-- Item 2 -->232 <div class="email-item">233 <div class="avatar">N</div>234 <div>235 <div class="sender">Natalie Larson</div>236 <div class="subject">(no subject)</div>237 <div class="snippet">https://www.kitchenstories.com/en/recipes/f...</div>238 </div>239 <div class="date">Oct 4</div>240 <div class="star gray">241 <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.5 3 1.1-6.3L3 9.6l6.3-.9L12 3.7l2.7 5 6.3.9-4.6 4.4 1.1 6.3z"/></svg>242 </div>243 </div>244 245 <!-- Item 3 -->246 <div class="email-item">247 <div class="avatar">N</div>248 <div>249 <div class="sender">Natalie Larson</div>250 <div class="subject">(no subject)</div>251 <div class="snippet">I found this restaurant on TheFork, what do...</div>252 </div>253 <div class="date">Oct 4</div>254 <div class="star gray">255 <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.5 3 1.1-6.3L3 9.6l6.3-.9L12 3.7l2.7 5 6.3.9-4.6 4.4 1.1 6.3z"/></svg>256 </div>257 </div>258 259 <!-- Item 4 (starred blue) -->260 <div class="email-item">261 <div class="avatar">N</div>262 <div>263 <div class="sender">Natalie Larson</div>264 <div class="subject">Check out Hard Rock Cafe - Amsterdam on...</div>265 <div class="snippet">I think you'd like this restaurant I found on O...</div>266 </div>267 <div class="date">Oct 4</div>268 <div class="star blue">269 <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.5 3 1.1-6.3L3 9.6l6.3-.9L12 3.7l2.7 5 6.3.9-4.6 4.4 1.1 6.3z"/></svg>270 </div>271 </div>272 273 <!-- Item 5 (Spanish app invite) -->274 <div class="email-item">275 <div class="avatar gray">276 <svg viewBox="0 0 24 24" class="nav-icon"><path d="M12 12c2.2 0 4-1.8 4-4s-1.8-4-4-4-4 1.8-4 4 1.8 4 4 4zm0 2c-3.3 0-10 1.7-10 5v2h20v-2c0-3.3-6.7-5-10-5z" fill="#1B1B1B"/></svg>277 </div>278 <div>279 <div class="sender">Pinta Libre</div>280 <div class="subject">Un amigo te invitó a pintear 🍻</div>281 <div class="snippet">Tu salida la armás vos</div>282 </div>283 <div class="date">Oct 3</div>284 <div class="star gray">285 <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.5 3 1.1-6.3L3 9.6l6.3-.9L12 3.7l2.7 5 6.3.9-4.6 4.4 1.1 6.3z"/></svg>286 </div>287 </div>288 289 <!-- Item 6 (Drive share) -->290 <div class="email-item">291 <div class="avatar" style="background:#F47CAB;color:#2B2B2B;">N</div>292 <div>293 <div class="sender">Natalie Larson (via Google Drive)</div>294 <div class="subject">Item shared with you: "01. A Voyage to th..."</div>295 <div class="snippet">Natalie Larson shared an item Natalie Larso...</div>296 <div class="chip">PDF — 01. A Voyage to ...</div>297 </div>298 <div class="date">Oct 3</div>299 <div class="star gray">300 <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.5 3 1.1-6.3L3 9.6l6.3-.9L12 3.7l2.7 5 6.3.9-4.6 4.4 1.1 6.3z"/></svg>301 </div>302 </div>303 304 <!-- Item 7 -->305 <div class="email-item">306 <div class="avatar">N</div>307 <div>308 <div class="sender">Natalie Larson</div>309 <div class="subject">(no subject)</div>310 <div class="snippet">https://www.ebav.com/itm/305159709874?m...</div>311 </div>312 <div class="date">Sep 29</div>313 <div class="star gray">314 <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.5 3 1.1-6.3L3 9.6l6.3-.9L12 3.7l2.7 5 6.3.9-4.6 4.4 1.1 6.3z"/></svg>315 </div>316 </div>317 318 </div>319 320 <!-- Compose floating button -->321 <div class="compose-fab">322 <svg class="pencil" viewBox="0 0 24 24">323 <path d="M3 17.2V21h3.8l11-11-3.8-3.8-11 11zM20.7 7.3c.4-.4.4-1 0-1.4L18.1 3.3c-.4-.4-1-.4-1.4 0l-1.7 1.7 3.8 3.8 1.9-1.5z" fill="#FFFFFF"/>324 </svg>325 <span>Compose</span>326 </div>327 328 <!-- Bottom navigation bar -->329 <div class="bottom-bar">330 <div class="nav-pill active">331 <svg class="nav-icon" viewBox="0 0 24 24"><path d="M4 4h16v16H4z" opacity="0"/>332 <path d="M2 6h20v2H2zm3 4h14v10H5z" /></svg>333 <div class="badge">17</div>334 </div>335 <div class="nav-pill">336 <svg class="nav-icon" viewBox="0 0 24 24"><path d="M4 5h16v14H4z" opacity="0"/>337 <path d="M4 7h12l4 4v8H4V7z"/></svg>338 </div>339 </div>340 341</div>342</body>343</html>