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: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #F2F3F6;14  }15 16  /* Top dark area */17  .top-dark {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 560px;23    background: #000000;24    color: #FFFFFF;25  }26  .statusbar {27    position: absolute;28    top: 20px;29    left: 30px;30    right: 30px;31    height: 60px;32    color: #fff;33    font-size: 40px;34    display: flex;35    align-items: center;36    justify-content: space-between;37    opacity: 0.95;38  }39  .status-icons {40    display: flex;41    align-items: center;42    gap: 26px;43    font-size: 34px;44  }45  .status-dot {46    width: 12px; height: 12px; border-radius: 50%; background: #fff; display: inline-block;47  }48 49  .uturn-block {50    position: absolute;51    left: 80px;52    top: 170px;53    display: flex;54    align-items: center;55    gap: 40px;56  }57  .uturn-text {58    font-weight: 700;59    font-size: 90px;60    color: #C7C7C7;61    letter-spacing: 1px;62  }63 64  .and-then {65    position: absolute;66    left: 0;67    top: 560px;68    width: 1080px;69    height: 90px;70    background: #1F1F20;71    display: flex;72    align-items: center;73    padding: 0 36px;74    color: #AFAFAF;75    font-size: 44px;76    gap: 20px;77  }78 79  /* Cards */80  .pill-card {81    position: absolute;82    top: 670px;83    left: 40px;84    width: 1000px;85    background: #FFFFFF;86    border-radius: 40px;87    box-shadow: 0 6px 18px rgba(0,0,0,0.15);88    padding: 30px 34px;89  }90  .pill-header {91    display: flex;92    align-items: center;93    justify-content: space-between;94  }95  .round-icon {96    width: 110px;97    height: 110px;98    border-radius: 55px;99    background: #F2F4F8;100    display: flex;101    align-items: center;102    justify-content: center;103  }104  .time {105    font-size: 80px;106    font-weight: 800;107    color: #222;108    text-align: center;109    flex: 1;110  }111  .subline {112    text-align: center;113    color: #6B7280;114    font-size: 42px;115    margin-top: 8px;116  }117 118  .route-card {119    position: absolute;120    top: 860px;121    left: 60px;122    width: 960px;123    background: #FFFFFF;124    border-radius: 36px;125    box-shadow: 0 8px 20px rgba(0,0,0,0.12);126    padding: 40px 40px 36px 40px;127  }128  .route-subtitle {129    color: #8A8A8A;130    font-size: 38px;131    text-align: center;132    margin-bottom: 12px;133  }134  .route-title {135    font-size: 50px;136    font-weight: 800;137    line-height: 64px;138    color: #222;139    text-align: center;140  }141  .toll-chip {142    margin: 26px auto 10px auto;143    width: max-content;144    padding: 18px 26px;145    border-radius: 18px;146    background: #565A5E;147    color: #fff;148    font-size: 38px;149    display: flex;150    align-items: center;151    gap: 14px;152  }153  .route-progress {154    position: relative;155    margin: 30px 10px 18px 10px;156    height: 16px;157    background: #E2E6EA;158    border-radius: 10px;159  }160  .seg {161    position: absolute; top: 0; height: 100%; border-radius: 10px;162  }163  .seg.y { left: 140px; width: 160px; background: #F4C74B; }164  .seg.o { left: 340px; width: 110px; background: #F59A52; }165  .seg.r { left: 470px; width: 120px; background: #EF6A64; }166  .progress-arrow {167    position: absolute; left: -26px; top: -16px;168  }169  .progress-end {170    position: absolute; right: -14px; top: -18px;171    width: 38px; height: 38px; background: #EE5453; border-radius: 50%;172    border: 6px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.15);173  }174 175  .route-actions {176    margin-top: 20px;177    display: flex;178    align-items: center;179    gap: 26px;180  }181  .circle-action {182    width: 120px; height: 120px; border-radius: 60px;183    background: #EAF0F8;184    display: flex; align-items: center; justify-content: center;185  }186  .add-text {187    color: #2F6FEA; font-size: 44px; font-weight: 700; margin-right: 20px;188  }189 190  /* Lower utilities row */191  .utilities {192    position: absolute;193    bottom: 280px;194    left: 0;195    width: 1080px;196    display: grid;197    grid-template-columns: repeat(3, 1fr);198    background: #FFFFFF;199    border-top: 1px solid #E5E7EB;200    border-bottom: 1px solid #E5E7EB;201  }202  .util {203    height: 240px;204    display: flex; flex-direction: column; align-items: center; justify-content: center;205    border-right: 1px solid #E5E7EB;206    color: #4B5563;207  }208  .util:last-child { border-right: none; }209  .util .circle {210    width: 120px; height: 120px; border-radius: 60px; background: #E5E7EB;211    display: flex; align-items: center; justify-content: center; margin-bottom: 18px;212  }213  .util label { font-size: 40px; color: #5D6573; }214 215  /* Bottom buttons */216  .bottom-actions {217    position: absolute;218    bottom: 80px;219    left: 40px;220    width: 1000px;221    display: flex;222    gap: 30px;223    align-items: center;224  }225  .btn {226    height: 140px;227    border-radius: 70px;228    display: flex; align-items: center; justify-content: center;229    color: #fff; font-size: 54px; font-weight: 800;230    box-shadow: 0 8px 16px rgba(0,0,0,0.15);231  }232  .btn.stop { width: 380px; background: #EF6A64; }233  .btn.resume { width: 590px; background: #2E7AF0; }234 235  /* Tiny gesture bar */236  .gesture {237    position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);238    width: 280px; height: 10px; background: #C9CDD3; border-radius: 6px;239  }240</style>241</head>242<body>243<div id="render-target">244 245  <div class="top-dark">246    <div class="statusbar">247      <div>12:56</div>248      <div class="status-icons">249        <span style="opacity:.85;">▲</span>250        <span>👻</span>251        <span>👻</span>252        <span>💬</span>253        <span class="status-dot"></span>254        <span style="font-size:34px;">📍</span>255        <span style="font-size:34px;">🔇</span>256        <span style="font-size:34px;">📶</span>257        <span style="font-size:34px;">🔋</span>258      </div>259    </div>260 261    <div class="uturn-block">262      <!-- Simple U-turn icon -->263      <svg width="150" height="180" viewBox="0 0 150 180">264        <path d="M75 20 v80 a50 50 0 0 0 50 50 h15" stroke="#BDBDBD" stroke-width="18" fill="none" stroke-linecap="round"/>265        <path d="M75 140 l-28 0 l14 26 z" fill="#BDBDBD"/>266      </svg>267      <div class="uturn-text">0 m</div>268    </div>269  </div>270 271  <div class="and-then">272    <!-- small right-turn icon -->273    <svg width="60" height="50" viewBox="0 0 60 50">274      <path d="M10 40 v-18 a12 12 0 0 1 12 -12 h20" stroke="#AFAFAF" stroke-width="6" fill="none" stroke-linecap="round"/>275      <path d="M42 6 l12 10 l-12 10" stroke="#AFAFAF" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>276    </svg>277    <span>and then</span>278  </div>279 280  <!-- Time pill card -->281  <div class="pill-card">282    <div class="pill-header">283      <div class="round-icon">284        <!-- Simple gear -->285        <svg width="64" height="64" viewBox="0 0 64 64">286          <circle cx="32" cy="32" r="16" fill="#B0B5BC"/>287          <circle cx="32" cy="32" r="8" fill="#FFFFFF"/>288        </svg>289      </div>290      <div class="time">1:51 PM</div>291      <div class="round-icon">292        <!-- Simple speaker -->293        <svg width="64" height="64" viewBox="0 0 64 64">294          <path d="M10 40 h12 l12 10 v-36 l-12 10 h-12z" fill="#B0B5BC"/>295          <path d="M46 24 q8 8 0 16" stroke="#B0B5BC" stroke-width="4" fill="none" stroke-linecap="round"/>296        </svg>297      </div>298    </div>299    <div class="subline">55 min • 25 km</div>300  </div>301 302  <!-- Route detail card -->303  <div class="route-card">304    <div class="route-subtitle">Lal Qila, Delhi, DL</div>305    <div class="route-title">Via Mathura Rd, Lala Lajpat Rai Rd<br/>New Delhi</div>306 307    <div class="toll-chip">308      <svg width="36" height="36" viewBox="0 0 36 36">309        <circle cx="18" cy="18" r="16" fill="#7C8085"/>310        <text x="18" y="23" font-size="22" text-anchor="middle" fill="#fff">i</text>311      </svg>312      <span>TOLL ~ ₹50.00</span>313    </div>314 315    <div class="route-progress">316      <!-- colored segments -->317      <div class="seg y"></div>318      <div class="seg o"></div>319      <div class="seg r"></div>320      <!-- arrow at start -->321      <svg class="progress-arrow" width="48" height="48" viewBox="0 0 48 48">322        <path d="M6 24 l26 -10 v20z" fill="#4BA5FF"/>323      </svg>324      <div class="progress-end"></div>325    </div>326 327    <div class="route-actions">328      <div class="circle-action">329        <svg width="64" height="64" viewBox="0 0 64 64">330          <path d="M10 32 h34" stroke="#2F6FEA" stroke-width="8" stroke-linecap="round"/>331          <path d="M38 20 l16 12 l-16 12" stroke="#2F6FEA" stroke-width="8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>332        </svg>333      </div>334      <div class="add-text">Add a stop</div>335 336      <div class="circle-action">337        <!-- Gas pump -->338        <svg width="64" height="64" viewBox="0 0 64 64">339          <rect x="14" y="20" width="26" height="28" rx="4" fill="#2F6FEA"/>340          <rect x="20" y="26" width="14" height="10" fill="#FFFFFF"/>341          <path d="M44 22 v18 h8 v-14 l-6 -6" stroke="#2F6FEA" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>342        </svg>343      </div>344      <div class="circle-action">345        <!-- Fork & knife -->346        <svg width="64" height="64" viewBox="0 0 64 64">347          <rect x="12" y="10" width="8" height="36" fill="#2F6FEA"/>348          <rect x="24" y="10" width="8" height="36" fill="#2F6FEA"/>349          <rect x="40" y="10" width="6" height="36" fill="#2F6FEA"/>350        </svg>351      </div>352      <div class="circle-action">353        <!-- Parking P -->354        <svg width="64" height="64" viewBox="0 0 64 64">355          <rect x="10" y="10" width="44" height="44" rx="10" fill="#2F6FEA"/>356          <text x="32" y="40" font-size="28" text-anchor="middle" fill="#fff" font-weight="700">P</text>357        </svg>358      </div>359    </div>360  </div>361 362  <!-- Utilities row -->363  <div class="utilities">364    <div class="util">365      <div class="circle">366        <!-- Routes icon -->367        <svg width="60" height="60" viewBox="0 0 60 60">368          <path d="M12 46 c6 -18 20 -16 26 -30" stroke="#6C7280" stroke-width="6" fill="none" stroke-linecap="round"/>369          <path d="M42 12 l8 8 l-12 2" stroke="#6C7280" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>370        </svg>371      </div>372      <label>Routes</label>373    </div>374    <div class="util">375      <div class="circle">376        <!-- Share (paper plane) -->377        <svg width="60" height="60" viewBox="0 0 60 60">378          <path d="M8 30 l44 -16 l-18 42 l-6 -16 l-12 -2 z" fill="#6C7280"/>379        </svg>380      </div>381      <label>Share drive</label>382    </div>383    <div class="util">384      <div class="circle">385        <!-- Overview path -->386        <svg width="60" height="60" viewBox="0 0 60 60">387          <circle cx="12" cy="42" r="6" fill="#6C7280"/>388          <circle cx="48" cy="18" r="6" fill="#6C7280"/>389          <path d="M18 40 q12 -8 24 -16" stroke="#6C7280" stroke-width="6" fill="none" stroke-linecap="round"/>390        </svg>391      </div>392      <label>Overview</label>393    </div>394  </div>395 396  <!-- Bottom buttons -->397  <div class="bottom-actions">398    <div class="btn stop">Stop</div>399    <div class="btn resume">Resume</div>400  </div>401 402  <div class="gesture"></div>403</div>404</body>405</html>