GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Navigation UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #F0F2F4;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 140px;23    background: #E6E5E6;24    color: #555;25    display: flex;26    align-items: center;27    padding: 0 40px;28    box-sizing: border-box;29    font-size: 38px;30    letter-spacing: 0.5px;31  }32  .status-left { flex: 1; }33  .status-right { display: flex; gap: 30px; align-items: center; }34  .sb-icon { width: 48px; height: 48px; }35  .sb-icon svg { width: 100%; height: 100%; }36 37  /* Map placeholder */38  .map {39    position: absolute;40    top: 140px;41    left: 0;42    width: 1080px;43    height: 1900px;44    background: #EDF1F3;45    border-top: 1px solid #D5D9DC;46    display: flex;47    justify-content: center;48    align-items: center;49    color: #757575;50    font-size: 44px;51    letter-spacing: 1px;52  }53 54  /* Navigation card */55  .nav-card {56    position: absolute;57    top: 170px;58    left: 40px;59    width: 1000px;60    height: 260px;61    background: #128A49; /* Google-like green */62    color: #fff;63    border-radius: 38px;64    box-shadow: 0 10px 20px rgba(0,0,0,0.15);65  }66  .nav-content {67    position: absolute;68    left: 170px;69    top: 70px;70    font-weight: 700;71    font-size: 68px;72  }73  .up-arrow {74    position: absolute;75    left: 40px;76    top: 60px;77    width: 96px;78    height: 120px;79  }80  .voice-bubble {81    position: absolute;82    right: 24px;83    top: 24px;84    width: 130px;85    height: 130px;86    background: #fff;87    border-radius: 50%;88    box-shadow: 0 6px 14px rgba(0,0,0,0.18);89    display: flex;90    justify-content: center;91    align-items: center;92  }93  .mic-icon { width: 64px; height: 64px; }94 95  .then-card {96    position: absolute;97    left: 0;98    bottom: -60px;99    width: 360px;100    height: 160px;101    background: #0E6E3A;102    color: #fff;103    border-radius: 34px;104    box-shadow: 0 10px 18px rgba(0,0,0,0.18);105    display: flex;106    align-items: center;107    padding: 0 32px;108    box-sizing: border-box;109    gap: 22px;110  }111  .then-text { font-size: 56px; font-weight: 700; }112 113  /* Right-side floating tools */114  .tools {115    position: absolute;116    right: 36px;117    top: 520px;118    display: flex;119    flex-direction: column;120    gap: 36px;121  }122  .fab {123    width: 120px;124    height: 120px;125    background: #fff;126    border-radius: 60px;127    box-shadow: 0 10px 20px rgba(0,0,0,0.18);128    display: flex;129    justify-content: center;130    align-items: center;131  }132  .fab svg { width: 64px; height: 64px; }133 134  /* Speed bubble */135  .speed {136    position: absolute;137    left: 40px;138    bottom: 540px;139    width: 120px;140    height: 120px;141    background: #fff;142    border-radius: 60px;143    box-shadow: 0 10px 20px rgba(0,0,0,0.18);144    display: flex;145    flex-direction: column;146    justify-content: center;147    align-items: center;148    color: #111;149    font-size: 40px;150    font-weight: 700;151  }152  .speed span {153    font-size: 32px;154    color: #5e5e5e;155    font-weight: 600;156  }157 158  /* Bottom sheet */159  .bottom-sheet {160    position: absolute;161    left: 0;162    bottom: 0;163    width: 1080px;164    height: 360px;165    background: #fff;166    border-top-left-radius: 44px;167    border-top-right-radius: 44px;168    box-shadow: 0 -12px 20px rgba(0,0,0,0.15);169  }170  .sheet-handle {171    position: absolute;172    top: 18px;173    left: 50%;174    transform: translateX(-50%);175    width: 140px;176    height: 12px;177    background: #C9CDD1;178    border-radius: 6px;179  }180  .sheet-content {181    position: absolute;182    top: 70px;183    left: 0;184    width: 100%;185    text-align: center;186  }187  .eta {188    color: #1B8E4B;189    font-size: 80px;190    font-weight: 800;191  }192  .details {193    margin-top: 12px;194    color: #5e6a75;195    font-size: 42px;196  }197  .sheet-left, .sheet-right {198    position: absolute;199    top: 110px;200    width: 140px;201    height: 140px;202    background: #fff;203    border-radius: 70px;204    box-shadow: 0 10px 20px rgba(0,0,0,0.15);205    display: flex;206    justify-content: center;207    align-items: center;208  }209  .sheet-left { left: 30px; }210  .sheet-right { right: 30px; }211  .sheet-left svg, .sheet-right svg { width: 72px; height: 72px; }212 213  /* Home indicator */214  .home-indicator {215    position: absolute;216    bottom: 18px;217    left: 50%;218    transform: translateX(-50%);219    width: 280px;220    height: 14px;221    background: #B9BDC2;222    border-radius: 7px;223  }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">4:05</div>232    <div class="status-right">233      <!-- simplified icons -->234      <div class="sb-icon">235        <svg viewBox="0 0 24 24">236          <path d="M12 2l-2 4h4l-2-4zm0 18a8 8 0 100-16 8 8 0 000 16z" fill="#666"/>237        </svg>238      </div>239      <div class="sb-icon">240        <svg viewBox="0 0 24 24">241          <circle cx="12" cy="12" r="8" stroke="#666" stroke-width="2" fill="none"/>242          <path d="M12 6v6l4 2" stroke="#666" stroke-width="2" fill="none"/>243        </svg>244      </div>245      <div class="sb-icon">246        <svg viewBox="0 0 24 24">247          <path d="M12 2l7 7h-5v9H10V9H5l7-7z" fill="#666"/>248        </svg>249      </div>250      <div class="sb-icon">251        <svg viewBox="0 0 24 24">252          <path d="M3 8l9-6 9 6v8l-9 6-9-6V8z" fill="none" stroke="#666" stroke-width="2"/>253          <path d="M12 7v5" stroke="#666" stroke-width="2"/>254        </svg>255      </div>256    </div>257  </div>258 259  <!-- Map -->260  <div class="map">261    <div style="width: 92%; height: 92%; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; justify-content:center; align-items:center; color:#757575;">262      [IMG: Map]263    </div>264  </div>265 266  <!-- Navigation Card -->267  <div class="nav-card">268    <svg class="up-arrow" viewBox="0 0 80 110">269      <!-- dashed stem -->270      <path d="M40 80 V40" stroke="#fff" stroke-width="10" stroke-dasharray="10,10" fill="none" stroke-linecap="round"/>271      <!-- arrow head -->272      <path d="M20 50 L40 30 L60 50" stroke="#fff" stroke-width="12" fill="none" stroke-linecap="round" stroke-linejoin="round"/>273    </svg>274    <div class="nav-content">Head east</div>275 276    <div class="voice-bubble">277      <svg class="mic-icon" viewBox="0 0 64 64">278        <!-- mic body -->279        <rect x="26" y="16" width="12" height="22" rx="6" fill="#4285F4"/>280        <!-- mic tip -->281        <rect x="28" y="38" width="8" height="6" rx="3" fill="#EA4335"/>282        <!-- stand -->283        <path d="M20 42c0 8 24 8 24 0" stroke="#34A853" stroke-width="6" fill="none" stroke-linecap="round"/>284        <rect x="30" y="46" width="4" height="8" fill="#FBBC05"/>285      </svg>286    </div>287 288    <div class="then-card">289      <svg viewBox="0 0 72 72" width="72" height="72">290        <path d="M20 52 V28 H44 L44 40" stroke="#fff" stroke-width="8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>291        <path d="M44 40 L56 32" stroke="#fff" stroke-width="8" stroke-linecap="round"/>292      </svg>293      <div class="then-text">Then</div>294    </div>295  </div>296 297  <!-- Right-side tools -->298  <div class="tools">299    <div class="fab">300      <!-- search icon -->301      <svg viewBox="0 0 64 64">302        <circle cx="28" cy="28" r="16" stroke="#444" stroke-width="4" fill="none"/>303        <path d="M42 42 L56 56" stroke="#444" stroke-width="4" stroke-linecap="round"/>304      </svg>305    </div>306    <div class="fab">307      <!-- speaker icon -->308      <svg viewBox="0 0 64 64">309        <path d="M12 28h12l14-10v28l-14-10H12z" fill="#666"/>310        <path d="M44 22c4 4 4 16 0 20" stroke="#666" stroke-width="4" fill="none" stroke-linecap="round"/>311      </svg>312    </div>313    <div class="fab">314      <!-- compass icon -->315      <svg viewBox="0 0 64 64">316        <circle cx="32" cy="32" r="22" stroke="#C0C4C7" stroke-width="4" fill="none"/>317        <path d="M32 16 L42 32 L32 36 L22 32 Z" fill="#EA4335"/>318        <path d="M32 28 L28 32 L32 34 Z" fill="#4A4D50"/>319      </svg>320    </div>321    <div class="fab">322      <!-- chat plus icon -->323      <svg viewBox="0 0 64 64">324        <path d="M12 16h40v26H28l-8 8v-8H12z" fill="none" stroke="#666" stroke-width="4" stroke-linejoin="round"/>325        <path d="M36 28h0" stroke="#666"/>326        <path d="M32 26v12M26 32h12" stroke="#666" stroke-width="4" stroke-linecap="round"/>327      </svg>328    </div>329  </div>330 331  <!-- Speed bubble -->332  <div class="speed">333    --<span>km/h</span>334  </div>335 336  <!-- Bottom sheet -->337  <div class="bottom-sheet">338    <div class="sheet-handle"></div>339    <div class="sheet-left">340      <svg viewBox="0 0 64 64">341        <path d="M18 18 L46 46" stroke="#4A4D50" stroke-width="6" stroke-linecap="round"/>342        <path d="M18 46 L46 18" stroke="#4A4D50" stroke-width="6" stroke-linecap="round"/>343      </svg>344    </div>345    <div class="sheet-right">346      <svg viewBox="0 0 64 64">347        <path d="M32 48 V24" stroke="#4A4D50" stroke-width="6" stroke-linecap="round"/>348        <path d="M20 36 L32 24 L44 36" stroke="#4A4D50" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>349      </svg>350    </div>351    <div class="sheet-content">352      <div class="eta">23 min</div>353      <div class="details">12 km • 4:28 PM</div>354    </div>355    <div class="home-indicator"></div>356  </div>357 358</div>359</body>360</html>