GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Set Your Goal Screen</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #0D0D0D;14    color: #FFFFFF;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 110px;24    background: #0D0D0D;25  }26  .status-time {27    position: absolute;28    left: 30px;29    top: 28px;30    font-size: 42px;31    font-weight: 600;32    letter-spacing: 1px;33  }34  .status-icons {35    position: absolute;36    right: 30px;37    top: 30px;38    display: flex;39    align-items: center;40    gap: 26px;41  }42  .icon-dot {43    width: 16px; height: 16px; border-radius: 50%; background: #BDBDBD;44  }45  .icon-wifi, .icon-battery {46    width: 44px; height: 24px; border: 2px solid #BDBDBD; border-radius: 6px;47  }48  .icon-battery::after {49    content: ""; position: absolute; width: 6px; height: 14px; background: #BDBDBD; right: -8px; top: 5px; border-radius: 2px;50  }51 52  /* Header / app bar */53  .app-bar {54    position: absolute;55    top: 110px;56    left: 0;57    width: 1080px;58    height: 190px;59    background: #2E2C2B;60  }61  .close-btn {62    position: absolute;63    left: 40px;64    top: 60px;65    width: 60px;66    height: 60px;67  }68  .close-btn svg { width: 60px; height: 60px; }69  .title {70    position: absolute;71    left: 140px;72    top: 60px;73    font-size: 56px;74    font-weight: 700;75    color: #EDEDED;76  }77 78  /* Options on the right side */79  .option {80    position: absolute;81    right: 60px;82    width: 380px;83    text-align: right;84    color: #EDEDED;85    line-height: 1.2;86    font-size: 44px;87    font-weight: 500;88  }89  .opt-four { top: 420px; }90  .opt-three { top: 840px; }91  .opt-two { top: 1260px; }92  .opt-one { top: 1845px; }93 94  /* Big circular selector */95  .big-circle {96    position: absolute;97    top: 1500px;98    left: 50%;99    transform: translateX(-50%);100    width: 290px;101    height: 290px;102    background: #8092FF;103    border-radius: 50%;104    display: flex;105    align-items: center;106    justify-content: center;107    box-shadow: 0 8px 24px rgba(128,146,255,0.35);108  }109  .big-circle span {110    font-size: 140px;111    font-weight: 800;112    color: #FFFFFF;113  }114 115  /* Bottom buttons */116  .bottom-actions {117    position: absolute;118    left: 0;119    bottom: 180px;120    width: 100%;121    padding: 0 50px;122    display: flex;123    justify-content: space-between;124    align-items: center;125  }126  .btn {127    width: 440px;128    height: 130px;129    border-radius: 70px;130    display: flex;131    align-items: center;132    justify-content: center;133    font-size: 48px;134    font-weight: 700;135    letter-spacing: 0.5px;136  }137  .btn-outline {138    border: 3px solid #FFFFFF;139    color: #FFFFFF;140    background: transparent;141  }142  .btn-solid {143    background: #FFFFFF;144    color: #0E0E0E;145  }146 147  /* Gesture bar */148  .gesture {149    position: absolute;150    bottom: 40px;151    left: 50%;152    transform: translateX(-50%);153    width: 360px;154    height: 12px;155    background: #7A7A7A;156    border-radius: 8px;157    opacity: 0.9;158  }159</style>160</head>161<body>162<div id="render-target">163 164  <!-- Status Bar -->165  <div class="status-bar">166    <div class="status-time">2:59</div>167    <div class="status-icons">168      <div class="icon-dot"></div>169      <div class="icon-dot"></div>170      <div class="icon-dot"></div>171      <div class="icon-wifi"></div>172      <div class="icon-battery"></div>173    </div>174  </div>175 176  <!-- Header -->177  <div class="app-bar">178    <div class="close-btn">179      <svg viewBox="0 0 24 24">180        <path d="M5 5 L19 19 M19 5 L5 19" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round"/>181      </svg>182    </div>183    <div class="title">Set Your Goal</div>184  </div>185 186  <!-- Options -->187  <div class="option opt-four">Four days a<br>week</div>188  <div class="option opt-three">Three days a<br>week</div>189  <div class="option opt-two">Two days a<br>week</div>190  <div class="option opt-one">One day a<br>week</div>191 192  <!-- Big number circle -->193  <div class="big-circle"><span>1</span></div>194 195  <!-- Bottom actions -->196  <div class="bottom-actions">197    <div class="btn btn-outline">Delete</div>198    <div class="btn btn-solid">Save</div>199  </div>200 201  <!-- Gesture bar -->202  <div class="gesture"></div>203</div>204</body>205</html>