GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Gmail Mobile UI Mock</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#121212; color:#fff;11 }12 13 /* Status bar */14 .status-bar {15 position:absolute; top:0; left:0; right:0;16 height:90px; padding:0 30px;17 display:flex; align-items:center; justify-content:space-between;18 color:#fff; font-size:32px;19 }20 .status-right { display:flex; align-items:center; gap:24px; }21 .status-dot { width:20px; height:20px; background:#fff; border-radius:50%; opacity:.2; }22 .battery { font-size:28px; color:#ffffff; opacity:.9; }23 24 /* Search bar */25 .search-wrap { position:absolute; top:110px; left:30px; right:30px; }26 .search-bar {27 height:120px; border-radius:60px; background:#242424;28 display:flex; align-items:center; padding:0 30px; gap:28px;29 box-shadow: 0 2px 0 rgba(255,255,255,0.05) inset;30 }31 .hamburger { width:54px; height:54px; }32 .hamburger svg { width:100%; height:100%; }33 .search-text { flex:1; color:#bdbdbd; font-size:36px; }34 .profile {35 width:92px; height:92px; border-radius:50%;36 background:#4a3c34; display:flex; align-items:center; justify-content:center;37 font-weight:bold; font-size:42px; position:relative;38 }39 .badge {40 position:absolute; right:-2px; bottom:-2px;41 width:36px; height:36px; border-radius:50%;42 background:#F5C542; color:#222; font-size:26px; font-weight:bold;43 display:flex; align-items:center; justify-content:center;44 border:3px solid #121212;45 }46 47 .section-title {48 position:absolute; top:260px; left:30px;49 font-size:38px; color:#bdbdbd;50 }51 52 /* Promotions block */53 .promotion-block {54 position:absolute; top:340px; left:30px; right:30px;55 padding:34px 30px; border-bottom:1px solid #2a2a2a;56 display:flex; align-items:center; justify-content:space-between;57 }58 .promo-left { display:flex; align-items:flex-start; gap:26px; }59 .tag-icon {60 width:52px; height:52px; border-radius:10px; background:#213f2a;61 display:flex; align-items:center; justify-content:center;62 border:1px solid #255933;63 }64 .promo-text { line-height:1.35; }65 .promo-title { font-size:44px; font-weight:700; color:#ffffff; }66 .promo-sub { font-size:36px; color:#cfcfcf; margin-top:6px; opacity:.8; }67 .pill {68 background:#49a96b; color:#102917; padding:12px 22px;69 border-radius:28px; font-size:32px; font-weight:700;70 }71 72 /* Email list */73 .email-list { position:absolute; top:470px; left:30px; right:30px; }74 .email-item {75 display:grid; grid-template-columns:120px 1fr 140px;76 align-items:center; padding:28px 0; border-bottom:1px solid #2a2a2a;77 }78 .avatar {79 width:92px; height:92px; border-radius:50%;80 background:#6b4db7; display:flex; align-items:center; justify-content:center;81 font-size:42px; font-weight:bold;82 }83 .avatar.gray { background:#3a3a3a; color:#ddd; }84 .avatar.yellow { background:#d9aa28; color:#272727; }85 .details { padding-right:20px; }86 .from { font-size:40px; font-weight:700; margin-bottom:8px; display:flex; align-items:center; gap:12px; }87 .count { color:#bdbdbd; font-weight:700; }88 .subject { font-size:38px; color:#ffffff; }89 .preview { font-size:34px; color:#cfcfcf; opacity:.85; margin-top:6px; }90 .meta { display:flex; align-items:center; justify-content:flex-end; gap:20px; }91 .date { color:#bdbdbd; font-size:32px; }92 .star { width:54px; height:54px; opacity:.7; }93 .star svg { width:100%; height:100%; }94 95 /* Compose bubble */96 .compose {97 position:absolute; right:40px; bottom:850px;98 background:#3a3a3a; border-radius:36px; padding:26px 30px;99 display:flex; align-items:center; gap:22px; box-shadow:0 10px 16px rgba(0,0,0,.35);100 }101 .compose-icon { width:52px; height:52px; }102 .compose-text { font-size:40px; font-weight:700; }103 104 /* Snackbar */105 .snackbar {106 position:absolute; left:30px; right:30px; bottom:540px;107 background:#e6e6e6; color:#222; border-radius:20px;108 display:flex; align-items:center; justify-content:space-between;109 padding:28px 30px; font-size:38px; box-shadow:0 6px 20px rgba(0,0,0,.4);110 }111 .snackbar .undo { color:#2b6fd3; font-weight:700; }112 113 /* Bottom nav */114 .bottom-bar {115 position:absolute; left:0; right:0; bottom:180px; height:150px;116 background:#1c1c1c; display:flex; align-items:center; justify-content:center; gap:160px;117 border-top:1px solid #2a2a2a;118 }119 .nav-icon { width:96px; height:96px; border-radius:20px; display:flex; align-items:center; justify-content:center; color:#fff; }120 .nav-icon svg { width:68px; height:68px; }121 .badge-count {122 position:absolute; transform:translate(42px,-42px);123 background:#d64b4b; color:#fff; border-radius:26px; font-weight:700;124 padding:6px 14px; font-size:28px; border:3px solid #1c1c1c;125 }126 127 .home-pill {128 position:absolute; left:50%; bottom:80px; transform:translateX(-50%);129 width:280px; height:18px; border-radius:20px; background:#808080; opacity:.55;130 }131</style>132</head>133<body>134<div id="render-target">135 136 <!-- Status Bar -->137 <div class="status-bar">138 <div>6:39</div>139 <div class="status-right">140 <div class="status-dot"></div>141 <div class="status-dot"></div>142 <div class="status-dot"></div>143 <div class="battery">100%</div>144 </div>145 </div>146 147 <!-- Search Bar -->148 <div class="search-wrap">149 <div class="search-bar">150 <div class="hamburger">151 <svg viewBox="0 0 24 24" fill="#bbb">152 <rect x="3" y="5" width="18" height="2"></rect>153 <rect x="3" y="11" width="14" height="2"></rect>154 <rect x="3" y="17" width="18" height="2"></rect>155 </svg>156 </div>157 <div class="search-text">Search in mail</div>158 <div class="profile">F159 <div class="badge">!</div>160 </div>161 </div>162 </div>163 164 <div class="section-title">Primary</div>165 166 <!-- Promotions Row -->167 <div class="promotion-block">168 <div class="promo-left">169 <div class="tag-icon">170 <svg viewBox="0 0 24 24" fill="#58c27c">171 <path d="M3 7v6l8 8 10-10-8-8H7a4 4 0 0 0-4 4z"></path>172 </svg>173 </div>174 <div class="promo-text">175 <div class="promo-title">Promotions</div>176 <div class="promo-sub">Kitchen Stories, Scribd, Emma at Si...</div>177 </div>178 </div>179 <div class="pill">10 new</div>180 </div>181 182 <!-- Email List -->183 <div class="email-list">184 185 <div class="email-item">186 <div class="avatar">Q</div>187 <div class="details">188 <div class="from">me, Quentin <span class="count">3</span></div>189 <div class="subject">Important meeting time</div>190 <div class="preview">Ok, see you then. On Fri, Oct 13, 2023, 8:48...</div>191 </div>192 <div class="meta">193 <div class="date">Oct 13</div>194 <div class="star">195 <svg viewBox="0 0 24 24" stroke="#cfcfcf" fill="none" stroke-width="1.8">196 <path d="M12 17.3l-5.6 3 1.2-6.4-4.6-4 6.4-.9L12 2l2.6 6 6.4.9-4.6 4 1.2 6.4z"></path>197 </svg>198 </div>199 </div>200 </div>201 202 <div class="email-item">203 <div class="avatar gray"></div>204 <div class="details">205 <div class="from">Kitchen Stories</div>206 <div class="subject">Good news is just one click away!</div>207 <div class="preview">Please confirm your registration to receive ...</div>208 </div>209 <div class="meta">210 <div class="date">Oct 11</div>211 <div class="star">212 <svg viewBox="0 0 24 24" stroke="#cfcfcf" fill="none" stroke-width="1.8">213 <path d="M12 17.3l-5.6 3 1.2-6.4-4.6-4 6.4-.9L12 2l2.6 6 6.4.9-4.6 4 1.2 6.4z"></path>214 </svg>215 </div>216 </div>217 </div>218 219 <div class="email-item">220 <div class="avatar yellow">M</div>221 <div class="details">222 <div class="from">me, Mail <span class="count">2</span></div>223 <div class="subject">(no subject)</div>224 <div class="preview">Address not found Your message wasn't deli...</div>225 </div>226 <div class="meta">227 <div class="date">Oct 4</div>228 <div class="star">229 <svg viewBox="0 0 24 24" stroke="#cfcfcf" fill="none" stroke-width="1.8">230 <path d="M12 17.3l-5.6 3 1.2-6.4-4.6-4 6.4-.9L12 2l2.6 6 6.4.9-4.6 4 1.2 6.4z"></path>231 </svg>232 </div>233 </div>234 </div>235 236 <div class="email-item">237 <div class="avatar gray"></div>238 <div class="details">239 <div class="from">Delivery Much</div>240 <div class="subject">Código de verificação</div>241 <div class="preview">Delivery Much Delivery Much Bem-vindo a...</div>242 </div>243 <div class="meta">244 <div class="date">Oct 4</div>245 <div class="star">246 <svg viewBox="0 0 24 24" stroke="#cfcfcf" fill="none" stroke-width="1.8">247 <path d="M12 17.3l-5.6 3 1.2-6.4-4.6-4 6.4-.9L12 2l2.6 6 6.4.9-4.6 4 1.2 6.4z"></path>248 </svg>249 </div>250 </div>251 </div>252 253 <div class="email-item">254 <div class="avatar gray"></div>255 <div class="details">256 <div class="from">Scribd</div>257 <div class="subject">Welcome to Scribd!</div>258 <div class="preview">Never stop growing with access to everythin...</div>259 </div>260 <div class="meta">261 <div class="date">Sep 26</div>262 <div class="star">263 <svg viewBox="0 0 24 24" stroke="#cfcfcf" fill="none" stroke-width="1.8">264 <path d="M12 17.3l-5.6 3 1.2-6.4-4.6-4 6.4-.9L12 2l2.6 6 6.4.9-4.6 4 1.2 6.4z"></path>265 </svg>266 </div>267 </div>268 </div>269 270 <div class="email-item">271 <div class="avatar gray"></div>272 <div class="details">273 <div class="from">Scribd</div>274 <div class="subject">Fabio, please verify your e...</div>275 <div class="preview">Didn't create a Scribd account? Please cont...</div>276 </div>277 <div class="meta">278 <div class="date">Sep 26</div>279 <div class="star">280 <svg viewBox="0 0 24 24" stroke="#cfcfcf" fill="none" stroke-width="1.8">281 <path d="M12 17.3l-5.6 3 1.2-6.4-4.6-4 6.4-.9L12 2l2.6 6 6.4.9-4.6 4 1.2 6.4z"></path>282 </svg>283 </div>284 </div>285 </div>286 287 </div>288 289 <!-- Compose floating bubble -->290 <div class="compose">291 <div class="compose-icon">292 <svg viewBox="0 0 24 24" fill="#fff">293 <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>294 </svg>295 </div>296 <div class="compose-text">Compose</div>297 </div>298 299 <!-- Snackbar -->300 <div class="snackbar">301 <div>Moved to Promotions</div>302 <div class="undo">Undo</div>303 </div>304 305 <!-- Bottom navigation -->306 <div class="bottom-bar">307 <div class="nav-icon" style="position:relative;">308 <svg viewBox="0 0 24 24" fill="#ffffff">309 <path d="M12 13l9-7H3l9 7zM3 8v10h18V8l-9 7-9-7z"></path>310 </svg>311 <div class="badge-count">4</div>312 </div>313 <div class="nav-icon">314 <svg viewBox="0 0 24 24" fill="#9e9e9e">315 <path d="M17 10.5V6l-7 4.5v3L17 18v-4.5l4 2.5V8l-4 2.5z"></path>316 </svg>317 </div>318 </div>319 320 <div class="home-pill"></div>321 322</div>323</body>324</html>