GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Mail UI Replica</title>5<style>6  body { margin: 0; padding: 0; background: transparent; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #121212;13    color: #fff;14    font-family: Arial, Helvetica, sans-serif;15  }16 17  /* Status bar */18  .status-bar {19    height: 90px;20    padding: 0 30px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    color: #d7d7d7;25    font-size: 34px;26  }27  .status-icons {28    display: flex;29    gap: 24px;30    align-items: center;31  }32  .icon { fill: none; stroke: #d7d7d7; stroke-width: 2; }33  .icon-fill { fill: #d7d7d7; }34 35  /* Header / Subject */36  .header {37    padding: 10px 30px 0 30px;38  }39  .subject-row {40    display: flex;41    align-items: center;42    justify-content: space-between;43    gap: 20px;44  }45  .left-head {46    display: flex;47    align-items: center;48    gap: 22px;49    flex: 1;50  }51  .back-btn {52    width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;53  }54  .subject-title {55    font-size: 56px;56    font-weight: 700;57    letter-spacing: 1px;58  }59  .chip {60    font-size: 28px;61    padding: 8px 18px;62    border-radius: 22px;63    border: 1px solid #3a3a3a;64    color: #bdbdbd;65    margin-left: 10px;66  }67  .title-right {68    display: flex;69    align-items: center;70    gap: 26px;71  }72  .tool-icon {73    width: 64px;74    height: 64px;75  }76 77  /* Sender block */78  .sender-row {79    margin-top: 24px;80    padding: 0 30px;81    display: flex;82    align-items: center;83    justify-content: space-between;84  }85  .sender-left {86    display: flex;87    align-items: center;88    gap: 24px;89  }90  .avatar {91    width: 110px; height: 110px; border-radius: 55px;92    background: #8a98a3; display: flex; align-items: center; justify-content: center;93    font-size: 58px; font-weight: 700; color: #1b1b1b;94  }95  .sender-details {96    display: flex; flex-direction: column; gap: 8px;97  }98  .sender-name { font-size: 40px; font-weight: 700; }99  .sender-meta { font-size: 30px; color: #bdbdbd; }100  .to-me { display: inline-flex; align-items: center; gap: 8px; color: #bdbdbd; }101  .sender-right { display: flex; align-items: center; gap: 26px; }102 103  /* Mail body */104  .mail-body {105    padding: 36px 30px 0 30px;106    font-size: 40px;107    line-height: 1.4;108    color: #e9e9e9;109  }110 111  /* Smart replies */112  .smart-replies {113    position: absolute;114    left: 30px;115    bottom: 430px;116    display: flex;117    gap: 36px;118  }119  .reply-chip {120    padding: 26px 36px;121    border-radius: 32px;122    border: 1px solid #4a4a4a;123    color: #a8c7fa;124    font-size: 36px;125    background: rgba(255,255,255,0.04);126  }127 128  /* Bottom actions */129  .bottom-actions {130    position: absolute;131    left: 30px;132    bottom: 260px;133    display: flex;134    gap: 36px;135  }136  .action-pill {137    width: 300px;138    height: 110px;139    border-radius: 55px;140    border: 1px solid #4a4a4a;141    background: rgba(255,255,255,0.03);142    display: flex; align-items: center; justify-content: center; gap: 18px;143    color: #dcdcdc; font-size: 40px;144  }145 146  /* Floating bottom mini bar */147  .floating-bar {148    position: absolute;149    left: 40px;150    bottom: 120px;151    display: flex;152    align-items: center;153    gap: 40px;154  }155  .compose-pill {156    width: 220px; height: 90px; border-radius: 45px;157    background: #2a2f36; display: flex; align-items: center; justify-content: center; position: relative;158  }159  .badge {160    position: absolute;161    right: -10px; top: -16px;162    background: #d77a7a; color: #fff; font-size: 34px; font-weight: 700;163    padding: 8px 16px; border-radius: 24px;164    border: 3px solid #2a2f36;165  }166  .camera-pill {167    width: 90px; height: 90px; border-radius: 18px; background: #2a2f36;168    display: flex; align-items: center; justify-content: center;169  }170</style>171</head>172<body>173<div id="render-target">174 175  <!-- Status bar -->176  <div class="status-bar">177    <div>10:16</div>178    <div class="status-icons">179      <!-- simple status icons -->180      <svg width="38" height="38" class="icon"><rect x="4" y="10" width="28" height="18" rx="2" stroke="#d7d7d7"></rect><rect x="8" y="14" width="8" height="10" fill="#d7d7d7"></rect><rect x="18" y="14" width="8" height="10" fill="#d7d7d7"></rect></svg>181      <svg width="38" height="38" class="icon"><path d="M4 20h14l6 6V8l-6 6H4z" stroke="#d7d7d7" fill="none"></path></svg>182      <svg width="38" height="38" class="icon"><rect x="6" y="12" width="22" height="14" rx="3" stroke="#d7d7d7"></rect><rect x="29" y="14" width="4" height="10" fill="#d7d7d7"></rect></svg>183    </div>184  </div>185 186  <!-- Header / Subject -->187  <div class="header">188    <div class="subject-row">189      <div class="left-head">190        <div class="back-btn">191          <svg width="54" height="54" class="icon"><path d="M36 10 L18 27 L36 44" stroke="#ffffff" stroke-width="4" fill="none"></path></svg>192        </div>193        <div>194          <div class="subject-title">OFFICIAL WEEKEND PARTY</div>195          <span class="chip">Inbox</span>196        </div>197      </div>198      <div class="title-right">199        <!-- Star -->200        <svg width="48" height="48" class="icon"><path d="M24 6l6 12 13 2-9 9 2 13-12-6-12 6 2-13-9-9 13-2z" stroke="#bdbdbd" fill="none"></path></svg>201        <!-- Download -->202        <svg class="tool-icon icon" viewBox="0 0 24 24">203          <path d="M12 4v8M8 10l4 4 4-4M5 20h14" stroke="#d7d7d7" stroke-width="2" fill="none"></path>204        </svg>205        <!-- Trash -->206        <svg class="tool-icon icon" viewBox="0 0 24 24">207          <path d="M4 7h16M9 7V5h6v2M6 7l1 12h10l1-12" stroke="#d7d7d7" stroke-width="2" fill="none"></path>208        </svg>209        <!-- Envelope -->210        <svg class="tool-icon icon" viewBox="0 0 24 24">211          <rect x="3" y="6" width="18" height="12" rx="2" stroke="#d7d7d7" stroke-width="2" fill="none"></rect>212          <path d="M3 8l9 6 9-6" stroke="#d7d7d7" stroke-width="2" fill="none"></path>213        </svg>214        <!-- Kebab -->215        <svg class="tool-icon icon-fill" viewBox="0 0 24 24">216          <circle cx="12" cy="5" r="2" fill="#d7d7d7"></circle>217          <circle cx="12" cy="12" r="2" fill="#d7d7d7"></circle>218          <circle cx="12" cy="19" r="2" fill="#d7d7d7"></circle>219        </svg>220      </div>221    </div>222  </div>223 224  <!-- Sender row -->225  <div class="sender-row">226    <div class="sender-left">227      <div class="avatar">C</div>228      <div class="sender-details">229        <div class="sender-name">Cerebra Research <span class="sender-meta" style="margin-left:10px;">Yesterday</span></div>230        <div class="to-me">to me231          <svg width="18" height="18" class="icon-fill" style="margin-left:6px;"><path d="M2 6l7 7 7-7" fill="#bdbdbd"></path></svg>232        </div>233      </div>234    </div>235    <div class="sender-right">236      <!-- Reply curved arrow -->237      <svg width="54" height="54" class="icon"><path d="M18 30l-8-8 8-8v6c10 0 14 7 14 14-4-6-8-8-14-8v4z" stroke="#d7d7d7" stroke-width="2" fill="none"></path></svg>238      <!-- Kebab -->239      <svg width="48" height="48" class="icon-fill" viewBox="0 0 24 24">240        <circle cx="12" cy="5" r="2" fill="#d7d7d7"></circle>241        <circle cx="12" cy="12" r="2" fill="#d7d7d7"></circle>242        <circle cx="12" cy="19" r="2" fill="#d7d7d7"></circle>243      </svg>244    </div>245  </div>246 247  <!-- Mail body -->248  <div class="mail-body">249    you are welcome to the party in the mail body.250  </div>251 252  <!-- Smart replies -->253  <div class="smart-replies">254    <div class="reply-chip">You are so sweet, thank you!</div>255    <div class="reply-chip">Thanks a lot.</div>256    <div class="reply-chip">Haha, thanks!</div>257  </div>258 259  <!-- Bottom actions -->260  <div class="bottom-actions">261    <div class="action-pill">262      <svg width="40" height="40" class="icon"><path d="M26 12L14 24l12 12" stroke="#d7d7d7" stroke-width="3" fill="none"></path></svg>263      <span>Reply</span>264    </div>265    <div class="action-pill">266      <svg width="40" height="40" class="icon"><path d="M28 12L16 24l12 12M12 12L0 24l12 12" stroke="#d7d7d7" stroke-width="3" fill="none"></path></svg>267      <span>Reply all</span>268    </div>269    <div class="action-pill">270      <svg width="40" height="40" class="icon"><path d="M14 12l12 12-12 12" stroke="#d7d7d7" stroke-width="3" fill="none"></path></svg>271      <span>Forward</span>272    </div>273  </div>274 275  <!-- Floating bottom bar -->276  <div class="floating-bar">277    <div class="compose-pill">278      <svg width="44" height="44" class="icon" viewBox="0 0 24 24">279        <rect x="3" y="5" width="18" height="14" rx="3" stroke="#cfd8dc" stroke-width="2" fill="none"></rect>280        <path d="M3 7l9 6 9-6" stroke="#cfd8dc" stroke-width="2" fill="none"></path>281      </svg>282      <div class="badge">89</div>283    </div>284    <div class="camera-pill">285      <svg width="40" height="40" class="icon-fill" viewBox="0 0 24 24">286        <rect x="4" y="6" width="12" height="12" rx="2" fill="#cfd8dc"></rect>287        <polygon points="16,10 22,8 22,16 16,14" fill="#cfd8dc"></polygon>288      </svg>289    </div>290  </div>291 292</div>293</body>294</html>