GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Gmail Message UI - Shopping list</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #121212;13    color: #EDEDED;14  }15 16  /* Status bar */17  .status-bar {18    height: 96px;19    padding: 0 36px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #EDEDED;24    font-weight: 600;25    font-size: 38px;26  }27  .status-icons {28    display: flex;29    gap: 24px;30    align-items: center;31  }32  .status-dot { width: 24px; height: 24px; border-radius: 50%; background: #BDBDBD; opacity: 0.9; }33  .battery {34    width: 60px; height: 28px; border: 2px solid #BDBDBD; border-radius: 4px; position: relative;35  }36  .battery::after {37    content: ""; position: absolute; right: -10px; top: 8px; width: 8px; height: 12px; background: #BDBDBD; border-radius: 2px;38  }39  .battery .level { position: absolute; left: 2px; top: 2px; height: 22px; width: 40px; background: #BDBDBD; }40 41  /* App bar */42  .app-bar {43    height: 120px;44    padding: 0 24px;45    display: flex;46    align-items: center;47    justify-content: space-between;48  }49  .left-controls {50    display: flex;51    align-items: center;52    gap: 18px;53  }54  .icon-btn {55    width: 76px; height: 76px; display: flex; align-items: center; justify-content: center;56    border-radius: 12px; color: #D0D0D0;57  }58  .icon-btn svg { width: 42px; height: 42px; fill: none; stroke: #D0D0D0; stroke-width: 3; }59  .right-controls { display: flex; align-items: center; gap: 18px; }60 61  /* Title row */62  .title-row {63    padding: 12px 40px 24px 88px;64    position: relative;65    border-bottom: 1px solid #232323;66  }67  .subject {68    font-size: 64px;69    font-weight: 700;70    line-height: 1.1;71  }72  .chip {73    display: inline-block;74    margin-left: 16px;75    padding: 10px 16px;76    font-size: 30px;77    border-radius: 18px;78    background: #1E1E1E;79    color: #BDBDBD;80    vertical-align: middle;81  }82  .star {83    position: absolute;84    right: 36px;85    top: 36px;86    width: 60px; height: 60px;87    display: flex; justify-content: center; align-items: center;88  }89  .star svg { width: 56px; height: 56px; fill: none; stroke: #BDBDBD; stroke-width: 3; }90 91  /* Message list area */92  .thread {93    padding: 36px 40px 0 40px;94  }95  .msg {96    padding: 30px 0;97    border-bottom: 1px solid #222;98  }99  .msg:last-child { border-bottom: none; }100  .msg-header {101    display: flex; gap: 24px; align-items: center;102  }103  .avatar {104    width: 96px; height: 96px; border-radius: 50%;105    background: #5F5F5F; display: flex; align-items: center; justify-content: center; color: #ECECEC; font-weight: 700;106  }107  .avatar.purple { background: #7D61D8; }108  .msg-info {109    flex: 1;110  }111  .from { font-size: 40px; font-weight: 700; }112  .time { font-size: 30px; color: #9E9E9E; margin-left: 16px; }113  .to { font-size: 30px; color: #BDBDBD; margin-top: 4px; }114  .preview { font-size: 34px; color: #CFCFCF; margin-top: 12px; }115 116  .body-text {117    font-size: 42px;118    color: #EDEDED;119    margin: 32px 0 30px 120px;120  }121  .link {122    color: #5AA0FF;123    font-size: 36px;124    margin-left: 120px;125  }126 127  /* Bottom reply buttons */128  .reply-bar {129    position: absolute;130    bottom: 240px;131    left: 32px;132    right: 32px;133    display: flex;134    gap: 28px;135    justify-content: space-between;136  }137  .pill {138    flex: 1;139    min-width: 280px;140    height: 120px;141    border-radius: 60px;142    background: #1C1C1C;143    border: 1px solid #2B2B2B;144    display: flex;145    align-items: center;146    justify-content: center;147    gap: 18px;148    color: #EDEDED;149    font-size: 42px;150    font-weight: 600;151  }152  .pill svg { width: 42px; height: 42px; fill: none; stroke: #D0D0D0; stroke-width: 3; }153 154  /* Floating bottom icons */155  .floating-bar {156    position: absolute;157    bottom: 160px;158    left: 48px;159    right: 48px;160    display: flex;161    justify-content: space-between;162    align-items: center;163  }164  .fab {165    width: 180px; height: 96px; border-radius: 48px; background: #1E2A38;166    display: flex; align-items: center; justify-content: center; gap: 16px;167    color: #FFFFFF;168  }169  .badge {170    position: absolute;171    top: -12px; right: -12px;172    width: 42px; height: 42px; border-radius: 50%;173    background: #E07D86; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700;174    font-size: 28px;175  }176  .cam {177    width: 96px; height: 96px; border-radius: 16px; background: #1E1E1E; border: 1px solid #323232;178    display: flex; align-items: center; justify-content: center;179  }180 181  /* Gesture bar */182  .gesture {183    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);184    width: 640px; height: 12px; background: #BDBDBD; border-radius: 8px; opacity: 0.7;185  }186</style>187</head>188<body>189<div id="render-target">190 191  <!-- Status bar -->192  <div class="status-bar">193    <div>10:42</div>194    <div class="status-icons">195      <div class="status-dot"></div>196      <div class="status-dot"></div>197      <div class="battery"><div class="level"></div></div>198    </div>199  </div>200 201  <!-- App bar with back and actions -->202  <div class="app-bar">203    <div class="left-controls">204      <div class="icon-btn" title="Back">205        <svg viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"/></svg>206      </div>207    </div>208    <div class="right-controls">209      <div class="icon-btn" title="Download">210        <svg viewBox="0 0 24 24">211          <rect x="3" y="3" width="18" height="14" rx="2"></rect>212          <path d="M12 7v8M8 13l4 4 4-4"/>213        </svg>214      </div>215      <div class="icon-btn" title="Delete">216        <svg viewBox="0 0 24 24">217          <path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"></path>218        </svg>219      </div>220      <div class="icon-btn" title="Mark unread">221        <svg viewBox="0 0 24 24">222          <rect x="3" y="5" width="18" height="14" rx="2"></rect>223          <path d="M3 7l9 6 9-6"></path>224        </svg>225      </div>226      <div class="icon-btn" title="More">227        <svg viewBox="0 0 24 24">228          <circle cx="12" cy="5" r="2"></circle>229          <circle cx="12" cy="12" r="2"></circle>230          <circle cx="12" cy="19" r="2"></circle>231        </svg>232      </div>233    </div>234  </div>235 236  <!-- Title row -->237  <div class="title-row">238    <div class="subject">Shopping list <span class="chip">Inbox</span></div>239    <div class="star">240      <svg viewBox="0 0 24 24"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>241    </div>242  </div>243 244  <!-- Thread content -->245  <div class="thread">246    <!-- First message preview -->247    <div class="msg">248      <div class="msg-header">249        <div class="avatar">C</div>250        <div class="msg-info">251          <div>252            <span class="from">Cerebra Research</span>253            <span class="time">Sep 26</span>254          </div>255          <div class="preview">Books Pen Stamps Plants Desk Chair</div>256        </div>257      </div>258    </div>259 260    <!-- Second message -->261    <div class="msg">262      <div class="msg-header">263        <div class="avatar purple">L</div>264        <div class="msg-info">265          <div>266            <span class="from">lucas kramer</span>267            <span class="time">10:25 PM</span>268          </div>269          <div class="to">to Cerebra ▾</div>270        </div>271      </div>272      <div class="body-text">Confirm the order.</div>273      <div class="link">Show quoted text</div>274    </div>275  </div>276 277  <!-- Reply buttons -->278  <div class="reply-bar">279    <div class="pill">280      <svg viewBox="0 0 24 24"><path d="M10 19l-7-7 7-7M3 12h18"/></svg>281      <span>Reply</span>282    </div>283    <div class="pill">284      <svg viewBox="0 0 24 24"><path d="M10 19l-7-7 7-7M21 19l-7-7 7-7"/></svg>285      <span>Reply all</span>286    </div>287    <div class="pill">288      <svg viewBox="0 0 24 24"><path d="M14 5l7 7-7 7M21 12H3"/></svg>289      <span>Forward</span>290    </div>291  </div>292 293  <!-- Floating bottom icons -->294  <div class="floating-bar">295    <div class="fab" style="position: relative;">296      <svg viewBox="0 0 24 24" width="38" height="38" fill="none" stroke="#FFFFFF" stroke-width="2">297        <rect x="3" y="5" width="18" height="14" rx="2"></rect>298        <path d="M3 7l9 6 9-6"></path>299      </svg>300      <span>✉️</span>301      <div class="badge">4</div>302    </div>303    <div class="cam">304      <svg viewBox="0 0 24 24" width="38" height="38" fill="none" stroke="#D0D0D0" stroke-width="2">305        <rect x="3" y="6" width="14" height="12" rx="2"></rect>306        <path d="M17 9l4-3v12l-4-3z"></path>307      </svg>308    </div>309  </div>310 311  <!-- Gesture bar -->312  <div class="gesture"></div>313</div>314</body>315</html>