GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Booking List - Mock</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; color:#222; }8  #render-target {9    width:1080px; height:2400px; position:relative; overflow:hidden;10    background:#ffffff;11  }12 13  /* Top header */14  .header {15    position:absolute; left:0; top:0; width:100%; height:220px;16    background:#0b3a84; color:#fff;17  }18  .statusbar {19    height:70px; padding:0 32px; display:flex; align-items:center; justify-content:space-between;20    font-size:40px; letter-spacing:0.5px;21  }22  .status-right { display:flex; align-items:center; gap:26px; }23  .searchbar {24    position:absolute; left:28px; top:108px; width:1024px; height:120px;25    background:#fff; border:8px solid #f1c24f; border-radius:28px;26    box-sizing:border-box; display:flex; align-items:center; padding:0 30px; color:#333;27    box-shadow:0 2px 0 rgba(0,0,0,0.04);28    font-size:44px; font-weight:600;29  }30  .searchbar .arrow { margin-right:22px; }31  .searchbar .subtitle { font-weight:500; color:#444; }32 33  /* Actions row */34  .actions {35    position:absolute; left:0; top:240px; width:100%; background:#fff;36    padding:30px 36px; box-sizing:border-box; display:flex; gap:120px; align-items:center;37    border-bottom:1px solid #e6e6e6;38    font-size:40px;39  }40  .action { display:flex; align-items:center; gap:18px; color:#333; }41  .action svg { width:40px; height:40px; }42 43  /* Content area */44  .content {45    position:absolute; left:0; right:0; top:332px; bottom:0;46    overflow:hidden auto; padding:24px 32px 40px; box-sizing:border-box;47  }48  .count { font-size:40px; color:#444; margin:10px 4px 24px; }49 50  .listing {51    display:flex; gap:28px; padding:22px; border-radius:16px; background:#fff;52    border:1px solid #e2e2e2; box-sizing:border-box; margin-bottom:28px;53  }54  .photo {55    width:320px; height:360px; background:#E0E0E0; border:1px solid #BDBDBD;56    display:flex; justify-content:center; align-items:center; color:#757575; font-size:32px; border-radius:12px;57  }58  .details { flex:1; position:relative; }59  .heart {60    position:absolute; right:10px; top:4px; width:50px; height:50px; opacity:0.8;61  }62  .title { font-size:48px; font-weight:700; margin-bottom:16px; }63  .chips { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }64  .chip-yellow { background:#f1c24f; color:#fff; border-radius:8px; padding:8px 14px; font-weight:700; font-size:30px; }65  .chip-blue { background:#1e5fd8; color:#fff; border-radius:10px; padding:8px 16px; font-weight:700; font-size:30px; }66  .badge-rating { display:inline-flex; align-items:center; gap:12px; margin-bottom:12px; }67  .rating-box { background:#1e5fd8; color:#fff; border-radius:10px; padding:8px 16px; font-weight:800; font-size:36px; }68  .rating-text { font-size:40px; font-weight:700; color:#222; }69  .rating-reviews { font-size:36px; color:#555; }70  .row { display:flex; align-items:flex-start; gap:16px; margin:8px 0; color:#555; font-size:36px; }71  .row svg { width:40px; height:40px; flex:0 0 40px; }72  .green-tag { display:inline-block; background:#2f7d37; color:#fff; border-radius:10px; padding:8px 16px; font-size:34px; font-weight:700; margin:10px 0 16px; }73  .desc { font-size:34px; color:#444; line-height:1.35; margin-bottom:16px; }74  .price-title { font-size:42px; font-weight:700; margin:8px 0; }75  .price-row { display:flex; align-items:baseline; gap:16px; }76  .old-price { color:#c44; text-decoration:line-through; font-size:38px; }77  .new-price { font-size:56px; font-weight:800; color:#111; }78  .small-gray { font-size:34px; color:#777; margin-top:4px; }79  .credit-button { display:inline-block; background:#2f7d37; color:#fff; border-radius:10px; padding:10px 16px; font-size:34px; font-weight:700; margin-top:8px; }80  .free-cancel { color:#2f7d37; font-size:36px; font-weight:700; display:flex; align-items:center; gap:10px; margin-top:12px; }81 82  /* Info banner */83  .info-banner {84    display:flex; align-items:flex-start; gap:20px; border:1px solid #e4e4e4; border-radius:16px;85    padding:24px; margin:18px 0 30px; background:#fafafa;86  }87  .dot-yellow { width:36px; height:36px; background:#f1c24f; border-radius:50%; margin-top:6px; }88  .banner-text { flex:1; font-size:36px; color:#444; line-height:1.35; }89  .close { width:44px; height:44px; }90  .learn { color:#1e5fd8; font-size:42px; font-weight:700; margin-top:18px; }91 92  /* Second listing tweaks */93  .ribbon {94    position:absolute; left:0; top:0; background:#2f7d37; color:#fff; padding:10px 16px; font-size:32px; border-radius:10px 10px 10px 0;95  }96  .stars { display:flex; gap:8px; align-items:center; margin:10px 0 6px; }97  .star { width:38px; height:38px; color:#f1c24f; }98  .ad-tag { background:#e9eefc; color:#111; border:1px solid #cbd4f7; padding:6px 12px; border-radius:8px; font-size:28px; font-weight:700; }99 100  /* Simple helpers */101  .muted { color:#666; }102</style>103</head>104<body>105<div id="render-target">106 107  <!-- Header with status bar -->108  <div class="header">109    <div class="statusbar">110      <div>3:02</div>111      <div class="status-right">112        <!-- simple dots/icons -->113        <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="3"/></svg>114        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M2 18h20M6 18V8h12v10"/></svg>115        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M4 12c4-8 12-8 16 0M8 12c2-4 6-4 8 0M12 12h0"/></svg>116        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M7 7h10v10H7z"/><path d="M17 7l2-3"/></svg>117      </div>118    </div>119 120    <div class="searchbar">121      <div class="arrow">122        <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">123          <path d="M15 18l-6-6 6-6"/>124        </svg>125      </div>126      <div>Budapest · <span class="subtitle">Aug 2 - Aug 6</span></div>127    </div>128  </div>129 130  <!-- Action buttons row -->131  <div class="actions">132    <div class="action">133      <svg viewBox="0 0 24 24" stroke="#333" stroke-width="2" fill="none"><path d="M6 9l-2 2 2 2M18 9l2 2-2 2M9 6l2-2 2 2M9 18l2 2 2-2"/></svg>134      <div>Sort</div>135    </div>136    <div class="action">137      <svg viewBox="0 0 24 24" stroke="#333" stroke-width="2" fill="none"><path d="M4 6h16M8 12h8M11 18h2"/></svg>138      <div>Filter</div>139    </div>140    <div class="action">141      <svg viewBox="0 0 24 24" stroke="#333" stroke-width="2" fill="none"><path d="M12 21l-6-8V5h12v8z"/><circle cx="12" cy="10" r="2" fill="#333"/></svg>142      <div>Map</div>143    </div>144  </div>145 146  <!-- Scrollable content -->147  <div class="content">148    <div class="count">1546 properties</div>149 150    <!-- First property -->151    <div class="listing">152      <div class="photo">[IMG: Bedroom Photo]</div>153      <div class="details">154        <svg class="heart" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2">155          <path d="M12 21s-7-4.6-9-8.6C1.3 9.2 3.2 6 6.5 6c2 0 3.2 1.1 3.5 2 0.3-0.9 1.5-2 3.5-2 3.3 0 5.2 3.2 3.5 6.4C19 16.4 12 21 12 21z"/>156        </svg>157        <div class="title">Harmonia Palace</div>158 159        <div class="chips">160          <div class="chip-yellow">⬜</div>161          <div class="chip-yellow">⬜</div>162          <div class="chip-yellow">⬜</div>163          <div class="chip-yellow">👍</div>164          <div class="chip-yellow">➕</div>165          <div class="chip-blue">Genius</div>166        </div>167 168        <div class="badge-rating">169          <div class="rating-box">9.4</div>170          <div class="r