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>Gmail Search - Dark</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #0F1419; /* dark app surface */15 color: #ECEFF1;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0; left: 0; right: 0;22 height: 82px;23 padding: 0 28px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 color: #E0E0E0;28 font-weight: 600;29 font-size: 36px;30 letter-spacing: 0.5px;31 }32 .status-icons { display: flex; align-items: center; gap: 18px; opacity: 0.85; }33 .dot { width: 8px; height: 8px; background: #E0E0E0; border-radius: 50%; display: inline-block; margin: 0 6px; opacity: 0.9; }34 35 /* Top search bar */36 .top-area {37 position: absolute;38 left: 0; right: 0; top: 92px;39 padding: 0 24px;40 }41 .search-bar {42 height: 96px;43 background: #27333A;44 border-radius: 48px;45 display: flex;46 align-items: center;47 padding: 0 24px;48 }49 .icon-btn {50 width: 64px; height: 64px;51 border-radius: 50%;52 display: flex; align-items: center; justify-content: center;53 color: #CFD8DC;54 }55 .search-input {56 flex: 1;57 color: #EAEFF2;58 font-size: 36px;59 letter-spacing: 0.2px;60 padding: 0 10px;61 }62 .search-input span { opacity: 0.95; }63 .chip-row {64 margin-top: 22px;65 display: flex; gap: 16px;66 overflow: hidden;67 }68 .chip {69 height: 72px; padding: 0 28px;70 border-radius: 36px;71 background: #1B2328;72 border: 1px solid #2E3A41;73 display: inline-flex; align-items: center; gap: 10px;74 color: #CFD8DC;75 font-size: 28px;76 }77 .chip svg { opacity: 0.7; }78 79 /* Sections */80 .content {81 position: absolute;82 top: 290px;83 left: 0; right: 0;84 padding: 0 24px 120px;85 }86 .section-title {87 color: #B0BEC5;88 font-size: 32px;89 margin: 28px 0 14px;90 }91 92 /* Email list */93 .email-item {94 display: flex;95 align-items: flex-start;96 gap: 24px;97 padding: 26px 8px;98 border-bottom: 1px solid rgba(255,255,255,0.06);99 }100 .avatar, .logo {101 width: 96px; height: 96px;102 border-radius: 50%;103 display: flex; align-items: center; justify-content: center;104 font-weight: 700;105 color: #0F1419;106 }107 .avatar { background: #9C7BD1; color: #1B1F23; font-size: 40px; }108 .logo {109 background: #E0E0E0; border: 1px solid #BDBDBD; color: #424242; font-size: 22px; text-align: center; padding: 8px;110 }111 .mail-body { flex: 1; min-width: 0; }112 .row-top {113 display: flex; align-items: center; justify-content: space-between;114 gap: 16px;115 }116 .sender {117 font-size: 34px; font-weight: 600; color: #ECEFF1;118 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;119 }120 .count { color: #90A4AE; margin-left: 8px; font-weight: 600; }121 .date { color: #90A4AE; font-size: 28px; }122 .subject {123 margin-top: 8px;124 font-size: 34px;125 font-weight: 700;126 color: #EDEFF2;127 white-space: nowrap;128 overflow: hidden; text-overflow: ellipsis;129 }130 .snippet {131 margin-top: 6px;132 font-size: 28px;133 color: #9FB1BA;134 white-space: nowrap;135 overflow: hidden; text-overflow: ellipsis;136 }137 .meta-row {138 margin-top: 10px;139 display: flex; align-items: center; gap: 10px;140 }141 .label {142 font-size: 24px; color: #B0BEC5;143 padding: 6px 14px;144 background: #1B2328;145 border: 1px solid #2E3A41;146 border-radius: 16px;147 }148 .star {149 width: 44px; height: 44px;150 margin-left: auto;151 opacity: 0.8;152 }153 mark {154 background: #F3DE6D;155 color: #0F1419;156 border-radius: 6px;157 padding: 2px 6px;158 }159 160 /* Bottom toast-like indicator and gesture bar */161 .bottom-overlay {162 position: absolute;163 left: 0; right: 0; bottom: 110px;164 display: flex; justify-content: center;165 pointer-events: none;166 }167 .toast {168 background: rgba(38,47,54,0.92);169 color: #EAEFF2;170 min-width: 260px;171 height: 86px;172 padding: 0 24px;173 border-radius: 44px;174 display: flex; align-items: center; gap: 16px;175 box-shadow: 0 6px 18px rgba(0,0,0,0.4);176 }177 .toast .badge {178 position: relative;179 width: 54px; height: 38px;180 border-radius: 8px;181 background: #B0BEC5;182 display: flex; align-items: center; justify-content: center;183 }184 .toast .bubble {185 position: absolute; top: -10px; right: -18px;186 background: #F48FB1; color: #1B1F23; font-weight: 700;187 border-radius: 18px;188 padding: 4px 10px; font-size: 22px;189 }190 .gesture {191 position: absolute; left: 50%; transform: translateX(-50%);192 bottom: 42px; width: 290px; height: 10px; border-radius: 8px;193 background: #9AA5AE;194 opacity: 0.6;195 }196</style>197</head>198<body>199<div id="render-target">200 201 <!-- Status bar -->202 <div class="status-bar">203 <div>9:01</div>204 <div class="status-icons">205 <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>206 <span class="dot"></span>207 <svg width="34" height="34" viewBox="0 0 24 24" fill="#E0E0E0" xmlns="http://www.w3.org/2000/svg"><path d="M12 22c4.97 0 9-4.03 9-9h-2a7 7 0 1 1-7-7V4c-4.97 0-9 4.03-9 9s4.03 9 9 9z"/></svg>208 <svg width="34" height="34" viewBox="0 0 24 24" fill="#E0E0E0" xmlns="http://www.w3.org/2000/svg"><path d="M12 20a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zm6-6v-5a6 6 0 1 0-12 0v5l-2 2v1h16v-1l-2-2z"/></svg>209 <svg width="34" height="34" viewBox="0 0 24 24" fill="#E0E0E0" xmlns="http://www.w3.org/2000/svg"><path d="M20 7.5V18a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7.5l8-4 8 4z"/></svg>210 <svg width="34" height="34" viewBox="0 0 24 24" fill="#E0E0E0" xmlns="http://www.w3.org/2000/svg"><path d="M16 4h2a2 2 0 0 1 2 2v10l-4-3-4 3V6a2 2 0 0 1 2-2h2zM4 6a2 2 0 0 1 2-2h6v2H6v12h8v2H6a2 2 0 0 1-2-2V6z"/></svg>211 </div>212 </div>213 214 <!-- Search area -->215 <div class="top-area">216 <div class="search-bar">217 <div class="icon-btn">218 <svg width="34" height="34" viewBox="0 0 24 24" fill="#CFD8DC" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 19l-7-7 7-7v14z"/></svg>219 </div>220 <div class="search-input"><span>upcoming events</span></div>221 <div class="icon-btn">222 <svg width="28" height="28" viewBox="0 0 24 24" fill="#CFD8DC" xmlns="http://www.w3.org/2000/svg"><path d="M18.3 5.71L12 12l6.3 6.29-1.41 1.42L10.59 13.4 4.29 19.71 2.88 18.3 9.17 12 2.88 5.71 4.29 4.3l6.3 6.29 6.3-6.29 1.41 1.41z"/></svg>223 </div>224 </div>225 226 <div class="chip-row">227 <div class="chip">Labels228 <svg width="18" height="18" viewBox="0 0 24 24" fill="#CFD8DC" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5H7z"/></svg>229 </div>230 <div class="chip">From231 <svg width="18" height="18" viewBox="0 0 24 24" fill="#CFD8DC" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5H7z"/></svg>232 </div>233 <div class="chip">To234 <svg width="18" height="18" viewBox="0 0 24 24" fill="#CFD8DC" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5H7z"/></svg>235 </div>236 <div class="chip">Attachment237 <svg width="18" height="18" viewBox="0 0 24 24" fill="#CFD8DC" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5H7z"/></svg>238 </div>239 </div>240 </div>241 242 <!-- Content -->243 <div class="content">244 <div class="section-title">Top results</div>245 246 <!-- Top result item -->247 <div class="email-item">248 <div class="avatar">M</div>249 <div class="mail-body">250 <div class="row-top">251 <div class="sender">Michael, me <span class="count">2</span></div>252 <div class="date">Oct 20</div>253 </div>254 <div class="subject"><mark>upcoming</mark> <mark>events</mark></div>255 <div class="snippet">A concert and a continuing educatio...</div>256 <div class="meta-row">257 <div class="label">Inbox</div>258 <svg class="star" viewBox="0 0 24 24" fill="none" stroke="#90A4AE" stroke-width="1.6" xmlns="http://www.w3.org/2000/svg"><path d="M12 17.3l-5.5 3 1.5-6.2-4.7-4 6.3-.5L12 3l2.4 6.6 6.3.5-4.7 4 1.5 6.2z"/></svg>259 </div>260 </div>261 </div>262 263 <div class="section-title" style="margin-top: 18px;">Results in mail</div>264 265 <!-- Result item 2 -->266 <div class="email-item">267 <div class="logo">[IMG: DICK'S Logo]</div>268 <div class="mail-body">269 <div class="row-top">270 <div class="sender">DICK'S | Clearance</div>271 <div class="date">Oct 21</div>272 </div>273 <div class="subject">This email has up to 70% off clearance 🤩</div>274 <div class="snippet">Click here to view your DICK'S Sporti...</div>275 <div class="meta-row">276 <div class="label">Inbox</div>277 <svg class="star" viewBox="0 0 24 24" fill="none" stroke="#90A4AE" stroke-width="1.6" xmlns="http://www.w3.org/2000/svg"><path d="M12 17.3l-5.5 3 1.5-6.2-4.7-4 6.3-.5L12 3l2.4 6.6 6.3.5-4.7 4 1.5 6.2z"/></svg>278 </div>279 </div>280 </div>281 282 <!-- Result item 3 -->283 <div class="email-item">284 <div class="avatar">M</div>285 <div class="mail-body">286 <div class="row-top">287 <div class="sender">Michael, me <span class="count">2</span></div>288 <div class="date">Oct 20</div>289 </div>290 <div class="subject"><mark>upcoming</mark> <mark>events</mark></div>291 <div class="snippet">Hi there! We just wanted to let you kn...</div>292 <div class="meta-row">293 <div class="label">Inbox</div>294 <svg class="star" viewBox="0 0 24 24" fill="none" stroke="#90A4AE" stroke-width="1.6" xmlns="http://www.w3.org/2000/svg"><path d="M12 17.3l-5.5 3 1.5-6.2-4.7-4 6.3-.5L12 3l2.4 6.6 6.3.5-4.7 4 1.5 6.2z"/></svg>295 </div>296 </div>297 </div>298 299 <!-- Result item 4 -->300 <div class="email-item">301 <div class="logo">[IMG: DICK'S Logo]</div>302 <div class="mail-body">303 <div class="row-top">304 <div class="sender">DICK'S Sporting Goods</div>305 <div class="date">Oct 18</div>306 </div>307 <div class="subject">You deserve it... Have you seen this yet?</div>308 <div class="snippet">Click here to view your DICK'S Sporti...</div>309 <div class="meta-row">310 <div class="label">Inbox</div>311 <svg class="star" viewBox="0 0 24 24" fill="none" stroke="#90A4AE" stroke-width="1.6" xmlns="http://www.w3.org/2000/svg"><path d="M12 17.3l-5.5 3 1.5-6.2-4.7-4 6.3-.5L12 3l2.4 6.6 6.3.5-4.7 4 1.5 6.2z"/></svg>312 </div>313 </div>314 </div>315 316 <!-- Result item 5 -->317 <div class="email-item">318 <div class="logo">[IMG: DICK'S Logo]</div>319 <div class="mail-body">320 <div class="row-top">321 <div class="sender">DICK'S | Fall Savings Kickoff</div>322 <div class="date">Oct 11</div>323 </div>324 <div class="subject">Ready, set, save! Up to 50% off deals ar...</div>325 <div class="snippet">Click here to view your DICK'S Sporti...</div>326 <div class="meta-row">327 <div class="label">Inbox</div>328 <svg class="star" viewBox="0 0 24 24" fill="none" stroke="#90A4AE" stroke-width="1.6" xmlns="http://www.w3.org/2000/svg"><path d="M12 17.3l-5.5 3 1.5-6.2-4.7-4 6.3-.5L12 3l2.4 6.6 6.3.5-4.7 4 1.5 6.2z"/></svg>329 </div>330 </div>331 </div>332 333 <!-- Result item 6 -->334 <div class="email-item">335 <div class="logo">[IMG: DICK'S Logo]</div>336 <div class="mail-body">337 <div class="row-top">338 <div class="sender">DICK'S | Clearance</div>339 <div class="date">Oct 11</div>340 </div>341 <div class="subject">Get up to 70% off clearance</div>342 <div class="snippet">Click here to view your DICK'S Sporti...</div>343 <div class="meta-row">344 <div class="label">Inbox</div>345 <svg class="star" viewBox="0 0 24 24" fill="none" stroke="#90A4AE" stroke-width="1.6" xmlns="http://www.w3.org/2000/svg"><path d="M12 17.3l-5.5 3 1.5-6.2-4.7-4 6.3-.5L12 3l2.4 6.6 6.3.5-4.7 4 1.5 6.2z"/></svg>346 </div>347 </div>348 </div>349 350 </div>351 352 <!-- Bottom overlays -->353 <div class="bottom-overlay">354 <div class="toast">355 <div class="badge">356 <svg width="28" height="20" viewBox="0 0 24 24" fill="#263238" xmlns="http://www.w3.org/2000/svg"><path d="M20 8v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8l8 5 8-5zM18 6H6l6 4 6-4z"/></svg>357 <div class="bubble">99+</div>358 </div>359 </div>360 </div>361 <div class="gesture"></div>362 363</div>364</body>365</html>