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>Directions UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, sans-serif; color: #202124; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #ffffff;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 100%;23    height: 120px;24    padding: 0 36px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    box-sizing: border-box;29    color: #3c4043;30    font-size: 42px;31  }32  .status-left, .status-right { display: flex; align-items: center; gap: 24px; }33  .notif-dot {34    width: 28px; height: 28px; border-radius: 50%; background: #DADCE0;35  }36 37  /* Header / search area */38  .directions-header {39    position: absolute;40    top: 120px;41    left: 0;42    width: 100%;43    padding: 0 36px 24px;44    box-sizing: border-box;45    background: #ffffff;46  }47  .field-row {48    display: grid;49    grid-template-columns: 90px 1fr 90px;50    align-items: center;51    gap: 24px;52    margin-bottom: 24px;53  }54  .chip-input {55    background: #fff;56    border: 1px solid #E0E0E0;57    border-radius: 24px;58    height: 100px;59    display: flex;60    align-items: center;61    padding: 0 32px;62    font-size: 42px;63    color: #3c4043;64    box-shadow: 0 2px 0 rgba(0,0,0,0.02);65  }66  .icon-btn {67    width: 90px; height: 90px; border-radius: 50%;68    display: flex; align-items: center; justify-content: center;69  }70  .icon-btn.round { background: #fff; border: 1px solid #E0E0E0; }71  .icon-btn.transparent { background: transparent; }72  .swap-btn {73    width: 90px; height: 90px; border-radius: 50%;74    display: flex; align-items: center; justify-content: center;75    border: 1px solid #E0E0E0; background: #fff;76  }77 78  /* Mode tabs */79  .mode-tabs {80    display: flex; align-items: center; gap: 36px;81    padding: 24px 0;82    border-top: 1px solid #F1F3F4;83  }84  .mode-pill {85    display: flex; align-items: center; gap: 20px;86    padding: 24px 36px;87    border-radius: 40px;88    border: 1px solid #E8EAED;89    color: #3c4043;90    font-size: 38px;91    background: #fff;92  }93  .mode-pill.active {94    background: #E8F0FE;95    border-color: #D2E3FC;96    color: #1a73e8;97    font-weight: 600;98  }99  .mode-tabs .muted { color: #5f6368; }100 101  /* Map placeholder */102  .map-area {103    position: absolute;104    top: 420px;105    left: 0;106    width: 100%;107    height: 1240px;108    padding: 0 0;109  }110  .map-placeholder {111    width: 100%;112    height: 100%;113    background: #E0E0E0;114    border-top: 1px solid #BDBDBD;115    border-bottom: 1px solid #BDBDBD;116    display: flex; align-items: center; justify-content: center;117    color: #757575; font-size: 46px;118  }119  .route-tag {120    position: absolute;121    padding: 22px 28px;122    border-radius: 20px;123    font-size: 40px;124    box-shadow: 0 6px 16px rgba(0,0,0,0.18);125  }126  .route-tag.white {127    background: #fff; color: #3c4043; border: 1px solid #E0E0E0;128    top: 710px; left: 420px;129  }130  .route-tag.blue {131    background: #1a73e8; color: #fff;132    bottom: 300px; left: 620px;133  }134 135  /* Floating buttons on map */136  .float-stack {137    position: absolute;138    right: 36px;139    top: 720px;140    display: flex; flex-direction: column; gap: 24px;141  }142  .fab {143    width: 120px; height: 120px; border-radius: 60px;144    background: #fff; border: 1px solid #E0E0E0;145    display: flex; align-items: center; justify-content: center;146    box-shadow: 0 2px 12px rgba(0,0,0,0.1);147  }148 149  /* Small preview image */150  .street-preview {151    position: absolute;152    left: 36px;153    bottom: 580px;154    width: 260px; height: 180px;155    background: #E0E0E0;156    border: 1px solid #BDBDBD;157    display: flex; align-items: center; justify-content: center;158    color: #757575; font-size: 34px; border-radius: 12px;159    overflow: hidden;160  }161 162  /* Scale indicator */163  .scale {164    position: absolute;165    right: 200px;166    bottom: 620px;167    color: #3c4043;168    font-size: 30px;169  }170  .scale .bar {171    width: 220px; height: 12px; background: #000; margin-bottom: 10px;172  }173 174  /* Bottom sheet */175  .bottom-sheet {176    position: absolute;177    left: 0;178    right: 0;179    bottom: 140px;180    background: #fff;181    border-top-left-radius: 36px;182    border-top-right-radius: 36px;183    box-shadow: 0 -8px 24px rgba(0,0,0,0.12);184    padding: 28px 36px 40px;185  }186  .sheet-handle {187    width: 160px; height: 12px; background: #E0E0E0; border-radius: 6px;188    margin: 12px auto 24px;189  }190  .time-title {191    font-size: 60px; font-weight: 700;192  }193  .time-title .green { color: #34A853; font-weight: 700; }194  .subtitle {195    font-size: 40px; color: #5f6368; margin-top: 10px;196  }197  .fare {198    font-size: 38px; color: #5f6368; margin-top: 18px; display: flex; align-items: center; gap: 14px;199  }200  .actions {201    display: flex; gap: 28px; margin-top: 36px;202  }203  .action-pill {204    display: flex; align-items: center; gap: 18px;205    padding: 26px 36px; border-radius: 40px; border: 1px solid #E0E0E0;206    font-size: 42px; color: #1a73e8; background: #fff;207  }208  .action-pill.primary {209    background: #1a73e8; color: #fff; border-color: #1a73e8;210    box-shadow: 0 2px 10px rgba(26,115,232,0.3);211  }212 213  /* Gesture bar */214  .gesture-bar {215    position: absolute;216    bottom: 46px;217    left: 50%;218    transform: translateX(-50%);219    width: 420px; height: 16px; background: #C7C9CC; border-radius: 8px;220  }221 222  /* Generic svg icons styling */223  svg { display: block; }224</style>225</head>226<body>227<div id="render-target">228 229  <!-- Status bar -->230  <div class="status-bar">231    <div class="status-left">232      <div style="font-weight:600;">6:40</div>233      <div class="notif-dot"></div>234      <div class="notif-dot"></div>235      <div class="notif-dot"></div>236      <div class="notif-dot"></div>237      <div class="notif-dot"></div>238      <div style="width: 10px; height: 10px; border-radius: 50%; background:#9AA0A6;"></div>239    </div>240    <div class="status-right">241      <!-- Wi-Fi -->242      <svg width="48" height="48" viewBox="0 0 48 48">243        <path d="M8 18c8-8 24-8 32 0" stroke="#3c4043" stroke-width="4" fill="none" stroke-linecap="round"/>244        <path d="M14 24c6-6 14-6 20 0" stroke="#3c4043" stroke-width="4" fill="none" stroke-linecap="round"/>245        <circle cx="24" cy="30" r="4" fill="#3c4043"/>246      </svg>247      <!-- Battery -->248      <svg width="56" height="48" viewBox="0 0 56 48">249        <rect x="2" y="10" width="44" height="28" rx="5" stroke="#3c4043" stroke-width="4" fill="none"/>250        <rect x="6" y="14" width="32" height="20" rx="3" fill="#3c4043"/>251        <rect x="48" y="18" width="6" height="12" rx="2" fill="#3c4043"/>252      </svg>253    </div>254  </div>255 256  <!-- Directions header -->257  <div class="directions-header">258 259    <!-- Origin row -->260    <div class="field-row">261      <div class="icon-btn transparent">262        <!-- Back arrow -->263        <svg width="60" height="60" viewBox="0 0 60 60">264          <path d="M36 12 L18 30 L36 48" stroke="#5f6368" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>265        </svg>266      </div>267      <div class="chip-input">Cañada de Gómez</div>268      <div class="icon-btn round">269        <!-- More vertical -->270        <svg width="40" height="40" viewBox="0 0 40 40">271          <circle cx="20" cy="8" r="4" fill="#5f6368"/>272          <circle cx="20" cy="20" r="4" fill="#5f6368"/>273          <circle cx="20" cy="32" r="4" fill="#5f6368"/>274        </svg>275      </div>276    </div>277 278    <!-- Destination row -->279    <div class="field-row">280      <div class="icon-btn round">281        <!-- Red location pin -->282        <svg width="54" height="54" viewBox="0 0 54 54">283          <path d="M27 6c-9 0-16 7-16 16 0 12 16 26 16 26s16-14 16-26c0-9-7-16-16-16z" fill="#EA4335"/>284          <circle cx="27" cy="22" r="6" fill="#fff"/>285        </svg>286      </div>287      <div class="chip-input">Heladería Catania</div>288      <div class="swap-btn">289        <!-- Swap up/down -->290        <svg width="46" height="46" viewBox="0 0 46 46">291          <path d="M14 34l-6-6 6-6" stroke="#5f6368" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>292          <path d="M10 28h18" stroke="#5f6368" stroke-width="4"/>293          <path d="M32 12l6 6-6 6" stroke="#5f6368" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>294          <path d="M36 18H18" stroke="#5f6368" stroke-width="4"/>295        </svg>296      </div>297    </div>298 299    <!-- Mode tabs -->300    <div class="mode-tabs">301      <div class="mode-pill active">302        <!-- Car icon -->303        <svg width="46" height="46" viewBox="0 0 46 46">304          <rect x="8" y="18" width="30" height="10" rx="3" fill="#1a73e8"/>305          <circle cx="14" cy="32" r="4" fill="#1a73e8"/>306          <circle cx="32" cy="32" r="4" fill="#1a73e8"/>307        </svg>308        <div>53 min</div>309      </div>310      <div class="mode-pill muted">311        <!-- Motorcycle -->312        <svg width="46" height="46" viewBox="0 0 46 46">313          <circle cx="14" cy="32" r="5" fill="#5f6368"/>314          <circle cx="32" cy="32" r="5" fill="#5f6368"/>315          <path d="M18 30h10l4-8" stroke="#5f6368" stroke-width="4" fill="none" stroke-linecap="round"/>316        </svg>317        <div>1 hr 4</div>318      </div>319      <div class="mode-pill muted">320        <!-- Train -->321        <svg width="46" height="46" viewBox="0 0 46 46">322          <rect x="10" y="12" width="26" height="18" rx="3" stroke="#5f6368" stroke-width="4" fill="none"/>323          <circle cx="16" cy="34" r="4" fill="#5f6368"/>324          <circle cx="30" cy="34" r="4" fill="#5f6368"/>325        </svg>326        <div>1 hr 55</div>327      </div>328      <div class="mode-pill muted">329        <!-- Walk -->330        <svg width="46" height="46" viewBox="0 0 46 46">331          <circle cx="23" cy="12" r="5" fill="#5f6368"/>332          <path d="M23 18l-6 8 0 8 M23 18l8 6-2 10" stroke="#5f6368" stroke-width="4" fill="none" stroke-linecap="round"/>333        </svg>334        <div>16 hr</div>335      </div>336      <div class="mode-pill muted">337        <!-- Bike -->338        <svg width="46" height="46" viewBox="0 0 46 46">339          <circle cx="14" cy="32" r="6" stroke="#5f6368" stroke-width="4" fill="none"/>340          <circle cx="32" cy="32" r="6" stroke="#5f6368" stroke-width="4" fill="none"/>341          <path d="M20 32l6-10 6 10" stroke="#5f6368" stroke-width="4" fill="none"/>342        </svg>343        <div>3 hr</div>344      </div>345    </div>346  </div>347 348  <!-- Map area -->349  <div class="map-area">350    <div class="map-placeholder">[IMG: Map with route from Cañada de Gómez to Heladería Catania]</div>351 352    <!-- Route tags -->353    <div class="route-tag white">1 hr 31 min<br>No tolls</div>354    <div class="route-tag blue">53 min<br>ARS 200.00</div>355 356    <!-- Floating buttons -->357    <div class="float-stack">358      <div class="fab">359        <!-- Layers icon -->360        <svg width="60" height="60" viewBox="0 0 60 60">361          <path d="M10 30l20-10 20 10-20 10z" fill="#5f6368"/>362          <path d="M10 40l20-10 20 10" stroke="#5f6368" stroke-width="4" fill="none" stroke-linecap="round"/>363        </svg>364      </div>365      <div class="fab">366        <!-- Magnifier -->367        <svg width="60" height="60" viewBox="0 0 60 60">368          <circle cx="26" cy="26" r="16" stroke="#5f6368" stroke-width="4" fill="none"/>369          <path d="M38 38l12 12" stroke="#5f6368" stroke-width="4" stroke-linecap="round"/>370        </svg>371      </div>372    </div>373 374    <!-- Small street preview -->375    <div class="street-preview">[IMG: Street preview]</div>376 377    <!-- Scale indicator -->378    <div class="scale">379      <div class="bar"></div>380      <div>10 mi</div>381      <div>10 km</div>382    </div>383 384    <!-- Bottom-right help locator -->385    <div class="fab" style="position:absolute; right: 36px; bottom: 540px;">386      <svg width="60" height="60" viewBox="0 0 60 60">387        <circle cx="30" cy="30" r="26" fill="#fff"/>388        <text x="30" y="38" font-size="36" text-anchor="middle" fill="#EA4335">?</text>389      </svg>390    </div>391  </div>392 393  <!-- Bottom sheet -->394  <div class="bottom-sheet">395    <div class="sheet-handle"></div>396    <div class="time-title"><span class="green">53 min</span> (72 km)</div>397    <div class="subtitle">Fastest route now due to traffic conditions</div>398    <div class="fare">399      <svg width="40" height="40" viewBox="0 0 40 40">400        <circle cx="20" cy="20" r="18" stroke="#5f6368" stroke-width="4" fill="none"/>401        <path d="M14 24c2 4 10 4 12 0 M20 12v16" stroke="#5f6368" stroke-width="4" fill="none" stroke-linecap="round"/>402      </svg>403      ARS 200.00404    </div>405    <div class="actions">406      <div class="action-pill primary">407        <!-- chevron -->408        <svg width="40" height="40" viewBox="0 0 40 40">409          <path d="M12 20l16 0" stroke="#fff" stroke-width="6" stroke-linecap="round"/>410        </svg>411        Preview412      </div>413      <div class="action-pill">414        <!-- list icon -->415        <svg width="40" height="40" viewBox="0 0 40 40">416          <path d="M8 12h24 M8 20h24 M8 28h24" stroke="#1a73e8" stroke-width="4" stroke-linecap="round"/>417        </svg>418        Steps419      </div>420      <div class="action-pill">421        <!-- bell icon -->422        <svg width="40" height="40" viewBox="0 0 40 40">423          <path d="M20 8c6 0 10 4 10 10v8H10v-8c0-6 4-10 10-10z" stroke="#1a73e8" stroke-width="4" fill="none"/>424          <circle cx="20" cy="34" r="3" fill="#1a73e8"/>425        </svg>426        Pinned427      </div>428    </div>429  </div>430 431  <!-- Gesture bar -->432  <div class="gesture-bar"></div>433 434</div>435</body>436</html>