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>Goals Selection UI</title>6<style>7  * { box-sizing: border-box; }8  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, sans-serif; color: #111; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 100%;23    height: 120px;24    padding: 24px 40px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #1a1a1a;29    font-weight: 600;30  }31  .status-right {32    display: flex;33    gap: 24px;34    align-items: center;35  }36  .icon-signal, .icon-battery {37    width: 36px; height: 24px;38  }39 40  /* Top controls */41  .back-btn {42    position: absolute;43    top: 136px;44    left: 36px;45    width: 68px; height: 68px;46    display: flex; align-items: center; justify-content: center;47    border-radius: 34px;48    cursor: default;49  }50  .skip {51    position: absolute;52    top: 140px;53    right: 40px;54    font-size: 40px;55    color: #6f6f6f;56    font-weight: 600;57  }58 59  /* Progress bar */60  .progress {61    position: absolute;62    top: 164px;63    left: 240px;64    width: 600px;65    height: 18px;66    border-radius: 9px;67    background: #E9E9E9;68    overflow: hidden;69  }70  .progress > span {71    display: block;72    height: 100%;73    width: 220px; /* approx 25% progress */74    background: #246BFF;75  }76 77  /* Title */78  .title {79    position: absolute;80    top: 260px;81    left: 60px;82    width: 960px;83    text-align: center;84    font-size: 88px;85    line-height: 1.15;86    font-weight: 800;87  }88 89  /* Cards */90  .cards {91    position: absolute;92    top: 700px;93    left: 60px;94    width: 960px;95  }96  .card {97    position: relative;98    width: 100%;99    min-height: 280px;100    border-radius: 44px;101    border: 2px solid #E6E6E6;102    padding: 50px 48px;103    display: flex;104    align-items: center;105    justify-content: space-between;106    margin-bottom: 44px;107    background: #FFFFFF;108  }109  .card .label {110    font-size: 68px;111    font-weight: 800;112    color: #121212;113  }114  .img-ph {115    width: 380px;116    height: 220px;117    background: #E0E0E0;118    border: 1px solid #BDBDBD;119    border-radius: 24px;120    display: flex; align-items: center; justify-content: center;121    color: #757575;122    font-size: 28px;123    text-align: center;124    padding: 8px;125  }126 127  /* Selected card */128  .card.selected {129    background: linear-gradient(90deg, #2E6DFF, #1E4FF6);130    border: none;131    box-shadow: 0 12px 24px rgba(30,79,246,0.25);132  }133  .card.selected .label { color: #FFFFFF; }134  .card.selected .img-ph {135    background: rgba(255,255,255,0.18);136    border-color: rgba(255,255,255,0.35);137    color: #FFFFFF;138  }139  .check {140    position: absolute;141    top: 32px;142    right: 32px;143    width: 70px; height: 70px;144    border-radius: 50%;145    background: #FFFFFF;146    border: 6px solid #2E6DFF;147    display: flex; align-items: center; justify-content: center;148  }149 150  /* Next button */151  .next-btn {152    position: absolute;153    bottom: 180px;154    left: 60px;155    width: 960px;156    height: 150px;157    border-radius: 75px;158    background: linear-gradient(90deg, #2E6DFF, #1E4FF6);159    display: flex; align-items: center; justify-content: center;160    color: #FFFFFF;161    font-size: 64px;162    font-weight: 800;163    letter-spacing: 1px;164    box-shadow: 0 16px 28px rgba(34,95,255,0.25);165  }166</style>167</head>168<body>169<div id="render-target">170  <!-- Status Bar -->171  <div class="status-bar">172    <div class="status-left">9:28</div>173    <div class="status-right">174      <!-- Simple "M" as message indicator -->175      <div style="font-weight:700;">M</div>176      <!-- Signal Icon -->177      <svg class="icon-signal" viewBox="0 0 36 24">178        <rect x="2" y="14" width="4" height="8" fill="#555"/>179        <rect x="10" y="10" width="4" height="12" fill="#555"/>180        <rect x="18" y="6" width="4" height="16" fill="#555"/>181        <rect x="26" y="2" width="4" height="20" fill="#555"/>182      </svg>183      <!-- Battery Icon -->184      <svg class="icon-battery" viewBox="0 0 36 24">185        <rect x="1" y="5" width="28" height="14" rx="3" fill="none" stroke="#555" stroke-width="2"/>186        <rect x="31" y="9" width="4" height="6" rx="1" fill="#555"/>187        <rect x="4" y="8" width="22" height="8" rx="2" fill="#555"/>188      </svg>189    </div>190  </div>191 192  <!-- Back Button -->193  <div class="back-btn">194    <svg width="44" height="44" viewBox="0 0 24 24">195      <path d="M14 5 L7 12 L14 19" stroke="#111" stroke-width="2.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>196    </svg>197  </div>198 199  <!-- Skip -->200  <div class="skip">Skip</div>201 202  <!-- Progress -->203  <div class="progress"><span></span></div>204 205  <!-- Title -->206  <div class="title">What are your main<br>goals?</div>207 208  <!-- Cards -->209  <div class="cards">210    <div class="card">211      <div class="label">Lose Weight</div>212      <div class="img-ph">[IMG: Person holding scale]</div>213    </div>214 215    <div class="card">216      <div class="label">Build muscle</div>217      <div class="img-ph">[IMG: Muscular man torso]</div>218    </div>219 220    <div class="card selected">221      <div class="label">Keep fit</div>222      <div class="img-ph">[IMG: Man in black t-shirt giving thumbs up]</div>223      <div class="check">224        <svg width="38" height="38" viewBox="0 0 24 24">225          <path d="M5 13 L10 18 L19 8" fill="none" stroke="#2E6DFF" stroke-width="3.2" stroke-linecap="round" stroke-linejoin="round"/>226        </svg>227      </div>228    </div>229  </div>230 231  <!-- Next Button -->232  <div class="next-btn">NEXT</div>233</div>234</body>235</html>