GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Push-up Onboarding</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: #FFFFFF;18  }19 20  /* Status bar */21  .status {22    position: absolute;23    top: 24px;24    left: 40px;25    right: 40px;26    height: 64px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #2E2E2E;31    font-size: 36px;32    letter-spacing: 0.5px;33  }34  .status .icons {35    display: flex;36    align-items: center;37    gap: 18px;38  }39  .dot {40    width: 22px;41    height: 22px;42    background: #9E9E9E;43    border-radius: 50%;44  }45  .battery {46    width: 36px;47    height: 18px;48    border: 3px solid #757575;49    border-radius: 4px;50    position: relative;51  }52  .battery::after {53    content: "";54    position: absolute;55    right: -8px;56    top: 4px;57    width: 6px;58    height: 10px;59    background: #757575;60    border-radius: 2px;61  }62  .battery .level {63    position: absolute;64    left: 3px;65    top: 3px;66    width: 22px;67    height: 10px;68    background: #4CAF50;69    border-radius: 2px;70  }71 72  /* Header controls */73  .back-btn {74    position: absolute;75    top: 108px;76    left: 32px;77    width: 72px;78    height: 72px;79    display: flex;80    align-items: center;81    justify-content: center;82  }83  .skip {84    position: absolute;85    top: 106px;86    right: 48px;87    font-size: 44px;88    color: #8A8F98;89    font-weight: 600;90  }91 92  /* Progress bar */93  .progress {94    position: absolute;95    top: 168px;96    left: 230px;97    width: 620px;98    height: 16px;99    background: #E6E8EB;100    border-radius: 10px;101    overflow: hidden;102  }103  .progress .fill {104    width: 300px;105    height: 100%;106    background: #2D6BFF;107  }108 109  /* Title */110  .title {111    position: absolute;112    top: 250px;113    left: 60px;114    width: 960px;115    color: #0D0D0D;116    font-size: 78px;117    font-weight: 900;118    line-height: 1.15;119    letter-spacing: 0.2px;120  }121 122  /* Cards */123  .card {124    position: absolute;125    left: 60px;126    width: 960px;127    background: #FFFFFF;128    border: 2px solid #E9EDF5;129    border-radius: 40px;130    box-shadow: 0 10px 28px rgba(0,0,0,0.06);131    display: flex;132    align-items: center;133    padding: 48px 54px;134    gap: 42px;135    color: #0D0D0D;136  }137  .card:nth-of-type(1) { top: 720px; }138  .card:nth-of-type(2) { top: 1050px; }139  .card:nth-of-type(3) { top: 1380px; }140 141  .emoji {142    font-size: 80px;143    width: 100px;144    text-align: center;145  }146  .card-title {147    font-size: 58px;148    font-weight: 800;149    margin-bottom: 12px;150  }151  .card-sub {152    font-size: 40px;153    color: #626976;154    font-weight: 600;155  }156 157  /* Next button */158  .next-btn {159    position: absolute;160    left: 60px;161    right: 60px;162    bottom: 180px;163    height: 160px;164    border-radius: 90px;165    background: linear-gradient(90deg, #2E67FF 0%, #1D45E6 100%);166    display: flex;167    align-items: center;168    justify-content: center;169    color: #FFFFFF;170    font-size: 56px;171    font-weight: 900;172    letter-spacing: 2px;173    text-transform: uppercase;174  }175 176  /* Home indicator */177  .home-indicator {178    position: absolute;179    bottom: 90px;180    left: 240px;181    width: 600px;182    height: 18px;183    background: #CFCFD4;184    border-radius: 9px;185  }186</style>187</head>188<body>189<div id="render-target">190 191  <!-- Status bar -->192  <div class="status">193    <div>9:28</div>194    <div class="icons">195      <div class="dot"></div>196      <div class="dot"></div>197      <div class="battery"><div class="level"></div></div>198    </div>199  </div>200 201  <!-- Back button -->202  <div class="back-btn">203    <svg width="58" height="58" viewBox="0 0 48 48">204      <path d="M30 6 L12 24 L30 42" stroke="#000000" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>205    </svg>206  </div>207 208  <!-- Skip -->209  <div class="skip">Skip</div>210 211  <!-- Progress -->212  <div class="progress">213    <div class="fill"></div>214  </div>215 216  <!-- Title -->217  <div class="title">218    How many push-ups can<br>you do at one time?219  </div>220 221  <!-- Cards -->222  <div class="card">223    <div class="emoji">☝️</div>224    <div class="text">225      <div class="card-title">Beginner</div>226      <div class="card-sub">3–5 push-ups</div>227    </div>228  </div>229 230  <div class="card">231    <div class="emoji">✌️</div>232    <div class="text">233      <div class="card-title">Intermediate</div>234      <div class="card-sub">5–10 push-ups</div>235    </div>236  </div>237 238  <div class="card">239    <div class="emoji">👍</div>240    <div class="text">241      <div class="card-title">Advanced</div>242      <div class="card-sub">At least 10</div>243    </div>244  </div>245 246  <!-- Next button -->247  <div class="next-btn">NEXT</div>248 249  <!-- Home indicator -->250  <div class="home-indicator"></div>251 252</div>253</body>254</html>