GD-ML/AndroidCode

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>Search Results UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #222; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Top hero area */18  .hero {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 520px;24    background: linear-gradient(180deg, #e8c9cc 0%, #f7d7db 50%, #f7d7db 100%);25    border-bottom-left-radius: 40px;26    border-bottom-right-radius: 40px;27  }28  .hero .accent-circle {29    position: absolute;30    right: -120px;31    top: 170px;32    width: 380px;33    height: 380px;34    border-radius: 50%;35    background: radial-gradient(circle at 60% 40%, #ff8d8d, #e45454);36    opacity: 0.85;37  }38 39  /* Back button and quick actions */40  .back-btn {41    position: absolute;42    top: 120px;43    left: 40px;44    width: 110px;45    height: 110px;46    background: #fff;47    border-radius: 55px;48    box-shadow: 0 8px 16px rgba(0,0,0,0.12);49    display: flex;50    align-items: center;51    justify-content: center;52  }53  .quick-actions {54    position: absolute;55    top: 120px;56    right: 40px;57    display: flex;58    gap: 22px;59  }60  .quick-actions .bubble {61    width: 110px;62    height: 110px;63    background: #fff;64    border-radius: 55px;65    box-shadow: 0 8px 16px rgba(0,0,0,0.12);66    display: flex;67    align-items: center;68    justify-content: center;69  }70 71  /* Search title area */72  .search-header {73    position: absolute;74    top: 260px;75    left: 160px;76    right: 160px;77    color: #111;78  }79  .search-header .line1 {80    display: flex;81    align-items: baseline;82    gap: 20px;83  }84  .search-header .city {85    font-size: 64px;86    font-weight: 800;87    line-height: 1;88  }89  .search-header .count {90    font-size: 44px;91    color: #8a8d96;92    font-weight: 600;93  }94  .search-header .edit {95    font-size: 44px;96    color: #2a73ff;97    font-weight: 700;98  }99  .search-header .dates {100    margin-top: 14px;101    font-size: 32px;102    color: #4b4f58;103  }104 105  /* Filter pill row */106  .filters-row {107    position: absolute;108    top: 400px;109    left: 60px;110    width: 960px;111    height: 120px;112    background: #fff;113    border-radius: 60px;114    box-shadow: 0 10px 20px rgba(0,0,0,0.12);115    display: flex;116    align-items: center;117    justify-content: space-between;118    padding: 0 40px;119    gap: 30px;120  }121  .filters-row .segment {122    flex: 1;123    display: flex;124    align-items: center;125    justify-content: center;126    gap: 14px;127    font-size: 34px;128    color: #2c2f35;129    font-weight: 700;130  }131  .filters-row .divider {132    width: 2px;133    height: 60px;134    background: #e9eaef;135  }136 137  /* Green promo banner */138  .promo {139    position: absolute;140    top: 560px;141    left: 40px;142    width: 1000px;143    min-height: 140px;144    background: #dff4dc;145    border-radius: 24px;146    display: flex;147    align-items: center;148    padding: 26px 30px;149    gap: 24px;150    color: #185c2c;151    font-size: 40px;152    font-weight: 800;153  }154  .promo .claim {155    margin-left: auto;156    color: #2a73ff;157    font-weight: 900;158  }159  .promo .sub {160    font-weight: 600;161    color: #185c2c;162    font-size: 34px;163  }164 165  /* List area base */166  .list {167    position: absolute;168    top: 720px;169    left: 0;170    right: 0;171    padding: 0 40px 40px;172  }173 174  /* Card */175  .card {176    width: 1000px;177    background: #fff;178    border-radius: 28px;179    box-shadow: 0 8px 16px rgba(0,0,0,0.06);180    margin: 22px auto 46px;181    overflow: visible;182  }183  .card .image {184    position: relative;185    width: 100%;186    height: 520px;187    border-radius: 28px;188    overflow: hidden;189    background: #E0E0E0;190    border: 1px solid #BDBDBD;191    display: flex;192    align-items: center;193    justify-content: center;194    color: #757575;195    font-weight: 700;196    font-size: 34px;197  }198  .badge {199    position: absolute;200    top: 20px;201    left: 20px;202    background: #f2a66c;203    color: #1b1b1b;204    border-radius: 18px;205    padding: 12px 18px;206    display: flex;207    align-items: center;208    gap: 10px;209    font-size: 32px;210    font-weight: 800;211  }212  .img-count {213    position: absolute;214    bottom: 16px;215    left: 24px;216    background: rgba(0,0,0,0.55);217    color: #fff;218    border-radius: 14px;219    padding: 8px 14px;220    font-size: 28px;221    font-weight: 700;222  }223  .price-sticker {224    position: absolute;225    bottom: -36px;226    right: 20px;227    background: #fff;228    border-radius: 20px;229    box-shadow: 0 8px 18px rgba(0,0,0,0.18);230    padding: 18px 24px;231    width: 240px;232    text-align: right;233  }234  .price-sticker .old {235    color: #8a8d96;236    text-decoration: line-through;237    font-size: 28px;238    font-weight: 700;239  }240  .price-sticker .new {241    color: #e53935;242    font-size: 44px;243    font-weight: 900;244    margin-top: 6px;245  }246 247  .card .content {248    padding: 36px 26px 28px;249  }250  .card .title-row {251    display: flex;252    align-items: center;253    justify-content: space-between;254    gap: 20px;255  }256  .card .title {257    font-size: 52px;258    font-weight: 800;259    color: #16202a;260    line-height: 1.15;261    max-width: 760px;262  }263  .actions {264    display: flex;265    align-items: center;266    gap: 26px;267  }268 269  .meta {270    margin-top: 16px;271    display: flex;272    align-items: center;273    gap: 10px;274    color: #646b77;275    font-size: 32px;276    font-weight: 700;277  }278  .rating-line {279    margin-top: 16px;280    font-size: 36px;281    font-weight: 800;282    color: #2a73ff;283  }284  .rating-line span {285    color: #555c68;286    font-weight: 700;287    font-size: 32px;288  }289 290  .pill {291    display: inline-block;292    margin-top: 18px;293    background: #e2f5e0;294    color: #2e7d32;295    padding: 12px 18px;296    border-radius: 14px;297    font-size: 30px;298    font-weight: 800;299  }300  .offer-line {301    margin-top: 12px;302    color: #3a3f47;303    font-size: 30px;304    font-weight: 700;305    display: flex;306    align-items: center;307    gap: 10px;308  }309  .divider {310    height: 1px;311    background: #e6e8ee;312    margin: 18px -26px 0;313  }314 315  /* Second card preview controls */316  .map-saved {317    position: absolute;318    bottom: -30px;319    left: 50%;320    transform: translateX(-50%);321    background: #fff;322    border: 3px solid #3f72ff;323    border-radius: 36px;324    padding: 18px 28px;325    color: #2563ff;326    font-weight: 900;327    font-size: 34px;328    display: flex;329    align-items: center;330    gap: 26px;331    box-shadow: 0 10px 20px rgba(0,0,0,0.12);332  }333  .map-saved .divider-dot {334    width: 2px; height: 34px; background: #c7d2ff;335  }336  .discount-tag {337    position: absolute;338    bottom: 12px;339    right: 20px;340    background: #e53935;341    color: #fff;342    font-weight: 900;343    font-size: 30px;344    border-top-left-radius: 14px;345    border-bottom-left-radius: 14px;346    padding: 10px 18px;347  }348 349  /* Bottom home indicator bar */350  .home-indicator {351    position: absolute;352    bottom: 24px;353    left: 50%;354    transform: translateX(-50%);355    width: 240px;356    height: 12px;357    background: #111;358    border-radius: 8px;359    opacity: 0.9;360  }361 362  /* Simple helper styles for SVG icons */363  .icon { width: 44px; height: 44px; }364  .icon.small { width: 34px; height: 34px; }365  .icon.tiny { width: 26px; height: 26px; }366</style>367</head>368<body>369<div id="render-target">370 371  <div class="hero">372    <div class="accent-circle"></div>373  </div>374 375  <!-- Back button -->376  <div class="back-btn">377    <svg class="icon" viewBox="0 0 24 24">378      <path d="M15 4 L7 12 L15 20" stroke="#333" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>379    </svg>380  </div>381 382  <!-- Quick actions: currency and cart -->383  <div class="quick-actions">384    <div class="bubble">385      <svg class="icon" viewBox="0 0 24 24">386        <circle cx="8" cy="8" r="3" fill="#333"/>387        <circle cx="16" cy="16" r="3" fill="#333"/>388        <path d="M6 18 c4-5 8-9 12-12" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>389      </svg>390    </div>391    <div class="bubble">392      <svg class="icon" viewBox="0 0 24 24">393        <path d="M6 6 H20 L18 16 H8 L6 6 Z" fill="#333"/>394        <circle cx="10" cy="19" r="2" fill="#333"/>395        <circle cx="16" cy="19" r="2" fill="#333"/>396      </svg>397    </div>398  </div>399 400  <!-- Search header -->401  <div class="search-header">402    <div class="line1">403      <svg class="icon" viewBox="0 0 24 24">404        <circle cx="10" cy="10" r="7" stroke="#111" stroke-width="2.5" fill="none"/>405        <path d="M15 15 L21 21" stroke="#111" stroke-width="2.5" stroke-linecap="round"/>406      </svg>407      <div class="city">London</div>408      <div class="count">(5022)</div>409      <div class="edit">Edit</div>410    </div>411    <div class="dates">Mon, Jan 15, 2024 - Tue, Jan 16, 2024 • 1 Guest</div>412  </div>413 414  <!-- Filters pill row -->415  <div class="filters-row">416    <div class="segment">417      Filters418      <svg class="icon small" viewBox="0 0 24 24">419        <path d="M6 8 H18 M8 12 H16 M10 16 H14" stroke="#333" stroke-width="2" stroke-linecap="round"/>420      </svg>421      <svg class="icon small" viewBox="0 0 24 24">422        <path d="M6 9 L12 15 L18 9" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>423      </svg>424    </div>425    <div class="divider"></div>426    <div class="segment">427      Price428      <svg class="icon small" viewBox="0 0 24 24">429        <path d="M6 9 L12 15 L18 9" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>430      </svg>431    </div>432    <div class="divider"></div>433    <div class="segment">434      Sort435      <svg class="icon small" viewBox="0 0 24 24">436        <path d="M6 9 L12 15 L18 9" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>437      </svg>438    </div>439  </div>440 441  <!-- Promo banner -->442  <div class="promo">443    <svg class="icon" viewBox="0 0 24 24">444      <path d="M3 7 L13 7 L20 14 L14 20 L7 13 L7 3 Z" fill="#1a7b41"/>445      <circle cx="8" cy="10" r="2" fill="#dff4dc"/>446    </svg>447    <div>448      ONE-HOUR AGODASALE! Claim now449      <div class="sub">to instantly lower prices by up to 10%</div>450    </div>451    <div class="claim">CLAIM</div>452  </div>453 454  <!-- List of cards -->455  <div class="list">456 457    <!-- Card 1 -->458    <div class="card">459      <div class="image">460        [IMG: Hotel Building Exterior]461        <div class="badge">462          <svg class="icon tiny" viewBox="0 0 24 24">463            <path d="M12 3 L15 9 L22 9 L16.5 13 L18.8 20 L12 16 L5.2 20 L7.5 13 L2 9 L9 9 Z" fill="#333"/>464          </svg>465          VIP Deal466        </div>467        <div class="img-count">1/5</div>468        <div class="price-sticker">469          <div class="old">₹ 36,108</div>470          <div class="new">₹ 4,824</div>471        </div>472      </div>473      <div class="content">474        <div class="title-row">475          <div class="title">Berjaya Eden Park London Hotel</div>476          <div class="actions">477            <svg class="icon" viewBox="0 0 24 24">478              <circle cx="6" cy="12" r="2" fill="#61666f"/>479              <circle cx="12" cy="8" r="2" fill="#61666f"/>480              <circle cx="18" cy="4" r="2" fill="#61666f"/>481              <path d="M7.6 11 L10.8 9.6 L16.2 6.8" stroke="#61666f" stroke-width="2" fill="none" stroke-linecap="round"/>482            </svg>483            <svg class="icon" viewBox="0 0 24 24">484              <path d="M12 21 C12 21 4 15 4 9 A4 4 0 0 1 12 8 A4 4 0 0 1 20 9 C20 15 12 21 12 21 Z" fill="none" stroke="#8a8d96" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>485            </svg>486          </div>487        </div>488 489        <div class="meta">490          <svg class="icon tiny" viewBox="0 0 24 24">491            <path d="M12 2 C8 2 6 5 6 8 C6 12 12 20 12 20 C12 20 18 12 18 8 C18 5 16 2 12 2 Z" fill="none" stroke="#777" stroke-width="2"/>492            <circle cx="12" cy="8" r="2.5" fill="#777"/>493          </svg>494          Hyde Park - City center495        </div>496 497        <div class="rating-line">7.1 Very good <span>3,524 reviews</span></div>498 499        <div class="pill">Free cancellation</div>500        <div class="offer-line">501          <svg class="icon tiny" viewBox="0 0 24 24">502            <path d="M3 7 L13 7 L20 14 L14 20 L7 13 L7 3 Z" fill="#555"/>503            <circle cx="8" cy="10" r="2" fill="#fff"/>504          </svg>505          WELCOMETOAGODA - ₹ 1,447 off!506        </div>507 508        <div class="divider"></div>509      </div>510    </div>511 512    <!-- Card 2 (partial view) -->513    <div class="card">514      <div class="image" style="height: 520px;">515        [IMG: Historic Hotel at Dusk]516        <div class="map-saved">517          <svg class="icon small" viewBox="0 0 24 24">518            <path d="M12 2 C8 2 6 5 6 8 C6 12 12 20 12 20 C12 20 18 12 18 8 C18 5 16 2 12 2 Z" fill="none" stroke="#2563ff" stroke-width="2"/>519            <circle cx="12" cy="8" r="2.5" fill="#2563ff"/>520          </svg>521          Map522          <div class="divider-dot"></div>523          <svg class="icon small" viewBox="0 0 24 24">524            <path d="M12 21 C12 21 4 15 4 9 A4 4 0 0 1 12 8 A4 4 0 0 1 20 9 C20 15 12 21 12 21 Z" fill="none" stroke="#2563ff" stroke-width="2"/>525          </svg>526          Saved527        </div>528        <div class="discount-tag">-47% TODAY</div>529        <div class="img-count">1/5</div>530      </div>531    </div>532 533  </div>534 535  <div class="home-indicator"></div>536</div>537</body>538</html>