GD-ML/AndroidCode
13.4k
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; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #fafafa;15 font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;16 color: #222;17 }18 /* Map placeholder filling the screen */19 .map {20 position: absolute;21 inset: 0;22 background: #E0E0E0;23 border: 1px solid #BDBDBD;24 display: flex;25 align-items: center;26 justify-content: center;27 color: #757575;28 font-weight: 500;29 font-size: 34px;30 letter-spacing: .2px;31 }32 33 /* Status bar */34 .status-bar {35 position: absolute;36 left: 28px;37 right: 28px;38 top: 16px;39 height: 56px;40 display: flex;41 align-items: center;42 justify-content: space-between;43 color: #212121;44 font-size: 30px;45 pointer-events: none;46 }47 .status-right {48 display: flex;49 align-items: center;50 gap: 18px;51 }52 /* Simple status icons */53 .icon-wifi, .icon-battery, .icon-signal {54 width: 40px; height: 26px;55 }56 57 /* Search bar */58 .search-bar {59 position: absolute;60 left: 40px;61 right: 40px;62 top: 110px;63 height: 120px;64 background: #fff;65 border-radius: 60px;66 box-shadow: 0 8px 24px rgba(0,0,0,0.15);67 display: flex;68 align-items: center;69 padding: 0 30px;70 gap: 24px;71 }72 .search-text {73 flex: 1;74 font-size: 40px;75 color: #2b2b2b;76 white-space: nowrap;77 overflow: hidden;78 text-overflow: ellipsis;79 }80 .icon-btn {81 width: 72px;82 height: 72px;83 border-radius: 36px;84 display: grid;85 place-items: center;86 color: #555;87 }88 89 /* Bottom sheet */90 .bottom-sheet {91 position: absolute;92 left: 0;93 right: 0;94 bottom: 0;95 height: 620px;96 background: #ffffff;97 border-top-left-radius: 34px;98 border-top-right-radius: 34px;99 box-shadow: 0 -6px 20px rgba(0,0,0,0.18);100 }101 .sheet-handle {102 width: 160px;103 height: 14px;104 background: #DADADA;105 border-radius: 7px;106 margin: 20px auto 10px auto;107 }108 .sheet-content {109 padding: 26px 40px;110 }111 .place-title {112 font-size: 52px;113 font-weight: 600;114 margin-bottom: 12px;115 }116 .place-sub {117 font-size: 34px;118 color: #6b6b6b;119 }120 121 /* Snackbar */122 .snackbar {123 position: absolute;124 left: 40px;125 right: 40px;126 bottom: 420px;127 height: 140px;128 background: #222;129 color: #fff;130 border-radius: 24px;131 box-shadow: 0 8px 24px rgba(0,0,0,0.35);132 display: flex;133 align-items: center;134 justify-content: space-between;135 padding: 0 36px;136 font-size: 38px;137 }138 .snackbar .action {139 color: #2a78ff;140 font-weight: 600;141 }142 143 /* Gesture bar */144 .gesture-bar {145 position: absolute;146 left: 0; right: 0;147 bottom: 26px;148 display: flex;149 justify-content: center;150 }151 .gesture-pill {152 width: 360px; height: 16px;153 background: #CFCFCF;154 border-radius: 8px;155 }156 157 /* A few floating map badges/icons to suggest density */158 .bus-icon {159 position: absolute;160 width: 44px;161 height: 44px;162 background: #1E88E5;163 border-radius: 10px;164 display: grid;165 place-items: center;166 box-shadow: 0 2px 4px rgba(0,0,0,0.2);167 }168 .pin {169 position: absolute;170 width: 48px; height: 64px;171 }172 .map-label {173 position: absolute;174 display: flex;175 align-items: center;176 gap: 12px;177 background: rgba(255,193,7,0.9);178 color: #6b3d00;179 padding: 16px 22px;180 border-radius: 28px;181 font-size: 34px;182 box-shadow: 0 6px 18px rgba(0,0,0,0.2);183 }184 185 /* Image placeholder samples on map */186 .img-badge {187 position: absolute;188 width: 200px; height: 120px;189 background: #E0E0E0;190 border: 1px solid #BDBDBD;191 display: flex;192 align-items: center;193 justify-content: center;194 color: #757575;195 border-radius: 12px;196 }197 .round-photo {198 position: absolute;199 width: 120px; height: 120px;200 background: #E0E0E0;201 border: 1px solid #BDBDBD;202 color: #757575;203 display: flex; align-items: center; justify-content: center;204 border-radius: 60px;205 font-size: 22px;206 }207</style>208</head>209<body>210<div id="render-target">211 212 <div class="map">[IMG: City Map with transport icons]</div>213 214 <!-- Status bar -->215 <div class="status-bar">216 <div>11:27</div>217 <div class="status-right">218 <!-- Cellular -->219 <svg class="icon-signal" viewBox="0 0 24 16">220 <rect x="0" y="10" width="4" height="6" fill="#333"></rect>221 <rect x="6" y="7" width="4" height="9" fill="#333"></rect>222 <rect x="12" y="4" width="4" height="12" fill="#333"></rect>223 <rect x="18" y="1" width="4" height="15" fill="#333"></rect>224 </svg>225 <!-- Wi-Fi -->226 <svg class="icon-wifi" viewBox="0 0 30 20">227 <path d="M1 6 C8 -1,22 -1,29 6" stroke="#333" stroke-width="2.5" fill="none"></path>228 <path d="M5 10 C12 4,18 4,25 10" stroke="#333" stroke-width="2.5" fill="none"></path>229 <path d="M10 14 C14 11,16 11,20 14" stroke="#333" stroke-width="2.5" fill="none"></path>230 <circle cx="15" cy="17" r="2.5" fill="#333"></circle>231 </svg>232 <!-- Battery -->233 <svg class="icon-battery" viewBox="0 0 34 18">234 <rect x="1" y="2" width="28" height="14" rx="3" ry="3" fill="none" stroke="#333" stroke-width="2"></rect>235 <rect x="3" y="4" width="20" height="10" rx="2" fill="#333"></rect>236 <rect x="30" y="6" width="3" height="6" rx="1" fill="#333"></rect>237 </svg>238 </div>239 </div>240 241 <!-- Search bar -->242 <div class="search-bar">243 <div class="icon-btn">244 <svg width="44" height="44" viewBox="0 0 24 24">245 <path d="M15 5 L7 12 L15 19" stroke="#333" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>246 </svg>247 </div>248 <div class="search-text">Bas des Pentes Presqu'île, 69...</div>249 <div class="icon-btn">250 <svg width="44" height="44" viewBox="0 0 24 24">251 <path d="M6 6 L18 18 M18 6 L6 18" stroke="#666" stroke-width="2.5" stroke-linecap="round"></path>252 </svg>253 </div>254 <div class="icon-btn">255 <svg width="44" height="44" viewBox="0 0 24 24">256 <path d="M12 4 C9 4,8 6,8 9 v3 c0 2 1 3 4 3 s4-1 4-3 V9 c0-3-1-5-4-5Z" fill="none" stroke="#666" stroke-width="2"></path>257 <rect x="11" y="16" width="2" height="4" fill="#666"></rect>258 <circle cx="12" cy="21" r="1.5" fill="#666"></circle>259 </svg>260 </div>261 </div>262 263 <!-- A few bus icons scattered -->264 <div class="bus-icon" style="top: 520px; left: 220px;">265 <svg width="28" height="28" viewBox="0 0 24 24">266 <rect x="4" y="5" width="16" height="11" rx="2" fill="#fff"></rect>267 <circle cx="8" cy="18" r="2" fill="#fff"></circle>268 <circle cx="16" cy="18" r="2" fill="#fff"></circle>269 </svg>270 </div>271 <div class="bus-icon" style="top: 700px; left: 480px;">272 <svg width="28" height="28" viewBox="0 0 24 24">273 <rect x="4" y="5" width="16" height="11" rx="2" fill="#fff"></rect>274 <circle cx="8" cy="18" r="2" fill="#fff"></circle>275 <circle cx="16" cy="18" r="2" fill="#fff"></circle>276 </svg>277 </div>278 <div class="bus-icon" style="top: 900px; left: 820px;">279 <svg width="28" height="28" viewBox="0 0 24 24">280 <rect x="4" y="5" width="16" height="11" rx="2" fill="#fff"></rect>281 <circle cx="8" cy="18" r="2" fill="#fff"></circle>282 <circle cx="16" cy="18" r="2" fill="#fff"></circle>283 </svg>284 </div>285 <div class="bus-icon" style="top: 980px; left: 320px;">286 <svg width="28" height="28" viewBox="0 0 24 24">287 <rect x="4" y="5" width="16" height="11" rx="2" fill="#fff"></rect>288 <circle cx="8" cy="18" r="2" fill="#fff"></circle>289 <circle cx="16" cy="18" r="2" fill="#fff"></circle>290 </svg>291 </div>292 <div class="bus-icon" style="top: 1160px; left: 640px;">293 <svg width="28" height="28" viewBox="0 0 24 24">294 <rect x="4" y="5" width="16" height="11" rx="2" fill="#fff"></rect>295 <circle cx="8" cy="18" r="2" fill="#fff"></circle>296 <circle cx="16" cy="18" r="2" fill="#fff"></circle>297 </svg>298 </div>299 <div class="bus-icon" style="top: 1320px; left: 220px;">300 <svg width="28" height="28" viewBox="0 0 24 24">301 <rect x="4" y="5" width="16" height="11" rx="2" fill="#fff"></rect>302 <circle cx="8" cy="18" r="2" fill="#fff"></circle>303 <circle cx="16" cy="18" r="2" fill="#fff"></circle>304 </svg>305 </div>306 <div class="bus-icon" style="top: 1460px; left: 880px;">307 <svg width="28" height="28" viewBox="0 0 24 24">308 <rect x="4" y="5" width="16" height="11" rx="2" fill="#fff"></rect>309 <circle cx="8" cy="18" r="2" fill="#fff"></circle>310 <circle cx="16" cy="18" r="2" fill="#fff"></circle>311 </svg>312 </div>313 314 <!-- Busy area label -->315 <div class="map-label" style="top: 760px; left: 760px;">316 <svg width="38" height="38" viewBox="0 0 24 24">317 <circle cx="12" cy="12" r="10" fill="#fff"></circle>318 <path d="M12 6 v6 l3 3" stroke="#f5a623" stroke-width="2.5" fill="none" stroke-linecap="round"></path>319 </svg>320 <div>Busy area</div>321 </div>322 323 <!-- Image placeholders on map -->324 <div class="img-badge" style="bottom: 740px; left: 180px;">[IMG: Street view]</div>325 <div class="round-photo" style="bottom: 640px; left: 760px;">[IMG]</div>326 327 <!-- Bottom sheet content -->328 <div class="bottom-sheet">329 <div class="sheet-handle"></div>330 <div class="sheet-content">331 <div class="place-title">Bas des Pentes Presqu'île</div>332 <div class="place-sub">69001 Lyon, France</div>333 </div>334 </div>335 336 <!-- Snackbar -->337 <div class="snackbar">338 <div>Saved in Favourites</div>339 <div class="action">See list</div>340 </div>341 342 <!-- Gesture bar -->343 <div class="gesture-bar"><div class="gesture-pill"></div></div>344 345</div>346</body>347</html>