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<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">8<style>9  body { margin: 0; padding: 0; background: transparent; font-family: 'Roboto', Arial, sans-serif; }10  #render-target {11    width: 1080px; height: 2400px; position: relative; overflow: hidden;12    background: #222527; color: #EDEFF2;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute; top: 24px; left: 0; right: 0; height: 96px;18    padding: 0 40px; display: flex; align-items: center; justify-content: space-between;19    color: #FFFFFF;20  }21  .status-left { display: flex; align-items: center; gap: 22px; }22  .status-time { font-size: 42px; font-weight: 500; letter-spacing: 0.5px; }23  .status-right { display: flex; align-items: center; gap: 26px; }24  .status-icon svg { width: 40px; height: 40px; fill: none; stroke: #E0E6EA; stroke-width: 2.5; }25 26  /* App header */27  .app-header {28    position: absolute; top: 150px; left: 0; right: 0; padding: 0 40px;29    display: flex; align-items: center; justify-content: space-between;30  }31  .close-btn svg { width: 64px; height: 64px; stroke: #EDEFF2; stroke-width: 6; }32  .header-actions { display: flex; align-items: center; gap: 28px; }33  .set-goal { color: #8AB4F8; font-size: 40px; font-weight: 500; }34  .kebab { display: inline-flex; align-items: center; justify-content: center; }35  .kebab svg { width: 40px; height: 40px; fill: #C9CED3; }36 37  /* Content */38  .content {39    position: absolute; top: 620px; left: 100px; right: 100px;40    text-align: center;41  }42  .title {43    font-size: 80px; font-weight: 500; letter-spacing: 0.5px; margin-bottom: 40px;44    color: #F1F3F5;45  }46  .description {47    font-size: 40px; line-height: 1.6; color: #AAB0B6; max-width: 880px; margin: 0 auto;48  }49 50  /* Goal controls */51  .goal-controls {52    position: absolute; bottom: 480px; left: 0; right: 0;53    display: flex; align-items: center; justify-content: center; gap: 120px;54  }55  .goal-number {56    font-size: 90px; font-weight: 500; color: #FFFFFF; letter-spacing: 2px;57  }58  .goal-icon {59    width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center;60  }61  .goal-icon svg { width: 64px; height: 64px; stroke: #8AB4F8; stroke-width: 10; }62  .goal-caption {63    position: absolute; left: 0; right: 0; bottom: 400px; text-align: center;64    font-size: 38px; color: #9EA4AA;65  }66 67  /* Home indicator */68  .home-indicator {69    position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%);70    width: 300px; height: 12px; background: #E6E7EA; border-radius: 12px; opacity: 0.75;71  }72</style>73</head>74<body>75<div id="render-target">76 77  <!-- Status bar -->78  <div class="status-bar">79    <div class="status-left">80      <div class="status-time">11:57</div>81      <!-- Simple play-like icon -->82      <div class="status-icon">83        <svg viewBox="0 0 24 24">84          <polygon points="6,4 20,12 6,20" fill="#E0E6EA"></polygon>85        </svg>86      </div>87    </div>88    <div class="status-right">89      <!-- Location pin -->90      <div class="status-icon">91        <svg viewBox="0 0 24 24">92          <path d="M12 3c-4 0-7 3-7 7 0 5 7 11 7 11s7-6 7-11c0-4-3-7-7-7z"></path>93          <circle cx="12" cy="10" r="3" fill="none"></circle>94        </svg>95      </div>96      <!-- WiFi -->97      <div class="status-icon">98        <svg viewBox="0 0 24 24">99          <path d="M2 9c5-5 15-5 20 0"></path>100          <path d="M5 12c4-4 10-4 14 0"></path>101          <path d="M8 15c3-3 7-3 10 0"></path>102          <circle cx="12" cy="18" r="1.8" fill="#E0E6EA" stroke="none"></circle>103        </svg>104      </div>105      <!-- Battery -->106      <div class="status-icon">107        <svg viewBox="0 0 30 24">108          <rect x="2" y="6" width="22" height="12" rx="2" ry="2"></rect>109          <rect x="24" y="9" width="4" height="6" rx="1" ry="1" fill="#E0E6EA" stroke="none"></rect>110        </svg>111      </div>112    </div>113  </div>114 115  <!-- App header -->116  <div class="app-header">117    <div class="close-btn">118      <svg viewBox="0 0 24 24">119        <line x1="4" y1="4" x2="20" y2="20"></line>120        <line x1="20" y1="4" x2="4" y2="20"></line>121      </svg>122    </div>123    <div class="header-actions">124      <div class="set-goal">Set goal</div>125      <div class="kebab">126        <svg viewBox="0 0 24 24">127          <circle cx="12" cy="5" r="2.3"></circle>128          <circle cx="12" cy="12" r="2.3"></circle>129          <circle cx="12" cy="19" r="2.3"></circle>130        </svg>131      </div>132    </div>133  </div>134 135  <!-- Main content -->136  <div class="content">137    <div class="title">Heart Points</div>138    <div class="description">139      You score Heart Points for doing activities at a higher pace, like taking a brisk walk.140      Increase the intensity to earn more points.141    </div>142  </div>143 144  <!-- Goal controls -->145  <div class="goal-controls">146    <div class="goal-icon">147      <svg viewBox="0 0 24 24">148        <line x1="4" y1="12" x2="20" y2="12"></line>149      </svg>150    </div>151    <div class="goal-number">55</div>152    <div class="goal-icon">153      <svg viewBox="0 0 24 24">154        <line x1="12" y1="4" x2="12" y2="20"></line>155        <line x1="4" y1="12" x2="20" y2="12"></line>156      </svg>157    </div>158  </div>159  <div class="goal-caption">points a day</div>160 161  <!-- Home indicator -->162  <div class="home-indicator"></div>163 164</div>165</body>166</html>