GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Google Fit - Lunch walk</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #1e1e1e;14    font-family: Arial, Helvetica, sans-serif;15    color: #ffffff;16  }17 18  /* Top bar */19  .topbar {20    position: absolute;21    top: 0; left: 0;22    width: 100%;23    height: 180px;24    background: #2b2b2b;25  }26  .topbar .nav {27    position: absolute;28    top: 68px;29    left: 36px;30    width: 60px;31    height: 60px;32    fill: #cfcfcf;33  }34  .topbar .menu {35    position: absolute;36    top: 64px;37    right: 36px;38    width: 60px;39    height: 60px;40    fill: #cfcfcf;41  }42 43  /* Map section (image placeholder) */44  .map {45    position: absolute;46    top: 180px; left: 0;47    width: 1080px; height: 1180px;48    background: #E0E0E0;49    border-top: 1px solid #BDBDBD;50    border-bottom: 1px solid #BDBDBD;51    color: #757575;52  }53  .map .placeholder-label {54    position: absolute;55    top: 20px; left: 24px;56    padding: 6px 10px;57    font-size: 22px;58    background: rgba(0,0,0,0.06);59    border: 1px solid #BDBDBD;60    border-radius: 8px;61  }62 63  /* Map overlays */64  .brand {65    position: absolute;66    top: 80px; left: 72px;67    display: flex; align-items: center;68    color: #1a73e8;69  }70  .brand svg { width: 44px; height: 44px; margin-right: 16px; }71  .brand .title {72    font-size: 38px; font-weight: 600; line-height: 1.1;73  }74  .brand .subtitle {75    font-size: 28px; font-weight: 500; margin-top: 4px;76  }77 78  .walker {79    position: absolute;80    top: 90px; right: 64px;81    width: 38px; height: 38px;82  }83  .route {84    position: absolute;85    top: 540px; left: 520px;86    width: 40px; height: 120px;87  }88  .time {89    position: absolute;90    left: 0; right: 0;91    bottom: 160px;92    text-align: center;93  }94  .time .value {95    font-size: 64px; font-weight: 800; color: #1a73e8;96  }97  .time .label {98    margin-top: 10px; font-size: 28px; color: #1a73e8;99  }100 101  /* Controls section */102  .controls {103    position: absolute;104    top: 1360px; left: 0;105    width: 100%; height: 1040px;106    background: #212121;107    color: #eaeaea;108  }109  .tabs {110    display: flex;111    gap: 24px;112    position: absolute;113    top: 80px; left: 80px;114  }115  .tab {116    padding: 22px 40px;117    border-radius: 20px;118    font-size: 40px;119    border: 2px solid #3c3c3c;120    color: #9fa6ad;121  }122  .tab.active {123    background: #3c4a5e;124    border-color: transparent;125    color: #ffffff;126  }127 128  .hl-label {129    position: absolute;130    top: 220px; left: 80px;131    font-size: 36px; color: #e0e0e0;132  }133  .colors {134    position: absolute;135    top: 300px; left: 80px;136    display: flex; gap: 60px;137  }138  .dot {139    width: 120px; height: 120px;140    border-radius: 60px;141    background: #9bb9ff; /* default for first */142    box-shadow: inset 0 0 0 0 rgba(0,0,0,0.2);143  }144  .dot.green  { background: #79c78c; }145  .dot.gray   { background: #d7d9dc; }146  .dot.yellow { background: #f5d259; }147  .dot.red    { background: #eb8b82; }148  .dot.selected {149    box-shadow:150      0 0 0 4px #6f8fe8,151      0 0 0 10px rgba(111,143,232,0.5);152    background: #8eb1ff;153  }154 155  /* Floating action button */156  .fab {157    position: absolute;158    right: 60px; bottom: 160px;159    width: 160px; height: 160px;160    border-radius: 80px;161    background: #36485c;162    box-shadow: 0 14px 22px rgba(0,0,0,0.5);163    display: flex; align-items: center; justify-content: center;164  }165  .fab svg { width: 64px; height: 64px; stroke: #cfe1f9; stroke-width: 10; fill: none; }166 167  /* Bottom gesture pill */168  .gesture {169    position: absolute;170    bottom: 24px; left: 50%;171    transform: translateX(-50%);172    width: 420px; height: 14px;173    background: #d6d6d6; border-radius: 8px;174  }175</style>176</head>177<body>178<div id="render-target">179 180  <!-- Top bar -->181  <div class="topbar">182    <!-- Back arrow -->183    <svg class="nav" viewBox="0 0 24 24">184      <path d="M15.5 4 L7 12 L15.5 20" stroke="#cfcfcf" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>185    </svg>186    <!-- Menu (vertical dots) -->187    <svg class="menu" viewBox="0 0 24 24">188      <circle cx="12" cy="5" r="2.2"/>189      <circle cx="12" cy="12" r="2.2"/>190      <circle cx="12" cy="19" r="2.2"/>191    </svg>192  </div>193 194  <!-- Map section (image placeholder) -->195  <div class="map">196    <div class="placeholder-label">[IMG: Map view]</div>197 198    <!-- Brand: heart icon + text -->199    <div class="brand">200      <svg viewBox="0 0 24 24">201        <path d="M12 20 C10 18 6 15.5 4.8 13.2 C3.6 11 4.4 8.8 6.4 8.1 C7.7 7.7 9.2 8.2 10 9.2 C10.6 8.3 11.6 7.7 12.7 7.6 C15 7.3 16.8 9.1 16.7 11.2 C16.6 13.6 14.4 15.6 12 17.9 Z" fill="#1a73e8"/>202      </svg>203      <div>204        <div class="title">Google Fit</div>205        <div class="subtitle">Lunch walk</div>206      </div>207    </div>208 209    <!-- Walker icon -->210    <svg class="walker" viewBox="0 0 24 24">211      <circle cx="12" cy="4.5" r="2.5" fill="#1a73e8"/>212      <path d="M12 7.5 L12 11 M12 11 L9 15 M12 11 L15 15 M9 15 L7 19 M15 15 L17 19" stroke="#1a73e8" stroke-width="1.8" fill="none" stroke-linecap="round"/>213    </svg>214 215    <!-- Route stroke -->216    <svg class="route" viewBox="0 0 24 24">217      <path d="M13 3 L9 9 L14 15" stroke="#1a73e8" stroke-width="3.5" fill="none" stroke-linecap="round"/>218    </svg>219 220    <!-- Time readout -->221    <div class="time">222      <div class="value">2m 51s</div>223      <div class="label">Active time</div>224    </div>225  </div>226 227  <!-- Controls section -->228  <div class="controls">229    <div class="tabs">230      <div class="tab active">Map</div>231      <div class="tab">Metrics</div>232      <div class="tab">Photo</div>233    </div>234 235    <div class="hl-label">Highlight color</div>236    <div class="colors">237      <div class="dot selected"></div>238      <div class="dot green"></div>239      <div class="dot gray"></div>240      <div class="dot yellow"></div>241      <div class="dot red"></div>242    </div>243 244    <!-- Floating confirm button -->245    <div class="fab">246      <svg viewBox="0 0 24 24">247        <path d="M6 12 L10.5 16.5 L18 9" stroke-linecap="round" stroke-linejoin="round"/>248      </svg>249    </div>250  </div>251 252  <!-- Bottom gesture bar -->253  <div class="gesture"></div>254</div>255</body>256</html>