GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Gmail Conversation Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #121212;13    color: #EDEDED;14  }15 16  /* Status bar */17  .status-bar {18    height: 90px;19    padding: 0 32px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #DADADA;24    font-size: 36px;25    letter-spacing: 0.5px;26  }27  .status-right {28    display: flex;29    align-items: center;30    gap: 18px;31  }32  .dot { width: 14px; height: 14px; background: #DADADA; border-radius: 50%; opacity: 0.9; }33  .battery {34    width: 48px; height: 26px; border: 3px solid #DADADA; border-radius: 6px; position: relative;35  }36  .battery::after {37    content: ""; position: absolute; right: -10px; top: 6px; width: 8px; height: 12px; background: #DADADA; border-radius: 2px;38  }39 40  /* Top actions bar */41  .top-actions {42    height: 100px;43    display: flex;44    align-items: center;45    padding: 0 24px;46  }47  .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }48  .actions-right { margin-left: auto; display: flex; gap: 18px; }49  .title-row {50    padding: 10px 24px 22px 24px;51    display: flex;52    align-items: center;53    gap: 16px;54    border-bottom: 1px solid #1F1F1F;55  }56  .title-text {57    font-size: 54px;58    font-weight: 700;59    letter-spacing: 1px;60  }61  .chip {62    font-size: 28px;63    color: #B3B3B3;64    border: 1px solid #2c2c2c;65    padding: 8px 16px;66    border-radius: 18px;67  }68  .title-spacer { flex: 1; }69  .star { width: 44px; height: 44px; margin-right: 12px; }70 71  /* Conversation */72  .content {73    padding-bottom: 320px;74  }75  .message {76    display: grid;77    grid-template-columns: 120px 1fr;78    column-gap: 24px;79    padding: 32px 24px;80    border-bottom: 1px solid #1F1F1F;81  }82  .avatar {83    width: 96px; height: 96px;84    border-radius: 50%;85    display: flex; align-items: center; justify-content: center;86    font-size: 40px; font-weight: 700;87    color: #232323;88    border: 2px solid #3a3a3a;89  }90  .avatar.grey { background: #9BA5AA; color: #232323; }91  .avatar.purple { background: #B29BD6; color: #2E2E2E; }92  .msg-header {93    display: flex; align-items: baseline; gap: 16px; margin-bottom: 12px;94  }95  .sender { font-size: 40px; font-weight: 700; color: #EDEDED; }96  .time { font-size: 28px; color: #A1A1A1; }97  .to-me {98    font-size: 30px; color: #CFCFCF; margin-left: 8px;99  }100  .msg-body {101    font-size: 36px; line-height: 1.4; color: #D8D8D8; padding-right: 24px;102  }103  .link { color: #7EB3FF; font-size: 32px; margin-top: 20px; }104 105  /* Smart reply chips */106  .smart-reply {107    display: flex;108    gap: 24px;109    padding: 28px 24px 140px 24px;110  }111  .smart-chip {112    border: 1px solid #3a3a3a; color: #CFE3FF;113    border-radius: 28px; padding: 20px 28px;114    font-size: 34px; background: rgba(255,255,255,0.04);115  }116 117  /* Bottom snackbar */118  .snackbar {119    position: absolute; left: 24px; right: 24px; bottom: 190px;120    background: #2A2A2A; color: #EDEDED;121    border-radius: 26px; padding: 26px 28px;122    display: flex; justify-content: space-between; align-items: center;123    font-size: 34px;124    box-shadow: 0 8px 24px rgba(0,0,0,0.35);125  }126  .undo { color: #97C7FF; }127 128  /* Bottom floating email pill and camera */129  .bottom-tools {130    position: absolute; bottom: 108px; left: 0; width: 100%;131    display: flex; align-items: center; justify-content: center;132    gap: 280px;133  }134  .pill {135    background: #1E2630; border-radius: 44px;136    padding: 22px 40px; display: inline-flex; align-items: center; gap: 16px;137    box-shadow: inset 0 0 0 2px #2E4359;138  }139  .badge {140    background: #EBA8A8; color: #2D2D2D; font-size: 28px;141    border-radius: 16px; padding: 2px 12px; font-weight: 700;142    transform: translateY(-12px);143  }144  .camera {145    width: 76px; height: 60px; border-radius: 14px;146    border: 2px solid #A7A7A7; display: flex; align-items: center; justify-content: center;147    color: #A7A7A7; font-size: 28px;148  }149 150  /* Navigation handle */151  .nav-handle {152    position: absolute; bottom: 36px; left: 50%;153    width: 420px; height: 12px; border-radius: 6px;154    background: #EDEDED; transform: translateX(-50%);155    opacity: 0.92;156  }157 158  /* Simple icon styling */159  svg { fill: none; stroke: #EDEDED; stroke-width: 4; }160</style>161</head>162<body>163<div id="render-target">164 165  <!-- Status bar -->166  <div class="status-bar">167    <div>2:45</div>168    <div class="status-right">169      <div class="dot"></div>170      <div class="dot"></div>171      <div class="dot"></div>172      <div class="battery"></div>173    </div>174  </div>175 176  <!-- Top actions -->177  <div class="top-actions">178    <div class="icon-btn">179      <!-- Back arrow -->180      <svg width="44" height="44" viewBox="0 0 24 24">181        <path d="M10 6L4 12l6 6"></path>182        <path d="M4 12h16"></path>183      </svg>184    </div>185    <div class="actions-right">186      <!-- Download -->187      <div class="icon-btn">188        <svg width="44" height="44" viewBox="0 0 24 24">189          <path d="M12 4v10"></path>190          <path d="M8 10l4 4 4-4"></path>191          <path d="M4 20h16"></path>192        </svg>193      </div>194      <!-- Delete -->195      <div class="icon-btn">196        <svg width="44" height="44" viewBox="0 0 24 24">197          <path d="M4 7h16"></path>198          <path d="M9 7V5h6v2"></path>199          <rect x="6" y="7" width="12" height="14" rx="2" ry="2" style="stroke:#EDEDED; fill:none;"></rect>200        </svg>201      </div>202      <!-- Mail -->203      <div class="icon-btn">204        <svg width="44" height="44" viewBox="0 0 24 24">205          <rect x="3" y="5" width="18" height="14" rx="2"></rect>206          <path d="M3 7l9 6 9-6"></path>207        </svg>208      </div>209      <!-- Kebab -->210      <div class="icon-btn">211        <svg width="44" height="44" viewBox="0 0 24 24">212          <circle cx="12" cy="5" r="2" style="stroke:none; fill:#EDEDED;"></circle>213          <circle cx="12" cy="12" r="2" style="stroke:none; fill:#EDEDED;"></circle>214          <circle cx="12" cy="19" r="2" style="stroke:none; fill:#EDEDED;"></circle>215        </svg>216      </div>217    </div>218  </div>219 220  <!-- Title row -->221  <div class="title-row">222    <div class="title-text">OFFICIAL WEEKEND PARTY</div>223    <div class="chip">Inbox</div>224    <div class="title-spacer"></div>225    <!-- Star -->226    <svg class="star" viewBox="0 0 24 24">227      <path d="M12 3l3.1 6.3 7 1-5 4.9 1.2 7-6.3-3.3-6.3 3.3 1.2-7-5-4.9 7-1z" style="fill:none; stroke:#EDEDED;"></path>228    </svg>229  </div>230 231  <!-- Content -->232  <div class="content">233 234    <!-- First message -->235    <div class="message">236      <div class="avatar grey">C</div>237      <div>238        <div class="msg-header">239          <div class="sender">Cerebra Research</div>240          <div class="time">1:19 PM</div>241        </div>242        <div class="msg-body">243          You are invited to the official weekend party this weekend, organized by our company.244        </div>245      </div>246    </div>247 248    <!-- Second message -->249    <div class="message">250      <div class="avatar purple">C</div>251      <div>252        <div class="msg-header" style="align-items:center;">253          <div class="sender">Cerebra Research</div>254          <div class="time">2:12 PM</div>255          <!-- Reply arrow -->256          <svg width="40" height="40" viewBox="0 0 24 24" style="margin-left:auto;">257            <path d="M10 9V5l-7 7 7 7v-4h4c3.3 0 6-2.7 6-6 0-1.3-.4-2.5-1.1-3.5"></path>258          </svg>259        </div>260        <div class="to-me">to me ▾</div>261        <div class="msg-body" style="margin-top:14px;">262          I don't know anything about263        </div>264        <div class="link">Show quoted text</div>265      </div>266    </div>267 268    <!-- Smart replies -->269    <div class="smart-reply">270      <div class="smart-chip">That's weird.</div>271      <div class="smart-chip">Oh okay.</div>272      <div class="smart-chip">Ok, thanks for letting me know.</div>273    </div>274  </div>275 276  <!-- Snackbar -->277  <div class="snackbar">278    <div>Sent</div>279    <div class="undo">Undo</div>280  </div>281 282  <!-- Bottom floating tools -->283  <div class="bottom-tools">284    <div class="pill">285      <!-- Envelope icon -->286      <svg width="44" height="44" viewBox="0 0 24 24">287        <rect x="3" y="5" width="18" height="14" rx="3" style="fill:none; stroke:#CFE3FF;"></rect>288        <path d="M3 7l9 6 9-6" style="stroke:#CFE3FF;"></path>289      </svg>290      <span style="color:#CFE3FF; font-size:34px;">Mail</span>291      <span class="badge">99</span>292    </div>293    <div class="camera">📷</div>294  </div>295 296  <!-- Navigation handle -->297  <div class="nav-handle"></div>298 299</div>300</body>301</html>