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>Map Navigation UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #dfe3e8;15    border-radius: 32px;16    box-shadow: 0 18px 60px rgba(0,0,0,0.25);17  }18 19  /* Map background placeholder */20  .map-placeholder {21    position: absolute;22    left: 0; top: 0;23    width: 100%; height: 100%;24    background: #E0E0E0;25    border: 1px solid #BDBDBD;26    color: #757575;27    display: flex;28    align-items: center;29    justify-content: center;30    font-size: 28px;31    letter-spacing: 0.5px;32  }33 34  /* Status bar */35  .status-bar {36    position: absolute;37    top: 36px; left: 36px; right: 36px;38    height: 56px;39    display: flex;40    align-items: center;41    color: #333;42    font-size: 30px;43  }44  .status-left { display: flex; align-items: center; gap: 18px; }45  .status-right { margin-left: auto; display: flex; align-items: center; gap: 26px; }46  .sb-icon {47    width: 34px; height: 34px; border-radius: 8px;48    background: rgba(255,255,255,0.85);49    box-shadow: 0 2px 6px rgba(0,0,0,0.15);50    display: grid; place-items: center;51  }52  .sb-icon svg { width: 22px; height: 22px; }53 54  /* Top info pill */55  .top-pill {56    position: absolute;57    top: 180px; left: 120px; right: 120px;58    height: 120px;59    background: #fff;60    border-radius: 60px;61    box-shadow: 0 10px 24px rgba(0,0,0,0.18);62    display: flex;63    align-items: center;64    padding: 0 40px;65    gap: 26px;66  }67  .top-pill .weather {68    width: 56px; height: 56px; border-radius: 28px;69    background: #FFF7D6;70    display: grid; place-items: center;71  }72  .top-pill .main-time {73    font-weight: 800;74    font-size: 44px;75    color: #222;76  }77  .top-pill .sep {78    font-weight: 800;79    font-size: 44px;80    color: #8a8a8a;81  }82  .top-pill .arrival {83    font-weight: 800;84    font-size: 44px;85    color: #222;86  }87  .top-pill .share {88    margin-left: auto;89    width: 64px; height: 64px; border-radius: 32px;90    background: #f6f2ff;91    display: grid; place-items: center;92  }93  .top-pill .share svg { width: 34px; height: 34px; fill: #6F46CF; }94 95  /* Floating circular buttons */96  .fab {97    position: absolute;98    width: 120px; height: 120px; border-radius: 60px;99    background: #fff;100    box-shadow: 0 8px 20px rgba(0,0,0,0.2);101    display: grid; place-items: center;102  }103  .fab svg { width: 54px; height: 54px; }104  .fab.back { left: 40px; top: 300px; }105  .fab.report { left: 40px; top: 520px; }106  .fab.cancel { right: 40px; top: 300px; }107  .fab.mute { right: 40px; top: 520px; }108  .fab.cancel svg { stroke: #E53935; }109  .fab-blue {110    position: absolute;111    width: 132px; height: 132px; border-radius: 66px;112    background: #3D6FD9;113    box-shadow: 0 12px 24px rgba(0,0,0,0.28);114    display: grid; place-items: center;115    right: 40px;116  }117  .fab-blue.path { bottom: 520px; }118  .fab-blue.locate { bottom: 360px; }119  .fab-blue svg { width: 64px; height: 64px; fill: #fff; }120 121  /* Route dotted line */122  .route-dots {123    position: absolute;124    left: 680px; top: 820px;125    width: 8px; height: 900px;126    background:127      radial-gradient(circle, #1E73E6 55%, transparent 60%) 0 0/8px 28px repeat-y;128  }129 130  /* User marker with cone */131  .user-marker {132    position: absolute;133    left: 640px; top: 1050px;134    width: 54px; height: 54px;135    border-radius: 50%;136    background: #1E73E6;137    border: 6px solid #fff;138    box-shadow: 0 6px 18px rgba(0,0,0,0.25);139  }140  .user-marker::before {141    content: "";142    position: absolute;143    left: 50%; transform: translateX(-50%);144    top: -70px;145    width: 0; height: 0;146    border-left: 18px solid transparent;147    border-right: 18px solid transparent;148    border-bottom: 70px solid rgba(40,190,120,0.45); /* green cone */149    filter: blur(1px);150  }151  .user-marker::after {152    content: "";153    position: absolute;154    left: 50%; transform: translateX(-50%);155    top: -46px;156    width: 0; height: 0;157    border-left: 10px solid transparent;158    border-right: 10px solid transparent;159    border-bottom: 46px solid rgba(40,190,120,0.55);160  }161 162  /* Bottom sheet */163  .bottom-sheet {164    position: absolute;165    left: 20px; right: 20px; bottom: 20px;166    height: 700px;167    background: #fff;168    border-radius: 36px;169    box-shadow: 0 -12px 36px rgba(0,0,0,0.22);170    padding: 30px 36px;171  }172  .pager {173    display: flex; justify-content: center; gap: 18px;174    margin-top: 6px;175  }176  .pager .dot {177    width: 18px; height: 18px; border-radius: 50%;178    background: #D0D4DA;179  }180  .pager .dot.active { background: #70767F; }181 182  .title-row {183    margin-top: 26px;184    display: flex; align-items: center;185  }186  .title-row .walk-icon {187    width: 52px; height: 52px; border-radius: 10px;188    background: #E9F1FF;189    display: grid; place-items: center;190    margin-right: 18px;191  }192  .title-row .text {193    font-size: 44px; font-weight: 800; color: #2A2F3A;194    display: flex; align-items: center; gap: 12px;195  }196  .title-row .metro {197    width: 46px; height: 46px; border-radius: 23px;198    background: #E9F1FF; color: #2A61DA;199    display: grid; place-items: center; font-weight: 800;200    font-size: 28px;201  }202  .title-row .eta {203    margin-left: auto;204    display: flex; align-items: center; gap: 12px;205    font-weight: 700; color: #2A61DA;206  }207  .title-row .eta .bubble {208    width: 84px; height: 84px; border-radius: 42px;209    border: 6px solid #BFD0FF;210    display: grid; place-items: center;211    font-size: 32px;212  }213 214  .step {215    margin-top: 36px;216    display: flex; align-items: center;217    gap: 24px;218  }219  .step .lead {220    width: 84px; height: 84px; border-radius: 18px;221    background: #EDF0F5;222    display: grid; place-items: center;223  }224  .step .lead svg { width: 44px; height: 44px; }225  .step .desc {226    font-size: 36px; color: #374151;227  }228  .timeline {229    margin-top: 36px;230    height: 22px; border-radius: 11px;231    background: #EEF1F5;232    position: relative;233  }234  .timeline .handle {235    position: absolute; left: 36%; top: -8px;236    width: 160px; height: 38px; border-radius: 20px;237    background: #C8CDD5;238  }239 240  /* Small Google watermark placeholder */241  .google-watermark {242    position: absolute;243    left: 40px; bottom: 750px;244    font-size: 34px; color: #666;245    background: rgba(255,255,255,0.8);246    padding: 6px 12px; border-radius: 10px;247  }248</style>249</head>250<body>251<div id="render-target">252  <div class="map-placeholder">[IMG: City Map / Streets & Buildings]</div>253 254  <!-- Status bar -->255  <div class="status-bar">256    <div class="status-left">257      <div style="font-weight:700;">6:07</div>258      <div class="sb-icon" title="Do Not Disturb">259        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#777"/><rect x="6" y="11" width="12" height="2" fill="#fff"/></svg>260      </div>261      <div class="sb-icon" title="Mail">262        <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="3" fill="#777"/><path d="M4 7l8 6 8-6" stroke="#fff" stroke-width="2" fill="none"/></svg>263      </div>264      <div class="sb-icon" title="Bluetooth">265        <svg viewBox="0 0 24 24"><path d="M7 5l10 7-10 7V5z" fill="#777"/></svg>266      </div>267    </div>268    <div class="status-right">269      <div class="sb-icon" title="Location">270        <svg viewBox="0 0 24 24"><path d="M12 2l6 20-6-5-6 5 6-20z" fill="#777"/></svg>271      </div>272      <div class="sb-icon" title="Wi‑Fi">273        <svg viewBox="0 0 24 24"><path d="M2 9c5-4 15-4 20 0M6 13c3-2 9-2 12 0M10 17c2-1 4-1 6 0" stroke="#777" stroke-width="2" fill="none"/></svg>274      </div>275      <div class="sb-icon" title="Battery">276        <svg viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="10" rx="2" fill="#777"/><rect x="5" y="9" width="14" height="6" fill="#fff"/><rect x="21" y="9" width="2" height="6" fill="#777"/></svg>277      </div>278    </div>279  </div>280 281  <!-- Top info pill -->282  <div class="top-pill">283    <div class="weather">284      <svg viewBox="0 0 24 24">285        <circle cx="12" cy="12" r="6" fill="#FFC107"/>286        <path d="M2 12h20" stroke="#FFC107" stroke-width="2"/>287      </svg>288    </div>289    <div class="main-time">118 min</div>290    <div class="sep">/</div>291    <div class="arrival">12:35</div>292    <div class="share">293      <svg viewBox="0 0 24 24"><path d="M16 6a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm-8 4a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm8 4a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM8 13l8-3M8 15l8 3" stroke="#6F46CF" stroke-width="2" fill="none" stroke-linecap="round"/></svg>294    </div>295  </div>296 297  <!-- Floating controls -->298  <div class="fab back" title="Back">299    <svg viewBox="0 0 24 24"><path d="M15 5L7 12l8 7" stroke="#4A4A4A" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>300  </div>301  <div class="fab report" title="Report">302    <svg viewBox="0 0 24 24"><path d="M4 20l0-8 8-6 8 6v8H4z" fill="#2E6BD9"/><text x="12" y="16" text-anchor="middle" font-size="12" fill="#fff" font-family="Arial" font-weight="700">!</text></svg>303  </div>304  <div class="fab cancel" title="Exit">305    <svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19" stroke-width="3" fill="none"/></svg>306  </div>307  <div class="fab mute" title="Mute">308    <svg viewBox="0 0 24 24">309      <path d="M4 9v6h4l6 4V5L8 9H4z" fill="#4A4A4A"/>310      <path d="M16 8l5 8" stroke="#E53935" stroke-width="3"/>311    </svg>312  </div>313 314  <!-- Route and marker -->315  <div class="route-dots"></div>316  <div class="user-marker" title="Current location"></div>317 318  <!-- Blue action buttons -->319  <div class="fab-blue path" title="Route options">320    <svg viewBox="0 0 24 24"><path d="M3 17c4-8 10-8 18-2" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>321  </div>322  <div class="fab-blue locate" title="Center on me">323    <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="none" stroke="#fff" stroke-width="2"/><circle cx="12" cy="12" r="2" fill="#fff"/></svg>324  </div>325 326  <div class="google-watermark">Google</div>327 328  <!-- Bottom sheet -->329  <div class="bottom-sheet">330    <div class="pager">331      <div class="dot active"></div>332      <div class="dot"></div>333      <div class="dot"></div>334      <div class="dot"></div>335      <div class="dot"></div>336    </div>337 338    <div class="title-row">339      <div class="walk-icon">340        <svg viewBox="0 0 24 24"><path d="M12 4a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm-3 7l3 2 2 6M9 11l-4 6" stroke="#2A61DA" stroke-width="2" fill="none" stroke-linecap="round"/></svg>341      </div>342      <div class="text">343        <span>Walk to</span>344        <div class="metro">🚆</div>345        <span>Orléans</span>346      </div>347      <div class="eta">348        <div class="bubble">6</div>349        <span style="font-size:32px;">min</span>350      </div>351    </div>352 353    <div class="step">354      <div class="lead">355        <svg viewBox="0 0 24 24"><path d="M4 12h12M12 5l7 7-7 7" stroke="#6B7280" stroke-width="2" fill="none" stroke-linecap="round"/></svg>356      </div>357      <div class="desc"><strong>Walk North</strong> on <strong>Rue de la République</strong></div>358    </div>359 360    <div class="timeline">361      <div class="handle"></div>362    </div>363  </div>364</div>365</body>366</html>