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>Help - Track your fitness activity</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: #EDEDED;16    font-family: Roboto, Arial, Helvetica, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 100%;25    height: 96px;26    padding: 0 40px;27    box-sizing: border-box;28    display: flex;29    align-items: center;30    justify-content: space-between;31    color: #FFFFFF;32    font-size: 36px;33  }34  .status-icons {35    display: flex;36    align-items: center;37    gap: 28px;38  }39  .app-bar {40    position: absolute;41    top: 96px;42    left: 0;43    width: 100%;44    height: 120px;45    display: flex;46    align-items: center;47    justify-content: space-between;48    padding: 0 40px;49    box-sizing: border-box;50    color: #EDEDED;51  }52  .app-left {53    display: flex;54    align-items: center;55    gap: 28px;56    font-size: 44px;57    font-weight: 500;58  }59  .app-right {60    display: flex;61    align-items: center;62    gap: 36px;63  }64  .icon-btn svg { stroke: #EDEDED; }65 66  /* Warning banner */67  .banner {68    position: absolute;69    top: 216px;70    left: 0;71    width: 100%;72    background: #3c2f1e;73    color: #EDEDED;74    padding: 36px 40px;75    box-sizing: border-box;76    font-size: 34px;77    line-height: 1.5;78  }79 80  /* Content */81  .content {82    position: absolute;83    top: 380px;84    left: 0;85    width: 100%;86    padding: 0 40px;87    box-sizing: border-box;88  }89  h1 {90    margin: 40px 0 28px 0;91    font-size: 72px;92    font-weight: 600;93    line-height: 1.12;94    color: #F1F3F4;95  }96  p {97    margin: 0 0 36px 0;98    font-size: 36px;99    line-height: 1.6;100    color: #CFCFCF;101  }102  .link { color: #8AB4F8; text-decoration: none; }103 104  /* Tabs */105  .tabs {106    display: flex;107    gap: 40px;108    margin-top: 26px;109    align-items: flex-end;110  }111  .tab {112    font-size: 40px;113    color: #9AA0A6;114    padding-bottom: 16px;115  }116  .tab.active {117    color: #8AB4F8;118    position: relative;119  }120  .tab.active::after {121    content: "";122    position: absolute;123    left: 0;124    bottom: 0;125    width: 180px;126    height: 6px;127    background: #8AB4F8;128    border-radius: 3px;129  }130  .divider {131    width: 100%;132    height: 2px;133    background: #2A2A2A;134    margin: 10px 0 40px 0;135  }136 137  h2 {138    font-size: 56px;139    color: #F1F3F4;140    margin: 20px 0 24px 0;141    font-weight: 600;142  }143  ul {144    margin: 0;145    padding-left: 40px;146    list-style-type: disc;147    color: #E0E0E0;148  }149  li {150    font-size: 36px;151    line-height: 1.6;152    margin-bottom: 16px;153  }154  .note { font-weight: 600; color: #EDEDED; }155 156  /* Home indicator */157  .home-indicator {158    position: absolute;159    bottom: 40px;160    left: 50%;161    transform: translateX(-50%);162    width: 300px;163    height: 12px;164    background: #EDEDED;165    border-radius: 8px;166    opacity: 0.8;167  }168</style>169</head>170<body>171<div id="render-target">172 173  <!-- Status bar -->174  <div class="status-bar">175    <div>11:13</div>176    <div class="status-icons">177      <!-- simple play-triangle icon to mimic Google Play logo -->178      <svg width="34" height="34" viewBox="0 0 48 48" fill="none">179        <path d="M12 10 L36 24 L12 38 Z" fill="#EDEDED"></path>180      </svg>181      <!-- Wi-Fi -->182      <svg width="40" height="40" viewBox="0 0 48 48" fill="none">183        <path d="M8 18c8-8 24-8 32 0" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"></path>184        <path d="M14 24c6-6 14-6 20 0" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"></path>185        <path d="M20 30c4-4 8-4 12 0" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"></path>186        <circle cx="24" cy="36" r="3" fill="#FFFFFF"></circle>187      </svg>188      <!-- Battery -->189      <svg width="44" height="44" viewBox="0 0 64 48" fill="none">190        <rect x="6" y="10" width="44" height="28" rx="4" stroke="#FFFFFF" stroke-width="3"></rect>191        <rect x="10" y="14" width="30" height="20" rx="2" fill="#FFFFFF"></rect>192        <rect x="52" y="18" width="6" height="12" rx="2" fill="#FFFFFF"></rect>193      </svg>194    </div>195  </div>196 197  <!-- App bar -->198  <div class="app-bar">199    <div class="app-left">200      <div class="icon-btn">201        <svg width="60" height="60" viewBox="0 0 48 48" fill="none">202          <path d="M30 10 L14 24 L30 38" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />203        </svg>204      </div>205      <div>Help</div>206    </div>207    <div class="app-right">208      <div class="icon-btn">209        <!-- Close X -->210        <svg width="56" height="56" viewBox="0 0 48 48" fill="none">211          <path d="M12 12 L36 36 M36 12 L12 36" stroke-width="4" stroke-linecap="round" />212        </svg>213      </div>214      <div class="icon-btn">215        <!-- More vertical -->216        <svg width="44" height="44" viewBox="0 0 48 48" fill="#EDEDED">217          <circle cx="24" cy="12" r="3"></circle>218          <circle cx="24" cy="24" r="3"></circle>219          <circle cx="24" cy="36" r="3"></circle>220        </svg>221      </div>222    </div>223  </div>224 225  <!-- Banner -->226  <div class="banner">227    Please don’t include any personal or sensitive health information, such as step, calorie, heart-rate, sleep, or exercise data, or heart health information when asking questions in the Community.228  </div>229 230  <!-- Content -->231  <div class="content">232    <h1>Track your fitness activity</h1>233    <p>234      You can track your walks, runs, bike rides, and more on Google Fit. Check how many steps you took and see how long you rode your bike, played soccer, or went skiing.235    </p>236    <p>237      You can see your workout history on all devices where you use Fit. If something isn’t accurate, <a class="link" href="#">edit the activity</a>.238    </p>239 240    <div class="tabs">241      <div class="tab active">Android</div>242      <div class="tab">iPhone &amp; iPad</div>243    </div>244    <div class="divider"></div>245 246    <h2>What you can measure</h2>247    <ul>248      <li>Time</li>249      <li>Steps</li>250      <li>Calories</li>251      <li>Distance. <span class="note">Note:</span> Distance isn't tracked for stationary biking.</li>252      <li>Weight. <span class="note">Note:</span> Enter your weight manually to track it.</li>253      <li>Elevation. <span class="note">Note:</span> Elevation is only tracked for certain outdoor activities.</li>254    </ul>255 256    <p style="margin-top: 40px;">257      To see the distance you've gone or how many calories you've burned, fill out your height, weight,258    </p>259  </div>260 261  <div class="home-indicator"></div>262</div>263</body>264</html>