GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Gmail Dark UI Mock</title>6<style>7 body{margin:0;padding:0;background:transparent;font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;}8 #render-target{9 width:1080px;height:2400px;position:relative;overflow:hidden;10 background:#121212;color:#EDEDED;11 }12 /* Top status bar */13 .statusbar{14 height:110px;display:flex;align-items:center;justify-content:space-between;15 padding:0 40px;color:#EDEDED;font-weight:600;font-size:40px;16 }17 .status-icons{display:flex;gap:26px;align-items:center;}18 .iconDot{width:14px;height:14px;background:#BDBDBD;border-radius:50%;}19 .battery{display:flex;align-items:center;gap:16px;font-size:36px;}20 .battery svg{width:46px;height:46px;fill:#EDEDED;}21 /* Search bar */22 .search-wrap{padding:10px 40px 20px;}23 .searchbar{24 height:140px;background:#2A2A2A;border-radius:80px;display:flex;align-items:center;25 padding:0 36px;position:relative;26 }27 .menu-icon{width:72px;height:72px;margin-right:24px;}28 .menu-icon svg{width:100%;height:100%;fill:#EDEDED;}29 .search-placeholder{flex:1;color:#BEBEBE;font-size:44px;}30 .avatar{31 width:110px;height:110px;border-radius:55px;background:#5A473A;32 display:flex;align-items:center;justify-content:center;font-weight:700;font-size:52px;33 position:relative;color:#F3D5B5;34 }35 .badge{36 position:absolute;right:-6px;top:-6px;width:44px;height:44px;background:#E8C54A;37 border-radius:50%;display:flex;align-items:center;justify-content:center;color:#2A2A2A;38 font-weight:900;font-size:34px;39 }40 /* Section title */41 .section-title{padding:28px 40px 10px;font-size:40px;color:#CFCFCF;}42 /* Promotions tile */43 .promo-row{padding:18px 40px;border-top:1px solid #1E1E1E;border-bottom:1px solid #1E1E1E;}44 .promo-card{display:flex;align-items:center;gap:28px;}45 .tag-icon{46 width:54px;height:54px;background:#1e3d28;border-radius:12px;display:flex;align-items:center;justify-content:center;47 border:2px solid #2a6b3f;48 }49 .tag-icon svg{width:38px;height:38px;fill:#52C773;}50 .promo-text{flex:1;}51 .promo-title{font-size:46px;font-weight:700;color:#EDEDED;}52 .promo-sub{font-size:40px;color:#BEBEBE;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}53 .new-pill{54 background:#3BAA69;color:#0d2917;font-weight:700;border-radius:36px;padding:10px 22px;font-size:40px;55 }56 /* Mail item rows */57 .mail-row{padding:26px 40px;border-bottom:1px solid #1E1E1E;display:flex;gap:26px;position:relative;}58 .avatar.small{width:92px;height:92px;border-radius:46px;font-size:44px;}59 .avatar.gray{background:#3A3A3A;color:#DADADA;}60 .avatar.purple{background:#6D5FD6;color:#F5F5FF;}61 .avatar.yellow{background:#D6B037;color:#2A2000;}62 .mail-content{flex:1;}63 .first-line{display:flex;align-items:center;justify-content:space-between;}64 .sender{font-size:46px;font-weight:700;}65 .count{margin-left:14px;background:#323232;color:#BEBEBE;border-radius:18px;padding:6px 14px;font-size:34px;}66 .date{font-size:36px;color:#9E9E9E;}67 .subject{font-size:40px;color:#EDEDED;margin-top:6px;}68 .snippet{font-size:38px;color:#AFAFAF;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}69 .star{position:absolute;right:40px;top:44px;width:52px;height:52px;opacity:0.9;}70 .star svg{width:100%;height:100%;stroke:#D6D6D6;fill:none;stroke-width:4;}71 /* Bottom FAB */72 .fab{73 position:absolute;right:38px;bottom:520px;background:#3A3A3A;color:#FFFFFF;74 border-radius:24px;padding:26px 34px;display:flex;align-items:center;gap:24px;75 box-shadow:0 6px 20px rgba(0,0,0,0.4);font-size:44px;font-weight:600;76 }77 .fab svg{width:58px;height:58px;fill:#FFFFFF;}78 /* Bottom strip mock */79 .bottom-strip{80 position:absolute;left:0;bottom:360px;width:1080px;height:160px;background:#1A1A1A;81 display:flex;align-items:center;justify-content:center;gap:36px;82 box-shadow:0 -6px 20px rgba(0,0,0,0.5);83 }84 .pill{85 background:#2C2C2C;border-radius:40px;padding:20px 32px;color:#F5F5F5;display:flex;align-items:center;gap:18px;font-size:40px;86 }87 .pill .badgeCount{88 background:#E3B5B5;color:#5A2A2A;border-radius:26px;padding:6px 16px;font-weight:700;89 }90 /* helper limit for long lines */91 .ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}92</style>93</head>94<body>95<div id="render-target">96 <!-- Status bar -->97 <div class="statusbar">98 <div>6:19</div>99 <div class="status-icons">100 <div class="iconDot"></div>101 <div class="iconDot"></div>102 <div class="iconDot"></div>103 </div>104 <div class="battery">105 <div>100%</div>106 <svg viewBox="0 0 24 24"><path d="M22 10v4h-2v3a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v3h2zM18 7H4v10h14V7z"/></svg>107 </div>108 </div>109 110 <!-- Search bar -->111 <div class="search-wrap">112 <div class="searchbar">113 <div class="menu-icon">114 <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>115 </div>116 <div class="search-placeholder">Search in mail</div>117 <div class="avatar">118 F119 <div class="badge">!</div>120 </div>121 </div>122 </div>123 124 <!-- Primary section -->125 <div class="section-title">Primary</div>126 127 <!-- Promotions -->128 <div class="promo-row">129 <div class="promo-card">130 <div class="tag-icon">131 <svg viewBox="0 0 24 24"><path d="M3 7v10l5 5 13-13-5-5H3zm5 1.5A2.5 2.5 0 1 0 8 4a2.5 2.5 0 0 0 0 5.5z"/></svg>132 </div>133 <div class="promo-text">134 <div class="promo-title">Promotions</div>135 <div class="promo-sub ellipsis">Kitchen Stories, Scribd, Emma at Si...</div>136 </div>137 <div class="new-pill">10 new</div>138 </div>139 </div>140 141 <!-- Email rows -->142 <div class="mail-row">143 <div class="avatar small purple">Q</div>144 <div class="mail-content">145 <div class="first-line">146 <div class="sender">me, Quentin <span class="count">3</span></div>147 <div class="date">Oct 13</div>148 </div>149 <div class="subject ellipsis">Important meeting time</div>150 <div class="snippet ellipsis">Ok, see you then. On Fri, Oct 13, 2023, 8:48...</div>151 </div>152 <div class="star">153 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.4 1.2-6.9L2 9.7l7-1 3-6 3 6 7 1-5 4.1 1.2 6.9z"/></svg>154 </div>155 </div>156 157 <div class="mail-row">158 <div class="avatar small gray"><div style="font-size:0;"> </div></div>159 <div class="mail-content">160 <div class="first-line">161 <div class="sender">Kitchen Stories</div>162 <div class="date">Oct 11</div>163 </div>164 <div class="subject ellipsis">Good news is just one click away!</div>165 <div class="snippet ellipsis">Please confirm your registration to receive ...</div>166 </div>167 <div class="star">168 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.4 1.2-6.9L2 9.7l7-1 3-6 3 6 7 1-5 4.1 1.2 6.9z"/></svg>169 </div>170 </div>171 172 <div class="mail-row">173 <div class="avatar small yellow">M</div>174 <div class="mail-content">175 <div class="first-line">176 <div class="sender">me, Mail <span class="count">2</span></div>177 <div class="date">Oct 4</div>178 </div>179 <div class="subject">(no subject)</div>180 <div class="snippet ellipsis">Address not found Your message wasn't deli...</div>181 </div>182 <div class="star">183 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.4 1.2-6.9L2 9.7l7-1 3-6 3 6 7 1-5 4.1 1.2 6.9z"/></svg>184 </div>185 </div>186 187 <div class="mail-row">188 <div class="avatar small gray"></div>189 <div class="mail-content">190 <div class="first-line">191 <div class="sender">Delivery Much</div>192 <div class="date">Oct 4</div>193 </div>194 <div class="subject">Código de verificação</div>195 <div class="snippet ellipsis">Delivery Much Delivery Much Bem-vindo a...</div>196 </div>197 <div class="star">198 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.4 1.2-6.9L2 9.7l7-1 3-6 3 6 7 1-5 4.1 1.2 6.9z"/></svg>199 </div>200 </div>201 202 <div class="mail-row">203 <div class="avatar small gray"></div>204 <div class="mail-content">205 <div class="first-line">206 <div class="sender">Rappi</div>207 <div class="date">Oct 3</div>208 </div>209 <div class="subject">Verifique seu email</div>210 <div class="snippet ellipsis">E comece desfrutar da Rappi Oi Fabio 😊 Cli...</div>211 </div>212 <div class="star">213 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.4 1.2-6.9L2 9.7l7-1 3-6 3 6 7 1-5 4.1 1.2 6.9z"/></svg>214 </div>215 </div>216 217 <div class="mail-row">218 <div class="avatar small gray"></div>219 <div class="mail-content">220 <div class="first-line">221 <div class="sender">Scribd</div>222 <div class="date">Sep 26</div>223 </div>224 <div class="subject">Welcome to Scribd!</div>225 <div class="snippet ellipsis">Never stop growing with access to everythin...</div>226 </div>227 <div class="star">228 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.4 1.2-6.9L2 9.7l7-1 3-6 3 6 7 1-5 4.1 1.2 6.9z"/></svg>229 </div>230 </div>231 232 <!-- Bottom mini strip -->233 <div class="bottom-strip">234 <div class="pill">235 <svg viewBox="0 0 24 24"><path d="M4 4h16v14H4zM6 6h12v10H6z"/></svg>236 <span>Mail</span>237 <span class="badgeCount">4</span>238 </div>239 </div>240 241 <!-- Compose Floating Action -->242 <div class="fab">243 <svg viewBox="0 0 24 24"><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"/></svg>244 Compose245 </div>246</div>247</body>248</html>