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>Google Fit - Metrics</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: #232527;15    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;16    color: #EDEFF2;17  }18 19  /* Top app bar */20  .appbar {21    position: absolute;22    top: 0; left: 0; right: 0;23    height: 230px;24    background: #2B2D2F;25  }26  .appbar .back {27    position: absolute;28    left: 40px; top: 150px;29    width: 64px; height: 64px;30    color: #EDEFF2;31  }32  .appbar .menu {33    position: absolute;34    right: 40px; top: 140px;35    width: 18px; height: 80px;36    display: flex; flex-direction: column; justify-content: space-between; align-items: center;37  }38  .appbar .dot {39    width: 12px; height: 12px; border-radius: 50%; background: #EDEFF2; opacity: 0.9;40  }41 42  /* Light section */43  .light-card {44    position: absolute;45    top: 230px; left: 0; right: 0;46    height: 1260px;47    background: #DCE6F6;48    color: #2D5CC8;49  }50  .branding {51    position: absolute;52    top: 70px; left: 70px;53    display: flex; align-items: center; gap: 28px;54  }55  .branding .texts {56    line-height: 1.2;57  }58  .brand-title {59    font-weight: 700; font-size: 44px;60  }61  .brand-sub {62    font-size: 38px; opacity: 0.85;63  }64  .walk-icon {65    position: absolute;66    right: 70px; top: 70px; width: 42px; height: 42px; color: #2D5CC8;67  }68 69  .metrics {70    position: absolute;71    left: 0; right: 0;72    top: 360px;73    text-align: center;74  }75  .main-metric {76    font-size: 180px; font-weight: 800; letter-spacing: 2px; margin: 0;77    color: #2D5CC8;78  }79  .metric-label {80    margin: 14px 0 40px 0; font-size: 44px; color: #6B7C91;81  }82  .second-metric {83    font-size: 160px; font-weight: 800; margin: 0; color: #2D5CC8;84  }85  .unit-label {86    margin-top: 16px; font-size: 40px; color: #6B7C91;87  }88 89  /* Controls section */90  .controls {91    position: absolute;92    left: 0; right: 0; top: 1490px; bottom: 0;93    padding: 60px 70px 140px 70px;94  }95  .tabs {96    display: flex; gap: 26px; margin-bottom: 40px;97  }98  .tab {99    padding: 26px 46px;100    border-radius: 26px;101    font-size: 44px;102    border: 2px solid #444A51;103    color: #BFC6CE;104    background: transparent;105  }106  .tab.active {107    background: #3B495D; border-color: #3B495D; color: #E9EEF5; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.05);108  }109  .section-title {110    font-size: 48px; color: #D3D7DC; text-align: center; margin: 40px 0 40px;111  }112  .color-row {113    display: flex; align-items: center; gap: 46px;114    padding: 10px 0; margin-left: 10px;115  }116  .swatch {117    width: 140px; height: 140px; border-radius: 50%;118    background: #9CB8FF;119  }120  .swatch.green { background: #7CC88D; }121  .swatch.gray  { background: #D9DCDF; }122  .swatch.yellow{ background: #F5D35F; }123  .swatch.red   { background: #EA867B; }124  .swatch.selected {125    position: relative; background: #8FB3FF;126  }127  .swatch.selected::before {128    content: ""; position: absolute; inset: -14px;129    border-radius: 50%; border: 6px solid #9EB6F3;130  }131  .swatch.selected::after {132    content: ""; position: absolute; inset: -28px;133    border-radius: 50%; border: 6px solid #7EA1EC; opacity: 0.8;134  }135 136  /* FAB */137  .fab {138    position: absolute; right: 70px; bottom: 220px;139    width: 160px; height: 160px; border-radius: 50%;140    background: #3A4658; box-shadow: 0 18px 28px rgba(0,0,0,0.45);141    display: flex; align-items: center; justify-content: center;142  }143  .fab svg { width: 72px; height: 72px; color: #DCE6F6; }144 145  /* Bottom gesture handle */146  .handle {147    position: absolute; left: 50%; transform: translateX(-50%);148    bottom: 46px; width: 360px; height: 12px; border-radius: 8px;149    background: #D9D9D9; opacity: 0.85;150  }151</style>152</head>153<body>154<div id="render-target">155 156  <!-- Top app bar -->157  <div class="appbar">158    <svg class="back" viewBox="0 0 24 24">159      <path d="M15 18L9 12l6-6" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>160    </svg>161    <div class="menu">162      <div class="dot"></div>163      <div class="dot"></div>164      <div class="dot"></div>165    </div>166  </div>167 168  <!-- Light content card -->169  <div class="light-card">170    <div class="branding">171      <svg width="60" height="60" viewBox="0 0 24 24" style="color:#2D5CC8">172        <path fill="currentColor" d="M12 5.5a3.5 3.5 0 0 1 6 2.4c0 2.2-1.9 3.9-4.7 6.6L12 15l-1.3-1.3C7.9 11.9 6 10.2 6 7.9A3.5 3.5 0 0 1 12 5.5z"/>173      </svg>174      <div class="texts">175        <div class="brand-title">Google Fit</div>176        <div class="brand-sub">Lunch walk</div>177      </div>178    </div>179 180    <svg class="walk-icon" viewBox="0 0 24 24">181      <circle cx="12" cy="4" r="2" fill="currentColor"/>182      <path d="M9 21l2-6 2 2 2 4M8 12l4-3 3 2-2 3M6 18l3-8" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>183    </svg>184 185    <div class="metrics">186      <h1 class="main-metric">23h 11m</h1>187      <div class="metric-label">Active time</div>188      <h2 class="second-metric">5.61</h2>189      <div class="unit-label">miles</div>190    </div>191  </div>192 193  <!-- Controls section -->194  <div class="controls">195    <div class="tabs">196      <div class="tab active">Metrics</div>197      <div class="tab">Photo</div>198    </div>199    <div class="section-title">Highlight color</div>200    <div class="color-row">201      <div class="swatch selected"></div>202      <div class="swatch green"></div>203      <div class="swatch gray"></div>204      <div class="swatch yellow"></div>205      <div class=