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>Walk - Map</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #083242; /* app header color showing at the very top edges */15    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;16    color: #111;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 110px;26    background: #07303F;27    color: #E7F4F7;28    display: flex;29    align-items: center;30    justify-content: space-between;31    padding: 0 32px;32    box-sizing: border-box;33    font-weight: 600;34  }35  .status-left, .status-right {36    display: flex; align-items: center; gap: 18px;37  }38  .status-time { font-size: 38px; letter-spacing: 0.5px; }39  .status-icon svg { width: 34px; height: 34px; fill: #E7F4F7; }40 41  /* App bar */42  .app-bar {43    position: absolute;44    top: 110px;45    left: 0;46    width: 1080px;47    height: 170px;48    background: #083242;49    color: #fff;50    display: flex;51    align-items: center;52    padding: 0 28px;53    box-sizing: border-box;54  }55  .app-bar .title {56    font-size: 58px;57    margin-left: 18px;58    font-weight: 600;59  }60  .app-actions {61    margin-left: auto;62    display: flex;63    gap: 36px;64    align-items: center;65  }66  .icon-btn svg { width: 48px; height: 48px; fill: #CFE5EB; }67 68  /* Tabs */69  .tabs {70    position: absolute;71    top: 280px;72    left: 0;73    width: 1080px;74    height: 100px;75    background: #083242;76    display: flex;77    align-items: flex-end;78    box-sizing: border-box;79    padding: 0 28px 0 28px;80    gap: 48px;81  }82  .tab {83    color: #CFE5EB;84    font-size: 38px;85    padding: 28px 0 26px;86    position: relative;87    letter-spacing: 1px;88  }89  .tab.active {90    color: #E9FFFF;91  }92  .tab.active::after {93    content: "";94    position: absolute;95    left: 0;96    bottom: 8px;97    width: 110px;98    height: 8px;99    background: #57D9C2;100    border-radius: 4px;101  }102 103  /* Map area */104  .map-area {105    position: absolute;106    top: 380px;107    left: 0;108    width: 1080px;109    bottom: 0;110    background: #EFF2F4;111  }112 113  /* Segmented control floating */114  .segmented {115    position: absolute;116    top: 55px;117    left: 70px;118    display: flex;119    background: #FFFFFF;120    border-radius: 60px;121    box-shadow: 0 12px 18px rgba(0,0,0,0.18);122    overflow: hidden;123  }124  .seg {125    padding: 28px 44px;126    font-size: 36px;127    color: #1A2B33;128    letter-spacing: 0.6px;129    white-space: nowrap;130  }131  .seg.active {132    background: #0A3A4A;133    color: #fff;134    border-radius: 60px;135    box-shadow: 0 6px 8px rgba(0,0,0,0.18);136    margin: 14px;137    padding: 18px 44px;138  }139 140  /* Route SVG */141  .route-svg {142    position: absolute;143    left: 80px;144    top: 520px;145    width: 900px;146    height: 900px;147  }148 149  /* Distance bubble marker */150  .distance-bubble {151    position: absolute;152    left: 160px;153    top: 1040px;154    width: 240px;155    height: 240px;156    background: #083A4A;157    border-radius: 50%;158    color: #fff;159    display: flex;160    align-items: center;161    justify-content: center;162    flex-direction: column;163    box-shadow: 0 16px 24px rgba(0,0,0,0.2);164    font-weight: 700;165  }166  .distance-bubble::after {167    content: "";168    position: absolute;169    bottom: -18px;170    left: 46%;171    width: 0; height: 0;172    border-left: 24px solid transparent;173    border-right: 24px solid transparent;174    border-top: 30px solid #083A4A;175  }176  .distance-bubble .num { font-size: 58px; line-height: 1; }177  .distance-bubble .unit { font-size: 48px; margin-top: 6px; }178 179  /* Bottom stat card */180  .bottom-card {181    position: absolute;182    left: 30px;183    right: 30px;184    bottom: 180px;185    height: 180px;186    background: #FFFFFF;187    border-radius: 28px;188    box-shadow: 0 12px 20px rgba(0,0,0,0.2);189    display: flex;190    align-items: center;191    padding: 0 34px;192    gap: 40px;193  }194  .stat {195    display: flex;196    align-items: center;197    gap: 18px;198    font-size: 38px;199    color: #27323A;200    white-space: nowrap;201  }202  .stat svg { width: 44px; height: 44px; fill: #27323A; }203  .divider {204    width: 2px;205    height: 60px;206    background: #E6E6E6;207  }208 209  /* Google label and home indicator */210  .google {211    position: absolute;212    left: 34px;213    bottom: 120px;214    font-size: 44px;215    display: flex;216    gap: 2px;217    font-weight: 700;218  }219  .g-b { color: #1A73E8; }220  .g-r { color: #EA4335; }221  .g-y { color: #FBBC05; }222  .g-g { color: #34A853; }223 224  .home-indicator {225    position: absolute;226    left: 50%;227    transform: translateX(-50%);228    bottom: 28px;229    width: 240px;230    height: 12px;231    background: #000;232    opacity: 0.8;233    border-radius: 12px;234  }235</style>236</head>237<body>238<div id="render-target">239 240  <!-- Status bar -->241  <div class="status-bar">242    <div class="status-left">243      <div class="status-time">7:13</div>244      <div class="status-icon" title="weather">245        <svg viewBox="0 0 24 24">246          <path d="M6 15a5 5 0 0 1 2-9 4 4 0 0 1 7 2 4 4 0 0 1 1 .2A3.5 3.5 0 1 1 17 15H6z"/>247        </svg>248      </div>249    </div>250    <div class="status-right">251      <div class="status-icon" title="location">252        <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7zm0 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>253      </div>254      <div class="status-icon" title="wifi">255        <svg viewBox="0 0 24 24"><path d="M2 9a16 16 0 0 1 20 0l-2 2a13 13 0 0 0-16 0L2 9zm4 4a10 10 0 0 1 12 0l-2 2a7 7 0 0 0-8 0l-2-2zm4 4a4 4 0 0 1 4 0l-2 2-2-2z"/></svg>256      </div>257      <div class="status-icon" title="battery">258        <svg viewBox="0 0 24 24"><path d="M2 8h17a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H2V8zm20 3h2v2h-2v-2z"/></svg>259      </div>260    </div>261  </div>262 263  <!-- App bar -->264  <div class="app-bar">265    <div class="icon-btn" title="Back">266      <svg viewBox="0 0 24 24"><path d="M15.5 4.5L7 12l8.5 7.5-1.5 1.5L4 12 14 3l1.5 1.5z"/></svg>267    </div>268    <div class="title">Walk</div>269    <div class="app-actions">270      <div class="icon-btn" title="Share">271        <svg viewBox="0 0 24 24"><path d="M18 8a3 3 0 1 0-2.8-4h-.2L8 8.5a3 3 0 1 0 0 6L15 20a3 3 0 1 0 1-1.7l-7-5a3 3 0 0 0 0-2.6l7-5A3 3 0 0 0 18 8z"/></svg>272      </div>273      <div class="icon-btn" title="Edit">274        <svg viewBox="0 0 24 24"><path d="M3 17.2V21h3.8L18 9.8 14.2 6 3 17.2zM20.7 7.1a1 1 0 0 0 0-1.4L18.3 3.3a1 1 0 0 0-1.4 0L15.2 5l3.8 3.8 1.7-1.7z"/></svg>275      </div>276      <div class="icon-btn" title="More">277        <svg viewBox="0 0 24 24"><path d="M12 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>278      </div>279    </div>280  </div>281 282  <!-- Tabs -->283  <div class="tabs">284    <div class="tab active">MAP</div>285    <div class="tab">SPLITS</div>286    <div class="tab">ENERGY</div>287    <div class="tab">IMPACT</div>288    <div class="tab">RECENT</div>289  </div>290 291  <!-- Map area -->292  <div class="map-area">293    <!-- floating segmented control -->294    <div class="segmented">295      <div class="seg active">DEFAULT</div>296      <div class="seg">HEART ZONES</div>297      <div class="seg">PACE</div>298    </div>299 300    <!-- Route path -->301    <svg class="route-svg" viewBox="0 0 900 900">302      <path d="M30 640 C120 700, 220 720, 300 690 C380 650, 520 520, 640 440 C720 380, 780 340, 820 320"303            fill="none" stroke="#FF477E" stroke-width="22" stroke-linecap="round" stroke-linejoin="round"/>304      <circle cx="820" cy="320" r="12" fill="#FF477E"/>305    </svg>306 307    <!-- distance marker bubble -->308    <div class="distance-bubble">309      <div class="num">0.01</div>310      <div class="unit">km</div>311    </div>312 313    <!-- Bottom stat card -->314    <div class="bottom-card">315      <div class="stat">316        <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7zm0 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>317        <span>0.01 km</span>318      </div>319      <div class="divider"></div>320      <div class="stat">321        <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm1 5h-2v6l5 3 1-1.7-4-2.3V7z"/></svg>322        <span>1 min</span>323      </div>324      <div class="divider"></div>325      <div class="stat">326        <svg viewBox="0 0 24 24"><path d="M17 2H7v2H5v3h2v2.1A7 7 0 1 0 12 5h5V2zM12 20a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"/></svg>327        <span>99'05" pace</span>328      </div>329      <div class="divider"></div>330      <div class="stat">331        <svg viewBox="0 0 24 24"><path d="M3 17c4 0 6-2 7-3l7 2c1 .4 1 2-.2 2.4L12 21c-2 .7-5 0-7-1v-3zM10 11l-2 2c-1 1-3 2-5 2v-2c2 0 4-1 5-3l2-3 3 1-3 3z"/></svg>332        <span>9 steps</span>333      </div>334    </div>335 336    <!-- Google label -->337    <div class="google" aria-label="Map attributions">338      <span class="g-b">G</span><span class="g-r">o</span><span class="g-y">o</span><span class="g-b">g</span><span class="g-g">l</span><span class="g-r">e</span>339    </div>340  </div>341 342  <!-- Home indicator -->343  <div class="home-indicator"></div>344 345</div>346</body>347</html>