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; height:2400px; position:relative; overflow:hidden;11    background:#202124; color:#E8EAED; font-family: Roboto, Arial, sans-serif;12  }13 14  /* Top system/status bar */15  .status-bar {16    height:110px; padding:0 40px; display:flex; align-items:center; justify-content:space-between;17    font-size:40px; color:#e8eaed; opacity:0.9;18  }19  .status-right { display:flex; align-items:center; gap:24px; }20  .ico { width:48px; height:48px; display:inline-block; }21  .ico svg { width:100%; height:100%; stroke:#E8EAED; fill:none; stroke-width:4; }22 23  /* Toolbar */24  .toolbar {25    height:140px; padding:0 30px; display:flex; align-items:center; justify-content:space-between;26  }27  .toolbar-left { display:flex; align-items:center; gap:24px; }28  .title { font-size:58px; font-weight:500; letter-spacing:0.3px; }29  .toolbar-right { display:flex; align-items:center; gap:28px; }30  .ico-fill svg { fill:#E8EAED; stroke:none; }31 32  /* Tabs */33  .tabs { height:120px; display:flex; align-items:flex-end; gap:90px; padding:0 36px; }34  .tab { color:#9AA0A6; font-size:40px; position:relative; padding-bottom:26px; }35  .tab.active { color:#E8EAED; }36  .tab.active::after {37    content:""; position:absolute; left:0; bottom:8px; width:80px; height:10px;38    background:#E8EAED; border-radius:8px;39  }40 41  /* Divider */42  .divider { height:1px; background:#2b2f33; margin:0 0 10px 0; }43 44  /* Day summary card */45  .day-card {46    margin-top:10px;47    border-top:1px solid #2b2f33;48    border-bottom:1px solid #2b2f33;49    padding:28px 30px 34px 30px;50  }51  .day-head { display:flex; align-items:center; justify-content:space-between; }52  .day-title { font-size:50px; font-weight:500; }53  .pts { display:flex; align-items:center; gap:16px; color:#8bdac6; font-size:36px; }54  .chevrons { display:flex; align-items:center; gap:18px; }55  .chev svg { stroke:#9AA0A6; }56 57  /* Chart */58  .chart {59    margin-top:28px;60    background:61      linear-gradient(to bottom, #2b2f33 1px, transparent 1px) 0 25%/100% 50%,62      linear-gradient(to bottom, #2b2f33 1px, transparent 1px) 0 75%/100% 50%;63    border-bottom:1px solid #2b2f33;64    border-top:1px solid #2b2f33;65    height:420px; position:relative; padding-bottom:60px;66  }67  .bars { position:absolute; bottom:60px; left:3%; right:3%; height:280px; }68  .bar { position:absolute; bottom:0; width:22px; background:#6be7cf; border-radius:6px 6px 0 0; }69  .bar.dark { background:#5a6368; }70  .bar.b1 { left:36%; height:80px; background:#6be7cf; }71  .bar.b2 { left:38.5%; height:200px; background:#5a6368; }72  .bar.b3 { left:41%; height:220px; background:#5a6368; }73  .bar.b4 { left:43.5%; height:60px; background:#6be7cf; }74 75  .axis {76    position:absolute; bottom:10px; left:2%; right:2%; display:flex; justify-content:space-between;77    color:#9AA0A6; font-size:30px;78  }79  .y-labels {80    position:absolute; right:10px; top:8px; color:#9AA0A6; font-size:28px;81  }82 83  /* Toggle buttons */84  .toggle-row { margin-top:36px; display:flex; gap:24px; padding:0 8px; }85  .pill {86    padding:24px 36px; border-radius:26px; border:1px solid #5f6368; color:#E8EAED; font-size:40px;87  }88  .pill.active { background:#3a4048; border-color:#3a4048; }89 90  .desc { margin-top:34px; color:#B0B4B9; font-size:38px; line-height:1.5; padding-right:40px; }91 92  /* Activity card */93  .activity {94    margin-top:36px; border-top:1px solid #2b2f33; padding:34px 30px;95  }96  .act-time { color:#9AA0A6; font-size:32px; display:flex; align-items:center; gap:14px; }97  .act-title { margin-top:14px; font-size:56px; font-weight:500; }98  .act-sub { margin-top:10px; color:#B0B4B9; font-size:36px; display:flex; align-items:center; gap:12px; }99  .act-green { margin-top:12px; color:#63E6BE; font-size:36px; }100  .link { margin-top:40px; color:#8ab4f8; font-size:38px; }101 102  /* Bottom gesture bar */103  .gesture {104    position:absolute; left:50%; transform:translateX(-50%);105    bottom:24px; width:280px; height:12px; background:#E8EAED; opacity:0.85; border-radius:12px;106  }107</style>108</head>109<body>110<div id="render-target">111 112  <!-- Status bar -->113  <div class="status-bar">114    <div>9:48</div>115    <div class="status-right">116      <span class="ico ico-fill">117        <svg viewBox="0 0 24 24"><path d="M3 18h18L12 6 3 18z"></path></svg>118      </span>119      <span class="ico">120        <svg viewBox="0 0 24 24"><path d="M2 18h4l4-6 4 6h4L10 6 2 18z"></path></svg>121      </span>122      <span class="ico">123        <svg viewBox="0 0 24 24"><rect x="3" y="12" width="14" height="8" rx="2"></rect><path d="M21 14v4"></path></svg>124      </span>125      <span class="ico">126        <svg viewBox="0 0 24 24"><circle cx="18" cy="6" r="3"></circle><path d="M2 20a8 8 0 0 1 14-5"></path></svg>127      </span>128    </div>129  </div>130 131  <!-- Toolbar -->132  <div class="toolbar">133    <div class="toolbar-left">134      <span class="ico">135        <svg viewBox="0 0 72 72"><path d="M44 16 24 36 44 56" stroke-linecap="round" stroke-linejoin="round"></path></svg>136      </span>137      <div class="title">My activity</div>138    </div>139    <div class="toolbar-right">140      <span class="ico">141        <svg viewBox="0 0 72 72"><path d="M36 16v40M16 36h40"></path></svg>142      </span>143      <span class="ico ico-fill">144        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"></circle><circle cx="12" cy="12" r="2"></circle><circle cx="12" cy="19" r="2"></circle></svg>145      </span>146    </div>147  </div>148 149  <!-- Tabs -->150  <div class="tabs">151    <div class="tab active">Day</div>152    <div class="tab">Week</div>153    <div class="tab">Month</div>154  </div>155  <div class="divider"></div>156 157  <!-- Day card -->158  <div class="day-card">159    <div class="day-head">160      <div class="chevrons">161        <span class="ico chev">162          <svg viewBox="0 0 72 72"><path d="M42 16 26 36 42 56"></path></svg>163        </span>164        <div class="day-title">Monday, July 31</div>165      </div>166      <div style="display:flex; align-items:center; gap:24px;">167        <div class="pts">168          <svg width="48" height="48" viewBox="0 0 72 72" style="stroke:#7be7cf; fill:none; stroke-width:5;">169            <path d="M36 56C28 49 16 40 16 28a10 10 0 0 1 18-6 10 10 0 0 1 18 6c0 12-12 21-16 28z" />170          </svg>171          <span>3 pts</span>172        </div>173        <span class="ico chev">174          <svg viewBox="0 0 72 72"><path d="M30 16 46 36 30 56"></path></svg>175        </span>176      </div>177    </div>178 179    <div class="chart">180      <div class="bars">181        <div class="bar b1"></div>182        <div class="bar b2 dark"></div>183        <div class="bar b3 dark"></div>184        <div class="bar b4"></div>185      </div>186      <div class="y-labels">30</div>187      <div class="y-labels" style="top:50%;">15</div>188      <div class="axis">189        <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>190      </div>191    </div>192 193    <div class="toggle-row">194      <div class="pill active">Heart Points</div>195      <div class="pill">Steps</div>196    </div>197 198    <div class="desc">199      You score Heart Points for each minute of activity that gets your heart pumping, like a brisk walk. Increase the intensity to earn more.200    </div>201  </div>202 203  <!-- Activity list -->204  <div class="activity">205    <div class="act-time">206      <svg width="36" height="36" viewBox="0 0 24 24" style="stroke:#9AA0A6; fill:none; stroke-width:2;">207        <circle cx="9" cy="5" r="2"></circle>208        <path d="M5 22l3-6 3 3 2-4 3 2" stroke-linecap="round" stroke-linejoin="round"></path>209      </svg>210      <span>9:15 AM</span>211    </div>212    <div class="act-title">Morning walk</div>213    <div class="act-sub">214      <span>30m 00s</span>215      <span>•</span>216      <svg width="36" height="36" viewBox="0 0 72 72" style="stroke:#7be7cf; fill:none; stroke-width:5;">217        <path d="M36 56C28 49 16 40 16 28a10 10 0 0 1 18-6 10 10 0 0 1 18 6c0 12-12 21-16 28z" />218      </svg>219      <span>2 pts</span>220    </div>221    <div class="act-green">Extra points earned</div>222  </div>223 224  <div class="link" style="padding:0 30px;">See source data</div>225 226  <div class="gesture"></div>227</div>228</body>229</html>