GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Mail Inbox - Dark</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#20160f; color:#e7d7c7;12 }13 14 /* Status bar */15 .status-bar {16 position:absolute; top:0; left:0; right:0; height:100px;17 padding:0 40px; display:flex; align-items:center; justify-content:space-between;18 color:#e7d7c7; font-size:40px;19 }20 .status-right { display:flex; gap:26px; align-items:center; }21 .status-dot { width:20px; height:20px; border-radius:50%; background:#e7d7c7; opacity:.85; }22 23 /* Search bar */24 .search-wrapper {25 position:absolute; top:100px; left:24px; right:24px; height:120px;26 display:flex; align-items:center; gap:24px;27 background:#3a2d23; border-radius:60px; padding:0 32px;28 }29 .hamburger svg { width:54px; height:54px; fill:#cbb39f; }30 .search-text { flex:1; color:#cbb39f; font-size:42px; }31 .profile {32 width:92px; height:92px; border-radius:50%;33 background:#538bd2; display:flex; align-items:center; justify-content:center;34 color:#fff; font-weight:bold; font-size:44px;35 }36 37 /* Content area */38 .content { position:absolute; top:250px; left:0; right:0; bottom:0; padding:0 24px 220px; }39 .section-header {40 color:#b39b86; font-size:40px; margin:18px 16px 8px;41 }42 43 .list { margin-top:16px; }44 .row {45 display:flex; align-items:flex-start; gap:28px;46 padding:26px 20px; border-radius:24px;47 }48 .row + .row { margin-top:6px; }49 .avatar {50 width:96px; height:96px; border-radius:50%;51 background:#E0E0E0; border:1px solid #BDBDBD;52 display:flex; align-items:center; justify-content:center;53 color:#757575; font-size:20px; text-align:center; padding:6px;54 flex-shrink:0;55 }56 .tag-icon { width:64px; height:64px; display:flex; align-items:center; justify-content:center; margin-top:8px; }57 .tag-icon svg { width:64px; height:64px; fill:#5cc585; }58 59 .mail-text { flex:1; min-width:0; }60 .from-line {61 display:flex; justify-content:space-between; align-items:center; gap:12px;62 font-size:44px; line-height:1.2;63 }64 .from-left { display:flex; align-items:center; gap:16px; }65 .unread { font-weight:bold; }66 .date { color:#b59f8e; font-size:38px; white-space:nowrap; }67 .subject {68 font-size:38px; color:#e7d7c7; margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;69 }70 .snippet {71 font-size:34px; color:#b59f8e; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;72 }73 74 .actions { display:flex; align-items:center; gap:24px; margin-left:12px; }75 .star svg, .more svg { width:54px; height:54px; fill:#cbb39f; opacity:0.9; }76 .more { transform:rotate(90deg); }77 78 /* Compose button */79 .compose {80 position:absolute; right:40px; bottom:280px;81 background:#6b513f; color:#f0e5dc; border-radius:36px;82 padding:34px 44px; display:flex; align-items:center; gap:24px;83 box-shadow:0 10px 24px rgba(0,0,0,0.35);84 font-size:42px; font-weight:600;85 }86 .compose svg { width:54px; height:54px; fill:#f0e5dc; }87 88 /* Bottom bar */89 .bottom-bar {90 position:absolute; left:0; right:0; bottom:0; height:180px;91 background:#2b2018; padding:0 60px; display:flex; align-items:center; justify-content:space-between;92 }93 .nav-item { width:120px; height:120px; border-radius:28px; display:flex; align-items:center; justify-content:center; position:relative; }94 .nav-item svg { width:72px; height:72px; fill:#cbb39f; }95 .badge {96 position:absolute; top:10px; left:76px; background:#d47b76; color:#fff; border-radius:20px;97 padding:4px 12px; font-size:30px; font-weight:bold;98 border:2px solid #2b2018;99 }100 .gesture {101 position:absolute; bottom:16px; left:50%; transform:translateX(-50%);102 width:280px; height:12px; background:#e7e7e7; border-radius:6px; opacity:.85;103 }104 105 /* subtle row hover simulation (not interactive) */106 .row:hover { background:#2a1f17; }107</style>108</head>109<body>110<div id="render-target">111 <!-- Status bar -->112 <div class="status-bar">113 <div>8:35</div>114 <div class="status-right">115 <div class="status-dot"></div>116 <div class="status-dot"></div>117 <div class="status-dot"></div>118 </div>119 </div>120 121 <!-- Search in mail -->122 <div class="search-wrapper">123 <div class="hamburger">124 <svg viewBox="0 0 24 24"><path d="M3 5h18v2H3zM3 11h18v2H3zM3 17h18v2H3z"/></svg>125 </div>126 <div class="search-text">Search in mail</div>127 <div class="profile">N</div>128 </div>129 130 <!-- Content -->131 <div class="content">132 <div class="section-header">Primary</div>133 134 <div class="list">135 <!-- Promotions card -->136 <div class="row" style="padding-left:34px;">137 <div class="tag-icon">138 <svg viewBox="0 0 24 24"><path d="M21 8l-9-7-9 7v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8zm-9 9a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/></svg>139 </div>140 <div class="mail-text">141 <div class="from-line">142 <div class="unread">Promotions</div>143 </div>144 <div class="snippet">eBay</div>145 </div>146 </div>147 148 <!-- me, Mail -->149 <div class="row">150 <div class="avatar">[IMG: M avatar]</div>151 <div class="mail-text">152 <div class="from-line">153 <div class="from-left">154 <div class="unread">me, Mail</div>155 <div style="color:#b59f8e; font-size:36px;">2</div>156 </div>157 <div class="date">Oct 12</div>158 </div>159 <div class="subject">All Recipes App</div>160 <div class="snippet">Address not found Your message wasn't deli...</div>161 </div>162 <div class="actions">163 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 17.3l5.1 3.1-1.4-5.9L20 9.8l-6-.5L12 4 10 9.3l-6 .5 4.3 3.7-1.4 5.9z"/></svg></div>164 </div>165 </div>166 167 <!-- eBay mail -->168 <div class="row">169 <div class="avatar">[IMG: eBay avatar]</div>170 <div class="mail-text">171 <div class="from-line">172 <div class="unread">eBay</div>173 <div class="date">Oct 12</div>174 </div>175 <div class="subject">Recently viewed: New Twin Tubs Washing M...</div>176 <div class="snippet">Give it another look</div>177 </div>178 <div class="actions">179 <div class="more"><svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg></div>180 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 17.3l5.1 3.1-1.4-5.9L20 9.8l-6-.5L12 4 10 9.3l-6 .5 4.3 3.7-1.4 5.9z"/></svg></div>181 </div>182 </div>183 184 <!-- Kitchen Stories -->185 <div class="row">186 <div class="avatar">[IMG: User avatar]</div>187 <div class="mail-text">188 <div class="from-line">189 <div class="unread">Kitchen Stories</div>190 <div class="date">Oct 11</div>191 </div>192 <div class="subject">Welcome to Kitchen Stories!</div>193 <div class="snippet">Thank you for signing up. Let's get cooking...</div>194 </div>195 <div class="actions">196 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 17.3l5.1 3.1-1.4-5.9L20 9.8l-6-.5L12 4 10 9.3l-6 .5 4.3 3.7-1.4 5.9z"/></svg></div>197 </div>198 </div>199 200 <!-- eBay - Woman K-Swiss -->201 <div class="row">202 <div class="avatar">[IMG: eBay avatar]</div>203 <div class="mail-text">204 <div class="from-line">205 <div class="unread">eBay</div>206 <div class="date">Oct 11</div>207 </div>208 <div class="subject">Recently viewed: Woman K-Swiss ST329...</div>209 <div class="snippet">Give it another look</div>210 </div>211 <div class="actions">212 <div class="more"><svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg></div>213 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 17.3l5.1 3.1-1.4-5.9L20 9.8l-6-.5L12 4 10 9.3l-6 .5 4.3 3.7-1.4 5.9z"/></svg></div>214 </div>215 </div>216 217 <!-- eBay - K-Swiss Women's Sneakers -->218 <div class="row">219 <div class="avatar">[IMG: eBay avatar]</div>220 <div class="mail-text">221 <div class="from-line">222 <div class="unread">eBay</div>223 <div class="date">Oct 10</div>224 </div>225 <div class="subject">K-Swiss Women's Sneakers K-Swiss Cou...</div>226 <div class="snippet">They have 99.6% positive feedback</div>227 </div>228 <div class="actions">229 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 17.3l5.1 3.1-1.4-5.9L20 9.8l-6-.5L12 4 10 9.3l-6 .5 4.3 3.7-1.4 5.9z"/></svg></div>230 </div>231 </div>232 233 <!-- eBay - Your discount on 11 Pro+ -->234 <div class="row">235 <div class="avatar">[IMG: eBay avatar]</div>236 <div class="mail-text">237 <div class="from-line">238 <div class="unread">eBay</div>239 <div class="date">Oct 9</div>240 </div>241 <div class="subject">Your discount on 11 Pro+ 5G 8/256Gb... h...</div>242 <div class="snippet">Buy it now for $517.13</div>243 </div>244 <div class="actions">245 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 17.3l5.1 3.1-1.4-5.9L20 9.8l-6-.5L12 4 10 9.3l-6 .5 4.3 3.7-1.4 5.9z"/></svg></div>246 </div>247 </div>248 249 <!-- eBay - offer (partially visible near bottom) -->250 <div class="row">251 <div class="avatar">[IMG: eBay avatar]</div>252 <div class="mail-text">253 <div class="from-line">254 <div class="unread">eBay</div>255 <div class="date">Oct 6</div>256 </div>257 <div class="subject">You have an offer from the seller, $25.50</div>258 <div class="snippet">Tap to view details</div>259 </div>260 <div class="actions">261 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 17.3l5.1 3.1-1.4-5.9L20 9.8l-6-.5L12 4 10 9.3l-6 .5 4.3 3.7-1.4 5.9z"/></svg></div>262 </div>263 </div>264 </div>265 </div>266 267 <!-- Compose floating button -->268 <div class="compose">269 <svg viewBox="0 0 24 24"><path d="M3 17.2V21h3.8l11-11-3.8-3.8-11 11zM18.5 6.5l-1.9-1.9 1.4-1.4 1.9 1.9-1.4 1.4z"/></svg>270 <span>Compose</span>271 </div>272 273 <!-- Bottom navigation bar -->274 <div class="bottom-bar">275 <div class="nav-item" style="background:#3a2d23;">276 <svg viewBox="0 0 24 24"><path d="M20 8l-8 5-8-5V6l8 5 8-5v2z"/><path d="M4 8v10h16V8l-8 5-8-5z"/></svg>277 <div class="badge">4</div>278 </div>279 <div class="nav-item">280 <svg viewBox="0 0 24 24"><rect x="5" y="5" width="14" height="14" rx="3" ry="3" fill="none" stroke="#cbb39f" stroke-width="2"/></svg>281 </div>282 <div class="gesture"></div>283 </div>284</div>285</body>286</html>