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>My activity - Mock</title>7<style>8  body { margin:0; padding:0; background:transparent; }9  #render-target{10    position: relative;11    overflow: hidden;12    width:1080px;13    height:2400px;14    background:#1f2226;15    color:#E8EAED;16    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;17  }18 19  .status-bar{20    height:100px;21    padding:0 36px;22    display:flex;23    align-items:center;24    justify-content:space-between;25    color:#e6e6e6;26    font-size:38px;27    letter-spacing:0.5px;28  }29  .status-right{30    display:flex;31    align-items:center;32    gap:26px;33    color:#cfd3d7;34  }35  .topbar{36    height:132px;37    display:flex;38    align-items:center;39    padding:0 28px;40  }41  .topbar .title{42    font-size:52px;43    font-weight:600;44    margin-left:18px;45  }46  .topbar .spacer{ flex:1; }47  .icon-btn{ width:80px; height:80px; display:flex; align-items:center; justify-content:center; }48 49  .tabs{50    display:flex;51    gap:120px;52    padding:8px 36px 22px 36px;53    font-size:40px;54    color:#9aa0a6;55    border-top:1px solid #2c3136;56  }57  .tab{ position:relative; padding-bottom:16px; }58  .tab.active{ color:#E8EAED; }59  .tab.active::after{60    content:"";61    position:absolute;62    left:50%;63    transform:translateX(-50%);64    bottom:2px;65    width:120px;66    height:6px;67    border-radius:3px;68    background:#cfd8dc;69  }70 71  .section{72    padding:10px 36px 0 36px;73  }74 75  .range-row{76    display:flex;77    align-items:center;78    justify-content:space-between;79    padding:30px 8px 16px 8px;80    font-size:44px;81  }82  .range-center{83    display:flex;84    align-items:center;85    gap:18px;86  }87  .pts{88    display:flex;89    align-items:center;90    gap:10px;91    color:#7ae1c3;92    font-size:38px;93  }94 95  .graph{96    position:relative;97    height:420px;98    margin:10px 0 6px 0;99  }100  .graph .line1, .graph .line2{101    position:absolute;102    left:0; right:0;103    border-top:2px dashed #3a4046;104  }105  .graph .line1{ top:40px; }106  .graph .line2{ top:220px; }107  .graph .scale{108    position:absolute;109    right:0;110    top:28px;111    color:#7e8790;112    font-size:34px;113  }114  .graph .scale.low{115    top:208px;116  }117  .graph .axis{118    position:absolute;119    left:0; right:0;120    bottom:86px;121    height:4px;122    background:#343a40;123  }124  .graph .labels{125    position:absolute;126    left:0; right:0;127    bottom:26px;128    display:flex;129    justify-content:space-between;130    padding:0 16px;131    color:#8b94a0;132    font-size:34px;133  }134  .graph .bar{135    position:absolute;136    width:42px;137    bottom:88px;138    left:78%;139    height:90px;140    background:#2bd3b3;141    border-radius:10px;142  }143 144  .toggles{145    display:flex;146    gap:22px;147    padding:18px 0 10px 0;148  }149  .pill{150    padding:24px 40px;151    font-size:40px;152    border-radius:26px;153    border:2px solid #4a5158;154    color:#c7cbd1;155  }156  .pill.active{157    background:#4e5d78;158    color:#e5ebff;159    border-color:#4e5d78;160  }161 162  .paragraph{163    margin-top:26px;164    color:#9aa0a6;165    font-size:38px;166    line-height:1.5;167  }168 169  .divider{170    height:1px;171    background:#2c3136;172    margin:36px 0;173  }174 175  .day-entry{176    padding:26px 36px 38px 36px;177  }178  .day-entry .date{179    color:#9aa0a6;180    font-size:38px;181    margin-bottom:10px;182  }183  .day-entry .value{184    font-size:54px;185    font-weight:700;186    color:#E8EAED;187  }188 189  /* bottom gesture bar */190  .gesture{191    position:absolute;192    left:50%;193    transform:translateX(-50%);194    bottom:20px;195    width:360px;196    height:12px;197    background:#ffffff;198    opacity:0.85;199    border-radius:8px;200  }201 202  /* helpers */203  .chevron{204    width:72px; height:72px; display:flex; align-items:center; justify-content:center; color:#E8EAED;205  }206  .faint{ color:#7e8790; }207</style>208</head>209<body>210<div id="render-target">211 212  <!-- Status bar -->213  <div class="status-bar">214    <div>9:10</div>215    <div class="status-right">216      <!-- misc tiny glyphs -->217      <svg width="34" height="34" viewBox="0 0 24 24" fill="#cfd3d7"><circle cx="12" cy="12" r="3"/></svg>218      <!-- wifi -->219      <svg width="46" height="32" viewBox="0 0 24 24" fill="none" stroke="#cfd3d7" stroke-width="2">220        <path d="M2 8c5-4 15-4 20 0"/><path d="M5 12c3-3 11-3 14 0"/><path d="M8 16c2-2 6-2 8 0"/><circle cx="12" cy="19" r="1.6" fill="#cfd3d7" stroke="none"/>221      </svg>222      <!-- battery -->223      <svg width="60" height="32" viewBox="0 0 32 18" fill="none" stroke="#cfd3d7" stroke-width="2">224        <rect x="1" y="3" width="26" height="12" rx="2"></rect>225        <rect x="28" y="7" width="3" height="4" fill="#cfd3d7" stroke="none"></rect>226        <rect x="4" y="6" width="20" height="6" fill="#cfd3d7" stroke="none"></rect>227      </svg>228    </div>229  </div>230 231  <!-- Top bar -->232  <div class="topbar">233    <div class="chevron">234      <svg width="54" height="54" viewBox="0 0 24 24" fill="none" stroke="#E8EAED" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round">235        <path d="M15 6L9 12l6 6"/>236      </svg>237    </div>238    <div class="title">My activity</div>239    <div class="spacer"></div>240    <div class="icon-btn">241      <svg width="44" height="44" viewBox="0 0 24 24" stroke="#E8EAED" stroke-width="2.4" fill="none" stroke-linecap="round">242        <path d="M12 5v14M5 12h14"/>243      </svg>244    </div>245    <div class="icon-btn">246      <svg width="44" height="44" viewBox="0 0 24 24" fill="#E8EAED">247        <circle cx="12" cy="4.5" r="2"></circle>248        <circle cx="12" cy="12" r="2"></circle>249        <circle cx="12" cy="19.5" r="2"></circle>250      </svg>251    </div>252  </div>253 254  <!-- Tabs -->255  <div class="tabs">256    <div class="tab">Day</div>257    <div class="tab active">Week</div>258    <div class="tab">Month</div>259  </div>260 261  <!-- Week section -->262  <div class="section">263    <div class="range-row">264      <div class="chevron faint">265        <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#7e8790" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6L9 12l6 6"/></svg>266      </div>267      <div class="range-center">268        <div>July 23 – 29</div>269        <div class="pts">270          <svg width="36" height="36" viewBox="0 0 24 24" fill="#2bd3b3">271            <path d="M12 21s-7-4.35-7-10A4 4 0 0 1 12 7a4 4 0 0 1 7 4c0 5.65-7 10-7 10z"></path>272          </svg>273          <span>2 pts</span>274        </div>275      </div>276      <div class="chevron faint">277        <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#7e8790" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg>278      </div>279    </div>280 281    <div class="graph">282      <div class="line1"></div>283      <div class="scale">26</div>284      <div class="line2"></div>285      <div class="scale low">12</div>286      <div class="axis"></div>287      <div class="labels">288        <span>Sun</span><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span style="color:#E8EAED">Fri</span><span>Sat</span>289      </div>290      <div class="bar"></div>291    </div>292 293    <div class="toggles">294      <div class="pill active">Heart Points</div>295      <div class="pill">Steps</div>296    </div>297 298    <div class="paragraph">299      You score Heart Points for each minute of activity that gets your heart pumping, like a brisk walk. Increase the intensity to earn more.300    </div>301  </div>302 303  <div class="divider"></div>304 305  <!-- Day list -->306  <div class="day-entry">307    <div class="date">Sunday, July 23</div>308    <div class="value">0 Heart Points</div>309  </div>310 311  <div class="day-entry">312    <div class="date">Monday, July 24</div>313    <div class="value">0 Heart Points</div>314  </div>315 316  <div class="day-entry">317    <div class="date">Tuesday, July 25</div>318    <div class="value">0 Heart Points</div>319  </div>320 321  <div class="day-entry">322    <div class="date">Wednesday, July 26</div>323    <div class="value">0 Heart Points</div>324  </div>325 326  <!-- Bottom gesture bar -->327  <div class="gesture"></div>328</div>329</body>330</html>