GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Parks Search UI</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 color: #1f1f1f;14 }15 16 /* Status bar */17 .status-bar {18 height: 75px;19 padding: 0 28px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 font-size: 30px;24 color: #333;25 }26 .status-icons span {27 display: inline-block;28 width: 26px;29 height: 26px;30 margin-left: 14px;31 background: #999;32 border-radius: 6px;33 }34 35 /* Search/App bar */36 .appbar {37 height: 108px;38 padding: 0 20px;39 display: flex;40 align-items: center;41 }42 .search-pill {43 flex: 1;44 height: 88px;45 border-radius: 44px;46 background: #f2f3f5;47 display: flex;48 align-items: center;49 padding: 0 24px;50 box-shadow: inset 0 0 0 1px #e0e0e0;51 }52 .icon {53 width: 44px;54 height: 44px;55 display: inline-flex;56 align-items: center;57 justify-content: center;58 color: #4a4a4a;59 }60 .search-title {61 flex: 1;62 font-size: 44px;63 font-weight: 600;64 color: #1e1e1e;65 margin-left: 8px;66 }67 .right-icons .icon { margin-left: 8px; }68 69 /* Filter chips */70 .filters {71 display: flex;72 align-items: center;73 padding: 10px 18px 16px;74 overflow: hidden;75 gap: 14px;76 }77 .filter-icon {78 width: 84px;79 height: 84px;80 border-radius: 20px;81 border: 1px solid #e1e1e1;82 display: flex;83 align-items: center;84 justify-content: center;85 background: #fff;86 }87 .chip {88 padding: 18px 28px;89 border-radius: 40px;90 border: 1px solid #d8d8d8;91 background: #ffffff;92 font-size: 32px;93 white-space: nowrap;94 }95 .chip.active {96 background: #e8f0fe;97 border-color: #b8c8fe;98 }99 100 /* Map area */101 .map-area {102 margin-top: 4px;103 height: 660px;104 position: relative;105 border-top: 1px solid #eee;106 border-bottom: 1px solid #eee;107 }108 .map-placeholder {109 position: absolute;110 inset: 0;111 background: #d7e5f7;112 border: 1px solid #bcd0e5;113 display: flex;114 align-items: center;115 justify-content: center;116 color: #3b5e7a;117 font-size: 36px;118 letter-spacing: 0.5px;119 }120 .pin {121 position: absolute;122 width: 34px;123 height: 48px;124 background: #e74c3c;125 border-radius: 17px 17px 17px 0;126 transform: rotate(45deg);127 box-shadow: 0 1px 2px rgba(0,0,0,0.25);128 }129 .pin::after {130 content: '';131 position: absolute;132 width: 14px;133 height: 14px;134 border-radius: 50%;135 background: #fff;136 top: 8px;137 left: 10px;138 transform: rotate(-45deg);139 }140 .map-float {141 position: absolute;142 right: 22px;143 top: 24px;144 width: 88px;145 height: 88px;146 background: #ffffff;147 border: 1px solid #e1e1e1;148 border-radius: 22px;149 display: flex;150 align-items: center;151 justify-content: center;152 }153 .drag-indicator {154 position: absolute;155 bottom: -12px;156 left: 50%;157 transform: translateX(-50%);158 width: 110px;159 height: 10px;160 background: #d9d9d9;161 border-radius: 8px;162 }163 164 /* Results list */165 .content {166 padding: 22px;167 }168 .photos-row {169 display: flex;170 gap: 18px;171 }172 .photo {173 width: 320px;174 height: 260px;175 background: #E0E0E0;176 border: 1px solid #BDBDBD;177 border-radius: 16px;178 display: flex;179 align-items: center;180 justify-content: center;181 color: #757575;182 font-size: 28px;183 text-align: center;184 }185 .card-title {186 margin-top: 18px;187 font-size: 44px;188 font-weight: 700;189 }190 .rating {191 margin-top: 8px;192 color: #555;193 font-size: 30px;194 }195 .rating .star {196 color: #f6b10a;197 font-size: 30px;198 margin-right: 4px;199 }200 .meta {201 margin-top: 6px;202 color: #6b6b6b;203 font-size: 30px;204 }205 .open {206 margin-top: 8px;207 font-size: 30px;208 }209 .open .dot {210 display: inline-block;211 width: 12px;212 height: 12px;213 background: #1db954;214 border-radius: 50%;215 margin: 0 10px 3px 0;216 }217 .action-row {218 margin-top: 16px;219 display: flex;220 gap: 26px;221 }222 .action-btn {223 flex: 1;224 height: 96px;225 border: 1px solid #e1e1e1;226 border-radius: 48px;227 display: flex;228 align-items: center;229 justify-content: center;230 gap: 16px;231 font-size: 34px;232 background: #fff;233 }234 235 /* Second card */236 .card {237 margin-top: 34px;238 }239 240 /* Floating View Map */241 .view-map {242 position: absolute;243 right: 24px;244 bottom: 180px;245 background: #ffffff;246 border: 1px solid #e2e2e2;247 box-shadow: 0 8px 24px rgba(0,0,0,0.12);248 border-radius: 30px;249 height: 120px;250 padding: 0 30px;251 display: flex;252 align-items: center;253 gap: 18px;254 font-size: 40px;255 }256 .mini-map-icon {257 width: 58px;258 height: 58px;259 border-radius: 14px;260 background: #3d7cff;261 }262 263 /* Simple SVG icons */264 svg { width: 36px; height: 36px; }265</style>266</head>267<body>268<div id="render-target">269 270 <!-- Status bar -->271 <div class="status-bar">272 <div class="time">10:41</div>273 <div class="status-icons">274 <span title="location"></span>275 <span title="wifi"></span>276 <span title="battery"></span>277 </div>278 </div>279 280 <!-- App/Search bar -->281 <div class="appbar">282 <div class="search-pill">283 <div class="icon" title="Back">284 <svg viewBox="0 0 24 24"><path d="M15.5 3l-9 9 9 9" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>285 </div>286 <div class="search-title">Parks</div>287 <div class="right-icons" style="display:flex;">288 <div class="icon" title="Clear">289 <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" stroke="#444" stroke-width="2" stroke-linecap="round"/></svg>290 </div>291 <div class="icon" title="Voice">292 <svg viewBox="0 0 24 24"><path d="M12 3a3 3 0 0 1 3 3v6a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3z" fill="#444"/><path d="M5 12a7 7 0 0 0 14 0" stroke="#444" stroke-width="2" fill="none"/><path d="M12 19v3" stroke="#444" stroke-width="2"/></svg>293 </div>294 </div>295 </div>296 </div>297 298 <!-- Filter chips -->299 <div class="filters">300 <div class="filter-icon" title="Filters">301 <svg viewBox="0 0 24 24"><path d="M3 6h18M7 12h10M10 18h4" stroke="#444" stroke-width="2" stroke-linecap="round"/></svg>302 </div>303 <div class="chip active">✔ 4.5+</div>304 <div class="chip">Open now</div>305 <div class="chip">Top-rated</div>306 <div class="chip">More filters</div>307 </div>308 309 <!-- Map area -->310 <div class="map-area">311 <div class="map-placeholder">[IMG: Google Map around Seattle with park pins]</div>312 313 <!-- Simple scattered pins -->314 <div class="pin" style="left: 210px; top: 110px;"></div>315 <div class="pin" style="left: 300px; top: 160px;"></div>316 <div class="pin" style="left: 390px; top: 210px;"></div>317 <div class="pin" style="left: 470px; top: 250px;"></div>318 <div class="pin" style="left: 560px; top: 180px;"></div>319 <div class="pin" style="left: 640px; top: 220px;"></div>320 <div class="pin" style="left: 720px; top: 260px;"></div>321 <div class="pin" style="left: 780px; top: 200px;"></div>322 <div class="pin" style="left: 840px; top: 150px;"></div>323 <div class="pin" style="left: 910px; top: 230px;"></div>324 325 <div class="map-float">326 <svg viewBox="0 0 24 24"><path d="M4 6l6-3 6 3 4-2v14l-4 2-6-3-6 3V6z" fill="#777"/></svg>327 </div>328 <div class="drag-indicator"></div>329 </div>330 331 <!-- Content list -->332 <div class="content">333 <div class="photos-row">334 <div class="photo">[IMG: Playground climbing structure]</div>335 <div class="photo">[IMG: Playground with slides]</div>336 <div class="photo">[IMG: Modern play area]</div>337 </div>338 339 <div class="card-title">Yesler Terrace Park & Spraypark</div>340 <div class="rating">341 <span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star" style="color:#ccc;">★</span>342 4.7 (230)343 </div>344 <div class="meta">Park · ♿ · 903 Yesler Way</div>345 <div class="open"><span class="dot"></span>Open · Closes 11:30 pm</div>346 <div class="action-row">347 <div class="action-btn">348 <svg viewBox="0 0 24 24"><path d="M6 2l3 3-2 2 4 4 2-2 3 3-3 3c-2 2-8-4-6-6z" fill="#4a4a4a"/></svg>349 Call350 </div>351 <div class="action-btn">352 <svg viewBox="0 0 24 24"><path d="M12 2v20M2 12h20" stroke="#4a4a4a" stroke-width="2"/></svg>353 Directions354 </div>355 <div class="action-btn">356 <svg viewBox="0 0 24 24"><path d="M4 12v8h8M20 12V4h-8" stroke="#4a4a4a" stroke-width="2"/><circle cx="12" cy="12" r="3" fill="#4a4a4a"/></svg>357 Share358 </div>359 </div>360 361 <!-- Second card -->362 <div class="card">363 <div class="photos-row">364 <div class="photo">[IMG: Lush cottage garden]</div>365 <div class="photo">[IMG: Cobblestone path garden]</div>366 <div class="photo">[IMG: Garden walkway]</div>367 </div>368 <div class="card-title">Belltown Cottage Park</div>369 <div class="rating">370 <span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star">★</span><span class="star" style="color:#ccc;">★</span>371 4.6 (76)372 </div>373 <div class="meta">Park · 2512 Elliott Ave</div>374 </div>375 </div>376 377 <!-- Floating "View map" button -->378 <div class="view-map">379 <div class="mini-map-icon"></div>380 <div>View map</div>381 </div>382 383</div>384</body>385</html>