GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Navigation Search UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #466D88; /* blue sheet background */13  }14 15  /* Top map placeholder */16  .map-area {17    position: absolute;18    left: 0;19    top: 0;20    width: 1080px;21    height: 380px;22    background: #E0E0E0;23    border-bottom: 1px solid #BDBDBD;24    display: flex;25    align-items: center;26    justify-content: center;27    color: #6b6b6b;28    font-weight: 600;29    letter-spacing: .5px;30  }31 32  /* Back floating button */33  .back-btn {34    position: absolute;35    top: 120px;36    left: 36px;37    width: 120px;38    height: 120px;39    border-radius: 50%;40    background: #F2F6FB;41    box-shadow: 0 6px 18px rgba(0,0,0,0.15);42    display: flex;43    align-items: center;44    justify-content: center;45  }46  .back-btn svg { width: 46px; height: 46px; fill: #2d506b; }47 48  /* Search bar */49  .search-bar {50    position: absolute;51    top: 210px;52    left: 36px;53    width: 1008px;54    height: 118px;55    background: #ffffff;56    border-radius: 26px;57    box-shadow: 0 12px 28px rgba(0,0,0,0.18);58    display: flex;59    align-items: center;60    padding: 0 28px 0 26px;61  }62  .search-icon {63    width: 54px;64    height: 54px;65    margin-right: 18px;66  }67  .search-text {68    flex: 1;69    display: flex;70    align-items: center;71    color: #2a2a2a;72    font-size: 44px;73  }74  .endpoint-chip {75    background: #E7F0F8;76    color: #2a5b7c;77    padding: 12px 18px;78    border-radius: 20px;79    font-weight: 700;80    margin-right: 16px;81    font-size: 34px;82  }83  .swap-btn {84    width: 96px;85    height: 96px;86    background: #F1F6FB;87    border-radius: 24px;88    display: flex;89    align-items: center;90    justify-content: center;91  }92  .swap-btn svg { width: 56px; height: 56px; fill: #2f5c79; }93 94  /* Quick action tiles */95  .quick-tiles {96    position: absolute;97    top: 360px;98    left: 36px;99    width: 1008px;100    display: flex;101    gap: 36px;102  }103  .tile {104    background: #365B79;105    height: 120px;106    border-radius: 28px;107    flex: 1;108    display: flex;109    align-items: center;110    justify-content: center;111  }112  .tile svg { width: 58px; height: 58px; fill: #ffffff; }113 114  /* Section title */115  .section-title {116    position: absolute;117    top: 512px;118    left: 36px;119    color: #EAF3FA;120    font-size: 48px;121    font-weight: 700;122    letter-spacing: .2px;123  }124 125  /* Cards */126  .card {127    position: absolute;128    left: 36px;129    width: 1008px;130    background: #ffffff;131    border-radius: 28px;132    box-shadow: 0 8px 20px rgba(0,0,0,0.15);133    overflow: hidden;134  }135  .card.history { top: 580px; }136  .card.favorites { top: 1130px; }137 138  .row {139    height: 150px;140    display: flex;141    align-items: center;142    padding: 0 28px;143    position: relative;144  }145  .row + .row { border-top: 1px solid #E8EEF3; }146 147  .pin {148    width: 72px;149    height: 72px;150    margin-right: 26px;151    background: #F1F4F6;152    border-radius: 50%;153    display: flex;154    align-items: center;155    justify-content: center;156  }157  .pin svg { width: 40px; height: 40px; fill: #9BA6AE; }158 159  .pin.green { background: #E9F6EA; }160  .pin.green svg { fill: #43A047; }161 162  .title {163    font-size: 46px;164    color: #2c2c2c;165    flex: 1;166  }167 168  .kebab {169    width: 20px;170    height: 60px;171    display: flex;172    flex-direction: column;173    justify-content: space-between;174    align-items: center;175    margin-left: 20px;176  }177  .dot {178    width: 10px;179    height: 10px;180    background: #B7C0C8;181    border-radius: 50%;182  }183 184  .set-btn {185    padding: 18px 34px;186    border-radius: 40px;187    background: #F1F4F7;188    color: #6A7680;189    font-weight: 800;190    font-size: 36px;191  }192 193  /* Bottom empty sheet look */194  .bottom-space {195    position: absolute;196    left: 0;197    right: 0;198    top: 1500px;199    bottom: 0;200    background: transparent;201  }202</style>203</head>204<body>205<div id="render-target">206  <div class="map-area">[IMG: Google Map / City Map]</div>207 208  <div class="back-btn" aria-label="Back">209    <svg viewBox="0 0 24 24"><path d="M15.5 4.5L7 12l8.5 7.5-1.8 2L3.5 12 13.7 2.5z"/></svg>210  </div>211 212  <div class="search-bar">213    <svg class="search-icon" viewBox="0 0 24 24"><path fill="#6e8aa0" d="M10 2a8 8 0 105.3 14l4.7 4.7 1.4-1.4-4.7-4.7A8 8 0 0010 2zm0 2a6 6 0 110 12A6 6 0 0110 4z"/></svg>214    <div class="search-text">215      <span class="endpoint-chip">End</span>216      Where to?217    </div>218    <div class="swap-btn" aria-label="Swap">219      <svg viewBox="0 0 24 24"><path d="M7 7h9.6l-2.8-2.8L15 3l5 5-5 5-1.2-1.2L16.6 9H7V7zm10 10H7l2.8 2.8L9 21l-5-5 5-5 1.2 1.2L7.4 15H17v2z"/></svg>220    </div>221  </div>222 223  <div class="quick-tiles">224    <div class="tile" title="Recent">225      <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1010 10A10 10 0 0012 2zm1 11H7V11h4V6h2z"/></svg>226    </div>227    <div class="tile" title="Favorites">228      <svg viewBox="0 0 24 24"><path d="M12 17.3l-5.3 3.2 1.4-5.9L3 9.8l6-0.5L12 3l3 6.3 6 .5-5.1 4.8 1.4 5.9z"/></svg>229    </div>230    <div class="tile" title="Plan">231      <svg viewBox="0 0 24 24"><path d="M7 2h2v3H7V2zm8 0h2v3h-2V2zM4 6h16v14H4V6zm2 4h6v6H6v-6z"/></svg>232    </div>233  </div>234 235  <div class="section-title">24 hours</div>236 237  <!-- History list card -->238  <div class="card history">239    <div class="row">240      <div class="pin">241        <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 017 7c0 5-7 13-7 13S5 14 5 9a7 7 0 017-7zm0 9a2 2 0 100-4 2 2 0 000 4z"/></svg>242      </div>243      <div class="title">Dam</div>244      <div class="kebab" aria-label="More">245        <div class="dot"></div><div class="dot"></div><div class="dot"></div>246      </div>247    </div>248    <div class="row">249      <div class="pin">250        <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 017 7c0 5-7 13-7 13S5 14 5 9a7 7 0 017-7zm0 9a2 2 0 100-4 2 2 0 000 4z"/></svg>251      </div>252      <div class="title">Amsterdam Centraal</div>253      <div class="kebab" aria-label="More">254        <div class="dot"></div><div class="dot"></div><div class="dot"></div>255      </div>256    </div>257    <div class="row">258      <div class="pin">259        <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 017 7c0 5-7 13-7 13S5 14 5 9a7 7 0 017-7zm0 9a2 2 0 100-4 2 2 0 000 4z"/></svg>260      </div>261      <div class="title">Centraal Station</div>262      <div class="kebab" aria-label="More">263        <div class="dot"></div><div class="dot"></div><div class="dot"></div>264      </div>265    </div>266  </div>267 268  <!-- Home/Work favorites card -->269  <div class="card favorites">270    <div class="row">271      <div class="pin green">272        <svg viewBox="0 0 24 24"><path d="M12 5l8 6h-2v8h-5v-5H11v5H6v-8H4z"/></svg>273      </div>274      <div class="title">Home</div>275      <div class="set-btn">SET</div>276    </div>277    <div class="row">278      <div class="pin green">279        <svg viewBox="0 0 24 24"><path d="M4 4h16v4H4V4zm2 6h12v10H6V10zm3 2v6h2v-6H9zm4 0v6h2v-6h-2z"/></svg>280      </div>281      <div class="title">Work</div>282      <div class="set-btn">SET</div>283    </div>284  </div>285 286  <div class="bottom-space"></div>287</div>288</body>289</html>