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 - Week</title>7<style>8  body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #202124;15    color: #E8EAED;16  }17 18  .status-bar {19    height: 70px;20    padding: 0 32px;21    color: #E8EAED;22    display: flex;23    align-items: center;24    font-size: 36px;25    letter-spacing: 0.5px;26  }27  .status-bar .spacer { flex: 1; }28  .icon-row { display:flex; gap:22px; align-items:center; }29 30  .app-bar {31    height: 120px;32    display: flex;33    align-items: center;34    padding: 0 24px;35    gap: 16px;36  }37  .app-title {38    font-size: 56px;39    font-weight: 600;40    flex: 1;41  }42  .app-actions { display:flex; gap:30px; align-items:center; }43 44  .tabs {45    display: flex;46    justify-content: space-around;47    padding: 18px 0 8px;48    border-bottom: 1px solid #2C2D30;49    color: #A7ADB4;50    font-size: 36px;51  }52  .tab {53    width: 33.33%;54    text-align: center;55    position: relative;56    padding-bottom: 14px;57  }58  .tab.active { color: #E8EAED; font-weight: 600; }59  .tab.active::after{60    content:"";61    position:absolute;62    bottom: -1px;63    left: 50%;64    transform: translateX(-50%);65    width: 100px;66    height: 6px;67    border-radius: 6px;68    background:#E8EAED;69  }70 71  .week-header {72    padding: 36px 36px 16px;73    display: flex;74    align-items: center;75    gap: 18px;76  }77  .week-header .center {78    flex: 1;79    text-align: center;80  }81  .week-title {82    font-size: 44px;83    font-weight: 600;84  }85  .pts {86    margin-top: 8px;87    color: #81C995;88    font-size: 34px;89    display: inline-flex;90    align-items: center;91    gap: 10px;92  }93 94  .chart {95    margin: 10px 36px 0;96    border-top: 2px dashed #3A3F45;97    position: relative;98    height: 360px;99  }100  .chart .top-label,101  .chart .mid-label {102    position: absolute;103    right: -6px;104    color:#9AA0A6;105    font-size: 30px;106  }107  .chart .top-label { top: -26px; }108  .chart .mid-label { bottom: 150px; }109  .chart .mid-line {110    position: absolute;111    left: 0; right: 0;112    top: 50%;113    height: 0;114    border-top: 2px solid #3A3F45;115    transform: translateY(-50%);116  }117  .chart .bars {118    position: absolute;119    left: 0; right: 0; bottom: 30px;120    height: 180px;121    display: flex;122    justify-content: space-between;123    padding: 0 20px;124  }125  .bar {126    width: 40px;127    background: #18D6C3;128    border-radius: 8px 8px 0 0;129    align-self: flex-end;130  }131  .bar.small { height: 120px; }132 133  .x-axis {134    margin: 12px 36px 0;135    border-top: 6px solid transparent;136    color:#8E939A;137    display: flex;138    justify-content: space-between;139    padding: 6px 10px 0;140    font-size: 30px;141  }142  .x-axis .today { color:#E8EAED; font-weight: 600; }143 144  .mode-buttons {145    display: flex;146    gap: 24px;147    padding: 40px 36px 0;148  }149  .btn {150    padding: 22px 36px;151    border-radius: 22px;152    border: 1px solid #5F6368;153    color:#E8EAED;154    font-size: 36px;155    background: transparent;156  }157  .btn.primary {158    background: #3C485A;159    border-color: #3C485A;160    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);161  }162 163  .desc {164    padding: 26px 36px 32px;165    color:#A7ADB4;166    font-size: 34px;167    line-height: 1.5;168  }169 170  .divider {171    height: 1px;172    background:#2C2D30;173    margin: 8px 0 12px;174  }175 176  .log {177    padding: 16px 36px;178  }179  .log .day {180    color:#A7ADB4;181    font-size: 34px;182    margin-top: 34px;183  }184  .log .points {185    font-size: 48px;186    font-weight: 700;187    margin: 14px 0 10px;188  }189 190  /* Bottom gesture bar */191  .gesture {192    position: absolute;193    left: 50%;194    transform: translateX(-50%);195    bottom: 18px;196    width: 300px;197    height: 10px;198    background: #EEE;199    opacity: 0.7;200    border-radius: 10px;201  }202 203  /* Simple icon baseline */204  .icon {205    width: 48px; height: 48px; fill: #E8EAED;206  }207  .icon-muted { fill:#A7ADB4; }208  .icon-green { fill:#81C995; }209</style>210</head>211<body>212<div id="render-target">213 214  <!-- Status bar -->215  <div class="status-bar">216    <div>9:14</div>217    <div class="spacer"></div>218    <div class="icon-row">219      <svg class="icon icon-muted" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>220      <svg class="icon icon-muted" viewBox="0 0 24 24"><path d="M7 12h10M12 7v10" stroke="#A7ADB4" stroke-width="2" fill="none"/></svg>221      <svg class="icon" viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>222      <svg class="icon" viewBox="0 0 24 24"><path d="M21 8V7a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v1h2V7a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v1h2zM3 10h18v9a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-9z"/></svg>223      <svg class="icon" viewBox="0 0 24 24"><path d="M13 3a9 9 0 1 1-2 0v11h2V3z"/></svg>224    </div>225  </div>226 227  <!-- App bar -->228  <div class="app-bar">229    <svg class="icon" viewBox="0 0 24 24"><path d="M15.5 4.5 7 12l8.5 7.5" stroke="#E8EAED" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>230    <div class="app-title">My activity</div>231    <div class="app-actions">232      <svg class="icon" viewBox="0 0 24 24"><path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z"/></svg>233      <svg class="icon" viewBox="0 0 24 24"><circle cx="5" cy="12" r="2.2"/><circle cx="12" cy="12" r="2.2"/><circle cx="19" cy="12" r="2.2"/></svg>234    </div>235  </div>236 237  <!-- Tabs -->238  <div class="tabs">239    <div class="tab">Day</div>240    <div class="tab active">Week</div>241    <div class="tab">Month</div>242  </div>243 244  <!-- Week selector header -->245  <div class="week-header">246    <svg class="icon icon-muted" viewBox="0 0 24 24"><path d="M15 6 9 12l6 6" stroke="#A7ADB4" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>247    <div class="center">248      <div class="week-title">July 23 – 29</div>249      <div class="pts">250        <svg class="icon icon-green" viewBox="0 0 24 24">251          <path d="M12 21s-7-4.4-7-10a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 5.6-7 10-7 10z"/>252        </svg>253        4 pts254      </div>255    </div>256    <svg class="icon icon-muted" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#A7ADB4" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>257  </div>258 259  <!-- Chart -->260  <div class="chart">261    <div class="top-label">26</div>262    <div class="mid-line"></div>263    <div class="mid-label">12</div>264    <div class="bars">265      <div style="width:40px"></div>266      <div style="width:40px"></div>267      <div style="width:40px"></div>268      <div style="width:40px"></div>269      <div class="bar small"></div>270      <div style="width:40px"></div>271      <div style="width:40px"></div>272    </div>273  </div>274 275  <!-- X-axis labels -->276  <div class="x-axis">277    <div>Sun</div>278    <div>Mon</div>279    <div>Tue</div>280    <div>Wed</div>281    <div class="today">Fri</div>282    <div>Sat</div>283    <div style="opacity:0;"></div>284  </div>285 286  <!-- Mode buttons -->287  <div class="mode-buttons">288    <div class="btn primary">Heart Points</div>289    <div class="btn">Steps</div>290  </div>291 292  <!-- Description -->293  <div class="desc">294    You score Heart Points for each minute of activity that gets your heart pumping, like a brisk walk. Increase the intensity to earn more.295  </div>296 297  <div class="divider"></div>298 299  <!-- Activity list -->300  <div class="log">301    <div class="day">Sunday, July 23</div>302    <div class="points">0 Heart Points</div>303 304    <div class="day">Monday, July 24</div>305    <div class="points">0 Heart Points</div>306 307    <div class="day">Tuesday, July 25</div>308    <div class="points">0 Heart Points</div>309 310    <div class="day">Wednesday, July 26</div>311    <div class="points">0 Heart Points</div>312 313    <div class="day">Thursday, July 27</div>314    <div class="points">0 Heart Points</div>315  </div>316 317  <div class="gesture"></div>318</div>319</body>320</html>