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>Map Route UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    border-radius: 0;16    box-shadow: none;17    color: #2b2b2b;18  }19 20  /* Status bar */21  .status-bar {22    position: absolute;23    top: 20px;24    left: 32px;25    right: 32px;26    height: 60px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    pointer-events: none;31    color: #2b2b2b;32    opacity: 0.9;33    font-weight: 600;34  }35  .status-bar .right {36    display: flex; gap: 24px; align-items: center;37  }38  .status-icon svg { width: 34px; height: 34px; fill: none; stroke: #2b2b2b; stroke-width: 2.5px; }39 40  /* Map placeholder */41  .map {42    position: absolute;43    top: 0;44    left: 0;45    width: 1080px;46    height: 1760px;47    background: #E0E0E0;48    border: 1px solid #BDBDBD;49    display: flex;50    justify-content: center;51    align-items: center;52    color: #757575;53    font-weight: 600;54    letter-spacing: 0.2px;55  }56 57  /* Simple blue route overlay to hint the path */58  .route-overlay {59    position: absolute;60    top: 300px;61    left: 120px;62    width: 840px;63    height: 1200px;64    pointer-events: none;65  }66  .route-overlay svg { width: 100%; height: 100%; }67  .route-overlay .solid { stroke: #2D8AE3; stroke-width: 18; fill: none; stroke-linecap: round; }68  .route-overlay .dotted { stroke: #2D8AE3; stroke-width: 18; fill: none; stroke-linecap: round; stroke-dasharray: 4 26; opacity: 0.9; }69 70  /* Back floating button */71  .back-btn {72    position: absolute;73    top: 140px;74    left: 48px;75    width: 96px;76    height: 96px;77    background: #ffffff;78    border-radius: 50%;79    box-shadow: 0 6px 16px rgba(0,0,0,0.18);80    display: flex;81    align-items: center;82    justify-content: center;83    z-index: 5;84  }85  .back-btn svg { width: 42px; height: 42px; fill: none; stroke: #3a3a3a; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }86 87  /* Right-side vertical actions */88  .actions {89    position: absolute;90    top: 220px;91    right: 40px;92    display: flex;93    flex-direction: column;94    gap: 26px;95    z-index: 5;96  }97  .fab {98    width: 102px;99    height: 102px;100    background: #ffffff;101    border-radius: 50%;102    box-shadow: 0 6px 16px rgba(0,0,0,0.16);103    display: flex;104    align-items: center;105    justify-content: center;106  }107  .fab svg { width: 50px; height: 50px; fill: none; stroke: #2F5D86; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }108 109  /* GO button */110  .go-btn {111    position: absolute;112    right: 62px;113    bottom: 620px;114    width: 360px;115    height: 160px;116    background: #45A942;117    border-radius: 88px;118    box-shadow: 0 10px 24px rgba(0,0,0,0.22);119    display: flex;120    align-items: center;121    justify-content: center;122    gap: 22px;123    z-index: 6;124  }125  .go-btn .label { color: #ffffff; font-size: 56px; font-weight: 800; letter-spacing: 1px; }126  .go-btn svg { width: 64px; height: 64px; stroke: #ffffff; stroke-width: 6; fill: none; }127 128  /* Google watermark */129  .google-mark {130    position: absolute;131    left: 32px;132    bottom: 760px;133    font-size: 28px;134    color: #757575;135    opacity: 0.9;136    font-weight: 600;137  }138 139  /* Bottom sheet */140  .sheet {141    position: absolute;142    bottom: 0;143    left: 0;144    width: 1080px;145    height: 640px;146    background: #ffffff;147    border-top-left-radius: 28px;148    border-top-right-radius: 28px;149    box-shadow: 0 -10px 28px rgba(0,0,0,0.16);150    padding: 28px 40px 32px 40px;151  }152  .sheet .grabber {153    position: absolute;154    top: 14px;155    left: 50%;156    transform: translateX(-50%);157    width: 160px;158    height: 10px;159    background: #D6D6D6;160    border-radius: 6px;161  }162  .chips-row {163    display: flex;164    align-items: center;165    gap: 14px;166    margin-top: 28px;167    margin-bottom: 22px;168    color: #4a4a4a;169  }170  .chip {171    display: inline-flex;172    align-items: center;173    gap: 10px;174    padding: 14px 18px;175    border: 1px solid #CFCFCF;176    border-radius: 16px;177    font-size: 34px;178    background: #FAFAFA;179  }180  .chip .icon {181    width: 36px; height: 36px;182  }183  .chip .bus {184    background: #E9F3FF;185    border-color: #B9D6FF;186  }187  .chip .text-bold { font-weight: 700; }188  .amount-time {189    display: flex;190    align-items: center;191    gap: 18px;192    margin-left: auto;193    font-size: 36px;194  }195  .amount { color: #1C7ED6; font-weight: 800; }196  .duration { color: #2b2b2b; font-weight: 800; }197  .times {198    display: flex;199    justify-content: space-between;200    font-size: 40px;201    margin-top: 18px;202  }203  .times .highlight { font-weight: 800; }204  .divider {205    height: 2px;206    background: #E7E7E7;207    margin: 24px 0;208  }209  .below-row {210    display: flex;211    align-items: center;212    gap: 22px;213    color: #5a5a5a;214    font-size: 32px;215  }216 217  /* Small helpers */218  .muted { color: #7a7a7a; }219</style>220</head>221<body>222<div id="render-target">223 224  <!-- Status bar -->225  <div class="status-bar">226    <div class="left">10:08</div>227    <div class="right">228      <div class="status-icon">229        <!-- Do Not Disturb -->230        <svg viewBox="0 0 24 24">231          <circle cx="12" cy="12" r="9"></circle>232          <line x1="7" y1="12" x2="17" y2="12"></line>233        </svg>234      </div>235      <div class="status-icon">236        <!-- GPS/Location dot -->237        <svg viewBox="0 0 24 24">238          <circle cx="12" cy="12" r="2"></circle>239          <circle cx="12" cy="12" r="8"></circle>240        </svg>241      </div>242      <div class="status-icon">243        <!-- WiFi -->244        <svg viewBox="0 0 24 24">245          <path d="M3 8c4.5-4 13.5-4 18 0"></path>246          <path d="M6 11c3-2.5 9-2.5 12 0"></path>247          <path d="M9 14c1.5-1 4.5-1 6 0"></path>248          <circle cx="12" cy="17" r="1.6" fill="#2b2b2b" stroke="none"></circle>249        </svg>250      </div>251      <div class="status-icon" style="display:flex; align-items:center; gap:8px;">252        <!-- Battery -->253        <svg viewBox="0 0 26 24">254          <rect x="2" y="6" width="18" height="12" rx="2"></rect>255          <rect x="4" y="8" width="14" height="8" rx="1" fill="#2b2b2b"></rect>256          <rect x="21" y="9" width="3" height="6" rx="1"></rect>257        </svg>258        <span style="font-weight:700;">100%</span>259      </div>260    </div>261  </div>262 263  <!-- Map placeholder -->264  <div class="map">[IMG: Google Map with route]</div>265 266  <!-- Route overlay (approximate visual hint) -->267  <div class="route-overlay">268    <svg viewBox="0 0 840 1200">269      <!-- solid segment -->270      <path class="solid" d="M160 900 L220 760 L240 540 L240 420 L260 280" />271      <!-- dotted segment -->272      <path class="dotted" d="M400 820 C520 760, 640 720, 720 660 L800 600" />273    </svg>274  </div>275 276  <!-- Back button -->277  <div class="back-btn" aria-label="Back">278    <svg viewBox="0 0 24 24">279      <path d="M15 5 L7 12 L15 19"></path>280    </svg>281  </div>282 283  <!-- Right-side floating actions -->284  <div class="actions">285    <div class="fab" title="Save">286      <svg viewBox="0 0 24 24">287        <path d="M12 18 L4 10 L5.5 8.5 L12 15 L18.5 8.5 L20 10 Z"></path>288        <path d="M12 4 L14 8 L10 8 Z"></path>289      </svg>290    </div>291    <div class="fab" title="Share">292      <svg viewBox="0 0 24 24">293        <circle cx="6" cy="12" r="3"></circle>294        <circle cx="18" cy="6" r="3"></circle>295        <circle cx="18" cy="18" r="3"></circle>296        <path d="M8.7 10.9 L15.3 7.1"></path>297        <path d="M8.7 13.1 L15.3 16.9"></path>298      </svg>299    </div>300    <div class="fab" title="Center on me">301      <svg viewBox="0 0 24 24">302        <circle cx="12" cy="12" r="3"></circle>303        <path d="M12 3 V6"></path>304        <path d="M12 18 V21"></path>305        <path d="M3 12 H6"></path>306        <path d="M18 12 H21"></path>307        <circle cx="12" cy="12" r="8"></circle>308      </svg>309    </div>310    <div class="fab" title="Traffic">311      <svg viewBox="0 0 24 24">312        <rect x="5" y="5" width="14" height="10" rx="2"></rect>313        <circle cx="8" cy="17" r="2"></circle>314        <circle cx="16" cy="17" r="2"></circle>315        <path d="M7 9 H17"></path>316      </svg>317    </div>318  </div>319 320  <!-- GO button -->321  <div class="go-btn">322    <div class="label">GO</div>323    <svg viewBox="0 0 24 24">324      <path d="M6 12 H18"></path>325      <path d="M12 6 L18 12 L12 18"></path>326    </svg>327  </div>328 329  <!-- Google watermark -->330  <div class="google-mark">Google</div>331 332  <!-- Bottom sheet content -->333  <div class="sheet">334    <div class="grabber"></div>335 336    <div class="chips-row">337      <div class="chip">338        <svg class="icon" viewBox="0 0 24 24">339          <circle cx="12" cy="6" r="2"></circle>340          <path d="M12 8 L12 16"></path>341          <path d="M9 12 L15 12"></path>342          <path d="M7 20 L11 16"></path>343          <path d="M17 20 L13 16"></path>344        </svg>345        <span class="muted">19</span>346      </div>347 348      <div class="chip bus">349        <svg class="icon" viewBox="0 0 24 24">350          <rect x="4" y="6" width="16" height="10" rx="2"></rect>351          <circle cx="8" cy="17" r="1.6"></circle>352          <circle cx="16" cy="17" r="1.6"></circle>353        </svg>354        <span class="text-bold">576C-10</span>355      </div>356 357      <div class="chip bus">358        <svg class="icon" viewBox="0 0 24 24">359          <rect x="4" y="6" width="16" height="10" rx="2"></rect>360          <circle cx="8" cy="17" r="1.6"></circle>361          <circle cx="16" cy="17" r="1.6"></circle>362        </svg>363        <span class="text-bold">5701-10</span>364      </div>365 366      <div class="chip">367        <svg class="icon" viewBox="0 0 24 24">368          <circle cx="12" cy="6" r="2"></circle>369          <path d="M12 8 L12 16"></path>370          <path d="M9 12 L15 12"></path>371        </svg>372        <span class="muted">5</span>373      </div>374 375      <div class="amount-time" style="margin-left:auto;">376        <span class="amount">R$4.40</span>377        <span class="duration">70 min</span>378      </div>379    </div>380 381    <div class="times">382      <div>Leave <span class="highlight">tomorrow 8:00 PM</span></div>383      <div>Arrive <span class="highlight">9:10 PM</span></div>384    </div>385 386    <div class="divider"></div>387 388    <div class="below-row">389      <div class="chip bus" style="padding: 10px 14px; font-size: 30px;">390        <svg class="icon" viewBox="0 0 24 24">391          <rect x="4" y="6" width="16" height="10" rx="2"></rect>392          <circle cx="8" cy="17" r="1.6"></circle>393          <circle cx="16" cy="17" r="1.6"></circle>394        </svg>395        <span class="text-bold">Bus options</span>396      </div>397      <span class="muted">More details below</span>398    </div>399  </div>400 401</div>402</body>403</html>