GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Map Directions UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;13    color: #2b2b2b;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #ffffff;21    border-radius: 36px;22    box-shadow: 0 8px 24px rgba(0,0,0,0.18);23  }24 25  /* Map placeholder */26  .map {27    position: absolute;28    left: 0;29    top: 0;30    width: 1080px;31    height: 2400px;32    background: #E0E0E0;33    border: 1px solid #BDBDBD;34    display: flex;35    justify-content: center;36    align-items: center;37    color: #757575;38    font-size: 28px;39    letter-spacing: 0.3px;40  }41 42  /* Status bar */43  .status-bar {44    position: absolute;45    top: 20px;46    left: 24px;47    right: 24px;48    height: 64px;49    display: flex;50    align-items: center;51    color: #323232;52    z-index: 3;53  }54  .status-time {55    font-weight: 600;56    font-size: 36px;57    margin-right: 18px;58  }59  .status-icons {60    display: flex;61    gap: 18px;62    margin-left: 10px;63  }64  .status-icons svg {65    width: 36px;66    height: 36px;67    opacity: 0.85;68  }69 70  /* Back button */71  .back-btn {72    position: absolute;73    top: 220px;74    left: 36px;75    width: 120px;76    height: 120px;77    background: #ffffff;78    border-radius: 60px;79    box-shadow: 0 6px 14px rgba(0,0,0,0.18);80    display: flex;81    justify-content: center;82    align-items: center;83    z-index: 3;84  }85  .back-btn svg {86    width: 52px;87    height: 52px;88    fill: none;89    stroke: #4a4a4a;90    stroke-width: 10;91    stroke-linecap: round;92    stroke-linejoin: round;93  }94 95  /* Route dashed line */96  .route {97    position: absolute;98    width: 0;99    height: 1600px;100    left: 700px;101    top: 280px;102    border-left: 10px dashed rgba(120, 120, 120, 0.6);103    transform: rotate(20deg);104    z-index: 1;105  }106  .marker {107    position: absolute;108    width: 0;109    height: 0;110    border-left: 26px solid transparent;111    border-right: 26px solid transparent;112    border-top: 72px solid #38b04a;113    z-index: 2;114    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));115  }116  .marker.start {117    left: 816px;118    top: 430px;119    transform: rotate(30deg);120  }121  .marker.end {122    left: 270px;123    top: 1540px;124    transform: rotate(30deg);125  }126 127  /* Leave Now bubble */128  .leave-bubble {129    position: absolute;130    top: 340px;131    right: 130px;132    background: #ffffff;133    border-radius: 28px;134    padding: 20px 26px;135    box-shadow: 0 10px 18px rgba(0,0,0,0.18);136    display: flex;137    align-items: center;138    gap: 14px;139    z-index: 3;140  }141  .leave-bubble:after {142    content: "";143    position: absolute;144    right: 48px;145    bottom: -18px;146    width: 0;147    height: 0;148    border-left: 18px solid transparent;149    border-right: 18px solid transparent;150    border-top: 18px solid #ffffff;151    filter: drop-shadow(0 3px 4px rgba(0,0,0,0.14));152  }153  .leave-bubble .label {154    font-weight: 700;155    color: #2f6d82;156    font-size: 32px;157  }158  .leave-bubble .sub {159    font-weight: 700;160    color: #2f6d82;161    font-size: 32px;162    margin-left: 6px;163  }164 165  /* Floating action button */166  .fab {167    position: absolute;168    right: 50px;169    bottom: 600px;170    width: 150px;171    height: 150px;172    background: #34C759;173    border-radius: 75px;174    box-shadow: 0 10px 18px rgba(0,0,0,0.25);175    display: flex;176    justify-content: center;177    align-items: center;178    z-index: 3;179  }180  .fab svg {181    width: 70px;182    height: 70px;183    fill: none;184    stroke: #ffffff;185    stroke-width: 14;186    stroke-linecap: round;187    stroke-linejoin: round;188  }189 190  /* Google watermark */191  .google {192    position: absolute;193    left: 28px;194    bottom: 720px;195    color: #4a4a4a;196    font-size: 28px;197    opacity: 0.8;198    z-index: 2;199  }200 201  /* Bottom sheet */202  .sheet {203    position: absolute;204    left: 0;205    bottom: 0;206    width: 1080px;207    height: 540px;208    background: linear-gradient(180deg, #2d6a80 0%, #285a6d 100%);209    border-top-left-radius: 42px;210    border-top-right-radius: 42px;211    box-shadow: 0 -6px 16px rgba(0,0,0,0.25);212    padding: 36px;213    z-index: 4;214  }215  .row-label {216    color: rgba(255,255,255,0.85);217    font-size: 32px;218    font-weight: 600;219    margin-bottom: 18px;220    display: flex;221    align-items: center;222    gap: 12px;223  }224  .card {225    width: 100%;226    background: rgba(255,255,255,0.08);227    border-radius: 28px;228    padding: 28px;229    display: flex;230    align-items: center;231    position: relative;232    backdrop-filter: blur(2px);233  }234  .icon-circle {235    width: 72px;236    height: 72px;237    border-radius: 36px;238    background: rgba(255,255,255,0.18);239    display: flex;240    justify-content: center;241    align-items: center;242    margin-right: 22px;243  }244  .icon-circle svg {245    width: 40px;246    height: 40px;247  }248  .card .title {249    color: #ffffff;250    font-size: 36px;251    font-weight: 800;252    margin-bottom: 6px;253  }254  .card .subtitle {255    color: rgba(255,255,255,0.85);256    font-size: 28px;257    font-weight: 500;258  }259  .close-btn {260    position: absolute;261    right: 24px;262    top: 24px;263    width: 60px;264    height: 60px;265    border-radius: 30px;266    background: rgba(255,255,255,0.12);267    color: rgba(255,255,255,0.95);268    font-size: 40px;269    line-height: 60px;270    text-align: center;271  }272  .separator {273    height: 24px;274  }275 276  /* Home indicator */277  .home-indicator {278    position: absolute;279    bottom: 18px;280    left: 50%;281    transform: translateX(-50%);282    width: 240px;283    height: 12px;284    background: rgba(255,255,255,0.92);285    border-radius: 6px;286  }287</style>288</head>289<body>290<div id="render-target">291  <div class="map">[IMG: Map of Tribeca & City Hall]</div>292 293  <div class="status-bar">294    <div class="status-time">3:37</div>295    <div class="status-icons">296      <!-- Simple status icons -->297      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#666"/></svg>298      <svg viewBox="0 0 24 24"><path d="M4 12h16" stroke="#666" stroke-width="3" stroke-linecap="round"/></svg>299      <svg viewBox="0 0 24 24"><path d="M12 4v16" stroke="#666" stroke-width="3" stroke-linecap="round"/><path d="M4 12h16" stroke="#666" stroke-width="3" stroke-linecap="round"/></svg>300      <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" fill="#666"/><path d="M4 22c2-6 14-6 16 0" stroke="#666" stroke-width="3" fill="none" stroke-linecap="round"/></svg>301    </div>302  </div>303 304  <div class="back-btn">305    <svg viewBox="0 0 100 100">306      <polyline points="62,20 32,50 62,80" />307    </svg>308  </div>309 310  <div class="route"></div>311  <div class="marker start"></div>312  <div class="marker end"></div>313 314  <div class="leave-bubble">315    <svg viewBox="0 0 48 48">316      <circle cx="24" cy="24" r="20" fill="none" stroke="#2f6d82" stroke-width="4"/>317      <path d="M24 11v12l8 6" stroke="#2f6d82" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>318    </svg>319    <div class="label">Leave:</div>320    <div class="sub">Now</div>321  </div>322 323  <div class="fab">324    <svg viewBox="0 0 24 24">325      <polyline points="8,4 18,12 8,20" />326    </svg>327  </div>328 329  <div class="google">Google</div>330 331  <div class="sheet">332    <div class="row-label">333      <span>Start</span>334    </div>335    <div class="card">336      <div class="icon-circle">337        <!-- Map pin icon -->338        <svg viewBox="0 0 24 24">339          <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="#ffffff" opacity="0.95"/>340          <circle cx="12" cy="9" r="3" fill="#2f6d82"/>341        </svg>342      </div>343      <div>344        <div class="title">The Roxy Hotel New York</div>345        <div class="subtitle">2 6th Ave, New York, NY 10013, USA</div>346      </div>347      <div class="close-btn">×</div>348    </div>349 350    <div class="separator"></div>351 352    <div class="row-label">353      <span>End</span>354    </div>355    <div class="card">356      <div class="icon-circle">357        <!-- Simple subway/train icon -->358        <svg viewBox="0 0 24 24">359          <rect x="5" y="6" width="14" height="10" rx="2" ry="2" fill="#ffffff" opacity="0.95"/>360          <circle cx="9" cy="17" r="1.6" fill="#2f6d82"/>361          <circle cx="15" cy="17" r="1.6" fill="#2f6d82"/>362        </svg>363      </div>364      <div class="title">World Trade Center</div>365      <div class="close-btn">×</div>366    </div>367 368    <div class="home-indicator"></div>369  </div>370</div>371</body>372</html>