GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>Mobile UI - Map</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #eaf3ff;13    border-radius: 0px;14  }15 16  /* Map area */17  .map-area {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 1600px;23    background: #E0E0E0;24    border-bottom: 1px solid #BDBDBD;25    display:flex;26    align-items:center;27    justify-content:center;28    color:#666;29    font-weight:600;30    letter-spacing:0.5px;31  }32 33  /* Status time */34  .status-time {35    position:absolute;36    top: 20px;37    left: 24px;38    font-size: 36px;39    color:#222;40    opacity:0.85;41  }42 43  /* Search bar */44  .search-bar {45    position:absolute;46    top: 90px;47    left: 40px;48    width: 1000px;49    height: 120px;50    background:#fff;51    border-radius: 60px;52    box-shadow: 0 8px 24px rgba(0,0,0,0.15);53    display:flex;54    align-items:center;55    padding: 0 28px;56    gap: 24px;57  }58  .search-text {59    flex:1;60    font-size: 42px;61    color:#666;62  }63  .profile {64    width: 90px;65    height: 90px;66    background:#8b2c12;67    color:#fff;68    border-radius: 50%;69    display:flex;70    align-items:center;71    justify-content:center;72    font-weight:bold;73    font-size: 44px;74  }75  .pill-icon {76    width: 72px;77    height: 72px;78    border-radius: 36px;79    display:flex;80    align-items:center;81    justify-content:center;82  }83  .pill-icon.mic { background:#f5f5f5; }84  .g-pin {85    width:68px;86    height:68px;87    border-radius:34px;88    background:#f5f5f5;89    display:flex;90    align-items:center;91    justify-content:center;92  }93 94  /* Floating buttons right side */95  .float-stack {96    position:absolute;97    right: 36px;98    top: 360px;99    display:flex;100    flex-direction:column;101    gap: 28px;102  }103  .circle-btn {104    width:120px;105    height:120px;106    background:#fff;107    border-radius:60px;108    box-shadow:0 8px 20px rgba(0,0,0,0.18);109    display:flex;110    align-items:center;111    justify-content:center;112  }113  .circle-btn.red {114    border: 4px solid #ef5350;115  }116 117  /* Help button */118  .help-btn {119    position:absolute;120    right: 40px;121    top: 1030px;122    width:130px;123    height:130px;124    background:#fff;125    border-radius:65px;126    box-shadow:0 8px 20px rgba(0,0,0,0.18);127    display:flex;128    align-items:center;129    justify-content:center;130  }131  .help-inner {132    width: 110px;133    height: 110px;134    background: #ff7043;135    border-radius: 55px;136    display:flex;137    align-items:center;138    justify-content:center;139    color:#fff;140    font-weight:bold;141    font-size: 60px;142  }143 144  /* Directions floating button */145  .directions-btn {146    position:absolute;147    right: 40px;148    bottom: 560px;149    width: 170px;150    height: 170px;151    background:#1e73ff;152    border-radius:85px;153    box-shadow:0 14px 28px rgba(0,0,0,0.25);154    display:flex;155    align-items:center;156    justify-content:center;157  }158 159  /* Bottom sheet */160  .bottom-sheet {161    position:absolute;162    left:0;163    right:0;164    bottom: 220px;165    height: 700px;166    background:#fff;167    border-top-left-radius: 30px;168    border-top-right-radius: 30px;169    box-shadow: 0 -10px 24px rgba(0,0,0,0.12);170  }171  .bottom-handle {172    position:absolute;173    top: 18px;174    left:50%;175    transform: translateX(-50%);176    width: 120px;177    height: 10px;178    background:#d0d0d0;179    border-radius:5px;180  }181  .sheet-illustration {182    position:absolute;183    left:50%;184    top: 120px;185    transform: translateX(-50%);186    width: 780px;187    height: 480px;188    background:#E0E0E0;189    border:1px solid #BDBDBD;190    color:#757575;191    display:flex;192    align-items:center;193    justify-content:center;194    text-align:center;195    font-size: 36px;196  }197 198  /* Bottom navigation */199  .bottom-nav {200    position:absolute;201    left:0;202    right:0;203    bottom:0;204    height:220px;205    background:#f2f4f7;206    border-top:1px solid #d9dce0;207    display:flex;208    align-items:center;209    justify-content:space-around;210    padding: 0 24px;211  }212  .nav-item {213    width: 200px;214    height: 160px;215    display:flex;216    flex-direction:column;217    align-items:center;218    justify-content:center;219    color:#606a76;220    font-size:34px;221    gap:16px;222    position:relative;223  }224  .nav-icon {225    width:86px;226    height:86px;227    display:flex;228    align-items:center;229    justify-content:center;230    color:#606a76;231  }232  .nav-item.active .nav-label {233    color:#0a57ff;234    font-weight:bold;235  }236  .nav-item.active .active-bg {237    position:absolute;238    top: 20px;239    width: 160px;240    height: 110px;241    border-radius: 60px;242    background:#cfe1ff;243    z-index:0;244  }245  .nav-item.active .nav-icon,246  .nav-item.active svg { color:#0a57ff; fill:#0a57ff; }247 248  /* Simple markers for map */249  .marker {250    position:absolute;251    width:60px;252    height:60px;253    background:#2ecc71;254    border-radius:30px;255    box-shadow:0 4px 10px rgba(0,0,0,0.25);256    display:flex;257    align-items:center;258    justify-content:center;259    color:#fff;260    font-weight:bold;261    font-size:30px;262  }263  .marker.small { width:46px; height:46px; border-radius:23px; font-size:24px; }264  .marker.blue { background:#42a5f5; }265  .map-label {266    position:absolute;267    left: 80px;268    top: 1180px;269    font-size: 44px;270    color:#333;271    font-weight:bold;272    opacity:0.9;273  }274</style>275</head>276<body>277<div id="render-target">278 279  <div class="map-area">[IMG: Google Map of New York City with traffic]</div>280 281  <div class="status-time">8:44</div>282 283  <!-- Search Bar -->284  <div class="search-bar">285    <div class="g-pin">286      <svg width="40" height="40" viewBox="0 0 24 24">287        <path d="M12 2C8.7 2 6 4.7 6 8c0 4.5 6 12 6 12s6-7.5 6-12c0-3.3-2.7-6-6-6zm0 8.5c-1.9 0-3.5-1.6-3.5-3.5S10.1 3.5 12 3.5s3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5z" fill="#0a57ff"/>288      </svg>289    </div>290    <div class="search-text">Search here</div>291    <div class="pill-icon mic">292      <svg width="40" height="40" viewBox="0 0 24 24">293        <path d="M12 3a3 3 0 013 3v5a3 3 0 11-6 0V6a3 3 0 013-3zm-6 8a6 6 0 0012 0h2a8 8 0 01-7 7.9V21h-2v-2.1A8 8 0 014 11h2z" fill="#555"/>294      </svg>295    </div>296    <div class="profile">C</div>297  </div>298 299  <!-- Floating stack right -->300  <div class="float-stack">301    <div class="circle-btn">302      <svg width="60" height="60" viewBox="0 0 24 24">303        <path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z" fill="#37474f"/>304      </svg>305    </div>306    <div class="circle-btn red">307      <svg width="60" height="60" viewBox="0 0 24 24">308        <path d="M12 2l4 8-4 12-4-12 4-8z" fill="#ef5350"/>309      </svg>310    </div>311  </div>312 313  <!-- Random map markers -->314  <div class="marker" style="left: 440px; top: 720px;">M</div>315  <div class="marker small blue" style="left: 520px; top: 860px;">i</div>316  <div class="marker" style="left: 720px; top: 980px;">G</div>317  <div class="marker small" style="left: 340px; top: 1090px;">!</div>318 319  <!-- Help floating button -->320  <div class="help-btn">321    <div class="help-inner">?</div>322  </div>323 324  <!-- Directions floating button -->325  <div class="directions-btn">326    <svg width="90" height="90" viewBox="0 0 24 24">327      <path d="M12 2l10 10-10 10L2 12 12 2zm-1 6v4H8l4 4 4-4h-3V8h-2z" fill="#fff"/>328    </svg>329  </div>330 331  <!-- Label on map -->332  <div class="map-label">Empire State Building</div>333 334  <!-- Bottom sheet -->335  <div class="bottom-sheet">336    <div class="bottom-handle"></div>337    <div class="sheet-illustration">[IMG: Empty Go tab illustration with cactus]</div>338  </div>339 340  <!-- Bottom Navigation -->341  <div class="bottom-nav">342    <div class="nav-item">343      <div class="nav-icon">344        <svg width="70" height="70" viewBox="0 0 24 24">345          <path d="M12 2C8.7 2 6 4.7 6 8c0 4.4 6 12 6 12s6-7.6 6-12c0-3.3-2.7-6-6-6zm0 9a3 3 0 110-6 3 3 0 010 6z" fill="currentColor"/>346        </svg>347      </div>348      <div class="nav-label">Explore</div>349    </div>350 351    <div class="nav-item active">352      <div class="active-bg"></div>353      <div class="nav-icon" style="z-index:1;">354        <svg width="76" height="76" viewBox="0 0 24 24">355          <path d="M4 7h16a2 2 0 012 2v7a2 2 0 01-2 2h-1a2 2 0 01-2 2h-2a2 2 0 01-2-2H9a2 2 0 01-2 2H5a2 2 0 01-2-2H2a2 2 0 01-2-2V9a2 2 0 012-2zm2 2v5h12V9H6zm2 8a1.5 1.5 0 103 0H8zm7 0a1.5 1.5 0 103 0h-3z" fill="currentColor"/>356        </svg>357      </div>358      <div class="nav-label" style="z-index:1;">Go</div>359    </div>360 361    <div class="nav-item">362      <div class="nav-icon">363        <svg width="70" height="70" viewBox="0 0 24 24">364          <path d="M6 2h12a2 2 0 012 2v18l-8-4-8 4V4a2 2 0 012-2z" fill="currentColor"/>365        </svg>366      </div>367      <div class="nav-label">Saved</div>368    </div>369 370    <div class="nav-item">371      <div class="nav-icon">372        <svg width="70" height="70" viewBox="0 0 24 24">373          <path d="M12 5v6H6v2h6v6h2v-6h6v-2h-6V5h-2z" fill="currentColor"/>374        </svg>375      </div>376      <div class="nav-label">Contribute</div>377    </div>378 379    <div class="nav-item">380      <div class="nav-icon">381        <svg width="70" height="70" viewBox="0 0 24 24">382          <path d="M12 2a6 6 0 00-6 6v4l-2 2v2h16v-2l-2-2V8a6 6 0 00-6-6zm0 20a2 2 0 002-2H10a2 2 0 002 2z" fill="currentColor"/>383        </svg>384      </div>385      <div class="nav-label">Updates</div>386    </div>387  </div>388 389</div>390</body>391</html>