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</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #121212;15    color: #E0E0E0;16    font-family: Arial, Helvetica, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    height: 110px;22    padding: 0 28px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #CFCFCF;27    font-size: 34px;28  }29  .status-left { display: flex; align-items: center; gap: 18px; }30  .status-right { display: flex; align-items: center; gap: 18px; }31  .dot {32    width: 14px; height: 14px; background: #CFCFCF; border-radius: 50%;33    display: inline-block;34  }35  .signal, .wifi, .battery {36    width: 34px; height: 22px; border: 2px solid #CFCFCF; border-radius: 3px; position: relative;37  }38  .wifi:before { content: ""; position: absolute; left: 6px; right: 6px; top: 6px; height: 6px; border-top: 2px solid #CFCFCF; border-left: 2px solid transparent; border-right: 2px solid transparent; }39  .battery:after { content: ""; position: absolute; right: -6px; top: 6px; width: 6px; height: 10px; background: #CFCFCF; }40  /* Top app bar */41  .appbar {42    padding: 16px 28px 0 28px;43    display: flex;44    align-items: center;45    justify-content: space-between;46    color: #E0E0E0;47  }48  .appbar-left, .appbar-right { display: flex; align-items: center; gap: 26px; }49  .icon-btn { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; cursor: default; }50  .save-link { color: #8ab4f8; font-size: 40px; }51  .kebab { width: 14px; height: 44px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }52  .kebab span { width: 8px; height: 8px; background: #E0E0E0; border-radius: 50%; display: block; }53 54  .title {55    font-size: 96px;56    font-weight: 500;57    letter-spacing: 0.5px;58    padding: 10px 28px 24px 28px;59    color: #DDDDDD;60  }61 62  /* Divider list */63  .list {64    margin-top: 6px;65    border-top: 1px solid #2A2A2A;66  }67  .row {68    display: flex;69    align-items: center;70    justify-content: space-between;71    padding: 34px 32px;72    min-height: 120px;73    border-bottom: 1px solid #2A2A2A;74  }75  .label {76    font-size: 40px;77    color: #BDBDBD;78  }79  .value {80    font-size: 40px;81    color: #8F9AA7;82  }83  .start-values {84    display: flex;85    align-items: center;86    gap: 48px;87    color: #CFCFCF;88  }89 90  /* Numeric keypad */91  .keypad {92    position: absolute;93    left: 0;94    right: 0;95    bottom: 130px;96    padding: 28px 28px 20px 28px;97    background: rgba(18,18,18,0.96);98  }99  .keys {100    display: grid;101    grid-template-columns: repeat(4, 1fr);102    gap: 26px;103  }104  .key {105    height: 158px;106    background: #2A2A2A;107    color: #FFFFFF;108    border-radius: 80px;109    display: flex;110    align-items: center;111    justify-content: center;112    font-size: 64px;113  }114  .key.fn { background: #2F2F2F; }115  .key.purple { background: #E6DAFF; color: #1A1A1A; }116  .key.blue { background: #CFE7FF; color: #0B1B2B; }117  .key svg { width: 56px; height: 56px; }118  .chevron {119    position: absolute;120    bottom: 100px;121    left: 50%;122    transform: translateX(-50%);123    width: 60px;124    height: 34px;125    color: #9E9E9E;126  }127 128  /* Gesture bar */129  .gesture-bar {130    position: absolute;131    bottom: 36px;132    left: 50%;133    transform: translateX(-50%);134    width: 420px;135    height: 10px;136    background: #E0E0E0;137    border-radius: 6px;138    opacity: 0.9;139  }140</style>141</head>142<body>143<div id="render-target">144  <!-- Status bar -->145  <div class="status-bar">146    <div class="status-left">147      <span>9:11</span>148      <div class="dot"></div>149      <div class="dot" style="width:22px;height:22px;border-radius:6px;background:#BFBFBF;"></div>150      <div class="dot"></div>151    </div>152    <div class="status-right">153      <div class="wifi"></div>154      <div class="battery"></div>155    </div>156  </div>157 158  <!-- App bar -->159  <div class="appbar">160    <div class="appbar-left">161      <div class="icon-btn" aria-label="Close">162        <svg viewBox="0 0 24 24" fill="none" stroke="#E0E0E0" stroke-width="2.4">163          <line x1="5" y1="5" x2="19" y2="19"></line>164          <line x1="19" y1="5" x2="5" y2="19"></line>165        </svg>166      </div>167    </div>168    <div class="appbar-right">169      <div class="save-link">Save</div>170      <div class="kebab" aria-label="More">171        <span></span><span></span><span></span>172      </div>173    </div>174  </div>175 176  <!-- Title -->177  <div class="title">Add activity</div>178 179  <!-- Form-like list -->180  <div class="list">181    <div class="row">182      <div class="label">Title</div>183      <div class="value">Add</div>184    </div>185    <div class="row">186      <div class="label">Activity</div>187      <div class="value">Running</div>188    </div>189    <div class="row">190      <div class="label">Start</div>191      <div class="start-values">192        <span>Today</span>193        <span>8:40 AM</span>194      </div>195    </div>196    <div class="row">197      <div class="label">Duration</div>198      <div class="value">30 min</div>199    </div>200    <div class="row">201      <div class="label">Intensity</div>202      <div class="value">Add Heart Pts</div>203    </div>204    <div class="row">205      <div class="label">Distance</div>206      <div class="value">Add mi</div>207    </div>208    <div class="row" style="border-bottom:none;">209      <div class="label">Energy expended</div>210      <div class="value">Add Cal</div>211    </div>212  </div>213 214  <!-- Numeric keypad -->215  <div class="keypad">216    <div class="keys">217      <div class="key">1</div>218      <div class="key">2</div>219      <div class="key">3</div>220      <div class="key fn">−</div>221 222      <div class="key">4</div>223      <div class="key">5</div>224      <div class="key">6</div>225      <div class="key fn" aria-label="Bracket">226        <svg viewBox="0 0 24 24" stroke="#E0E0E0" fill="none" stroke-width="2">227          <path d="M7 5h8v4M15 19H7v-4" />228        </svg>229      </div>230 231      <div class="key">7</div>232      <div class="key">8</div>233      <div class="key">9</div>234      <div class="key purple" aria-label="Backspace">235        <svg viewBox="0 0 24 24" fill="none" stroke="#1A1A1A" stroke-width="2">236          <path d="M8 6l-4 6 4 6h11a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2H8z"/>237          <path d="M12 9l6 6M18 9l-6 6"/>238        </svg>239      </div>240 241      <div class="key">,</div>242      <div class="key">0</div>243      <div class="key">.</div>244      <div class="key blue" aria-label="Enter">245        <svg viewBox="0 0 24 24" fill="none" stroke="#0B1B2B" stroke-width="2">246          <path d="M4 12h11l-3-3M15 12l-3 3" />247          <path d="M20 4v16" />248        </svg>249      </div>250    </div>251  </div>252 253  <!-- Small chevron above gesture bar -->254  <svg class="chevron" viewBox="0 0 24 24">255    <polyline points="4,14 12,8 20,14" fill="none" stroke="#9E9E9E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></polyline>256  </svg>257 258  <!-- Gesture navigation bar -->259  <div class="gesture-bar"></div>260</div>261</body>262</html>