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    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;15    color: #E6E6E6;16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;17  }18 19  /* Status bar (mock) */20  .status-bar {21    height: 96px;22    padding: 0 36px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #d0d0d0;27    font-size: 34px;28    letter-spacing: 0.5px;29  }30  .status-icons {31    display: flex; gap: 20px; align-items: center;32  }33  .status-dot {34    width: 18px; height: 18px; border-radius: 50%; background: #d0d0d0; opacity: 0.7;35  }36 37  /* Header */38  .header {39    padding: 18px 36px 22px 36px;40    display: flex;41    align-items: center;42    gap: 24px;43  }44  .header-title {45    font-size: 56px;46    font-weight: 500;47    color: #F1F3F4;48    letter-spacing: 0.2px;49  }50  .header-actions {51    margin-left: auto;52    display: flex; gap: 34px;53  }54  .icon-btn {55    width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center;56    color: #E6E6E6;57  }58  .icon-btn svg { width: 48px; height: 48px; fill: none; stroke: #E6E6E6; stroke-width: 4; }59 60  /* Tabs */61  .tabs {62    display: flex; gap: 120px;63    padding: 24px 36px 6px 36px;64    font-size: 36px;65    color: #9AA0A6;66  }67  .tab {68    position: relative;69    padding-bottom: 24px;70  }71  .tab.active {72    color: #E6E6E6;73    font-weight: 500;74  }75  .tab.active::after {76    content: "";77    position: absolute;78    left: 0; right: 0; bottom: 0;79    height: 8px; width: 80px;80    background: #E6E6E6;81    border-radius: 8px;82  }83  .divider {84    height: 2px; background: #222; margin: 0 0 0 0;85  }86 87  /* Card / graph section */88  .card {89    margin: 24px 0 0 0;90    background: #1B1B1B;91    border-top: 2px solid #222;92    border-bottom: 2px solid #222;93    padding: 28px 36px 40px 36px;94  }95  .card-header {96    display: flex; align-items: center; justify-content: center;97    position: relative;98    margin-bottom: 16px;99  }100  .card-header .chev {101    position: absolute; top: 0;102    width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;103  }104  .card-header .chev.left { left: 0; }105  .card-header .chev.right { right: 0; transform: rotate(180deg); }106  .card-title {107    font-size: 44px; color: #E6E6E6; font-weight: 500;108  }109  .subpoints {110    margin-top: 12px;111    display: flex; align-items: center; justify-content: center; gap: 14px;112    color: #9CE1C8; font-size: 34px;113  }114  .subpoints span { color: #B7C1C6; }115 116  /* Graph area placeholder */117  .graph {118    margin-top: 28px;119    height: 420px;120    position: relative;121    border-top: 2px solid #2A2A2A;122    border-bottom: 2px solid #2A2A2A;123  }124  .graph .hline {125    position: absolute; left: 0; right: 0; height: 2px; background: #2A2A2A;126  }127  .graph .h1 { top: 16px; }128  .graph .h2 { top: 50%; transform: translateY(-1px); }129  .graph .label {130    position: absolute; right: 24px; color: #6E767D; font-size: 30px;131  }132  .graph .lab30 { top: -10px; }133  .graph .lab15 { top: calc(50% - 18px); }134 135  .x-axis {136    display: flex; justify-content: space-between; color: #6E767D;137    font-size: 28px; margin-top: 18px;138    padding: 0 12px;139  }140 141  /* Segmented controls */142  .segmented {143    margin-top: 46px;144    display: flex; gap: 24px; justify-content: center;145  }146  .segmented .btn {147    padding: 26px 44px;148    border-radius: 32px;149    font-size: 34px;150    border: 2px solid #4A4A4A;151    color: #DADCE0;152    background: transparent;153  }154  .segmented .btn.primary {155    background: #3C4451;156    border-color: #3C4451;157    color: #EAF0FF;158  }159 160  .desc {161    color: #B7C1C6;162    font-size: 34px;163    line-height: 1.5;164    padding: 30px 36px 40px 36px;165  }166 167  .link {168    padding: 28px 36px;169    color: #8AB4F8;170    font-size: 36px;171  }172 173  /* Bottom nav handle mock */174  .bottom-bar {175    position: absolute; left: 0; right: 0; bottom: 0;176    height: 128px; background: #000;177    display: flex; align-items: center; justify-content: center;178  }179  .home-handle {180    width: 220px; height: 12px; border-radius: 8px; background: #E6E6E6; opacity: 0.9;181  }182  /* Utility icons */183  .chevron svg { width: 44px; height: 44px; stroke: #B7C1C6; stroke-width: 6; fill: none; }184  .heart svg { width: 38px; height: 38px; stroke: #9CE1C8; fill: none; stroke-width: 5; }185</style>186</head>187<body>188<div id="render-target">189 190  <!-- Mock status bar -->191  <div class="status-bar">192    <div>9:43</div>193    <div class="status-icons">194      <div class="status-dot" style="opacity:.5;"></div>195      <div class="status-dot" style="opacity:.6;"></div>196      <div class="status-dot" style="opacity:.8;"></div>197      <div class="status-dot"></div>198    </div>199  </div>200 201  <!-- Header with back, title, actions -->202  <div class="header">203    <div class="icon-btn" aria-label="Back">204      <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg>205    </div>206    <div class="header-title">My activity</div>207    <div class="header-actions">208      <div class="icon-btn" aria-label="Add">209        <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>210      </div>211      <div class="icon-btn" aria-label="More">212        <svg viewBox="0 0 24 24"><path d="M12 5.5a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm0 5.5a1.5 1.5 0 110 3 1.5 1.5 0 010-3zm0 5.5a1.5 1.5 0 110 3 1.5 1.5 0 010-3z" stroke="none" fill="#E6E6E6"/></svg>213      </div>214    </div>215  </div>216 217  <!-- Tabs -->218  <div class="tabs">219    <div class="tab active">Day</div>220    <div class="tab">Week</div>221    <div class="tab">Month</div>222  </div>223  <div class="divider"></div>224 225  <!-- Card with graph -->226  <div class="card">227    <div class="card-header">228      <div class="chev left chevron"><svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg></div>229      <div class="card-title">Monday, July 31</div>230      <div class="chev right chevron"><svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg></div>231    </div>232    <div class="subpoints">233      <span class="heart">234        <svg viewBox="0 0 24 24"><path d="M12 20s-7.5-4.3-7.5-9.3A4.2 4.2 0 0112 8.2a4.2 4.2 0 017.5 2.5C19.5 15.7 12 20 12 20z"/></svg>235      </span>236      <span>0 pts</span>237    </div>238 239    <div class="graph">240      <div class="hline h1"></div>241      <div class="hline h2"></div>242      <div class="label lab30">30</div>243      <div class="label lab15">15</div>244      <!-- tiny spike placeholder -->245      <div style="position:absolute; left: 260px; bottom: 60px; width: 10px; height: 40px; background:#5C6B73; border-radius: 4px;"></div>246    </div>247 248    <div class="x-axis">249      <div>12 AM</div><div>4 AM</div><div>8 AM</div><div>12 PM</div><div>4 PM</div><div>8 PM</div><div>12 AM</div>250    </div>251 252    <div class="segmented">253      <div class="btn primary">Heart Points</div>254      <div class="btn">Steps</div>255    </div>256  </div>257 258  <div class="desc">259    You score Heart Points for each minute of activity that gets your heart pumping, like a brisk walk. Increase the intensity to earn more.260  </div>261 262  <div class="divider"></div>263 264  <div class="link">See source data</div>265 266  <!-- bottom gesture bar -->267  <div class="bottom-bar">268    <div class="home-handle"></div>269  </div>270 271</div>272</body>273</html>