GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Google Maps Dark UI Mock</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #0f1923;14    color: #fff;15  }16 17  /* Fullscreen map placeholder */18  .map-canvas {19    position: absolute;20    left: 0; top: 0; right: 0; bottom: 0;21    background: #0e1a26;22  }23  .map-canvas .img {24    position: absolute;25    left: 20px; right: 20px; top: 160px; bottom: 260px;26    background: #E0E0E0;27    border: 1px solid #BDBDBD;28    border-radius: 18px;29    display: flex; align-items: center; justify-content: center;30    color: #555;31    letter-spacing: 0.5px;32    font-size: 28px;33    text-align: center;34  }35 36  /* Status bar */37  .status-bar {38    position: absolute;39    top: 0; left: 0; right: 0;40    height: 86px;41    padding: 0 28px;42    display: flex; align-items: center; justify-content: space-between;43    font-weight: 600;44    font-size: 36px;45    color: #e9edf3;46    z-index: 5;47  }48  .status-icons {49    display: flex; align-items: center; gap: 22px;50  }51  .icon {52    width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;53  }54  .icon svg { width: 100%; height: 100%; fill: #e9edf3; }55 56  /* Search bar */57  .search-wrap {58    position: absolute;59    top: 106px; left: 24px; right: 24px;60    height: 120px;61    border-radius: 60px;62    background: #2d3138;63    border: 1px solid #3b3f46;64    display: flex; align-items: center;65    padding: 0 20px;66    gap: 18px;67    z-index: 6;68    box-shadow: 0 6px 10px rgba(0,0,0,0.35);69  }70  .maps-pin {71    width: 64px; height: 64px; border-radius: 50%;72    background: radial-gradient(circle at 60% 40%, #4fc3f7 0%, #1e88e5 60%) ;73    position: relative;74    overflow: hidden;75  }76  .maps-pin:after{77    content:"";78    position:absolute; bottom:-6px; left:27px;79    width:10px; height:22px; background:#1e88e5; transform: rotate(30deg); border-radius:2px;80  }81  .search-input {82    flex: 1; color: #cfd8dc; font-size: 44px; opacity: 0.95;83  }84  .search-actions { display: flex; align-items: center; gap: 18px; }85  .mic { width: 54px; height: 54px; border-radius: 50%; background:#3b4047; display:flex; align-items:center; justify-content:center; }86  .mic svg { width: 34px; height: 34px; fill:#dfe3e6; }87  .avatar {88    width: 64px; height: 64px; border-radius: 50%; background:#6c57f5; color:#fff; font-weight:700;89    display:flex; align-items:center; justify-content:center; font-size:36px;90  }91 92  /* Chips */93  .chips {94    position: absolute;95    top: 246px; left: 18px; right: 18px;96    display: flex; gap: 18px; flex-wrap: nowrap;97    z-index: 6;98  }99  .chip {100    height: 88px;101    padding: 0 28px;102    background: #2f323a;103    border: 1px solid #444a52;104    color: #e7ebef;105    border-radius: 44px;106    display: flex; align-items: center; gap: 16px;107    font-size: 36px;108    white-space: nowrap;109    box-shadow: 0 4px 8px rgba(0,0,0,0.3);110  }111  .chip .mini {112    width: 44px; height: 44px; border-radius: 50%;113    background: #3c4149; display:flex; align-items:center; justify-content:center;114  }115  .chip .mini svg { width: 26px; height: 26px; fill:#c7d0d6; }116 117  /* Floating buttons */118  .floating {119    position: absolute; right: 26px; z-index: 6;120  }121  .layers-btn {122    top: 390px;123    width: 106px; height: 106px; border-radius: 50%;124    background: #2e3238; border: 1px solid #3f454d;125    display:flex; align-items:center; justify-content:center;126    box-shadow: 0 6px 14px rgba(0,0,0,0.5);127  }128  .layers-btn svg { width: 60px; height: 60px; fill:#dfe6ec; }129  .compass-btn {130    top: 1520px;131    width: 140px; height: 140px; border-radius: 50%;132    background: #21252b; border: 1px solid #3f454d;133    display:flex; align-items:center; justify-content:center;134    box-shadow: 0 10px 18px rgba(0,0,0,0.6);135  }136  .compass-btn svg { width: 70px; height: 70px; fill:#c7d0d6; }137  .direction-btn {138    bottom: 430px;139    width: 160px; height: 160px; border-radius: 24px;140    background: #a7b7ff; display:flex; align-items:center; justify-content:center;141    box-shadow: 0 10px 18px rgba(0,0,0,0.55);142  }143  .direction-btn svg { width: 78px; height: 78px; fill:#1f2d5b; transform: rotate(45deg); }144 145  /* Bottom sheet */146  .bottom-sheet {147    position: absolute;148    left: 0; right: 0;149    height: 320px;150    bottom: 220px;151    background: rgba(10,12,16,0.92);152    border-top-left-radius: 26px;153    border-top-right-radius: 26px;154    box-shadow: 0 -6px 18px rgba(0,0,0,0.5);155    padding: 26px 32px;156    z-index: 7;157  }158  .grabber {159    width: 120px; height: 10px; background: #3b3f46; border-radius: 6px; margin: 8px auto 18px auto;160  }161  .bottom-title {162    font-size: 54px; font-weight: 700; color: #e9edf3;163    margin-top: 12px;164  }165 166  /* Bottom navigation */167  .bottom-nav {168    position: absolute;169    left: 0; right: 0; bottom: 0;170    height: 220px; background: #0b1118;171    border-top: 1px solid #1d2430;172    display: grid; grid-template-columns: repeat(5, 1fr);173    z-index: 8;174  }175  .nav-item {176    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;177    color: #c9d2d8; font-size: 28px;178  }179  .nav-item .ico {180    width: 72px; height: 72px; border-radius: 14px;181    display:flex; align-items:center; justify-content:center;182    background: #1a222c;183  }184  .nav-item.active { color: #8bbcff; }185  .nav-item.active .ico { background: #1e2d3a; border: 1px solid #294458; }186  .nav-item svg { width: 40px; height: 40px; fill: currentColor; }187 188</style>189</head>190<body>191<div id="render-target">192 193  <div class="map-canvas">194    <div class="img">[IMG: Google Map - Dark Theme with roads and labels]</div>195  </div>196 197  <!-- Status Bar -->198  <div class="status-bar">199    <div>1:50</div>200    <div class="status-icons">201      <div class="icon" title="Do Not Disturb">202        <svg viewBox="0 0 24 24"><path d="M12 4a8 8 0 1 0 .001 16.001A8 8 0 0 0 12 4zm-6 7h12v2H6v-2z"/></svg>203      </div>204      <div class="icon" title="Wi-Fi">205        <svg viewBox="0 0 24 24"><path d="M12 18.5l-2.5 2.5L12 24l2.5-3-2.5-2.5zm0-13C7 5.5 3 8 1 10l2 2c2-1.8 5.4-3.5 9-3.5s7 1.7 9 3.5l2-2c-2-2-6-4.5-11-4.5zm0 6c-3 0-5.5 1.3-7 2.5l2 2c1.2-0.9 2.9-1.9 5-1.9s3.8 1.1 5 1.9l2-2c-1.5-1.2-4-2.5-7-2.5z"/></svg>206      </div>207      <div class="icon" title="Battery">208        <svg viewBox="0 0 24 24"><path d="M17 6h-1V4h-8v2H7C5.9 6 5 6.9 5 8v8c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H7V8h10v8z"/></svg>209      </div>210    </div>211  </div>212 213  <!-- Search Bar -->214  <div class="search-wrap">215    <div class="maps-pin"></div>216    <div class="search-input">Search here</div>217    <div class="search-actions">218      <div class="mic">219        <svg viewBox="0 0 24 24"><path d="M12 14a3 3 0 0 0 3-3V5a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21H8v2h8v-2h-3v-3.08A7 7 0 0 0 19 11h-2z"/></svg>220      </div>221      <div class="avatar">C</div>222    </div>223  </div>224 225  <!-- Chips row -->226  <div class="chips">227    <div class="chip">228      <div class="mini"><svg viewBox="0 0 24 24"><path d="M3 10h18l-1 10H4L3 10zm6-6h6l1 4H8l1-4z"/></svg></div>229      Restaurants230    </div>231    <div class="chip">232      <div class="mini"><svg viewBox="0 0 24 24"><path d="M6 2h12v6H6zM4 10h16v10H4z"/></svg></div>233      Petrol234    </div>235    <div class="chip">236      <div class="mini"><svg viewBox="0 0 24 24"><path d="M7 10V6a5 5 0 0 1 10 0v4h2v10H5V10h2zm2 0h6V6a3 3 0 0 0-6 0v4z"/></svg></div>237      Hotels238    </div>239    <div class="chip">240      <div class="mini"><svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7v3H3v8h6v-6h6v6h6v-8h-2V9a7 7 0 0 0-7-7z"/></svg></div>241      Hospitals242    </div>243  </div>244 245  <!-- Floating layer button -->246  <div class="floating layers-btn" title="Layers">247    <svg viewBox="0 0 24 24"><path d="M12 3l9 5-9 5-9-5 9-5zm0 9l9 5-9 5-9-5 9-5z"/></svg>248  </div>249 250  <!-- Compass button -->251  <div class="floating compass-btn" style="right: 30px;">252    <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm3 3l-2.5 7.5L5 15l7.5-2.5L15 5z"/></svg>253  </div>254 255  <!-- Direction square button -->256  <div class="floating direction-btn" style="right: 26px;">257    <svg viewBox="0 0 24 24"><path d="M12 2l10 10-10 10L2 12 12 2z"/></svg>258  </div>259 260  <!-- Bottom sheet -->261  <div class="bottom-sheet">262    <div class="grabber"></div>263    <div class="bottom-title">Latest in the area</div>264  </div>265 266  <!-- Bottom navigation -->267  <div class="bottom-nav">268    <div class="nav-item active">269      <div class="ico">270        <svg viewBox="0 0 24 24"><path d="M3 11l9-8 9 8v9H3v-9zm9-5l7 6v6h-4v-4H8v4H4v-6l8-6z"/></svg>271      </div>272      Explore273    </div>274    <div class="nav-item">275      <div class="ico">276        <svg viewBox="0 0 24 24"><path d="M12 2l4 7-4 13-4-13 4-7zm7 10H5v2h14v-2z"/></svg>277      </div>278      Go279    </div>280    <div class="nav-item">281      <div class="ico">282        <svg viewBox="0 0 24 24"><path d="M17 3H7v18l5-3 5 3V3z"/></svg>283      </div>284      Saved285    </div>286    <div class="nav-item">287      <div class="ico">288        <svg viewBox="0 0 24 24"><path d="M12 7a5 5 0 0 0-5 5H4l4 4 4-4H9a3 3 0 1 1 3 3v2a5 5 0 0 0 0-10z"/></svg>289      </div>290      Contribute291    </div>292    <div class="nav-item">293      <div class="ico">294        <svg viewBox="0 0 24 24"><path d="M3 5h18v2H3V5zm0 6h18v2H3v-2zm0 6h12v2H3v-2z"/></svg>295      </div>296      Updates297    </div>298  </div>299 300</div>301</body>302</html>