GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Map UI Mock</title>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  }15 16  /* Map area placeholder */17  .map {18    position: absolute;19    left: 0;20    top: 0;21    width: 1080px;22    height: 1560px;23    background: #E0E0E0;24    border: 1px solid #BDBDBD;25    color: #757575;26    display: flex;27    align-items: center;28    justify-content: center;29    font-size: 28px;30  }31 32  /* Status/time */33  .status-time {34    position: absolute;35    top: 30px;36    left: 36px;37    font-size: 40px;38    color: #333;39    opacity: 0.8;40  }41 42  /* Search bar */43  .search-bar {44    position: absolute;45    top: 110px;46    left: 36px;47    width: 1008px;48    height: 120px;49    background: #fff;50    border-radius: 60px;51    box-shadow: 0 6px 16px rgba(0,0,0,0.15);52    display: flex;53    align-items: center;54    padding: 0 30px;55    gap: 24px;56  }57  .g-logo {58    width: 62px;59    height: 62px;60    border-radius: 20px;61    overflow: hidden;62    position: relative;63  }64  .g-logo svg { width: 62px; height: 62px; }65  .search-text {66    flex: 1;67    font-size: 44px;68    color: #777;69  }70  .mic-icon, .avatar {71    width: 80px;72    height: 80px;73  }74  .mic-icon {75    border-radius: 40px;76    display: flex;77    align-items: center;78    justify-content: center;79    color: #555;80  }81  .avatar {82    border-radius: 40px;83    background: #C2185B;84    color: #fff;85    display: flex;86    align-items: center;87    justify-content: center;88    font-weight: bold;89    font-size: 44px;90  }91 92  /* Category chips */93  .chips {94    position: absolute;95    top: 270px;96    left: 36px;97    display: flex;98    gap: 28px;99  }100  .chip {101    display: flex;102    align-items: center;103    gap: 16px;104    background: #fff;105    height: 110px;106    padding: 0 36px;107    border-radius: 55px;108    box-shadow: 0 6px 16px rgba(0,0,0,0.15);109    font-size: 40px;110    color: #333;111  }112  .chip .icon {113    width: 56px;114    height: 56px;115  }116 117  /* Small floating tool icons (right side) */118  .tools {119    position: absolute;120    top: 360px;121    right: 32px;122    display: flex;123    flex-direction: column;124    gap: 22px;125  }126  .tool-btn {127    width: 100px;128    height: 100px;129    border-radius: 50%;130    background: #fff;131    box-shadow: 0 6px 14px rgba(0,0,0,0.18);132    display: flex;133    align-items: center;134    justify-content: center;135  }136  .tool-btn svg { width: 56px; height: 56px; }137 138  /* Main floating actions (right middle) */139  .actions {140    position: absolute;141    top: 1050px;142    right: 42px;143    display: flex;144    flex-direction: column;145    gap: 22px;146  }147  .action-white, .action-blue {148    width: 130px;149    height: 130px;150    border-radius: 65px;151    box-shadow: 0 10px 20px rgba(0,0,0,0.22);152    display: flex;153    align-items: center;154    justify-content: center;155  }156  .action-white { background: #fff; }157  .action-blue { background: #1E88E5; }158  .action-white svg, .action-blue svg { width: 70px; height: 70px; }159 160  /* Map markers (simple orange pins) */161  .pin {162    position: absolute;163    width: 56px;164    height: 56px;165    border-radius: 28px 28px 28px 0;166    transform: rotate(45deg);167    background: #FB8C00;168    box-shadow: 0 3px 8px rgba(0,0,0,0.25);169  }170  .pin svg {171    position: absolute;172    transform: rotate(-45deg);173    left: 10px;174    top: 10px;175    width: 36px;176    height: 36px;177  }178 179  /* Bottom sheet */180  .bottom-sheet {181    position: absolute;182    left: 0;183    bottom: 210px;184    width: 1080px;185    height: 650px;186    background: #fff;187    border-top-left-radius: 40px;188    border-top-right-radius: 40px;189    box-shadow: 0 -8px 20px rgba(0,0,0,0.18);190    padding: 36px;191  }192  .drag-bar {193    position: absolute;194    top: 14px;195    left: 50%;196    transform: translateX(-50%);197    width: 160px;198    height: 12px;199    background: rgba(0,0,0,0.15);200    border-radius: 6px;201  }202  .sheet-title {203    margin-top: 40px;204    font-size: 50px;205    color: #222;206    font-weight: 600;207  }208  .sheet-sub {209    margin-top: 20px;210    font-size: 36px;211    color: #666;212  }213  .cards {214    margin-top: 26px;215    display: flex;216    gap: 24px;217  }218  .card {219    flex: 1;220    height: 300px;221    background: #E0E0E0;222    border: 1px solid #BDBDBD;223    border-radius: 26px;224    display: flex;225    align-items: center;226    justify-content: center;227    color: #757575;228    font-size: 28px;229    overflow: hidden;230  }231 232  /* Bottom navigation */233  .bottom-nav {234    position: absolute;235    left: 0;236    bottom: 0;237    width: 1080px;238    height: 210px;239    background: #ECEFF1;240    border-top: 1px solid #D0D4D8;241    display: flex;242    align-items: center;243    justify-content: space-around;244    padding-top: 26px;245  }246  .nav-item {247    width: 180px;248    height: 160px;249    display: flex;250    flex-direction: column;251    align-items: center;252    justify-content: center;253    color: #616161;254    font-size: 30px;255    gap: 12px;256  }257  .nav-item svg { width: 56px; height: 56px; }258  .nav-item.active { color: #1E88E5; }259 260  /* Home pill indicator */261  .home-pill {262    position: absolute;263    bottom: 220px;264    left: 50%;265    transform: translateX(-50%);266    width: 300px;267    height: 12px;268    background: #BDBDBD;269    border-radius: 10px;270    opacity: 0.7;271  }272</style>273</head>274<body>275<div id="render-target">276 277  <div class="map">[IMG: Google Map]</div>278 279  <div class="status-time">11:01</div>280 281  <div class="search-bar">282    <div class="g-logo">283      <!-- Simplified multicolor pin-like logo -->284      <svg viewBox="0 0 64 64">285        <defs>286          <clipPath id="r">287            <circle cx="32" cy="32" r="32"></circle>288          </clipPath>289        </defs>290        <g clip-path="url(#r)">291          <rect x="0" y="0" width="64" height="32" fill="#43A047"></rect>292          <rect x="0" y="32" width="64" height="32" fill="#1E88E5"></rect>293          <circle cx="18" cy="22" r="16" fill="#FDD835"></circle>294          <circle cx="46" cy="42" r="16" fill="#E53935"></circle>295        </g>296      </svg>297    </div>298    <div class="search-text">Search here</div>299    <div class="mic-icon">300      <svg viewBox="0 0 24 24">301        <path d="M12 4a3 3 0 0 1 3 3v5a3 3 0 1 1-6 0V7a3 3 0 0 1 3-3zM5 11h2a5 5 0 0 0 10 0h2c0 3.3-2.5 6-6 6v3h-4v-3c-3.5 0-6-2.7-6-6z" fill="#616161"/>302      </svg>303    </div>304    <div class="avatar">C</div>305  </div>306 307  <div class="chips">308    <div class="chip">309      <svg class="icon" viewBox="0 0 24 24">310        <path d="M7 3h2v9a3 3 0 1 1-2 0V3zm8 0c1.7 0 3 1.3 3 3v6h-3v9h-2V3h2z" fill="#616161"/>311      </svg>312      <span>Restaurants</span>313    </div>314    <div class="chip">315      <svg class="icon" viewBox="0 0 24 24">316        <path d="M7 6h10l2 4H5l2-4zm-2 6h14v8H5v-8zm4 2v4h2v-4H9zm6 0v4h2v-4h-2z" fill="#616161"/>317      </svg>318      <span>Groceries</span>319    </div>320    <div class="chip">321      <svg class="icon" viewBox="0 0 24 24">322        <path d="M6 7l2-4h8l2 4h-2l-1-2H9L8 7H6zm0 3h12v10H6V10zm3 3v4h2v-4H9zm6 0v4h2v-4h-2z" fill="#616161"/>323      </svg>324      <span>Shopping</span>325    </div>326  </div>327 328  <div class="tools">329    <div class="tool-btn">330      <svg viewBox="0 0 24 24">331        <path d="M12 2l4 8-8 0 4-8zm0 11a4 4 0 1 1 0 8 4 4 0 0 1 0-8z" fill="#616161"/>332      </svg>333    </div>334    <div class="tool-btn">335      <svg viewBox="0 0 24 24">336        <path d="M3 7h18v10H3V7zm2 2v6h14V9H5z" fill="#616161"/>337      </svg>338    </div>339  </div>340 341  <div class="actions">342    <div class="action-white">343      <svg viewBox="0 0 24 24">344        <circle cx="12" cy="12" r="9" fill="#E53935"/>345        <path d="M12 7a5 5 0 0 1 5 5h-3a2 2 0 1 0-4 0H7a5 5 0 0 1 5-5z" fill="#fff"/>346        <circle cx="12" cy="12" r="2" fill="#fff"/>347      </svg>348    </div>349    <div class="action-blue">350      <svg viewBox="0 0 24 24">351        <path d="M12 2l9 9-9 11L3 11 12 2zm1 6-5 3 5 3V8z" fill="#fff"/>352      </svg>353    </div>354  </div>355 356  <!-- A few scattered pins on the map for visual richness -->357  <div class="pin" style="top: 540px; left: 170px;">358    <svg viewBox="0 0 24 24">359      <path d="M5 3h2v8H5V3zm12 0h2v8h-2V3zM7 12h10v2H7v-2z" fill="#fff"/>360    </svg>361  </div>362  <div class="pin" style="top: 780px; left: 420px;">363    <svg viewBox="0 0 24 24">364      <path d="M5 3h2v8H5V3zm12 0h2v8h-2V3zM7 12h10v2H7v-2z" fill="#fff"/>365    </svg>366  </div>367  <div class="pin" style="top: 980px; left: 260px;">368    <svg viewBox="0 0 24 24">369      <path d="M5 3h2v8H5V3zm12 0h2v8h-2V3zM7 12h10v2H7v-2z" fill="#fff"/>370    </svg>371  </div>372  <div class="pin" style="top: 860px; left: 700px;">373    <svg viewBox="0 0 24 24">374      <path d="M5 3h2v8H5V3zm12 0h2v8h-2V3zM7 12h10v2H7v-2z" fill="#fff"/>375    </svg>376  </div>377 378  <div class="bottom-sheet">379    <div class="drag-bar"></div>380    <div class="sheet-title">Latest in Terreaux - Bat d'argent</div>381    <div class="sheet-sub">Iconic places</div>382    <div class="cards">383      <div class="card">[IMG: Statue on blue sky]</div>384      <div class="card">[IMG: Historic building on blue sky]</div>385    </div>386  </div>387 388  <div class="home-pill"></div>389 390  <div class="bottom-nav">391    <div class="nav-item active">392      <svg viewBox="0 0 24 24">393        <path d="M12 2c4 0 7 3 7 7 0 6-7 13-7 13S5 15 5 9c0-4 3-7 7-7zm0 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" fill="#1E88E5"/>394      </svg>395      <div>Explore</div>396    </div>397    <div class="nav-item">398      <svg viewBox="0 0 24 24">399        <path d="M3 5h18v12H3V5zm2 2v8h14V7H5zm4 9h6v2H9v-2z" fill="#616161"/>400      </svg>401      <div>Go</div>402    </div>403    <div class="nav-item">404      <svg viewBox="0 0 24 24">405        <path d="M6 4h12v16l-6-4-6 4V4z" fill="#616161"/>406      </svg>407      <div>Saved</div>408    </div>409    <div class="nav-item">410      <svg viewBox="0 0 24 24">411        <path d="M12 4v8h8v2h-8v6l-6-6H4v-2h2l6-8z" fill="#616161"/>412      </svg>413      <div>Contribute</div>414    </div>415    <div class="nav-item">416      <svg viewBox="0 0 24 24">417        <path d="M12 2a6 6 0 0 1 6 6v5l2 2v1H4v-1l2-2V8a6 6 0 0 1 6-6zm0 20a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2z" fill="#616161"/>418      </svg>419      <div>Updates</div>420    </div>421  </div>422 423</div>424</body>425</html>