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>Inbox - UI</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#0f0f10; color:#fff;12 }13 14 /* Status bar */15 .statusbar {16 height:110px; padding:0 36px;17 background:#1a1a1c; display:flex; align-items:center; justify-content:space-between;18 box-sizing:border-box; font-weight:600; letter-spacing:0.2px;19 }20 .status-left { display:flex; align-items:center; gap:16px; font-size:42px; }21 .status-right { display:flex; align-items:center; gap:22px; font-size:30px; color:#e6e6e6; }22 .status-icon svg { display:block; }23 .battery svg rect, .battery svg path { fill:#e6e6e6; }24 25 /* Header */26 .header { padding:32px 36px 20px; }27 .title-row { display:flex; align-items:center; }28 .logo-placeholder {29 width:72px; height:72px; border-radius:36px;30 background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;31 display:flex; align-items:center; justify-content:center; font-size:22px;32 margin-right:22px;33 }34 .inbox-title { font-size:64px; font-weight:700; flex:1; }35 .search-btn { width:64px; height:64px; display:flex; align-items:center; justify-content:center; }36 .tabs-row { display:flex; align-items:center; gap:20px; margin-top:26px; }37 .tab {38 padding:20px 34px; border-radius:28px; font-size:30px; color:#cfcfcf;39 border:1px solid #3a3a3a;40 }41 .tab.active { background:#3a3a3a; color:#fff; border-color:#3a3a3a; }42 .filter-btn {43 margin-left:auto; padding:20px 38px; border-radius:28px; background:#3a3a3a; color:#eaeaea; font-size:30px;44 }45 46 /* List */47 .list { margin-top:8px; }48 .email-item {49 display:flex; align-items:flex-start; gap:26px;50 padding:28px 36px; border-top:1px solid #232326;51 }52 .email-item.highlighted { background:#3b3216; }53 .avatar {54 width:92px; height:92px; border-radius:50%;55 display:flex; align-items:center; justify-content:center; font-weight:700; font-size:34px; color:#fff;56 flex-shrink:0;57 }58 .avatar.icon {59 background:#2c2c2f; color:#bfbfbf;60 }61 .email-content { flex:1; }62 .from {63 font-size:40px; font-weight:700; margin-bottom:6px;64 }65 .subject {66 font-size:32px; font-weight:600; margin-bottom:6px; color:#eaeaea;67 }68 .snippet {69 font-size:28px; color:#9fa2a6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;70 }71 .time { font-size:28px; color:#9fa2a6; padding-top:8px; }72 .time.blue { color:#49a0ff; font-weight:700; }73 .badge {74 background:#2f6fff; color:#fff; width:48px; height:48px; border-radius:10px;75 display:flex; align-items:center; justify-content:center; font-weight:700; margin-left:auto; font-size:28px;76 }77 78 .separator {79 padding:22px 36px; font-size:30px; color:#b7b7b7; border-top:1px solid #232326; border-bottom:1px solid #232326;80 background:#121214;81 }82 83 /* Floating compose */84 .compose {85 position:absolute; right:36px; bottom:250px;86 background:#3B82F6; color:#fff; border-radius:60px; height:120px; width:560px;87 display:flex; align-items:center; justify-content:flex-start; gap:26px; padding:0 34px; box-shadow:0 8px 24px rgba(0,0,0,0.35);88 }89 .compose .label { font-size:40px; font-weight:700; }90 .compose .collapse {91 margin-left:auto; width:72px; height:72px; border-radius:36px; background:rgba(255,255,255,0.2);92 display:flex; align-items:center; justify-content:center;93 }94 95 /* Bottom navigation */96 .bottom-nav {97 position:absolute; left:0; bottom:90px; width:100%; height:150px; background:#101012;98 border-top:1px solid #26262a; display:flex; align-items:center; justify-content:space-around;99 }100 .nav-item { display:flex; flex-direction:column; align-items:center; gap:12px; color:#b8b8c0; font-size:26px; }101 .nav-item.active { color:#2f6fff; }102 .nav-icon svg { display:block; }103 104 /* Gesture bar */105 .gesture {106 position:absolute; left:50%; transform:translateX(-50%);107 bottom:20px; width:220px; height:12px; background:#e9e9ea; border-radius:6px; opacity:0.85;108 }109</style>110</head>111<body>112<div id="render-target">113 114 <!-- Status bar -->115 <div class="statusbar">116 <div class="status-left">117 <div>9:57</div>118 </div>119 <div class="status-right">120 <div class="status-icon wifi">121 <svg width="40" height="40" viewBox="0 0 24 24">122 <path d="M2 9c5-4 15-4 20 0" stroke="#e6e6e6" stroke-width="2" fill="none"/>123 <path d="M5 12c4-3 10-3 14 0" stroke="#e6e6e6" stroke-width="2" fill="none"/>124 <path d="M8 15c3-2 5-2 8 0" stroke="#e6e6e6" stroke-width="2" fill="none"/>125 <circle cx="12" cy="18" r="1.6" fill="#e6e6e6"/>126 </svg>127 </div>128 <div class="status-icon battery">129 <svg width="44" height="44" viewBox="0 0 26 26">130 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="#e6e6e6"/>131 <rect x="4" y="8" width="14" height="8" fill="#0f0f10"/>132 <rect x="4" y="8" width="11" height="8" fill="#e6e6e6"/>133 <rect x="21" y="10" width="3" height="4" rx="1" fill="#e6e6e6"/>134 </svg>135 </div>136 <div>100%</div>137 </div>138 </div>139 140 <!-- Header -->141 <div class="header">142 <div class="title-row">143 <div class="logo-placeholder">[IMG: Google Icon]</div>144 <div class="inbox-title">Inbox</div>145 <div class="search-btn">146 <svg width="54" height="54" viewBox="0 0 24 24">147 <circle cx="10" cy="10" r="7" stroke="#ffffff" stroke-width="2" fill="none"/>148 <line x1="15" y1="15" x2="22" y2="22" stroke="#ffffff" stroke-width="2"/>149 </svg>150 </div>151 </div>152 <div class="tabs-row">153 <div class="tab active">Focused</div>154 <div class="tab">Other</div>155 <div class="filter-btn">Filter</div>156 </div>157 </div>158 159 <!-- Emails list -->160 <div class="list">161 <div class="email-item">162 <div class="avatar icon">163 <svg width="44" height="44" viewBox="0 0 24 24">164 <rect x="3" y="6" width="18" height="12" rx="2" ry="2" fill="#bfbfbf"/>165 <path d="M3 8l9 5 9-5" stroke="#2c2c2f" stroke-width="2" fill="none"/>166 </svg>167 </div>168 <div class="email-content">169 <div class="from">Other emails</div>170 <div class="subject">Flipboard 10 For Today, FitOn</div>171 <div class="snippet">A few updates and curated items from your feeds…</div>172 </div>173 <div class="badge">2</div>174 </div>175 176 <div class="email-item">177 <div class="avatar" style="background:#69D285;">CR</div>178 <div class="email-content">179 <div class="from">Cerebra Research</div>180 <div class="subject">Business meeting with the Clients</div>181 <div class="snippet">We have a business meeting on August 30, 2023, …</div>182 </div>183 <div class="time blue">9:52 AM</div>184 </div>185 186 <div class="email-item">187 <div class="avatar" style="background:#E0635B;">CR</div>188 <div class="email-content">189 <div class="from">Cerebra Research</div>190 <div class="subject">M.O.M | Discussion on Multiple Judgments</div>191 <div class="snippet">Task Overlay should be not in this type of video as…</div>192 </div>193 <div class="time blue">8:09 AM</div>194 </div>195 196 <div class="separator">Yesterday</div>197 198 <div class="email-item">199 <div class="avatar" style="background:#5DA8F7;">F</div>200 <div class="email-content">201 <div class="from">Flipboard</div>202 <div class="subject">What's new on Flipboard: Stories from Politics, U…</div>203 <div class="snippet">A daily roundup of highlights from your Flipboard…</div>204 </div>205 <div class="time blue">Yesterday</div>206 </div>207 208 <div class="email-item">209 <div class="avatar" style="background:#5DA8F7;">F</div>210 <div class="email-content">211 <div class="from">Feedly</div>212 <div class="subject">The top publications in your industry</div>213 <div class="snippet">Bundles of sources for your industry</div>214 </div>215 <div class="time blue">Yesterday</div>216 </div>217 218 <div class="email-item">219 <div class="avatar" style="background:#E0E0E0; border:1px solid #BDBDBD; color:#757575;">[IMG]</div>220 <div class="email-content">221 <div class="from">Google</div>222 <div class="subject">Security alert</div>223 <div class="snippet">Microsoft apps & services was granted access to…</div>224 </div>225 <div class="time blue">Yesterday</div>226 </div>227 228 <div class="email-item">229 <div class="avatar" style="background:#C69A7E;">F</div>230 <div class="email-content">231 <div class="from">FitOn</div>232 <div class="subject">Unlock the power of protein for weight loss</div>233 <div class="snippet">Plus, 9 practical tips to hit your daily protein goal…</div>234 </div>235 <div class="time blue">Yesterday</div>236 </div>237 238 <div class="email-item highlighted">239 <div class="avatar" style="background:#afa27b;">F1</div>240 <div class="email-content">241 <div class="from">Flipboard 10 For Today</div>242 <div class="subject">Why some cities are more livable today</div>243 <div class="snippet">Plus, what you need in your daily reading list…</div>244 </div>245 </div>246 </div>247 248 <!-- Floating compose button -->249 <div class="compose">250 <div class="icon">251 <svg width="54" height="54" viewBox="0 0 24 24">252 <path d="M3 17v4h4l11-11-4-4L3 17z" fill="#ffffff"/>253 <path d="M14 4l4 4" stroke="#ffffff" stroke-width="2"/>254 </svg>255 </div>256 <div class="label">New mail</div>257 <div class="collapse">258 <svg width="34" height="34" viewBox="0 0 24 24">259 <path d="M8 5l8 7-8 7" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>260 </svg>261 </div>262 </div>263 264 <!-- Bottom navigation -->265 <div class="bottom-nav">266 <div class="nav-item active">267 <div class="nav-icon">268 <svg width="40" height="40" viewBox="0 0 24 24">269 <rect x="3" y="6" width="18" height="12" rx="2" ry="2" fill="#2f6fff"/>270 <path d="M3 8l9 5 9-5" stroke="#101012" stroke-width="2" fill="none"/>271 </svg>272 </div>273 <div>Mail</div>274 </div>275 <div class="nav-item">276 <div class="nav-icon">277 <svg width="40" height="40" viewBox="0 0 24 24">278 <rect x="3" y="4" width="18" height="16" rx="2" ry="2" fill="#b8b8c0"/>279 <line x1="3" y1="9" x2="21" y2="9" stroke="#101012" stroke-width="2"/>280 </svg>281 </div>282 <div>Calendar</div>283 </div>284 <div class="nav-item">285 <div class="nav-icon">286 <svg width="40" height="40" viewBox="0 0 24 24">287 <rect x="4" y="6" width="16" height="3" fill="#b8b8c0"/>288 <rect x="4" y="11" width="16" height="3" fill="#b8b8c0"/>289 <rect x="4" y="16" width="16" height="3" fill="#b8b8c0"/>290 </svg>291 </div>292 <div>Feed</div>293 </div>294 <div class="nav-item">295 <div class="nav-icon">296 <svg width="40" height="40" viewBox="0 0 24 24">297 <circle cx="6" cy="12" r="2" fill="#b8b8c0"/>298 <circle cx="12" cy="12" r="2" fill="#b8b8c0"/>299 <circle cx="18" cy="12" r="2" fill="#b8b8c0"/>300 </svg>301 </div>302 <div>More</div>303 </div>304 </div>305 306 <!-- Gesture bar -->307 <div class="gesture"></div>308 309</div>310</body>311</html>