GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Email Detail Dark UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #1f2225; color: #ECEFF1;13    font-family: Roboto, Arial, sans-serif;14  }15 16  /* Status bar */17  .status-bar {18    height: 110px; padding: 0 40px;19    display: flex; align-items: center; justify-content: space-between;20    color: #E0E0E0; font-size: 36px;21  }22  .sb-icons { display: flex; align-items: center; gap: 28px; }23  .sb-icons svg { stroke: #E0E0E0; }24 25  /* Top actions */26  .top-actions {27    height: 120px; padding: 0 24px 0 16px;28    display: flex; align-items: center; justify-content: space-between;29  }30  .action-left { display: flex; align-items: center; gap: 18px; }31  .action-right { display: flex; align-items: center; gap: 48px; }32  .top-actions svg { stroke: #DADADA; }33 34  /* Subject row */35  .subject-row {36    position: relative;37    padding: 24px 40px 8px 40px;38  }39  .subject-title {40    font-size: 88px; font-weight: 500; letter-spacing: -0.5px;41  }42  .pill {43    display: inline-block; margin-left: 20px;44    font-size: 34px; color: #B0BEC5;45    background: #2a2d31; border-radius: 18px;46    padding: 8px 18px; border: 1px solid #31363a;47    vertical-align: middle;48  }49  .subject-star {50    position: absolute; right: 40px; top: 40px;51  }52 53  /* Sender block */54  .sender-row {55    display: flex; align-items: center;56    padding: 24px 40px; gap: 24px;57  }58  .avatar {59    width: 120px; height: 120px;60    background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;61    border-radius: 50%;62    display: flex; align-items: center; justify-content: center;63    font-size: 26px;64  }65  .sender-info { flex: 1; }66  .sender-line {67    display: flex; align-items: baseline; gap: 18px;68    font-size: 46px; font-weight: 500; color: #FAFAFA;69  }70  .sender-meta { font-size: 38px; color: #B0BEC5; margin-top: 6px; }71  .sender-actions { display: flex; align-items: center; gap: 36px; }72  .sender-actions svg { stroke: #DADADA; }73 74  /* Email body */75  .email-body {76    padding: 20px 40px 0 40px;77    font-size: 44px; line-height: 68px; color: #ECEFF1;78  }79 80  /* Quick suggestions */81  .quick-suggest {82    display: flex; gap: 40px; justify-content: center;83    padding: 80px 40px 40px 40px;84  }85  .chip {86    padding: 26px 36px; border-radius: 60px;87    border: 2px solid #4b4f54; color: #9ec3ff;88    font-size: 40px; min-width: 380px; text-align: center;89    background: transparent;90  }91 92  /* Divider */93  .divider { height: 2px; background: #34383c; margin: 40px 0; }94 95  /* Reply actions */96  .reply-actions {97    display: flex; justify-content: space-around; padding: 30px 40px;98  }99  .reply-chip {100    display: flex; align-items: center; gap: 20px;101    border: 2px solid #4b4f54; border-radius: 60px;102    padding: 24px 34px; color: #DADADA; font-size: 38px;103    min-width: 260px; background: transparent;104  }105  .reply-chip svg { stroke: #DADADA; }106 107  /* Bottom area */108  .bottom-tray {109    position: absolute; left: 0; right: 0; bottom: 110px;110    display: flex; justify-content: center; gap: 260px; align-items: center;111  }112  .tray-pill {113    background: #2c3136; border-radius: 42px;114    padding: 14px 28px; display: flex; align-items: center; gap: 12px;115  }116  .badge {117    position: relative;118    display: inline-block; min-width: 40px; height: 40px;119    background: #ef5350; color: #fff; border-radius: 20px;120    font-size: 28px; text-align: center; line-height: 40px;121  }122  .home-indicator {123    position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);124    width: 380px; height: 10px; background: #D0D0D0; opacity: 0.6; border-radius: 6px;125  }126</style>127</head>128<body>129<div id="render-target">130 131  <!-- Status bar -->132  <div class="status-bar">133    <div>10:22</div>134    <div class="sb-icons">135      <!-- Cellular -->136      <svg width="36" height="36" viewBox="0 0 24 24" fill="none">137        <path d="M3 21h2M7 17h2M11 13h2M15 9h2" stroke-width="2" />138      </svg>139      <!-- Wi-Fi -->140      <svg width="36" height="36" viewBox="0 0 24 24" fill="none">141        <path d="M2 8c5-4 15-4 20 0M6 12c3-2 9-2 12 0M10 16c2-1 4-1 6 0M12 19l2 2-2 2-2-2 2-2z" stroke-width="2"/>142      </svg>143      <!-- Cloud -->144      <svg width="36" height="36" viewBox="0 0 24 24" fill="none">145        <path d="M6 16a4 4 0 1 1 1-8 5 5 0 0 1 9 2h1a4 4 0 0 1 0 8H7" stroke-width="2"/>146      </svg>147      <!-- Cast -->148      <svg width="36" height="36" viewBox="0 0 24 24" fill="none">149        <path d="M3 5h18v14H12M3 17a6 6 0 0 1 6 6M3 13a10 10 0 0 1 10 10" stroke-width="2"/>150      </svg>151      <!-- Battery -->152      <svg width="44" height="36" viewBox="0 0 28 16" fill="none">153        <rect x="2" y="2" width="22" height="12" rx="2" stroke-width="2" />154        <rect x="24" y="5" width="2" height="6" rx="1" stroke-width="2" />155        <rect x="4" y="4" width="12" height="8" rx="1" fill="#E0E0E0" stroke="none"/>156      </svg>157    </div>158  </div>159 160  <!-- Top action bar -->161  <div class="top-actions">162    <div class="action-left">163      <!-- Back -->164      <svg width="64" height="64" viewBox="0 0 24 24" fill="none">165        <path d="M15 19L8 12l7-7" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"/>166      </svg>167    </div>168    <div class="action-right">169      <!-- Download to inbox style -->170      <svg width="64" height="64" viewBox="0 0 24 24" fill="none">171        <path d="M12 4v10M8 10l4 4 4-4M4 20h16" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>172      </svg>173      <!-- Trash -->174      <svg width="64" height="64" viewBox="0 0 24 24" fill="none">175        <path d="M4 7h16M9 7V5h6v2M7 7l1 12h8l1-12" stroke-width="2.2" stroke-linecap="round"/>176      </svg>177      <!-- Envelope -->178      <svg width="64" height="64" viewBox="0 0 24 24" fill="none">179        <rect x="3" y="5" width="18" height="14" rx="2" stroke-width="2"/>180        <path d="M3 7l9 6 9-6" stroke-width="2"/>181      </svg>182      <!-- More (kebab) -->183      <svg width="44" height="64" viewBox="0 0 24 24" fill="none">184        <circle cx="12" cy="5" r="2" stroke-width="2"/>185        <circle cx="12" cy="12" r="2" stroke-width="2"/>186        <circle cx="12" cy="19" r="2" stroke-width="2"/>187      </svg>188    </div>189  </div>190 191  <!-- Subject -->192  <div class="subject-row">193    <div class="subject-title">Shopping list <span class="pill">Inbox</span></div>194    <div class="subject-star">195      <svg width="64" height="64" viewBox="0 0 24 24" fill="none">196        <path d="M12 3l3 6 6 .8-4.5 4 1.2 6.2L12 17l-5.7 3.9 1.2-6.2L3 9.8 9 9l3-6z" stroke="#DADADA" stroke-width="2" fill="none"/>197      </svg>198    </div>199  </div>200 201  <!-- Sender info -->202  <div class="sender-row">203    <div class="avatar">[IMG: Avatar]</div>204    <div class="sender-info">205      <div class="sender-line">206        <span>Cerebra Research</span>207        <span style="color:#B0BEC5;font-weight:400;">Yesterday</span>208      </div>209      <div class="sender-meta">to me ▼</div>210    </div>211    <div class="sender-actions">212      <!-- Reply arrow -->213      <svg width="60" height="60" viewBox="0 0 24 24" fill="none">214        <path d="M9 7l-6 5 6 5v-4h7a4 4 0 0 0 4-4" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/>215      </svg>216      <!-- More -->217      <svg width="44" height="60" viewBox="0 0 24 24" fill="none">218        <circle cx="12" cy="5" r="2" stroke-width="2"/>219        <circle cx="12" cy="12" r="2" stroke-width="2"/>220        <circle cx="12" cy="19" r="2" stroke-width="2"/>221      </svg>222    </div>223  </div>224 225  <!-- Email body text -->226  <div class="email-body">227    <div>Books</div>228    <div>Pen</div>229    <div>Stamps</div>230    <div>Plants</div>231    <div>Desk</div>232    <div>Chair</div>233  </div>234 235  <!-- Spacer to mimic long content area -->236  <div style="height: 880px;"></div>237 238  <!-- Quick suggestions -->239  <div class="quick-suggest">240    <div class="chip">I like this one!</div>241    <div class="chip">How much?</div>242  </div>243 244  <div class="divider"></div>245 246  <!-- Reply action chips -->247  <div class="reply-actions">248    <div class="reply-chip">249      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">250        <path d="M10 7l-6 5 6 5v-4h8v-2h-8V7z" stroke-width="2"/>251      </svg>252      <span>Reply</span>253    </div>254    <div class="reply-chip">255      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">256        <path d="M11 7l-6 5 6 5v-4h6M17 7l-6 5 6 5v-4h4" stroke-width="2"/>257      </svg>258      <span>Reply all</span>259    </div>260    <div class="reply-chip">261      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">262        <path d="M14 7l6 5-6 5v-4H6v-2h8V7z" stroke-width="2"/>263      </svg>264      <span>Forward</span>265    </div>266  </div>267 268  <!-- Bottom tray -->269  <div class="bottom-tray">270    <div class="tray-pill">271      <svg width="48" height="48" viewBox="0 0 24 24" fill="none">272        <rect x="3" y="5" width="18" height="14" rx="2" stroke="#DADADA" stroke-width="2"/>273        <path d="M3 7l9 6 9-6" stroke="#DADADA" stroke-width="2"/>274      </svg>275      <span class="badge">4</span>276    </div>277    <div class="tray-pill">278      <svg width="52" height="48" viewBox="0 0 24 24" fill="none">279        <rect x="4" y="6" width="16" height="12" rx="2" stroke="#DADADA" stroke-width="2"/>280        <circle cx="12" cy="12" r="3" stroke="#DADADA" stroke-width="2"/>281      </svg>282    </div>283  </div>284 285  <div class="home-indicator"></div>286</div>287</body>288</html>