GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile Email View - Dark</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: 'Roboto', Arial, sans-serif; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #121314;15 color: #EDEDED;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 width: 1080px;24 height: 84px;25 padding: 0 32px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 color: #ffffff;30 font-size: 34px;31 letter-spacing: 0.5px;32 }33 .status-icons {34 display: flex;35 align-items: center;36 gap: 24px;37 }38 .dot { width: 10px; height: 10px; border-radius: 50%; background: #E0E0E0; opacity: .9; display: inline-block; margin: 0 3px; }39 .battery {40 width: 60px; height: 28px; border: 3px solid #E0E0E0; border-radius: 6px; position: relative;41 }42 .battery::after { content: ""; position: absolute; right: -10px; top: 8px; width: 6px; height: 12px; background: #E0E0E0; border-radius: 2px; }43 .battery .level { position: absolute; top: 3px; left: 3px; right: 18px; bottom: 3px; background: #E0E0E0; }44 45 /* App bar */46 .app-bar {47 position: absolute;48 top: 84px;49 left: 0;50 width: 1080px;51 height: 120px;52 display: flex;53 align-items: center;54 padding: 0 24px;55 box-sizing: border-box;56 color: #EDEDED;57 }58 .app-actions {59 margin-left: auto;60 display: flex;61 align-items: center;62 gap: 36px;63 }64 .icon-btn svg { width: 56px; height: 56px; fill: none; stroke: #E0E0E0; stroke-width: 48; stroke-linecap: round; stroke-linejoin: round; }65 .kebab svg { stroke: none; fill: #E0E0E0; }66 67 /* Subject section */68 .subject-wrap {69 position: absolute;70 top: 220px;71 left: 36px;72 right: 36px;73 }74 .subject {75 font-size: 64px;76 font-weight: 600;77 line-height: 1.2;78 display: flex;79 align-items: center;80 gap: 18px;81 flex-wrap: wrap;82 }83 .chip-highlight {84 background: #F0DC8D;85 color: #1B1B1B;86 padding: 8px 12px;87 border-radius: 6px;88 }89 .label-chip {90 background: #2C2F33;91 color: #CFCFCF;92 border-radius: 18px;93 padding: 8px 16px;94 font-size: 30px;95 }96 .subject-right {97 position: absolute;98 right: 16px;99 top: 4px;100 }101 .star svg { width: 56px; height: 56px; fill: none; stroke: #E0E0E0; stroke-width: 36; }102 103 /* Sender card */104 .sender {105 position: absolute;106 top: 360px;107 left: 36px;108 right: 36px;109 display: flex;110 align-items: center;111 padding: 22px 0;112 border-bottom: 1px solid #25292D;113 }114 .avatar {115 width: 104px; height: 104px; border-radius: 50%;116 background: #7C5CF5;117 color: #1B1B1B;118 display: flex; align-items: center; justify-content: center;119 font-weight: 700; font-size: 52px;120 margin-right: 26px;121 }122 .sender-info { flex: 1; }123 .sender-row {124 display: flex; align-items: center; justify-content: space-between;125 }126 .sender-name { font-size: 40px; font-weight: 700; color: #FFFFFF; }127 .timestamp { font-size: 28px; color: #A9B0B6; }128 .to-line { margin-top: 8px; font-size: 30px; color: #A9B0B6; display: flex; align-items: center; gap: 10px; }129 .reply-inline svg { width: 56px; height: 56px; fill: none; stroke: #E0E0E0; stroke-width: 48; }130 .menu-inline svg { width: 40px; height: 40px; fill: #E0E0E0; }131 132 /* Message text */133 .message {134 position: absolute;135 top: 510px;136 left: 36px;137 right: 36px;138 font-size: 36px;139 color: #D7DCE1;140 line-height: 1.5;141 }142 143 /* Thread item */144 .thread-item {145 position: absolute;146 top: 680px;147 left: 36px;148 right: 36px;149 }150 .thread-header {151 display: flex; align-items: center; gap: 26px;152 }153 .avatar-img {154 width: 96px; height: 96px; border-radius: 50%;155 background: #E0E0E0; border: 1px solid #BDBDBD;156 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px; text-align: center; padding: 6px;157 }158 .thread-title { font-size: 40px; font-weight: 700; }159 .thread-meta { margin-left: auto; color: #A9B0B6; font-size: 28px; }160 .thread-sub { color: #A9B0B6; font-size: 30px; margin-top: 8px; }161 162 .details-card {163 margin-top: 24px;164 border: 1px solid #2C2F33;165 border-radius: 24px;166 padding: 26px;167 color: #C9CED3;168 font-size: 30px;169 }170 .details-row { display: flex; padding: 10px 0; }171 .details-row .label { width: 130px; color: #9AA3AB; }172 .details-card a { color: #5AA6FF; text-decoration: none; display: inline-block; margin-top: 16px; }173 174 .quoted { margin-top: 26px; }175 .quoted a { color: #5AA6FF; text-decoration: none; font-size: 30px; }176 177 /* Overlay menu on right */178 .overlay-menu {179 position: absolute;180 right: 18px;181 top: 980px;182 width: 520px;183 background: #1B1E22;184 border: 1px solid #2C3035;185 border-radius: 18px;186 box-shadow: 0 8px 24px rgba(0,0,0,0.6);187 padding: 18px 0;188 }189 .overlay-menu .item {190 padding: 26px 28px;191 font-size: 36px;192 color: #E6EAEE;193 }194 .overlay-menu .item + .item { border-top: 1px solid #292D31; }195 196 /* Reply buttons bar */197 .reply-bar {198 position: absolute;199 left: 36px; right: 36px;200 bottom: 190px;201 display: flex; gap: 26px;202 justify-content: flex-start;203 }204 .pill {205 border: 1px solid #2F353B;206 background: #1A1E22;207 color: #DDE2E7;208 padding: 22px 38px;209 border-radius: 48px;210 font-size: 34px;211 display: inline-flex; align-items: center; gap: 16px;212 }213 .pill svg { width: 42px; height: 42px; fill: none; stroke: #DDE2E7; stroke-width: 44; }214 215 /* Bottom mini tab and gesture bar */216 .mini-tab {217 position: absolute;218 left: 70px;219 bottom: 124px;220 width: 160px;221 height: 80px;222 background: #2A3036;223 border-radius: 40px;224 display: flex; align-items: center; justify-content: center;225 color: #FFF;226 font-size: 28px;227 gap: 10px;228 }229 .mini-tab .badge {230 background: #F5C6C9;231 color: #000;232 font-weight: 700;233 border-radius: 16px;234 padding: 2px 10px;235 font-size: 24px;236 }237 .gesture-bar {238 position: absolute;239 bottom: 48px;240 left: 50%;241 transform: translateX(-50%);242 width: 340px;243 height: 10px;244 background: #EDEDED;245 border-radius: 10px;246 opacity: .85;247 }248</style>249</head>250<body>251<div id="render-target">252 <!-- Status bar -->253 <div class="status-bar">254 <div>9:06</div>255 <div class="status-icons">256 <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>257 <svg width="40" height="40" viewBox="0 0 24 24" style="fill:#E0E0E0"><path d="M12 3C7 3 2.73 6.11 1 10.5L3 11c1.44-3.45 4.88-6 9-6s7.56 2.55 9 6l2-.5C21.27 6.11 17 3 12 3z"/><path d="M12 8c-3.31 0-6 2.69-6 6h2a4 4 0 1 1 8 0h2c0-3.31-2.69-6-6-6z"/></svg>258 <div class="battery"><div class="level"></div></div>259 </div>260 </div>261 262 <!-- App bar -->263 <div class="app-bar">264 <div class="icon-btn" title="Back">265 <svg viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>266 </div>267 <div class="app-actions">268 <div class="icon-btn" title="Download">269 <svg viewBox="0 0 24 24"><path d="M12 3v12"/><path d="M8 11l4 4 4-4"/><path d="M4 21h16"/></svg>270 </div>271 <div class="icon-btn" title="Delete">272 <svg viewBox="0 0 24 24"><path d="M3 6h18"/><path d="M8 6v14a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V6"/><path d="M9 6V4h6v2"/></svg>273 </div>274 <div class="icon-btn" title="Mark unread">275 <svg viewBox="0 0 24 24"><path d="M3 8l9-5 9 5v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M3 8l9 5 9-5"/></svg>276 </div>277 <div class="icon-btn kebab" title="More">278 <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>279 </div>280 </div>281 </div>282 283 <!-- Subject -->284 <div class="subject-wrap">285 <div class="subject">286 <span class="chip-highlight">upcoming</span>287 <span class="chip-highlight">events</span>288 <span class="label-chip">Inbox</span>289 </div>290 <div class="subject-right star">291 <svg viewBox="0 0 24 24"><path d="M12 3l2.9 6 6.6.6-5 4.2 1.6 6.2-6.1-3.6-6.1 3.6 1.6-6.2-5-4.2 6.6-.6z"/></svg>292 </div>293 </div>294 295 <!-- Sender block -->296 <div class="sender">297 <div class="avatar">M</div>298 <div class="sender-info">299 <div class="sender-row">300 <div class="sender-name">Michael Nguyen</div>301 <div class="timestamp">5 days ago</div>302 </div>303 <div class="to-line">to me304 <svg width="28" height="28" viewBox="0 0 24 24" style="fill:none;stroke:#A9B0B6;stroke-width:3">305 <path d="M6 9l6 6 6-6"/>306 </svg>307 </div>308 </div>309 <div class="reply-inline" title="Reply">310 <svg viewBox="0 0 24 24"><path d="M10 8l-6 4 6 4v-3h4a6 6 0 0 1 6 6v-1a7 7 0 0 0-7-7h-3z"/></svg>311 </div>312 <div class="menu-inline" style="margin-left:22px">313 <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>314 </div>315 </div>316 317 <!-- Message -->318 <div class="message">A concert and a continuing education seminar</div>319 320 <!-- Thread item 2 -->321 <div class="thread-item">322 <div class="thread-header">323 <div class="avatar-img">[IMG: Avatar]</div>324 <div>325 <div class="thread-title">Cerebra Research</div>326 <div class="thread-sub">to Michael</div>327 </div>328 <div class="thread-meta">5 days ago</div>329 <div class="reply-inline" style="margin-left:24px">330 <svg viewBox="0 0 24 24"><path d="M10 8l-6 4 6 4v-3h4a6 6 0 0 1 6 6v-1a7 7 0 0 0-7-7h-3z"/></svg>331 </div>332 <div class="menu-inline" style="margin-left:24px">333 <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>334 </div>335 </div>336 337 <div class="details-card">338 <div class="details-row"><div class="label">From</div><div>Cerebra Research • db... .com</div></div>339 <div class="details-row"><div class="label">To</div><div>Michael Nguyen • ngu...</div></div>340 <div class="details-row"><div class="label">Date</div><div>Oct 20, 2023, 9:44 PM</div></div>341 <a href="#">View security details</a>342 </div>343 344 <div class="quoted">345 Hi there! We just wanted to let you know we received your message and will be in touch346 </div>347 <div class="quoted"><a href="#">Show quoted text</a></div>348 </div>349 350 <!-- Overlay menu -->351 <div class="overlay-menu">352 <div class="item">Reply all</div>353 <div class="item">Forward</div>354 <div class="item">Add reaction</div>355 <div class="item">Add star</div>356 <div class="item">Translate</div>357 <div class="item">Print</div>358 <div class="item">Mark unread from here</div>359 </div>360 361 <!-- Reply buttons -->362 <div class="reply-bar">363 <div class="pill">364 <svg viewBox="0 0 24 24"><path d="M10 8l-6 4 6 4v-3h6a4 4 0 0 1 4 4"/></svg>365 Reply366 </div>367 <div class="pill">368 <svg viewBox="0 0 24 24"><path d="M10 8l-6 4 6 4v-3h4"/><path d="M22 8l-6 4 6 4v-3h-4"/></svg>369 Reply all370 </div>371 <div class="pill">372 <svg viewBox="0 0 24 24"><path d="M22 12l-6 4v-3H8V11h8V8z"/></svg>373 Forward374 </div>375 </div>376 377 <!-- Bottom mini tab and gesture bar -->378 <div class="mini-tab">379 ✉ <span class="badge">99+</span>380 </div>381 <div class="gesture-bar"></div>382</div>383</body>384</html>