GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Directions UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #446A88; /* deep blue-gray */13  }14 15  /* Top map area */16  .map-area {17    position: absolute;18    left: 0;19    top: 0;20    width: 1080px;21    height: 540px;22    background: #E0E0E0;23    border-bottom: 2px solid #BDBDBD;24    color: #757575;25    display: flex;26    align-items: center;27    justify-content: center;28    font-weight: 600;29  }30  /* Overlay controls on the map */31  .circle-btn {32    position: absolute;33    width: 110px;34    height: 110px;35    border-radius: 55px;36    background: #FFFFFF;37    box-shadow: 0 8px 20px rgba(0,0,0,0.15);38    display: flex;39    align-items: center;40    justify-content: center;41  }42  .btn-back { left: 36px; top: 120px; }43  .btn-refresh { left: 470px; top: 170px; }44  .pill {45    position: absolute;46    right: 36px;47    top: 160px;48    background: #FFFFFF;49    color: #2b4f6b;50    padding: 26px 40px;51    border-radius: 60px;52    box-shadow: 0 8px 20px rgba(0,0,0,0.15);53    font-size: 38px;54    display: flex;55    align-items: center;56    gap: 18px;57  }58  .map-label {59    position: absolute;60    left: 430px;61    top: 210px;62    font-size: 42px;63    font-weight: 700;64    color: #2b4f6b;65  }66  .start-tag {67    position: absolute;68    left: 330px;69    top: 150px;70    background: #3ACF5B;71    color: #fff;72    padding: 10px 18px;73    border-radius: 20px;74    font-size: 32px;75    font-weight: 700;76  }77 78  /* Main dark container holding cards */79  .panel {80    position: absolute;81    left: 20px;82    right: 20px;83    top: 520px;84    bottom: 0;85    background: #3F6380;86    border-radius: 40px 40px 0 0;87    box-shadow: inset 0 2px 0 rgba(255,255,255,0.12);88    padding: 28px 24px;89  }90 91  .route-card {92    width: 100%;93    background: #385D7C;94    border-radius: 30px;95    padding: 30px 34px;96    margin-bottom: 24px;97    display: flex;98    align-items: center;99    color: #fff;100    box-shadow: 0 6px 12px rgba(0,0,0,0.15);101  }102  .route-icon {103    width: 80px;104    height: 80px;105    border-radius: 12px;106    background: rgba(255,255,255,0.1);107    display: flex;108    align-items: center;109    justify-content: center;110    margin-right: 26px;111  }112  .route-text {113    font-size: 40px;114    font-weight: 700;115    flex: 1;116  }117  .swap-btn {118    width: 84px;119    height: 84px;120    border-radius: 18px;121    background: rgba(255,255,255,0.08);122    display: flex;123    align-items: center;124    justify-content: center;125    margin-left: 14px;126  }127 128  .results-card {129    background: #FFFFFF;130    border-radius: 28px;131    padding: 20px 18px;132    box-shadow: 0 6px 12px rgba(0,0,0,0.15);133  }134  .result-row {135    display: flex;136    align-items: center;137    padding: 26px 10px;138    border-bottom: 1px solid #E9EEF2;139  }140  .result-row:last-child { border-bottom: none; }141  .result-icon {142    width: 90px;143    height: 90px;144    border-radius: 16px;145    background: #E6E9EE;146    border: 1px solid #D0D5DA;147    display: flex;148    align-items: center;149    justify-content: center;150    color: #7A8691;151    font-size: 22px;152    margin-right: 26px;153  }154  .row-content {155    display: flex;156    align-items: center;157    justify-content: flex-end;158    flex: 1;159    gap: 24px;160  }161  .pill-light {162    background: #EEF6FF;163    color: #6785A1;164    padding: 24px 40px;165    border-radius: 30px;166    font-size: 34px;167    font-weight: 600;168  }169  .pill-gray {170    background: #ECEFF3;171    color: #97A4AF;172    padding: 24px 34px;173    border-radius: 24px;174    font-size: 32px;175    font-weight: 600;176  }177 178  /* Simple SVG icon styling */179  svg { width: 48px; height: 48px; }180</style>181</head>182<body>183<div id="render-target">184 185  <div class="map-area">[IMG: Map of New York]</div>186  <div class="map-label">New York</div>187  <div class="start-tag">Start</div>188 189  <!-- Back button -->190  <div class="circle-btn btn-back">191    <svg viewBox="0 0 24 24">192      <path d="M15 6l-6 6 6 6" fill="none" stroke="#2b4f6b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>193    </svg>194  </div>195 196  <!-- Refresh button -->197  <div class="circle-btn btn-refresh">198    <svg viewBox="0 0 24 24">199      <path d="M12 5a7 7 0 016.8 5h-2.6l3.8 4 3.8-4h-2.6A9 9 0 103 12" fill="none" stroke="#2b4f6b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>200    </svg>201  </div>202 203  <!-- Leave Now pill -->204  <div class="pill">205    <svg viewBox="0 0 24 24">206      <circle cx="12" cy="12" r="9" fill="none" stroke="#2b4f6b" stroke-width="2"/>207      <path d="M12 7v6l4 2" fill="none" stroke="#2b4f6b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>208    </svg>209    <span>Leave: Now</span>210  </div>211 212  <!-- Main content panel -->213  <div class="panel">214    <!-- First route -->215    <div class="route-card">216      <div class="route-icon">217        <svg viewBox="0 0 24 24">218          <path d="M5 7h14M5 12h14M5 17h10" stroke="#fff" stroke-width="2" stroke-linecap="round"/>219        </svg>220      </div>221      <div class="route-text">Upper East Side, New York, NY, USA</div>222      <div class="swap-btn">223        <svg viewBox="0 0 24 24">224          <path d="M8 4v12M5 7l3-3 3 3M16 20V8M13 17l3 3 3-3" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>225        </svg>226      </div>227    </div>228 229    <!-- Second route -->230    <div class="route-card">231      <div class="route-icon">232        <svg viewBox="0 0 24 24">233          <path d="M5 7h14M5 12h14M5 17h10" stroke="#fff" stroke-width="2" stroke-linecap="round"/>234        </svg>235      </div>236      <div class="route-text">Jamaica, Queens, NY, USA</div>237    </div>238 239    <!-- Results list -->240    <div class="results-card">241      <div class="result-row">242        <div class="result-icon">[ ]</div>243        <div class="row-content">244          <div class="pill-light">Option</div>245          <div class="pill-gray">Details</div>246        </div>247      </div>248      <div class="result-row">249        <div class="result-icon">[ ]</div>250        <div class="row-content">251          <div class="pill-light">Option</div>252          <div class="pill-gray">Details</div>253        </div>254      </div>255      <div class="result-row">256        <div class="result-icon">[ ]</div>257        <div class="row-content">258          <div class="pill-light">Option</div>259          <div class="pill-gray">Details</div>260        </div>261      </div>262    </div>263  </div>264 265</div>266</body>267</html>