GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Map Type Bottom Sheet - Mock</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: #e9eef4;13  }14 15  /* Map backdrop */16  .map-image {17    position: absolute;18    inset: 0;19    background: linear-gradient(180deg,#e7edf5 0%, #dde7f0 100%);20  }21  .map-image .placeholder {22    position: absolute;23    left: 40px; right: 40px; top: 320px; bottom: 560px;24    background: #E0E0E0;25    border: 1px solid #BDBDBD;26    color: #757575;27    display: flex; align-items: center; justify-content: center;28    font-size: 28px;29    border-radius: 10px;30  }31 32  /* Status bar */33  .status-bar {34    position: absolute;35    top: 16px; left: 24px; right: 24px;36    height: 72px;37    color: #111;38    font-weight: 600;39    display: flex; align-items: center; justify-content: space-between;40    font-size: 32px;41  }42  .status-icons span {43    display: inline-block;44    width: 26px; height: 26px;45    background: #111;46    border-radius: 50%;47    margin-left: 18px;48    opacity: 0.85;49  }50 51  /* Search stack */52  .search-stack {53    position: absolute;54    top: 140px; left: 48px; right: 48px;55  }56  .row {57    display: flex; align-items: center;58  }59  .back-btn {60    width: 84px; height: 84px; border-radius: 12px;61    display: flex; align-items: center; justify-content: center;62    background: rgba(255,255,255,0.9);63    margin-right: 16px;64    box-shadow: 0 2px 6px rgba(0,0,0,0.15);65  }66  .back-btn svg { width: 34px; height: 34px; fill: #222; }67 68  .search-bar {69    flex: 1;70    background: #fff;71    height: 92px;72    border-radius: 22px;73    box-shadow: 0 2px 10px rgba(0,0,0,0.15);74    display: flex; align-items: center; justify-content: space-between;75    padding: 0 24px;76    font-size: 36px;77    color: #1a1a1a;78  }79  .search-bar .hint { color: #2b2b2b; font-weight: 600; }80  .icon-dot { width: 12px; height: 12px; background: #4b4b4b; border-radius: 50%; margin-left: 12px; }81  .kebab { width: 30px; text-align: right; color: #666; letter-spacing: 2px; }82 83  .swap {84    width: 72px; height: 72px; border-radius: 18px;85    background: rgba(255,255,255,0.95);86    margin-left: 16px;87    display: flex; align-items: center; justify-content: center;88    box-shadow: 0 2px 8px rgba(0,0,0,0.15);89  }90  .swap svg { width: 30px; height: 30px; fill: #333; }91 92  .modes {93    margin-top: 22px;94    display: flex; align-items: center;95    gap: 18px;96  }97  .mode-pill {98    display: flex; align-items: center; gap: 12px;99    background: #fff;100    padding: 20px 26px;101    border-radius: 44px;102    font-size: 32px;103    box-shadow: 0 2px 8px rgba(0,0,0,0.15);104    color: #1a1a1a;105  }106  .mode-pill.active { background: #e8f0ff; }107  .mode-pill svg { width: 34px; height: 34px; fill: #2949f1; }108 109  /* Floating buttons */110  .fab {111    position: absolute;112    right: 36px;113    width: 120px; height: 120px;114    border-radius: 60px;115    background: rgba(255,255,255,0.95);116    box-shadow: 0 6px 20px rgba(0,0,0,0.25);117    display: flex; align-items: center; justify-content: center;118  }119  .fab svg { width: 44px; height: 44px; fill: #333; }120  .fab.layers { top: 900px; }121  .fab.search { top: 1050px; }122 123  /* Bottom sheet */124  .sheet {125    position: absolute;126    left: 0; right: 0; bottom: 0;127    height: 1060px;128    background: #fff;129    border-top-left-radius: 28px;130    border-top-right-radius: 28px;131    box-shadow: 0 -8px 24px rgba(0,0,0,0.25);132    padding: 36px 40px 120px 40px;133  }134  .sheet h2 {135    margin: 0;136    font-size: 56px;137    color: #1f1f1f;138    font-weight: 700;139  }140  .close-x {141    position: absolute;142    right: 32px; top: 32px;143    width: 96px; height: 96px;144    display: flex; align-items: center; justify-content: center;145    border-radius: 50%;146  }147  .close-x svg { width: 44px; height: 44px; fill: #333; }148 149  .type-grid {150    margin-top: 40px;151    display: grid;152    grid-template-columns: repeat(3, 1fr);153    gap: 26px 40px;154  }155  .type-card {156    display: flex; flex-direction: column; align-items: center;157  }158  .thumb {159    width: 260px; height: 200px; border-radius: 24px;160    background: #E0E0E0;161    border: 1px solid #BDBDBD;162    display: flex; align-items: center; justify-content: center;163    color: #757575;164    font-size: 30px;165  }166  .label {167    margin-top: 16px; font-size: 40px; color: #2a2a2a; font-weight: 700;168  }169 170  .divider { height: 2px; background: #e7e7e7; margin: 36px 0 24px; }171 172  .sheet h3 {173    margin: 0 0 20px 0; font-size: 50px; color: #222; font-weight: 700;174  }175 176  .details-grid {177    display: grid;178    grid-template-columns: repeat(4, 1fr);179    row-gap: 44px;180    column-gap: 22px;181  }182  .detail {183    display: flex; flex-direction: column; align-items: center; text-align: center;184  }185  .detail .tile {186    width: 170px; height: 150px; border-radius: 24px;187    background: #f2f5fb;188    border: 1px solid #cfd7e6;189    display: flex; align-items: center; justify-content: center;190  }191  .detail .tile svg { width: 64px; height: 64px; fill: #2c8b2b; }192  .detail .text { margin-top: 14px; font-size: 34px; color: #2a2a2a; }193 194  /* Gesture bar */195  .gesture {196    position: absolute;197    bottom: 20px; left: 50%;198    transform: translateX(-50%);199    width: 420px; height: 10px; background: #bbb; border-radius: 8px;200  }201</style>202</head>203<body>204<div id="render-target">205  <div class="map-image">206    <div class="placeholder">[IMG: Google Map]</div>207  </div>208 209  <!-- Status bar -->210  <div class="status-bar">211    <div>5:28</div>212    <div class="status-icons">213      <span></span><span></span><span></span><span></span>214    </div>215  </div>216 217  <!-- Search & destination controls -->218  <div class="search-stack">219    <div class="row">220      <div class="back-btn" title="Back">221        <svg viewBox="0 0 24 24"><path d="M15.5 4l-8 8 8 8 1.5-1.5L10.5 12 17 5.5z"/></svg>222      </div>223      <div class="search-bar">224        <div class="hint">Home</div>225        <div class="kebab">⋮</div>226      </div>227    </div>228 229    <div class="row" style="margin-top:16px;">230      <div class="back-btn" style="visibility:hidden;"></div>231      <div class="search-bar">232        <div class="hint">Ristorante Pizzeria Positano</div>233        <div class="swap" title="Swap">234          <svg viewBox="0 0 24 24"><path d="M7 7h11l-3-3 1.4-1.4L22.8 7l-6.4 4.4L15 10l3-3H7V7zm10 10H6l3 3-1.4 1.4L1.2 17l6.4-4.4L8 11l-3 3h12v3z"/></svg>235        </div>236      </div>237    </div>238 239    <div class="modes">240      <div class="mode-pill active">241        <svg viewBox="0 0 24 24"><path d="M5 11l1-3h12l1 3v6h-2v-2H7v2H5v-6zm3-6h8v2H8V5z"/></svg>242        <span>35 min</span>243      </div>244      <div class="mode-pill">245        <svg viewBox="0 0 24 24"><path d="M4 18h2l2-5h6l2 5h2l-2-6 2-3h-3l-2 3H9L7 9H4l2 3-2 6z"/></svg>246        <span>–</span>247      </div>248      <div class="mode-pill">249        <svg viewBox="0 0 24 24"><path d="M4 16h16v-6H4v6zm2-4h12v2H6v-2zM6 6h12v2H6z"/></svg>250        <span>2 hr 6</span>251      </div>252      <div class="mode-pill">253        <svg viewBox="0 0 24 24"><path d="M13 5a2 2 0 110 4 2 2 0 010-4zM6 9h3l2 4 2-1 4 2v5h-2v-4l-3-1-2 1-2 4H6l2-4-2-4z"/></svg>254        <span>7 hr</span>255      </div>256      <div class="mode-pill">257        <svg viewBox="0 0 24 24"><path d="M5 16l3-6h2l3 4h4v2h-5l-2-3-2 3H5zm5-8a2 2 0 100-4 2 2 0 000 4z"/></svg>258        <span>1 hr 52</span>259      </div>260    </div>261  </div>262 263  <!-- Floating buttons -->264  <div class="fab layers" title="Layers">265    <svg viewBox="0 0 24 24"><path d="M12 3l9 5-9 5-9-5 9-5zm0 8l9 5-3 1.7L12 14l-6 3.7L3 16l9-5z"/></svg>266  </div>267  <div class="fab search" title="Search">268    <svg viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.3A6.5 6.5 0 1015.5 14l4.5 4.5L19 20.5 15.5 17zm-6 0a4.5 4.5 0 110-9 4.5 4.5 0 010 9z"/></svg>269  </div>270 271  <!-- Bottom Sheet -->272  <div class="sheet">273    <div class="close-x">274      <svg viewBox="0 0 24 24"><path d="M6 6l12 12-1.4 1.4L4.6 7.4 6 6zm12 0L6 18l-1.4-1.4L16.6 4.6 18 6z"/></svg>275    </div>276    <h2>Map type</h2>277 278    <div class="type-grid">279      <div class="type-card">280        <div class="thumb">[IMG: Default]</div>281        <div class="label" style="color:#3367ff;">Default</div>282      </div>283      <div class="type-card">284        <div class="thumb">[IMG: Satellite]</div>285        <div class="label">Satellite</div>286      </div>287      <div class="type-card">288        <div class="thumb">[IMG: Terrain]</div>289        <div class="label">Terrain</div>290      </div>291    </div>292 293    <div class="divider"></div>294 295    <h3>Map details</h3>296    <div class="details-grid">297      <div class="detail">298        <div class="tile" title="Public transit">299          <svg viewBox="0 0 24 24"><path d="M6 3h12a2 2 0 012 2v9a4 4 0 01-4 4l1 2v1h-2l-2-3H11l-2 3H7v-1l1-2a4 4 0 01-4-4V5a2 2 0 012-2zm1 3v6h10V6H7z"/></svg>300        </div>301        <div class="text">Public transit</div>302      </div>303      <div class="detail">304        <div class="tile" style="border-color:#86a6ff; background:#eaf0ff;">305          <svg viewBox="0 0 24 24"><path d="M3 13h14l2 2H3v-2zm0-6h18v2H3V7zm0 12h12v2H3v-2z"/></svg>306        </div>307        <div class="text" style="color:#2b57ff; font-weight:700;">Traffic</div>308      </div>309      <div class="detail">310        <div class="tile">311          <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 100-10 5 5 0 000 10zm-8 9a8 8 0 0116 0H4z"/></svg>312        </div>313        <div class="text">Bicycling</div>314      </div>315      <div class="detail">316        <div class="tile">317          <svg viewBox="0 0 24 24"><path d="M4 18l6-4 6 4V6H4v12zm6-6l6-4H4l6 4z"/></svg>318        </div>319        <div class="text">3D</div>320      </div>321      <div class="detail">322        <div class="tile">323          <svg viewBox="0 0 24 24"><path d="M12 2l4 8h-8l4-8zm0 10a4 4 0 100 8 4 4 0 000-8z"/></svg>324        </div>325        <div class="text">Street View</div>326      </div>327      <div class="detail">328        <div class="tile" style="background:#fff4f4;border-color:#f2b3b3;">329          <svg viewBox="0 0 24 24"><path d="M12 2s5 5 5 9a5 5 0 11-10 0c0-4 5-9 5-9z"/></svg>330        </div>331        <div class="text">Wildfires</div>332      </div>333      <div class="detail">334        <div class="tile" style="background:#eef9ef;border-color:#bfe6c2;">335          <svg viewBox="0 0 24 24"><path d="M4 14c4 2 12 2 16 0v2c-4 2-12 2-16 0v-2zm0-6c4 2 12 2 16 0v2c-4 2-12 2-16 0V8z"/></svg>336        </div>337        <div class="text">Air Quality</div>338      </div>339      <div class="detail">340        <div class="tile">341          <svg viewBox="0 0 24 24"><path d="M3 7h18v2H3V7zm0 5h18v2H3v-2zm0 5h12v2H3v-2z"/></svg>342        </div>343        <div class="text">More</div>344      </div>345    </div>346  </div>347 348  <div class="gesture"></div>349</div>350</body>351</html>