GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Set Your Goal UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 'Helvetica Neue', Arial, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #0e0e0e;13  }14 15  /* Header bar */16  .header {17    position: absolute;18    top: 0;19    left: 0;20    width: 100%;21    height: 160px;22    background: #2b2b2b;23  }24  .back-btn {25    position: absolute;26    left: 36px;27    top: 50%;28    transform: translateY(-50%);29    width: 72px;30    height: 72px;31  }32  .back-btn svg { width: 72px; height: 72px; }33  .back-btn line { stroke: #e6e6e6; stroke-width: 8; stroke-linecap: round; }34  .title {35    position: absolute;36    left: 140px;37    top: 50%;38    transform: translateY(-50%);39    color: #f4f4f4;40    font-size: 56px;41    font-weight: 600;42    letter-spacing: 0.3px;43  }44 45  /* Center message */46  .message {47    position: absolute;48    left: 100px;49    top: 1000px;50    width: 880px;51    color: #ffffff;52    font-size: 52px;53    font-weight: 700;54    text-align: center;55    line-height: 64px;56  }57 58  /* Counter circle */59  .counter {60    position: absolute;61    left: 360px;62    top: 1640px;63    width: 220px;64    height: 220px;65    border-radius: 50%;66    background: #7f8cff;67    display: flex;68    align-items: center;69    justify-content: center;70    box-shadow: 0 10px 18px rgba(0,0,0,0.5);71  }72  .counter .num {73    color: #ffffff;74    font-size: 110px;75    font-weight: 800;76  }77 78  /* Gesture icon */79  .gesture {80    position: absolute;81    left: 620px;82    top: 1620px;83    width: 220px;84    height: 220px;85  }86  .gesture svg { width: 100%; height: 100%; }87  .gesture path, .gesture polyline {88    stroke: #ffffff;89    stroke-width: 12;90    fill: none;91    stroke-linecap: round;92    stroke-linejoin: round;93  }94 95  /* Buttons */96  .btn-row {97    position: absolute;98    left: 0;99    right: 0;100    bottom: 200px;101    height: 140px;102    display: flex;103    justify-content: space-between;104    padding: 0 60px;105  }106  .btn {107    height: 140px;108    border-radius: 74px;109    font-size: 50px;110    font-weight: 600;111    display: flex;112    align-items: center;113    justify-content: center;114    letter-spacing: 0.5px;115  }116  .btn.delete {117    width: 520px;118    border: 3px solid #e6e6e6;119    color: #ffffff;120    background: transparent;121  }122  .btn.save {123    width: 520px;124    background: #ffffff;125    color: #1a1a1a;126    box-shadow: 0 8px 24px rgba(255,255,255,0.1);127  }128 129  /* Home indicator */130  .home-indicator {131    position: absolute;132    bottom: 60px;133    left: 50%;134    transform: translateX(-50%);135    width: 460px;136    height: 14px;137    background: #777;138    opacity: 0.5;139    border-radius: 7px;140  }141</style>142</head>143<body>144<div id="render-target">145  <div class="header">146    <div class="back-btn">147      <svg viewBox="0 0 100 100">148        <line x1="25" y1="25" x2="75" y2="75"></line>149        <line x1="75" y1="25" x2="25" y2="75"></line>150      </svg>151    </div>152    <div class="title">Set Your Goal</div>153  </div>154 155  <div class="message">What is the weekly cycling goal that you would like to reach?</div>156 157  <div class="counter"><div class="num">0</div></div>158 159  <div class="gesture">160    <svg viewBox="0 0 220 220">161      <!-- Up arrow -->162      <polyline points="110,30 110,90" />163      <polyline points="95,45 110,30 125,45" />164      <!-- Down arrow -->165      <polyline points="110,190 110,130" />166      <polyline points="95,175 110,190 125,175" />167      <!-- Hand / swipe gesture -->168      <path d="M60 120169               q 25 -20 40 -5170               q 10 10 5 25171               l -6 22172               q 30 -6 55 20173               q -5 -35 -35 -45174               l -18 -6175               q 8 -25 -10 -35176               q -22 -12 -32 10" />177    </svg>178  </div>179 180  <div class="btn-row">181    <div class="btn delete">Delete</div>182    <div class="btn save">Save</div>183  </div>184 185  <div class="home-indicator"></div>186</div>187</body>188</html>