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 Dancing UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: "Google Sans", Roboto, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #ffffff;20  }21 22  /* Status bar */23  .status-bar {24    position: absolute;25    top: 0;26    left: 0;27    width: 100%;28    height: 120px;29    display: flex;30    align-items: center;31    justify-content: space-between;32    padding: 0 40px;33    color: #3c4043;34    font-size: 38px;35  }36  .status-left {37    display: flex;38    align-items: center;39    gap: 24px;40  }41  .status-right {42    display: flex;43    align-items: center;44    gap: 34px;45  }46  .status-icon svg { display: block; }47 48  /* Toolbar */49  .toolbar {50    position: absolute;51    top: 120px;52    left: 0;53    width: 100%;54    height: 110px;55    display: flex;56    align-items: center;57    justify-content: space-between;58    padding: 0 40px;59    color: #3c4043;60    background: #ffffff;61  }62  .toolbar .back {63    width: 64px;64    height: 64px;65  }66  .toolbar .menu {67    width: 40px;68    height: 80px;69  }70 71  /* Card area */72  .card {73    position: absolute;74    top: 230px;75    left: 0;76    width: 100%;77    height: 1200px;78    background: #E8F0FE;79  }80 81  .card-top {82    display: flex;83    align-items: center;84    justify-content: space-between;85    padding: 60px;86  }87  .brand {88    display: flex;89    align-items: center;90    gap: 24px;91    color: #1a73e8;92  }93  .brand .heart {94    width: 60px;95    height: 60px;96  }97  .brand-title {98    font-size: 52px;99    line-height: 1.1;100    font-weight: 600;101  }102  .brand-subtitle {103    font-size: 46px;104    line-height: 1.1;105    font-weight: 500;106    opacity: 0.95;107  }108  .runner {109    width: 56px;110    height: 56px;111  }112 113  .big-metric {114    position: absolute;115    top: 520px;116    left: 0;117    width: 100%;118    text-align: center;119    color: #1a73e8;120  }121  .big-metric .value {122    font-size: 220px;123    font-weight: 700;124    letter-spacing: -4px;125  }126  .big-metric .label {127    font-size: 44px;128    margin-top: 16px;129    font-weight: 500;130  }131 132  /* Controls section */133  .controls {134    position: absolute;135    top: 1460px;136    left: 0;137    width: 100%;138    padding: 40px 60px 0;139    color: #3c4043;140    background: #ffffff;141  }142  .chips {143    display: flex;144    gap: 28px;145    justify-content: center;146    margin-bottom: 30px;147  }148  .chip {149    display: inline-block;150    padding: 22px 36px;151    border-radius: 32px;152    font-size: 40px;153    border: 2px solid #d5d7da;154    color: #5f6368;155    background: #fff;156  }157  .chip.selected {158    background: #E8F0FE;159    color: #1a73e8;160    border: 2px solid transparent;161    box-shadow: 0 1px 0 rgba(0,0,0,0.04) inset;162  }163 164  .section-title {165    text-align: center;166    font-size: 48px;167    margin: 28px 0 36px;168    font-weight: 500;169    color: #424242;170  }171 172  .swatches {173    display: flex;174    justify-content: center;175    gap: 72px;176    padding-bottom: 20px;177  }178  .swatch {179    width: 120px;180    height: 120px;181    border-radius: 50%;182    position: relative;183  }184  .swatch.selected {185    border: 8px solid #1a73e8;186    box-sizing: border-box;187    background: transparent;188  }189  .swatch.selected .dot {190    position: absolute;191    top: 50%;192    left: 50%;193    width: 86px;194    height: 86px;195    border-radius: 50%;196    transform: translate(-50%, -50%);197    background: #99B6F9;198  }199 200  .swatch.green { background: #93c69b; }201  .swatch.gray { background: #d9dce0; }202  .swatch.yellow { background: #f1cf68; }203  .swatch.red { background: #df887b; }204 205  /* Floating action button */206  .fab {207    position: absolute;208    right: 60px;209    bottom: 240px;210    width: 160px;211    height: 160px;212    border-radius: 50%;213    background: #E8F0FE;214    display: flex;215    align-items: center;216    justify-content: center;217    box-shadow: 0 22px 36px rgba(0,0,0,0.26);218  }219 220  /* Navigation handle */221  .handle {222    position: absolute;223    bottom: 40px;224    left: 50%;225    width: 380px;226    height: 14px;227    transform: translateX(-50%);228    background: #6c6c6c;229    border-radius: 8px;230    opacity: 0.6;231  }232</style>233</head>234<body>235<div id="render-target">236 237  <!-- Status bar -->238  <div class="status-bar">239    <div class="status-left">240      <div>1:17</div>241      <div class="status-icon">242        <!-- Cloud icon -->243        <svg width="50" height="34" viewBox="0 0 50 34">244          <path d="M12 22c-5 0-8-3.5-8-7s3-7 8-7c2.2-4.2 8-6.5 12-3.8 2.3 1.6 3.7 4.2 4.1 6.8 7.1-.4 12.9 3.6 12.9 9 0 5.2-5.2 9-11.8 9H12z"245                fill="#9aa0a6"></path>246        </svg>247      </div>248    </div>249    <div class="status-right">250      <!-- WiFi icon -->251      <svg width="44" height="34" viewBox="0 0 44 34">252        <path d="M4 12c8-6 28-6 36 0" stroke="#5f6368" stroke-width="3" fill="none" stroke-linecap="round"/>253        <path d="M9 17c6-4 20-4 26 0" stroke="#5f6368" stroke-width="3" fill="none" stroke-linecap="round"/>254        <circle cx="22" cy="24" r="3.5" fill="#5f6368"/>255      </svg>256      <!-- Battery icon -->257      <svg width="50" height="34" viewBox="0 0 50 34">258        <rect x="2" y="8" width="38" height="18" rx="3" ry="3" stroke="#5f6368" stroke-width="3" fill="none"/>259        <rect x="6" y="11" width="30" height="12" fill="#5f6368"/>260        <rect x="42" y="12" width="6" height="10" rx="1" fill="#5f6368"/>261      </svg>262    </div>263  </div>264 265  <!-- Toolbar -->266  <div class="toolbar">267    <!-- Back arrow -->268    <svg class="back" viewBox="0 0 48 48">269      <path d="M30 10 L14 24 L30 38" stroke="#3c4043" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>270    </svg>271    <!-- Vertical menu (ellipsis) -->272    <svg class="menu" viewBox="0 0 10 30">273      <circle cx="5" cy="6" r="2" fill="#3c4043"/>274      <circle cx="5" cy="15" r="2" fill="#3c4043"/>275      <circle cx="5" cy="24" r="2" fill="#3c4043"/>276    </svg>277  </div>278 279  <!-- Light blue card -->280  <div class="card">281    <div class="card-top">282      <div class="brand">283        <!-- Heart icon -->284        <svg class="heart" viewBox="0 0 48 48">285          <path d="M24 40 L12 28 C7 23 7 16 12 12 C16 9 21 10 24 14 C27 10 32 9 36 12 C41 16 41 23 36 28 L24 40 Z"286                fill="#1a73e8"/>287        </svg>288        <div>289          <div class="brand-title">Google Fit</div>290          <div class="brand-subtitle">Dancing</div>291        </div>292      </div>293      <!-- Runner icon -->294      <svg class="runner" viewBox="0 0 56 56">295        <circle cx="40" cy="10" r="5" fill="#1a73e8"/>296        <path d="M26 20 L40 16 L34 28 L44 38" stroke="#1a73e8" stroke-width="4" fill="none" stroke-linecap="round"/>297        <path d="M28 24 L22 36 L12 32" stroke="#1a73e8" stroke-width="4" fill="none" stroke-linecap="round"/>298        <path d="M22 36 L30 46" stroke="#1a73e8" stroke-width="4" fill="none" stroke-linecap="round"/>299      </svg>300    </div>301 302    <div class="big-metric">303      <div class="value">1h</div>304      <div class="label">Active time</div>305    </div>306  </div>307 308  <!-- Controls -->309  <div class="controls">310    <div class="chips">311      <div class="chip selected">Metrics</div>312      <div class="chip">Photo</div>313    </div>314 315    <div class="section-title">Highlight color</div>316 317    <div class="swatches">318      <div class="swatch selected">319        <div class="dot"></div>320      </div>321      <div class="swatch green"></div>322      <div class="swatch gray"></div>323      <div class="swatch yellow"></div>324      <div class="swatch red"></div>325    </div>326  </div>327 328  <!-- Floating action button with check -->329  <div class="fab">330    <svg width="72" height="72" viewBox="0 0 72 72">331      <path d="M18 38 L30 50 L54 26" stroke="#1a73e8" stroke-width="8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>332    </svg>333  </div>334 335  <!-- Navigation handle -->336  <div class="handle"></div>337 338</div>339</body>340</html>