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 - Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #121212;15    color: #EDEDED;16  }17 18  /* Status bar */19  .status-bar {20    height: 90px;21    padding: 0 32px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #E0E0E0;26    font-size: 34px;27    background: #121212;28  }29  .status-icons {30    display: flex;31    gap: 18px;32    align-items: center;33  }34  .dot { width: 10px; height: 10px; background: #E0E0E0; border-radius: 50%; display: inline-block; }35 36  /* App bar */37  .app-bar {38    height: 140px;39    background: #1E1F23;40    display: flex;41    align-items: center;42    padding: 0 24px;43    border-bottom: 1px solid #2A2A2A;44  }45  .app-title {46    font-size: 48px;47    font-weight: 500;48    margin-left: 18px;49    color: #EAEAEA;50  }51  .app-actions {52    margin-left: auto;53    display: flex;54    align-items: center;55    gap: 36px;56    font-size: 40px;57    color: #8AB4F8;58  }59 60  /* Content list */61  .content {62    position: absolute;63    top: 230px; /* status + app bars */64    bottom: 970px; /* leave space for keyboard + nav */65    left: 0;66    right: 0;67    overflow: hidden;68  }69  .list {70    height: 100%;71    overflow: hidden;72    background: #121212;73  }74  .row {75    height: 140px;76    display: flex;77    align-items: center;78    padding: 0 36px;79    border-bottom: 1px solid #26282B;80  }81  .label {82    font-size: 40px;83    color: #D7D7D7;84  }85  .value {86    margin-left: auto;87    font-size: 42px;88    color: #EDEDED;89  }90  .value.muted {91    color: #A0A7AF;92  }93  .double-value {94    margin-left: auto;95    display: flex;96    align-items: center;97    gap: 36px;98  }99  .section-spacer {100    height: 24px;101    background: #121212;102    border-bottom: 1px solid #27292B;103  }104 105  /* Keyboard */106  .keyboard {107    position: absolute;108    left: 0;109    right: 0;110    bottom: 120px;111    height: 880px;112    background: #1A1C1F;113    border-top: 1px solid #2C2F33;114    padding: 40px 36px 30px;115    box-sizing: border-box;116  }117  .kbd-grid {118    display: grid;119    grid-template-columns: repeat(4, 1fr);120    grid-auto-rows: 1fr;121    gap: 28px;122    height: 100%;123  }124  .key {125    background: #2B2E32;126    color: #FFFFFF;127    font-size: 64px;128    border-radius: 90px;129    display: flex;130    align-items: center;131    justify-content: center;132    user-select: none;133  }134  .key.special {135    background: #2E3237;136    color: #E6E6E6;137    font-size: 56px;138  }139  .key.accent-purple {140    background: #E9D9FF;141    color: #161616;142  }143  .key.accent-blue {144    background: #CDE8FF;145    color: #0D1B2A;146  }147 148  /* Bottom area (keyboard handle + home indicator) */149  .keyboard-handle {150    position: absolute;151    left: 24px;152    bottom: 100px;153    width: 48px;154    height: 48px;155    display: flex;156    align-items: center;157    justify-content: center;158    color: #D0D0D0;159  }160  .home-indicator {161    position: absolute;162    left: 50%;163    transform: translateX(-50%);164    bottom: 36px;165    width: 340px;166    height: 10px;167    background: #CFCFCF;168    border-radius: 6px;169    opacity: 0.9;170  }171 172  /* Simple icon buttons */173  .icon {174    width: 56px;175    height: 56px;176    display: inline-flex;177    align-items: center;178    justify-content: center;179  }180  .overflow-icon circle { fill: #C9C9C9; }181  .x-icon path { stroke: #CFCFCF; stroke-width: 6; stroke-linecap: round; }182</style>183</head>184<body>185<div id="render-target">186 187  <!-- Status bar -->188  <div class="status-bar">189    <div>9:12</div>190    <div class="status-icons">191      <span class="dot"></span>192      <span class="dot"></span>193      <span class="dot"></span>194      <span class="dot"></span>195    </div>196  </div>197 198  <!-- App bar -->199  <div class="app-bar">200    <div class="icon x-icon">201      <svg width="40" height="40" viewBox="0 0 24 24">202        <path d="M5 5 L19 19 M19 5 L5 19"></path>203      </svg>204    </div>205    <div class="app-title">Add activity</div>206    <div class="app-actions">207      <div>Save</div>208      <div class="icon overflow-icon">209        <svg width="40" height="40" viewBox="0 0 24 24">210          <circle cx="12" cy="5" r="2"></circle>211          <circle cx="12" cy="12" r="2"></circle>212          <circle cx="12" cy="19" r="2"></circle>213        </svg>214      </div>215    </div>216  </div>217 218  <!-- Content -->219  <div class="content">220    <div class="list">221      <div class="row">222        <div class="label">Title</div>223        <div class="value muted">Add</div>224      </div>225      <div class="row">226        <div class="label">Activity</div>227        <div class="value">Running</div>228      </div>229 230      <div class="section-spacer"></div>231 232      <div class="row">233        <div class="label">Start</div>234        <div class="double-value">235          <div class="value">Today</div>236          <div class="value">8:40 AM</div>237        </div>238      </div>239      <div class="row">240        <div class="label">Duration</div>241        <div class="value">30 min</div>242      </div>243 244      <div class="section-spacer"></div>245 246      <div class="row">247        <div class="label">Intensity</div>248        <div class="value muted">Add Heart Pts</div>249      </div>250      <div class="row">251        <div class="label">Distance</div>252        <div class="value muted">Add mi</div>253      </div>254      <div class="row">255        <div class="label">Energy expended</div>256        <div class="value muted">Add Cal</div>257      </div>258      <div class="row">259        <div class="label">Steps</div>260        <div class="value">1000 steps</div>261      </div>262    </div>263  </div>264 265  <!-- Keyboard -->266  <div class="keyboard">267    <div class="kbd-grid">268      <div class="key">1</div>269      <div class="key">2</div>270      <div class="key">3</div>271      <div class="key special">–</div>272 273      <div class="key">4</div>274      <div class="key">5</div>275      <div class="key">6</div>276      <div class="key special">277        <svg width="48" height="48" viewBox="0 0 24 24">278          <path d="M7 6h10v12H7" stroke="#E6E6E6" stroke-width="2" fill="none"></path>279          <path d="M7 6v12" stroke="#E6E6E6" stroke-width="2"></path>280        </svg>281      </div>282 283      <div class="key">7</div>284      <div class="key">8</div>285      <div class="key">9</div>286      <div class="key accent-purple">287        <svg width="48" height="48" viewBox="0 0 24 24">288          <path d="M4 12l4-4h7l4 4-4 4H8z" fill="#161616"></path>289          <path d="M12 9l-3 3 3 3" stroke="#161616" stroke-width="2" fill="none"></path>290        </svg>291      </div>292 293      <div class="key special">,</div>294      <div class="key">0</div>295      <div class="key special">.</div>296      <div class="key accent-blue">297        <svg width="56" height="56" viewBox="0 0 24 24">298          <path d="M5 12h10" stroke="#0D1B2A" stroke-width="2"></path>299          <path d="M12 7l5 5-5 5" stroke="#0D1B2A" stroke-width="2" fill="none"></path>300        </svg>301      </div>302    </div>303  </div>304 305  <!-- Keyboard handle and home indicator -->306  <div class="keyboard-handle">307    <svg width="28" height="28" viewBox="0 0 24 24">308      <path d="M6 14l6-6 6 6" stroke="#D0D0D0" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>309    </svg>310  </div>311  <div class="home-indicator"></div>312 313</div>314</body>315</html>