GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Mobile Email View - Render</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #121212;13 color: #eaeaea;14 }15 16 /* Status bar */17 .status-bar {18 height: 80px;19 padding: 0 24px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 color: #ffffff;24 font-weight: 600;25 font-size: 36px;26 }27 .status-icons {28 display: flex;29 gap: 24px;30 align-items: center;31 }32 .status-dot {33 width: 28px; height: 28px; background:#d9d9d9; border-radius:50%;34 opacity: .8;35 }36 37 /* Top actions */38 .top-actions {39 height: 110px;40 display: flex;41 align-items: center;42 padding: 0 20px;43 }44 .left-back {45 width: 72px; height:72px; display:flex; align-items:center; justify-content:center;46 }47 .icon-btn {48 width: 72px; height: 72px;49 display: flex; align-items: center; justify-content: center;50 margin-left: 18px;51 border-radius: 14px;52 }53 .icon-btn svg, .left-back svg { fill: #e0e0e0; width: 46px; height: 46px; }54 .icon-btn.more { margin-left: 8px; }55 56 /* Title */57 .title-area {58 padding: 10px 24px 24px 24px;59 }60 .email-title {61 font-size: 54px;62 font-weight: 800;63 letter-spacing: 1px;64 }65 .chip {66 display: inline-block;67 background: #2b2b2b;68 color: #cfcfcf;69 padding: 12px 22px;70 border-radius: 28px;71 font-size: 30px;72 margin-left: 18px;73 vertical-align: middle;74 }75 .title-right {76 position: absolute; right: 24px; top: 200px;77 }78 .star svg { fill: #cfcfcf; width: 46px; height: 46px; }79 80 /* Sender row */81 .sender-row {82 display: flex;83 align-items: center;84 padding: 24px;85 gap: 24px;86 }87 .avatar {88 width: 96px; height: 96px; border-radius: 50%;89 display:flex; align-items:center; justify-content:center;90 font-size: 48px; font-weight:700;91 }92 .avatar.grey { background:#8c99a5; color:#27323b; }93 .avatar.orange { background:#f1a33a; color:#402200; }94 .sender-info {95 flex: 1;96 }97 .sender-name {98 font-weight: 800; font-size: 42px;99 }100 .sender-meta {101 color: #b0b0b0; font-size: 30px; margin-top: 6px;102 }103 .row-actions {104 display:flex; gap:20px;105 }106 .row-actions svg { width: 42px; height: 42px; fill:#cfcfcf; }107 108 /* Body text */109 .body-text {110 padding: 20px 24px 0 24px;111 font-size: 40px;112 color: #e0e0e0;113 }114 115 /* Reply block */116 .reply-block {117 margin-top: 30px;118 padding: 24px;119 }120 .reply-header {121 display: flex; align-items: center; gap: 24px;122 }123 .reply-name {124 font-size: 42px; font-weight: 800;125 }126 .reply-time {127 color:#b0b0b0; font-size:30px; margin-left: 12px;128 }129 .reply-to {130 color:#b0b0b0; font-size: 30px; margin-top: 6px;131 }132 .reply-text {133 margin-top: 18px; font-size: 40px;134 }135 .link {136 color:#72a5ff; font-size:34px; margin-top: 18px;137 }138 139 /* Quoted block */140 .quoted {141 margin: 24px;142 padding: 18px 24px;143 border-left: 6px solid #c78cff;144 color: #d8c8ff;145 background: rgba(255,255,255,0.02);146 font-size: 36px;147 line-height: 1.45;148 }149 150 /* Snackbar */151 .snackbar {152 position: absolute;153 left: 16px; right:16px; bottom: 180px;154 height: 120px;155 background: #e9e9ed;156 color: #1c1c1c;157 border-radius: 22px;158 display: flex; align-items: center; justify-content: space-between;159 padding: 0 34px;160 font-size: 40px; font-weight: 600;161 }162 .snackbar .undo {163 color: #2a5bd7; font-weight: 800;164 }165 166 /* Bottom nav */167 .bottom-nav {168 position: absolute; left:0; right:0; bottom: 0;169 height: 160px;170 background: #1a1a1a;171 display: flex; align-items: center; justify-content: center; gap: 160px;172 }173 .pill {174 width: 220px; height: 110px; background:#2b2f35; border-radius: 60px;175 display: flex; align-items: center; justify-content: center; position: relative;176 }177 .pill svg { width: 64px; height: 64px; fill:#e0e0e0; }178 .badge {179 position: absolute; right: 20px; top: -12px;180 background:#e38182; color:#ffffff; font-weight:800; font-size: 32px;181 border-radius: 26px; padding: 6px 14px;182 }183</style>184</head>185<body>186<div id="render-target">187 188 <!-- Status Bar -->189 <div class="status-bar">190 <div>10:17</div>191 <div class="status-icons">192 <div class="status-dot"></div>193 <div class="status-dot"></div>194 <div class="status-dot"></div>195 </div>196 </div>197 198 <!-- Top actions -->199 <div class="top-actions">200 <div class="left-back">201 <svg viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></svg>202 </div>203 <div style="flex:1"></div>204 <div class="icon-btn">205 <!-- Archive/Download -->206 <svg viewBox="0 0 24 24"><path d="M12 3v10m0 0l-4-4m4 4l4-4M5 21h14v-6H5z"/></svg>207 </div>208 <div class="icon-btn">209 <!-- Trash -->210 <svg viewBox="0 0 24 24"><path d="M7 8v11h10V8M9 8V6h6v2M4 8h16"/></svg>211 </div>212 <div class="icon-btn">213 <!-- Mail/Unread -->214 <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3V6zm9 6l9-6H3l9 6z"/></svg>215 </div>216 <div class="icon-btn more">217 <!-- More vertical -->218 <svg viewBox="0 0 24 24"><path d="M12 5.5a1.5 1.5 0 110-3 1.5 1.5 0 010 3zm0 8a1.5 1.5 0 110-3 1.5 1.5 0 010 3zm0 8a1.5 1.5 0 110-3 1.5 1.5 0 010 3z"/></svg>219 </div>220 </div>221 222 <!-- Title -->223 <div class="title-area">224 <div class="email-title">OFFICIAL WEEKEND PARTY <span class="chip">Inbox</span></div>225 <div class="title-right star">226 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.4 1.2-6.9L1 8.9l6.9-1 3.1-6.3 3.1 6.3 6.9 1-5 4.9 1.2 6.9z"/></svg>227 </div>228 </div>229 230 <!-- Sender Row -->231 <div class="sender-row">232 <div class="avatar grey">C</div>233 <div class="sender-info">234 <div class="sender-name">Cerebra Research <span style="color:#b0b0b0; font-size:30px; font-weight:600; margin-left:12px;">Yesterday</span></div>235 <div class="sender-meta">to me ▾</div>236 </div>237 <div class="row-actions">238 <svg viewBox="0 0 24 24"><path d="M16 12l-6-6v12l6-6z"/></svg>239 <svg viewBox="0 0 24 24"><path d="M12 5.5a1.5 1.5 0 110-3 1.5 1.5 0 010 3zm0 8a1.5 1.5 0 110-3 1.5 1.5 0 010 3zm0 8a1.5 1.5 0 110-3 1.5 1.5 0 010 3z"/></svg>240 </div>241 </div>242 243 <!-- Body text -->244 <div class="body-text">you are welcome to the party in the mail body.</div>245 246 <!-- Reply Block -->247 <div class="reply-block">248 <div class="reply-header">249 <div class="avatar orange">C</div>250 <div style="flex:1">251 <div class="reply-name">Queued <span class="reply-time">10:17 AM</span></div>252 <div class="reply-to">to Cerebra ▾</div>253 </div>254 <div class="row-actions">255 <svg viewBox="0 0 24 24"><path d="M8 12l6 6V6l-6 6z"/></svg>256 <svg viewBox="0 0 24 24"><path d="M12 5.5a1.5 1.5 0 110-3 1.5 1.5 0 010 3zm0 8a1.5 1.5 0 110-3 1.5 1.5 0 010 3zm0 8a1.5 1.5 0 110-3 1.5 1.5 0 010 3z"/></svg>257 </div>258 </div>259 <div class="reply-text">Thanks a lot.</div>260 <div class="link">Hide quoted text</div>261 </div>262 263 <!-- Quoted text block -->264 <div class="quoted">265 On Wed, Aug 9, 2023, 12:57 PM Cerebra Research <dbwscratch.test.id8@gmail.com> wrote:<br>266 ┃ you are welcome to the party in the mail body.267 </div>268 269 <!-- Snackbar -->270 <div class="snackbar">271 <div>Sent</div>272 <div class="undo">Undo</div>273 </div>274 275 <!-- Bottom navigation -->276 <div class="bottom-nav">277 <div class="pill">278 <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3V6zm9 6l9-6H3l9 6z"/></svg>279 <div class="badge">89</div>280 </div>281 <div class="pill">282 <svg viewBox="0 0 24 24"><path d="M6 10h4v4H6v-4zm8 0h4v4h-4v-4zM4 5h16v2H4V5zm0 12h16v2H4v-2z"/></svg>283 </div>284 </div>285 286</div>287</body>288</html>