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>My activity - Weekly</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #121212; color: #EDEDED;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;13  }14  .status-bar {15    position: absolute; top: 0; left: 0; right: 0;16    height: 90px; padding: 18px 32px;17    display: flex; align-items: center; justify-content: space-between;18    color: #FFFFFF;19    font-weight: 600; font-size: 36px;20  }21  .status-right {22    display: flex; align-items: center; gap: 22px; font-size: 28px; color: #BDBDBD;23  }24  .icon { width: 40px; height: 40px; fill: none; stroke: #BDBDBD; stroke-width: 3; }25  .battery {26    width: 70px; height: 34px; border: 3px solid #BDBDBD; border-radius: 6px; position: relative;27  }28  .battery::after {29    content: ""; position: absolute; right: -12px; top: 9px;30    width: 8px; height: 16px; background: #BDBDBD; border-radius: 2px;31  }32  .battery-fill { position: absolute; left: 2px; top: 2px; bottom: 2px; width: 38px; background: #8BC34A; border-radius: 4px; }33  .app-bar {34    position: absolute; top: 90px; left: 0; right: 0;35    height: 120px; display: flex; align-items: center; justify-content: space-between;36    padding: 0 24px;37  }38  .app-left { display: flex; align-items: center; gap: 16px; }39  .back-icon { width: 56px; height: 56px; }40  .title { font-size: 48px; font-weight: 600; color: #FFFFFF; }41  .app-actions { display: flex; align-items: center; gap: 24px; }42  .action-icon { width: 54px; height: 54px; stroke: #FFFFFF; }43  .tabs {44    position: absolute; top: 210px; left: 0; right: 0;45    display: flex; justify-content: center; gap: 60px;46    color: #BDBDBD; font-size: 32px; font-weight: 600;47  }48  .tab { padding: 16px 6px; }49  .tab.active { color: #FFFFFF; position: relative; }50  .tab.active::after {51    content: ""; position: absolute; left: 10px; right: 10px; bottom: -6px;52    height: 6px; background: #FFFFFF; border-radius: 3px;53  }54  .content {55    position: absolute; top: 300px; left: 0; right: 0;56    padding: 0 40px;57  }58  .date-row {59    display: flex; align-items: center; justify-content: center; gap: 16px;60    color: #FFFFFF; font-size: 42px; font-weight: 600;61    margin-top: 20px;62  }63  .pts { display: flex; align-items: center; gap: 12px; font-size: 34px; color: #7EE0A8; }64  .heart-icon { width: 36px; height: 36px; fill: none; stroke: #7EE0A8; stroke-width: 3; }65  .graph {66    margin-top: 40px; height: 560px; border-radius: 12px;67    position: relative; border: 0px solid #2A2A2A;68  }69  .graph-line {70    position: absolute; left: 0; right: 0; height: 1px; background: #2A2A2A;71  }72  .graph-line.dashed { border-top: 2px dashed #2A2A2A; background: transparent; }73  .axis-label {74    position: absolute; right: 10px; color: #BDBDBD; font-size: 30px;75  }76  .axis24 { top: 0; }77  .axis20 { top: 180px; }78  .axis10 { bottom: 100px; }79  .days {80    position: absolute; left: 16px; right: 16px; bottom: 20px;81    display: flex; justify-content: space-between; color: #BDBDBD; font-size: 30px;82  }83  .toggle {84    margin-top: 24px; display: flex; gap: 24px;85  }86  .pill {87    padding: 22px 36px; border-radius: 18px; font-size: 34px; font-weight: 600;88    border: 2px solid #3A3A3A; color: #FFFFFF; background: #2A2A2A;89  }90  .pill.active { background: #2f3b46; border-color: #3e5362; }91  .pill.simple { background: transparent; color: #BDBDBD; }92  .desc {93    margin-top: 40px; color: #BDBDBD; font-size: 34px; line-height: 1.5;94  }95  .list {96    margin-top: 40px; border-top: 1px solid #2A2A2A;97  }98  .item {99    padding: 34px 6px; border-bottom: 1px solid #2A2A2A;100  }101  .item .date { color: #BDBDBD; font-size: 32px; margin-bottom: 20px; }102  .item .value { color: #FFFFFF; font-size: 42px; font-weight: 600; }103  .gesture {104    position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);105    width: 180px; height: 12px; background: #FFFFFF; border-radius: 6px; opacity: 0.9;106  }107</style>108</head>109<body>110<div id="render-target">111 112  <!-- Status bar -->113  <div class="status-bar">114    <div>8:32</div>115    <div class="status-right">116      <!-- Do not disturb icon -->117      <svg class="icon" viewBox="0 0 24 24">118        <circle cx="12" cy="12" r="9"></circle>119        <line x1="7" y1="12" x2="17" y2="12"></line>120      </svg>121      <!-- Wi-Fi icon -->122      <svg class="icon" viewBox="0 0 24 24">123        <path d="M2 8c5-4 15-4 20 0"></path>124        <path d="M5 12c3-3 11-3 14 0"></path>125        <path d="M8 16c2-2 6-2 8 0"></path>126        <circle cx="12" cy="19" r="1.5" fill="#BDBDBD" stroke="none"></circle>127      </svg>128      <div class="battery"><div class="battery-fill"></div></div>129      <div style="color:#EDEDED; font-size:28px;">62%</div>130    </div>131  </div>132 133  <!-- App bar -->134  <div class="app-bar">135    <div class="app-left">136      <svg class="back-icon action-icon" viewBox="0 0 24 24">137        <polyline points="15,5 8,12 15,19" fill="none"></polyline>138      </svg>139      <div class="title">My activity</div>140    </div>141    <div class="app-actions">142      <svg class="action-icon" viewBox="0 0 24 24">143        <line x1="12" y1="5" x2="12" y2="19"></line>144        <line x1="5" y1="12" x2="19" y2="12"></line>145      </svg>146      <svg class="action-icon" viewBox="0 0 24 24">147        <circle cx="6" cy="12" r="2.2" fill="#FFFFFF" stroke="none"></circle>148        <circle cx="12" cy="12" r="2.2" fill="#FFFFFF" stroke="none"></circle>149        <circle cx="18" cy="12" r="2.2" fill="#FFFFFF" stroke="none"></circle>150      </svg>151    </div>152  </div>153 154  <!-- Tabs -->155  <div class="tabs">156    <div class="tab">Day</div>157    <div class="tab active">Week</div>158    <div class="tab">Month</div>159  </div>160 161  <!-- Main content -->162  <div class="content">163    <div class="date-row">164      <span>November 12 – 18</span>165      <span class="pts">166        <svg class="heart-icon" viewBox="0 0 24 24">167          <path d="M12 20s-7-4.5-9-8.5C1 7 4 4 7 5c2 0 3 2 5 3 2-1 3-3 5-3 3-1 6 2 4 6.5C19 15.5 12 20 12 20z"></path>168        </svg>169        <span>0 pts</span>170      </span>171    </div>172 173    <div class="graph">174      <div class="graph-line" style="top:0;"></div>175      <div class="graph-line dashed" style="top:180px;"></div>176      <div class="graph-line" style="bottom:100px;"></div>177 178      <div class="axis-label axis24">24</div>179      <div class="axis-label axis20">20</div>180      <div class="axis-label axis10">10</div>181 182      <div class="days">183        <span>Sun</span><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span>184      </div>185    </div>186 187    <div class="toggle">188      <div class="pill active">Heart Points</div>189      <div class="pill simple">Steps</div>190    </div>191 192    <div class="desc">193      You score Heart Points for each minute of activity that gets your heart pumping, like a brisk walk. Increase the intensity to earn more.194    </div>195 196    <div class="list">197      <div class="item">198        <div class="date">Sunday, November 12</div>199        <div class="value">0 Heart Points</div>200      </div>201      <div class="item">202        <div class="date">Monday, November 13</div>203        <div class="value">0 Heart Points</div>204      </div>205    </div>206  </div>207 208  <!-- Gesture bar -->209  <div class="gesture"></div>210 211</div>212</body>213</html>