GD-ML/AndroidCode

1<html lang="en">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    color: #fff;14  }15 16  /* Top app bar */17  .app-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 160px;23    background: #2b2b2b;24    display: flex;25    align-items: center;26    padding: 0 36px;27    box-sizing: border-box;28  }29  .close-btn {30    width: 72px;31    height: 72px;32    display: flex;33    align-items: center;34    justify-content: center;35    margin-right: 28px;36  }37  .title {38    font-size: 52px;39    font-weight: 700;40    letter-spacing: 0.5px;41  }42 43  /* Options positioned down the page, right-aligned */44  .option {45    position: absolute;46    right: 80px;47    text-align: left;48    width: 420px;49    color: #eaeaea;50    font-size: 44px;51    line-height: 1.15;52  }53  .opt1 { top: 470px; }54  .opt2 { top: 830px; }55  .opt3 { top: 1200px; }56  .opt4 { top: 1720px; color: #dcdcdc; }57 58  /* Number bubble */59  .bubble {60    position: absolute;61    left: 340px;62    top: 1620px;63    width: 220px;64    height: 220px;65    background: #7f8cff;66    border-radius: 50%;67    display: flex;68    align-items: center;69    justify-content: center;70    font-size: 120px;71    font-weight: 700;72    color: #ffffff;73    box-shadow: 0 8px 16px rgba(127,140,255,0.35);74  }75 76  /* Bottom action buttons */77  .actions {78    position: absolute;79    left: 0;80    bottom: 160px;81    width: 100%;82    padding: 0 60px;83    box-sizing: border-box;84    display: flex;85    justify-content: space-between;86    align-items: center;87    gap: 40px;88  }89  .btn {90    height: 130px;91    border-radius: 60px;92    font-size: 54px;93    font-weight: 700;94    display: flex;95    align-items: center;96    justify-content: center;97    flex: 1;98    letter-spacing: 0.3px;99  }100  .btn.delete {101    background: #141414;102    border: 3px solid #ffffff;103    color: #ffffff;104  }105  .btn.save {106    background: #ffffff;107    color: #0f0f0f;108    border: none;109    box-shadow: 0 8px 24px rgba(255,255,255,0.08);110  }111 112  /* Gesture / home indicator */113  .gesture {114    position: absolute;115    bottom: 40px;116    left: 50%;117    transform: translateX(-50%);118    width: 520px;119    height: 12px;120    background: #8c8c8c;121    border-radius: 8px;122    opacity: 0.8;123  }124</style>125</head>126<body>127<div id="render-target">128 129  <!-- Top App Bar -->130  <div class="app-bar">131    <div class="close-btn">132      <svg width="48" height="48" viewBox="0 0 48 48">133        <path d="M8 8 L40 40 M40 8 L8 40" stroke="#ffffff" stroke-width="6" stroke-linecap="round"/>134      </svg>135    </div>136    <div class="title">Set Your Goal</div>137  </div>138 139  <!-- Options -->140  <div class="option opt1">141    Three days a<br>week142  </div>143  <div class="option opt2">144    Two days a<br>week145  </div>146  <div class="option opt3">147    One day a<br>week148  </div>149  <div class="option opt4">150    None151  </div>152 153  <!-- Blue number bubble -->154  <div class="bubble">0</div>155 156  <!-- Bottom Actions -->157  <div class="actions">158    <div class="btn delete">Delete</div>159    <div class="btn save">Save</div>160  </div>161 162  <div class="gesture"></div>163</div>164</body>165</html>