GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Shopping List Email UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #121212; color: #EDEDED; font-family: Arial, Helvetica, sans-serif;11 }12 .status-bar {13 height: 90px; padding: 0 32px; display: flex; align-items: center; justify-content: space-between;14 color: #FFFFFF; font-size: 32px;15 }16 .status-right { display: flex; align-items: center; gap: 24px; }17 .icon-dot { width: 24px; height: 24px; border-radius: 12px; background: #9E9E9E; opacity: 0.8; }18 .top-actions {19 height: 120px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between;20 }21 .icon-btn { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 28px; }22 .icon svg { width: 36px; height: 36px; }23 .icon path, .icon circle { fill: #E0E0E0; }24 .header-title {25 padding: 10px 24px 24px 24px;26 }27 .title-row {28 display: flex; align-items: center; gap: 16px;29 }30 .title {31 font-size: 64px; font-weight: 600; letter-spacing: 0.2px;32 }33 .chip {34 font-size: 28px; padding: 8px 16px; border-radius: 20px; background: #2A2A2A; color: #CFCFCF; border: 1px solid #3A3A3A;35 }36 37 .message {38 padding: 24px; border-top: 1px solid #292929;39 }40 .msg-header {41 display: flex; align-items: center; justify-content: space-between;42 }43 .sender {44 display: flex; align-items: center; gap: 24px;45 }46 .avatar {47 width: 96px; height: 96px; border-radius: 50%;48 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;49 display: flex; align-items: center; justify-content: center; font-size: 22px;50 }51 .sender-info { display: flex; flex-direction: column; }52 .sender-line { display: flex; align-items: baseline; gap: 12px; }53 .sender-name { font-size: 36px; font-weight: 600; }54 .sender-time { font-size: 28px; color: #BDBDBD; }55 .to-line { font-size: 28px; color: #BDBDBD; display: flex; align-items: center; gap: 8px; }56 .star svg { width: 40px; height: 40px; }57 .star path { fill: #9E9E9E; }58 59 .msg-body { margin-top: 24px; font-size: 34px; line-height: 1.6; color: #EDEDED; }60 .divider { height: 1px; background: #292929; margin: 0 24px; }61 62 .purple-avatar {63 background: #9B78FF; border-color: #8D7AEF; color: #1E1E1E; font-weight: 700;64 }65 66 .link { color: #72A7FF; font-size: 32px; margin-top: 24px; }67 68 .quote {69 margin-top: 16px; padding-left: 24px; border-left: 3px solid #3A3A3A;70 color: #BDBDBD; font-size: 30px; line-height: 1.6;71 }72 .quote .purple { color: #D4A8FF; }73 74 /* Bottom snackbar */75 .snackbar {76 position: absolute; left: 50%; transform: translateX(-50%);77 bottom: 140px; width: 960px;78 background: #F3F3F3; color: #222; border-radius: 18px; box-shadow: 0 6px 18px rgba(0,0,0,0.35);79 display: flex; align-items: center; justify-content: space-between;80 padding: 22px 28px; font-size: 32px;81 }82 .snackbar .undo { color: #1E6DF5; font-weight: 600; }83 84 /* Floating action button */85 .fab {86 position: absolute; left: 50%; transform: translateX(-50%);87 bottom: 240px; width: 124px; height: 124px; border-radius: 62px;88 background: #2B3440; box-shadow: 0 8px 20px rgba(0,0,0,0.55);89 display: flex; align-items: center; justify-content: center;90 }91 .fab svg { width: 48px; height: 48px; }92 .badge {93 position: absolute; right: 8px; top: 6px; background: #E74C3C; color: #fff;94 font-size: 28px; border-radius: 20px; padding: 2px 10px; border: 2px solid #2B3440;95 }96 97 /* Bottom bar & nav handle */98 .bottom-bar {99 position: absolute; bottom: 0; left: 0; right: 0; height: 120px; padding: 0 24px;100 display: flex; align-items: center; justify-content: space-between; color: #9E9E9E;101 background: linear-gradient(to top, rgba(0,0,0,0.40), rgba(0,0,0,0.00));102 }103 .nav-handle {104 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);105 width: 220px; height: 12px; background: #E0E0E0; border-radius: 6px; opacity: 0.7;106 }107 108 /* Small utility icons */109 .reply-icon svg { width: 40px; height: 40px; }110 .menu-vert { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; }111</style>112</head>113<body>114<div id="render-target">115 <!-- Status bar -->116 <div class="status-bar">117 <div>10:25</div>118 <div class="status-right">119 <div class="icon-dot"></div>120 <div class="icon-dot"></div>121 <div class="icon-dot"></div>122 </div>123 </div>124 125 <!-- Top actions -->126 <div class="top-actions">127 <div class="icon-btn icon">128 <svg viewBox="0 0 24 24">129 <path d="M10 19l-7-7 7-7 1.4 1.4L6.8 11H22v2H6.8l4.6 4.6z"/>130 </svg>131 </div>132 <div style="display:flex; align-items:center; gap:24px;">133 <div class="icon-btn icon">134 <!-- Download -->135 <svg viewBox="0 0 24 24">136 <path d="M11 3h2v10l3-3 1 1-5 5-5-5 1-1 3 3V3z"/>137 <path d="M4 19h16v2H4z"/>138 </svg>139 </div>140 <div class="icon-btn icon">141 <!-- Archive -->142 <svg viewBox="0 0 24 24">143 <path d="M3 5h18v4H3z"/>144 <path d="M5 9h14v10H5z"/>145 <path d="M9 13h6v2H9z"/>146 </svg>147 </div>148 <div class="icon-btn icon">149 <!-- Trash -->150 <svg viewBox="0 0 24 24">151 <path d="M8 5h8l-1-2H9z"/>152 <path d="M5 7h14v2H5z"/>153 <path d="M7 9h10v10H7z"/>154 </svg>155 </div>156 <div class="icon-btn icon">157 <!-- Mail -->158 <svg viewBox="0 0 24 24">159 <path d="M3 6h18v12H3z"/>160 <path d="M3 6l9 7 9-7z"/>161 </svg>162 </div>163 <div class="menu-vert icon">164 <!-- More vertical -->165 <svg viewBox="0 0 24 24">166 <circle cx="12" cy="5" r="2"/>167 <circle cx="12" cy="12" r="2"/>168 <circle cx="12" cy="19" r="2"/>169 </svg>170 </div>171 </div>172 </div>173 174 <!-- Title -->175 <div class="header-title">176 <div class="title-row">177 <div class="title">Shopping list</div>178 <div class="chip">Inbox</div>179 </div>180 </div>181 182 <!-- First message -->183 <div class="message">184 <div class="msg-header">185 <div class="sender">186 <div class="avatar">Avatar</div>187 <div class="sender-info">188 <div class="sender-line">189 <div class="sender-name">Cerebra Research</div>190 <div class="sender-time">Yesterday</div>191 </div>192 <div class="to-line">to me193 <svg class="icon" viewBox="0 0 24 24" style="width:22px;height:22px;">194 <path d="M7 10l5 5 5-5z" fill="#BDBDBD"/>195 </svg>196 </div>197 </div>198 </div>199 <div class="star icon">200 <svg viewBox="0 0 24 24">201 <path d="M12 2l3.2 6.5 7.1 1-5.2 4.9 1.4 7-6.5-3.6-6.5 3.6 1.4-7-5.2-4.9 7.1-1z"/>202 </svg>203 </div>204 </div>205 <div class="msg-body">206 Books<br>207 Pen<br>208 Stamps<br>209 Plants<br>210 Desk<br>211 Chair212 </div>213 </div>214 215 <div class="divider"></div>216 217 <!-- Second message -->218 <div class="message">219 <div class="msg-header">220 <div class="sender">221 <div class="avatar purple-avatar">L</div>222 <div class="sender-info">223 <div class="sender-line">224 <div class="sender-name" style="text-transform: lowercase;">lucas kramer</div>225 <div class="sender-time">10:25 PM</div>226 </div>227 <div class="to-line">to Cerebra228 <svg class="icon" viewBox="0 0 24 24" style="width:22px;height:22px;">229 <path d="M7 10l5 5 5-5z" fill="#BDBDBD"/>230 </svg>231 </div>232 </div>233 </div>234 <div style="display:flex; align-items:center; gap:16px;">235 <div class="reply-icon icon">236 <!-- Reply -->237 <svg viewBox="0 0 24 24">238 <path d="M10 8V4L3 11l7 7v-4c6 0 9 2 11 6-2-10-7-12-11-12z"/>239 </svg>240 </div>241 <div class="menu-vert icon">242 <svg viewBox="0 0 24 24">243 <circle cx="12" cy="5" r="2"/>244 <circle cx="12" cy="12" r="2"/>245 <circle cx="12" cy="19" r="2"/>246 </svg>247 </div>248 </div>249 </div>250 251 <div class="msg-body">252 Confirm the order.253 <div class="link">Hide quoted text</div>254 255 <div class="quote">256 On Tue, Sep 26, 2023, 6:37 PM Cerebra Research <dbwscratch.test.id11@gmail.com> wrote:<br>257 <span class="purple">Books</span><br>258 <span class="purple">Pen</span><br>259 <span class="purple">Stamps</span><br>260 <span class="purple">Plants</span><br>261 <span class="purple">Desk</span><br>262 <span class="purple">Chair</span>263 </div>264 </div>265 </div>266 267 <!-- Snackbar -->268 <div class="snackbar">269 <div>Sent</div>270 <div class="undo">Undo</div>271 </div>272 273 <!-- Floating action button -->274 <div class="fab">275 <svg viewBox="0 0 24 24">276 <path fill="#FFFFFF" d="M2 6h20v12H2z"/>277 <path fill="#FFFFFF" d="M2 6l10 7 10-7z"/>278 </svg>279 <div class="badge">4</div>280 </div>281 282 <!-- Bottom area -->283 <div class="bottom-bar">284 <div class="icon">285 <svg viewBox="0 0 24 24">286 <path d="M10 8V4L3 11l7 7v-4c6 0 9 2 11 6-2-10-7-12-11-12z"/>287 </svg>288 </div>289 <div class="icon">290 <svg viewBox="0 0 24 24">291 <path d="M10 8V4L3 11l7 7v-4c6 0 9 2 11 6-2-10-7-12-11-12z"/>292 </svg>293 </div>294 <div class="icon">295 <svg viewBox="0 0 24 24">296 <path d="M12 8l-6 6h12z"/>297 </svg>298 </div>299 </div>300 <div class="nav-handle"></div>301</div>302</body>303</html>