GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Gmail Thread Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #111214;14    color: #EDEDED;15  }16 17  /* Status bar */18  .status-bar {19    height: 72px;20    padding: 0 28px;21    color: #e8e8e8;22    display: flex;23    align-items: center;24    font-size: 30px;25    letter-spacing: 0.5px;26  }27  .status-icons { margin-left: auto; display: flex; gap: 18px; align-items: center; }28  .dot { width: 14px; height: 14px; border-radius: 50%; background: #e8e8e8; opacity: .85; }29 30  /* Top actions */31  .top-actions {32    height: 100px;33    padding: 0 20px 0 14px;34    display: flex;35    align-items: center;36  }37  .icon-btn {38    width: 84px;39    height: 84px;40    border-radius: 42px;41    display: grid;42    place-items: center;43    color: #EDEDED;44  }45  .icon-row { margin-left: auto; display: flex; gap: 10px; }46  svg { width: 40px; height: 40px; fill: #EDEDED; }47 48  /* Title area */49  .title-row {50    padding: 10px 28px 18px 28px;51    display: flex;52    align-items: center;53    gap: 16px;54  }55  .title-text {56    font-size: 56px;57    font-weight: 700;58    color: #FFFFFF;59  }60  .chip {61    background: #2a2c30;62    color: #BFC5CC;63    padding: 10px 18px;64    border-radius: 20px;65    font-size: 26px;66  }67  .spacer { flex: 1; }68  .star { width: 44px; height: 44px; }69 70  /* Conversation list */71  .thread {72    padding-bottom: 160px;73  }74  .msg {75    display: flex;76    gap: 26px;77    padding: 26px 28px;78    border-bottom: 1px solid #24262B;79  }80  .avatar {81    width: 96px; height: 96px; border-radius: 50%;82    display: grid; place-items: center; font-weight: 700; font-size: 40px;83  }84  .avatar.jane { background: #B8B0F2; color: #0b0b12; }85  .avatar.cole { background: #7FA4FF; color: #0b0b12; }86  .msg-content { flex: 1; }87  .msg-head {88    display: flex; gap: 12px; align-items: baseline; margin-bottom: 8px;89    font-size: 34px; font-weight: 700;90  }91  .msg-date { margin-left: auto; font-size: 26px; color: #A7A9AE; font-weight: 500; }92  .msg-body {93    color: #D3D6DB; font-size: 34px; line-height: 1.35;94  }95 96  /* Detailed card message */97  .detail-head {98    display: flex; align-items: center; gap: 16px;99    padding: 26px 28px 18px 28px;100  }101  .detail-head .right { margin-left: auto; display: flex; gap: 24px; align-items: center; color: #A7A9AE; }102  .subline { color: #A7A9AE; font-size: 28px; }103  .time { color: #A7A9AE; font-size: 26px; }104  .rounded-card {105    margin: 8px 28px 0 28px;106    border: 1px solid #2A2C31;107    border-radius: 22px;108    padding: 24px;109    background: #15171A;110  }111  .row {112    display: flex; gap: 20px; padding: 14px 0; align-items: flex-start;113    border-bottom: 1px solid #22242A;114  }115  .row:last-child { border-bottom: none; }116  .label { width: 140px; color: #A7A9AE; font-size: 28px; }117  .value { flex: 1; font-size: 30px; color: #EDEDED; }118  .link { color: #7FB4FF; text-decoration: none; font-size: 30px; display: inline-block; margin-top: 18px; }119 120  .hint-link { color: #7FB4FF; font-size: 30px; margin: 30px 28px; }121 122  /* Floating reply buttons */123  .fab {124    position: absolute;125    bottom: 110px;126    right: 80px;127    width: 110px; height: 110px; border-radius: 55px;128    background: #263238; display: grid; place-items: center;129    box-shadow: 0 6px 16px rgba(0,0,0,.5);130  }131  .fab.secondary {132    right: auto; left: 210px; background: #263238; opacity:.95;133  }134  .fab svg { width: 48px; height: 48px; }135 136</style>137</head>138<body>139<div id="render-target">140 141  <!-- Status bar -->142  <div class="status-bar">143    9:02144    <div class="status-icons">145      <span class="dot"></span>146      <span class="dot"></span>147      <span class="dot"></span>148      <span class="dot"></span>149    </div>150  </div>151 152  <!-- Top actions row -->153  <div class="top-actions">154    <div class="icon-btn">155      <svg viewBox="0 0 24 24"><path d="M15.5 4L7 12l8.5 8M9 12h13" stroke="#EDEDED" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>156    </div>157    <div class="icon-row">158      <div class="icon-btn">159        <svg viewBox="0 0 24 24"><path d="M12 3v10m0 0l-4-4m4 4l4-4M4 20h16" stroke="#EDEDED" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>160      </div>161      <div class="icon-btn">162        <svg viewBox="0 0 24 24"><path d="M6 7h12l-1 13H7L6 7zm3-3h6v3H9V4z" /></svg>163      </div>164      <div class="icon-btn">165        <svg viewBox="0 0 24 24"><path d="M2 7l10 7L22 7v10H2V7zM2 7l10 7 10-7" fill="#EDEDED"/></svg>166      </div>167      <div class="icon-btn">168        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2.2"/><circle cx="12" cy="12" r="2.2"/><circle cx="12" cy="19" r="2.2"/></svg>169      </div>170    </div>171  </div>172 173  <!-- Title -->174  <div class="title-row">175    <div class="title-text">School Annual function</div>176    <div class="chip">Inbox</div>177    <div class="spacer"></div>178    <svg class="star" viewBox="0 0 24 24"><path d="M12 17.3l-5.5 3.4 1.6-6.2L3 9.7l6.4-.6L12 3l2.6 6.1 6.4.6-5.1 4.8 1.6 6.2z" fill="none" stroke="#EDEDED" stroke-width="1.6"/></svg>179  </div>180 181  <!-- Conversation -->182  <div class="thread">183 184    <div class="msg">185      <div class="avatar jane">J</div>186      <div class="msg-content">187        <div class="msg-head">188          <div>Jane-dbw- Personal-test2</div>189          <div class="msg-date">Sep 4</div>190        </div>191        <div class="msg-body">Hi, Cole I'm inviting you to come at my school function on 2:30am.</div>192      </div>193    </div>194 195    <div class="msg">196      <div class="avatar cole">C</div>197      <div class="msg-content">198        <div class="msg-head">199          <div>Cole</div>200          <div class="msg-date">Sep 4</div>201        </div>202        <div class="msg-body">Hi Jane, Can you please share me the date and place?</div>203      </div>204    </div>205 206    <div class="msg">207      <div class="avatar jane">J</div>208      <div class="msg-content">209        <div class="msg-head">210          <div>Jane-dbw- Personal-test2</div>211          <div class="msg-date">Sep 4</div>212        </div>213        <div class="msg-body">The Annual Function is on 17th September 2023 at New York School.</div>214      </div>215    </div>216 217    <!-- Detailed quoted message -->218    <div class="detail-head">219      <div class="avatar jane" style="width:86px;height:86px;font-size:36px;">J</div>220      <div style="flex:1;">221        <div style="font-size:34px; font-weight:700;">Jane-dbw- Personal-tes...</div>222        <div class="subline">to jason.smith</div>223      </div>224      <div class="right">225        <div class="time">8:22 AM</div>226        <svg viewBox="0 0 24 24"><path d="M15 12l-6 4V8l6 4z" fill="#A7A9AE"/></svg>227        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2.2"/><circle cx="12" cy="12" r="2.2"/><circle cx="12" cy="19" r="2.2"/></svg>228      </div>229    </div>230 231    <div class="rounded-card">232      <div class="row">233        <div class="label">From</div>234        <div class="value">Jane-dbw- Personal-test2 • janedbwpersonaltest@gmail.com</div>235      </div>236      <div class="row">237        <div class="label">To</div>238        <div class="value">jason.smith@hotpop.com</div>239      </div>240      <div class="row">241        <div class="label">Date</div>242        <div class="value">Sep 5, 2023, 8:22 AM</div>243      </div>244      <a class="link" href="#">View security details</a>245    </div>246 247    <div class="hint-link">Hide quoted text</div>248  </div>249 250  <!-- Floating buttons -->251  <div class="fab secondary" title="Reply">252    <svg viewBox="0 0 24 24"><path d="M10 8V5l-7 7 7 7v-3h4c4 0 7-3 7-7 0-1-.2-2-.6-3-.9 2.2-3 4-6.4 4H10z" fill="#EDEDED"/></svg>253  </div>254  <div class="fab" title="Video">255    <svg viewBox="0 0 24 24"><path d="M3 6h12v12H3zM15 10l6-3v10l-6-3V10z" fill="#EDEDED"/></svg>256  </div>257 258</div>259</body>260</html>