GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Gmail Dark 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; position:relative; overflow:hidden;9 background:#121212; color:#fff;10 }11 .status-bar {12 position:absolute; top:0; left:0; width:100%; height:90px;13 padding:0 32px; box-sizing:border-box; display:flex; align-items:center; justify-content:space-between;14 color:#eaeaea; font-weight:600; letter-spacing:0.5px; font-size:32px;15 }16 .status-icons { display:flex; align-items:center; gap:26px; }17 .icon { width:36px; height:36px; }18 .search-area {19 position:absolute; top:90px; left:0; width:100%; height:160px;20 display:flex; align-items:center; padding:0 32px; box-sizing:border-box;21 }22 .hamburger {23 width:68px; height:68px; border-radius:34px; display:flex; align-items:center; justify-content:center;24 margin-right:18px; background:transparent;25 }26 .search-bar {27 flex:1; height:96px; border-radius:48px; background:#2A2A2D;28 display:flex; align-items:center; padding:0 32px; box-sizing:border-box; color:#bdbdbd;29 font-size:36px;30 }31 .search-placeholder { flex:1; }32 .profile {33 width:96px; height:96px; border-radius:48px; background:#8A6E5A; color:#fff;34 display:flex; align-items:center; justify-content:center; font-weight:700; font-size:44px; margin-left:18px;35 }36 .section-title {37 position:absolute; top:260px; left:32px; font-size:34px; color:#cfcfcf;38 }39 .list {40 position:absolute; top:320px; left:0; right:0; bottom:240px; overflow:hidden;41 padding:0 0 0 0;42 }43 .mail-row {44 display:flex; align-items:flex-start; padding:28px 32px; box-sizing:border-box;45 border-bottom:1px solid rgba(255,255,255,0.06);46 }47 .avatar {48 width:86px; height:86px; border-radius:43px; flex:0 0 86px;49 display:flex; align-items:center; justify-content:center; color:#1a1a1a; font-weight:700; font-size:40px;50 margin-right:26px;51 }52 .avatar.yellow { background:#FBC02D; }53 .avatar.purple { background:#B39DDB; color:#2c2c2c; }54 .avatar.gray { background:#9E9E9E; color:#1a1a1a; }55 .avatar.green { background:#66BB6A; color:#0b0b0b; }56 .content { flex:1; }57 .line1 {58 display:flex; align-items:center; justify-content:space-between;59 font-size:40px; font-weight:700; color:#fff;60 }61 .line1 .sender { display:flex; align-items:center; gap:12px; }62 .line2 {63 margin-top:6px; font-size:38px; font-weight:700; color:#fff;64 }65 .line3 {66 margin-top:6px; font-size:34px; color:#a5a5a5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;67 }68 .time { font-size:32px; color:#cfcfcf; margin-right:18px; }69 .star { width:44px; height:44px; margin-left:10px; }70 .chips { display:flex; gap:16px; margin-top:16px; flex-wrap:wrap; }71 .chip {72 height:64px; padding:0 26px; border-radius:36px; background:#2A2A2D; color:#d0d0d0;73 display:flex; align-items:center; font-size:30px; border:1px solid rgba(255,255,255,0.08);74 }75 .chip .mini-img {76 width:40px; height:40px; border-radius:6px; margin-right:12px; background:#E0E0E0; border:1px solid #BDBDBD;77 display:flex; align-items:center; justify-content:center; color:#757575; font-size:18px;78 }79 .bottom-bar {80 position:absolute; bottom:0; left:0; width:100%; height:150px;81 background:#1A1A1A; border-top:1px solid rgba(255,255,255,0.08);82 display:flex; align-items:center; justify-content:space-around;83 }84 .nav-item { position:relative; display:flex; flex-direction:column; align-items:center; color:#d6d6d6; font-size:28px; }85 .badge {86 position:absolute; top:-10px; right:-22px; background:#c24c54; color:#fff;87 width:48px; height:48px; border-radius:24px; display:flex; align-items:center; justify-content:center;88 font-size:28px; border:2px solid #1A1A1A;89 }90 .compose {91 position:absolute; right:40px; bottom:170px; height:128px; padding:0 42px; border-radius:36px;92 background:#2f3f55; box-shadow:0 8px 16px rgba(0,0,0,0.35); display:flex; align-items:center; gap:22px;93 color:#e9eef7; font-size:40px; font-weight:700;94 }95 .gesture {96 position:absolute; bottom:24px; left:50%; transform:translateX(-50%);97 width:400px; height:12px; background:#e5e5e5; border-radius:6px; opacity:0.9;98 }99 .ellipsis { color:#bdbdbd; }100</style>101</head>102<body>103<div id="render-target">104 105 <!-- Status bar -->106 <div class="status-bar">107 <div>10:41</div>108 <div class="status-icons">109 <!-- simple Google Play triangle -->110 <svg class="icon" viewBox="0 0 24 24">111 <polygon points="3,2 21,12 3,22" fill="#8ab4f8"></polygon>112 </svg>113 <!-- WiFi -->114 <svg class="icon" viewBox="0 0 24 24">115 <path d="M2 8c5-4 15-4 20 0" stroke="#eaeaea" stroke-width="2" fill="none"/>116 <path d="M5 12c4-3 10-3 14 0" stroke="#eaeaea" stroke-width="2" fill="none"/>117 <circle cx="12" cy="16" r="2" fill="#eaeaea"/>118 </svg>119 <!-- Signal -->120 <svg class="icon" viewBox="0 0 24 24">121 <rect x="3" y="14" width="3" height="7" fill="#eaeaea"/>122 <rect x="8" y="11" width="3" height="10" fill="#eaeaea"/>123 <rect x="13" y="8" width="3" height="13" fill="#eaeaea"/>124 <rect x="18" y="5" width="3" height="16" fill="#eaeaea"/>125 </svg>126 <!-- Battery -->127 <svg class="icon" viewBox="0 0 28 24">128 <rect x="2" y="5" width="22" height="14" rx="3" stroke="#eaeaea" stroke-width="2" fill="none"/>129 <rect x="4" y="7" width="16" height="10" fill="#eaeaea"/>130 <rect x="24" y="9" width="2" height="6" fill="#eaeaea"/>131 </svg>132 </div>133 </div>134 135 <!-- Search area -->136 <div class="search-area">137 <div class="hamburger">138 <svg width="36" height="36" viewBox="0 0 24 24">139 <path d="M3 6h18M3 12h18M3 18h18" stroke="#eaeaea" stroke-width="2" stroke-linecap="round"/>140 </svg>141 </div>142 <div class="search-bar">143 <div class="search-placeholder">Search in mail</div>144 </div>145 <div class="profile">I</div>146 </div>147 148 <div class="section-title">Primary</div>149 150 <!-- Email list -->151 <div class="list">152 153 <!-- Row 1 -->154 <div class="mail-row">155 <div class="avatar yellow">G</div>156 <div class="content">157 <div class="line1">158 <div class="sender">Google</div>159 <div style="display:flex; align-items:center;">160 <div class="time">6:45 PM</div>161 <svg class="star" viewBox="0 0 24 24">162 <path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="none" stroke="#bdbdbd" stroke-width="1.5"/>163 </svg>164 </div>165 </div>166 <div class="line2">Security alert</div>167 <div class="line3">Your password was changed lucaskramer73…</div>168 </div>169 </div>170 171 <!-- Row 2 -->172 <div class="mail-row">173 <div class="avatar yellow">G</div>174 <div class="content">175 <div class="line1">176 <div class="sender">Google</div>177 <div style="display:flex; align-items:center;">178 <div class="time">6:45 PM</div>179 <svg class="star" viewBox="0 0 24 24">180 <path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="none" stroke="#bdbdbd" stroke-width="1.5"/>181 </svg>182 </div>183 </div>184 <div class="line2">Your Google Account was recovered suc…</div>185 <div class="line3">Account recovered successfully lucaskrame…</div>186 </div>187 </div>188 189 <!-- Row 3 -->190 <div class="mail-row">191 <div class="avatar purple">C</div>192 <div class="content">193 <div class="line1">194 <div class="sender">Cerebra Research</div>195 <div style="display:flex; align-items:center;">196 <div class="time">5:35 PM</div>197 <svg class="star" viewBox="0 0 24 24">198 <path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="none" stroke="#bdbdbd" stroke-width="1.5"/>199 </svg>200 </div>201 </div>202 <div class="line2">(no subject)</div>203 <div class="line3">(no body)</div>204 <div class="chips">205 <div class="chip">206 <div class="mini-img">IMG</div>207 PXL_20230921…208 </div>209 <div class="chip">210 <div class="mini-img">IMG</div>211 PXL_20230921…212 </div>213 </div>214 </div>215 </div>216 217 <!-- Row 4 -->218 <div class="mail-row">219 <div class="avatar gray">220 <svg width="40" height="40" viewBox="0 0 24 24">221 <circle cx="12" cy="9" r="4" fill="#2a2a2a"/>222 <path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="#2a2a2a"/>223 </svg>224 </div>225 <div class="content">226 <div class="line1">227 <div class="sender">Cerebra, me <span class="ellipsis">2</span></div>228 <div style="display:flex; align-items:center;">229 <div class="time">Sep 26</div>230 <svg class="star" viewBox="0 0 24 24">231 <path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="none" stroke="#bdbdbd" stroke-width="1.5"/>232 </svg>233 </div>234 </div>235 <div class="line2">Shopping list</div>236 <div class="line3">Confirm the order. On Tue, Sep 26, 2023, 6:…</div>237 </div>238 </div>239 240 <!-- Row 5 -->241 <div class="mail-row">242 <div class="avatar gray">243 <svg width="40" height="40" viewBox="0 0 24 24">244 <circle cx="12" cy="9" r="4" fill="#2a2a2a"/>245 <path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="#2a2a2a"/>246 </svg>247 </div>248 <div class="content">249 <div class="line1">250 <div class="sender">Cerebra Research</div>251 <div style="display:flex; align-items:center;">252 <div class="time">Sep 25</div>253 <svg class="star" viewBox="0 0 24 24">254 <path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="none" stroke="#bdbdbd" stroke-width="1.5"/>255 </svg>256 </div>257 </div>258 <div class="line2">Q29V+W4R New York, USA</div>259 <div class="line3">https://goo.gl/maps/qtGq4bUVTtcZmu9x6</div>260 </div>261 </div>262 263 <!-- Row 6 -->264 <div class="mail-row">265 <div class="avatar green">G</div>266 <div class="content">267 <div class="line1">268 <div class="sender">Google Pixel</div>269 <div style="display:flex; align-items:center;">270 <div class="time">Sep 22</div>271 <svg class="star" viewBox="0 0 24 24">272 <path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="none" stroke="#bdbdbd" stroke-width="1.5"/>273 </svg>274 </div>275 </div>276 <div class="line2">Lucas, get to know your new Pixel</div>277 <div class="line3">See quick tips, helpful apps and more</div>278 </div>279 </div>280 281 <!-- Row 7 -->282 <div class="mail-row">283 <div class="avatar yellow">G</div>284 <div class="content">285 <div class="line1">286 <div class="sender">Google Community Team</div>287 <div style="display:flex; align-items:center;">288 <div class="time">Sep 22</div>289 <svg class="star" viewBox="0 0 24 24">290 <path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="none" stroke="#bdbdbd" stroke-width="1.5"/>291 </svg>292 </div>293 </div>294 <div class="line2">Lucas, finish setting up yo…</div>295 <div class="line3">Hi Lucas, Welcome to Google. Your new acc…</div>296 </div>297 </div>298 299 </div>300 301 <!-- Floating compose button -->302 <div class="compose">303 <svg width="48" height="48" viewBox="0 0 24 24">304 <path d="M3 17v4h4l10-10-4-4L3 17zM14 6l4 4" stroke="#e9eef7" stroke-width="2" fill="none" stroke-linecap="round"/>305 </svg>306 Compose307 </div>308 309 <!-- Bottom navigation -->310 <div class="bottom-bar">311 <div class="nav-item">312 <svg width="60" height="60" viewBox="0 0 24 24">313 <path d="M3 5h18v14H3z" fill="none" stroke="#d6d6d6" stroke-width="2"/>314 <path d="M3 7l9 6 9-6" fill="none" stroke="#d6d6d6" stroke-width="2"/>315 </svg>316 <div class="badge">4</div>317 </div>318 <div class="nav-item">319 <svg width="60" height="60" viewBox="0 0 24 24">320 <rect x="3" y="6" width="14" height="12" rx="2" stroke="#d6d6d6" stroke-width="2" fill="none"/>321 <polygon points="17,12 23,9 23,15" fill="#d6d6d6"/>322 </svg>323 </div>324 </div>325 326 <!-- Gesture bar -->327 <div class="gesture"></div>328 329</div>330</body>331</html>