GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Heart Points - Set Goal</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #222426;15    color: #ECECEC;16    font-family: Roboto, "Segoe UI", Arial, sans-serif;17  }18 19  /* Status bar */20  .status {21    position: absolute;22    top: 24px;23    left: 36px;24    right: 36px;25    display: flex;26    justify-content: space-between;27    align-items: center;28    color: #ffffff;29    font-size: 36px;30    opacity: 0.95;31  }32  .status-right {33    display: flex;34    align-items: center;35    gap: 28px;36  }37  .icon { display: inline-block; }38 39  /* Top actions */40  .top-actions {41    position: absolute;42    top: 160px;43    left: 36px;44    right: 36px;45    display: flex;46    justify-content: space-between;47    align-items: center;48  }49  .close-btn {50    display: flex;51    align-items: center;52    gap: 12px;53    color: #fff;54  }55  .action-right {56    display: flex;57    align-items: center;58    gap: 24px;59  }60  .link {61    color: #76A8FF;62    font-size: 42px;63    text-decoration: none;64  }65 66  /* Title & description */67  .title {68    position: absolute;69    top: 690px;70    left: 0;71    width: 100%;72    text-align: center;73    font-size: 70px;74    font-weight: 500;75    letter-spacing: 0.2px;76    color: #F2F2F2;77  }78  .desc {79    position: absolute;80    top: 820px;81    left: 140px;82    width: 800px;83    text-align: center;84    font-size: 36px;85    line-height: 54px;86    color: #9FA4AA;87  }88 89  /* Goal controls */90  .goal {91    position: absolute;92    top: 1660px;93    left: 0;94    width: 100%;95  }96  .goal-row {97    width: 560px;98    margin: 0 auto;99    display: flex;100    align-items: center;101    justify-content: space-between;102  }103  .value {104    font-size: 86px;105    font-weight: 500;106    color: #FFFFFF;107    letter-spacing: 2px;108  }109  .unit {110    margin-top: 22px;111    text-align: center;112    font-size: 34px;113    color: #8D9399;114  }115 116  /* Home indicator */117  .home-indicator {118    position: absolute;119    bottom: 36px;120    left: 50%;121    transform: translateX(-50%);122    width: 220px;123    height: 12px;124    background: #EEEEEE;125    border-radius: 12px;126    opacity: 0.9;127  }128</style>129</head>130<body>131<div id="render-target">132 133  <!-- Status bar -->134  <div class="status">135    <div>11:56</div>136    <div class="status-right">137      <!-- Location icon -->138      <svg class="icon" width="40" height="40" viewBox="0 0 36 36">139        <path d="M18 4c-6 0-10 4-10 10 0 7 10 18 10 18s10-11 10-18c0-6-4-10-10-10z" fill="none" stroke="#FFFFFF" stroke-width="2"/>140        <circle cx="18" cy="14" r="3" fill="#FFFFFF"/>141      </svg>142      <!-- Wi-Fi icon -->143      <svg class="icon" width="40" height="40" viewBox="0 0 36 36">144        <path d="M4 16c8-6 20-6 28 0" stroke="#FFFFFF" stroke-width="2" fill="none"/>145        <path d="M8 22c6-4 14-4 20 0" stroke="#FFFFFF" stroke-width="2" fill="none"/>146        <path d="M14 27c4-2 8-2 12 0" stroke="#FFFFFF" stroke-width="2" fill="none"/>147      </svg>148      <!-- Battery icon -->149      <svg class="icon" width="40" height="40" viewBox="0 0 36 36">150        <rect x="6" y="10" width="22" height="16" rx="3" ry="3" fill="none" stroke="#FFFFFF" stroke-width="2"/>151        <rect x="9" y="13" width="16" height="10" fill="#FFFFFF"/>152        <rect x="28" y="14" width="3" height="8" fill="#FFFFFF"/>153      </svg>154    </div>155  </div>156 157  <!-- Top actions -->158  <div class="top-actions">159    <div class="close-btn">160      <svg class="icon" width="60" height="60" viewBox="0 0 36 36">161        <path d="M6 6L30 30M30 6L6 30" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"/>162      </svg>163    </div>164    <div class="action-right">165      <a href="#" class="link">Set goal</a>166      <svg class="icon" width="44" height="44" viewBox="0 0 36 36">167        <circle cx="18" cy="8" r="3" fill="#C9CDD1"/>168        <circle cx="18" cy="18" r="3" fill="#C9CDD1"/>169        <circle cx="18" cy="28" r="3" fill="#C9CDD1"/>170      </svg>171    </div>172  </div>173 174  <!-- Title -->175  <div class="title">Heart Points</div>176 177  <!-- Description -->178  <div class="desc">179    You score Heart Points for doing activities at a higher pace, like taking a brisk walk.180    Increase the intensity to earn more points.181  </div>182 183  <!-- Goal controls -->184  <div class="goal">185    <div class="goal-row">186      <!-- Minus -->187      <svg class="icon" width="60" height="60" viewBox="0 0 36 36">188        <path d="M8 18H28" stroke="#76A8FF" stroke-width="3" stroke-linecap="round"/>189      </svg>190 191      <div class="value">50</div>192 193      <!-- Plus -->194      <svg class="icon" width="60" height="60" viewBox="0 0 36 36">195        <path d="M18 8V28M8 18H28" stroke="#76A8FF" stroke-width="3" stroke-linecap="round"/>196      </svg>197    </div>198    <div class="unit">points a day</div>199  </div>200 201  <!-- Home indicator -->202  <div class="home-indicator"></div>203 204</div>205</body>206</html>