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</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: "Roboto", Arial, Helvetica, sans-serif;13  }14  #render-target {15    position: relative;16    width: 1080px;17    height: 2400px;18    overflow: hidden;19    background: #121212;20    color: #EDEDED;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    width: 100%;29    height: 88px;30    padding: 0 32px;31    box-sizing: border-box;32    display: flex;33    align-items: center;34    justify-content: space-between;35    color: #EDEDED;36    font-size: 36px;37    letter-spacing: 0.2px;38  }39  .status-right {40    display: flex;41    align-items: center;42    gap: 26px;43  }44  .icon-wifi, .icon-battery, .icon-signal, .icon-cloud {45    width: 40px;46    height: 32px;47    display: inline-block;48  }49  .icon-wifi svg, .icon-battery svg, .icon-signal svg, .icon-cloud svg {50    width: 100%;51    height: 100%;52  }53 54  /* Header with actions */55  .top-actions {56    position: absolute;57    top: 88px;58    left: 0;59    width: 100%;60    height: 96px;61    padding: 0 24px;62    box-sizing: border-box;63    display: flex;64    align-items: center;65    justify-content: space-between;66  }67  .left-actions, .right-actions {68    display: flex;69    align-items: center;70    gap: 28px;71  }72  .action-btn {73    width: 72px;74    height: 72px;75    display: flex;76    align-items: center;77    justify-content: center;78    cursor: default;79    border-radius: 36px;80  }81  .action-btn svg {82    width: 36px;83    height: 36px;84    fill: none;85    stroke: #EDEDED;86    stroke-width: 6px;87    stroke-linecap: round;88  }89  .save-link {90    color: #8AB4F8;91    font-size: 40px;92  }93  .kebab svg {94    width: 10px;95    height: 48px;96    fill: #EDEDED;97  }98 99  /* Title */100  .page-title {101    position: absolute;102    top: 200px;103    left: 36px;104    font-size: 96px;105    font-weight: 400;106    letter-spacing: -0.5px;107  }108 109  /* Form list */110  .form-list {111    position: absolute;112    top: 360px;113    left: 0;114    width: 100%;115  }116  .list-item {117    height: 148px;118    display: flex;119    align-items: center;120    padding: 0 36px;121    box-sizing: border-box;122    border-top: 1px solid #2A2A2A;123  }124  .list-item:last-child {125    border-bottom: 1px solid #2A2A2A;126  }127  .label {128    flex: 1;129    color: #E0E0E0;130    font-size: 42px;131  }132  .value {133    color: #C5C7CB;134    font-size: 42px;135  }136  .value-muted {137    color: #9AA0A6;138  }139  .value-row {140    display: flex;141    align-items: center;142    gap: 24px;143  }144 145  /* Keypad overlay */146  .keypad {147    position: absolute;148    bottom: 140px;149    left: 0;150    width: 100%;151    height: 980px;152    background: rgba(18,18,18,0.95);153    box-shadow: 0 -20px 40px rgba(0,0,0,0.6);154    padding: 40px 36px 24px;155    box-sizing: border-box;156  }157  .keys {158    display: grid;159    grid-template-columns: repeat(4, 1fr);160    grid-auto-rows: 170px;161    gap: 26px;162  }163  .key {164    background: #2C2C2C;165    border-radius: 90px;166    display: flex;167    align-items: center;168    justify-content: center;169    color: #FFFFFF;170    font-size: 64px;171    letter-spacing: 1px;172  }173  .key svg {174    width: 72px;175    height: 72px;176  }177  .key-action-pink {178    background: #F7DADB;179    color: #1F1F1F;180  }181  .key-action-purple {182    background: #E8DFFF;183    color: #1F1F1F;184  }185 186  /* Bottom nav bar / handle */187  .bottom-ui {188    position: absolute;189    bottom: 48px;190    left: 0;191    width: 100%;192    height: 92px;193  }194  .handle {195    position: absolute;196    bottom: 0;197    left: 50%;198    transform: translateX(-50%);199    width: 240px;200    height: 12px;201    background: #D9D9D9;202    border-radius: 6px;203    opacity: 0.65;204  }205  .caret-up {206    position: absolute;207    bottom: 70px;208    left: 58px;209    width: 36px;210    height: 24px;211    color: #BDBDBD;212    font-size: 34px;213    line-height: 24px;214  }215</style>216</head>217<body>218<div id="render-target">219 220  <!-- Status bar -->221  <div class="status-bar">222    <div class="status-left">9:46</div>223    <div class="status-right">224      <span class="icon-signal">225        <svg viewBox="0 0 24 24">226          <path d="M3 20h2M6 16h2M9 12h2M12 8h2M15 4h2" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"/>227        </svg>228      </span>229      <span class="icon-wifi">230        <svg viewBox="0 0 24 24">231          <path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M8 15c2-2 6-2 8 0" stroke="#EDEDED" stroke-width="2" fill="none" stroke-linecap="round"/>232          <circle cx="12" cy="18" r="2" fill="#EDEDED"/>233        </svg>234      </span>235      <span class="icon-cloud">236        <svg viewBox="0 0 24 24">237          <path d="M8 17h8a4 4 0 0 0 0-8 6 6 0 0 0-11-2" stroke="#EDEDED" stroke-width="2" fill="none" stroke-linecap="round"/>238        </svg>239      </span>240      <span class="icon-battery">241        <svg viewBox="0 0 28 16">242          <rect x="1" y="3" width="22" height="10" rx="2" stroke="#EDEDED" fill="none" stroke-width="2"/>243          <rect x="3" y="5" width="16" height="6" rx="1" fill="#EDEDED"/>244          <rect x="24" y="6" width="3" height="4" rx="1" fill="#EDEDED"/>245        </svg>246      </span>247    </div>248  </div>249 250  <!-- Actions bar -->251  <div class="top-actions">252    <div class="left-actions">253      <div class="action-btn">254        <svg viewBox="0 0 24 24">255          <path d="M5 5L19 19M19 5L5 19"/>256        </svg>257      </div>258    </div>259    <div class="right-actions">260      <div class="save-link">Save</div>261      <div class="action-btn kebab">262        <svg viewBox="0 0 6 24">263          <circle cx="3" cy="4" r="3"/>264          <circle cx="3" cy="12" r="3"/>265          <circle cx="3" cy="20" r="3"/>266        </svg>267      </div>268    </div>269  </div>270 271  <!-- Page title -->272  <div class="page-title">Add activity</div>273 274  <!-- Form list -->275  <div class="form-list">276    <div class="list-item">277      <div class="label">Title</div>278      <div class="value value-muted">Add</div>279    </div>280    <div class="list-item">281      <div class="label">Activity</div>282      <div class="value">Walking</div>283    </div>284    <div class="list-item">285      <div class="label">Start</div>286      <div class="value value-row">287        <span>Today</span>288        <span style="color:#EDEDED;">9:15 AM</span>289      </div>290    </div>291    <div class="list-item">292      <div class="label">Duration</div>293      <div class="value">30 min</div>294    </div>295    <div class="list-item">296      <div class="label">Intensity</div>297      <div class="value value-muted">Add Heart Pts</div>298    </div>299    <div class="list-item">300      <div class="label">Distance</div>301      <div class="value value-muted">Add mi</div>302    </div>303    <div class="list-item">304      <div class="label">Energy expended</div>305      <div class="value value-muted">Add Cal</div>306    </div>307  </div>308 309  <!-- Numeric keypad -->310  <div class="keypad">311    <div class="keys">312      <div class="key">1</div>313      <div class="key">2</div>314      <div class="key">3</div>315      <div class="key">–</div>316 317      <div class="key">4</div>318      <div class="key">5</div>319      <div class="key">6</div>320      <div class="key">⌊</div>321 322      <div class="key">7</div>323      <div class="key">8</div>324      <div class="key">9</div>325      <div class="key key-action-pink">326        <svg viewBox="0 0 24 24">327          <path d="M4 7h12l4 5-4 5H4z" fill="none" stroke="#1F1F1F" stroke-width="2"/>328          <path d="M10 9l4 3-4 3" stroke="#1F1F1F" stroke-width="2" fill="none" stroke-linecap="round"/>329        </svg>330      </div>331 332      <div class="key">,</div>333      <div class="key">0</div>334      <div class="key">.</div>335      <div class="key key-action-purple">336        <svg viewBox="0 0 24 24">337          <path d="M5 12h12M12 5l7 7-7 7" stroke="#1F1F1F" stroke-width="2" fill="none" stroke-linecap="round"/>338        </svg>339      </div>340    </div>341  </div>342 343  <!-- Bottom handle -->344  <div class="bottom-ui">345    <div class="caret-up">˄</div>346    <div class="handle"></div>347  </div>348 349</div>350</body>351</html>