GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Map UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Map canvas */18  .map-canvas {19    position: absolute;20    inset: 0;21    background: #E0E0E0;22    border: 1px solid #BDBDBD;23    display: flex;24    align-items: center;25    justify-content: center;26    color: #757575;27    font-size: 34px;28    letter-spacing: 0.2px;29  }30 31  /* Status bar */32  .status-bar {33    position: absolute;34    top: 18px;35    left: 24px;36    right: 24px;37    height: 60px;38    display: flex;39    align-items: center;40    justify-content: space-between;41    color: #1f1f1f;42    font-size: 36px;43    z-index: 5;44  }45  .status-icons {46    display: flex;47    gap: 20px;48    align-items: center;49  }50  .stat-dot {51    width: 26px; height: 26px; border-radius: 50%; background: #1f1f1f; opacity: 0.85;52  }53 54  /* Search bar */55  .search-wrap {56    position: absolute;57    left: 24px;58    right: 24px;59    top: 98px;60    height: 120px;61    background: #fff;62    border-radius: 60px;63    box-shadow: 0 6px 18px rgba(0,0,0,0.18);64    display: flex;65    align-items: center;66    padding: 0 26px;67    z-index: 6;68  }69  .icon-btn {70    width: 72px;71    height: 72px;72    border-radius: 50%;73    display: flex;74    align-items: center;75    justify-content: center;76    color: #5f6368;77  }78  .search-text {79    flex: 1;80    padding: 0 12px;81    color: #222;82    font-size: 38px;83    white-space: nowrap;84    overflow: hidden;85    text-overflow: ellipsis;86  }87 88  /* Bottom sheet */89  .sheet {90    position: absolute;91    left: 0;92    right: 0;93    bottom: 0;94    height: 560px;95    background: #fff;96    border-top-left-radius: 28px;97    border-top-right-radius: 28px;98    box-shadow: 0 -12px 28px rgba(0,0,0,0.25);99    z-index: 6;100    padding: 18px 28px 28px;101  }102  .sheet .handle {103    width: 160px;104    height: 12px;105    background: #E5E5E5;106    border-radius: 6px;107    margin: 8px auto 22px;108  }109  .place-row {110    display: flex;111    gap: 22px;112    align-items: center;113  }114  .thumb {115    width: 200px; height: 130px;116    background: #E0E0E0; border: 1px solid #BDBDBD;117    display: flex; align-items: center; justify-content: center;118    color: #757575; font-size: 22px;119    border-radius: 10px;120  }121  .place-title {122    font-size: 44px;123    font-weight: 700;124    color: #1f1f1f;125  }126  .place-sub {127    font-size: 30px;128    color: #666;129    margin-top: 6px;130  }131  .actions {132    margin-top: 34px;133    display: flex;134    gap: 22px;135  }136  .btn {137    display: inline-flex;138    align-items: center;139    gap: 16px;140    font-size: 34px;141    padding: 20px 34px;142    border-radius: 50px;143    border: 1px solid #DADCE0;144    color: #1f1f1f;145    background: #fff;146  }147  .btn.primary {148    background: #1a73e8;149    color: #fff;150    border-color: #1a73e8;151  }152 153  /* Gesture bar */154  .gesture {155    position: absolute;156    bottom: 18px;157    left: 50%;158    transform: translateX(-50%);159    width: 300px;160    height: 12px;161    border-radius: 8px;162    background: #CFCFCF;163    z-index: 7;164  }165 166  /* Small floating photo preview on the map */167  .map-photo {168    position: absolute;169    left: 68px;170    bottom: 720px;171    width: 300px; height: 190px;172    background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 12px;173    color: #757575; display: flex; align-items: center; justify-content: center;174    z-index: 4;175  }176 177  /* Map markers (simple approximations) */178  .marker { position: absolute; z-index: 3; }179  .pin {180    width: 46px; height: 46px; border-radius: 50%;181    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 26px;182    box-shadow: 0 2px 4px rgba(0,0,0,0.25);183  }184  .blue { background: #1a73e8; }185  .orange { background: #f29900; }186  .red { background: #e53935; }187  .cyan { background: #2ec7c9; }188 189  /* Small round photo chips on map */190  .chip {191    position: absolute;192    width: 96px; height: 96px; border-radius: 50%;193    background: #E0E0E0; border: 2px solid #fff;194    display: flex; align-items: center; justify-content: center; color: #757575;195    z-index: 4;196    box-shadow: 0 2px 6px rgba(0,0,0,0.25);197    font-size: 22px;198  }199</style>200</head>201<body>202<div id="render-target">203 204  <!-- Map canvas -->205  <div class="map-canvas">[IMG: Google Map - Presqu'île District, Lyon]</div>206 207  <!-- Status bar -->208  <div class="status-bar">209    <div>11:09</div>210    <div class="status-icons">211      <div class="stat-dot" title="Signal"></div>212      <div class="stat-dot" title="Wi‑Fi"></div>213      <div class="stat-dot" title="Battery"></div>214    </div>215  </div>216 217  <!-- Search bar -->218  <div class="search-wrap">219    <div class="icon-btn" aria-label="Back">220      <svg width="40" height="40" viewBox="0 0 24 24" fill="#5f6368">221        <path d="M14.7 5.3 9 11l5.7 5.7-1.4 1.4L6.2 12l7.1-7.1 1.4 1.4z"/>222      </svg>223    </div>224    <div class="search-text">presquile district in Lyon city</div>225    <div class="icon-btn" aria-label="Clear">226      <svg width="40" height="40" viewBox="0 0 24 24" fill="#5f6368">227        <path d="M18.3 5.7 12 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.3 1.4 1.4z"/>228      </svg>229    </div>230    <div class="icon-btn" aria-label="Voice search">231      <svg width="40" height="40" viewBox="0 0 24 24" fill="#5f6368">232        <path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3zm-1 2.9V20h-2v2h8v-2h-2v-3.1a7 7 0 0 0 6-6.9h-2a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.9z"/>233      </svg>234    </div>235  </div>236 237  <!-- Some map markers -->238  <div class="marker" style="top: 620px; left: 760px;">239    <div class="pin orange">🍴</div>240  </div>241  <div class="marker" style="top: 760px; left: 640px;">242    <div class="pin blue">🚌</div>243  </div>244  <div class="marker" style="top: 860px; left: 510px;">245    <div class="pin blue">🚌</div>246  </div>247  <div class="marker" style="top: 980px; left: 820px;">248    <div class="pin orange">🍴</div>249  </div>250  <div class="marker" style="top: 1080px; left: 380px;">251    <div class="pin blue">🚌</div>252  </div>253  <div class="marker" style="top: 1220px; left: 540px;">254    <div class="pin orange">🍴</div>255  </div>256  <div class="marker" style="top: 1340px; left: 720px;">257    <div class="pin blue">🚌</div>258  </div>259  <div class="marker" style="top: 1460px; left: 880px;">260    <div class="pin red">M</div>261  </div>262  <div class="marker" style="top: 1180px; left: 260px;">263    <div class="pin cyan">🏛️</div>264  </div>265 266  <!-- Photo chips on map -->267  <div class="chip" style="left: 90px; bottom: 670px;">Photo</div>268  <div class="chip" style="left: 210px; bottom: 620px;">Photo</div>269 270  <!-- Floating rectangular street view/photo preview -->271  <div class="map-photo">[IMG: Street view preview]</div>272 273  <!-- Bottom sheet -->274  <div class="sheet">275    <div class="handle"></div>276    <div class="place-row">277      <div class="thumb">[IMG: Place Thumbnail]</div>278      <div>279        <div class="place-title">Bas des Pentes Presqu'île</div>280        <div class="place-sub">69001 Lyon, France</div>281      </div>282    </div>283 284    <div class="actions">285      <div class="btn primary">286        <svg width="34" height="34" viewBox="0 0 24 24" fill="#fff">287          <path d="M12 2 4 20l8-4 8 4-8-18z"/>288        </svg>289        Directions290      </div>291      <div class="btn">292        <svg width="34" height="34" viewBox="0 0 24 24" fill="#1f1f1f">293          <path d="M6 2h12v18l-6-3-6 3V2z"/>294        </svg>295        Save296      </div>297      <div class="btn">298        <svg width="34" height="34" viewBox="0 0 24 24" fill="#1f1f1f">299          <path d="M18 8V5l-8 7 8 7v-3h4V8h-4zM2 6h10v2H2V6zm0 10h10v2H2v-2zm0-5h8v2H2v-2z"/>300        </svg>301        Share302      </div>303    </div>304  </div>305 306  <!-- Gesture bar -->307  <div class="gesture"></div>308</div>309</body>310</html>