GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI - Map Screen</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: #f5f7fb;13  }14 15  /* Map canvas */16  .map-canvas {17    position: absolute;18    left: 0;19    top: 0;20    width: 1080px;21    height: 1780px;22    background: #E0E0E0;23    border: 1px solid #BDBDBD;24    display: flex;25    align-items: center;26    justify-content: center;27    color: #757575;28    font-size: 40px;29    letter-spacing: 0.5px;30  }31 32  /* Search bar */33  .search-bar {34    position: absolute;35    top: 108px;36    left: 40px;37    width: 1000px;38    height: 120px;39    background: #ffffff;40    border-radius: 60px;41    box-shadow: 0 6px 16px rgba(0,0,0,0.12);42    display: flex;43    align-items: center;44    padding: 0 32px;45    gap: 24px;46  }47  .search-text {48    flex: 1;49    color: #666;50    font-size: 44px;51  }52  .icon-btn {53    width: 72px;54    height: 72px;55    border-radius: 36px;56    display: flex;57    align-items: center;58    justify-content: center;59    background: #f0f2f5;60  }61  .profile {62    width: 86px;63    height: 86px;64    border-radius: 43px;65    background: #8b6d5c;66    color: #fff;67    font-weight: bold;68    font-size: 44px;69    display: flex;70    align-items: center;71    justify-content: center;72  }73 74  /* Category chips */75  .chips {76    position: absolute;77    top: 250px;78    left: 40px;79    display: flex;80    gap: 22px;81  }82  .chip {83    display: flex;84    align-items: center;85    gap: 18px;86    padding: 24px 32px;87    background: #fff;88    border-radius: 50px;89    box-shadow: 0 4px 12px rgba(0,0,0,0.10);90    font-size: 36px;91    color: #222;92  }93  .chip .chip-icon {94    width: 54px;95    height: 54px;96    border-radius: 27px;97    background: #f2f3f5;98    display: flex;99    align-items: center;100    justify-content: center;101  }102 103  /* Floating buttons on map */104  .float-btn {105    position: absolute;106    right: 50px;107    width: 120px;108    height: 120px;109    border-radius: 28px;110    box-shadow: 0 8px 16px rgba(0,0,0,0.2);111    display: flex;112    align-items: center;113    justify-content: center;114    background: #ffffff;115  }116  .layers { top: 435px; }117  .compass { top: 1040px; border-radius: 60px; }118  .directions {119    bottom: 420px;120    width: 160px;121    height: 160px;122    border-radius: 36px;123    background: #1a73e8;124  }125 126  /* Blue location dot */127  .location-dot {128    position: absolute;129    top: 760px;130    left: 520px;131    width: 32px;132    height: 32px;133    background: #1a73e8;134    border-radius: 50%;135    box-shadow: 0 0 0 10px rgba(26,115,232,0.18);136  }137 138  /* Google watermark */139  .watermark {140    position: absolute;141    bottom: 770px;142    left: 40px;143    color: #3c7dd9;144    font-size: 46px;145    font-weight: bold;146  }147 148  /* Bottom sheet */149  .sheet {150    position: absolute;151    left: 0;152    bottom: 190px;153    width: 1080px;154    height: 700px;155    background: #ffffff;156    border-top-left-radius: 28px;157    border-top-right-radius: 28px;158    box-shadow: 0 -8px 20px rgba(0,0,0,0.15);159    padding: 40px;160  }161  .sheet h2 {162    margin: 0 0 30px 0;163    font-size: 64px;164    color: #1e1e1e;165    letter-spacing: 0.3px;166  }167  .user-row {168    display: flex;169    align-items: center;170    justify-content: space-between;171  }172  .user-info {173    display: flex;174    align-items: center;175    gap: 26px;176  }177  .avatar {178    width: 96px;179    height: 96px;180    border-radius: 48px;181    background: #E0E0E0;182    border: 1px solid #BDBDBD;183    display: flex;184    align-items: center;185    justify-content: center;186    color: #757575;187    font-size: 22px;188  }189  .user-text {190    display: flex;191    flex-direction: column;192    gap: 10px;193  }194  .user-name {195    font-size: 46px;196    color: #111;197    font-weight: 600;198  }199  .user-sub {200    font-size: 32px;201    color: #666;202  }203  .follow-btn {204    background: #f0f4ff;205    color: #1a73e8;206    border: 2px solid #b9d0ff;207    font-size: 40px;208    padding: 16px 36px;209    border-radius: 50px;210  }211  .photo {212    margin-top: 30px;213    width: 100%;214    height: 360px;215    background: #E0E0E0;216    border: 1px solid #BDBDBD;217    border-radius: 20px;218    display: flex;219    align-items: center;220    justify-content: center;221    color: #757575;222    font-size: 34px;223  }224 225  /* Bottom nav bar */226  .nav-bar {227    position: absolute;228    left: 0;229    bottom: 0;230    width: 1080px;231    height: 190px;232    background: #f7f8fb;233    border-top: 1px solid #e0e0e0;234    display: flex;235    align-items: center;236    justify-content: space-around;237    padding-bottom: 10px;238  }239  .nav-item {240    display: flex;241    flex-direction: column;242    align-items: center;243    gap: 16px;244    color: #666;245    font-size: 34px;246  }247  .nav-item.active { color: #1a73e8; }248  .nav-icon {249    width: 84px;250    height: 84px;251    border-radius: 42px;252    background: #e9edf8;253    display: flex;254    align-items: center;255    justify-content: center;256  }257  .nav-item.active .nav-icon { background: #d8e5ff; }258  /* Small grey handle for sheet (optional detail) */259  .handle {260    position: absolute;261    top: 18px;262    left: 50%;263    transform: translateX(-50%);264    width: 140px;265    height: 12px;266    background: #e3e3e7;267    border-radius: 6px;268  }269</style>270</head>271<body>272<div id="render-target">273 274  <div class="map-canvas">[IMG: Google Map]</div>275 276  <!-- Search Bar -->277  <div class="search-bar">278    <!-- Simple colored pin icon -->279    <svg width="56" height="56" viewBox="0 0 24 24">280      <path d="M12 2C8.7 2 6 4.7 6 8c0 5.1 6 12 6 12s6-6.9 6-12c0-3.3-2.7-6-6-6z" fill="#1a73e8"/>281      <circle cx="12" cy="8" r="3" fill="#ffcc00"/>282    </svg>283    <div class="search-text">Search here</div>284    <div class="icon-btn">285      <svg width="36" height="36" viewBox="0 0 24 24">286        <path d="M12 3a3 3 0 0 1 3 3v4a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3z" fill="#444"/>287        <path d="M5 13h14v2a7 7 0 0 1-14 0v-2z" fill="#444"/>288      </svg>289    </div>290    <div class="profile">C</div>291  </div>292 293  <!-- Category chips -->294  <div class="chips">295    <div class="chip">296      <div class="chip-icon">297        <svg width="32" height="32" viewBox="0 0 24 24">298          <path d="M4 10h16v8H4z" fill="#888"/>299          <path d="M6 6h4v4H6zM14 6h4v4h-4z" fill="#bbb"/>300        </svg>301      </div>302      Petrol303    </div>304    <div class="chip">305      <div class="chip-icon">306        <svg width="32" height="32" viewBox="0 0 24 24">307          <path d="M3 11h18v2H3z" fill="#888"/>308          <circle cx="8" cy="7" r="2.5" fill="#bbb"/>309          <circle cx="16" cy="7" r="2.5" fill="#bbb"/>310        </svg>311      </div>312      Restaurants313    </div>314    <div class="chip">315      <div class="chip-icon">316        <svg width="32" height="32" viewBox="0 0 24 24">317          <path d="M12 3l7 7-7 11-7-11 7-7z" fill="#888"/>318        </svg>319      </div>320      Attractions321    </div>322  </div>323 324  <!-- Floating Map Controls -->325  <div class="float-btn layers">326    <svg width="48" height="48" viewBox="0 0 24 24">327      <path d="M3 12l9-6 9 6-9 6-9-6z" fill="#6c78a8"/>328      <path d="M5 14l7 4 7-4" stroke="#6c78a8" stroke-width="2" fill="none"/>329    </svg>330  </div>331 332  <div class="float-btn compass">333    <svg width="80" height="80" viewBox="0 0 24 24">334      <circle cx="12" cy="12" r="10" fill="#fff" stroke="#999"/>335      <path d="M12 5l4 7-7 4 3-11z" fill="#1a73e8"/>336    </svg>337  </div>338 339  <div class="float-btn directions">340    <svg width="84" height="84" viewBox="0 0 24 24">341      <path d="M12 3l9 9-9 9-9-9 9-9z" fill="#fff"/>342      <path d="M10 14l4-4v8" stroke="#1a73e8" stroke-width="2" fill="none"/>343    </svg>344  </div>345 346  <!-- Blue location dot -->347  <div class="location-dot"></div>348 349  <!-- Google watermark -->350  <div class="watermark">Google</div>351 352  <!-- Bottom sheet -->353  <div class="sheet">354    <div class="handle"></div>355    <h2>Latest in the area</h2>356    <div class="user-row">357      <div class="user-info">358        <div class="avatar">[IMG: User Avatar]</div>359        <div class="user-text">360          <div class="user-name">Shivam Tomar Official</div>361          <div class="user-sub">Local Guide · 194 photos</div>362        </div>363      </div>364      <button class="follow-btn">Follow</button>365    </div>366    <div class="photo">[IMG: Building Photo]</div>367  </div>368 369  <!-- Bottom navigation bar -->370  <div class="nav-bar">371    <div class="nav-item active">372      <div class="nav-icon">373        <svg width="44" height="44" viewBox="0 0 24 24">374          <path d="M12 2C8.5 2 6 4.5 6 8c0 4.8 6 12 6 12s6-7.2 6-12c0-3.5-2.5-6-6-6z" fill="#1a73e8"/>375          <circle cx="12" cy="8" r="3" fill="#fff"/>376        </svg>377      </div>378      Explore379    </div>380    <div class="nav-item">381      <div class="nav-icon">382        <svg width="44" height="44" viewBox="0 0 24 24">383          <path d="M6 18l6-12 6 12H6z" fill="#666"/>384        </svg>385      </div>386      Go387    </div>388    <div class="nav-item">389      <div class="nav-icon">390        <svg width="44" height="44" viewBox="0 0 24 24">391          <path d="M5 5h14v14H5z" fill="#666"/>392          <path d="M9 9h6v6H9z" fill="#fff"/>393        </svg>394      </div>395      Saved396    </div>397    <div class="nav-item">398      <div class="nav-icon">399        <svg width="44" height="44" viewBox="0 0 24 24">400          <path d="M12 5v14M5 12h14" stroke="#666" stroke-width="2"/>401        </svg>402      </div>403      Contribute404    </div>405    <div class="nav-item">406      <div class="nav-icon">407        <svg width="44" height="44" viewBox="0 0 24 24">408          <path d="M4 6h16v12H4z" fill="#666"/>409          <path d="M6 8h12v2H6zM6 12h12v2H6z" fill="#fff"/>410        </svg>411      </div>412      Updates413    </div>414  </div>415 416</div>417</body>418</html>