GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Mobile Map UI Mock</title>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: #f4f6f8;14 }15 16 /* Map placeholder */17 .map {18 position: absolute;19 inset: 0;20 background: #E0E0E0;21 border: 1px solid #BDBDBD;22 color: #757575;23 display: flex;24 justify-content: center;25 align-items: center;26 font-size: 30px;27 letter-spacing: .5px;28 }29 30 /* Status bar */31 .status-bar {32 position: absolute;33 top: 0;34 left: 0;35 width: 100%;36 height: 96px;37 padding: 0 28px;38 box-sizing: border-box;39 display: flex;40 align-items: center;41 justify-content: space-between;42 color: #1b1b1b;43 font-weight: bold;44 font-size: 30px;45 background: transparent;46 }47 .status-icons {48 display: flex;49 gap: 26px;50 align-items: center;51 color: #444;52 font-size: 24px;53 }54 .dot { width: 10px; height: 10px; background: #2e7d32; border-radius: 50%; display: inline-block; }55 56 /* Search bar */57 .search-bar {58 position: absolute;59 top: 160px;60 left: 40px;61 width: 1000px;62 max-width: calc(100% - 80px);63 height: 120px;64 background: #fff;65 border-radius: 64px;66 box-shadow: 0 10px 24px rgba(0,0,0,0.15);67 display: flex;68 align-items: center;69 padding: 0 24px;70 box-sizing: border-box;71 gap: 18px;72 }73 .gm-pin {74 width: 68px;75 height: 68px;76 border-radius: 20px;77 background: linear-gradient(135deg,#1a73e8 0 50%, #34a853 50% 100%);78 display: grid;79 place-items: center;80 color: #fff;81 font-weight: 800;82 font-size: 30px;83 }84 .search-text {85 flex: 1;86 color: #5f6368;87 font-size: 40px;88 }89 .icon-btn {90 width: 76px; height: 76px; border-radius: 50%;91 background: #f1f3f4;92 display: grid; place-items: center;93 }94 .avatar {95 width: 76px; height: 76px; border-radius: 50%;96 background: #4285F4; color: #fff;97 display: grid; place-items: center;98 font-weight: 700; font-size: 34px;99 }100 101 /* Category chips */102 .chips {103 position: absolute;104 top: 312px;105 left: 40px;106 display: flex;107 gap: 18px;108 }109 .chip {110 background: #fff;111 border: 1px solid #e0e0e0;112 border-radius: 40px;113 padding: 22px 30px;114 font-size: 34px;115 color: #202124;116 display: flex; align-items: center; gap: 16px;117 box-shadow: 0 2px 10px rgba(0,0,0,0.06);118 }119 .chip .mini {120 width: 44px; height: 44px; border-radius: 50%;121 background: #f1f3f4; display: grid; place-items: center; color:#5f6368; font-size: 26px;122 }123 124 /* Right floating round buttons */125 .round {126 position: absolute;127 right: 28px;128 width: 108px; height: 108px; border-radius: 50%;129 background: #fff; box-shadow: 0 8px 18px rgba(0,0,0,0.18);130 display: grid; place-items: center;131 }132 .layers { top: 420px; }133 .alert { bottom: 730px; background: #f85e5e; color: #fff; }134 .alert span { font-size: 56px; font-weight: 800; }135 136 /* Blue directions button */137 .fab {138 position: absolute;139 right: 32px;140 bottom: 420px;141 width: 156px;142 height: 156px;143 border-radius: 50%;144 background: #1a73e8;145 box-shadow: 0 14px 28px rgba(26,115,232,0.5);146 display: grid; place-items: center;147 }148 149 /* Bottom sheet */150 .sheet {151 position: absolute;152 left: 0;153 right: 0;154 bottom: 220px; /* leaves room for bottom nav */155 height: 380px;156 background: #fff;157 border-top-left-radius: 28px;158 border-top-right-radius: 28px;159 box-shadow: 0 -8px 20px rgba(0,0,0,0.15);160 padding: 34px 40px;161 box-sizing: border-box;162 }163 .sheet h2 {164 margin: 0;165 font-size: 64px;166 font-weight: 700;167 color: #1f1f1f;168 }169 170 /* Bottom navigation */171 .bottom-nav {172 position: absolute;173 left: 0; right: 0; bottom: 0;174 height: 220px;175 background: #fff;176 border-top: 1px solid #e0e0e0;177 display: flex;178 justify-content: space-around;179 align-items: center;180 padding-top: 8px;181 box-sizing: border-box;182 }183 .nav-item {184 width: 20%;185 text-align: center;186 color: #6b6f72;187 font-size: 28px;188 }189 .nav-item .ico {190 width: 72px; height: 72px; margin: 0 auto 10px; border-radius: 18px;191 display: grid; place-items: center; color:#6b6f72;192 }193 .nav-item.active { color: #1a73e8; }194 .nav-item.active .ico { color: #1a73e8; }195 196 /* Small Google watermark */197 .watermark {198 position: absolute;199 left: 32px;200 bottom: 650px;201 color: #606367;202 font-size: 36px;203 display: flex; align-items: center; gap: 14px;204 }205 .watermark .g-dot {206 width: 26px; height: 26px; border-radius: 50%; background:#34a853;207 }208</style>209</head>210<body>211<div id="render-target">212 213 <!-- Map area -->214 <div class="map">[IMG: Google Map]</div>215 216 <!-- Status bar -->217 <div class="status-bar">218 <div>10:52</div>219 <div class="status-icons">220 <span>📶</span>221 <span>📡</span>222 <span>🔋</span>223 <span class="dot"></span>224 </div>225 </div>226 227 <!-- Search bar -->228 <div class="search-bar">229 <div class="gm-pin">▴</div>230 <div class="search-text">Search here</div>231 <div class="icon-btn" aria-label="Voice search">232 <svg width="34" height="34" viewBox="0 0 24 24" fill="#5f6368"><path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v5a3 3 0 0 0 3 3zm-1 2.93A7.002 7.002 0 0 1 5 10h2a5 5 0 0 0 10 0h2a7.002 7.002 0 0 1-6 6.93V20h3v2H8v-2h3v-3.07z"/></svg>233 </div>234 <div class="avatar">K</div>235 </div>236 237 <!-- Category chips -->238 <div class="chips">239 <div class="chip">240 <div class="mini">🍽️</div>241 <span>Restaurants</span>242 </div>243 <div class="chip">244 <div class="mini">🛍️</div>245 <span>Shopping</span>246 </div>247 <div class="chip">248 <div class="mini">🏠</div>249 <span>Home & garden</span>250 </div>251 </div>252 253 <!-- Right floating buttons -->254 <div class="round layers" title="Layers">255 <svg width="48" height="48" viewBox="0 0 24 24" fill="#4a4a4a">256 <path d="M12 2 2 7l10 5 10-5-10-5zm0 8L4 7l8-4 8 4-8 3zm-8 5 8 4 8-4-2-1-6 3-6-3-2 1z"/>257 </svg>258 </div>259 260 <div class="round alert" title="Report">261 <span>?</span>262 </div>263 264 <!-- Large blue FAB -->265 <div class="fab" title="Directions">266 <svg width="84" height="84" viewBox="0 0 24 24" fill="#fff">267 <path d="M21 11l-8-8-1.4 1.4L18.2 11H3v2h15.2l-6.6 6.6L13 21l8-8z"/>268 </svg>269 </div>270 271 <!-- Google watermark -->272 <div class="watermark">273 <div class="g-dot"></div>274 <span>Google</span>275 </div>276 277 <!-- Bottom sheet -->278 <div class="sheet">279 <h2>Latest in Baker</h2>280 </div>281 282 <!-- Bottom navigation -->283 <div class="bottom-nav">284 <div class="nav-item active">285 <div class="ico">286 <svg width="44" height="44" viewBox="0 0 24 24" fill="currentColor">287 <path d="M12 2 4 9v11h6v-7h4v7h6V9l-8-7z"/>288 </svg>289 </div>290 <div>Explore</div>291 </div>292 <div class="nav-item">293 <div class="ico">294 <svg width="44" height="44" viewBox="0 0 24 24" fill="currentColor">295 <path d="M4 16v-5l8-4 8 4v5l-8 4-8-4zm8-6-5 2.5V15l5 2.5L17 15v-2.5L12 10z"/>296 </svg>297 </div>298 <div>Go</div>299 </div>300 <div class="nav-item">301 <div class="ico">302 <svg width="44" height="44" viewBox="0 0 24 24" fill="currentColor">303 <path d="M6 2h12v20l-6-3-6 3V2z"/>304 </svg>305 </div>306 <div>Saved</div>307 </div>308 <div class="nav-item">309 <div class="ico">310 <svg width="44" height="44" viewBox="0 0 24 24" fill="currentColor">311 <path d="M12 2a5 5 0 0 0-5 5v3H4v4h3v6h4v-6h3l1-4h-4V7a1 1 0 0 1 1-1h3V2h-6z"/>312 </svg>313 </div>314 <div>Contribute</div>315 </div>316 <div class="nav-item">317 <div class="ico">318 <svg width="44" height="44" viewBox="0 0 24 24" fill="currentColor">319 <path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zm6-6V9a6 6 0 1 0-12 0v7L4 17v2h16v-2l-2-1z"/>320 </svg>321 </div>322 <div>Updates</div>323 </div>324 </div>325 326</div>327</body>328</html>