GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Steps Goal UI</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: "Roboto", Arial, sans-serif;11  }12 13  /* Root render target */14  #render-target {15    position: relative;16    width: 1440px;17    height: 3120px;18    overflow: hidden;19    background: #1A1A1D; /* dark app background */20    color: #EDEDED;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    width: 1440px;29    height: 150px;30    padding: 0 60px;31    box-sizing: border-box;32    display: flex;33    align-items: center;34    justify-content: space-between;35    color: #EDEDED;36    font-size: 54px;37    letter-spacing: 1px;38  }39  .status-left {40    display: flex;41    align-items: center;42    gap: 24px;43  }44  .status-right {45    display: flex;46    align-items: center;47    gap: 32px;48  }49  .chip {50    color: #B0B0B8;51    font-size: 46px;52    background: #2A2A2F;53    padding: 8px 18px;54    border-radius: 28px;55  }56  /* simple icons */57  .icon {58    width: 60px;59    height: 60px;60    display: inline-flex;61    align-items: center;62    justify-content: center;63  }64  .wifi svg,65  .battery svg,66  .signal svg {67    fill: #EDEDED;68  }69 70  /* Header actions */71  .top-actions {72    position: absolute;73    top: 160px;74    left: 0;75    width: 100%;76    padding: 0 60px;77    box-sizing: border-box;78    height: 120px;79    display: flex;80    align-items: center;81    justify-content: space-between;82    color: #EDEDED;83  }84  .close-btn {85    font-size: 84px;86    color: #EDEDED;87    opacity: 0.9;88  }89  .right-actions {90    display: flex;91    align-items: center;92    gap: 44px;93  }94  .link {95    color: #7EA1FF;96    font-size: 60px;97    font-weight: 500;98  }99  .kebab {100    width: 24px;101    height: 90px;102    display: flex;103    align-items: center;104    justify-content: center;105  }106  .kebab span {107    width: 16px;108    height: 16px;109    background: #C9C9CF;110    border-radius: 50%;111    display: block;112    margin: 10px 0;113  }114 115  /* Center title */116  .title {117    position: absolute;118    top: 540px;119    width: 100%;120    text-align: center;121    font-size: 120px;122    font-weight: 600;123    letter-spacing: 1px;124  }125  .subtitle {126    position: absolute;127    top: 720px;128    width: 100%;129    padding: 0 140px;130    box-sizing: border-box;131    text-align: center;132    font-size: 54px;133    line-height: 1.6;134    color: #B5B5BE;135  }136 137  /* Step selector near bottom */138  .selector {139    position: absolute;140    bottom: 590px;141    width: 100%;142    display: flex;143    align-items: center;144    justify-content: center;145    gap: 240px;146  }147  .round-btn {148    width: 120px;149    height: 120px;150    border-radius: 40px;151    border: 6px solid #6F8CFF;152    display: flex;153    align-items: center;154    justify-content: center;155    color: #6F8CFF;156    background: transparent;157  }158  .round-btn svg {159    width: 72px;160    height: 72px;161    fill: none;162    stroke: #6F8CFF;163    stroke-width: 14px;164    stroke-linecap: round;165  }166  .goal-block {167    text-align: center;168  }169  .goal-number {170    font-size: 120px;171    font-weight: 600;172    letter-spacing: 2px;173  }174  .goal-label {175    margin-top: 24px;176    font-size: 52px;177    color: #B5B5BE;178  }179 180  /* Bottom gesture bar */181  .gesture-bar {182    position: absolute;183    bottom: 60px;184    left: 50%;185    transform: translateX(-50%);186    width: 460px;187    height: 22px;188    background: #F4F4F4;189    border-radius: 16px;190    opacity: 0.9;191  }192</style>193</head>194<body>195<div id="render-target">196  <!-- Status bar -->197  <div class="status-bar">198    <div class="status-left">199      <div>12:01</div>200      <div class="chip">i</div>201      <div class="chip">S</div>202      <div class="chip">G</div>203      <div class="chip">79°</div>204    </div>205    <div class="status-right">206      <div class="icon signal">207        <svg viewBox="0 0 24 24">208          <path d="M2 20h2v-2H2v2zm4 0h2v-6H6v6zm4 0h2v-10h-2v10zm4 0h2V6h-2v14zm4 0h2V2h-2v18z"/>209        </svg>210      </div>211      <div class="icon wifi">212        <svg viewBox="0 0 24 24">213          <path d="M12 18.5l2.5 2.5-2.5 2.5-2.5-2.5 2.5-2.5z" opacity="0"/>214          <path d="M12 18.5c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2z"/>215          <path d="M2 9.5C6.4 5.9 11.6 5.9 16 9.5l-1.4 1.4C10.9 7.9 7.1 7.9 3.4 10.9L2 9.5zm4.3 4.2c3-2.3 6.4-2.3 9.4 0l-1.4 1.4c-2.1-1.6-4.5-1.6-6.6 0l-1.4-1.4z"/>216        </svg>217      </div>218      <div class="icon battery">219        <svg viewBox="0 0 24 24">220          <path d="M17 6h2v12h-2V6z"/>221          <rect x="3" y="6" width="14" height="12" rx="2" ry="2" fill="#EDEDED"></rect>222        </svg>223      </div>224    </div>225  </div>226 227  <!-- Top actions -->228  <div class="top-actions">229    <div class="close-btn">×</div>230    <div class="right-actions">231      <div class="link">Set goal</div>232      <div class="kebab">233        <span></span>234        <span></span>235        <span></span>236      </div>237    </div>238  </div>239 240  <!-- Content center -->241  <div class="title">Steps</div>242  <div class="subtitle">243    Keep moving each day to meet your steps goal and<br>244    avoid sedentary time245  </div>246 247  <!-- Step selector -->248  <div class="selector">249    <div class="round-btn" aria-label="Decrease steps">250      <svg viewBox="0 0 24 24">251        <path d="M4 12h16"/>252      </svg>253    </div>254 255    <div class="goal-block">256      <div class="goal-number">7500</div>257      <div class="goal-label">steps a day</div>258    </div>259 260    <div class="round-btn" aria-label="Increase steps">261      <svg viewBox="0 0 24 24">262        <path d="M12 4v16M4 12h16"/>263      </svg>264    </div>265  </div>266 267  <!-- Bottom gesture bar -->268  <div class="gesture-bar"></div>269</div>270</body>271</html>