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>Listing UI</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: #FFFFFF;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16 color: #222;17 }18 19 /* Status bar */20 .status-bar {21 height: 120px;22 background: #E6E6E6;23 display: flex;24 align-items: center;25 padding: 0 40px;26 font-size: 40px;27 color: #4A4A4A;28 }29 .status-left { flex: 1; }30 .status-right { display: flex; align-items: center; gap: 20px; }31 32 /* Header with search pill */33 .header {34 background: #ffffff;35 padding: 24px 32px 20px 32px;36 border-bottom: 1px solid #eee;37 }38 .header-row {39 display: flex;40 align-items: center;41 gap: 24px;42 }43 .icon-btn {44 width: 84px;45 height: 84px;46 border-radius: 42px;47 display: flex;48 align-items: center;49 justify-content: center;50 background: transparent;51 }52 .search-pill {53 flex: 1;54 background: #F1F3F6;55 border-radius: 60px;56 padding: 22px 34px;57 display: flex;58 align-items: center;59 gap: 24px;60 box-shadow: inset 0 0 0 1px #E5E7EB;61 }62 .pill-texts {63 flex: 1;64 }65 .pill-title {66 font-weight: 700;67 font-size: 44px;68 color: #1F2937;69 }70 .pill-sub {71 margin-top: 6px;72 font-size: 36px;73 color: #6B7280;74 }75 .header-actions {76 display: flex;77 align-items: center;78 gap: 22px;79 }80 81 /* Filters row */82 .filters {83 display: flex;84 align-items: center;85 padding: 24px 40px;86 gap: 40px;87 border-bottom: 1px solid #EAEAEA;88 }89 .filter-item {90 font-size: 40px;91 color: #374151;92 display: flex;93 align-items: center;94 gap: 12px;95 }96 .divider {97 width: 2px;98 height: 48px;99 background: #E5E7EB;100 }101 102 /* Promo banner */103 .promo {104 margin: 24px 32px;105 background: #DFF3D8;106 border-radius: 28px;107 padding: 28px 32px;108 display: flex;109 align-items: center;110 gap: 24px;111 }112 .promo .tag {113 width: 66px;114 height: 66px;115 border-radius: 16px;116 background: #A9E3A0;117 display: flex; align-items: center; justify-content: center;118 }119 .promo-text {120 flex: 1;121 font-size: 40px;122 color: #256329;123 font-weight: 700;124 line-height: 1.25;125 }126 .promo small { font-weight: 500; }127 .promo-btn {128 color: #1D4ED8;129 font-weight: 700;130 font-size: 40px;131 }132 133 /* Cards */134 .card {135 background: #fff;136 padding: 28px 32px 16px 32px;137 }138 .photo {139 position: relative;140 height: 540px;141 border-radius: 40px;142 overflow: hidden;143 background: #E0E0E0;144 border: 1px solid #BDBDBD;145 display: flex; align-items: center; justify-content: center;146 color: #757575; font-size: 42px; font-weight: 600;147 }148 .photo .corner {149 position: absolute;150 left: 24px; bottom: 24px;151 background: rgba(0,0,0,0.65);152 color: #fff; font-size: 36px; padding: 14px 20px;153 border-radius: 24px;154 }155 .price-badge {156 position: absolute;157 right: 24px; bottom: 20px;158 background: #EF4444;159 color: #fff;160 border-radius: 24px;161 box-shadow: 0 8px 18px rgba(0,0,0,0.15);162 overflow: hidden;163 }164 .price-badge .top {165 padding: 16px 24px;166 font-size: 36px;167 font-weight: 700;168 background: #EF4444;169 }170 .price-badge .bottom {171 background: #ffffff;172 color: #EF4444;173 padding: 18px 26px;174 font-size: 44px;175 font-weight: 800;176 border-radius: 0 0 24px 24px;177 }178 179 .title-row {180 display: flex;181 align-items: flex-start;182 margin-top: 28px;183 }184 .title {185 flex: 1;186 font-size: 52px;187 font-weight: 800;188 color: #111827;189 line-height: 1.18;190 }191 .title-actions {192 display: flex; gap: 26px;193 }194 195 .subline {196 margin-top: 16px;197 display: flex; align-items: center; gap: 12px;198 color: #6B7280; font-size: 38px;199 }200 .rating-line {201 margin-top: 16px;202 display: flex; align-items: center; gap: 14px;203 }204 .rating-score {205 color: #2563EB; font-weight: 800; font-size: 44px;206 }207 .rating-reviews {208 color: #6B7280; font-size: 38px;209 }210 211 .amenities {212 display: flex; align-items: center; gap: 28px;213 margin-top: 18px; color: #374151; font-size: 38px;214 }215 .amenities .item { display: flex; align-items: center; gap: 10px; }216 217 .chip {218 display: inline-block;219 margin-top: 22px;220 background: #E7F7E8;221 color: #256329;222 border: 1px solid #C9EACB;223 padding: 16px 22px;224 border-radius: 16px;225 font-size: 36px;226 font-weight: 700;227 }228 229 .list-divider {230 height: 18px;231 background: #F3F4F6;232 margin: 12px 0 24px 0;233 }234 235 /* Second card extras */236 .ribbon {237 position: absolute; left: 24px; top: 24px;238 background: #D69B6F; color: #fff;239 font-weight: 800; font-size: 36px;240 padding: 12px 18px; border-radius: 16px;241 display: flex; align-items: center; gap: 10px;242 }243 .map-pill {244 position: absolute; left: 50%; transform: translateX(-50%);245 bottom: 22px;246 background: #ffffff;247 border: 2px solid #D1D5DB;248 border-radius: 40px;249 padding: 18px 28px;250 display: flex; align-items: center; gap: 26px;251 font-size: 40px; color: #1F2937; font-weight: 700;252 box-shadow: 0 10px 18px rgba(0,0,0,0.1);253 }254 .map-pill .divider-v {255 width: 2px; height: 36px; background: #E5E7EB;256 }257 .discount {258 position: absolute; right: 24px; bottom: 20px;259 display: flex; flex-direction: column; align-items: flex-end;260 gap: 8px;261 }262 .discount .off {263 background: #EF4444; color: #fff; font-weight: 800;264 padding: 12px 20px; font-size: 36px; border-radius: 16px;265 }266 .discount .old {267 color: #9CA3AF; text-decoration: line-through; font-size: 36px;268 background: #ffffff; padding: 8px 14px; border-radius: 12px;269 }270 .discount .new {271 color: #EF4444; background: #ffffff; font-weight: 800;272 padding: 10px 16px; font-size: 48px; border-radius: 16px;273 box-shadow: 0 8px 18px rgba(0,0,0,0.08);274 }275 276 /* Gesture bar */277 .gesture {278 position: absolute; bottom: 28px; left: 50%;279 transform: translateX(-50%);280 width: 300px; height: 12px; border-radius: 12px;281 background: #111827;282 opacity: 0.24;283 }284 285 /* SVG helpers */286 svg { display: block; }287</style>288</head>289<body>290<div id="render-target">291 292 <!-- Status bar -->293 <div class="status-bar">294 <div class="status-left">6:29</div>295 <div class="status-right">296 <span>100%</span>297 </div>298 </div>299 300 <!-- Header -->301 <div class="header">302 <div class="header-row">303 <div class="icon-btn">304 <svg width="44" height="44" viewBox="0 0 24 24">305 <path d="M15 18l-6-6 6-6" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>306 </svg>307 </div>308 309 <div class="search-pill">310 <div class="pill-texts">311 <div class="pill-title">Paris (5043)</div>312 <div class="pill-sub">Sun, Dec 24 - Sun, Dec 31 • 2 Guests</div>313 </div>314 <svg width="56" height="56" viewBox="0 0 24 24">315 <circle cx="11" cy="11" r="7" stroke="#111" stroke-width="2" fill="none"/>316 <path d="M20 20l-4.5-4.5" stroke="#111" stroke-width="2" stroke-linecap="round"/>317 </svg>318 </div>319 320 <div class="header-actions">321 <svg width="52" height="52" viewBox="0 0 24 24">322 <path d="M3 3h3l3 12h9l2-6H9" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>323 </svg>324 <svg width="52" height="52" viewBox="0 0 24 24">325 <path d="M6 6h12v12H6z" fill="none"/>326 <path d="M9 9h6v6H9z" fill="#111"/>327 </svg>328 </div>329 </div>330 </div>331 332 <!-- Filters -->333 <div class="filters">334 <div class="filter-item">335 <span>Filters</span>336 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round"/></svg>337 </div>338 <div class="divider"></div>339 <div class="filter-item">340 <span>Price</span>341 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round"/></svg>342 </div>343 <div class="divider"></div>344 <div class="filter-item">345 <span>Sort</span>346 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round"/></svg>347 </div>348 </div>349 350 <!-- Promo banner -->351 <div class="promo">352 <div class="tag">353 <svg width="34" height="34" viewBox="0 0 24 24">354 <path d="M3 7l9 9 9-9V3H7z" fill="none" stroke="#256329" stroke-width="2"/>355 <circle cx="8" cy="8" r="1.5" fill="#256329"/>356 </svg>357 </div>358 <div class="promo-text">359 ONE-HOUR AGODASALE! Claim now to instantly lower prices by up to 10%360 </div>361 <div class="promo-btn">CLAIM</div>362 </div>363 364 <!-- Card 1 -->365 <div class="card">366 <div class="photo">367 [IMG: Cozy apartment interior with brick wall and table]368 <div class="corner">1/5</div>369 <div class="price-badge">370 <div class="top">ONLY 1 LEFT</div>371 <div class="bottom">₹ 11,538</div>372 </div>373 </div>374 375 <div class="title-row">376 <div class="title">Appartement + Duplex Cosy et Familial</div>377 <div class="title-actions">378 <svg width="54" height="54" viewBox="0 0 24 24">379 <path d="M18 8l-6 6-6-6" fill="none" stroke="#6B7280" stroke-width="2" transform="rotate(90 12 12)"/>380 <circle cx="12" cy="12" r="2" fill="#6B7280"/>381 </svg>382 <svg width="54" height="54" viewBox="0 0 24 24">383 <path d="M12 21s-6-4.35-6-9a4 4 0 018 0c0 4.65-6 9-6 9z" fill="none" stroke="#6B7280" stroke-width="2"/>384 </svg>385 </div>386 </div>387 388 <div class="subline">389 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 2l7 7-7 13-7-13z" fill="none" stroke="#6B7280" stroke-width="2"/></svg>390 Fontenay-sous-Bois391 </div>392 393 <div class="rating-line">394 <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill="#FF4D8D"/></svg>395 <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill="#FF4D8D"/></svg>396 <svg width="26" height="26" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" fill="#FF4D8D"/></svg>397 <span>•</span>398 <span class="rating-score">7.4 Very good</span>399 <span class="rating-reviews">19 reviews</span>400 </div>401 402 <div class="amenities">403 <div class="item">404 <svg width="34" height="34" viewBox="0 0 24 24">405 <path d="M3 12h18M6 12V9h12v3M4 16h16" fill="none" stroke="#374151" stroke-width="2"/>406 </svg>407 1 bedroom408 </div>409 <div class="item">410 <svg width="34" height="34" viewBox="0 0 24 24">411 <path d="M4 14h16M6 14V9h12v5" fill="none" stroke="#374151" stroke-width="2"/>412 </svg>413 2 beds414 </div>415 <div class="item">416 <svg width="34" height="34" viewBox="0 0 24 24">417 <path d="M5 10h14v5a4 4 0 01-4 4H9a4 4 0 01-4-4z" fill="none" stroke="#374151" stroke-width="2"/>418 </svg>419 1 bathroom420 </div>421 <div class="item">422 <svg width="34" height="34" viewBox="0 0 24 24">423 <path d="M4 6h16M6 10h12M8 14h8" fill="none" stroke="#374151" stroke-width="2"/>424 </svg>425 1 kitchen426 </div>427 </div>428 429 <div class="chip">Free cancellation</div>430 </div>431 432 <div class="list-divider"></div>433 434 <!-- Card 2 -->435 <div class="card">436 <div class="photo">437 [IMG: Stylish kitchen and bright living area with city view]438 <div class="ribbon">439 <svg width="22" height="22" viewBox="0 0 24 24"><path d="M3 12l4 4 7-9" fill="none" stroke="#fff" stroke-width="2"/></svg>440 VIP Deal441 </div>442 <div class="map-pill">443 <div class="item">444 <svg width="30" height="30" viewBox="0 0 24 24"><path d="M12 2a7 7 0 017 7c0 5-7 13-7 13S5 14 5 9a7 7 0 017-7z" fill="none" stroke="#1F2937" stroke-width="2"/><circle cx="12" cy="9" r="2.5" fill="#1F2937"/></svg>445 Map446 </div>447 <div class="divider-v"></div>448 <div class="item">449 <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 21s-6-4.35-6-9a4 4 0 018 0c0 4.65-6 9-6 9z" fill="none" stroke="#1F2937" stroke-width="2"/></svg>450 Saved451 </div>452 </div>453 <div class="discount">454 <div class="off">-34% TODAY</div>455 <div class="old">₹ 198,943</div>456 <div class="new">₹ 129,737</div>457 </div>458 <div class="corner">1/5</div>459 </div>460 </div>461 462 <!-- Gesture bar -->463 <div class="gesture"></div>464 465</div>466</body>467</html>