GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Compose UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #121212;14    color: #EDEDED;15  }16  .status-bar {17    height: 100px;18    padding: 0 36px;19    display: flex;20    align-items: center;21    justify-content: space-between;22    color: #EDEDED;23    font-size: 40px;24    letter-spacing: 1px;25  }26  .status-icons svg { width: 42px; height: 42px; margin-left: 28px; fill: #EDEDED; opacity: 0.9; }27  .app-bar {28    position: relative;29    height: 140px;30    display: flex;31    align-items: center;32    padding: 0 24px;33    border-bottom: 1px solid #232323;34  }35  .app-bar .title {36    font-size: 54px;37    font-weight: 600;38    margin-left: 16px;39  }40  .app-actions {41    margin-left: auto;42    display: flex;43    align-items: center;44  }45  .app-actions svg { width: 56px; height: 56px; fill: #EDEDED; margin-left: 28px; }46  .icon-btn { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }47  .content {48    padding: 24px 36px 0 36px;49  }50  .field {51    padding: 18px 0;52    border-bottom: 1px solid #292929;53  }54  .label {55    font-size: 30px;56    color: #A7A7A7;57    margin-bottom: 8px;58  }59  .value {60    font-size: 40px;61    color: #EDEDED;62  }63  .row {64    display: flex;65    align-items: center;66  }67  .chip-email {68    padding: 10px 14px;69    background: #1F1F1F;70    border: 1px solid #2B2B2B;71    border-radius: 22px;72    font-size: 36px;73  }74  .caret { width: 36px; height: 36px; margin-left: 12px; fill: #A7A7A7; }75  .suggestion {76    margin-top: 28px;77    display: flex;78    align-items: center;79    padding: 20px 16px;80    border-radius: 18px;81  }82  .avatar {83    width: 92px;84    height: 92px;85    border-radius: 50%;86    background: #6E8C94;87    color: white;88    display: flex;89    align-items: center;90    justify-content: center;91    font-weight: 700;92    font-size: 44px;93    margin-right: 22px;94  }95  .suggestion .primary { font-size: 40px; }96  .suggestion .secondary { font-size: 30px; color: #B5B5B5; margin-top: 6px; }97 98  /* Keyboard mock */99  .kb {100    position: absolute;101    left: 0; right: 0; bottom: 90px;102    height: 920px;103    background: #1B1B1B;104    border-top: 1px solid #2A2A2A;105    padding: 18px 22px 28px 22px;106  }107  .kb-tools {108    display: flex;109    justify-content: space-between;110    padding: 8px 40px 18px 40px;111  }112  .kb-tools svg { width: 46px; height: 46px; fill: #D0D0D0; opacity: 0.9; }113  .kb-row {114    display: grid;115    grid-auto-flow: column;116    grid-gap: 14px;117    margin: 16px 10px;118  }119  .key {120    background: #2A2A2A;121    border-radius: 18px;122    text-align: center;123    padding: 26px 0;124    color: #EDEDED;125    font-size: 42px;126    border: 1px solid #303030;127  }128  .key.small { font-size: 36px; }129  .key.wide { grid-column: span 2; }130  .key.space { grid-column: span 6; }131  .key.icon { display: flex; align-items: center; justify-content: center; }132  .key.pill {133    background: #C7B7D9;134    color: #1B1B1B;135    border-color: #C7B7D9;136  }137  .gesture {138    position: absolute;139    bottom: 24px;140    left: 50%;141    transform: translateX(-50%);142    width: 360px;143    height: 10px;144    background: #E6E6E6;145    border-radius: 10px;146    opacity: 0.9;147  }148</style>149</head>150<body>151<div id="render-target">152 153  <!-- Status bar -->154  <div class="status-bar">155    <div>8:31</div>156    <div class="status-icons">157      <!-- simple placeholders -->158      <svg viewBox="0 0 24 24"><path d="M12 2l4 8H8l4-8zm0 20a6 6 0 006-6H6a6 6 0 006 6z"/></svg>159      <svg viewBox="0 0 24 24"><path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h10v2H4z"/></svg>160      <svg viewBox="0 0 24 24"><path d="M7 20h10V4H7v16zm-2 2h14a2 2 0 002-2V4a2 2 0 00-2-2H5a2 2 0 00-2 2v16a2 2 0 002 2z"/></svg>161      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="2"/></svg>162      <svg viewBox="0 0 24 24"><path d="M20 7v10a2 2 0 01-2 2h-3v-2h3V7h-3V5h3a2 2 0 012 2zM4 17h10V7H4v10zm-2 2V5h14v14H2z"/></svg>163      <svg viewBox="0 0 24 24"><path d="M11 21h2V3h-2v18z"/></svg>164    </div>165  </div>166 167  <!-- App bar -->168  <div class="app-bar">169    <div class="icon-btn">170      <svg viewBox="0 0 24 24" width="64" height="64" fill="#EDEDED"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>171    </div>172    <div class="title">Compose</div>173    <div class="app-actions">174      <!-- attach -->175      <svg viewBox="0 0 24 24"><path d="M16.5 6.5v8a4.5 4.5 0 11-9 0v-9a3 3 0 016 0v8a1.5 1.5 0 11-3 0V7h-2v6.5a3.5 3.5 0 107 0v-8h-2z"/></svg>176      <!-- send -->177      <svg viewBox="0 0 24 24"><path d="M2 21l21-9L2 3v7l15 2-15 2z"/></svg>178      <!-- more -->179      <svg viewBox="0 0 24 24"><path d="M12 6a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4zm0 8a2 2 0 110-4 2 2 0 010 4z"/></svg>180    </div>181  </div>182 183  <!-- Content -->184  <div class="content">185    <div class="field">186      <div class="label">From</div>187      <div class="row">188        <div class="value">dbwscratch.test.id4@gmail.com</div>189      </div>190    </div>191 192    <div class="field">193      <div class="label">To</div>194      <div class="row">195        <div class="chip-email">vadubey@google.com</div>196        <svg class="caret" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>197      </div>198    </div>199 200    <div class="suggestion">201      <div class="avatar">v</div>202      <div>203        <div class="primary">vadubey@google.com</div>204        <div class="secondary">vadubey@google.com</div>205      </div>206    </div>207  </div>208 209  <!-- Keyboard mock -->210  <div class="kb">211    <div class="kb-tools">212      <svg viewBox="0 0 24 24"><path d="M12 15.5A3.5 3.5 0 108.5 12 3.5 3.5 0 0012 15.5zm0-13a9.5 9.5 0 109.5 9.5A9.51 9.51 0 0012 2.5z"/></svg>213      <svg viewBox="0 0 24 24"><path d="M3 5h18v4H3zm0 5h12v9H3z"/></svg>214      <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .9-4.5 4.4 1 6.3L12 17l-5.5 2.6 1-6.3L3 8.9 9 8z"/></svg>215      <svg viewBox="0 0 24 24"><path d="M8 4h8v2H8zM8 9h8v2H8zM8 14h8v2H8z"/></svg>216      <svg viewBox="0 0 24 24"><path d="M12 3a4 4 0 00-4 4v2H6v12h12V9h-2V7a4 4 0 00-4-4zm-2 6V7a2 2 0 114 0v2H10z"/></svg>217      <svg viewBox="0 0 24 24"><path d="M12 3v18M3 12h18" /></svg>218    </div>219 220    <!-- Row 1 -->221    <div class="kb-row" style="grid-template-columns: repeat(10, 1fr);">222      <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div>223      <div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>224    </div>225    <!-- Row 2 -->226    <div class="kb-row" style="grid-template-columns: repeat(9, 1fr);">227      <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>228      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>229    </div>230    <!-- Row 3 -->231    <div class="kb-row" style="grid-template-columns: 1.6fr repeat(7, 1fr) 1.8fr;">232      <div class="key icon small">233        <svg viewBox="0 0 24 24" width="44" height="44" fill="#EDEDED"><path d="M7 14l5-5 5 5H7z"/></svg>234      </div>235      <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>236      <div class="key icon">237        <svg viewBox="0 0 24 24" width="52" height="52" fill="#EDEDED"><path d="M20 7H8l5-5-1.4-1.4L4.2 8l7.4 7.4L13 14l-5-5h12V7z"/></svg>238      </div>239    </div>240    <!-- Row 4 -->241    <div class="kb-row" style="grid-template-columns: 1.8fr 1.4fr 6fr 1.2fr 1.8fr;">242      <div class="key pill small">?123</div>243      <div class="key small">@</div>244      <div class="key space"></div>245      <div class="key small">.</div>246      <div class="key pill icon">247        <svg viewBox="0 0 24 24" width="50" height="50" fill="#1B1B1B"><path d="M3 12l18-9-6 9 6 9z"/></svg>248      </div>249    </div>250  </div>251 252  <!-- Bottom gesture bar -->253  <div class="gesture"></div>254 255</div>256</body>257</html>