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>Focus Area UI</title>6<style>7  body {8    margin: 0;9    padding: 0;10    background: transparent;11    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;12  }13  #render-target {14    width: 1080px;15    height: 2400px;16    position: relative;17    overflow: hidden;18    background: #FFFFFF;19  }20 21  /* Status bar */22  .status-bar {23    position: absolute;24    top: 0;25    left: 0;26    width: 1080px;27    height: 110px;28    padding: 30px 40px;29    box-sizing: border-box;30    color: #1A1A1A;31    font-weight: 600;32    display: flex;33    align-items: center;34    justify-content: space-between;35  }36  .status-left {37    display: flex;38    align-items: center;39    gap: 22px;40    font-size: 38px;41  }42  .status-right {43    display: flex;44    align-items: center;45    gap: 26px;46  }47  .icon {48    width: 48px;49    height: 48px;50  }51 52  /* Nav row with back + progress + skip */53  .nav-row {54    position: absolute;55    top: 120px;56    left: 0;57    width: 1080px;58    height: 110px;59    display: flex;60    align-items: center;61    box-sizing: border-box;62    padding: 0 40px;63  }64  .back-btn {65    width: 72px;66    height: 72px;67    display: flex;68    align-items: center;69    justify-content: center;70    margin-right: 24px;71  }72  .progress-track {73    position: relative;74    height: 14px;75    width: 620px;76    background: #E6E6E6;77    border-radius: 14px;78    overflow: hidden;79    margin-right: auto;80  }81  .progress-value {82    position: absolute;83    top: 0;84    left: 0;85    height: 14px;86    width: 140px;87    background: #2E6CF7;88    border-radius: 14px;89  }90  .skip {91    font-size: 42px;92    color: #7A7A7A;93    font-weight: 600;94  }95 96  /* Title */97  .title {98    position: absolute;99    top: 250px;100    left: 40px;101    right: 40px;102    font-size: 90px;103    line-height: 1.15;104    font-weight: 800;105    color: #111111;106    letter-spacing: -0.5px;107  }108 109  /* Left button list */110  .list {111    position: absolute;112    top: 760px;113    left: 40px;114    width: 660px;115  }116  .btn {117    width: 620px;118    height: 150px;119    margin: 0 0 70px 0;120    border-radius: 34px;121    background: linear-gradient(90deg, #2A6CF4, #1E49E8);122    box-shadow: 0 8px 16px rgba(34, 88, 210, 0.18);123    display: flex;124    align-items: center;125    padding-left: 52px;126    color: #FFFFFF;127    font-size: 64px;128    font-weight: 800;129    letter-spacing: 0.5px;130  }131 132  /* Person image placeholder */133  .person {134    position: absolute;135    top: 560px;136    right: 70px;137    width: 380px;138    height: 1330px;139    background: #E0E0E0;140    border: 1px solid #BDBDBD;141    display: flex;142    align-items: center;143    justify-content: center;144    color: #757575;145    text-align: center;146    padding: 10px;147    box-sizing: border-box;148    border-radius: 6px;149  }150 151  /* Connectors */152  .connector {153    position: absolute;154    height: 2px;155    background: #C9CDD4;156  }157  .dot {158    position: absolute;159    width: 26px;160    height: 26px;161    border-radius: 50%;162    background: #FFFFFF;163    border: 3px solid #6D6E73;164  }165  .dot.black {166    border-color: #000000;167  }168 169  /* NEXT button */170  .next-btn {171    position: absolute;172    bottom: 160px;173    left: 60px;174    width: 960px;175    height: 160px;176    border-radius: 90px;177    background: linear-gradient(90deg, #2A6CF4, #1E49E8);178    box-shadow: 0 10px 22px rgba(34, 88, 210, 0.18);179    display: flex;180    align-items: center;181    justify-content: center;182    color: #FFFFFF;183    font-size: 68px;184    font-weight: 900;185    letter-spacing: 1px;186  }187 188  /* Home indicator */189  .home-indicator {190    position: absolute;191    bottom: 44px;192    left: 50%;193    transform: translateX(-50%);194    width: 280px;195    height: 14px;196    background: #1A1A1A;197    border-radius: 10px;198    opacity: 0.8;199  }200</style>201</head>202<body>203<div id="render-target">204 205  <!-- Status bar -->206  <div class="status-bar">207    <div class="status-left">208      <div>9:27</div>209      <svg class="icon" viewBox="0 0 24 24">210        <path d="M4 5h16v14H4z" fill="none" stroke="#1A1A1A" stroke-width="2"/>211        <path d="M4 7l8 6 8-6" fill="none" stroke="#1A1A1A" stroke-width="2"/>212      </svg>213    </div>214    <div class="status-right">215      <!-- WiFi -->216      <svg class="icon" viewBox="0 0 24 24">217        <path d="M2 8c5-5 15-5 20 0" fill="none" stroke="#1A1A1A" stroke-width="2"/>218        <path d="M5 12c4-4 10-4 14 0" fill="none" stroke="#1A1A1A" stroke-width="2"/>219        <path d="M9 16c2-2 4-2 6 0" fill="none" stroke="#1A1A1A" stroke-width="2"/>220        <circle cx="12" cy="19" r="1.5" fill="#1A1A1A"/>221      </svg>222      <!-- Battery -->223      <svg class="icon" viewBox="0 0 28 18">224        <rect x="2" y="2" width="22" height="14" rx="2" fill="none" stroke="#1A1A1A" stroke-width="2"/>225        <rect x="4" y="4" width="14" height="10" rx="1" fill="#1A1A1A"/>226        <rect x="24" y="6" width="3" height="6" rx="1" fill="#1A1A1A"/>227      </svg>228    </div>229  </div>230 231  <!-- Navigation row -->232  <div class="nav-row">233    <div class="back-btn">234      <svg width="48" height="48" viewBox="0 0 24 24">235        <path d="M15 6l-6 6 6 6" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>236      </svg>237    </div>238    <div class="progress-track">239      <div class="progress-value"></div>240    </div>241    <div class="skip">Skip</div>242  </div>243 244  <!-- Title -->245  <div class="title">Please choose your focus area</div>246 247  <!-- Left button list -->248  <div class="list">249    <div class="btn">Full body</div>250    <div class="btn">Arm</div>251    <div class="btn">Chest</div>252    <div class="btn">Abs</div>253    <div class="btn">Leg</div>254  </div>255 256  <!-- Person image -->257  <div class="person">[IMG: Athletic person standing with arms crossed]</div>258 259  <!-- Connectors and dots -->260  <!-- Arm -->261  <div class="connector" style="top: 1080px; left: 660px; width: 230px;"></div>262  <div class="dot" style="top: 1068px; left: 885px;"></div>263 264  <!-- Chest -->265  <div class="connector" style="top: 1320px; left: 660px; width: 250px;"></div>266  <div class="dot" style="top: 1308px; left: 910px;"></div>267 268  <!-- Abs -->269  <div class="connector" style="top: 1560px; left: 660px; width: 250px;"></div>270  <div class="dot" style="top: 1548px; left: 910px;"></div>271 272  <!-- Leg -->273  <div class="connector" style="top: 1800px; left: 660px; width: 250px;"></div>274  <div class="dot black" style="top: 1788px; left: 910px;"></div>275 276  <!-- NEXT button -->277  <div class="next-btn">NEXT</div>278 279  <!-- Home indicator -->280  <div class="home-indicator"></div>281 282</div>283</body>284</html>