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>Lotus Temple Map UI</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: #0f1621; /* dark maps-like background */14 color: #fff;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 90px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 padding: 0 36px;28 color: #cfd8dc;29 font-size: 32px;30 }31 .status-icons {32 display: flex;33 align-items: center;34 gap: 22px;35 font-size: 28px;36 }37 .dot { width: 8px; height: 8px; background:#7f8a96; border-radius:50%; display:inline-block; }38 39 /* Search bar */40 .top-search {41 position: absolute;42 top: 96px;43 left: 30px;44 width: 1020px;45 height: 120px;46 background: #252c36;47 border-radius: 60px;48 display: flex;49 align-items: center;50 padding: 0 28px;51 box-shadow: 0 6px 16px rgba(0,0,0,0.4);52 }53 .top-search .left {54 display: flex;55 align-items: center;56 gap: 24px;57 flex: 1;58 }59 .search-text {60 font-size: 42px;61 color: #e6e9ed;62 }63 .top-search .right {64 display: flex;65 align-items: center;66 gap: 24px;67 }68 .icon-btn {69 width: 72px;70 height: 72px;71 border-radius: 50%;72 background: #2e3541;73 display: flex;74 align-items: center;75 justify-content: center;76 }77 .icon svg { width: 40px; height: 40px; fill: #cfd8dc; }78 79 /* Map area */80 .map-area {81 position: absolute;82 top: 240px;83 left: 0;84 width: 1080px;85 height: 1200px;86 background: #141a23;87 }88 .map-label {89 position: absolute;90 bottom: 16px;91 left: 16px;92 color: #8fa1b3;93 font-size: 26px;94 }95 .map-img {96 position: absolute;97 bottom: 300px;98 left: 36px;99 width: 330px;100 height: 220px;101 background: #E0E0E0;102 border: 1px solid #BDBDBD;103 display: flex;104 align-items: center;105 justify-content: center;106 color: #757575;107 border-radius: 8px;108 }109 110 /* Purple route lines (decorative) */111 .route {112 position: absolute;113 height: 6px;114 background: #c253ff;115 border-radius: 6px;116 opacity: 0.8;117 }118 .route.route1 { width: 720px; top: 900px; left: 240px; transform: rotate(-10deg); }119 .route.route2 { width: 740px; top: 960px; left: 260px; transform: rotate(40deg); background:#8a2be2; }120 121 /* Nearby attractions pill */122 .nearby-pill {123 position: absolute;124 top: 360px;125 left: 300px;126 height: 78px;127 width: 520px;128 background: #2a303a;129 color: #e4e7eb;130 border-radius: 40px;131 display: flex;132 align-items: center;133 justify-content: center;134 font-size: 34px;135 box-shadow: 0 2px 8px rgba(0,0,0,0.35);136 border: 1px solid #3a414d;137 }138 139 /* Location pin on map */140 .pin {141 position: absolute;142 top: 640px;143 left: 480px;144 width: 60px;145 height: 90px;146 }147 148 /* Bottom sheet */149 .bottom-sheet {150 position: absolute;151 bottom: 0;152 left: 0;153 width: 1080px;154 height: 1020px;155 background: #0d121a;156 border-top-left-radius: 28px;157 border-top-right-radius: 28px;158 box-shadow: 0 -10px 30px rgba(0,0,0,0.5);159 }160 .handle {161 position: absolute;162 top: 16px;163 left: 50%;164 transform: translateX(-50%);165 width: 120px;166 height: 10px;167 background: #3b4452;168 border-radius: 8px;169 }170 .sheet-content {171 position: absolute;172 top: 48px;173 left: 28px;174 right: 28px;175 bottom: 28px;176 color: #fff;177 }178 .title-row {179 display: flex;180 align-items: center;181 justify-content: space-between;182 }183 .place-title {184 font-size: 60px;185 font-weight: 700;186 letter-spacing: 0.3px;187 }188 .avatar {189 width: 110px;190 height: 110px;191 background: #E0E0E0;192 border: 1px solid #BDBDBD;193 border-radius: 50%;194 display: flex;195 align-items: center;196 justify-content: center;197 color: #757575;198 font-size: 22px;199 }200 .subtext { color: #c9d2da; font-size: 34px; margin-top: 8px; }201 .rating-row {202 display: flex;203 align-items: center;204 gap: 16px;205 margin-top: 22px;206 color: #c9d2da;207 font-size: 32px;208 }209 .stars { display: flex; gap: 6px; }210 .stars svg { width: 30px; height: 30px; fill: #ffc107; }211 .open-row {212 margin-top: 18px;213 font-size: 34px;214 }215 .open-row .open { color: #36d16b; }216 .action-row {217 margin-top: 28px;218 display: flex;219 gap: 22px;220 }221 .action-btn {222 flex: none;223 height: 110px;224 padding: 0 38px;225 border-radius: 56px;226 background: #1b2230;227 border: 1px solid #2f3a49;228 display: flex;229 align-items: center;230 gap: 18px;231 font-size: 40px;232 color: #e6e9ed;233 }234 .action-btn .icon svg { width: 36px; height: 36px; fill: #cfd8dc; }235 236 /* Photo grid */237 .photos {238 margin-top: 36px;239 display: grid;240 grid-template-columns: 1.4fr 1fr;241 grid-gap: 20px;242 }243 .photo-big {244 width: 100%;245 height: 540px;246 background: #E0E0E0;247 border: 1px solid #BDBDBD;248 display: flex;249 align-items: center;250 justify-content: center;251 color: #757575;252 font-size: 34px;253 border-radius: 12px;254 }255 .photo-col {256 display: grid;257 grid-template-rows: 1fr 1fr;258 grid-gap: 20px;259 }260 .photo-sm {261 background: #E0E0E0;262 border: 1px solid #BDBDBD;263 display: flex;264 align-items: center;265 justify-content: center;266 color: #757575;267 font-size: 30px;268 border-radius: 12px;269 }270</style>271</head>272<body>273<div id="render-target">274 275 <!-- Status Bar -->276 <div class="status-bar">277 <div>1:51</div>278 <div class="status-icons">279 <span>📷</span>280 <span class="dot"></span>281 <span>📍</span>282 <span>🔔</span>283 <span>📶</span>284 <span>🔋</span>285 </div>286 </div>287 288 <!-- Search Bar -->289 <div class="top-search">290 <div class="left">291 <div class="icon">292 <svg viewBox="0 0 24 24">293 <path d="M15.5 4l-8 8 8 8 2-2-6-6 6-6-2-2z"/>294 </svg>295 </div>296 <div class="search-text">Lotus Temple</div>297 </div>298 <div class="right">299 <div class="icon-btn">300 <svg viewBox="0 0 24 24">301 <path d="M18.3 5.71L12 12l6.3 6.29-1.41 1.41L10.59 13.41 4.29 19.7 2.88 18.3 9.17 12 2.88 5.71 4.29 4.29l6.3 6.3 6.3-6.3z"/>302 </svg>303 </div>304 <div class="icon-btn">305 <svg viewBox="0 0 24 24">306 <path d="M12 3c2.76 0 5 2.24 5 5 0 3.87-3.13 7-7 7v3l-2-1v-2.5c0-1.1.9-2 2-2 4.42 0 8-3.58 8-8s-3.58-8-8-8-8 3.58-8 8h2c0-3.31 2.69-6 6-6z"/>307 </svg>308 </div>309 </div>310 </div>311 312 <!-- Map Area -->313 <div class="map-area">314 <div class="nearby-pill">See nearby attractions</div>315 316 <!-- Decorative route lines -->317 <div class="route route1"></div>318 <div class="route route2"></div>319 320 <!-- Location pin -->321 <svg class="pin" viewBox="0 0 24 24">322 <path fill="#ff6b4a" d="M12 2a7 7 0 0 0-7 7c0 4.9 7 13 7 13s7-8.1 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>323 </svg>324 325 <!-- Small photo overlay on map -->326 <div class="map-img">[IMG: Lotus Temple preview]</div>327 <div class="map-label">Google Map (Dark) - Lotus Temple area</div>328 </div>329 330 <!-- Bottom Sheet -->331 <div class="bottom-sheet">332 <div class="handle"></div>333 <div class="sheet-content">334 <div class="title-row">335 <div class="place-title">Lotus Temple</div>336 <div class="avatar">[IMG]</div>337 </div>338 <div class="subtext">लोटस मंदिर</div>339 340 <div class="rating-row">341 <div style="font-weight:700;">4.5</div>342 <div class="stars">343 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 6.9 1-5 4.9 1.2 6.9z"/></svg>344 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 6.9 1-5 4.9 1.2 6.9z"/></svg>345 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 6.9 1-5 4.9 1.2 6.9z"/></svg>346 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 6.9 1-5 4.9 1.2 6.9z"/></svg>347 <svg viewBox="0 0 24 24"><path d="M12 17.3l-6.2 3.3 1.2-6.9-5-4.9 6.9-1 3.1-6.3 3.1 6.3 6.9 1-5 4.9 1.2 6.9z"/></svg>348 </div>349 <div>(51,057)</div>350 </div>351 352 <div class="subtext">Bahá'í house of worship · ♿ · 🚗 · 59 min</div>353 354 <div class="open-row"><span class="open">Open</span> · Closes 6 pm</div>355 356 <div class="action-row">357 <div class="action-btn">358 <div class="icon"><svg viewBox="0 0 24 24"><path d="M12 2l4 4-4 4-4-4 4-4zm0 8l8 8H4l8-8z"/></svg></div>359 <div>Directions</div>360 </div>361 <div class="action-btn">362 <div class="icon"><svg viewBox="0 0 24 24"><path d="M12 3l8 18-8-4-8 4 8-18z"/></svg></div>363 <div>Start</div>364 </div>365 <div class="action-btn">366 <div class="icon"><svg viewBox="0 0 24 24"><path d="M4 7h16v12H4zM6 5h12v2H6z"/></svg></div>367 <div>Tickets</div>368 </div>369 <div class="action-btn">370 <div class="icon"><svg viewBox="0 0 24 24"><path d="M6.6 10.2c1.8 3.4 4.8 6.2 8.2 8l2.2-2.2c.4-.4 1-.5 1.5-.3 1 .4 2.1.7 3.2.8.6.1 1 .6 1 1.2V22c0 .7-.5 1.2-1.2 1.2C9.9 23.2.8 14.1.8 2.4.8 1.7 1.4 1.2 2 1.2h3.4c.6 0 1.1.4 1.2 1 .1 1.1.4 2.2.8 3.2.2.5.1 1.1-.3 1.5L6.6 10.2z"/></svg></div>371 <div>Call</div>372 </div>373 </div>374 375 <div class="photos">376 <div class="photo-big">[IMG: Lotus Temple front view]</div>377 <div class="photo-col">378 <div class="photo-sm" style="height: 260px;">[IMG: Garden walkway]</div>379 <div class="photo-sm" style="height: 260px;">[IMG: Interior arches]</div>380 </div>381 </div>382 </div>383 </div>384 385</div>386</body>387</html>