GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Add activity UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #121212;14    color: #EAEAEA;15    font-family: Arial, Helvetica, sans-serif;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 100%;24    height: 96px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    padding: 0 36px;29    color: #ECEFF1;30    font-size: 36px;31    letter-spacing: 0.5px;32  }33  .status-icons {34    display: flex;35    align-items: center;36    gap: 26px;37  }38  .icon {39    width: 40px;40    height: 40px;41    display: inline-flex;42    align-items: center;43    justify-content: center;44  }45  .icon svg { width: 100%; height: 100%; fill: #ECEFF1; }46 47  /* App bar */48  .app-bar {49    position: absolute;50    top: 96px;51    left: 0;52    width: 100%;53    height: 140px;54    background: #1C1C1C;55    border-bottom: 2px solid #2A2A2A;56    display: flex;57    align-items: center;58    padding: 0 28px;59  }60  .app-left {61    display: flex;62    align-items: center;63    gap: 26px;64  }65  .app-title {66    font-size: 48px;67    font-weight: 500;68  }69  .app-actions {70    margin-left: auto;71    display: flex;72    align-items: center;73    gap: 32px;74  }75  .save {76    color: #72A7FF;77    font-size: 42px;78  }79  .kebab { width: 48px; height: 48px; }80 81  /* Content area */82  .content {83    position: absolute;84    top: 236px; /* status(96) + appbar(140) */85    left: 0;86    width: 100%;87  }88  .row {89    height: 140px;90    padding: 0 40px;91    display: flex;92    align-items: center;93    justify-content: space-between;94    border-bottom: 1px solid #2A2A2A;95  }96  .label {97    font-size: 42px;98    color: #DADADA;99  }100  .value {101    font-size: 42px;102    color: #EAEAEA;103  }104  .value.muted { color: #A7A7A7; }105  .section-spacer {106    height: 22px;107    background: #181818;108    border-top: 1px solid #2A2A2A;109    border-bottom: 1px solid #2A2A2A;110  }111  .multi-right {112    display: flex;113    align-items: center;114    gap: 40px;115  }116  .caret {117    display: inline-block;118    width: 2px;119    height: 48px;120    background: #7D7DFF;121    margin-left: 12px;122    vertical-align: middle;123  }124 125  /* Keyboard */126  .keyboard {127    position: absolute;128    bottom: 90px; /* leave room for nav pill */129    left: 0;130    width: 100%;131    height: 940px;132    padding: 30px 32px;133    background: #121212;134    box-sizing: border-box;135  }136  .keys-grid {137    display: grid;138    grid-template-columns: repeat(4, 1fr);139    grid-auto-rows: 200px;140    gap: 24px;141  }142  .key {143    background: #2B2B2B;144    border-radius: 100px;145    display: flex;146    align-items: center;147    justify-content: center;148    font-size: 84px;149    color: #FFFFFF;150    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);151  }152  .key.small { font-size: 64px; }153  .key.pink { background: #F5D9E1; color: #1A1A1A; }154  .key.purple { background: #E9E0FF; color: #1A1A1A; }155  .key svg { width: 86px; height: 86px; }156 157  .keyboard-footer {158    position: absolute;159    bottom: 16px;160    left: 40px;161    right: 40px;162    display: flex;163    align-items: center;164    justify-content: flex-start;165    gap: 20px;166  }167  .chevron {168    width: 38px;169    height: 24px;170  }171  .nav-pill {172    position: absolute;173    bottom: 18px;174    left: 50%;175    transform: translateX(-50%);176    width: 340px;177    height: 12px;178    background: #E0E0E0;179    opacity: 0.65;180    border-radius: 12px;181  }182</style>183</head>184<body>185<div id="render-target">186 187  <!-- Status bar -->188  <div class="status-bar">189    <div>9:46</div>190    <div class="status-icons">191      <div class="icon">192        <svg viewBox="0 0 24 24"><path d="M2 18h20L12 6 2 18z"/></svg>193      </div>194      <div class="icon">195        <svg viewBox="0 0 24 24"><path d="M4 16h16v2H4zm2-4h12v2H6zm3-4h6v2H9z"/></svg>196      </div>197      <div class="icon">198        <svg viewBox="0 0 24 24"><path d="M3 18h18v-2H3zm2-4h14v-2H5zm3-4h8V8H8z"/></svg>199      </div>200      <div class="icon">201        <svg viewBox="0 0 24 24"><path d="M3 10l4-4 4 4-4 4-4-4zm10 0l4-4 4 4-4 4-4-4z"/></svg>202      </div>203      <div class="icon">204        <svg viewBox="0 0 24 24"><path d="M20 8v8H4V8h16m1-2H3v12h18V6z"/></svg>205      </div>206    </div>207  </div>208 209  <!-- App bar -->210  <div class="app-bar">211    <div class="app-left">212      <div class="icon">213        <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" stroke="#ECEFF1" stroke-width="2" fill="none" stroke-linecap="round"/></svg>214      </div>215      <div class="app-title">Add activity</div>216    </div>217    <div class="app-actions">218      <div class="save">Save</div>219      <div class="kebab icon">220        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>221      </div>222    </div>223  </div>224 225  <!-- Content list -->226  <div class="content">227    <div class="row">228      <div class="label">Title</div>229      <div class="value muted">Add</div>230    </div>231 232    <div class="row">233      <div class="label">Activity</div>234      <div class="value">Walking</div>235    </div>236 237    <div class="section-spacer"></div>238 239    <div class="row">240      <div class="label">Start</div>241      <div class="multi-right">242        <div class="value">Today</div>243        <div class="value">9:15 AM</div>244      </div>245    </div>246 247    <div class="row">248      <div class="label">Duration</div>249      <div class="value">30 min</div>250    </div>251 252    <div class="section-spacer"></div>253 254    <div class="row">255      <div class="label">Intensity</div>256      <div class="value muted">Add Heart Pts</div>257    </div>258 259    <div class="row">260      <div class="label">Distance</div>261      <div class="value muted">Add mi</div>262    </div>263 264    <div class="row">265      <div class="label">Energy expended</div>266      <div class="value muted">Add Cal</div>267    </div>268 269    <div class="row">270      <div class="label">Steps</div>271      <div class="value">10 steps<span class="caret"></span></div>272    </div>273  </div>274 275  <!-- Numeric keyboard -->276  <div class="keyboard">277    <div class="keys-grid">278      <div class="key">1</div>279      <div class="key">2</div>280      <div class="key">3</div>281      <div class="key small">-</div>282 283      <div class="key">4</div>284      <div class="key">5</div>285      <div class="key">6</div>286      <div class="key">287        <svg viewBox="0 0 24 24"><path d="M4 12h12v4H4zM16 8h4v12h-4z"/></svg>288      </div>289 290      <div class="key">7</div>291      <div class="key">8</div>292      <div class="key">9</div>293      <div class="key pink">294        <svg viewBox="0 0 24 24"><path d="M5 7h12l2 2-2 2H5V7zm4 8l2-2 2 2-2 2-2-2z"/></svg>295      </div>296 297      <div class="key small">,</div>298      <div class="key">0</div>299      <div class="key small">.</div>300      <div class="key purple">301        <svg viewBox="0 0 24 24"><path d="M4 12h12l-4-4 2-2 8 8-8 8-2-2 4-4H4z"/></svg>302      </div>303    </div>304 305    <div class="keyboard-footer">306      <div class="chevron">307        <svg viewBox="0 0 24 24"><path d="M5 15l7-7 7 7" stroke="#D0D0D0" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>308      </div>309    </div>310  </div>311 312  <!-- Navigation pill -->313  <div class="nav-pill"></div>314 315</div>316</body>317</html>