GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Weekly Goal UI</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: 'Inter', 'Segoe UI', Arial, sans-serif; }7  #render-target {8    width:1080px; height:2400px;9    position:relative; overflow:hidden;10    background:#ffffff;11  }12 13  /* Top status bar */14  .status-bar {15    position:absolute; top:20px; left:0; right:0;16    height:90px; padding:0 40px;17    display:flex; align-items:center; justify-content:space-between;18    color:#111;19    font-weight:600;20    font-size:42px;21  }22  .status-icons {23    display:flex; align-items:center; gap:24px;24  }25  .icon {26    width:42px; height:42px;27  }28 29  /* Header controls */30  .top-controls {31    position:absolute; top:130px; left:0; right:0;32    height:80px;33    display:flex; align-items:center; justify-content:space-between;34    padding:0 40px;35  }36  .back-btn {37    width:64px; height:64px;38  }39  .skip {40    font-size:44px; color:#444; font-weight:600;41  }42 43  /* Progress bar */44  .progress-wrap {45    position:absolute; top:190px; left:0; right:0;46    display:flex; justify-content:center;47  }48  .progress {49    width:600px; height:14px; border-radius:8px; background:#E7E7E7; overflow:hidden;50  }51  .progress .bar {52    width:78%; height:100%;53    background:linear-gradient(90deg,#3b7dff,#2f56ff);54  }55 56  /* Main content */57  .content {58    position:absolute; left:60px; right:60px; top:270px;59    text-align:center;60  }61  .title {62    font-size:84px; font-weight:800; color:#0d0d0d; line-height:100px;63    letter-spacing:0.5px;64  }65  .subtitle {66    margin-top:30px;67    font-size:38px; color:#5f5f5f; line-height:56px;68  }69 70  .section-label {71    margin-top:80px;72    display:flex; align-items:center; justify-content:center; gap:20px;73    font-size:44px; font-weight:700; color:#333;74  }75  .section-label .emoji {76    font-size:48px;77  }78 79  .chips {80    margin-top:40px;81    display:flex; flex-wrap:wrap; justify-content:center; gap:30px;82  }83  .chip {84    width:210px; height:160px;85    border-radius:40px;86    background:#fff;87    border:1px solid #E6E6E6;88    box-shadow:0 6px 12px rgba(0,0,0,0.05);89    display:flex; align-items:center; justify-content:center;90    font-size:64px; font-weight:800; color:#000;91  }92  .chip.selected {93    background:linear-gradient(180deg,#3a7aff,#204cff);94    color:#fff; border:none;95    box-shadow:0 10px 20px rgba(47,86,255,0.35);96  }97 98  .divider {99    width:960px; height:2px; background:#efefef;100    margin:70px auto 40px auto;101  }102 103  .first-day {104    display:flex; align-items:center; justify-content:center; gap:20px;105    font-size:44px; color:#333; font-weight:700;106  }107  .first-day .emoji { font-size:48px; }108 109  .dropdown {110    width:960px; height:140px; margin:30px auto 0 auto;111    border:1px solid #e9e9e9; border-radius:28px; background:#fff;112    display:flex; align-items:center; justify-content:space-between;113    padding:0 40px;114    font-size:56px; font-weight:800; color:#111;115  }116  .chevron {117    width:40px; height:40px; margin-left:20px;118  }119 120  .next-btn {121    position:absolute; left:60px; right:60px; bottom:210px;122    height:160px; border-radius:86px;123    background:linear-gradient(90deg,#3c7eff,#204cff);124    display:flex; align-items:center; justify-content:center;125    color:#fff; font-size:64px; font-weight:800;126    box-shadow:0 12px 26px rgba(33,76,255,0.35);127  }128 129  /* Gesture bar placeholder */130  .gesture {131    position:absolute; bottom:80px; left:50%; transform:translateX(-50%);132    width:460px; height:12px; background:#d9d9d9; border-radius:10px;133  }134</style>135</head>136<body>137<div id="render-target">138 139  <!-- Status bar -->140  <div class="status-bar">141    <div class="time">9:29</div>142    <div class="status-icons">143      <!-- Simple wifi icon -->144      <svg class="icon" viewBox="0 0 24 24">145        <path d="M12 18.5c.9 0 1.5.6 1.5 1.5s-.6 1.5-1.5 1.5-1.5-.6-1.5-1.5.6-1.5 1.5-1.5zm-5.5-5a9 9 0 0111 0l-1.6 1.6a6.5 6.5 0 00-7.8 0L6.5 13.5zm-3.3-3.3a14 14 0 0117.6 0l-1.7 1.7a11 11 0 00-14.2 0L3.2 10.2z" fill="#222"/>146      </svg>147      <!-- Battery icon -->148      <svg class="icon" viewBox="0 0 30 20">149        <rect x="1" y="3" width="24" height="14" rx="3" ry="3" fill="none" stroke="#222" stroke-width="2"/>150        <rect x="4" y="6" width="18" height="8" rx="2" fill="#222"/>151        <rect x="26" y="7" width="3" height="6" rx="1" fill="#222"/>152      </svg>153    </div>154  </div>155 156  <!-- Top controls -->157  <div class="top-controls">158    <svg class="back-btn" viewBox="0 0 24 24">159      <path d="M15 5L7 12l8 7" stroke="#111" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>160    </svg>161    <div class="skip">Skip</div>162  </div>163 164  <!-- Progress bar -->165  <div class="progress-wrap">166    <div class="progress"><div class="bar"></div></div>167  </div>168 169  <!-- Main content -->170  <div class="content">171    <div class="title">Set your weekly goal</div>172    <div class="subtitle">We recommend training at least 3 days weekly for a better result.</div>173 174    <div class="section-label">175      <span class="emoji">🎯</span>176      <span>Weekly training days</span>177    </div>178 179    <div class="chips">180      <div class="chip">1</div>181      <div class="chip">2</div>182      <div class="chip">3</div>183      <div class="chip selected">4</div>184 185      <div class="chip">5</div>186      <div class="chip">6</div>187      <div class="chip">7</div>188    </div>189 190    <div class="divider"></div>191 192    <div class="first-day">193      <span class="emoji">🗓️</span>194      <span>First day of week</span>195    </div>196 197    <div class="dropdown">198      <div>SUNDAY</div>199      <svg class="chevron" viewBox="0 0 24 24">200        <path d="M6 9l6 6 6-6" stroke="#111" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>201      </svg>202    </div>203  </div>204 205  <!-- Next button -->206  <div class="next-btn">NEXT</div>207 208  <!-- bottom gesture bar -->209  <div class="gesture"></div>210</div>211</body>212</html>