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 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    border-radius: 0;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 92px;25    padding: 0 28px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #666;30    font-size: 30px;31  }32 33  /* Header / Search area */34  .header {35    position: absolute;36    top: 92px;37    left: 0;38    width: 1080px;39    height: 350px;40    background: #fff;41    box-shadow: 0 2px 6px rgba(0,0,0,0.08);42  }43 44  .search-row {45    position: absolute;46    left: 36px;47    right: 36px;48    top: 24px;49    display: flex;50    align-items: center;51    gap: 22px;52  }53  .search-row .left-icons {54    width: 120px;55    display: flex;56    align-items: center;57    justify-content: space-between;58  }59  .input-pill {60    flex: 1;61    height: 110px;62    background: #fff;63    border-radius: 24px;64    border: 1px solid #e0e0e0;65    box-shadow: 0 1px 0 rgba(0,0,0,0.04) inset;66    display: flex;67    align-items: center;68    padding: 0 28px;69    font-size: 36px;70    color: #333;71  }72  .trailing {73    width: 60px;74    height: 110px;75    display: flex;76    align-items: center;77    justify-content: center;78  }79  .search-row.second {80    top: 150px;81  }82 83  .modes {84    position: absolute;85    left: 36px;86    right: 36px;87    bottom: 18px;88    display: flex;89    align-items: center;90    gap: 26px;91  }92  .mode-pill {93    display: flex;94    align-items: center;95    gap: 18px;96    padding: 18px 26px;97    border-radius: 28px;98    border: 1px solid #e6eefc;99    background: #eaf2ff;100    color: #1a73e8;101    font-weight: 600;102    font-size: 32px;103  }104  .mode {105    display: flex;106    align-items: center;107    gap: 12px;108    color: #5f6368;109    font-size: 32px;110  }111 112  /* Map placeholder */113  .map {114    position: absolute;115    top: 442px;116    left: 0;117    width: 1080px;118    height: 1180px;119    background: #E0E0E0;120    border-top: 1px solid #BDBDBD;121    border-bottom: 1px solid #BDBDBD;122    display: flex;123    align-items: center;124    justify-content: center;125    color: #757575;126    font-size: 44px;127  }128 129  /* Floating map controls */130  .fab {131    position: absolute;132    right: 36px;133    width: 120px;134    height: 120px;135    border-radius: 60px;136    background: #fff;137    box-shadow: 0 4px 12px rgba(0,0,0,0.12);138    display: flex;139    align-items: center;140    justify-content: center;141  }142  .fab.layers { top: 740px; }143  .fab.search { top: 900px; }144  .fab.help {145    right: 36px;146    bottom: 590px;147    border: 2px solid #ff6f61;148    color: #ff6f61;149  }150 151  /* Route chips on map */152  .route-chip {153    position: absolute;154    left: 280px;155    top: 1050px;156    background: #1559ff;157    color: #fff;158    padding: 22px 28px;159    border-radius: 22px;160    font-weight: 700;161    font-size: 34px;162    box-shadow: 0 8px 18px rgba(21,89,255,0.35);163  }164  .route-chip small { font-weight: 500; opacity: 0.95; }165 166  .alt-chip {167    position: absolute;168    left: 290px;169    top: 860px;170    background: #fff;171    color: #5f6368;172    padding: 18px 24px;173    border-radius: 18px;174    font-size: 32px;175    box-shadow: 0 4px 10px rgba(0,0,0,0.18);176    border: 1px solid #e5e5e5;177  }178 179  .mini-street {180    position: absolute;181    left: 28px;182    bottom: 660px;183    width: 270px;184    height: 170px;185    background: #E0E0E0;186    border: 1px solid #BDBDBD;187    border-radius: 14px;188    color: #757575;189    font-size: 28px;190    display: flex;191    align-items: center;192    justify-content: center;193    overflow: hidden;194  }195 196  /* Bottom sheet */197  .sheet {198    position: absolute;199    left: 0;200    right: 0;201    bottom: 86px;202    height: 640px;203    background: #fff;204    border-top-left-radius: 28px;205    border-top-right-radius: 28px;206    box-shadow: 0 -6px 20px rgba(0,0,0,0.12);207    padding: 24px 36px;208  }209  .grabber {210    margin: 8px auto 22px;211    width: 120px;212    height: 10px;213    background: #e5e5e5;214    border-radius: 8px;215  }216  .time-row {217    font-size: 48px;218    color: #2e7d32;219    font-weight: 700;220  }221  .time-row span.small {222    color: #212121;223    font-weight: 700;224  }225  .note {226    margin-top: 12px;227    font-size: 32px;228    color: #616161;229  }230  .toll-line {231    display: flex;232    align-items: center;233    gap: 14px;234    margin-top: 16px;235    color: #616161;236    font-size: 30px;237  }238 239  .sheet-actions {240    margin-top: 34px;241    display: flex;242    gap: 24px;243    flex-wrap: nowrap;244  }245  .btn {246    display: inline-flex;247    align-items: center;248    gap: 16px;249    padding: 26px 36px;250    border-radius: 40px;251    border: 2px solid #d7e3ff;252    color: #1a73e8;253    background: #fff;254    font-size: 34px;255    font-weight: 700;256  }257  .btn.primary {258    background: #1a73e8;259    border-color: #1a73e8;260    color: #fff;261  }262 263  /* Gesture pill (system navbar) */264  .home-pill {265    position: absolute;266    bottom: 24px;267    left: 50%;268    transform: translateX(-50%);269    width: 320px;270    height: 14px;271    background: #bdbdbd;272    border-radius: 10px;273  }274 275  /* Generic icon style */276  .icon {277    width: 44px;278    height: 44px;279    color: #5f6368;280  }281  .icon-lg { width: 56px; height: 56px; }282  .icon-dark { color: #1a73e8; }283  .icon-thin path, .icon-thin circle, .icon-thin line, .icon-thin polyline { stroke-width: 2; }284</style>285</head>286<body>287<div id="render-target">288 289  <!-- Status bar -->290  <div class="status-bar">291    <div>6:43 • • • • • • •</div>292    <div>◦ ◉</div>293  </div>294 295  <!-- Header with search boxes -->296  <div class="header">297    <!-- First row -->298    <div class="search-row">299      <div class="left-icons">300        <!-- Back arrow -->301        <svg class="icon" viewBox="0 0 24 24">302          <path fill="#5f6368" d="M14.7 6.3a1 1 0 0 1 0 1.4L10.4 12l4.3 4.3a1 1 0 1 1-1.4 1.4l-5-5a1 1 0 0 1 0-1.4l5-5a1 1 0 0 1 1.4 0z"/>303        </svg>304        <!-- Circle point -->305        <svg class="icon" viewBox="0 0 24 24">306          <circle cx="12" cy="12" r="5" fill="#9e9e9e"/>307        </svg>308      </div>309      <div class="input-pill">Cañada de Gómez</div>310      <div class="trailing">311        <!-- More (kebab) -->312        <svg class="icon" viewBox="0 0 24 24">313          <circle cx="12" cy="5" r="2.2" fill="#5f6368"></circle>314          <circle cx="12" cy="12" r="2.2" fill="#5f6368"></circle>315          <circle cx="12" cy="19" r="2.2" fill="#5f6368"></circle>316        </svg>317      </div>318    </div>319 320    <!-- Second row -->321    <div class="search-row second">322      <div class="left-icons">323        <!-- Pin -->324        <svg class="icon" viewBox="0 0 24 24">325          <path fill="#e53935" d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>326        </svg>327      </div>328      <div class="input-pill">Funes</div>329      <div class="trailing">330        <!-- Swap -->331        <svg class="icon" viewBox="0 0 24 24">332          <path fill="#5f6368" d="M7 7h9l-2.5-2.5L15 3l5 5-5 5-1.5-1.5L16 9H7V7zm10 10H8l2.5 2.5L9 21l-5-5 5-5 1.5 1.5L8 15h9v2z"/>333        </svg>334      </div>335    </div>336 337    <!-- Modes row -->338    <div class="modes">339      <div class="mode-pill">340        <svg class="icon" viewBox="0 0 24 24">341          <path fill="#1a73e8" d="M5 11l2-5h10l2 5v6h-2v-2H7v2H5v-6zm3.2-3l-1 3h9.6l-1-3H8.2z"/>342        </svg>343        44 min344      </div>345      <div class="mode">346        <svg class="icon" viewBox="0 0 24 24">347          <path fill="#5f6368" d="M5 16a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm14 0a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM6 4h7l4 5h-3l-2-2H8l-2 6H4l2-9z"/>348        </svg>349        53 min350      </div>351      <div class="mode">352        <svg class="icon" viewBox="0 0 24 24">353          <path fill="#5f6368" d="M4 6h16a2 2 0 0 1 2 2v5a3 3 0 0 1-3 3h-1v2h-2v-2H8v2H6v-2H5a3 3 0 0 1-3-3V8a2 2 0 0 1 2-2zm1 2v5h14V8H5z"/>354        </svg>355        2 hr 5356      </div>357      <div class="mode">358        <svg class="icon" viewBox="0 0 24 24">359          <path fill="#5f6368" d="M13 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6 22v-2l4-6 2 2 3-3 3 3v6h-2v-4l-1-1-3 3-3-3-2 4H6z"/>360        </svg>361        13 hr362      </div>363      <div class="mode">364        <svg class="icon" viewBox="0 0 24 24">365          <path fill="#5f6368" d="M5 16a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm14 0a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM6 4h7l4 5h-3l-2-2H8l-2 6H4l2-9z"/>366        </svg>367        3 hr368      </div>369    </div>370  </div>371 372  <!-- Map area -->373  <div class="map">[IMG: Google Map]</div>374 375  <!-- Floating route info chips -->376  <div class="alt-chip">55 min  •  Tolls</div>377  <div class="route-chip">44 min  <small>Tolls</small></div>378 379  <!-- Floating controls -->380  <div class="fab layers">381    <svg class="icon-lg" viewBox="0 0 24 24">382      <path fill="#5f6368" d="M12 4l9 5-9 5-9-5 9-5zm-7.5 9L12 18l7.5-5L21 15l-9 6-9-6 1.5-2z"/>383    </svg>384  </div>385  <div class="fab search">386    <svg class="icon-lg" viewBox="0 0 24 24">387      <path fill="#5f6368" d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.9.9l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z"/>388    </svg>389  </div>390 391  <div class="mini-street">[IMG: Street View]</div>392 393  <div class="fab help">394    <svg class="icon-lg" viewBox="0 0 24 24">395      <path fill="#ff6f61" d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm1 15h-2v-2h2v2zm1.9-7.3c-.2 1-1 1.5-1.6 1.9-.6.4-1 .7-1 .9V14h-2v-1.1c0-1 .8-1.7 1.5-2.1.6-.4 1.1-.7 1.2-1.2.2-.8-.5-1.6-1.5-1.6-.8 0-1.4.5-1.7 1.2l-1.8-.8C7.6 6.2 9 5 11 5c2.2 0 3.9 1.7 3.9 3.7 0 .3 0 .6-.1 1z"/>396    </svg>397  </div>398 399  <!-- Bottom sheet -->400  <div class="sheet">401    <div class="grabber"></div>402    <div class="time-row">403      44 min <span class="small">(62 km)</span>404    </div>405    <div class="note">Fastest route now due to traffic conditions</div>406    <div class="toll-line">407      <svg class="icon" viewBox="0 0 24 24">408        <path fill="#616161" d="M11 3h2v18h-2V3zm-6 6h2v9H5V9zm12 0h2v9h-2V9z"/>409      </svg>410      Tolls411    </div>412 413    <div class="sheet-actions">414      <div class="btn primary">415        <svg class="icon" viewBox="0 0 24 24">416          <path fill="#fff" d="M4 12h12l-4-4 1.4-1.4L21.8 12l-8.4 5.4L12 16l4-4H4z"/>417        </svg>418        Preview419      </div>420      <div class="btn">421        <svg class="icon" viewBox="0 0 24 24">422          <path fill="#1a73e8" d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h10v2H4v-2z"/>423        </svg>424        Steps425      </div>426      <div class="btn">427        <svg class="icon" viewBox="0 0 24 24">428          <path fill="#1a73e8" d="M12 21l-6-5V5a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v11l-6 5z"/>429        </svg>430        Pin431      </div>432    </div>433  </div>434 435  <!-- System gesture pill -->436  <div class="home-pill"></div>437</div>438</body>439</html>