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 Screen Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: 'Roboto', Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #f7f7f7;15    color: #202124;16  }17  /* Status bar */18  .status-bar {19    height: 90px;20    padding: 0 36px;21    display: flex;22    align-items: center;23    justify-content: space-between;24    font-size: 34px;25    color: #2c2c2c;26  }27  .status-icons { display: flex; align-items: center; gap: 28px; }28  .icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }29  /* Header search card */30  .header-card {31    background: #fff;32    padding: 24px 32px 28px 32px;33    box-shadow: 0 2px 6px rgba(0,0,0,0.08);34    border-bottom: 1px solid #ececec;35  }36  .search-row {37    display: grid;38    grid-template-columns: 80px 1fr 80px;39    align-items: center;40    gap: 18px;41    margin-bottom: 22px;42  }43  .circle-btn {44    width: 64px;45    height: 64px;46    border-radius: 50%;47    background: #f1f3f4;48    border: 1px solid #e0e0e0;49    display: flex; align-items: center; justify-content: center;50    position: relative;51  }52  .dot-blue {53    position: absolute;54    left: 14px; top: 14px;55    width: 16px; height: 16px; border-radius: 50%; background: #4285f4;56    border: 2px solid #fff;57  }58  .input-pill {59    height: 88px;60    border-radius: 18px;61    border: 1px solid #e0e0e0;62    background: #fff;63    display: flex; align-items: center;64    padding: 0 28px;65    font-size: 40px;66    color: #4285f4;67  }68  .input-pill.gray { color: #5f6368; }69  .mode-row {70    display: flex; gap: 24px; align-items: center;71    padding: 8px 8px 0 8px;72  }73  .chip {74    display: flex; align-items: center; gap: 16px;75    padding: 18px 26px;76    border-radius: 40px;77    background: #f1f3f4;78    color: #3c4043;79    font-size: 34px;80  }81  .chip.selected { background: #e8f0fe; color: #1a73e8; }82  .chip .icon { width: 44px; height: 44px; }83  /* Map area */84  .map-area {85    position: absolute;86    top: 360px;87    left: 0;88    width: 100%;89    height: 1440px;90    background: #E0E0E0;91    border-top: 1px solid #BDBDBD;92    border-bottom: 1px solid #BDBDBD;93    display: flex; align-items: center; justify-content: center;94    color: #757575;95    font-size: 42px;96  }97  /* Floating controls */98  .float-btn {99    position: absolute;100    right: 36px;101    width: 120px; height: 120px;102    border-radius: 60px;103    background: #fff;104    box-shadow: 0 4px 12px rgba(0,0,0,0.18);105    display: flex; align-items: center; justify-content: center;106  }107  .layers { top: 520px; }108  .center { top: 700px; }109  /* Street View thumbnail */110  .sv-thumb {111    position: absolute;112    left: 36px;113    top: 1680px;114    width: 280px; height: 170px;115    background: #E0E0E0;116    border: 1px solid #BDBDBD;117    display: flex; align-items: center; justify-content: center;118    color: #757575;119    font-size: 28px;120    border-radius: 12px;121  }122  .scale {123    position: absolute;124    right: 36px;125    top: 1820px;126    color: #3c4043;127    font-size: 30px;128    background: rgba(255,255,255,0.9);129    padding: 8px 16px;130    border-radius: 10px;131    border: 1px solid #ddd;132  }133  /* Bottom sheet */134  .bottom-sheet {135    position: absolute;136    left: 0; right: 0; bottom: 0;137    height: 560px;138    background: #fff;139    border-top-left-radius: 28px;140    border-top-right-radius: 28px;141    box-shadow: 0 -6px 18px rgba(0,0,0,0.12);142  }143  .grabber {144    width: 140px; height: 10px; background: #e0e0e0; border-radius: 6px;145    margin: 16px auto 10px auto;146  }147  .sheet-content { padding: 18px 36px; }148  .time-row {149    font-size: 56px; display: flex; align-items: baseline; gap: 20px;150  }151  .time-row .time { color: #ea4335; font-weight: 600; }152  .time-row .distance { color: #5f6368; font-size: 46px; }153  .subtext {154    margin-top: 18px; font-size: 38px; color: #5f6368;155  }156  .limited {157    margin-top: 22px; display: flex; align-items: center; gap: 16px;158    font-size: 38px; color: #c5221f;159  }160  .actions {161    margin-top: 34px; display: flex; gap: 26px;162  }163  .btn {164    height: 110px; padding: 0 38px; border-radius: 60px; font-size: 40px;165    display: inline-flex; align-items: center; gap: 16px; border: 1px solid #cfd8dc;166    color: #1a73e8; background: #fff;167  }168  .btn.primary {169    background: #1a73e8; color: #fff; border: 1px solid #1a73e8;170  }171  .bottom-nav-handle {172    position: absolute; left: 50%; transform: translateX(-50%);173    bottom: 18px; width: 400px; height: 12px; background: #c7c7c7; border-radius: 8px;174  }175</style>176</head>177<body>178<div id="render-target">179  <!-- Status bar -->180  <div class="status-bar">181    <div>3:25</div>182    <div class="status-icons">183      <span class="icon">184        <!-- location dot -->185        <svg viewBox="0 0 24 24" width="34" height="34"><circle cx="12" cy="12" r="4" fill="#5f6368"/></svg>186      </span>187      <span class="icon">188        <!-- wifi -->189        <svg viewBox="0 0 24 24" width="34" height="34"><path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M9 16c2-2 4-2 6 0M12 20a2 2 0 1 0 0-0.1" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round"/></svg>190      </span>191      <span class="icon">192        <!-- battery -->193        <svg viewBox="0 0 26 24" width="40" height="34"><rect x="2" y="6" width="18" height="12" rx="2" stroke="#5f6368" stroke-width="2" fill="none"/><rect x="4" y="8" width="12" height="8" fill="#5f6368"/><rect x="20" y="10" width="4" height="4" fill="#5f6368"/></svg>194      </span>195    </div>196  </div>197 198  <!-- Header card with search -->199  <div class="header-card">200    <div class="search-row">201      <div class="circle-btn">202        <div class="dot-blue"></div>203        <svg viewBox="0 0 24 24" width="40" height="40">204          <path d="M15 6l-6 6 6 6" stroke="#3c4043" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>205        </svg>206      </div>207      <div class="input-pill">Your location</div>208      <div class="circle-btn">209        <!-- vertical dots -->210        <svg viewBox="0 0 24 24" width="36" height="36">211          <circle cx="12" cy="5" r="2.2" fill="#5f6368"/><circle cx="12" cy="12" r="2.2" fill="#5f6368"/><circle cx="12" cy="19" r="2.2" fill="#5f6368"/>212        </svg>213      </div>214    </div>215    <div class="search-row" style="grid-template-columns: 80px 1fr 80px; margin-top: 6px;">216      <div class="circle-btn" style="background:#fff;">217        <!-- red pin -->218        <svg viewBox="0 0 24 24" width="42" height="42">219          <path d="M12 2c-4 0-7 3-7 7 0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7z" fill="#ea4335"/>220          <circle cx="12" cy="9" r="3" fill="#fff"/>221        </svg>222      </div>223      <div class="input-pill gray">Leisure Valley Park</div>224      <div class="circle-btn">225        <!-- swap vertical -->226        <svg viewBox="0 0 24 24" width="40" height="40">227          <path d="M7 4v10M4 7l3-3 3 3M17 20V10M14 17l3 3 3-3" stroke="#3c4043" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>228        </svg>229      </div>230    </div>231 232    <div class="mode-row">233      <div class="chip">234        <span class="icon">235          <!-- car -->236          <svg viewBox="0 0 24 24" width="40" height="40">237            <path d="M3 13l2-5c1-2 3-3 5-3h4c2 0 4 1 5 3l2 5M4 13h16M6 18a2 2 0 1 0 0-0.1M18 18a2 2 0 1 0 0-0.1" stroke="#3c4043" stroke-width="2" fill="none" stroke-linecap="round"/>238          </svg>239        </span>240        <span>28 min</span>241      </div>242      <div class="chip selected">243        <span class="icon">244          <!-- bicycle -->245          <svg viewBox="0 0 24 24" width="40" height="40">246            <circle cx="6" cy="17" r="3.5" stroke="#1a73e8" stroke-width="2" fill="none"/>247            <circle cx="18" cy="17" r="3.5" stroke="#1a73e8" stroke-width="2" fill="none"/>248            <path d="M9 17l3-7h4l-2 4M8 8h3" stroke="#1a73e8" stroke-width="2" fill="none" stroke-linecap="round"/>249          </svg>250        </span>251        <span>26 min</span>252      </div>253      <div class="chip">254        <span class="icon">255          <!-- bus -->256          <svg viewBox="0 0 24 24" width="40" height="40">257            <rect x="3" y="5" width="18" height="12" rx="2" stroke="#3c4043" stroke-width="2" fill="none"/>258            <rect x="5" y="7" width="14" height="6" fill="#3c4043"/>259            <circle cx="7" cy="17" r="1.8" fill="#3c4043"/><circle cx="17" cy="17" r="1.8" fill="#3c4043"/>260          </svg>261        </span>262        <span>1 hr 23</span>263      </div>264      <div class="chip">265        <span class="icon">266          <!-- walk -->267          <svg viewBox="0 0 24 24" width="40" height="40">268            <circle cx="12" cy="5" r="2" fill="#3c4043"/>269            <path d="M10 9l2 3 3 1-1 4M11 13l-2 6" stroke="#3c4043" stroke-width="2" fill="none" stroke-linecap="round"/>270          </svg>271        </span>272        <span>2 hr 50</span>273      </div>274    </div>275  </div>276 277  <!-- Map area -->278  <div class="map-area">[IMG: Map with route]</div>279 280  <!-- Floating controls on map -->281  <div class="float-btn layers">282    <!-- layers icon -->283    <svg viewBox="0 0 24 24" width="56" height="56">284      <path d="M12 3l9 5-9 5-9-5 9-5zM3 14l9 5 9-5" stroke="#3c4043" stroke-width="2" fill="none" stroke-linejoin="round"/>285    </svg>286  </div>287  <div class="float-btn center">288    <!-- target/crosshair -->289    <svg viewBox="0 0 24 24" width="56" height="56">290      <circle cx="12" cy="12" r="5" stroke="#3c4043" stroke-width="2" fill="none"/>291      <path d="M12 2v4M12 18v4M2 12h4M18 12h4" stroke="#3c4043" stroke-width="2" fill="none" stroke-linecap="round"/>292    </svg>293  </div>294 295  <!-- Street View thumbnail -->296  <div class="sv-thumb">[IMG: Street View Preview]</div>297 298  <!-- Scale indicator -->299  <div class="scale">1 mi   2 km</div>300 301  <!-- Bottom sheet -->302  <div class="bottom-sheet">303    <div class="grabber"></div>304    <div class="sheet-content">305      <div class="time-row">306        <span class="time">26 min</span>307        <span class="distance">(14 km)</span>308      </div>309      <div class="subtext">Best route now due to traffic conditions</div>310      <div class="limited">311        <svg viewBox="0 0 24 24" width="40" height="40">312          <circle cx="12" cy="12" r="10" stroke="#c5221f" stroke-width="2" fill="none"/>313          <text x="12" y="16" text-anchor="middle" font-size="14" fill="#c5221f" font-family="Arial">P</text>314        </svg>315        Limited316      </div>317      <div class="actions">318        <div class="btn primary">319          <svg viewBox="0 0 24 24" width="40" height="40">320            <path d="M5 12l14-7-7 14-2-5-5-2z" fill="#fff"/>321          </svg>322          Start323        </div>324        <div class="btn">325          <svg viewBox="0 0 24 24" width="40" height="40">326            <path d="M4 6h16M4 12h16M4 18h16" stroke="#1a73e8" stroke-width="2" fill="none" stroke-linecap="round"/>327          </svg>328          Steps329        </div>330        <div class="btn">331          <svg viewBox="0 0 24 24" width="40" height="40">332            <path d="M12 2v20M2 12h20" stroke="#1a73e8" stroke-width="2" fill="none" stroke-linecap="round"/>333          </svg>334          Pin335        </div>336      </div>337    </div>338    <div class="bottom-nav-handle"></div>339  </div>340</div>341</body>342</html>