GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Set Your Goal UI</title>5<style>6  body {7    margin: 0;8    padding: 0;9    background: transparent;10    font-family: Arial, Helvetica, sans-serif;11  }12  #render-target {13    width: 1080px;14    height: 2400px;15    position: relative;16    overflow: hidden;17    background: #0d0d0d;18    color: #fff;19  }20  /* Top app bar */21  .app-bar {22    position: absolute;23    top: 0;24    left: 0;25    width: 1080px;26    height: 170px;27    background: #2a2a2a;28    display: flex;29    align-items: center;30    padding: 0 40px;31    box-sizing: border-box;32  }33  .close-icon {34    width: 64px;35    height: 64px;36    margin-right: 28px;37    display: flex;38    align-items: center;39    justify-content: center;40  }41  .close-icon svg {42    width: 40px;43    height: 40px;44    fill: none;45    stroke: #ffffff;46    stroke-width: 6;47    stroke-linecap: round;48  }49  .title {50    font-size: 48px;51    font-weight: 600;52    letter-spacing: 0.5px;53  }54 55  /* Options text on right side */56  .option {57    position: absolute;58    right: 90px;59    font-size: 40px;60    line-height: 1.15;61    color: #f3f3f3;62    text-align: left;63  }64  .option.three { top: 520px; }65  .option.two { top: 960px; }66  .option.one { top: 1400px; }67 68  /* Circular number badge */69  .badge {70    position: absolute;71    left: 410px; /* center-ish for 260px width: 410 + 130 = 540 center */72    top: 1760px;73    width: 260px;74    height: 260px;75    background: #7d8cff;76    border-radius: 50%;77    display: flex;78    align-items: center;79    justify-content: center;80    box-shadow: 0 10px 24px rgba(0,0,0,0.35);81  }82  .badge .number {83    font-size: 120px;84    font-weight: 700;85    color: #ffffff;86  }87 88  .none-label {89    position: absolute;90    left: 720px;91    top: 1865px;92    font-size: 40px;93    color: #dddddd;94  }95 96  /* Bottom buttons */97  .bottom-buttons {98    position: absolute;99    bottom: 120px;100    left: 56px;101    width: 968px;102    display: flex;103    justify-content: space-between;104    align-items: center;105  }106  .btn {107    width: 450px;108    height: 120px;109    border-radius: 60px;110    font-size: 44px;111    font-weight: 600;112    cursor: default;113  }114  .btn.outline {115    background: transparent;116    color: #ffffff;117    border: 4px solid #e6e6e6;118  }119  .btn.solid {120    background: #ffffff;121    color: #1a1a1a;122    border: none;123    box-shadow: 0 8px 16px rgba(0,0,0,0.25);124  }125</style>126</head>127<body>128<div id="render-target">129  <div class="app-bar">130    <div class="close-icon">131      <svg viewBox="0 0 24 24">132        <path d="M5 5 L19 19 M19 5 L5 19"></path>133      </svg>134    </div>135    <div class="title">Set Your Goal</div>136  </div>137 138  <div class="option three">Three days a<br>week</div>139  <div class="option two">Two days a<br>week</div>140  <div class="option one">One day a<br>week</div>141 142  <div class="badge">143    <div class="number">0</div>144  </div>145  <div class="none-label">None</div>146 147  <div class="bottom-buttons">148    <button class="btn outline">Delete</button>149    <button class="btn solid">Save</button>150  </div>151</div>152</body>153</html>