GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Shopping List - Email Thread Mock</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: #ECECEC;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 90px;23 padding: 0 28px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 color: #E0E0E0;28 font-size: 34px;29 }30 .status-icons {31 display: flex;32 gap: 24px;33 align-items: center;34 }35 .icon {36 width: 48px; height: 48px; fill: #E0E0E0;37 }38 39 /* App bar */40 .app-bar {41 position: absolute;42 top: 90px;43 left: 0;44 width: 1080px;45 height: 140px;46 display: flex;47 align-items: center;48 padding: 0 24px;49 }50 .app-actions {51 margin-left: auto;52 display: flex;53 gap: 40px;54 align-items: center;55 }56 57 /* Title */58 .thread-title {59 position: absolute;60 top: 230px;61 left: 40px;62 font-size: 64px;63 font-weight: 600;64 letter-spacing: 0.5px;65 }66 .label-pill {67 position: absolute;68 top: 248px;69 left: 420px;70 font-size: 34px;71 color: #BDBDBD;72 background: #1E1E1E;73 border: 1px solid #2A2A2A;74 padding: 10px 18px;75 border-radius: 24px;76 }77 .star {78 position: absolute;79 top: 260px;80 right: 40px;81 width: 48px; height: 48px; fill: #8D8D8D;82 }83 84 /* Thread list */85 .thread {86 position: absolute;87 top: 340px;88 left: 0;89 width: 100%;90 }91 .item {92 padding: 30px 40px;93 border-top: 1px solid #1F1F1F;94 }95 .header {96 display: flex;97 align-items: center;98 gap: 26px;99 }100 .avatar {101 width: 96px; height: 96px;102 border-radius: 50%;103 background: #E0E0E0;104 border: 1px solid #BDBDBD;105 display: flex; align-items: center; justify-content: center;106 color: #757575;107 font-size: 22px;108 }109 .title-lines {110 flex: 1;111 }112 .sender {113 font-size: 40px; font-weight: 600;114 }115 .date {116 color: #B5B5B5; font-size: 32px; margin-left: 16px;117 }118 .snippet {119 margin-top: 8px; color: #CFCFCF; font-size: 36px;120 }121 122 /* Message blocks */123 .message {124 padding: 36px 40px 28px 40px;125 border-top: 1px solid #1F1F1F;126 }127 .msg-head {128 display: flex; align-items: center;129 }130 .avatar-purple {131 width: 104px; height: 104px; border-radius: 50%;132 background: #7E57C2; color: #FFF; display: flex; align-items: center; justify-content: center; font-size: 44px; font-weight: 600;133 margin-right: 24px;134 }135 .msg-meta {136 flex: 1;137 }138 .name {139 font-size: 40px; font-weight: 600;140 }141 .time {142 font-size: 32px; color: #B5B5B5; margin-left: 16px;143 }144 .to-line {145 font-size: 32px; color: #C4C4C4; margin-top: 6px;146 }147 .msg-actions {148 display: flex; gap: 32px; align-items: center;149 }150 .body-text {151 margin-top: 36px; font-size: 40px;152 }153 .link {154 margin-top: 26px; font-size: 34px; color: #8AB4F8;155 }156 157 /* Forwarded block */158 .forwarded {159 margin-top: 24px;160 border-top: 1px solid #1F1F1F;161 padding: 24px 40px 24px 40px;162 }163 .f-line {164 font-size: 34px; color: #C9C9C9; margin: 8px 0;165 }166 .f-divider {167 color: #A6A6A6; font-size: 34px; margin-bottom: 16px;168 }169 170 /* Snackbar */171 .snackbar {172 position: absolute;173 bottom: 210px;174 left: 40px;175 width: 1000px;176 height: 120px;177 background: #2A2A2A;178 border: 1px solid #3A3A3A;179 border-radius: 20px;180 display: flex; align-items: center; justify-content: space-between;181 padding: 0 28px;182 }183 .snackbar .undo {184 color: #8AB4F8; font-weight: 600; font-size: 36px;185 }186 .snackbar .msg {187 font-size: 40px; color: #E6E6E6;188 }189 190 /* Bottom actions */191 .fab-row {192 position: absolute;193 bottom: 120px;194 left: 60px;195 width: 960px;196 display: flex;197 align-items: center;198 justify-content: flex-start;199 gap: 40px;200 }201 .fab {202 width: 140px; height: 140px; background: #263238; border-radius: 70px; position: relative;203 display: flex; align-items: center; justify-content: center;204 box-shadow: 0 6px 18px rgba(0,0,0,0.4);205 }206 .badge {207 position: absolute; top: -6px; right: -6px;208 background: #E57373; color: #fff; width: 60px; height: 60px; border-radius: 30px;209 display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 34px; border: 3px solid #121212;210 }211 .camera-btn {212 width: 120px; height: 120px; border-radius: 26px; background: #263238;213 display: flex; align-items: center; justify-content: center;214 box-shadow: 0 6px 18px rgba(0,0,0,0.4);215 }216 217 /* Home pill */218 .home-pill {219 position: absolute;220 bottom: 40px;221 left: 340px;222 width: 400px; height: 12px; background: #FFFFFF;223 opacity: 0.7; border-radius: 8px;224 }225</style>226</head>227<body>228<div id="render-target">229 230 <!-- Status Bar -->231 <div class="status-bar">232 <div>10:44</div>233 <div class="status-icons">234 <!-- simple indicators -->235 <svg class="icon" viewBox="0 0 24 24"><path d="M12 2l5 3-5 3-5-3 5-3z" /></svg>236 <svg class="icon" viewBox="0 0 24 24"><path d="M18 5a1 1 0 010 2H6a1 1 0 010-2h12zm3 6a1 1 0 01-1 1H4a1 1 0 110-2h16a1 1 0 011 1zm-3 6a1 1 0 010 2H6a1 1 0 010-2h12z"/></svg>237 <svg class="icon" viewBox="0 0 24 24"><path d="M17 3h4v2h-4zM3 21h18v-2H3v2zM5 5h12v12H5V5z"/></svg>238 </div>239 </div>240 241 <!-- App Bar -->242 <div class="app-bar">243 <!-- back arrow -->244 <svg class="icon" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke="#E0E0E0" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>245 246 <div class="app-actions">247 <!-- download -->248 <svg class="icon" viewBox="0 0 24 24"><path d="M12 3v10m0 0l4-4m-4 4L8 9M4 21h16" stroke="#E0E0E0" stroke-width="2" fill="none" stroke-linecap="round"/></svg>249 <!-- trash -->250 <svg class="icon" viewBox="0 0 24 24"><path d="M5 7h14M9 7V5h6v2m-9 0l1 12h10l1-12" stroke="#E0E0E0" stroke-width="2" fill="none" stroke-linecap="round"/></svg>251 <!-- mail -->252 <svg class="icon" viewBox="0 0 24 24"><path d="M3 6h18v12H3V6zm18 0L12 13 3 6" stroke="#E0E0E0" stroke-width="2" fill="none" stroke-linecap="round"/></svg>253 <!-- more -->254 <svg class="icon" 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>255 </div>256 </div>257 258 <!-- Title -->259 <div class="thread-title">Shopping list</div>260 <div class="label-pill">Inbox</div>261 <svg class="star" viewBox="0 0 24 24"><path d="M12 3l3 6 6 1-4.5 4.3L17 21l-5-3-5 3 1.5-6.7L3 10l6-1 3-6z"/></svg>262 263 <!-- First item: thread summary -->264 <div class="thread">265 <div class="item">266 <div class="header">267 <div class="avatar">[IMG: Avatar]</div>268 <div class="title-lines">269 <div class="sender">Cerebra Research <span class="date">Sep 26</span></div>270 <div class="snippet">Books Pen Stamps Plants Desk Chair</div>271 </div>272 </div>273 </div>274 275 <!-- Message 1 -->276 <div class="message">277 <div class="msg-head">278 <div class="avatar-purple">L</div>279 <div class="msg-meta">280 <div class="name">lucas kramer <span class="time">10:25 PM</span></div>281 <div class="to-line">to Cerebra ▾</div>282 </div>283 <div class="msg-actions">284 <!-- reply -->285 <svg class="icon" viewBox="0 0 24 24"><path d="M10 8V5l-7 7 7 7v-3h6a5 5 0 000-10h-6z" /></svg>286 <!-- more -->287 <svg class="icon" 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>288 </div>289 </div>290 <div class="body-text">Confirm the order.</div>291 <div class="link">Show quoted text</div>292 </div>293 294 <!-- Message 2 -->295 <div class="message">296 <div class="msg-head">297 <div class="avatar-purple">L</div>298 <div class="msg-meta">299 <div class="name">lucas kramer <span class="time">10:44 PM</span></div>300 <div class="to-line">to evankramer ▾</div>301 </div>302 <div class="msg-actions">303 <!-- reply -->304 <svg class="icon" viewBox="0 0 24 24"><path d="M10 8V5l-7 7 7 7v-3h6a5 5 0 000-10h-6z" /></svg>305 <!-- more -->306 <svg class="icon" 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>307 </div>308 </div>309 <div class="link" style="margin-top: 30px;">Hide quoted text</div>310 </div>311 312 <!-- Forwarded content -->313 <div class="forwarded">314 <div class="f-divider">---------- Forwarded message ---------</div>315 <div class="f-line">From: lucas kramer <lucaskramer733@gmail.com></div>316 <div class="f-line">Date: Wed, Sep 27, 2023, 10:25 PM</div>317 <div class="f-line">Subject: Re: Shopping list</div>318 <div class="f-line">To: Cerebra Research <dbwscratch.test.id11@gmail.com></div>319 320 <div class="body-text" style="margin-top: 26px;">Confirm the order.</div>321 </div>322 </div>323 324 <!-- Snackbar -->325 <div class="snackbar">326 <div class="msg">Sent</div>327 <div class="undo">Undo</div>328 </div>329 330 <!-- Bottom floating actions -->331 <div class="fab-row">332 <div class="fab">333 <svg class="icon" viewBox="0 0 24 24"><path d="M3 7l9 6 9-6v10H3V7zm0 0l9 6 9-6" stroke="#fff" stroke-width="2" fill="none"/></svg>334 <div class="badge">4</div>335 </div>336 <div class="camera-btn">337 <svg class="icon" viewBox="0 0 24 24"><path d="M7 7h4l2-2h4l2 2h2v12H3V7h4zm5 3a5 5 0 100 10 5 5 0 000-10z" fill="#E0E0E0"/></svg>338 </div>339 </div>340 341 <!-- Home pill -->342 <div class="home-pill"></div>343 344</div>345</body>346</html>