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 { 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: Roboto, Arial, Helvetica, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 90px;26    padding: 0 40px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #FFFFFF;31    font-size: 32px;32    opacity: 0.95;33  }34  .sb-left { display: flex; align-items: center; gap: 16px; }35  .sb-right { display: flex; align-items: center; gap: 22px; }36  .sb-dot, .sb-icon {37    width: 26px; height: 26px; border-radius: 50%; background: #CFCFCF;38    opacity: 0.9;39  }40  .sb-icon.battery {41    border-radius: 6px; width: 34px; height: 22px; background: #CFCFCF; position: relative;42  }43  .sb-icon.battery::after {44    content: "";45    position: absolute; right: -6px; top: 6px; width: 6px; height: 10px; background: #CFCFCF; border-radius: 2px;46  }47 48  /* App bar */49  .appbar {50    position: absolute;51    top: 90px;52    left: 0;53    width: 1080px;54    height: 160px;55    background: #3A3A3A;56    display: flex;57    align-items: center;58    padding: 0 24px;59    box-sizing: border-box;60  }61  .iconbtn {62    width: 96px; height: 96px; border: none; background: transparent; padding: 0; margin-right: 12px;63    display: flex; align-items: center; justify-content: center;64  }65  .title {66    font-size: 48px;67    color: #EFEFEF;68  }69  .actions {70    margin-left: auto; display: flex; align-items: center; gap: 26px;71    font-size: 40px;72  }73  .actions .save { color: #78A7FF; }74 75  /* Content list */76  .content {77    position: absolute;78    left: 0; right: 0;79    top: 250px;80    bottom: 900px; /* space above keyboard */81    overflow: hidden;82  }83  .row {84    display: flex; align-items: center;85    height: 130px; padding: 0 40px;86    border-bottom: 1px solid #2A2A2A;87    box-sizing: border-box;88  }89  .row .label { font-size: 38px; color: #E0E0E0; }90  .row .meta {91    margin-left: auto; display: flex; align-items: center; gap: 40px;92    font-size: 38px; color: #B3C1CC;93  }94  .divider { height: 1px; background: #2A2A2A; }95 96  .input-area {97    height: 300px; border-top: 1px solid #2A2A2A; border-bottom: 1px solid #2A2A2A;98    margin-top: 8px; padding: 24px 40px; box-sizing: border-box;99    display: flex; align-items: flex-start;100  }101  .caret {102    width: 2px; height: 44px; background: #78A7FF; margin-top: 6px;103  }104 105  /* Keyboard mock */106  .keyboard {107    position: absolute;108    left: 0; bottom: 0;109    width: 1080px; height: 830px;110    background: #1E1E1E;111    border-top: 1px solid #333;112    box-sizing: border-box;113    padding: 20px 20px 80px;114  }115  .kb-top {116    height: 80px; display: flex; align-items: center; gap: 26px; padding: 0 6px;117  }118  .kb-tool {119    width: 80px; height: 80px; border-radius: 22px; background: #2C2C2C; color: #DADADA;120    display: flex; align-items: center; justify-content: center; font-size: 28px;121    border: 1px solid #3A3A3A;122  }123  .kb-row {124    display: flex; gap: 14px; padding: 8px 6px;125  }126  .key {127    flex: 1; height: 120px; background: #2C2C2C; border-radius: 28px;128    border: 1px solid #3A3A3A; color: #E9E9E9; font-size: 44px;129    display: flex; align-items: center; justify-content: center;130  }131  .key.small { flex: 0 0 120px; }132  .key.mid   { flex: 0 0 160px; }133  .key.wide  { flex: 2; }134  .key.enter { background: #BFD7FF; color: #1E2B3F; }135  .gesture-bar {136    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);137    width: 360px; height: 12px; background: #CCCCCC; border-radius: 6px; opacity: 0.8;138  }139</style>140</head>141<body>142<div id="render-target">143 144  <!-- Status bar -->145  <div class="status-bar">146    <div class="sb-left">147      <span>9:13</span>148    </div>149    <div class="sb-right">150      <div class="sb-dot"></div>151      <div class="sb-dot"></div>152      <div class="sb-dot"></div>153      <div class="sb-icon"></div>154      <div class="sb-icon battery"></div>155    </div>156  </div>157 158  <!-- App bar -->159  <div class="appbar">160    <button class="iconbtn" aria-label="Close">161      <svg width="42" height="42" viewBox="0 0 24 24" fill="none">162        <path d="M4 4 L20 20 M20 4 L4 20" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"/>163      </svg>164    </button>165    <div class="title">Add activity</div>166    <div class="actions">167      <span class="save">Save</span>168      <svg width="34" height="34" viewBox="0 0 24 24">169        <circle cx="12" cy="5" r="2.2" fill="#EDEDED"/>170        <circle cx="12" cy="12" r="2.2" fill="#EDEDED"/>171        <circle cx="12" cy="19" r="2.2" fill="#EDEDED"/>172      </svg>173    </div>174  </div>175 176  <!-- Content -->177  <div class="content">178    <div class="row">179      <div class="label">Activity</div>180      <div class="meta"><span>Running</span></div>181    </div>182 183    <div class="row">184      <div class="label">Start</div>185      <div class="meta">186        <span>Today</span>187        <span>8:40 AM</span>188      </div>189    </div>190 191    <div class="row">192      <div class="label">Duration</div>193      <div class="meta"><span>30 min</span></div>194    </div>195 196    <div class="divider"></div>197 198    <div class="row">199      <div class="label">Intensity</div>200      <div class="meta"><span>Add Heart Pts</span></div>201    </div>202 203    <div class="row">204      <div class="label">Distance</div>205      <div class="meta"><span>Add mi</span></div>206    </div>207 208    <div class="row">209      <div class="label">Energy expended</div>210      <div class="meta"><span>Add Cal</span></div>211    </div>212 213    <div class="row">214      <div class="label">Steps</div>215      <div class="meta"><span>10000 steps</span></div>216    </div>217 218    <div class="input-area">219      <div class="caret"></div>220    </div>221  </div>222 223  <!-- Keyboard mock -->224  <div class="keyboard">225    <div class="kb-top">226      <div class="kb-tool">◰</div>227      <div class="kb-tool">😊</div>228      <div class="kb-tool">GIF</div>229      <div class="kb-tool">⚙︎</div>230      <div class="kb-tool">G⋮</div>231      <div class="kb-tool">🎨</div>232      <div class="kb-tool">🎤</div>233    </div>234 235    <div class="kb-row">236      <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div>237      <div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>238    </div>239    <div class="kb-row">240      <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>241      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>242      <div class="key mid">⌫</div>243    </div>244    <div class="kb-row">245      <div class="key mid">⇧</div>246      <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>247      <div class="key">b</div><div class="key">n</div><div class="key">m</div>248      <div class="key enter">↵</div>249    </div>250    <div class="kb-row">251      <div class="key wide" style="max-width:210px;">?123</div>252      <div class="key small">,</div>253      <div class="key wide">🙂</div>254      <div class="key wide" style="flex: 4;">space</div>255      <div class="key small">.</div>256      <div class="key enter wide">↩</div>257    </div>258 259    <div class="gesture-bar"></div>260  </div>261 262</div>263</body>264</html>