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; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121417;15    color: #EAEAEA;16    font-family: Arial, Helvetica, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 110px;26    background: #0D0F12;27    display: flex;28    align-items: center;29    padding: 0 28px;30    color: #FFFFFF;31    font-size: 42px;32    letter-spacing: 0.5px;33  }34  .status-left { flex: 1; }35  .status-right {36    display: flex;37    gap: 28px;38    align-items: center;39  }40  .status-icon svg { width: 42px; height: 42px; fill: #FFFFFF; opacity: 0.9; }41 42  /* Header */43  .header {44    position: absolute;45    top: 110px;46    left: 0;47    width: 1080px;48    height: 150px;49    background: #2A2D31;50    display: flex;51    align-items: center;52    padding: 0 28px;53    box-sizing: border-box;54    border-bottom: 1px solid #23262A;55  }56  .back-btn {57    width: 96px;58    height: 96px;59    display: flex;60    align-items: center;61    justify-content: center;62    margin-right: 24px;63  }64  .header-title {65    font-size: 58px;66    font-weight: 600;67    color: #D9D9D9;68  }69 70  /* Map area */71  .map-wrap {72    position: absolute;73    top: 260px;74    left: 0;75    width: 1080px;76    height: 910px;77    background: #182029;78  }79  .map-image {80    position: absolute;81    top: 0;82    left: 0;83    width: 1080px;84    height: 910px;85    background: #28323B;86    border-top: 1px solid #1E252B;87    border-bottom: 1px solid #1E252B;88    display: flex;89    justify-content: center;90    align-items: center;91    color: #AAB3BB;92    font-size: 40px;93  }94  .google-tag {95    position: absolute;96    bottom: 22px;97    left: 30px;98    color: #CFCFCF;99    font-size: 34px;100    opacity: 0.8;101  }102  .loc-btn {103    position: absolute;104    top: 80px;105    left: 40px;106    width: 110px; height: 110px;107    border-radius: 55px;108    background: #2E343A;109    display: flex; align-items: center; justify-content: center;110    box-shadow: 0 4px 10px rgba(0,0,0,0.4);111    border: 2px solid #3B4147;112  }113  .loc-btn svg { width: 64px; height: 64px; fill: #C9CDD2; }114 115  /* Route overlay card on map */116  .route-summary {117    position: absolute;118    bottom: -2px;119    left: 0;120    width: 1080px;121    background: #1A1D20;122    padding: 32px 36px;123    box-sizing: border-box;124    border-top-left-radius: 22px;125    border-top-right-radius: 22px;126    border-top: 1px solid #2A2E32;127  }128  .route-title {129    font-size: 42px;130    line-height: 1.3;131    color: #FFFFFF;132    margin-bottom: 16px;133  }134  .route-time {135    font-size: 34px;136    color: #B8BEC5;137  }138 139  /* Time window bar */140  .time-window {141    position: absolute;142    top: 1210px;143    left: 0;144    width: 1080px;145    height: 120px;146    background: #212529;147    border-top: 1px solid #2C3136;148    border-bottom: 1px solid #2C3136;149    display: flex;150    align-items: center;151    justify-content: center;152    box-sizing: border-box;153    padding: 0 24px;154    gap: 24px;155  }156  .tw-arrow { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; }157  .tw-arrow svg { width: 54px; height: 54px; fill: #9AA0A6; }158  .tw-label { font-size: 40px; color: #E0E3E7; }159  .tw-muted { color: #98A0A8; font-size: 34px; margin-right: auto; margin-left: 24px; }160 161  /* Itinerary card */162  .card {163    position: absolute;164    top: 1330px;165    left: 24px;166    width: 1032px;167    background: #1E2125;168    border: 1px solid #2E3338;169    border-radius: 18px;170    padding: 28px;171    box-sizing: border-box;172    color: #DDE2E6;173  }174  .card .line { width: 100%; height: 1px; background: #2F3439; margin: 22px 0; }175  .row {176    display: flex;177    align-items: center;178    gap: 20px;179  }180  .step-dot {181    width: 24px; height: 24px; border-radius: 12px; background: #6C757D;182    margin-right: 16px;183  }184  .step-title {185    font-size: 40px; font-weight: 600; color: #FFFFFF;186  }187  .step-sub {188    font-size: 32px; color: #A7AFB7; margin-top: 8px;189  }190  .walk-icon, .bus-icon, .camera-icon {191    width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center;192    border-radius: 12px; background: #2A2F35; border: 1px solid #3B4147;193  }194  .bus-small {195    width: 64px; height: 64px; background: #F37721; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #E56B16;196  }197  .bus-small svg { width: 36px; height: 36px; fill: #FFFFFF; }198 199  /* Ad strip */200  .ad-strip {201    position: absolute;202    top: 1760px;203    left: 0;204    width: 1080px;205    height: 152px;206    background: #FFFFFF;207    display: flex;208    align-items: center;209    gap: 16px;210    padding: 8px 16px;211    box-sizing: border-box;212    overflow: hidden;213  }214  .thumb {215    width: 150px; height: 136px;216    background: #E0E0E0;217    border: 1px solid #BDBDBD;218    display: flex; align-items: center; justify-content: center;219    color: #757575; font-size: 28px; text-align: center;220  }221 222  /* Bottom actions */223  .bottom-actions {224    position: absolute;225    bottom: 70px;226    left: 0;227    width: 1080px;228    padding: 26px 28px;229    box-sizing: border-box;230    background: #1A1D20;231    border-top: 1px solid #2A2E32;232    display: flex;233    align-items: center;234    gap: 22px;235  }236  .btn {237    height: 120px;238    padding: 0 44px;239    border-radius: 60px;240    display: flex; align-items: center; gap: 16px;241    font-size: 42px; font-weight: 600;242    border: none;243    color: #FFFFFF;244  }245  .btn-green { background: #1EC66C; }246  .btn-blue { background: #3B8CFF; }247  .btn-dark {248    background: #2A2F35;249    color: #D5DBE1;250    padding: 0 36px;251    font-size: 40px;252  }253  .btn svg { width: 56px; height: 56px; fill: #FFFFFF; }254 255  .home-indicator {256    position: absolute;257    bottom: 18px;258    left: 50%;259    transform: translateX(-50%);260    width: 300px;261    height: 12px;262    background: #FFFFFF;263    border-radius: 6px;264    opacity: 0.85;265  }266</style>267</head>268<body>269<div id="render-target">270 271  <!-- Status Bar -->272  <div class="status-bar">273    <div class="status-left">4:22</div>274    <div class="status-right">275      <div class="status-icon">276        <!-- simple triangle navigation icon -->277        <svg viewBox="0 0 24 24"><path d="M12 2l6 20-6-4-6 4 6-20z"/></svg>278      </div>279      <div class="status-icon">280        <!-- compass -->281        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M9 15l6-6-4 8-2-2z" fill="#121417"/></svg>282      </div>283      <div class="status-icon">284        <!-- currency -->285        <svg viewBox="0 0 24 24"><path d="M6 5h12v2H6v2h8v2H6v2h12v2H6" /></svg>286      </div>287      <div class="status-icon">288        <!-- location -->289        <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 017 7c0 5-7 13-7 13S5 14 5 9a7 7 0 017-7zm0 9a2 2 0 100-4 2 2 0 000 4z"/></svg>290      </div>291      <div class="status-icon">292        <!-- wifi -->293        <svg viewBox="0 0 24 24"><path d="M2 8a14 14 0 0120 0l-2 2a10 10 0 00-16 0L2 8zm4 4a8 8 0 0112 0l-2 2a4 4 0 00-8 0l-2-2zm6 6l-2 2 2 2 2-2-2-2z"/></svg>294      </div>295      <div class="status-icon">296        <!-- battery -->297        <svg viewBox="0 0 24 24"><rect x="2" y="6" width="18" height="12" rx="2"/><rect x="21" y="10" width="2" height="4"/></svg>298      </div>299    </div>300  </div>301 302  <!-- Header -->303  <div class="header">304    <div class="back-btn">305      <svg viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7" stroke="#EAEAEA" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>306    </div>307    <div class="header-title">Directions</div>308  </div>309 310  <!-- Map -->311  <div class="map-wrap">312    <div class="loc-btn">313      <svg viewBox="0 0 24 24"><path d="M12 4v4M12 16v4M4 12h4M16 12h4" stroke="#C9CDD2" stroke-width="2" fill="none" stroke-linecap="round"/><circle cx="12" cy="12" r="3"/></svg>314    </div>315    <div class="map-image">[IMG: Google Map with route from New Delhi to Gurugram]</div>316    <div class="google-tag">Google</div>317 318    <div class="route-summary">319      <div class="route-title">Rajiv Chowk Flyover, Shanti Nagar, Shivaji Nagar, Sector 11, Gurugram, Haryana, India</div>320      <div class="route-time">1 hr 52 min</div>321    </div>322  </div>323 324  <!-- Time window -->325  <div class="time-window">326    <div class="tw-muted">Earlier</div>327    <div class="tw-arrow"><svg viewBox="0 0 24 24"><path d="M14 6l-6 6 6 6" fill="none" stroke="#9AA0A6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>328    <div class="tw-label">4:21 pm - 6:13 pm</div>329    <div class="tw-arrow"><svg viewBox="0 0 24 24"><path d="M10 6l6 6-6 6" fill="none" stroke="#9AA0A6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></div>330    <div class="tw-muted">Later</div>331  </div>332 333  <!-- Itinerary Card -->334  <div class="card">335    <div class="row" style="margin-bottom: 12px;">336      <div class="step-dot"></div>337      <div>338        <div class="step-title">Leave at 4:21 pm from</div>339        <div class="step-title" style="margin-top:8px;">Pacific Mall Tagore Garden</div>340        <div class="step-sub">Najafgarh Road, Tagore Garden, Tilak Nagar, New Delhi, Delhi, India</div>341      </div>342    </div>343    <div class="line"></div>344 345    <div class="row" style="margin: 16px 0;">346      <div class="walk-icon">347        <svg viewBox="0 0 24 24"><path d="M13 4a2 2 0 11-4 0 2 2 0 014 0zM6 22l3-8 3 3 2 5h-3l-2-4-2 4H6zm10-8l-3-4-3 3" fill="none" stroke="#DDE2E6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>348      </div>349      <div class="step-title" style="font-weight:500;">Walk to</div>350    </div>351 352    <div class="row" style="margin: 10px 0;">353      <div class="bus-small">354        <svg viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="12" rx="2"/><circle cx="8" cy="18" r="2"/><circle cx="16" cy="18" r="2"/></svg>355      </div>356      <div style="flex:1;">357        <div class="step-title" style="font-weight:600;">Subhash Nagar Crossing / Mukherji</div>358      </div>359      <div class="camera-icon">360        <svg viewBox="0 0 24 24"><path d="M7 7h3l2-2h4l2 2h3v12H4V7h3z" fill="none" stroke="#DDE2E6" stroke-width="2"/><circle cx="12" cy="13" r="4"/></svg>361      </div>362    </div>363  </div>364 365  <!-- Ad strip -->366  <div class="ad-strip">367    <div class="thumb">[IMG: App icon]</div>368    <div class="thumb">[IMG: Calendar Poster]</div>369    <div class="thumb">[IMG: Sports Shoes]</div>370    <div class="thumb">[IMG: Denim Dress]</div>371    <div class="thumb">[IMG: Kids Sneakers]</div>372    <div class="thumb">[IMG: Ceramic Mug]</div>373  </div>374 375  <!-- Bottom actions -->376  <div class="bottom-actions">377    <button class="btn btn-green">378      <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7-11-7z"/></svg>379      Start380    </button>381    <button class="btn btn-blue">382      <svg viewBox="0 0 24 24"><path d="M4 12a8 8 0 0116 0M7 12a5 5 0 0110 0M10 12a2 2 0 014 0" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/></svg>383      Live location384    </button>385    <button class="btn btn-dark">386      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="#D5DBE1" stroke-width="2"/><path d="M12 8v5M12 16h.01" stroke="#D5DBE1" stroke-width="2" stroke-linecap="round"/></svg>387    </button>388    <button class="btn btn-dark">389      <svg viewBox="0 0 24 24"><path d="M4 12h16M12 4v16" stroke="#D5DBE1" stroke-width="2" stroke-linecap="round"/></svg>390    </button>391  </div>392 393  <div class="home-indicator"></div>394</div>395</body>396</html>