GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Add activity UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;15    color: #EDEDED;16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;17  }18 19  /* Status bar */20  .status {21    height: 90px;22    padding: 0 32px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #EDEDED;27    font-size: 36px;28    letter-spacing: 0.5px;29    box-sizing: border-box;30  }31  .status .icons {32    display: flex;33    align-items: center;34    gap: 20px;35  }36  .status .dot {37    width: 10px; height: 10px; background: #9E9E9E; border-radius: 50%;38  }39  .signal { width: 32px; height: 22px; border: 2px solid #EDEDED; border-top: none; border-right: none; transform: skewX(-10deg); opacity: 0.85; }40  .wifi {41    width: 34px; height: 22px; position: relative;42  }43  .wifi:before, .wifi:after {44    content: "";45    position: absolute; left: 0; right: 0; margin: auto; border: 2px solid #EDEDED; border-color: #EDEDED transparent transparent transparent; border-radius: 50%; }46  .wifi:before { width: 34px; height: 34px; top: -10px; }47  .wifi:after { width: 18px; height: 18px; top: -2px; }48  .battery {49    width: 44px; height: 22px; border: 2px solid #EDEDED; border-radius: 4px; position: relative;50  }51  .battery:after {52    content: ""; position: absolute; right: -6px; top: 6px; width: 6px; height: 10px; background: #EDEDED; border-radius: 2px;53  }54 55  /* App bar */56  .appbar {57    height: 140px;58    padding: 0 24px;59    background: #1F1F1F;60    display: flex;61    align-items: center;62    box-sizing: border-box;63    border-bottom: 1px solid #2A2A2A;64  }65  .appbar .left, .appbar .right {66    width: 200px; display: flex; align-items: center; gap: 28px;67  }68  .appbar .center {69    flex: 1; text-align: left; font-size: 46px; font-weight: 600; color: #EDEDED;70  }71  .icon-btn {72    width: 84px; height: 84px; border-radius: 42px; display: flex; align-items: center; justify-content: center; color: #EDEDED;73  }74  .text-link { color: #80BFFF; font-size: 38px; font-weight: 600; }75 76  /* Form list */77  .content {78    position: absolute;79    top: 230px; /* status + app bar */80    bottom: 980px; /* space for keyboard */81    left: 0; right: 0;82    overflow: hidden;83  }84  .list {85    display: flex;86    flex-direction: column;87  }88  .row {89    height: 150px;90    padding: 0 32px;91    display: flex;92    align-items: center;93    justify-content: space-between;94    border-bottom: 1px solid #2A2A2A;95    box-sizing: border-box;96  }97  .row.two-line { height: 170px; }98  .label {99    font-size: 36px; color: #CFCFCF;100  }101  .value {102    font-size: 38px; color: #EDEDED;103  }104  .value.hint { color: #8D8D8D; }105  .right-split {106    display: flex; align-items: center; gap: 60px;107    font-size: 38px; color: #EDEDED;108  }109  .muted { color: #B0B0B0; }110  .spacer {111    height: 22px; background: #121212;112  }113 114  /* Steps input illusion */115  .steps-field {116    display: flex; align-items: center; gap: 10px;117    font-size: 38px;118  }119  .steps-num {120    min-width: 40px; padding-right: 6px; border-right: 2px solid #80BFFF;121  }122  .steps-unit { color: #8D8D8D; padding-left: 6px; }123 124  /* Keyboard */125  .keyboard {126    position: absolute;127    bottom: 110px;128    left: 0; right: 0;129    padding: 20px 28px 0 28px;130    box-sizing: border-box;131    background: #121212;132  }133  .keys {134    display: grid;135    grid-template-columns: repeat(4, 1fr);136    gap: 22px;137  }138  .key {139    height: 160px;140    background: #2B2B2B;141    border-radius: 120px;142    display: flex; align-items: center; justify-content: center;143    color: #EDEDED;144    font-size: 58px;145    letter-spacing: 1px;146    user-select: none;147  }148  .key.small { font-size: 48px; }149  .key.special-del { background: #EBDDFF; color: #121212; }150  .key.special-enter { background: #CFE3FF; color: #121212; }151  .key svg { width: 56px; height: 56px; }152  .kbd-bar {153    padding: 6px 0 0 10px;154    color: #9E9E9E;155    font-size: 40px;156  }157 158  /* Gesture bar */159  .gesture {160    position: absolute;161    bottom: 28px; left: 50%;162    transform: translateX(-50%);163    width: 360px; height: 12px; border-radius: 8px;164    background: #E6E6E6; opacity: 0.95;165  }166</style>167</head>168<body>169<div id="render-target">170 171  <!-- Status bar -->172  <div class="status">173    <div class="time">9:11</div>174    <div class="icons">175      <div class="dot"></div>176      <div class="dot"></div>177      <div class="dot"></div>178      <div class="wifi"></div>179      <div class="battery"></div>180    </div>181  </div>182 183  <!-- App bar -->184  <div class="appbar">185    <div class="left">186      <div class="icon-btn" aria-label="Close">187        <svg viewBox="0 0 24 24" fill="none" stroke="#EDEDED" stroke-width="2">188          <path d="M4 4 L20 20"></path>189          <path d="M20 4 L4 20"></path>190        </svg>191      </div>192    </div>193    <div class="center">Add activity</div>194    <div class="right" style="justify-content:flex-end;">195      <div class="text-link">Save</div>196      <div class="icon-btn" aria-label="More">197        <svg viewBox="0 0 24 24" fill="#EDEDED">198          <circle cx="12" cy="5" r="2"></circle>199          <circle cx="12" cy="12" r="2"></circle>200          <circle cx="12" cy="19" r="2"></circle>201        </svg>202      </div>203    </div>204  </div>205 206  <!-- Content list -->207  <div class="content">208    <div class="list">209      <div class="row">210        <div class="label">Title</div>211        <div class="value hint">Add</div>212      </div>213 214      <div class="row">215        <div class="label">Activity</div>216        <div class="value">Running</div>217      </div>218 219      <div class="row">220        <div class="label">Start</div>221        <div class="right-split">222          <div class="muted">Today</div>223          <div>8:40 AM</div>224        </div>225      </div>226 227      <div class="row">228        <div class="label">Duration</div>229        <div class="value">30 min</div>230      </div>231 232      <div class="spacer"></div>233 234      <div class="row">235        <div class="label">Intensity</div>236        <div class="value hint">Add Heart Pts</div>237      </div>238 239      <div class="row">240        <div class="label">Distance</div>241        <div class="value hint">Add mi</div>242      </div>243 244      <div class="row">245        <div class="label">Energy expended</div>246        <div class="value hint">Add Cal</div>247      </div>248 249      <div class="row">250        <div class="label">Steps</div>251        <div class="steps-field">252          <span class="steps-num">1</span>253          <span class="steps-unit">steps</span>254        </div>255      </div>256    </div>257  </div>258 259  <!-- Keyboard -->260  <div class="keyboard">261    <div class="keys">262      <div class="key">1</div>263      <div class="key">2</div>264      <div class="key">3</div>265      <div class="key small">–</div>266 267      <div class="key">4</div>268      <div class="key">5</div>269      <div class="key">6</div>270      <div class="key small">⌊</div>271 272      <div class="key">7</div>273      <div class="key">8</div>274      <div class="key">9</div>275      <div class="key special-del" aria-label="Backspace">276        <svg viewBox="0 0 24 24">277          <path d="M4 12 L9 6 H20 V18 H9 Z" fill="#121212"></path>278          <path d="M12 9 L16 13 M16 9 L12 13" stroke="#121212" stroke-width="2"></path>279        </svg>280      </div>281 282      <div class="key small">,</div>283      <div class="key">0</div>284      <div class="key small">.</div>285      <div class="key special-enter" aria-label="Enter">286        <svg viewBox="0 0 24 24">287          <path d="M4 12 H16" stroke="#121212" stroke-width="2" fill="none"></path>288          <path d="M12 8 L16 12 L12 16" fill="none" stroke="#121212" stroke-width="2"></path>289        </svg>290      </div>291    </div>292    <div class="kbd-bar">˄</div>293  </div>294 295  <!-- Gesture bar -->296  <div class="gesture"></div>297</div>298</body>299</html>