GD-ML/AndroidCode
13.4k
1<html>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, sans-serif; }7 #render-target {8 width: 1080px; height: 2400px;9 position: relative; overflow: hidden;10 background: #F8FAF7; color: #222;11 }12 /* Status bar (very simple) */13 .status-bar {14 height: 80px;15 background: transparent;16 }17 /* Top search header */18 .top-search {19 padding: 20px 30px 10px 30px;20 }21 .search-field {22 height: 110px; border-radius: 55px;23 background: #ECF0EA;24 display: flex; align-items: center;25 padding: 0 30px;26 }27 .hamburger {28 width: 72px; height: 72px; border-radius: 36px;29 display:flex; align-items:center; justify-content:center;30 }31 .search-text {32 flex: 1; font-size: 42px; color: #667; padding-left: 20px;33 }34 .avatar {35 width: 86px; height: 86px; border-radius: 43px;36 background: #B4937F; color: #fff; display:flex; align-items:center; justify-content:center;37 font-weight: bold; font-size: 44px;38 }39 .section-title {40 font-size: 40px; color: #666; margin: 20px 40px 10px 40px;41 }42 43 /* Promotions chip row */44 .promo-row {45 display: flex; align-items: center;46 padding: 24px 40px; background: #fff;47 }48 .tag-icon {49 width: 60px; height: 60px; border-radius: 18px;50 background: #E5F4E3; display:flex; align-items:center; justify-content:center;51 margin-right: 26px;52 }53 .promo-text { flex: 1; }54 .promo-text .title { font-size: 44px; font-weight: 700; }55 .promo-text .sub { font-size: 36px; color: #333; margin-top: 10px; }56 .pill {57 background: #7DCB8C; color: #fff; border-radius: 32px;58 padding: 16px 26px; font-size: 34px; font-weight: 700;59 }60 61 /* Email list */62 .list { margin-top: 14px; }63 .mail-item {64 background: #fff; padding: 28px 36px;65 display: flex; align-items: flex-start; border-bottom: 1px solid #E6E6E6;66 }67 .circle {68 width: 96px; height: 96px; border-radius: 48px;69 display:flex; align-items:center; justify-content:center;70 color:#fff; font-size:46px; font-weight:700; flex-shrink:0;71 margin-right: 24px;72 }73 .circle.purple { background:#9C8FE0; }74 .circle.green { background:#9CCC65; }75 .circle.yellow { background:#F2C44D; color:#6B4E00; }76 .circle.mint { background:#9ED3A6; }77 .mail-content { flex: 1; }78 .line1 {79 display:flex; align-items:center; gap:12px;80 font-size: 44px; font-weight: 700; color: #222;81 }82 .count { font-size: 36px; color:#666; font-weight:600; }83 .subject { font-size: 38px; color:#333; margin-top: 16px; }84 .snippet { font-size: 34px; color:#666; margin-top: 10px; }85 .right-meta {86 width: 170px; text-align: right; flex-shrink:0;87 }88 .date { font-size: 34px; color:#666; margin-bottom: 18px; }89 .star {90 width: 56px; height: 56px; margin-left: auto;91 }92 93 /* Floating Compose */94 .compose-btn {95 position: absolute; right: 40px; bottom: 220px;96 background: #CFE5CF; border-radius: 36px;97 height: 140px; width: 480px;98 display:flex; align-items:center; justify-content: center;99 box-shadow: 0 10px 24px rgba(0,0,0,0.15);100 gap: 22px; font-size: 44px; color:#0F3D1A; font-weight:700;101 }102 .compose-icon {103 width: 66px; height: 66px; border-radius: 14px;104 display:flex; align-items:center; justify-content:center;105 background: rgba(0,0,0,0.08);106 }107 108 /* Bottom mini bar */109 .bottom-bar {110 position: absolute; left: 0; right: 0; bottom: 70px;111 height: 120px; display:flex; align-items:center; justify-content:center;112 }113 .mail-pill {114 position: absolute; left: 160px; bottom: 80px;115 background: #DCEAD8; width: 180px; height: 90px;116 border-radius: 45px; display:flex; align-items:center; justify-content:center;117 color:#1A3E1A; font-weight:800; font-size:42px;118 box-shadow: 0 6px 14px rgba(0,0,0,0.12);119 }120 .meet-icon {121 position: absolute; left: 520px; bottom: 80px;122 width: 80px; height: 80px; border-radius: 18px;123 background:#E9ECE7; display:flex; align-items:center; justify-content:center;124 box-shadow: 0 2px 8px rgba(0,0,0,0.1);125 }126</style>127</head>128<body>129<div id="render-target">130 <div class="status-bar"></div>131 132 <div class="top-search">133 <div class="search-field">134 <div class="hamburger">135 <svg width="48" height="34">136 <rect x="0" y="0" width="48" height="6" fill="#666"></rect>137 <rect x="0" y="14" width="48" height="6" fill="#666"></rect>138 <rect x="0" y="28" width="48" height="6" fill="#666"></rect>139 </svg>140 </div>141 <div class="search-text">Search in mail</div>142 <div class="avatar">C</div>143 </div>144 </div>145 146 <div class="section-title">Primary</div>147 148 <!-- Promotions row -->149 <div class="promo-row">150 <div class="tag-icon">151 <svg width="40" height="40" viewBox="0 0 24 24">152 <path d="M3 7v6l7 7 9-9-7-7H3z" fill="#67B66E"></path>153 <circle cx="7" cy="9" r="2" fill="#fff"></circle>154 </svg>155 </div>156 <div class="promo-text">157 <div class="title">Promotions</div>158 <div class="sub">KAYAK, KAYAK, Expedia.com, Expedia</div>159 </div>160 <div class="pill">21 new</div>161 </div>162 163 <div class="list">164 <!-- Zomato -->165 <div class="mail-item">166 <div class="circle purple">Z</div>167 <div class="mail-content">168 <div class="line1">Zomato, me <span class="count">2</span></div>169 <div class="subject">Login Alert for your Zomato account!</div>170 <div class="snippet">----------- Forwarded message ---------- Fr...</div>171 </div>172 <div class="right-meta">173 <div class="date">Jun 15</div>174 <svg class="star" viewBox="0 0 24 24">175 <path d="M12 3l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 4 1.2-6.9-5-4.8 6.9-1L12 3z" fill="none" stroke="#999" stroke-width="1.5"></path>176 </svg>177 </div>178 </div>179 180 <!-- Cerebra, me -->181 <div class="mail-item">182 <div class="circle green">C</div>183 <div class="mail-content">184 <div class="line1">Cerebra, me <span class="count">2</span></div>185 <div class="subject">Reminder App</div>186 <div class="snippet">===================== Reminder in 3 day...</div>187 </div>188 <div class="right-meta">189 <div class="date">Jun 12</div>190 <svg class="star" viewBox="0 0 24 24">191 <path d="M12 3l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 4 1.2-6.9-5-4.8 6.9-1L12 3z" fill="none" stroke="#999" stroke-width="1.5"></path>192 </svg>193 </div>194 </div>195 196 <!-- Cerebra Research -->197 <div class="mail-item">198 <div class="circle green">C</div>199 <div class="mail-content">200 <div class="line1">Cerebra Research</div>201 <div class="subject">Reminder App</div>202 <div class="snippet">===================== Reminder in 3 day...</div>203 </div>204 <div class="right-meta">205 <div class="date">Jun 12</div>206 <svg class="star" viewBox="0 0 24 24">207 <path d="M12 3l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 4 1.2-6.9-5-4.8 6.9-1L12 3z" fill="none" stroke="#999" stroke-width="1.5"></path>208 </svg>209 </div>210 </div>211 212 <!-- Cerebra Research 2 -->213 <div class="mail-item">214 <div class="circle green">C</div>215 <div class="mail-content">216 <div class="line1">Cerebra Research</div>217 <div class="subject">Reminder App</div>218 <div class="snippet">===================== Reminder in 3 day...</div>219 </div>220 <div class="right-meta">221 <div class="date">Jun 12</div>222 <svg class="star" viewBox="0 0 24 24">223 <path d="M12 3l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 4 1.2-6.9-5-4.8 6.9-1L12 3z" fill="none" stroke="#999" stroke-width="1.5"></path>224 </svg>225 </div>226 </div>227 228 <!-- Google Security alert -->229 <div class="mail-item">230 <div class="circle yellow">G</div>231 <div class="mail-content">232 <div class="line1">Google</div>233 <div class="subject">Security alert</div>234 <div class="snippet">A new sign-in on Google Pixel 5a 5G dbwscr...</div>235 </div>236 <div class="right-meta">237 <div class="date">Jun 8</div>238 <svg class="star" viewBox="0 0 24 24">239 <path d="M12 3l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 4 1.2-6.9-5-4.8 6.9-1L12 3z" fill="#5FA85E"></path>240 </svg>241 </div>242 </div>243 244 <!-- Google verify -->245 <div class="mail-item">246 <div class="circle yellow">G</div>247 <div class="mail-content">248 <div class="line1">Google</div>249 <div class="subject">Help strengthen the security of your Google...</div>250 <div class="snippet">Verify tapomoy.mukherjee@globallogic.com...</div>251 </div>252 <div class="right-meta">253 <div class="date">Jun 7</div>254 <svg class="star" viewBox="0 0 24 24">255 <path d="M12 3l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 4 1.2-6.9-5-4.8 6.9-1L12 3z" fill="none" stroke="#999" stroke-width="1.5"></path>256 </svg>257 </div>258 </div>259 260 <!-- Me, Mail -->261 <div class="mail-item">262 <div class="circle mint">M</div>263 <div class="mail-content">264 <div class="line1">me, Mail <span class="count">2</span></div>265 <div class="subject">hello</div>266 <div class="snippet">Address not found. Your message wasn't deli...</div>267 </div>268 <div class="right-meta">269 <div class="date">7</div>270 <svg class="star" viewBox="0 0 24 24">271 <path d="M12 3l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 4 1.2-6.9-5-4.8 6.9-1L12 3z" fill="none" stroke="#999" stroke-width="1.5"></path>272 </svg>273 </div>274 </div>275 </div>276 277 <!-- Floating compose button -->278 <div class="compose-btn">279 <div class="compose-icon">280 <svg width="42" height="42" viewBox="0 0 24 24">281 <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z" fill="#204D28"></path>282 </svg>283 </div>284 Compose285 </div>286 287 <!-- Bottom mini bar with counters -->288 <div class="bottom-bar"></div>289 <div class="mail-pill">19</div>290 <div class="meet-icon">291 <svg width="42" height="42" viewBox="0 0 24 24">292 <path d="M4 6h10v12H4z" fill="#7A8078"></path>293 <path d="M18 8l4 3-4 3V8z" fill="#7A8078"></path>294 </svg>295 </div>296</div>297</body>298</html>