GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Map UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Map placeholder */18  .map-placeholder {19    position: absolute;20    left: 0; top: 0;21    width: 1080px; height: 2400px;22    background: #E0E0E0;23    border: 1px solid #BDBDBD;24    display: flex; align-items: center; justify-content: center;25    color: #757575; font-size: 32px; letter-spacing: 0.3px;26  }27 28  /* Top search bar */29  .search-bar {30    position: absolute;31    left: 48px; top: 140px;32    width: 984px; height: 120px;33    background: #fff;34    border-radius: 60px;35    box-shadow: 0 6px 18px rgba(0,0,0,0.18);36    display: flex; align-items: center;37    padding: 0 28px;38  }39  .search-text {40    flex: 1;41    font-size: 44px;42    color: #8a8a8a;43    padding: 0 24px;44  }45  .avatar {46    width: 88px; height: 88px;47    background: #0FA7A6;48    border-radius: 999px;49    color: #fff; font-weight: 600; font-size: 40px;50    display: flex; align-items: center; justify-content: center;51    margin-left: 18px;52  }53  .icon {54    width: 56px; height: 56px;55    display: flex; align-items: center; justify-content: center;56  }57 58  /* Quick chips row */59  .quick-chips {60    position: absolute;61    left: 48px; top: 290px;62    display: flex; gap: 24px;63  }64  .chip {65    height: 96px;66    background: #fff;67    border-radius: 48px;68    box-shadow: 0 6px 16px rgba(0,0,0,0.15);69    display: flex; align-items: center;70    padding: 0 34px;71    font-size: 36px; color: #333;72  }73  .chip .chip-icon { width: 48px; height: 48px; margin-right: 18px; display: inline-flex; align-items: center; justify-content: center; }74 75  /* Floating controls on right */76  .fab {77    position: absolute;78    right: 60px;79    width: 120px; height: 120px;80    border-radius: 60px;81    display: flex; align-items: center; justify-content: center;82    box-shadow: 0 12px 20px rgba(0,0,0,0.18);83    background: #fff;84  }85  .fab.layers { top: 740px; }86  .fab.locate { top: 1600px; }87  .fab.directions {88    top: 1760px;89    background: #1E6DE8;90    border-radius: 28px;91  }92 93  /* Google watermark text */94  .google-mark {95    position: absolute; left: 40px; bottom: 260px;96    font-size: 38px; color: #5f5f5f;97  }98 99  /* Bottom navigation */100  .bottom-nav {101    position: absolute; left: 0; bottom: 0;102    width: 1080px; height: 220px;103    background: #F3F3F5;104    border-top: 1px solid #D7D7D9;105    display: flex; align-items: center; justify-content: space-between;106    padding: 0 22px;107  }108  .nav-item {109    width: 20%;110    display: flex; align-items: center; justify-content: center;111    flex-direction: column;112    color: #8a8a8a;113  }114  .nav-item .nav-icon {115    width: 88px; height: 88px; border-radius: 24px;116    display: flex; align-items: center; justify-content: center;117    margin-bottom: 16px;118  }119  .nav-item.active { color: #1E6DE8; }120  .nav-item.active .nav-icon { background: rgba(30,109,232,0.12); }121  .nav-label { font-size: 30px; }122 123  /* Small badge for updates */124  .badge {125    position: absolute; top: 38px; right: 110px;126    width: 18px; height: 18px; background: #E53935; border-radius: 999px;127  }128</style>129</head>130<body>131<div id="render-target">132 133  <!-- Map image placeholder -->134  <div class="map-placeholder">[IMG: Google Map]</div>135 136  <!-- Search bar -->137  <div class="search-bar">138    <!-- Google Maps pin icon -->139    <div class="icon" aria-label="Google Maps">140      <svg width="56" height="56" viewBox="0 0 56 56">141        <path d="M28 6c9 0 16 7 16 16 0 12-16 28-16 28S12 34 12 22c0-9 7-16 16-16z" fill="#34A853"/>142        <circle cx="28" cy="22" r="8" fill="#fff"/>143        <circle cx="28" cy="22" r="5.5" fill="#4285F4"/>144      </svg>145    </div>146    <div class="search-text">Search here</div>147    <!-- Microphone icon -->148    <div class="icon" aria-label="Voice search">149      <svg width="46" height="46" viewBox="0 0 24 24">150        <path d="M12 3a3 3 0 0 1 3 3v5a3 3 0 1 1-6 0V6a3 3 0 0 1 3-3z" fill="#616161"/>151        <path d="M7 11a5 5 0 0 0 10 0" stroke="#616161" stroke-width="2" fill="none"/>152        <path d="M12 16v4" stroke="#616161" stroke-width="2"/>153        <circle cx="12" cy="21" r="1.5" fill="#616161"/>154      </svg>155    </div>156    <!-- Profile avatar -->157    <div class="avatar">C</div>158  </div>159 160  <!-- Category chips -->161  <div class="quick-chips">162    <div class="chip">163      <div class="chip-icon">164        <svg width="44" height="44" viewBox="0 0 24 24">165          <path d="M7 4v8" stroke="#666" stroke-width="2" />166          <path d="M9 4v8" stroke="#666" stroke-width="2" />167          <path d="M15 4c0 4-2 4-2 8v4" stroke="#666" stroke-width="2" />168          <circle cx="16.5" cy="15.5" r="2.5" fill="#666"/>169        </svg>170      </div>171      <span>Restaurants</span>172    </div>173    <div class="chip">174      <div class="chip-icon">175        <svg width="44" height="44" viewBox="0 0 24 24">176          <rect x="5" y="5" width="10" height="12" rx="2" ry="2" fill="#666"/>177          <rect x="15" y="8" width="4" height="6" fill="#666"/>178          <circle cx="9" cy="19" r="1.5" fill="#666"/>179        </svg>180      </div>181      <span>Petrol</span>182    </div>183    <div class="chip">184      <div class="chip-icon">185        <svg width="44" height="44" viewBox="0 0 24 24">186          <path d="M12 3l4 7h-8l4-7zm-5 10h10l3 7H4l3-7z" fill="#666"/>187        </svg>188      </div>189      <span>Parks</span>190    </div>191    <div class="chip">192      <div class="chip-icon">193        <svg width="44" height="44" viewBox="0 0 24 24">194          <rect x="4" y="10" width="16" height="6" rx="2" fill="#666"/>195          <rect x="6" y="8" width="6" height="2" fill="#666"/>196        </svg>197      </div>198      <span>Hotels</span>199    </div>200  </div>201 202  <!-- Floating buttons -->203  <div class="fab layers" aria-label="Map layers">204    <svg width="48" height="48" viewBox="0 0 24 24">205      <rect x="6" y="6" width="8" height="8" fill="#616161"/>206      <rect x="10" y="10" width="8" height="8" fill="#616161" opacity="0.75"/>207    </svg>208  </div>209  <div class="fab locate" aria-label="Locate">210    <svg width="56" height="56" viewBox="0 0 24 24">211      <circle cx="12" cy="12" r="7" stroke="#616161" stroke-width="2" fill="none"/>212      <path d="M12 4v3M12 17v3M4 12h3M17 12h3" stroke="#616161" stroke-width="2"/>213      <circle cx="12" cy="12" r="2" fill="#616161"/>214    </svg>215  </div>216  <div class="fab directions" aria-label="Directions">217    <svg width="56" height="56" viewBox="0 0 24 24">218      <path d="M12 2l8 8-8 8-8-8 8-8z" fill="#fff"/>219      <path d="M12 7v6h6" stroke="#1E6DE8" stroke-width="2" />220    </svg>221  </div>222 223  <!-- Google watermark -->224  <div class="google-mark">Google</div>225 226  <!-- Bottom navigation -->227  <div class="bottom-nav">228    <div class="nav-item active">229      <div class="nav-icon">230        <svg width="48" height="48" viewBox="0 0 24 24">231          <path d="M12 3c3.9 0 7 3.1 7 7 0 5.2-7 11-7 11s-7-5.8-7-11c0-3.9 3.1-7 7-7z" fill="#1E6DE8"/>232          <circle cx="12" cy="10" r="3" fill="#fff"/>233        </svg>234      </div>235      <div class="nav-label">Explore</div>236    </div>237    <div class="nav-item">238      <div class="nav-icon">239        <svg width="48" height="48" viewBox="0 0 24 24">240          <rect x="5" y="6" width="14" height="10" rx="2" fill="#666"/>241          <circle cx="8" cy="18" r="2" fill="#666"/>242          <circle cx="16" cy="18" r="2" fill="#666"/>243        </svg>244      </div>245      <div class="nav-label">Go</div>246    </div>247    <div class="nav-item">248      <div class="nav-icon">249        <svg width="48" height="48" viewBox="0 0 24 24">250          <path d="M7 4h10v16l-5-3-5 3V4z" fill="#666"/>251        </svg>252      </div>253      <div class="nav-label">Saved</div>254    </div>255    <div class="nav-item">256      <div class="nav-icon">257        <svg width="48" height="48" viewBox="0 0 24 24">258          <circle cx="12" cy="12" r="10" fill="#666" opacity="0.16"/>259          <path d="M12 6v12M6 12h12" stroke="#666" stroke-width="2"/>260        </svg>261      </div>262      <div class="nav-label">Contribute</div>263    </div>264    <div class="nav-item">265      <div class="nav-icon" style="position: relative;">266        <svg width="48" height="48" viewBox="0 0 24 24">267          <path d="M12 3c3 0 5 2 5 4v4l2 2v2H5v-2l2-2V7c0-2 2-4 5-4z" fill="#666"/>268          <rect x="9" y="19" width="6" height="2" fill="#666"/>269        </svg>270      </div>271      <div class="nav-label">Updates</div>272    </div>273    <div class="badge"></div>274  </div>275 276</div>277</body>278</html>