GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Activity Level UI</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;12    color: #111;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #ffffff;20  }21 22  /* Status bar */23  .status-bar {24    position: absolute;25    top: 22px;26    left: 40px;27    right: 40px;28    height: 80px;29    display: flex;30    align-items: center;31    justify-content: space-between;32    color: #000;33    font-weight: 600;34    font-size: 38px;35  }36  .status-icons {37    display: flex;38    gap: 22px;39    align-items: center;40  }41  .status-icons svg {42    display: block;43  }44 45  /* Top navigation (back/progress/skip) */46  .top-nav {47    position: absolute;48    top: 130px;49    left: 40px;50    right: 40px;51    height: 100px;52  }53  .back-btn {54    position: absolute;55    left: 20px;56    top: 6px;57    width: 72px;58    height: 72px;59  }60  .skip {61    position: absolute;62    right: 20px;63    top: 0px;64    font-size: 42px;65    color: #6d6d6d;66    font-weight: 600;67  }68  .progress {69    position: absolute;70    left: 50%;71    transform: translateX(-50%);72    top: 12px;73    width: 620px;74    height: 16px;75    background: #E6E6E6;76    border-radius: 12px;77    overflow: hidden;78  }79  .progress .bar {80    width: 360px; /* ~60% */81    height: 100%;82    background: #2e5bff;83    border-radius: 12px;84  }85 86  /* Heading */87  .heading {88    position: absolute;89    top: 300px;90    left: 80px;91    right: 80px;92    text-align: center;93    font-size: 88px;94    line-height: 1.1;95    font-weight: 800;96    letter-spacing: -0.5px;97  }98 99  /* Options list */100  .options {101    position: absolute;102    top: 720px;103    left: 60px;104    right: 60px;105  }106  .card {107    display: flex;108    align-items: center;109    gap: 34px;110    background: #fff;111    border: 2px solid #E9EDF5;112    border-radius: 44px;113    height: 190px;114    padding: 0 50px;115    margin-bottom: 50px;116    box-shadow: 0 2px 0 rgba(0,0,0,0.02);117  }118  .emoji {119    font-size: 72px;120    width: 100px;121    text-align: center;122  }123  .label {124    font-size: 56px;125    font-weight: 700;126  }127 128  /* Next button */129  .next-btn {130    position: absolute;131    left: 60px;132    right: 60px;133    bottom: 240px;134    height: 168px;135    border-radius: 84px;136    background: linear-gradient(90deg, #3F74FF 0%, #2147E9 100%);137    color: #fff;138    font-weight: 800;139    font-size: 56px;140    letter-spacing: 1px;141    display: flex;142    align-items: center;143    justify-content: center;144  }145 146  /* Bottom system area */147  .home-indicator {148    position: absolute;149    bottom: 132px;150    left: 50%;151    transform: translateX(-50%);152    width: 360px;153    height: 10px;154    background: #CFCFCF;155    border-radius: 8px;156  }157  .system-bar {158    position: absolute;159    bottom: 0;160    left: 0;161    right: 0;162    height: 120px;163    background: #000;164  }165</style>166</head>167<body>168<div id="render-target">169 170  <!-- Status bar -->171  <div class="status-bar">172    <div class="time">9:29</div>173    <div class="status-icons">174      <!-- Simple cellular icon -->175      <svg width="34" height="34" viewBox="0 0 24 24">176        <rect x="3" y="14" width="3" height="7" fill="#444"/>177        <rect x="8" y="11" width="3" height="10" fill="#444"/>178        <rect x="13" y="8" width="3" height="13" fill="#444"/>179        <rect x="18" y="5" width="3" height="16" fill="#444"/>180      </svg>181      <!-- WiFi icon -->182      <svg width="34" height="34" viewBox="0 0 24 24">183        <path d="M2 8c5-4 15-4 20 0" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>184        <path d="M5 12c3-3 11-3 14 0" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>185        <path d="M8 16c2-2 6-2 8 0" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>186        <circle cx="12" cy="19" r="1.8" fill="#444"/>187      </svg>188      <!-- Battery icon -->189      <svg width="50" height="34" viewBox="0 0 50 24">190        <rect x="2" y="4" width="40" height="16" rx="3" ry="3" fill="none" stroke="#444" stroke-width="2"/>191        <rect x="44" y="8" width="4" height="8" rx="1" fill="#444"/>192        <rect x="6" y="7" width="26" height="10" rx="2" fill="#444"/>193      </svg>194    </div>195  </div>196 197  <!-- Top navigation -->198  <div class="top-nav">199    <div class="back-btn">200      <svg width="72" height="72" viewBox="0 0 48 48">201        <path d="M30 10 L16 24 L30 38" stroke="#000" stroke-width="4.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>202      </svg>203    </div>204    <div class="progress"><div class="bar"></div></div>205    <div class="skip">Skip</div>206  </div>207 208  <!-- Heading -->209  <div class="heading">What's your activity<br>level?</div>210 211  <!-- Options -->212  <div class="options">213    <div class="card">214      <div class="emoji">👨‍💻</div>215      <div class="label">Sedentary</div>216    </div>217    <div class="card">218      <div class="emoji">🚶‍♂️</div>219      <div class="label">Lightly active</div>220    </div>221    <div class="card">222      <div class="emoji">🏃‍♂️</div>223      <div class="label">Moderately active</div>224    </div>225    <div class="card">226      <div class="emoji">🥰</div>227      <div class="label">Very active</div>228    </div>229  </div>230 231  <!-- Next button -->232  <div class="next-btn">NEXT</div>233 234  <!-- Bottom system area -->235  <div class="home-indicator"></div>236  <div class="system-bar"></div>237 238</div>239</body>240</html>