GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Email Detail - Dark UI</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #1c1820;19    color: #eae6ef;20  }21 22  /* Top status bar (time & system icons) */23  .status-bar {24    position: absolute;25    top: 0;26    left: 0;27    height: 120px;28    width: 100%;29    padding: 0 36px;30    display: flex;31    align-items: center;32    justify-content: space-between;33    color: #eae6ef;34    font-size: 36px;35    letter-spacing: 0.5px;36  }37  .status-icons {38    display: flex;39    align-items: center;40    gap: 26px;41  }42  .icon {43    width: 44px;44    height: 44px;45    display: inline-flex;46    align-items: center;47    justify-content: center;48  }49  .icon svg {50    width: 42px;51    height: 42px;52    fill: none;53    stroke: #eae6ef;54    stroke-width: 3.5;55  }56 57  /* Header with back and actions */58  .header {59    position: absolute;60    top: 140px;61    left: 24px;62    right: 24px;63    display: flex;64    align-items: center;65    justify-content: space-between;66    padding: 0 12px;67  }68  .header-actions {69    display: flex;70    align-items: center;71    gap: 36px;72  }73  .subject-row {74    position: absolute;75    top: 240px;76    left: 48px;77    right: 48px;78    display: flex;79    align-items: center;80    justify-content: space-between;81  }82  .subject-left {83    display: inline-flex;84    align-items: center;85    gap: 20px;86  }87  .subject {88    font-size: 96px;89    font-weight: 600;90    line-height: 1;91  }92  .badge {93    font-size: 36px;94    color: #b8c0cc;95    background: #2b2630;96    border: 1px solid #3a3440;97    padding: 10px 18px;98    border-radius: 14px;99  }100  .star svg {101    stroke: #b8b1c5;102    fill: none;103    stroke-width: 4;104  }105 106  /* Sender row */107  .sender-row {108    position: absolute;109    top: 420px;110    left: 48px;111    right: 48px;112    display: flex;113    align-items: center;114    justify-content: space-between;115  }116  .sender-left {117    display: flex;118    align-items: center;119    gap: 24px;120  }121  .avatar {122    width: 92px;123    height: 92px;124    background: #E0E0E0;125    border: 1px solid #BDBDBD;126    color: #757575;127    border-radius: 50%;128    display: flex;129    align-items: center;130    justify-content: center;131    font-size: 22px;132  }133  .sender-details {134    display: flex;135    flex-direction: column;136    gap: 8px;137  }138  .sender-name {139    font-size: 40px;140    font-weight: 600;141  }142  .sender-meta {143    font-size: 30px;144    color: #b8c0cc;145    display: flex;146    align-items: center;147    gap: 12px;148  }149  .sender-right {150    display: flex;151    align-items: center;152    gap: 24px;153    color: #cfc8dc;154  }155 156  /* Email body */157  .body-text {158    position: absolute;159    top: 620px;160    left: 48px;161    right: 48px;162    font-size: 44px;163    line-height: 1.6;164    color: #eae6ef;165  }166 167  /* Quick reply section */168  .quick-reply-title {169    position: absolute;170    bottom: 720px;171    width: 100%;172    text-align: center;173    font-size: 36px;174    color: #86a4ff;175  }176  .chip-row {177    position: absolute;178    left: 48px;179    right: 48px;180    display: flex;181    gap: 28px;182    justify-content: center;183  }184  .chip-row.top {185    bottom: 620px;186  }187  .chip-row.bottom {188    bottom: 480px;189  }190  .chip {191    padding: 24px 36px;192    border-radius: 60px;193    border: 2px solid #6f6384;194    color: #e8d9ff;195    font-size: 34px;196    background: rgba(111, 99, 132, 0.15);197    display: inline-flex;198    align-items: center;199    gap: 18px;200    backdrop-filter: blur(2px);201  }202  .chip .icon svg {203    stroke: #bfa9ff;204    width: 40px;205    height: 40px;206  }207 208  /* Bottom dock */209  .bottom-dock {210    position: absolute;211    bottom: 140px;212    left: 0;213    width: 100%;214    padding: 0 48px;215    display: flex;216    align-items: center;217    justify-content: space-between;218  }219  .dock-pill {220    width: 240px;221    height: 112px;222    background: #3a3448;223    border-radius: 56px;224    position: relative;225    display: flex;226    align-items: center;227    justify-content: center;228  }229  .dock-pill .badge {230    position: absolute;231    top: 12px;232    left: 172px;233    background: #ffb4c0;234    color: #3a3448;235    border: none;236    font-weight: 700;237    font-size: 28px;238    padding: 6px 16px;239    border-radius: 30px;240  }241  .dock-icon {242    width: 58px;243    height: 58px;244  }245  .home-indicator {246    position: absolute;247    bottom: 60px;248    left: 50%;249    transform: translateX(-50%);250    width: 360px;251    height: 10px;252    background: #eae6ef;253    border-radius: 5px;254    opacity: 0.9;255  }256</style>257</head>258<body>259<div id="render-target">260 261  <!-- Status bar -->262  <div class="status-bar">263    <div>11:36</div>264    <div class="status-icons">265      <div class="icon">266        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2"/></svg>267      </div>268      <div class="icon">269        <svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/></svg>270      </div>271      <div class="icon">272        <svg viewBox="0 0 24 24"><rect x="2" y="6" width="20" height="12" rx="2"/><path d="M2 12h6"/></svg>273      </div>274      <div class="icon">275        <svg viewBox="0 0 24 24"><path d="M20 7v10M4 7v10"/><path d="M6 5h12l2 2H4l2-2z"/></svg>276      </div>277    </div>278  </div>279 280  <!-- Header controls -->281  <div class="header">282    <div class="icon">283      <svg viewBox="0 0 24 24"><path d="M15 6L9 12l6 6"/></svg>284    </div>285    <div class="header-actions">286      <div class="icon">287        <svg viewBox="0 0 24 24"><path d="M12 5v8"/><path d="M8 9l4 4 4-4"/></svg>288      </div>289      <div class="icon">290        <svg viewBox="0 0 24 24"><rect x="6" y="4" width="12" height="16" rx="2"/></svg>291      </div>292      <div class="icon">293        <svg viewBox="0 0 24 24"><path d="M5 6h14"/><path d="M7 6v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V6"/></svg>294      </div>295      <div class="icon">296        <svg viewBox="0 0 24 24"><path d="M3 7l9 7 9-7"/><path d="M3 7v10h18V7"/></svg>297      </div>298      <div class="icon">299        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg>300      </div>301    </div>302  </div>303 304  <!-- Subject -->305  <div class="subject-row">306    <div class="subject-left">307      <div class="subject">Hi</div>308      <div class="badge">Inbox</div>309    </div>310    <div class="star icon">311      <svg viewBox="0 0 24 24"><path d="M12 3l3.1 6.3 6.9 1-5 4.7 1.2 6.7L12 18l-6.2 3.7 1.2-6.7-5-4.7 6.9-1z"/></svg>312    </div>313  </div>314 315  <!-- Sender details -->316  <div class="sender-row">317    <div class="sender-left">318      <div class="avatar">[IMG: Sender Avatar]</div>319      <div class="sender-details">320        <div class="sender-name">Cerebra Research <span style="color:#b8c0cc; font-weight:500;">11:30 PM</span></div>321        <div class="sender-meta">to me <svg style="width:18px;height:18px; margin-left:6px;" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#b8c0cc" stroke-width="2" fill="none"/></svg></div>322      </div>323    </div>324    <div class="sender-right">325      <div class="icon">326        <svg viewBox="0 0 24 24"><path d="M15 6L9 12l6 6"/></svg>327      </div>328      <div class="icon">329        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg>330      </div>331    </div>332  </div>333 334  <!-- Email body text -->335  <div class="body-text">336    Do you Agree with our policy?337  </div>338 339  <!-- Quick reply label -->340  <div class="quick-reply-title">Tap to edit a reply</div>341 342  <!-- Quick reply chips -->343  <div class="chip-row top">344    <div class="chip">Yes, I agree.</div>345    <div class="chip">Yes, I do.</div>346    <div class="chip">I disagree.</div>347  </div>348 349  <!-- Action chips -->350  <div class="chip-row bottom">351    <div class="chip">352      <span class="icon"><svg viewBox="0 0 24 24"><path d="M15 7l-6 5 6 5"/></svg></span>353      Reply354    </div>355    <div class="chip">356      <span class="icon"><svg viewBox="0 0 24 24"><path d="M16 7l-6 5 6 5"/><path d="M8 7l-6 5 6 5" opacity="0.6"/></svg></span>357      Reply all358    </div>359    <div class="chip">360      <span class="icon"><svg viewBox="0 0 24 24"><path d="M9 7l6 5-6 5"/></svg></span>361      Forward362    </div>363  </div>364 365  <!-- Bottom dock -->366  <div class="bottom-dock">367    <div class="dock-pill">368      <div class="badge">4</div>369      <svg class="dock-icon" viewBox="0 0 24 24">370        <path d="M3 7l9 7 9-7"/><path d="M3 7v10h18V7" fill="none" stroke="#eae6ef" stroke-width="2"/>371      </svg>372    </div>373    <div class="dock-pill" style="background:#3b3649;">374      <svg class="dock-icon" viewBox="0 0 24 24">375        <rect x="4" y="5" width="16" height="12" rx="2" fill="none" stroke="#eae6ef" stroke-width="2"/>376        <circle cx="12" cy="11" r="3" fill="none" stroke="#eae6ef" stroke-width="2"/>377      </svg>378    </div>379  </div>380 381  <!-- Home indicator -->382  <div class="home-indicator"></div>383</div>384</body>385</html>