GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Email Thread - Dark UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #111417;12    color: #e7ecef;13    font-family: Arial, Helvetica, sans-serif;14  }15 16  /* Status bar */17  .status-bar {18    height: 90px;19    padding: 0 32px;20    display: flex; align-items: center; justify-content: space-between;21    color: #dfe4ea;22    font-size: 36px; letter-spacing: 0.5px;23  }24  .status-left { display: flex; align-items: center; gap: 18px; }25  .snap-dot { width: 16px; height: 16px; background: #fff; border-radius: 50%; opacity: 0.85; }26  .status-right { display: flex; align-items: center; gap: 22px; }27  .battery {28    width: 44px; height: 22px; border: 2px solid #eee; border-radius: 6px; position: relative;29  }30  .battery::after { content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 10px; background: #eee; border-radius: 2px; }31  .battery-fill { position: absolute; left: 2px; top: 2px; height: 16px; width: 26px; background: #8fd17a; border-radius: 4px; }32 33  /* Top toolbar */34  .toolbar {35    height: 116px;36    padding: 0 28px;37    display: flex; align-items: center; justify-content: space-between;38  }39  .tool-left { display: flex; align-items: center; gap: 22px; }40  .tool-right { display: flex; align-items: center; gap: 32px; }41  .icon {42    width: 56px; height: 56px;43    stroke: #dfe4ea; fill: none; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round;44    opacity: 0.9;45  }46 47  /* Subject area */48  .subject {49    padding: 18px 28px 20px 28px;50    display: flex; align-items: center; justify-content: space-between;51  }52  .subject-left { display: flex; align-items: center; gap: 14px; }53  .hl { background: #f4da8a; color: #0d0f12; font-size: 64px; padding: 12px 18px; border-radius: 6px; font-weight: 600; }54  .tag {55    font-size: 28px; background: #33383e; color: #c9d1d9; padding: 10px 16px; border-radius: 18px;56  }57  .star svg { width: 54px; height: 54px; stroke: #c9c9c9; }58 59  /* Email blocks */60  .section-divider { height: 1px; background: #2a2f35; margin: 16px 0 12px; }61 62  .email {63    padding: 24px 28px;64  }65  .email-header {66    display: flex; align-items: center; justify-content: space-between;67  }68  .email-left { display: flex; align-items: center; gap: 24px; }69  .avatar {70    width: 112px; height: 112px; border-radius: 56px;71    background: #E0E0E0; border: 1px solid #BDBDBD;72    display: flex; align-items: center; justify-content: center;73    color: #757575; font-size: 26px; text-align: center; padding: 0 10px;74  }75  .details .name { font-size: 42px; font-weight: 600; }76  .details .meta { font-size: 28px; color: #a7b0b7; margin-top: 6px; display: flex; align-items: center; gap: 8px; }77  .reply-group { display: flex; align-items: center; gap: 26px; }78  .reply-icon { width: 52px; height: 52px; stroke: #cfd8dc; fill: none; stroke-width: 6; }79  .menu-dots { width: 10px; height: 10px; background: #cfd8dc; border-radius: 50%; box-shadow: 0 18px 0 #cfd8dc, 0 -18px 0 #cfd8dc; }80 81  .message { margin: 18px 0 8px 160px; font-size: 36px; line-height: 52px; color: #dde3e7; }82 83  /* Info card */84  .info-card {85    margin: 18px 0 8px 160px;86    border: 2px solid #3a3f45; border-radius: 28px;87    padding: 26px 28px;88  }89  .info-row { display: grid; grid-template-columns: 180px 1fr; gap: 18px; padding: 12px 0; align-items: center; }90  .label { color: #b7c0c6; font-size: 36px; }91  .value { font-size: 36px; color: #e7ecef; }92  .link { color: #8ab4f8; font-size: 36px; margin-top: 16px; }93 94  .quoted { margin: 26px 0 8px 160px; color: #8ab4f8; font-size: 34px; }95 96  /* Bottom action bar */97  .bottom-bar {98    position: absolute; left: 0; bottom: 0; width: 1080px; height: 160px;99    background: rgba(20,24,28,0.95);100    display: flex; align-items: center; justify-content: center; gap: 160px;101    border-top: 1px solid #2b3137;102  }103  .pill {104    width: 260px; height: 112px; background: #2a3138; border-radius: 56px;105    display: flex; align-items: center; justify-content: center; gap: 18px;106    position: relative;107  }108  .pill .icon { width: 60px; height: 60px; stroke: #cbd5db; }109  .badge {110    position: absolute; top: -10px; left: 156px;111    background: #f08b8b; color: #fff; font-weight: 700; font-size: 30px;112    padding: 8px 16px; border-radius: 26px;113    border: 2px solid rgba(255,255,255,0.4);114  }115</style>116</head>117<body>118<div id="render-target">119 120  <!-- Status bar -->121  <div class="status-bar">122    <div class="status-left">123      <div>9:08</div>124      <div class="snap-dot"></div>125      <div class="snap-dot"></div>126      <div class="snap-dot"></div>127      <div class="snap-dot"></div>128      <div style="width:8px;height:8px;background:#fff;border-radius:50%;opacity:.8;"></div>129    </div>130    <div class="status-right">131      <svg class="icon" viewBox="0 0 24 24"><path d="M3 12h18M6 9h12M9 6h6"/></svg>132      <svg class="icon" viewBox="0 0 24 24"><path d="M12 3v18M3 12h18"/></svg>133      <div class="battery"><div class="battery-fill"></div></div>134    </div>135  </div>136 137  <!-- Top toolbar -->138  <div class="toolbar">139    <div class="tool-left">140      <svg class="icon" viewBox="0 0 24 24"><path d="M15 5l-8 7 8 7"/></svg>141    </div>142    <div class="tool-right">143      <!-- Download -->144      <svg class="icon" viewBox="0 0 24 24"><path d="M12 4v10M7 9l5 5 5-5"/><path d="M4 20h16"/></svg>145      <!-- Archive -->146      <svg class="icon" viewBox="0 0 24 24"><path d="M3 7h18M5 7l1 14h12l1-14M9 12h6"/></svg>147      <!-- Trash -->148      <svg class="icon" viewBox="0 0 24 24"><path d="M4 7h16M9 7V4h6v3M7 7l1 12h8l1-12"/></svg>149      <!-- Mail -->150      <svg class="icon" viewBox="0 0 24 24"><path d="M3 5h18v14H3z"/><path d="M3 7l9 6 9-6"/></svg>151      <!-- More -->152      <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>153    </div>154  </div>155 156  <!-- Subject -->157  <div class="subject">158    <div class="subject-left">159      <span class="hl">upcoming</span>160      <span class="hl">events</span>161      <span class="tag">Inbox</span>162    </div>163    <div class="star">164      <svg viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>165    </div>166  </div>167 168  <!-- First email -->169  <div class="email">170    <div class="email-header">171      <div class="email-left">172        <div class="avatar">[IMG: Avatar]</div>173        <div class="details">174          <div class="name">Michael Nguyen <span style="color:#a7b0b7; font-weight:400; font-size:32px;">5 days ago</span></div>175          <div class="meta">to me176            <svg style="width:22px;height:22px;stroke:#a7b0b7;fill:none;stroke-width:4;" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>177          </div>178        </div>179      </div>180      <div class="reply-group">181        <svg class="reply-icon" viewBox="0 0 24 24"><path d="M10 8L5 12l5 4"/><path d="M5 12h10a4 4 0 110 8"/></svg>182        <div class="menu-dots"></div>183      </div>184    </div>185    <div class="message">A concert and a continuing education seminar</div>186  </div>187 188  <div class="section-divider"></div>189 190  <!-- Second email -->191  <div class="email">192    <div class="email-header">193      <div class="email-left">194        <div class="avatar">[IMG: Avatar Illustration]</div>195        <div class="details">196          <div class="name">Cerebra Research <span style="color:#a7b0b7; font-weight:400; font-size:32px;">5 days ago</span></div>197          <div class="meta">to Michael198            <svg style="width:22px;height:22px;stroke:#a7b0b7;fill:none;stroke-width:4;" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>199          </div>200        </div>201      </div>202      <div class="reply-group">203        <svg class="reply-icon" viewBox="0 0 24 24"><path d="M10 8L5 12l5 4"/><path d="M5 12h10a4 4 0 110 8"/></svg>204        <div class="menu-dots"></div>205      </div>206    </div>207 208    <div class="info-card">209      <div class="info-row">210        <div class="label">From</div>211        <div class="value">Cerebra Research • dbwscratch.test.id2@gmail.com</div>212      </div>213      <div class="info-row">214        <div class="label">To</div>215        <div class="value">Michael Nguyen • nguyenmichael558@gmail.com</div>216      </div>217      <div class="info-row">218        <div class="label">Date</div>219        <div class="value">Oct 20, 2023, 9:44 PM</div>220      </div>221      <div class="link">View security details</div>222    </div>223 224    <div class="message">Hi there! We just wanted to let you know we received your message and will be in touch</div>225    <div class="quoted">Show quoted text</div>226  </div>227 228  <div class="section-divider"></div>229 230  <!-- Third email -->231  <div class="email">232    <div class="email-header">233      <div class="email-left">234        <div class="avatar">[IMG: Avatar Illustration]</div>235        <div class="details">236          <div class="name">Queued <span style="color:#a7b0b7; font-weight:400; font-size:32px;">9:08 AM</span></div>237          <div class="meta">to dbwscratch.test.id4238            <svg style="width:22px;height:22px;stroke:#a7b0b7;fill:none;stroke-width:4;" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>239          </div>240        </div>241      </div>242      <div class="reply-group">243        <svg class="reply-icon" viewBox="0 0 24 24"><path d="M10 8L5 12l5 4"/><path d="M5 12h10a4 4 0 110 8"/></svg>244        <div class="menu-dots"></div>245      </div>246    </div>247  </div>248 249  <!-- Bottom bar -->250  <div class="bottom-bar">251    <div class="pill">252      <svg class="icon" viewBox="0 0 24 24"><path d="M3 5h18v14H3z"/><path d="M3 7l9 6 9-6"/></svg>253      <div class="badge">99+</div>254    </div>255    <div class="pill">256      <svg class="icon" viewBox="0 0 24 24"><path d="M4 7h12v10H4z"/><path d="M16 10l4-2v8l-4-2z"/></svg>257    </div>258  </div>259 260</div>261</body>262</html>