GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Transit Map UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #f4f6f8;13  }14 15  /* Map placeholder */16  .map {17    position: absolute;18    left: 0;19    top: 0;20    width: 1080px;21    height: 2000px;22    background: #E0E0E0;23    border: 1px solid #BDBDBD;24    color: #757575;25    display: flex;26    align-items: center;27    justify-content: center;28    font-weight: 600;29    letter-spacing: 0.2px;30  }31 32  /* Status bar */33  .status-bar {34    position: absolute;35    top: 0;36    left: 0;37    right: 0;38    height: 90px;39    display: flex;40    align-items: center;41    padding: 0 28px;42    color: #1f1f1f;43    font-size: 32px;44    pointer-events: none;45  }46  .status-bar .right {47    margin-left: auto;48    display: flex;49    align-items: center;50    gap: 18px;51    font-size: 26px;52    color: #333;53  }54  .status-dot {55    width: 10px;56    height: 10px;57    background: #333;58    border-radius: 50%;59    opacity: 0.5;60  }61 62  /* Back button */63  .back-btn {64    position: absolute;65    top: 110px;66    left: 32px;67    width: 96px;68    height: 96px;69    background: #ffffff;70    border-radius: 48px;71    box-shadow: 0 10px 20px rgba(0,0,0,0.15);72    display: flex;73    align-items: center;74    justify-content: center;75    cursor: default;76  }77  .icon-arrow {78    width: 36px;79    height: 36px;80    fill: none;81    stroke: #2c2c2c;82    stroke-width: 8;83  }84 85  /* Blue schedule bubble */86  .schedule {87    position: absolute;88    top: 140px;89    left: 420px;90    width: 610px;91    height: 120px;92    background: #2d6ea8;93    color: #fff;94    border-radius: 26px;95    box-shadow: 0 8px 18px rgba(0,0,0,0.25);96    display: flex;97    align-items: center;98    padding: 0 26px;99    gap: 18px;100    font-size: 34px;101    font-weight: 600;102  }103  .icon-clock {104    width: 46px;105    height: 46px;106    fill: none;107    stroke: #ffffff;108    stroke-width: 6;109  }110 111  /* Start/End markers */112  .marker {113    position: absolute;114    width: 140px;115    height: 58px;116    background: #34a853;117    color: #fff;118    border-radius: 12px;119    display: flex;120    align-items: center;121    justify-content: center;122    font-weight: 700;123    box-shadow: 0 8px 16px rgba(0,0,0,0.2);124  }125  .marker.end {126    background: #2e7d32;127  }128 129  /* Dashed route line (diagonal) */130  .route {131    position: absolute;132    top: 430px;133    left: 320px;134    width: 8px;135    height: 1200px;136    background-image: repeating-linear-gradient(137      to bottom,138      #9e9e9e 0,139      #9e9e9e 30px,140      rgba(255,255,255,0) 30px,141      rgba(255,255,255,0) 60px142    );143    border-radius: 4px;144    transform: rotate(24deg);145    opacity: 0.85;146  }147 148  /* Small transit stop markers */149  .stop {150    position: absolute;151    width: 44px;152    height: 44px;153    background: #2a66c7;154    border-radius: 50%;155    box-shadow: 0 5px 10px rgba(0,0,0,0.25);156    display: flex;157    align-items: center;158    justify-content: center;159    color: #fff;160    font-size: 18px;161    font-weight: 800;162  }163 164  /* Google label near bottom left over the map */165  .google-label {166    position: absolute;167    bottom: 440px;168    left: 30px;169    color: #8a8a8a;170    font-size: 28px;171  }172 173  /* Bottom sheet */174  .bottom-sheet {175    position: absolute;176    left: 0;177    bottom: 0;178    width: 1080px;179    height: 460px;180    background: #214e77;181    border-top-left-radius: 32px;182    border-top-right-radius: 32px;183    box-shadow: 0 -12px 22px rgba(0,0,0,0.25);184    color: #fff;185    padding: 28px 34px;186  }187  .title-row {188    display: flex;189    align-items: center;190    gap: 22px;191    font-size: 40px;192    font-weight: 700;193  }194  .icon-train {195    width: 56px;196    height: 56px;197    fill: #ffffff;198  }199  .subline {200    margin-top: 18px;201    font-size: 30px;202    color: #e8f2ff;203    opacity: 0.95;204  }205  .chevron-stack {206    margin-left: auto;207    width: 58px;208    height: 58px;209    background: rgba(255,255,255,0.18);210    border-radius: 14px;211    display: flex;212    align-items: center;213    justify-content: center;214  }215  .icon-chevrons {216    width: 30px;217    height: 30px;218    fill: none;219    stroke: #ffffff;220    stroke-width: 6;221  }222 223  .metrics-card {224    margin-top: 24px;225    width: 1012px;226    height: 160px;227    background: #ffffff;228    border-radius: 22px;229    border: 1px solid #d0d7de;230    color: #2c3e50;231    display: flex;232    align-items: center;233    justify-content: space-around;234    font-size: 30px;235    box-shadow: 0 8px 20px rgba(0,0,0,0.15);236  }237 238  /* Helper to place stop icons roughly along the route */239  /* positions approximated to match screenshot */240</style>241</head>242<body>243<div id="render-target">244  <div class="map">[IMG: Google Map - Upper Manhattan, Harlem, Riverside Park]</div>245 246  <!-- Status bar -->247  <div class="status-bar">248    <div>8:24</div>249    <div class="right">250      <span>LR</span>251      <span>N</span>252      <div class="status-dot"></div>253      <span>93%</span>254    </div>255  </div>256 257  <!-- Back button -->258  <div class="back-btn">259    <svg class="icon-arrow" viewBox="0 0 24 24">260      <path d="M15 4 L7 12 L15 20"></path>261    </svg>262  </div>263 264  <!-- Schedule bubble -->265  <div class="schedule">266    <svg class="icon-clock" viewBox="0 0 24 24">267      <circle cx="12" cy="12" r="9"></circle>268      <path d="M12 6 L12 12 L17 12"></path>269    </svg>270    <div>Leave: Nov 8, 3:40 PM</div>271  </div>272 273  <!-- Start marker -->274  <div class="marker" style="top: 220px; right: 140px;">Start</div>275 276  <!-- Dashed route -->277  <div class="route"></div>278 279  <!-- Transit stops -->280  <div class="stop" style="top: 360px; left: 680px;">M</div>281  <div class="stop" style="top: 520px; left: 620px;">M</div>282  <div class="stop" style="top: 780px; left: 520px;">M</div>283  <div class="stop" style="top: 1160px; left: 440px;">M</div>284  <div class="stop" style="top: 1560px; left: 340px;">M</div>285  <div class="stop" style="top: 1720px; left: 780px;">M</div>286  <div class="stop" style="top: 1860px; left: 240px;">M</div>287 288  <!-- End marker near Manhattanville -->289  <div class="marker end" style="bottom: 520px; left: 120px;">End</div>290 291  <!-- Google label -->292  <div class="google-label">Google</div>293 294  <!-- Bottom sheet -->295  <div class="bottom-sheet">296    <div class="title-row">297      <svg class="icon-train" viewBox="0 0 24 24">298        <rect x="5" y="4" width="14" height="12" rx="2"></rect>299        <circle cx="9" cy="15.5" r="1.6"></circle>300        <circle cx="15" cy="15.5" r="1.6"></circle>301        <rect x="7" y="6.5" width="10" height="5.5" rx="1" fill="#214e77" stroke="#214e77"></rect>302      </svg>303      <div>163 St - Amsterdam Av</div>304      <div class="chevron-stack">305        <svg class="icon-chevrons" viewBox="0 0 24 24">306          <path d="M7 10 L12 5 L17 10"></path>307          <path d="M7 14 L12 19 L17 14"></path>308        </svg>309      </div>310    </div>311    <div class="subline">Amsterdam Ave, New York, NY, USA</div>312 313    <div class="metrics-card">314      <div>145 cal</div>315      <div>≈ 36 min</div>316      <div>Bike</div>317      <div>51 cal</div>318      <div>≈ 13 min</div>319    </div>320  </div>321</div>322</body>323</html>