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:#EDEDED;10 }11 12 /* Status bar */13 .status-bar {14 position:absolute; top:0; left:0; right:0; height:90px;15 color:#ddd; font-size:36px; padding:0 30px; display:flex; align-items:center; justify-content:space-between;16 }17 .status-right { display:flex; align-items:center; gap:24px; }18 .status-icon { width:32px; height:32px; border-radius:50%; border:2px solid #aaa; opacity:0.8; }19 .battery { display:flex; align-items:center; gap:8px; font-size:30px; }20 21 /* App bar (selection mode) */22 .app-bar {23 position:absolute; top:90px; left:0; right:0; height:120px;24 display:flex; align-items:center; padding:0 30px; gap:28px; color:#fff;25 }26 .app-bar .title { font-size:48px; }27 .icon-btn { width:84px; height:84px; display:flex; align-items:center; justify-content:center; border-radius:16px; }28 .icon-btn svg { width:48px; height:48px; fill:none; stroke:#fff; stroke-width:4; }29 30 /* Select all row */31 .select-all {32 position:absolute; top:210px; left:0; right:0; height:100px;33 display:flex; align-items:center; padding:0 36px; gap:24px; color:#cfcfcf; font-size:40px;34 }35 .checkbox { width:52px; height:52px; border:3px solid #8a8a8a; border-radius:8px; }36 37 /* List area */38 .list { position:absolute; top:310px; left:0; right:0; bottom:0; padding:0 24px 180px 24px; overflow:hidden; }39 .email-row {40 display:flex; align-items:center; padding:32px 24px; border-bottom:1px solid #1e1e1e;41 }42 .avatar {43 width:96px; height:96px; border-radius:50%; background:#5b5b5b; display:flex; align-items:center; justify-content:center;44 font-weight:bold; color:#fff; margin-right:24px;45 }46 .content { flex:1; min-width:0; }47 .line1 { display:flex; align-items:center; gap:16px; }48 .sender { font-size:42px; font-weight:700; }49 .tag-icon, .people-icon { width:44px; height:44px; border-radius:8px; background:#2b2b2b; display:flex; align-items:center; justify-content:center; }50 .summary { font-size:34px; color:#bdbdbd; margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }51 .right { width:240px; display:flex; align-items:center; justify-content:flex-end; gap:22px; }52 .time { color:#bdbdbd; font-size:34px; }53 .star { width:48px; height:48px; }54 .star svg { width:48px; height:48px; fill:none; stroke:#cfcfcf; stroke-width:4; }55 56 .pill {57 background:#2a2a2a; color:#c8ffc8; font-size:34px; border-radius:28px; padding:10px 22px; margin-left:auto;58 }59 .selected { background:#1a1a1a; border-radius:16px; }60 61 /* Floating compose */62 .compose {63 position:absolute; right:32px; bottom:70px; width:420px; height:130px;64 background:#2f2f2f; border-radius:36px; box-shadow:0 10px 20px rgba(0,0,0,0.6);65 display:flex; align-items:center; justify-content:center; gap:18px; color:#eaeaea; font-size:42px;66 }67 .compose svg { width:44px; height:44px; fill:none; stroke:#eaeaea; stroke-width:4; }68 69 /* Modal overlay: Move to */70 .overlay {71 position:absolute; inset:0; background:rgba(0,0,0,0.5);72 }73 .dialog {74 position:absolute; left:100px; top:850px; width:880px; height:700px;75 background:#1c1c1c; border-radius:40px; box-shadow:0 20px 50px rgba(0,0,0,0.6);76 padding:40px;77 }78 .dialog-title { font-size:56px; margin-bottom:40px; }79 .dialog-option {80 display:flex; align-items:center; gap:24px; padding:28px 0; border-bottom:1px solid #2a2a2a; font-size:44px;81 }82 .dialog-option:last-child { border-bottom:none; }83 .dlg-icon {84 width:64px; height:64px; border-radius:16px; background:#2b2b2b; display:flex; align-items:center; justify-content:center;85 }86 .dlg-icon svg { width:44px; height:44px; stroke:#eaeaea; fill:none; stroke-width:4; }87 .dialog-footer {88 position:absolute; right:40px; bottom:34px; color:#cfcfcf; font-size:44px;89 }90 91 /* Small glyph helpers */92 .kebab { display:flex; flex-direction:column; gap:6px; }93 .dot { width:8px; height:8px; background:#fff; border-radius:50%; }94</style>95</head>96<body>97<div id="render-target">98 99 <!-- Status bar -->100 <div class="status-bar">101 <div>6:22</div>102 <div class="status-right">103 <div class="status-icon"></div>104 <div class="status-icon"></div>105 <div class="status-icon"></div>106 <div class="battery">107 <svg width="42" height="24">108 <rect x="2" y="2" width="34" height="20" stroke="#aaa" fill="none" stroke-width="3"></rect>109 <rect x="38" y="8" width="4" height="8" fill="#aaa"></rect>110 <rect x="4" y="4" width="28" height="16" fill="#7bd67b"></rect>111 </svg>112 <span>100%</span>113 </div>114 </div>115 </div>116 117 <!-- App bar -->118 <div class="app-bar">119 <div class="icon-btn">120 <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/><path d="M21 12H9"/></svg>121 </div>122 <div class="title">1</div>123 <div style="margin-left:auto; display:flex; gap:18px;">124 <div class="icon-btn" title="Move to">125 <svg viewBox="0 0 24 24">126 <rect x="4" y="12" width="16" height="8" stroke="#fff"></rect>127 <path d="M12 4v9M8 8l4-4 4 4" />128 </svg>129 </div>130 <div class="icon-btn" title="Trash">131 <svg viewBox="0 0 24 24">132 <rect x="6" y="8" width="12" height="12" stroke="#fff"></rect>133 <rect x="9" y="3" width="6" height="4" stroke="#fff"></rect>134 </svg>135 </div>136 <div class="icon-btn" title="Mark as unread">137 <svg viewBox="0 0 24 24">138 <path d="M3 7l9 6 9-6v10H3V7z" />139 </svg>140 </div>141 <div class="icon-btn" title="More">142 <div class="kebab">143 <div class="dot"></div>144 <div class="dot"></div>145 <div class="dot"></div>146 </div>147 </div>148 </div>149 </div>150 151 <!-- Select all -->152 <div class="select-all">153 <div class="checkbox"></div>154 <div>Select all</div>155 </div>156 157 <!-- List -->158 <div class="list">159 160 <!-- Promotions bundle -->161 <div class="email-row">162 <div class="tag-icon">163 <svg viewBox="0 0 24 24"><path d="M3 7v5l9 9 9-9-9-9H8z"/></svg>164 </div>165 <div class="content">166 <div class="line1">167 <div class="sender">Promotions</div>168 <div class="pill">10 new</div>169 </div>170 <div class="summary">Kitchen Stories, Scribd, Emma at Si...</div>171 </div>172 </div>173 174 <!-- me, Quentin -->175 <div class="email-row">176 <div class="avatar">Q</div>177 <div class="content">178 <div class="line1">179 <div class="sender">me, Quentin</div>180 <div class="time">Oct 13</div>181 </div>182 <div class="summary">Important meeting time — Ok, see you then. On Fri, Oct 13, 2023, 8:48...</div>183 </div>184 <div class="right">185 <div class="star">186 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 6 1-4.5 4 1 6-5.5-3.2L6.5 20l1-6L3 10l6-1z"/></svg>187 </div>188 </div>189 </div>190 191 <!-- Kitchen Stories example -->192 <div class="email-row">193 <div class="avatar" style="background:#8a8a8a;">S</div>194 <div class="content">195 <div class="line1">196 <div class="sender">Kitchen Stories</div>197 <div class="time">Oct 11</div>198 </div>199 <div class="summary">New recipes you might like this week</div>200 </div>201 <div class="right">202 <div class="star">203 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 6 1-4.5 4 1 6-5.5-3.2L6.5 20l1-6L3 10l6-1z"/></svg>204 </div>205 </div>206 </div>207 208 <!-- Rappi selected -->209 <div class="email-row selected">210 <div class="avatar" style="background:#444;">R</div>211 <div class="content">212 <div class="line1">213 <div class="sender">Rappi</div>214 <div class="time">Oct 3</div>215 </div>216 <div class="summary">Verifique seu email — E comece desfrutar da Rappi Oi Fabio 😊 Cli...</div>217 </div>218 <div class="right">219 <div class="star">220 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 6 1-4.5 4 1 6-5.5-3.2L6.5 20l1-6L3 10l6-1z"/></svg>221 </div>222 </div>223 </div>224 225 <!-- Scribd welcome -->226 <div class="email-row">227 <div class="avatar" style="background:#777;">S</div>228 <div class="content">229 <div class="line1">230 <div class="sender">Scribd</div>231 <div class="time">Sep 26</div>232 </div>233 <div class="summary">Welcome to Scribd! — Never stop growing with access to everything...</div>234 </div>235 <div class="right">236 <div class="star">237 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 6 1-4.5 4 1 6-5.5-3.2L6.5 20l1-6L3 10l6-1z"/></svg>238 </div>239 </div>240 </div>241 242 <!-- Scribd verify -->243 <div class="email-row">244 <div class="avatar" style="background:#777;">S</div>245 <div class="content">246 <div class="line1">247 <div class="sender">Scribd</div>248 <div class="time">Sep 26</div>249 </div>250 <div class="summary">Fabio, please verify your e... — Didn't create a Scribd accou...</div>251 </div>252 <div class="right">253 <div class="star">254 <svg viewBox="0 0 24 24"><path d="M12 3l3 6 6 1-4.5 4 1 6-5.5-3.2L6.5 20l1-6L3 10l6-1z"/></svg>255 </div>256 </div>257 </div>258 259 </div>260 261 <!-- Compose floating button -->262 <div class="compose">263 <svg viewBox="0 0 24 24"><path d="M4 20h16M6 14l10-10 3 3-10 10H6z"/></svg>264 <div>Compose</div>265 </div>266 267 <!-- Move to dialog overlay -->268 <div class="overlay"></div>269 <div class="dialog">270 <div class="dialog-title">Move to</div>271 272 <div class="dialog-option">273 <div class="dlg-icon">274 <svg viewBox="0 0 24 24"><path d="M3 7v5l9 9 9-9-9-9H8z"/></svg>275 </div>276 <div>Promotions</div>277 </div>278 279 <div class="dialog-option">280 <div class="dlg-icon">281 <svg viewBox="0 0 24 24">282 <circle cx="8" cy="9" r="4"></circle>283 <circle cx="16" cy="9" r="4"></circle>284 <path d="M2 20c2-6 8-6 10-6s8 0 10 6" />285 </svg>286 </div>287 <div>Social</div>288 </div>289 290 <div class="dialog-footer">Cancel</div>291 </div>292 293</div>294</body>295</html>