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>Maps Directions UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Status bar */18  .statusbar {19    height: 110px;20    display: flex;21    align-items: center;22    padding: 0 40px;23    color: #222;24    font-size: 44px;25  }26  .status-icons {27    margin-left: auto;28    display: flex;29    align-items: center;30    gap: 28px;31  }32  .icon { width: 48px; height: 48px; }33  .icon.small { width: 40px; height: 40px; }34 35  /* Top search area */36  .top-area {37    padding: 0 36px 18px 36px;38  }39  .controls-row {40    display: flex;41    align-items: center;42    gap: 28px;43    color: #555;44    margin-bottom: 18px;45  }46  .circle-dot {47    width: 30px;48    height: 30px;49    border: 3px solid #777;50    border-radius: 50%;51  }52 53  .input-pill {54    display: flex;55    align-items: center;56    justify-content: space-between;57    border: 1px solid #DADCE0;58    border-radius: 26px;59    padding: 26px 28px;60    margin: 14px 0;61    font-size: 42px;62    color: #333;63    background: #fff;64  }65  .input-left {66    display: flex;67    align-items: center;68    gap: 18px;69  }70  .red-pin {71    width: 28px; height: 28px; background: #D93025; border-radius: 50%;72  }73  .swap-icon {74    display: flex; align-items: center; gap: 16px; color: #666;75  }76  .dots-vert { width: 12px; height: 44px; position: relative; }77  .dots-vert span { position: absolute; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; background: #777; border-radius: 50%; }78  .dots-vert span:nth-child(1){ top: 6px; }79  .dots-vert span:nth-child(2){ top: 18px; }80  .dots-vert span:nth-child(3){ top: 30px; }81 82  /* Modes row */83  .mode-row {84    display: flex;85    align-items: center;86    gap: 28px;87    padding: 10px 36px 22px 36px;88  }89  .chip {90    display: flex;91    align-items: center;92    gap: 16px;93    padding: 18px 26px;94    border-radius: 26px;95    border: 1px solid #DADCE0;96    color: #444;97    font-size: 38px;98    background: #fff;99  }100  .chip.blue {101    background: #E7F1FF;102    color: #1A73E8;103    border-color: #BBD2FF;104  }105  .chip .mini {106    font-size: 34px;107    color: #606469;108  }109 110  /* Map area */111  .map {112    position: relative;113    width: 100%;114    height: 1440px;115    background: #E0E0E0;116    border-top: 1px solid #BDBDBD;117    border-bottom: 1px solid #BDBDBD;118    display: flex;119    align-items: center;120    justify-content: center;121    color: #757575;122    font-size: 44px;123  }124  .map::after {125    content:'[IMG: City Map with routes]';126  }127 128  /* Floating UI over the map */129  .route-chip {130    position: absolute;131    background: #1A73E8;132    color: #fff;133    border-radius: 28px;134    padding: 20px 26px;135    font-size: 40px;136    display: flex;137    align-items: center;138    gap: 16px;139    box-shadow: 0 6px 12px rgba(0,0,0,0.2);140  }141  .route-chip .info {142    width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.25);143    display: inline-flex; align-items: center; justify-content: center; font-size: 28px;144  }145  .route-chip.white {146    background: #fff; color: #333; border: 1px solid #DADCE0;147  }148 149  .pin-marker {150    position: absolute;151    width: 44px; height: 44px; border-radius: 50%;152    background: #D93025;153    border: 6px solid #B72A20;154    top: 120px; left: 120px;155  }156  .map-button {157    position: absolute;158    width: 110px; height: 110px;159    border-radius: 50%;160    background: #fff;161    box-shadow: 0 6px 18px rgba(0,0,0,0.25);162    display: flex; align-items: center; justify-content: center;163  }164  .map-button .icon { width: 70px; height: 70px; }165 166  .thumb {167    position: absolute;168    left: 36px;169    bottom: 220px;170    width: 250px; height: 160px;171    background: #E0E0E0;172    border: 1px solid #BDBDBD;173    color: #666;174    display: flex; align-items: center; justify-content: center;175    font-size: 34px;176  }177 178  .scale {179    position: absolute;180    bottom: 210px;181    left: 50%;182    transform: translateX(-50%);183    display: flex; align-items: center; gap: 16px;184    background: rgba(255,255,255,0.95);185    padding: 12px 18px;186    border-radius: 18px;187    border: 1px solid #E0E0E0;188    font-size: 32px; color: #333;189  }190 191  /* Bottom sheet */192  .bottom-sheet {193    position: absolute;194    left: 0;195    bottom: 110px;196    width: 100%;197    height: 520px;198    background: #fff;199    border-top-left-radius: 34px;200    border-top-right-radius: 34px;201    box-shadow: 0 -10px 24px rgba(0,0,0,0.18);202    padding: 26px 40px;203  }204  .handle {205    width: 140px; height: 10px; border-radius: 6px; background: #DADCE0; margin: 0 auto 26px auto;206  }207  .sheet-title {208    font-size: 54px; color: #111; margin-bottom: 16px;209  }210  .sheet-sub {211    font-size: 36px; color: #666; margin-bottom: 22px;212  }213  .sheet-meta {214    display: flex; align-items: center; gap: 16px; color: #3C4043; font-size: 34px;215    margin-bottom: 30px;216  }217  .sheet-actions {218    display: flex; align-items: center; gap: 24px;219  }220  .btn {221    display: inline-flex; align-items: center; gap: 16px;222    padding: 22px 28px; border-radius: 28px; border: 2px solid #1A73E8; color: #1A73E8; background: #F7FAFF;223    font-size: 38px;224  }225 226  /* Home indicator */227  .home-indicator {228    position: absolute;229    bottom: 26px;230    left: 50%;231    transform: translateX(-50%);232    width: 260px; height: 12px; background: #C9CCD1; border-radius: 8px;233  }234</style>235</head>236<body>237<div id="render-target">238 239  <!-- Status bar -->240  <div class="statusbar">241    <div>7:00</div>242    <div class="status-icons">243      <!-- bell -->244      <svg class="icon small" viewBox="0 0 24 24">245        <path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zm8-6c-2-2-2-4-2-7a6 6 0 1 0-12 0c0 3-0 5-2 7h16z" fill="#555"/>246      </svg>247      <!-- search -->248      <svg class="icon small" viewBox="0 0 24 24">249        <circle cx="10" cy="10" r="6" stroke="#555" stroke-width="2" fill="none"/>250        <path d="M15 15l6 6" stroke="#555" stroke-width="2"/>251      </svg>252      <!-- glass -->253      <svg class="icon small" viewBox="0 0 24 24">254        <path d="M4 5h16l-2 9H6L4 5zm6 12h4v2h-4z" fill="#555"/>255      </svg>256      <!-- dot -->257      <svg class="icon small" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="#555"/></svg>258      <!-- location -->259      <svg class="icon small" viewBox="0 0 24 24"><path d="M12 2l4 6-4 14-4-14 4-6z" fill="#555"/></svg>260      <!-- wifi -->261      <svg class="icon small" viewBox="0 0 24 24">262        <path d="M2 8c5-4 15-4 20 0M5 12c4-3 10-3 14 0M8 16c3-2 5-2 8 0" stroke="#555" stroke-width="2" fill="none"/>263        <circle cx="12" cy="19" r="2" fill="#555"/>264      </svg>265      <!-- battery -->266      <svg class="icon small" viewBox="0 0 24 24">267        <rect x="3" y="6" width="16" height="12" rx="2" ry="2" stroke="#555" stroke-width="2" fill="none"/>268        <rect x="5" y="8" width="12" height="8" fill="#555"/>269        <rect x="19" y="10" width="2" height="4" fill="#555"/>270      </svg>271    </div>272  </div>273 274  <!-- Search and controls -->275  <div class="top-area">276    <div class="controls-row">277      <!-- back arrow -->278      <svg class="icon" viewBox="0 0 24 24">279        <path d="M15 5L6 12l9 7" stroke="#333" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>280      </svg>281      <div class="circle-dot"></div>282    </div>283 284    <div class="input-pill">285      <div class="input-left">286        <div>Work</div>287      </div>288      <div class="dots-vert"><span></span><span></span><span></span></div>289    </div>290 291    <div class="input-pill">292      <div class="input-left">293        <div class="red-pin"></div>294        <div>Westerpark</div>295      </div>296      <div class="swap-icon">297        <!-- swap vertical arrows -->298        <svg class="icon" viewBox="0 0 24 24">299          <path d="M8 4v10m0 0l-3-3m3 3l3-3M16 20V10m0 0l-3 3m3-3l3 3" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>300        </svg>301      </div>302    </div>303  </div>304 305  <!-- Modes row -->306  <div class="mode-row">307    <div class="chip blue">308      <svg class="icon" viewBox="0 0 24 24">309        <path d="M4 14l2-5h12l2 5v4H4v-4zM6 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm12 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z" fill="#1A73E8"/>310      </svg>311      <div>7 min</div>312      <div class="info">i</div>313    </div>314 315    <div class="chip">316      <!-- motorcycle -->317      <svg class="icon" viewBox="0 0 24 24">318        <path d="M4 16a3 3 0 1 1 0-6h3l2 3h4l2-3h3a3 3 0 1 1 0 6H4z" fill="#666"/>319      </svg>320      <div class="mini">—</div>321    </div>322 323    <div class="chip">324      <!-- train -->325      <svg class="icon" viewBox="0 0 24 24">326        <rect x="5" y="5" width="14" height="10" rx="2" fill="#666"></rect>327        <circle cx="9" cy="17" r="2" fill="#666"></circle>328        <circle cx="15" cy="17" r="2" fill="#666"></circle>329      </svg>330      <div>16 min</div>331    </div>332 333    <div class="chip">334      <!-- walk -->335      <svg class="icon" viewBox="0 0 24 24">336        <path d="M12 4a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm-4 7l4 2 2 6M10 13l-3 6" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/>337      </svg>338      <div>20 min</div>339    </div>340 341    <div class="chip">342      <!-- run -->343      <svg class="icon" viewBox="0 0 24 24">344        <path d="M12 4a2 2 0 1 1 0 4M8 11l4 2 2 5M9 13l-4 5" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/>345      </svg>346      <div>7 min</div>347    </div>348  </div>349 350  <!-- Map placeholder -->351  <div class="map">352    <!-- Route label chips -->353    <div class="route-chip" style="top: 160px; left: 210px;">354      <div>7 min</div>355      <div class="info">i</div>356    </div>357 358    <div class="route-chip white" style="top: 340px; left: 690px;">359      <div>8 min</div>360      <div class="info" style="background:#E9F0FF; color:#4C6EF5;">i</div>361    </div>362 363    <div class="route-chip white" style="top: 600px; left: 420px;">364      <div>20 min</div>365    </div>366 367    <div class="route-chip white" style="top: 910px; left: 720px;">368      <div>9 min</div>369      <div class="info" style="background:#E9F0FF; color:#4C6EF5;">i</div>370    </div>371 372    <!-- Red pin (origin) -->373    <div class="pin-marker"></div>374 375    <!-- Floating buttons on right -->376    <div class="map-button" style="right: 36px; top: 110px;">377      <!-- layers -->378      <svg class="icon" viewBox="0 0 24 24">379        <path d="M12 3l9 5-9 5-9-5 9-5zm0 8l9 5-9 5-9-5 9-5z" fill="#5F6368"/>380      </svg>381    </div>382    <div class="map-button" style="right: 36px; top: 250px;">383      <!-- search -->384      <svg class="icon" viewBox="0 0 24 24">385        <circle cx="10" cy="10" r="6" stroke="#5F6368" stroke-width="2" fill="none"/>386        <path d="M15 15l6 6" stroke="#5F6368" stroke-width="2"/>387      </svg>388    </div>389    <div class="map-button" style="right: 36px; bottom: 260px;">390      <!-- crosshair -->391      <svg class="icon" viewBox="0 0 24 24">392        <circle cx="12" cy="12" r="6" stroke="#5F6368" stroke-width="2" fill="none"/>393        <path d="M12 2v4M12 18v4M2 12h4M18 12h4" stroke="#5F6368" stroke-width="2"/>394      </svg>395    </div>396 397    <!-- Street View thumbnail -->398    <div class="thumb">[IMG: Street View]</div>399 400    <!-- Scale and landmark -->401    <div class="scale">402      <svg class="icon small" viewBox="0 0 24 24">403        <rect x="4" y="8" width="16" height="10" rx="2" fill="#5F6368"/>404        <path d="M4 18h16" stroke="#fff" stroke-width="2"/>405      </svg>406      <div>500 ft • 200 m</div>407    </div>408  </div>409 410  <!-- Bottom sheet -->411  <div class="bottom-sheet">412    <div class="handle"></div>413    <div class="sheet-title">7 min (1.9 km)</div>414    <div class="sheet-sub">Fastest route now due to traffic conditions</div>415    <div class="sheet-meta">416      <svg class="icon small" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="#3C4043" stroke-width="2" fill="none"/><text x="12" y="16" text-anchor="middle" font-size="12" fill="#3C4043">i</text></svg>417      <div>Amsterdam Low Emission Zone • P Medium</div>418    </div>419    <div class="sheet-actions">420      <div class="btn">421        <svg class="icon" viewBox="0 0 24 24">422          <path d="M3 12h8l-2-2m2 2l-2 2M13 6l8 6-8 6V6z" fill="#1A73E8"/>423        </svg>424        <div>Preview</div>425      </div>426      <div class="btn">427        <svg class="icon" viewBox="0 0 24 24">428          <path d="M4 6h16M4 12h16M4 18h10" stroke="#1A73E8" stroke-width="2"/>429        </svg>430        <div>Steps</div>431      </div>432      <div class="btn">433        <svg class="icon" viewBox="0 0 24 24">434          <path d="M12 3l3 6 6 1-4 4 1 7-6-3-6 3 1-7-4-4 6-1 3-6z" fill="#1A73E8"/>435        </svg>436        <div>Pin</div>437      </div>438    </div>439  </div>440 441  <!-- Home indicator -->442  <div class="home-indicator"></div>443 444</div>445</body>446</html>