GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">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: #f3f6f7;14  }15 16  /* Map placeholder filling the screen */17  .map {18    position: absolute;19    inset: 0;20    background: #E0E0E0;21    border: 1px solid #BDBDBD;22    display: flex;23    justify-content: center;24    align-items: flex-start;25    color: #757575;26    font-size: 28px;27    letter-spacing: 0.2px;28  }29  .map span {30    margin-top: 28px;31    background: rgba(255,255,255,0.7);32    padding: 8px 14px;33    border-radius: 14px;34    border: 1px solid #bdbdbd;35  }36 37  /* Status bar */38  .status {39    position: absolute;40    top: 0;41    left: 0;42    width: 1080px;43    height: 100px;44    display: flex;45    align-items: center;46    justify-content: space-between;47    padding: 0 28px;48    color: #2b2b2b;49    font-size: 34px;50    pointer-events: none;51  }52  .status .left, .status .right {53    display: flex;54    align-items: center;55    gap: 20px;56  }57  .status svg { width: 36px; height: 36px; }58 59  /* Search bar */60  .search-bar {61    position: absolute;62    top: 150px;63    left: 40px;64    width: 1000px;65    height: 120px;66    background: #ffffff;67    border-radius: 60px;68    box-shadow: 0 8px 20px rgba(0,0,0,0.15);69    display: flex;70    align-items: center;71    padding: 0 26px;72  }73  .search-bar .gm-icon {74    width: 70px; height: 70px; margin-right: 18px;75  }76  .search-bar .placeholder {77    flex: 1;78    color: #6b6b6b;79    font-size: 40px;80  }81  .search-bar .mic { width: 54px; height: 54px; margin-right: 20px; }82  .search-bar .avatar {83    width: 74px; height: 74px; border-radius: 50%;84    background: #6f69d8; color: #fff;85    display: flex; align-items: center; justify-content: center;86    font-weight: bold; font-size: 36px;87  }88 89  /* Category chips row */90  .chips {91    position: absolute;92    top: 300px;93    left: 40px;94    display: flex;95    gap: 18px;96  }97  .chip {98    background: #ffffff;99    border-radius: 40px;100    height: 86px;101    padding: 0 28px;102    box-shadow: 0 6px 16px rgba(0,0,0,0.12);103    display: flex; align-items: center; gap: 16px;104    color: #2e2e2e; font-size: 34px;105    border: 1px solid #e9e9e9;106  }107  .chip svg { width: 40px; height: 40px; }108 109  /* Floating controls */110  .floating {111    position: absolute;112    right: 30px;113  }114  .layers-btn {115    top: 720px;116    width: 110px; height: 110px; border-radius: 55px;117    background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,0.20);118    display: flex; align-items: center; justify-content: center;119    border: 1px solid #e5e5e5;120  }121  .gps-btn {122    top: 1510px;123    width: 130px; height: 130px; border-radius: 65px;124    background: #fff; box-shadow: 0 10px 24px rgba(0,0,0,0.22);125    display: flex; align-items: center; justify-content: center;126    border: 1px solid #e5e5e5;127  }128  .directions-btn {129    top: 1730px;130    width: 150px; height: 150px; border-radius: 36px;131    background: #2e7bf7; box-shadow: 0 14px 28px rgba(0,0,0,0.30);132    display: flex; align-items: center; justify-content: center;133  }134  .directions-btn svg { width: 74px; height: 74px; }135 136  /* POI image placeholders on the map */137  .poi {138    position: absolute;139    width: 96px; height: 96px;140    background: #E0E0E0; border: 1px solid #BDBDBD;141    border-radius: 50%;142    display: flex; align-items: center; justify-content: center;143    color: #757575; font-size: 22px; text-align: center;144  }145  .poi.orange { border: 6px solid #f6a322; }146 147  /* Map texts (simulated labels) */148  .label {149    position: absolute; color: #64748b; font-size: 36px; background: rgba(255,255,255,0.75);150    padding: 8px 12px; border-radius: 12px; border: 1px solid #e1e1e1;151  }152 153  /* Bottom sheet */154  .bottom-sheet {155    position: absolute;156    left: 0;157    bottom: 160px; /* keep nav visible */158    width: 1080px;159    height: 360px;160    background: #ffffff;161    border-top-left-radius: 28px;162    border-top-right-radius: 28px;163    box-shadow: 0 -10px 20px rgba(0,0,0,0.18);164  }165  .bottom-sheet .handle {166    width: 140px; height: 12px; border-radius: 6px; background: #d2d6da;167    margin: 16px auto 20px auto;168  }169  .bottom-sheet .title {170    font-size: 52px; color: #202124; margin: 0 36px;171  }172 173  /* Google watermark */174  .google-watermark {175    position: absolute; left: 40px; bottom: 540px;176    font-size: 42px; color: #3c78dc; font-weight: bold;177    background: rgba(255,255,255,0.8); padding: 6px 10px; border-radius: 8px; border: 1px solid #e0e0e0;178  }179 180  /* Bottom navigation bar */181  .nav-bar {182    position: absolute; left: 0; bottom: 0;183    width: 1080px; height: 160px;184    background: #eef1f4; border-top: 1px solid #dadfe5;185    display: flex; align-items: center; justify-content: space-around;186  }187  .nav-item {188    width: 200px; height: 120px;189    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;190    color: #3b4a5a; font-size: 28px;191  }192  .nav-item.active { color: #2e7bf7; font-weight: 600; }193  .nav-item svg { width: 48px; height: 48px; }194</style>195</head>196<body>197<div id="render-target">198 199  <div class="map"><span>[IMG: Google Map - Jama Masjid area]</span></div>200 201  <!-- Status bar -->202  <div class="status">203    <div class="left">204      <div>3:37</div>205      <svg viewBox="0 0 24 24"><path d="M3 12h18" stroke="#555" stroke-width="2" fill="none"/></svg>206      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke="#777" stroke-width="2" fill="none"/></svg>207    </div>208    <div class="right">209      <svg viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="10" rx="2" stroke="#333" stroke-width="2" fill="none"/></svg>210    </div>211  </div>212 213  <!-- Search bar -->214  <div class="search-bar">215    <!-- Google Maps pin icon -->216    <svg class="gm-icon" viewBox="0 0 24 24">217      <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7z" fill="#4285F4"/>218      <circle cx="12" cy="9" r="3.2" fill="#fff"/>219    </svg>220    <div class="placeholder">Search here</div>221    <!-- microphone -->222    <svg class="mic" viewBox="0 0 24 24">223      <rect x="9" y="4" width="6" height="9" rx="3" fill="#666"/>224      <path d="M6 11c0 3.5 3 5 6 5s6-1.5 6-5" stroke="#666" stroke-width="2" fill="none"/>225      <path d="M12 16v4" stroke="#666" stroke-width="2"/>226    </svg>227    <!-- avatar -->228    <div class="avatar">C</div>229  </div>230 231  <!-- Category chips -->232  <div class="chips">233    <div class="chip">234      <svg viewBox="0 0 24 24">235        <circle cx="12" cy="12" r="6" stroke="#555" stroke-width="2" fill="none"/>236        <path d="M12 6v-3M12 21v-3M6 12H3M21 12h-3" stroke="#555" stroke-width="2" />237      </svg>238      <span>Attractions</span>239    </div>240    <div class="chip">241      <svg viewBox="0 0 24 24">242        <path d="M8 4v12" stroke="#555" stroke-width="2"/>243        <path d="M14 4v12" stroke="#555" stroke-width="2"/>244        <rect x="5" y="17" width="14" height="2" fill="#555"/>245      </svg>246      <span>Restaurants</span>247    </div>248    <div class="chip">249      <svg viewBox="0 0 24 24">250        <rect x="3" y="10" width="18" height="7" rx="2" stroke="#555" stroke-width="2" fill="none"/>251        <rect x="5" y="7" width="6" height="3" fill="#555"/>252      </svg>253      <span>Hotels</span>254    </div>255  </div>256 257  <!-- Labels on map -->258  <div class="label" style="top: 780px; left: 120px;">Jama Masjid</div>259  <div class="label" style="top: 710px; left: 470px;">Kabutar Market</div>260  <div class="label" style="top: 830px; left: 520px;">Chor Bazar</div>261  <div class="label" style="top: 640px; left: 780px;">Delhi Gate</div>262  <div class="label" style="top: 1010px; left: 720px;">Moti Mahal</div>263 264  <!-- POI image markers -->265  <div class="poi orange" style="top: 940px; left: 260px;">[IMG]</div>266  <div class="poi orange" style="top: 1120px; left: 760px;">[IMG]</div>267  <div class="poi orange" style="top: 1280px; left: 320px;">[IMG]</div>268 269  <!-- Floating controls -->270  <div class="floating layers-btn" style="position:absolute;">271    <svg viewBox="0 0 24 24">272      <rect x="5" y="6" width="14" height="10" rx="2" fill="#777"/>273      <rect x="8" y="9" width="14" height="10" rx="2" fill="#bbb" transform="translate(-3,-3)"/>274    </svg>275  </div>276 277  <div class="floating gps-btn" style="position:absolute;">278    <svg viewBox="0 0 24 24">279      <circle cx="12" cy="12" r="9" stroke="#333" stroke-width="2" fill="none"/>280      <circle cx="12" cy="12" r="3" fill="#333"/>281      <path d="M12 3v3M12 18v3M3 12h3M18 12h3" stroke="#333" stroke-width="2"/>282    </svg>283  </div>284 285  <div class="floating directions-btn" style="position:absolute;">286    <svg viewBox="0 0 24 24">287      <path d="M5 12h9l-3-3M14 12l-3 3" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>288    </svg>289  </div>290 291  <!-- Google watermark -->292  <div class="google-watermark">Google</div>293 294  <!-- Bottom sheet -->295  <div class="bottom-sheet">296    <div class="handle"></div>297    <div class="title">Latest in Meena Bazaar</div>298  </div>299 300  <!-- Bottom navigation -->301  <div class="nav-bar">302    <div class="nav-item active">303      <svg viewBox="0 0 24 24"><path d="M12 2a8 8 0 0 0-8 8c0 6 8 12 8 12s8-6 8-12a8 8 0 0 0-8-8z" fill="#2e7bf7"/><circle cx="12" cy="10" r="3" fill="#fff"/></svg>304      <div>Explore</div>305    </div>306    <div class="nav-item">307      <svg viewBox="0 0 24 24"><rect x="3" y="8" width="18" height="10" rx="2" stroke="#3b4a5a" stroke-width="2" fill="none"/><rect x="6" y="11" width="6" height="4" fill="#3b4a5a"/></svg>308      <div>Go</div>309    </div>310    <div class="nav-item">311      <svg viewBox="0 0 24 24"><path d="M6 3h12v18l-6-4-6 4V3z" stroke="#3b4a5a" stroke-width="2" fill="none"/></svg>312      <div>Saved</div>313    </div>314    <div class="nav-item">315      <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" stroke="#3b4a5a" stroke-width="2"/></svg>316      <div>Contribute</div>317    </div>318    <div class="nav-item">319      <svg viewBox="0 0 24 24"><path d="M12 3l8 7v7H4v-7l8-7z" stroke="#3b4a5a" stroke-width="2" fill="none"/><circle cx="12" cy="17" r="1.8" fill="#3b4a5a"/></svg>320      <div>Updates</div>321    </div>322  </div>323 324</div>325</body>326</html>