GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Track your activities - Mock UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    overflow: hidden;10    width: 1080px;11    height: 2400px;12    background: #121212;13    color: #EDEDED;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    right: 0;22    height: 110px;23    padding: 0 40px;24    display: flex;25    align-items: center;26    color: #FFFFFF;27    font-weight: 600;28  }29  .status-left {30    display: flex;31    align-items: center;32    gap: 20px;33    font-size: 44px;34  }35  .status-right {36    margin-left: auto;37    display: flex;38    align-items: center;39    gap: 26px;40  }41  .status-icon svg { width: 44px; height: 44px; fill: #D6D6D6; }42 43  /* Help icon */44  .help-btn {45    position: absolute;46    top: 150px;47    right: 40px;48    width: 70px;49    height: 70px;50    border-radius: 35px;51    border: 2px solid #6A6A6A;52    color: #CFCFCF;53    display: flex;54    align-items: center;55    justify-content: center;56    font-weight: 700;57    font-size: 36px;58  }59 60  /* Content */61  .content {62    position: absolute;63    top: 280px;64    left: 60px;65    right: 60px;66    text-align: center;67  }68  .hero-icon svg { width: 90px; height: 90px; }69  .hero-icon svg path, .hero-icon svg circle { fill: #9FB3FF; stroke: #9FB3FF; }70  h1 {71    margin: 30px 0 26px;72    font-size: 74px;73    letter-spacing: -0.5px;74    color: #FFFFFF;75  }76  .desc {77    margin: 14px auto;78    width: 920px;79    max-width: 920px;80    color: #C2C2C2;81    font-size: 36px;82    line-height: 1.6;83  }84 85  /* Activity icons row */86  .activity-row {87    margin-top: 90px;88    display: flex;89    justify-content: center;90    gap: 180px;91  }92  .activity-row svg { width: 150px; height: 150px; }93  .activity-row svg * { fill: #9FB3FF; stroke: #9FB3FF; }94 95  /* Bottom actions */96  .bottom-actions {97    position: absolute;98    left: 0;99    right: 0;100    bottom: 70px;101    padding: 0 60px;102    display: flex;103    align-items: center;104    justify-content: space-between;105  }106  .link {107    color: #9FB3FF;108    font-size: 40px;109    font-weight: 600;110  }111  .btn-primary {112    background: #8FA9FF;113    color: #0B0B0B;114    font-size: 44px;115    font-weight: 700;116    padding: 32px 60px;117    border-radius: 24px;118    box-shadow: 0 2px 0 rgba(255,255,255,0.12) inset;119  }120 121  /* Page dots */122  .page-dots {123    position: absolute;124    bottom: 200px;125    left: 0;126    right: 0;127    display: flex;128    justify-content: center;129    gap: 28px;130  }131  .dot {132    width: 18px;133    height: 18px;134    border-radius: 9px;135    background: #424242;136  }137  .dot.active { background: #FFFFFF; }138</style>139</head>140<body>141<div id="render-target">142 143  <!-- Status bar -->144  <div class="status-bar">145    <div class="status-left">146      <span>10:05</span>147      <span class="status-icon">148        <!-- small airplane icon -->149        <svg viewBox="0 0 24 24">150          <path d="M10 2l2 2-2 6 7 5v2l-8-3-3 6H4l3-8L2 9v-2l8 2 2-7z"></path>151        </svg>152      </span>153      <span class="status-icon">154        <!-- small play triangle -->155        <svg viewBox="0 0 24 24">156          <path d="M6 4l12 8-12 8V4z"></path>157        </svg>158      </span>159    </div>160    <div class="status-right">161      <span class="status-icon">162        <!-- wifi icon -->163        <svg viewBox="0 0 24 24">164          <path d="M12 18a2 2 0 100 4 2 2 0 000-4z"></path>165          <path d="M2 10c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 10z"></path>166          <path d="M5 13c4-3 10-3 14 0l-2 2c-3-2-7-2-10 0l-2-2z"></path>167        </svg>168      </span>169      <span class="status-icon">170        <!-- battery icon -->171        <svg viewBox="0 0 24 24">172          <path d="M2 7h17v10H2z"></path>173          <path d="M19 10h3v4h-3z"></path>174        </svg>175      </span>176    </div>177  </div>178 179  <!-- Help button -->180  <div class="help-btn">?</div>181 182  <!-- Main content -->183  <div class="content">184    <div class="hero-icon">185      <!-- walking person icon -->186      <svg viewBox="0 0 64 64">187        <circle cx="32" cy="12" r="6"></circle>188        <path d="M27 26l10 0 4 8-6 6-6-4-6 14h-6l8-20 8-4"></path>189        <path d="M40 42l10 10h-6l-8-8"></path>190      </svg>191    </div>192    <h1>Track your activities</h1>193 194    <p class="desc">195      Fit can track walking, running and cycling in the background. This means you'll get metrics like steps,196      distance, and calories for all these activities.197    </p>198    <p class="desc">199      To do this, the app needs permission to recognize your activity. Over time, Fit also uses this data to200      personalize your experience, and better recognize activity.201    </p>202    <p class="desc">203      If you choose to turn this setting off, you can still manually track workouts with Fit.204    </p>205 206    <div class="activity-row">207      <!-- Walk icon -->208      <svg viewBox="0 0 80 80">209        <circle cx="40" cy="14" r="6"></circle>210        <path d="M34 28h12l5 10-8 6-8-5-8 18h-7l9-22 10-7"></path>211      </svg>212 213      <!-- Run icon (more dynamic) -->214      <svg viewBox="0 0 80 80">215        <circle cx="40" cy="12" r="6"></circle>216        <path d="M34 26h14l6 9-8 7-10-4-8 16h-7l9-18 8-4"></path>217        <path d="M46 44l14 8h-7l-10-6"></path>218      </svg>219 220      <!-- Cycling icon -->221      <svg viewBox="0 0 90 80">222        <circle cx="26" cy="56" r="15"></circle>223        <circle cx="70" cy="56" r="15"></circle>224        <circle cx="49" cy="16" r="6"></circle>225        <path d="M49 24l-12 10 8 12h10l8-16h-9l-5-6z"></path>226      </svg>227    </div>228  </div>229 230  <!-- Page dots -->231  <div class="page-dots">232    <div class="dot"></div>233    <div class="dot active"></div>234  </div>235 236  <!-- Bottom actions -->237  <div class="bottom-actions">238    <div class="link">No thanks</div>239    <div class="btn-primary">Turn on</div>240  </div>241 242</div>243</body>244</html>