GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Listing UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #212121; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #FAFAFA;14 }15 16 .statusbar {17 height: 110px;18 background: #CFCFCF;19 color: #2b2b2b;20 font-weight: 600;21 padding: 24px 36px;22 display: flex;23 justify-content: space-between;24 align-items: center;25 font-size: 36px;26 }27 .topbar {28 height: 170px;29 background: #FFFFFF;30 display: flex;31 align-items: center;32 padding: 0 32px;33 border-bottom: 1px solid #E5E5E5;34 }35 .icon-btn {36 width: 80px;37 height: 80px;38 display: flex;39 align-items: center;40 justify-content: center;41 color: #3c3c3c;42 margin-right: 20px;43 }44 .search-pill {45 flex: 1;46 background: #F2F4F8;47 border-radius: 60px;48 padding: 24px 32px;49 display: flex;50 align-items: center;51 gap: 20px;52 border: 1px solid #E3E7EF;53 }54 .search-texts { flex: 1; }55 .search-title { font-size: 40px; font-weight: 700; color: #1d1d1d; }56 .search-sub { font-size: 30px; color: #6A6F7A; margin-top: 6px; }57 .top-actions { display: flex; gap: 24px; margin-left: 12px; }58 59 .filter-bar {60 height: 120px;61 background: #FFFFFF;62 display: flex;63 align-items: center;64 padding: 0 36px;65 gap: 36px;66 border-bottom: 1px solid #EAEAEA;67 }68 .filter-item {69 font-size: 34px;70 color: #3a3a3a;71 display: flex;72 align-items: center;73 gap: 10px;74 padding-right: 36px;75 }76 .filter-sep {77 width: 1px;78 height: 40px;79 background: #E5E5E5;80 }81 82 .promo {83 margin: 24px 32px;84 background: #DFF0D8;85 border-radius: 36px;86 padding: 26px 28px;87 display: flex;88 align-items: center;89 gap: 22px;90 font-size: 36px;91 color: #1b5e20;92 }93 .promo .claim {94 margin-left: auto;95 color: #1E88E5;96 font-weight: 700;97 }98 99 .card {100 background: #FFFFFF;101 border-top: 1px solid #EEEEEE;102 padding-bottom: 32px;103 }104 .img-wrap {105 margin: 24px 32px 12px 32px;106 position: relative;107 border-radius: 36px;108 overflow: hidden;109 }110 .img-placeholder {111 width: 1016px;112 height: 520px;113 background: #E0E0E0;114 border: 1px solid #BDBDBD;115 display: flex;116 align-items: center;117 justify-content: center;118 color: #757575;119 font-size: 42px;120 border-radius: 36px;121 }122 .badge-count {123 position: absolute;124 left: 28px;125 bottom: 28px;126 background: #6E7278;127 color: #fff;128 font-size: 34px;129 padding: 10px 18px;130 border-radius: 28px;131 }132 .price-flag {133 position: absolute;134 right: 20px;135 bottom: 20px;136 background: #D32F2F;137 color: #fff;138 border-radius: 22px;139 box-shadow: 0 6px 14px rgba(0,0,0,0.15);140 overflow: hidden;141 }142 .price-flag .top {143 padding: 16px 22px;144 font-size: 32px;145 font-weight: 700;146 background: #D32F2F;147 }148 .price-flag .bottom {149 background: #FFFFFF;150 color: #D32F2F;151 padding: 18px 22px;152 font-size: 44px;153 font-weight: 800;154 }155 156 .title-row {157 display: flex;158 align-items: flex-start;159 justify-content: space-between;160 padding: 6px 32px 0 32px;161 }162 .title {163 font-size: 44px;164 font-weight: 800;165 line-height: 1.25;166 color: #212121;167 max-width: 820px;168 }169 .title-actions {170 display: flex;171 align-items: center;172 gap: 28px;173 }174 175 .sub-info {176 padding: 12px 32px 0 32px;177 color: #606B75;178 font-size: 34px;179 display: flex;180 align-items: center;181 gap: 16px;182 }183 .rating-line {184 padding: 8px 32px;185 font-size: 36px;186 }187 .rating-line .score { color: #216ED9; font-weight: 800; }188 .amenities {189 padding: 6px 32px;190 display: flex;191 align-items: center;192 gap: 26px;193 color: #37474F;194 font-size: 34px;195 }196 .amenities .a-item { display: flex; align-items: center; gap: 12px; }197 .pill {198 margin: 18px 32px;199 display: inline-block;200 background: #DFF0D8;201 color: #2E7D32;202 border: 1px solid #CDE7C7;203 padding: 16px 22px;204 font-size: 32px;205 border-radius: 16px;206 font-weight: 700;207 }208 .divider { height: 18px; background: #F3F5F9; }209 210 /* Second card extras */211 .vip-tag {212 position: absolute;213 left: 24px;214 top: 24px;215 background: #D39B6D;216 color: #1d1d1d;217 font-size: 32px;218 border-radius: 14px;219 padding: 12px 18px;220 display: flex; align-items: center; gap: 10px;221 }222 .bottom-bubble {223 position: absolute;224 left: 330px;225 bottom: 16px;226 background: #FFFFFF;227 color: #2B56D6;228 border: 3px solid #2B56D6;229 padding: 16px 24px;230 border-radius: 36px;231 display: flex;232 align-items: center;233 gap: 20px;234 font-size: 34px;235 box-shadow: 0 8px 16px rgba(0,0,0,0.12);236 }237 .discount-flag {238 position: absolute;239 right: 20px;240 bottom: 16px;241 background: #D32F2F;242 color: #fff;243 border-radius: 18px;244 overflow: hidden;245 box-shadow: 0 6px 14px rgba(0,0,0,0.15);246 }247 .discount-flag .top {248 padding: 12px 20px;249 font-size: 32px;250 font-weight: 800;251 }252 .discount-flag .mid {253 background: #FFFFFF;254 color: #9e9e9e;255 text-decoration: line-through;256 padding: 8px 20px;257 font-size: 34px;258 }259 .discount-flag .bot {260 background: #FFFFFF;261 color: #D32F2F;262 padding: 8px 20px 18px 20px;263 font-size: 44px;264 font-weight: 800;265 }266 267 .gesture {268 position: absolute;269 bottom: 20px;270 left: 50%;271 transform: translateX(-50%);272 width: 260px;273 height: 16px;274 background: #000000;275 opacity: 0.6;276 border-radius: 16px;277 }278 279 /* Simple inline SVG sizing */280 svg { width: 40px; height: 40px; }281 .big-icon svg { width: 50px; height: 50px; }282 .gray { color: #6A6F7A; }283 .pink { color: #FF4FA1; }284</style>285</head>286<body>287<div id="render-target">288 289 <!-- Status bar -->290 <div class="statusbar">291 <div>6:27</div>292 <div>◎ 🔋 100%</div>293 </div>294 295 <!-- Top bar with search pill -->296 <div class="topbar">297 <div class="icon-btn">298 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">299 <path d="M15 5L8 12l7 7"></path>300 </svg>301 </div>302 303 <div class="search-pill">304 <div class="search-texts">305 <div class="search-title">Paris (5043)</div>306 <div class="search-sub">Sun, Dec 24 - Sun, Dec 31 • 2 Guests</div>307 </div>308 <div class="big-icon">309 <svg viewBox="0 0 24 24" fill="none" stroke="#4b4b4b" stroke-width="2">310 <circle cx="11" cy="11" r="6"></circle>311 <path d="M21 21l-5-5"></path>312 </svg>313 </div>314 </div>315 316 <div class="top-actions">317 <div class="icon-btn">318 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">319 <path d="M3 6h18M5 10h14M7 14h10"></path>320 </svg>321 </div>322 <div class="icon-btn">323 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">324 <path d="M6 6h15l-2 10H7L6 6z"></path>325 <circle cx="9" cy="19" r="1.5"></circle>326 <circle cx="17" cy="19" r="1.5"></circle>327 </svg>328 </div>329 </div>330 </div>331 332 <!-- Filter bar -->333 <div class="filter-bar">334 <div class="filter-item">Filters335 <svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 9l6 6 6-6"></path></svg>336 </div>337 <div class="filter-sep"></div>338 <div class="filter-item">Price339 <svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 9l6 6 6-6"></path></svg>340 </div>341 <div class="filter-sep"></div>342 <div class="filter-item">Sort343 <svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 9l6 6 6-6"></path></svg>344 </div>345 </div>346 347 <!-- Promo banner -->348 <div class="promo">349 <svg viewBox="0 0 24 24" fill="#2E7D32">350 <path d="M3 7l7-3 10 10-4 4L6 11 3 7z"></path>351 </svg>352 <div><strong>ONE-HOUR AGODASALE!</strong> Claim now to instantly lower prices by up to 10%</div>353 <div class="claim">CLAIM</div>354 </div>355 356 <!-- Card 1 -->357 <div class="card">358 <div class="img-wrap">359 <div class="img-placeholder">[IMG: Listing Photo]</div>360 <div class="badge-count">1/5</div>361 <div class="price-flag">362 <div class="top">ONLY 1 LEFT</div>363 <div class="bottom">₹ 11,538</div>364 </div>365 </div>366 367 <div class="title-row">368 <div class="title">Appartement + Duplex Cosy et Familial</div>369 <div class="title-actions">370 <div class="icon-btn">371 <svg viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2">372 <path d="M4 12c3-3 7-3 10 0l4-4"></path>373 <circle cx="4" cy="12" r="2"></circle>374 <circle cx="14" cy="12" r="2"></circle>375 <circle cx="18" cy="8" r="2"></circle>376 </svg>377 </div>378 <div class="icon-btn">379 <svg viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">380 <path d="M12 21s-7-6-7-11a4.5 4.5 0 019 0 4.5 4.5 0 019 0c0 5-7 11-7 11"></path>381 </svg>382 </div>383 </div>384 </div>385 386 <div class="sub-info">387 <span class="pink">388 <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 17l-5 3 1-6-4-4 6-1 2-5 2 5 6 1-4 4 1 6-5-3z"></path></svg>389 </span>390 <span class="pink">391 <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 17l-5 3 1-6-4-4 6-1 2-5 2 5 6 1-4 4 1 6-5-3z"></path></svg>392 </span>393 <span class="pink">394 <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 17l-5 3 1-6-4-4 6-1 2-5 2 5 6 1-4 4 1 6-5-3z"></path></svg>395 </span>396 <span>Fontenay-sous-Bois</span>397 </div>398 399 <div class="rating-line">400 <span class="score">7.4 Very good</span> <span class="gray">19 reviews</span>401 </div>402 403 <div class="amenities">404 <div class="a-item">405 <svg viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2">406 <rect x="3" y="10" width="18" height="6"></rect>407 <rect x="4" y="8" width="5" height="2"></rect>408 </svg>409 <span>1 bedroom</span>410 </div>411 <div class="a-item">412 <svg viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2">413 <rect x="3" y="12" width="18" height="4"></rect>414 <rect x="4" y="9" width="6" height="3"></rect>415 <rect x="14" y="9" width="6" height="3"></rect>416 </svg>417 <span>2 beds</span>418 </div>419 <div class="a-item">420 <svg viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2">421 <rect x="3" y="12" width="18" height="4" rx="1"></rect>422 <path d="M5 10h4M18 10v2"></path>423 </svg>424 <span>1 bathroom</span>425 </div>426 <div class="a-item">427 <svg viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2">428 <rect x="5" y="12" width="14" height="6" rx="1"></rect>429 <path d="M8 9c1 2 3 2 4 0M14 9c1 2 3 2 4 0"></path>430 </svg>431 <span>1 kitchen</span>432 </div>433 </div>434 435 <div class="pill">Free cancellation</div>436 </div>437 438 <div class="divider"></div>439 440 <!-- Card 2 -->441 <div class="card">442 <div class="img-wrap">443 <div class="img-placeholder">[IMG: Listing Photo]</div>444 <div class="vip-tag">445 <svg viewBox="0 0 24 24" fill="#1d1d1d"><path d="M12 17l-5 3 1-6-4-4 6-1 2-5 2 5 6 1-4 4 1 6-5-3z"></path></svg>446 <strong>VIP Deal</strong>447 </div>448 <div class="badge-count">1/5</div>449 450 <div class="bottom-bubble">451 <svg viewBox="0 0 24 24" fill="none" stroke="#2B56D6" stroke-width="2">452 <path d="M12 21s-8-6-8-11a8 8 0 0116 0c0 5-8 11-8 11z"></path>453 <circle cx="12" cy="10" r="3"></circle>454 </svg>455 <span>Map</span>456 <span class="gray">|</span>457 <svg viewBox="0 0 24 24" fill="none" stroke="#2B56D6" stroke-width="2">458 <path d="M12 21s-7-6-7-11a4.5 4.5 0 019 0 4.5 4.5 0 019 0c0 5-7 11-7 11"></path>459 </svg>460 <span>Saved</span>461 </div>462 463 <div class="discount-flag">464 <div class="top">-34% TODAY</div>465 <div class="mid">₹ 198,943</div>466 <div class="bot">₹ 129,737</div>467 </div>468 </div>469 470 <div class="title-row">471 <div class="title">Sample Apartment Title With Deal</div>472 <div class="title-actions">473 <div class="icon-btn">474 <svg viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2">475 <path d="M4 12c3-3 7-3 10 0l4-4"></path>476 <circle cx="4" cy="12" r="2"></circle>477 <circle cx="14" cy="12" r="2"></circle>478 <circle cx="18" cy="8" r="2"></circle>479 </svg>480 </div>481 <div class="icon-btn">482 <svg viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">483 <path d="M12 21s-7-6-7-11a4.5 4.5 0 019 0 4.5 4.5 0 019 0c0 5-7 11-7 11"></path>484 </svg>485 </div>486 </div>487 </div>488 489 <div class="rating-line">490 <span class="score">8.9 Excellent</span> <span class="gray">123 reviews</span>491 </div>492 </div>493 494 <!-- Gesture bar -->495 <div class="gesture"></div>496</div>497</body>498</html>