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</title>6<style>7  @font-face {8    font-family: "Inter";9    src: local("Inter"), local("Arial");10  }11  body {12    margin: 0;13    padding: 0;14    background: transparent;15    font-family: Inter, Arial, sans-serif;16    color: #ffffff;17  }18  #render-target {19    width: 1080px;20    height: 2400px;21    position: relative;22    overflow: hidden;23    background: #0f0f0f;24  }25 26  /* Top App Bar */27  .appbar {28    position: absolute;29    top: 0;30    left: 0;31    width: 1080px;32    height: 170px;33    background: #2a2826;34    display: flex;35    align-items: center;36    padding: 0 40px;37    box-sizing: border-box;38  }39  .close-icon {40    width: 64px;41    height: 64px;42    margin-right: 28px;43  }44  .title {45    font-size: 56px;46    letter-spacing: 0.5px;47    color: #eaeaea;48  }49 50  /* Right-side frequency labels */51  .right-label {52    position: absolute;53    right: 72px;54    width: 360px;55    text-align: left;56    color: #e8e8e8;57    line-height: 1.1;58    font-size: 44px;59    font-weight: 500;60  }61  .l1 { top: 235px; }   /* Five days a week */62  .l2 { top: 610px; }   /* Four days a week */63  .l3 { top: 1030px; }  /* Three days a week */64  .l4 { top: 1645px; }  /* Two days a week */65  .l5 { bottom: 230px; }/* One day a week */66 67  /* Central circular goal number */68  .goal-bubble {69    position: absolute;70    left: 50%;71    top: 1220px;72    transform: translate(-50%, -50%);73    width: 300px;74    height: 300px;75    border-radius: 50%;76    background: radial-gradient(circle at 40% 35%, #8fa2ff, #7f95ff);77    box-shadow: 0 18px 40px rgba(112, 132, 255, 0.35);78    display: flex;79    align-items: center;80    justify-content: center;81  }82  .goal-bubble span {83    font-size: 140px;84    font-weight: 800;85    color: #ffffff;86  }87 88  /* Bottom action buttons */89  .actions {90    position: absolute;91    left: 0;92    right: 0;93    bottom: 120px;94    padding: 0 72px;95    display: flex;96    justify-content: space-between;97    box-sizing: border-box;98  }99  .btn {100    height: 140px;101    border-radius: 36px;102    font-size: 52px;103    font-weight: 700;104    display: flex;105    align-items: center;106    justify-content: center;107    width: 450px;108    box-sizing: border-box;109  }110  .btn-outline {111    border: 3px solid #ffffff;112    color: #ffffff;113    background: transparent;114  }115  .btn-solid {116    background: #ffffff;117    color: #111111;118  }119</style>120</head>121<body>122<div id="render-target">123  <!-- Top App Bar -->124  <div class="appbar">125    <svg class="close-icon" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round">126      <path d="M5 5 L19 19"></path>127      <path d="M19 5 L5 19"></path>128    </svg>129    <div class="title">Set Your Goal</div>130  </div>131 132  <!-- Right side labels -->133  <div class="right-label l1">Five days a<br>week</div>134  <div class="right-label l2">Four days a<br>week</div>135  <div class="right-label l3">Three days a<br>week</div>136  <div class="right-label l4">Two days a<br>week</div>137  <div class="right-label l5">One day a<br>week</div>138 139  <!-- Central Goal Bubble -->140  <div class="goal-bubble">141    <span>2</span>142  </div>143 144  <!-- Bottom Buttons -->145  <div class="actions">146    <div class="btn btn-outline">Delete</div>147    <div class="btn btn-solid">Save</div>148  </div>149</div>150</body>151</html>