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>Floating Pool Map UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #a9c8f6; /* water */15 border-radius: 0;16 }17 18 /* Map background shapes (land) */19 .land {20 position: absolute;21 background: #c9e7c1;22 border-radius: 50px;23 }24 .land.l1 { top: 260px; right: 40px; width: 420px; height: 520px; transform: rotate(6deg); }25 .land.l2 { top: 460px; right: 260px; width: 220px; height: 260px; border-radius: 120px; }26 .land.l3 { top: 600px; right: 100px; width: 260px; height: 340px; border-radius: 160px; }27 28 /* Status bar */29 .status-bar {30 position: absolute;31 top: 0; left: 0; right: 0;32 height: 84px;33 padding: 0 24px;34 display: flex;35 align-items: center;36 color: #222;37 font-size: 28px;38 box-sizing: border-box;39 }40 41 /* Search bar */42 .search-bar {43 position: absolute;44 top: 98px;45 left: 36px;46 right: 36px;47 height: 112px;48 background: #fff;49 border-radius: 56px;50 box-shadow: 0 6px 20px rgba(0,0,0,0.15);51 padding: 0 24px;52 display: flex;53 align-items: center;54 box-sizing: border-box;55 gap: 18px;56 }57 .search-text {58 flex: 1;59 color: #1f1f1f;60 font-size: 34px;61 white-space: nowrap;62 overflow: hidden;63 text-overflow: ellipsis;64 }65 .icon-btn {66 width: 72px; height: 72px;67 display: flex; align-items: center; justify-content: center;68 border-radius: 36px;69 color: #5f6368;70 }71 72 /* Nearby chip */73 .chip {74 position: absolute;75 top: 234px;76 left: 280px;77 background: #fff;78 color: #333;79 padding: 20px 28px;80 border-radius: 32px;81 font-size: 30px;82 box-shadow: 0 6px 16px rgba(0,0,0,0.18);83 }84 85 /* Red pin */86 .pin {87 position: absolute;88 top: 760px;89 left: 540px;90 width: 40px; height: 40px;91 background: #d32f2f;92 border-radius: 50%;93 box-shadow: 0 6px 0 rgba(0,0,0,0.15) inset;94 }95 .pin:after {96 content: '';97 position: absolute;98 bottom: -26px; left: 14px;99 width: 12px; height: 28px;100 background: #d32f2f;101 clip-path: polygon(50% 0, 0 100%, 100% 100%);102 }103 .pin-label {104 position: absolute;105 top: 816px;106 left: 580px;107 font-size: 40px;108 color: #b71c1c;109 font-weight: 700;110 text-shadow: 0 2px 0 #fff;111 }112 113 /* Street view thumbnail */114 .thumb {115 position: absolute;116 left: 36px;117 top: 1000px;118 width: 240px; height: 160px;119 border-radius: 14px;120 overflow: hidden;121 box-shadow: 0 4px 10px rgba(0,0,0,0.2);122 }123 .img-ph {124 width: 100%; height: 100%;125 background: #E0E0E0;126 border: 1px solid #BDBDBD;127 display: flex; align-items: center; justify-content: center;128 color: #757575; font-size: 28px;129 }130 131 /* Bottom sheet */132 .sheet {133 position: absolute;134 left: 0; right: 0; bottom: 98px;135 height: 980px;136 background: #fff;137 border-top-left-radius: 34px;138 border-top-right-radius: 34px;139 box-shadow: 0 -10px 24px rgba(0,0,0,0.15);140 padding: 24px 28px 0 28px;141 box-sizing: border-box;142 }143 .grabber {144 width: 140px; height: 10px; background: #DADCE0;145 border-radius: 6px; margin: 6px auto 16px;146 }147 .sheet-header {148 display: flex; align-items: center; justify-content: space-between;149 padding: 0 8px;150 }151 .title {152 font-size: 48px; font-weight: 700; color: #202124;153 }154 .badge {155 width: 78px; height: 78px; border-radius: 50%;156 background: #E8F5E9; display: flex; align-items: center; justify-content: center;157 border: 2px solid #A5D6A7;158 }159 .badge svg { width: 46px; height: 46px; fill: #43A047; }160 .meta { margin: 14px 8px; font-size: 30px; color: #5f6368; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }161 .stars { display: inline-flex; gap: 6px; margin: 0 10px; }162 .stars svg { width: 26px; height: 26px; }163 .status { margin: 6px 8px 18px; font-size: 30px; }164 .status .closed { color: #d93025; font-weight: 600; }165 166 .actions { display: flex; gap: 18px; padding: 4px 6px 18px; }167 .btn {168 height: 110px; padding: 0 28px; border-radius: 56px; border: 1px solid #e0e0e0;169 background: #fff; color: #1f1f1f; font-size: 32px; font-weight: 600;170 display: inline-flex; align-items: center; gap: 16px;171 }172 .btn svg { width: 38px; height: 38px; }173 .btn.primary { background: #1a73e8; color: #fff; border-color: #1a73e8; }174 .photos { margin-top: 18px; display: flex; gap: 18px; }175 .left-photo { width: 680px; height: 520px; border-radius: 22px; overflow: hidden; }176 .right-photos { width: 320px; display: flex; flex-direction: column; gap: 18px; }177 .right-photos .ph { height: 250px; border-radius: 22px; overflow: hidden; }178 179 /* Snackbar */180 .snackbar {181 position: absolute;182 left: 36px; right: 36px;183 bottom: 210px;184 background: rgba(20,20,20,0.92);185 color: #fff; padding: 26px 28px;186 border-radius: 20px;187 display: flex; align-items: center; justify-content: space-between;188 font-size: 32px;189 }190 .snackbar .link { color: #8ab4f8; font-weight: 700; }191 192 /* Gesture bar */193 .gesture {194 position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);195 width: 240px; height: 10px; background: #c9ccd1; border-radius: 6px;196 }197 198 /* Utility star color */199 .gold { fill: #fbbc04; }200 .gold.half { fill: url(#halfGrad); }201</style>202</head>203<body>204<div id="render-target">205 206 <!-- Map land shapes -->207 <div class="land l1"></div>208 <div class="land l2"></div>209 <div class="land l3"></div>210 211 <!-- Status bar -->212 <div class="status-bar">213 <div>12:12</div>214 </div>215 216 <!-- Search bar -->217 <div class="search-bar">218 <div class="icon-btn" aria-label="Back">219 <svg viewBox="0 0 24 24">220 <path d="M15 6L9 12l6 6" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>221 </svg>222 </div>223 <div class="search-text">Floating Pool, Tiffany St, Bro...</div>224 <div class="icon-btn" aria-label="Clear">225 <svg viewBox="0 0 24 24">226 <path d="M6 6l12 12M18 6L6 18" stroke="#5f6368" stroke-width="2" fill="none" stroke-linecap="round"></path>227 </svg>228 </div>229 <div class="icon-btn" aria-label="Voice search">230 <svg viewBox="0 0 24 24">231 <rect x="10" y="4" width="4" height="9" rx="2" fill="#5f6368"></rect>232 <path d="M6 12a6 6 0 0012 0" stroke="#5f6368" stroke-width="2" fill="none"></path>233 <path d="M12 18v3" stroke="#5f6368" stroke-width="2" fill="none"></path>234 </svg>235 </div>236 </div>237 238 <!-- Nearby attractions chip -->239 <div class="chip">See nearby attractions</div>240 241 <!-- Map pin -->242 <div class="pin"></div>243 <div class="pin-label">Floating Pool</div>244 245 <!-- Street view thumbnail -->246 <div class="thumb">247 <div class="img-ph">[IMG: Street View Preview]</div>248 </div>249 250 <!-- Bottom sheet -->251 <div class="sheet">252 <div class="grabber"></div>253 254 <div class="sheet-header">255 <div class="title">Floating Pool</div>256 <div class="badge" aria-hidden="true">257 <svg viewBox="0 0 24 24">258 <path d="M12 2c2 5-3 6-3 10 0 2 2 4 3 5 1-1 3-3 3-5 0-4-5-5-3-10z"></path>259 </svg>260 </div>261 </div>262 263 <div class="meta">264 <span>4.4</span>265 <span class="stars">266 <svg viewBox="0 0 24 24"><path class="gold" d="M12 2l3 7h7l-5.5 4 2.1 7L12 16l-6.6 4 2.1-7L2 9h7z"></path></svg>267 <svg viewBox="0 0 24 24"><path class="gold" d="M12 2l3 7h7l-5.5 4 2.1 7L12 16l-6.6 4 2.1-7L2 9h7z"></path></svg>268 <svg viewBox="0 0 24 24"><path class="gold" d="M12 2l3 7h7l-5.5 4 2.1 7L12 16l-6.6 4 2.1-7L2 9h7z"></path></svg>269 <svg viewBox="0 0 24 24"><path class="gold" d="M12 2l3 7h7l-5.5 4 2.1 7L12 16l-6.6 4 2.1-7L2 9h7z"></path></svg>270 <svg viewBox="0 0 24 24"><path fill="#e0e0e0" d="M12 2l3 7h7l-5.5 4 2.1 7L12 16l-6.6 4 2.1-7L2 9h7z"></path></svg>271 </span>272 <span>(228)</span>273 </div>274 275 <div class="meta">Public swimming pool · ♿</div>276 <div class="status"><span class="closed">Closed</span> · Opens 11 am</div>277 278 <div class="actions">279 <div class="btn primary">280 <svg viewBox="0 0 24 24">281 <path fill="#fff" d="M12 2l7 7-7 13-7-13 7-7zm0 4l-3 3 3 7 3-7-3-3z"></path>282 </svg>283 Directions284 </div>285 <div class="btn">286 <svg viewBox="0 0 24 24">287 <path fill="#5f6368" d="M6 2l4 1 2 5-2 2 4 4 2-2 5 2-1 4c-6 3-13-4-14-10z"></path>288 </svg>289 Call290 </div>291 <div class="btn">292 <svg viewBox="0 0 24 24">293 <path fill="#0f9d58" d="M9 16.2l-3.5-3.5 1.4-1.4L9 13.4l7.1-7.1 1.4 1.4z"></path>294 </svg>295 Saved296 </div>297 <div class="btn">298 <svg viewBox="0 0 24 24">299 <circle cx="6" cy="12" r="2" fill="#5f6368"></circle>300 <circle cx="18" cy="6" r="2" fill="#5f6368"></circle>301 <circle cx="18" cy="18" r="2" fill="#5f6368"></circle>302 <path d="M7.7 11l8-4M7.7 13l8 4" stroke="#5f6368" stroke-width="2" fill="none"></path>303 </svg>304 Share305 </div>306 </div>307 308 <div class="photos">309 <div class="left-photo">310 <div class="img-ph">[IMG: Pool panorama]</div>311 </div>312 <div class="right-photos">313 <div class="ph">314 <div class="img-ph">[IMG: Pool with people]</div>315 </div>316 <div class="ph">317 <div class="img-ph">[IMG: Additional pool view]</div>318 </div>319 </div>320 </div>321 </div>322 323 <!-- Snackbar / bottom banner -->324 <div class="snackbar">325 <div>Saved in Escape de ville</div>326 <div class="link">See list</div>327 </div>328 329 <!-- Bottom gesture bar -->330 <div class="gesture"></div>331</div>332</body>333</html>