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: Roboto, Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#0f2b2b; color:#e8f5f2;10 }11 12 /* Status bar */13 .status {14 position:absolute; top:0; left:0; width:100%; height:90px;15 display:flex; align-items:center; justify-content:space-between;16 padding:0 36px; font-size:34px; color:#d7e7e3;17 }18 .status .icons { display:flex; align-items:center; gap:26px; }19 .status svg { width:36px; height:36px; fill:#cfe3de; }20 21 /* App bar */22 .appbar {23 position:absolute; top:90px; left:0; width:100%; height:120px;24 display:flex; align-items:center; padding:0 26px;25 border-bottom:1px solid rgba(255,255,255,0.06);26 }27 .appbar .left { display:flex; align-items:center; gap:28px; }28 .appbar .right { margin-left:auto; display:flex; align-items:center; gap:40px; }29 .appbar svg { width:46px; height:46px; fill:#cfe3de; }30 .appbar .count { font-size:44px; font-weight:500; color:#e9f7f4; }31 .select-all {32 position:absolute; top:140px; left:26px; display:flex; align-items:center; gap:18px;33 font-size:36px; color:#a7c7c0;34 }35 .checkbox {36 width:42px; height:42px; border:2px solid #6ba89a; border-radius:8px; box-sizing:border-box;37 }38 39 /* Content area */40 .content {41 position:absolute; top:210px; left:0; right:0; bottom:0;42 padding:0 26px 160px 26px; overflow:hidden;43 }44 45 /* Banner card */46 .banner {47 background:#143a38; border-radius:22px; padding:30px; margin:18px 0 26px 0;48 border:1px solid rgba(255,255,255,0.06);49 }50 .banner-header { display:flex; gap:24px; align-items:flex-start; }51 .banner-title { font-size:42px; font-weight:700; line-height:1.2; }52 .banner-desc { font-size:34px; color:#a7c7c0; margin-top:10px; }53 .banner-actions { display:flex; gap:40px; margin-top:24px; font-size:36px; }54 .action-green { color:#7bd88f; font-weight:600; }55 .action-grey { color:#b7cbc6; }56 57 /* List rows */58 .list { margin-top:6px; }59 .row {60 display:flex; align-items:center; gap:26px;61 padding:24px 16px; border-radius:26px;62 margin-bottom:12px;63 background:transparent;64 }65 .row:hover { background:rgba(255,255,255,0.02); }66 .avatar {67 width:96px; height:96px; border-radius:50%;68 background:#6b7773; display:flex; align-items:center; justify-content:center;69 color:#1a2323; font-weight:700;70 }71 .text { flex:1; }72 .title { font-size:40px; font-weight:700; }73 .snippet { font-size:32px; color:#a7c7c0; margin-top:8px; }74 .meta { display:flex; flex-direction:column; align-items:flex-end; gap:18px; margin-left:16px; }75 .date { font-size:32px; color:#a7c7c0; }76 .star svg { width:44px; height:44px; fill:#a7c7c0; }77 78 /* Promotions header */79 .promo-row .title { font-size:44px; }80 .promo-row .tag { width:48px; height:48px; }81 .promo-row .snippet { color:#a7c7c0; }82 .pill {83 background:#91d6a6; color:#153824; padding:10px 22px; border-radius:24px; font-weight:700; font-size:30px;84 }85 86 /* Selected row */87 .row.selected {88 background:#1f4e3b;89 box-shadow: inset 0 0 0 2px rgba(123,216,143,0.15);90 }91 .check {92 width:92px; height:92px; border-radius:50%; background:#2a6a4d;93 display:flex; align-items:center; justify-content:center;94 border:2px solid #7bd88f;95 }96 .check svg { width:52px; height:52px; fill:#7bd88f; }97 98 /* Compose FAB */99 .compose {100 position:absolute; right:34px; bottom:180px;101 background:#2f6e4d; color:#e9f7f4; border-radius:36px;102 padding:26px 38px; display:flex; align-items:center; gap:22px;103 box-shadow:0 8px 18px rgba(0,0,0,0.35);104 font-size:40px; font-weight:700;105 }106 .compose svg { width:48px; height:48px; fill:#e9f7f4; }107 108 /* Gesture pill */109 .gesture {110 position:absolute; left:50%; transform:translateX(-50%);111 bottom:80px; width:240px; height:10px; background:#e6e6e6; border-radius:20px; opacity:0.75;112 }113</style>114</head>115<body>116<div id="render-target">117 118 <!-- Status bar -->119 <div class="status">120 <div class="time">7:23</div>121 <div class="icons">122 <!-- Signal -->123 <svg viewBox="0 0 24 24"><path d="M2 18h2v2H2v-2zm4-4h2v6H6v-6zm4-4h2v10h-2V10zm4-4h2v14h-2V6zm4-6h2v20h-2V0z"/></svg>124 <!-- Wi-Fi -->125 <svg viewBox="0 0 24 24"><path d="M12 18l-2.5-2.5a3.5 3.5 0 015 0L12 18zm6.5-6.5a8.5 8.5 0 00-13 0l-1.5-1.5a10.5 10.5 0 0116 0l-1.5 1.5z"/></svg>126 <!-- Battery -->127 <svg viewBox="0 0 24 24"><path d="M20 8h2v8h-2V8zM3 7h16v10H3V7zm2 2v6h12V9H5z"/></svg>128 <div style="font-size:32px;">100%</div>129 </div>130 </div>131 132 <!-- App bar -->133 <div class="appbar">134 <div class="left">135 <!-- Back arrow -->136 <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6v12z"/></svg>137 <div class="count">1</div>138 </div>139 <div class="right">140 <!-- Archive/Download tray -->141 <svg viewBox="0 0 24 24"><path d="M12 3l4 4h-3v6h-2V7H8l4-4zm-8 9h16v9H4v-9zm3 3h10v3H7v-3z"/></svg>142 <!-- Delete -->143 <svg viewBox="0 0 24 24"><path d="M9 3h6l1 2h4v2H4V5h4l1-2zm1 6h2v9h-2V9zm4 0h2v9h-2V9z"/></svg>144 <!-- Envelope (mark as read) -->145 <svg viewBox="0 0 24 24"><path d="M2 6h20v12H2V6zm2 2v8h16V8l-8 5-8-5z"/></svg>146 <!-- Dots vertical -->147 <svg viewBox="0 0 24 24"><path d="M12 5a2 2 0 110-4 2 2 0 010 4zm0 9a2 2 0 110-4 2 2 0 010 4zm0 9a2 2 0 110-4 2 2 0 010 4z"/></svg>148 </div>149 </div>150 151 <!-- Select all row -->152 <div class="select-all">153 <div class="checkbox"></div>154 <div>Select all</div>155 </div>156 157 <!-- Content -->158 <div class="content">159 <!-- Banner card -->160 <div class="banner">161 <div class="banner-header">162 <!-- Shield icon -->163 <svg viewBox="0 0 24 24" style="width:56px;height:56px; fill:#74b6ff;">164 <path d="M12 2l8 3v6c0 5-3.4 9.6-8 11-4.6-1.4-8-6-8-11V5l8-3z"/>165 </svg>166 <div>167 <div class="banner-title">Get additional protection against phishing</div>168 <div class="banner-desc">Turn on Enhanced Safe Browsing to get additional protection against dangerous emails</div>169 <div class="banner-actions">170 <div class="action-green">Continue</div>171 <div class="action-grey">No thanks</div>172 </div>173 </div>174 </div>175 </div>176 177 <!-- List -->178 <div class="list">179 180 <!-- Row 1 -->181 <div class="row">182 <div class="avatar"></div>183 <div class="text">184 <div class="title">Kitchen Stories</div>185 <div class="snippet">Still want to receive our newsletter? Please don't forget to confirm your registrat...</div>186 </div>187 <div class="meta">188 <div class="date">Oct 10</div>189 <div class="star">190 <svg viewBox="0 0 24 24"><path d="M12 17l-6 3 2-6-4-4 6-1 2-5 2 5 6 1-4 4 2 6-6-3z"/></svg>191 </div>192 </div>193 </div>194 195 <!-- Promotions header -->196 <div class="row promo-row" style="padding-top:30px; padding-bottom:30px;">197 <!-- Tag icon -->198 <svg class="tag" viewBox="0 0 24 24" style="fill:#9bd1ac;">199 <path d="M10 3H5a2 2 0 00-2 2v5l9 9 9-9-8-8H10zm0 4a2 2 0 110-4 2 2 0 010 4z"/>200 </svg>201 <div class="text">202 <div class="title">Promotions</div>203 <div class="snippet">Yummly, Yummly, TheFork</div>204 </div>205 <div class="meta">206 <div class="pill">3 new</div>207 </div>208 </div>209 210 <!-- Row 2 -->211 <div class="row">212 <div class="avatar"></div>213 <div class="text">214 <div class="title">Kitchen Stories</div>215 <div class="snippet">Good news is just one click away! Please confirm your registration to receive ...</div>216 </div>217 <div class="meta">218 <div class="date">Oct 6</div>219 <div class="star">220 <svg viewBox="0 0 24 24"><path d="M12 17l-6 3 2-6-4-4 6-1 2-5 2 5 6 1-4 4 2 6-6-3z"/></svg>221 </div>222 </div>223 </div>224 225 <!-- Row 3 -->226 <div class="row">227 <div class="avatar"></div>228 <div class="text">229 <div class="title">Kitchen Stories</div>230 <div class="snippet">Welcome to Kitchen Stories! Thank you for signing up. Let's get cooking...</div>231 </div>232 <div class="meta">233 <div class="date">Oct 6</div>234 <div class="star">235 <svg viewBox="0 0 24 24"><path d="M12 17l-6 3 2-6-4-4 6-1 2-5 2 5 6 1-4 4 2 6-6-3z"/></svg>236 </div>237 </div>238 </div>239 240 <!-- Selected OpenTable row -->241 <div class="row selected">242 <div class="check">243 <svg viewBox="0 0 24 24"><path d="M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.5-1.5L9 16.2z"/></svg>244 </div>245 <div class="text">246 <div class="title">OpenTable | Tanivera Pizza e Pasta...</div>247 <div class="snippet">How was Tanivera Pizza e Pasta? OpenTable OpenTable How was Tanivera Pizza...</div>248 </div>249 <div class="meta">250 <div class="date" style="color:#cce6dc;">Oct 6</div>251 <div class="star">252 <svg viewBox="0 0 24 24" style="fill:#cce6dc;"><path d="M12 17l-6 3 2-6-4-4 6-1 2-5 2 5 6 1-4 4 2 6-6-3z"/></svg>253 </div>254 </div>255 </div>256 257 <!-- Row 5 -->258 <div class="row">259 <div class="avatar" style="background:#7c69a6; color:#dcd5ea;">G</div>260 <div class="text">261 <div class="title">Google Calendar</div>262 <div class="snippet">Google Calendar now shows...</div>263 </div>264 <div class="meta">265 <div class="date">Oct 3</div>266 <div class="star">267 <svg viewBox="0 0 24 24"><path d="M12 17l-6 3 2-6-4-4 6-1 2-5 2 5 6 1-4 4 2 6-6-3z"/></svg>268 </div>269 </div>270 </div>271 272 </div>273 274 <!-- Compose floating button -->275 <div class="compose">276 <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 000-1.41l-2.34-2.34a1 1 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>277 Compose278 </div>279 280 <!-- Gesture pill -->281 <div class="gesture"></div>282 </div>283 284</div>285</body>286</html>