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: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0f0f0f;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 100px;22    background: #000000;23    color: #ffffff;24    padding: 0 32px;25    box-sizing: border-box;26  }27  .status-time {28    position: absolute;29    left: 30px;30    top: 26px;31    font-size: 34px;32    letter-spacing: 1px;33  }34  .status-icons {35    position: absolute;36    right: 30px;37    top: 26px;38    display: flex;39    align-items: center;40    gap: 22px;41  }42  .icon-dot {43    width: 16px; height: 16px; background:#ffffff; border-radius:50%;44    opacity: 0.9;45  }46  .battery {47    width: 42px; height: 20px; border: 3px solid #fff; border-radius: 4px; position: relative;48  }49  .battery::after {50    content: ""; position: absolute; right: -10px; top: 6px; width: 6px; height: 8px; background: #fff; border-radius: 2px;51  }52  .battery-level {53    position: absolute; left: 3px; top: 3px; width: 26px; height: 12px; background: #ffffff;54  }55 56  /* Header bar */57  .header {58    position: absolute;59    top: 100px;60    left: 0;61    width: 1080px;62    height: 180px;63    background: #2b2a29;64    color: #fff;65  }66  .close-btn {67    position: absolute;68    left: 34px;69    top: 54px;70    width: 72px;71    height: 72px;72    display: flex;73    align-items: center;74    justify-content: center;75  }76  .close-btn svg { width: 38px; height: 38px; }77  .title {78    position: absolute;79    left: 150px;80    top: 58px;81    font-size: 56px;82    font-weight: 600;83    letter-spacing: 0.5px;84  }85 86  /* Options */87  .option {88    position: absolute;89    right: 80px;90    width: 420px;91    color: #ffffff;92    text-align: right;93    font-size: 44px;94    line-height: 1.2;95    opacity: 0.95;96  }97  .opt1 { top: 380px; }98  .opt2 { top: 880px; }99  .opt3 { top: 1380px; }100  .opt4 { top: 1900px; }101 102  /* Floating number circle */103  .floating-number {104    position: absolute;105    left: 420px; /* will center the circle visually */106    top: 1520px;107    width: 240px;108    height: 240px;109    background: #8093ff;110    border-radius: 50%;111    display: flex;112    align-items: center;113    justify-content: center;114    box-shadow: 0 12px 30px rgba(128,147,255,0.35);115  }116  .floating-number span {117    color: #ffffff;118    font-size: 140px;119    font-weight: 700;120  }121 122  /* Bottom buttons */123  .actions {124    position: absolute;125    left: 0;126    bottom: 150px;127    width: 1080px;128    padding: 0 60px;129    box-sizing: border-box;130    display: flex;131    justify-content: space-between;132    align-items: center;133  }134  .btn {135    width: 450px;136    height: 120px;137    border-radius: 60px;138    font-size: 48px;139    font-weight: 600;140    display: flex;141    align-items: center;142    justify-content: center;143    letter-spacing: 0.5px;144  }145  .btn-delete {146    border: 3px solid #ffffff;147    color: #ffffff;148    background: transparent;149  }150  .btn-save {151    background: #ffffff;152    color: #0f0f0f;153  }154 155  /* Gesture bar */156  .gesture {157    position: absolute;158    bottom: 48px;159    left: 50%;160    transform: translateX(-50%);161    width: 520px;162    height: 12px;163    background: #cfcfcf;164    border-radius: 8px;165    opacity: 0.7;166  }167</style>168</head>169<body>170<div id="render-target">171 172  <div class="status-bar">173    <div class="status-time">2:59</div>174    <div class="status-icons">175      <div class="icon-dot"></div>176      <div class="icon-dot"></div>177      <div class="battery">178        <div class="battery-level"></div>179      </div>180    </div>181  </div>182 183  <div class="header">184    <div class="close-btn">185      <svg viewBox="0 0 24 24" fill="#ffffff">186        <path d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"></path>187      </svg>188    </div>189    <div class="title">Set Your Goal</div>190  </div>191 192  <div class="option opt1">Four days a<br>week</div>193  <div class="option opt2">Three days a<br>week</div>194  <div class="option opt3">Two days a<br>week</div>195  <div class="option opt4">One day a<br>week</div>196 197  <div class="floating-number"><span>1</span></div>198 199  <div class="actions">200    <div class="btn btn-delete">Delete</div>201    <div class="btn btn-save">Save</div>202  </div>203 204  <div class="gesture"></div>205</div>206</body>207</html>