GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>My Activity - Week</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  * { box-sizing: border-box; }10  #render-target {11    position: relative;12    overflow: hidden;13    width: 1080px;14    height: 2400px;15    background: #121212;16    color: #E5E5E5;17    font-family: Arial, Helvetica, sans-serif;18  }19 20  /* App bar */21  .app-bar {22    height: 190px;23    padding: 28px 28px 0 28px;24  }25  .app-title-row {26    display: flex;27    align-items: center;28    gap: 26px;29    padding: 22px 6px;30  }31  .app-title {32    font-size: 48px;33    font-weight: 600;34    flex: 1;35    letter-spacing: 0.2px;36  }37  .icon-btn {38    width: 64px;39    height: 64px;40    display: inline-flex;41    align-items: center;42    justify-content: center;43    color: #E5E5E5;44  }45  .icon {46    width: 40px;47    height: 40px;48    fill: #E5E5E5;49  }50 51  /* Tabs */52  .tabs {53    display: flex;54    justify-content: space-between;55    padding: 8px 60px 0 60px;56    position: relative;57  }58  .tab {59    width: 33.333%;60    text-align: center;61    font-size: 34px;62    color: #9AA0A6;63    padding: 18px 0 26px;64    position: relative;65  }66  .tab.active {67    color: #FFFFFF;68    font-weight: 600;69  }70  .tab.active::after {71    content: '';72    position: absolute;73    left: 50%;74    bottom: 8px;75    transform: translateX(-50%);76    width: 120px;77    height: 8px;78    background: #FFFFFF;79    border-radius: 6px;80  }81 82  /* Weekly header */83  .summary {84    padding: 28px 40px 0 40px;85  }86  .week-header {87    display: flex;88    align-items: center;89    justify-content: center;90    gap: 24px;91    color: #E5E5E5;92    font-size: 44px;93    font-weight: 600;94    padding-top: 16px;95  }96  .chev { width: 44px; height: 44px; fill: #9AA0A6; }97  .blue {98    color: #8AB4F8;99  }100  .steps-row {101    display: flex;102    gap: 14px;103    align-items: center;104    justify-content: center;105    padding-top: 14px;106    font-size: 34px;107  }108  .shoe { width: 36px; height: 36px; fill: #8AB4F8; }109 110  /* Chart */111  .chart {112    position: relative;113    margin: 24px 40px 0 40px;114    height: 520px;115    border-top: 2px solid #2A2A2A;116  }117  .chart .hline {118    position: absolute;119    left: 0; right: 0;120    height: 0;121    border-top: 2px solid #2A2A2A;122  }123  .chart .hline.dashed { border-top-style: dashed; border-top-color: #5F6F87; }124  .chart .hline.top { top: 70px; }125  .chart .hline.mid { top: 170px; }126  .chart .hline.bot { top: 300px; }127  .chart .y-label {128    position: absolute;129    right: 0;130    transform: translateY(-50%);131    color: #9AA0A6;132    font-size: 28px;133  }134  .chart .y9000 { top: 60px; }135  .chart .y7500 { top: 170px; color: #8AB4F8; }136  .chart .y4000 { top: 300px; }137 138  .x-axis {139    position: absolute;140    left: 0; right: 0; bottom: 74px;141    height: 2px;142    background: #2A2A2A;143  }144  .days {145    position: absolute;146    left: 0; right: 0; bottom: 18px;147    display: grid;148    grid-template-columns: repeat(7, 1fr);149    text-align: center;150    color: #9AA0A6;151    font-size: 30px;152  }153  .days span.active { color: #FFFFFF; font-weight: 600; }154 155  .bar {156    position: absolute;157    bottom: 76px; /* sits on x-axis */158    width: 36px;159    height: 22px;160    background: #7BA2FF;161    border-radius: 6px;162    left: calc((100% / 7) * 1 + (100% / 14) - 18px); /* roughly over 'Mon' */163  }164 165  /* Buttons */166  .segmented {167    display: flex;168    gap: 24px;169    padding: 36px 40px 0 40px;170  }171  .btn {172    font-size: 36px;173    padding: 22px 36px;174    border-radius: 20px;175    border: 2px solid #4A4A4A;176    color: #E5E5E5;177  }178  .btn.primary {179    background: #3C4D6E;180    border-color: #3C4D6E;181  }182 183  .desc {184    padding: 28px 40px 28px 40px;185    color: #B8B8B8;186    font-size: 34px;187    line-height: 1.45;188  }189 190  .divider {191    height: 2px;192    background: #242424;193    margin: 16px 0;194  }195 196  .day-item {197    padding: 28px 40px;198  }199  .day-title {200    color: #B8B8B8;201    font-size: 34px;202    margin-bottom: 14px;203  }204  .day-steps {205    font-size: 48px;206    font-weight: 700;207    color: #FFFFFF;208  }209 210  /* Bottom gesture area */211  .bottom-safe {212    position: absolute;213    left: 0; right: 0; bottom: 0;214    height: 120px;215    background: #000000;216  }217  .gesture {218    position: absolute;219    left: 50%;220    bottom: 34px;221    transform: translateX(-50%);222    width: 220px;223    height: 10px;224    border-radius: 8px;225    background: #EAEAEA;226    opacity: 0.9;227  }228</style>229</head>230<body>231<div id="render-target">232 233  <!-- App Bar -->234  <div class="app-bar">235    <div class="app-title-row">236      <div class="icon-btn" aria-label="Back">237        <svg class="icon" viewBox="0 0 24 24">238          <path d="M15.5 4.5L7 12l8.5 7.5-1.5 1.5L4 12 14 3l1.5 1.5z"/>239        </svg>240      </div>241      <div class="app-title">My activity</div>242      <div class="icon-btn" aria-label="Add">243        <svg class="icon" viewBox="0 0 24 24">244          <path d="M11 4h2v7h7v2h-7v7h-2v-7H4v-2h7z"/>245        </svg>246      </div>247      <div class="icon-btn" aria-label="More">248        <svg class="icon" viewBox="0 0 24 24">249          <path d="M5 12a2 2 0 1 0 .001-4.001A2 2 0 0 0 5 12zm7 0a2 2 0 1 0 .001-4.001A2 2 0 0 0 12 12zm7 0a2 2 0 1 0 .001-4.001A2 2 0 0 0 19 12z"/>250        </svg>251      </div>252    </div>253 254    <div class="tabs">255      <div class="tab">Day</div>256      <div class="tab active">Week</div>257      <div class="tab">Month</div>258    </div>259  </div>260 261  <!-- Summary and chart -->262  <div class="summary">263    <div class="week-header">264      <svg class="chev" viewBox="0 0 24 24"><path d="M15.5 4.5L7 12l8.5 7.5-1.5 1.5L4 12 14 3z"/></svg>265      <div>July 30 – August 5</div>266      <svg class="chev" viewBox="0 0 24 24" style="transform: rotate(180deg);"><path d="M15.5 4.5L7 12l8.5 7.5-1.5 1.5L4 12 14 3z"/></svg>267    </div>268    <div class="steps-row blue">269      <svg class="shoe" viewBox="0 0 24 24">270        <path d="M9 7c1.7 0 3 1.3 3 3 0 1.9-1.6 3.3-3.4 3H6c-1.7 0-3 1.3-3 3h15c.9 0 1.7-.6 1.9-1.5l.6-2.2-5.2-2.3C13.4 8.4 11.4 7 9 7z"/>271      </svg>272      <span>538 steps</span>273    </div>274 275    <div class="chart">276      <div class="hline top"></div>277      <div class="hline mid dashed"></div>278      <div class="hline bot"></div>279 280      <div class="y-label y9000">9,000</div>281      <div class="y-label y7500">7,500</div>282      <div class="y-label y4000">4,000</div>283 284      <div class="x-axis"></div>285      <div class="bar"></div>286 287      <div class="days">288        <span>Sun</span>289        <span class="active">Mon</span>290        <span>Tue</span>291        <span>Wed</span>292        <span>Thu</span>293        <span>Fri</span>294        <span>Sat</span>295      </div>296    </div>297 298    <div class="segmented">299      <div class="btn">Heart Points</div>300      <div class="btn primary">Steps</div>301    </div>302 303    <div class="desc">304      Steps are a useful measure of how much you’re moving around, and can help you spot changes in your activity levels305    </div>306  </div>307 308  <div class="divider"></div>309 310  <div class="day-item">311    <div class="day-title">Sunday, July 30</div>312    <div class="day-steps">0 steps</div>313  </div>314 315  <div class="divider"></div>316 317  <div class="day-item">318    <div class="day-title">Monday, July 31</div>319    <div class="day-steps">538 steps</div>320  </div>321 322  <div class="bottom-safe">323    <div class="gesture"></div>324  </div>325</div>326</body>327</html>