GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Map Directions UI</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">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: #ffffff;14    border-radius: 0;15  }16 17  /* Map placeholder */18  .map {19    position: absolute;20    left: 0; top: 0;21    width: 1080px; height: 2400px;22    background: #E0E0E0;23    border: 1px solid #BDBDBD;24    color: #757575;25    display: flex; align-items: center; justify-content: center;26    font-size: 36px; letter-spacing: 1px;27  }28 29  /* Status bar */30  .status-bar {31    position: absolute;32    top: 0; left: 0; right: 0;33    height: 120px;34    padding: 0 40px;35    display: flex; align-items: center; justify-content: space-between;36    color: #2e2e2e;37    pointer-events: none;38  }39  .status-left { display: flex; align-items: center; gap: 24px; font-weight: 600; font-size: 42px; }40  .status-right { display: flex; align-items: center; gap: 28px; }41  .status-dot {42    width: 12px; height: 12px; background: #2e2e2e; border-radius: 50%;43  }44  .icon-battery, .icon-wifi, .icon-signal {45    width: 42px; height: 28px; border: 2px solid #2e2e2e; border-radius: 4px;46  }47 48  /* Back circular button */49  .back-btn {50    position: absolute;51    top: 180px; left: 60px;52    width: 120px; height: 120px;53    background: #ffffff;54    border-radius: 60px;55    box-shadow: 0 6px 14px rgba(0,0,0,0.15);56    display: flex; align-items: center; justify-content: center;57  }58  .back-btn svg { width: 44px; height: 44px; }59 60  /* Leave now pill */61  .leave-pill {62    position: absolute;63    top: 170px; right: 40px;64    padding: 26px 36px;65    background: #ffffff;66    border-radius: 70px;67    box-shadow: 0 6px 14px rgba(0,0,0,0.12);68    display: flex; align-items: center; gap: 20px;69    font-size: 44px; color: #1b6aa6; font-weight: 700;70  }71  .leave-pill .clock {72    width: 64px; height: 64px; background: #eaf3fb; border-radius: 40px;73    display: flex; align-items: center; justify-content: center;74  }75  .leave-pill .clock svg { width: 36px; height: 36px; }76 77  /* Start/End markers */78  .marker {79    position: absolute;80    background: #26a743;81    color: #fff; font-weight: 800;82    padding: 16px 28px;83    border-radius: 16px;84    font-size: 44px;85    box-shadow: 0 8px 14px rgba(0,0,0,0.18);86  }87  .marker:after {88    content: '';89    position: absolute;90    bottom: -24px; left: 34px;91    border-width: 24px 16px 0 16px;92    border-style: solid;93    border-color: #26a743 transparent transparent transparent;94  }95 96  /* Dashed path */97  .dashed-path {98    position: absolute;99    left: -120px; top: 720px;100    width: 1500px; height: 0;101    border-top: 8px dashed #7a7a7a;102    transform: rotate(24deg);103    opacity: 0.9;104  }105 106  /* Google watermark */107  .watermark {108    position: absolute;109    bottom: 690px; left: 30px;110    font-size: 38px; color: #4a4a4a;111    opacity: 0.8;112  }113 114  /* Bottom sheet */115  .sheet {116    position: absolute;117    left: 0; right: 0; bottom: 0;118    height: 700px;119    background: #2d5c75;120    border-top-left-radius: 40px;121    border-top-right-radius: 40px;122    box-shadow: 0 -10px 18px rgba(0,0,0,0.2);123    padding: 40px 36px;124    color: #dbe8f1;125  }126  .field {127    background: rgba(255,255,255,0.08);128    border-radius: 28px;129    padding: 28px 32px;130    margin: 22px 0;131    display: flex; align-items: center; justify-content: space-between;132  }133  .field-label {134    opacity: 0.85; font-size: 34px; margin-right: 18px; width: 100px;135  }136  .field-main {137    display: flex; align-items: center; gap: 20px;138    flex: 1;139    color: #ffffff; font-size: 44px; font-weight: 700;140    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;141  }142  .doc-ico {143    width: 48px; height: 48px; border: 2px solid #b8d2e1; border-radius: 8px;144    position: relative;145  }146  .doc-ico:before, .doc-ico:after {147    content: ''; position: absolute; left: 8px; right: 8px; height: 4px; background: #b8d2e1;148  }149  .doc-ico:before { top: 14px; }150  .doc-ico:after { top: 28px; }151  .close-x {152    width: 70px; height: 70px; border-radius: 40px;153    background: rgba(255,255,255,0.12);154    display: flex; align-items: center; justify-content: center;155  }156  .close-x svg { width: 34px; height: 34px; opacity: 0.9; }157 158  /* Floating action arrow */159  .fab {160    position: absolute;161    right: 40px;162    bottom: 560px;163    width: 180px; height: 180px;164    background: #43b047;165    border-radius: 90px;166    box-shadow: 0 10px 20px rgba(0,0,0,0.25);167    display: flex; align-items: center; justify-content: center;168  }169  .fab svg { width: 90px; height: 90px; }170 171  /* Home indicator */172  .home-indicator {173    position: absolute;174    bottom: 24px; left: 50%;175    transform: translateX(-50%);176    width: 420px; height: 14px; border-radius: 8px;177    background: rgba(255,255,255,0.85);178  }179</style>180</head>181<body>182<div id="render-target">183 184  <!-- Full-screen Google Map placeholder -->185  <div class="map">[IMG: Google Map]</div>186 187  <!-- Status bar -->188  <div class="status-bar">189    <div class="status-left">190      <span>7:45</span>191      <span class="status-dot"></span>192      <span>28°</span>193    </div>194    <div class="status-right">195      <div class="icon-signal"></div>196      <div class="icon-wifi"></div>197      <div class="icon-battery"></div>198    </div>199  </div>200 201  <!-- Back button -->202  <div class="back-btn" role="button" aria-label="Back">203    <svg viewBox="0 0 24 24" fill="#2e2e2e">204      <path d="M15.5 3.5L7 12l8.5 8.5-2.1 2.1L2.8 12l10.6-10.6 2.1 2.1z"/>205    </svg>206  </div>207 208  <!-- Leave Now pill -->209  <div class="leave-pill">210    <div class="clock">211      <svg viewBox="0 0 24 24" fill="#1b6aa6">212        <path d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 5h-2v6l5 3 1-1.7-4-2.3V7z"/>213      </svg>214    </div>215    <span>Leave: Now</span>216  </div>217 218  <!-- Dashed path -->219  <div class="dashed-path"></div>220 221  <!-- Markers -->222  <div class="marker" style="left: 120px; top: 780px;">Start</div>223  <div class="marker" style="right: 120px; top: 1180px;">End</div>224 225  <!-- Google watermark -->226  <div class="watermark">Google</div>227 228  <!-- Floating Action Button -->229  <div class="fab">230    <svg viewBox="0 0 24 24" fill="#ffffff">231      <path d="M13 5l7 7-7 7-2-2 4.6-4.6H4v-2h11.6L11 7l2-2z"/>232    </svg>233  </div>234 235  <!-- Bottom sheet with inputs -->236  <div class="sheet">237    <div class="field">238      <div class="field-label">Start</div>239      <div class="field-main">240        <div class="doc-ico"></div>241        <div>Upper East Side, New York, NY, USA</div>242      </div>243      <div class="close-x">244        <svg viewBox="0 0 24 24" fill="#e6f0f6">245          <path d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/>246        </svg>247      </div>248    </div>249 250    <div class="field">251      <div class="field-label">End</div>252      <div class="field-main">253        <div class="doc-ico"></div>254        <div>Jamaica, Queens, NY, USA</div>255      </div>256      <div class="close-x">257        <svg viewBox="0 0 24 24" fill="#e6f0f6">258          <path d="M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3l6.3 6.3 6.3-6.3z"/>259        </svg>260      </div>261    </div>262 263    <div class="home-indicator"></div>264  </div>265 266</div>267</body>268</html>