GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Hawaii Hotels Listing</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  :root{9    --bg:#f2f2f2;10    --text:#222;11    --muted:#6b6b6b;12    --primary:#1677ff;13    --chip:#e9edf3;14    --green:#2ecc71;15    --teal:#0aaeb0;16    --card-bg:#fff;17    --border:#e0e0e0;18  }19  body{ margin:0; padding:0; background:transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color:var(--text); }20  #render-target{21    width:1080px; height:2400px;22    position:relative; overflow:hidden;23    background:var(--bg);24    border-radius:36px;25    box-shadow:0 8px 30px rgba(0,0,0,0.08);26  }27  /* Status bar */28  .status-bar{29    height:92px; display:flex; align-items:center; justify-content:space-between;30    padding:0 36px; font-size:34px; color:#444;31  }32  .status-left{ display:flex; align-items:center; gap:20px; }33  .status-right{ display:flex; align-items:center; gap:26px; }34  .icon{ width:40px; height:40px; }35  /* Header search card */36  .header-area{ padding:12px 30px 0 30px; }37  .search-bar{38    background:#fff; border-radius:26px; box-shadow:0 6px 16px rgba(0,0,0,0.06);39    padding:26px 28px; display:flex; align-items:center; justify-content:space-between;40  }41  .search-left{ display:flex; align-items:flex-start; gap:22px; }42  .title-block{ line-height:1.25; }43  .title-block .title{ font-weight:800; font-size:46px; }44  .title-block .subtitle{ font-size:32px; color:var(--muted); margin-top:4px; }45  .edit-link{ display:flex; align-items:center; gap:10px; color:var(--primary); font-weight:700; font-size:34px; padding:8px 18px; border-radius:18px; background:#f5f9ff; }46  .header-actions{ display:flex; align-items:center; justify-content:flex-end; gap:24px; padding:20px 6px 0 6px; }47  .text-link{ display:flex; align-items:center; gap:12px; color:var(--primary); font-weight:700; font-size:34px; padding:14px 22px; border-radius:22px; background:#eef5ff; }48  /* Filter pills */49  .filters{ padding:24px 30px; display:flex; gap:22px; flex-wrap:wrap; }50  .pill{51    background:#fff; border:1px solid #e8e8e8; border-radius:24px;52    padding:18px 26px; font-size:34px; color:#333; display:flex; align-items:center; gap:14px;53    box-shadow:0 2px 8px rgba(0,0,0,0.04);54  }55  /* Section title */56  .section-title{ padding:12px 30px; font-weight:900; font-size:52px; }57  /* Cards */58  .card{59    margin:24px 30px; background:var(--card-bg); border-radius:26px;60    box-shadow:0 10px 22px rgba(0,0,0,0.07); overflow:hidden;61  }62  .card-image{63    position:relative; padding:16px;64  }65  .img-placeholder{66    width:100%; height:420px;67    background:#E0E0E0; border:1px solid #BDBDBD;68    display:flex; align-items:center; justify-content:center; color:#757575; font-size:36px; border-radius:22px;69  }70  .heart{71    position:absolute; right:32px; top:26px; width:80px; height:80px; border-radius:40px;72    background:rgba(0,0,0,0.35); display:flex; align-items:center; justify-content:center;73  }74  .dots{ position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); background:#fff; border-radius:16px; padding:8px 18px; display:flex; gap:12px; box-shadow:0 6px 12px rgba(0,0,0,0.08); }75  .dot{ width:12px; height:12px; background:#c9c9c9; border-radius:50%; }76  .dot.active{ background:#1e88e5; }77  .card-body{ padding:24px 26px 28px 26px; }78  .rating-row{ display:flex; align-items:center; gap:16px; font-size:32px; margin-bottom:16px; }79  .rating-chip{ display:flex; align-items:center; gap:12px; background:#d8f9e6; color:#1b9c58; padding:10px 16px; border-radius:16px; font-weight:800; }80  .hotel-title{ font-size:48px; font-weight:900; letter-spacing:0.2px; display:flex; align-items:center; gap:10px; }81  .muted{ color:var(--muted); font-size:32px; margin-top:8px; }82  .row-between{ display:flex; justify-content:space-between; align-items:flex-start; }83  .price{ text-align:right; }84  .price .value{ font-size:48px; font-weight:900; }85  .price .note{ font-size:28px; color:var(--muted); margin-top:8px; }86  .facilities{ font-size:34px; margin-top:18px; }87  .pay{ display:flex; align-items:center; gap:12px; color:#0aaeb0; font-weight:800; font-size:34px; margin-top:16px; }88  /* Second card minimal preview */89  .pattern-image .img-placeholder{ height:380px; }90  /* Map view button */91  .map-view{92    position:absolute; right:36px; bottom:240px;93    padding:26px 34px; border-radius:36px;94    background:linear-gradient(135deg, #ff7a59, #ff4b8b);95    color:#fff; display:flex; align-items:center; gap:18px;96    box-shadow:0 12px 26px rgba(255,75,139,0.35);97    font-weight:900; font-size:40px;98  }99  /* Home indicator */100  .home-indicator{101    position:absolute; bottom:32px; left:50%; transform:translateX(-50%);102    width:360px; height:14px; background:#000; border-radius:7px; opacity:0.8;103  }104  /* Simple helper icons inside pills */105  .pill svg{ width:34px; height:34px; }106</style>107</head>108<body>109<div id="render-target">110 111  <!-- Status Bar -->112  <div class="status-bar">113    <div class="status-left">114      <div>11:46</div>115      <div style="font-size:30px; color:#888;">68°</div>116      <svg class="icon" viewBox="0 0 24 24"><path d="M4 12l6 6 10-12" fill="none" stroke="#666" stroke-width="2"/></svg>117      <svg class="icon" viewBox="0 0 24 24"><path d="M3 5h18M3 12h18M3 19h18" stroke="#666" stroke-width="2" fill="none"/></svg>118      <svg class="icon" viewBox="0 0 24 24"><path d="M12 2l6 6-10 10H2V12L12 2z" fill="none" stroke="#666" stroke-width="2"/></svg>119      <div style="opacity:.6;">•</div>120    </div>121    <div class="status-right">122      <svg class="icon" viewBox="0 0 24 24"><path d="M9 2l9 9-9 9" fill="none" stroke="#666" stroke-width="2"/></svg>123      <svg class="icon" viewBox="0 0 24 24"><rect x="2" y="6" width="18" height="12" rx="2" stroke="#666" stroke-width="2" fill="none"/><rect x="20" y="10" width="2" height="4" fill="#666"/></svg>124    </div>125  </div>126 127  <!-- Header -->128  <div class="header-area">129    <div class="search-bar">130      <div class="search-left">131        <svg class="icon" viewBox="0 0 24 24"><path d="M15 4L7 12l8 8" stroke="#333" stroke-width="2" fill="none"/></svg>132        <div class="title-block">133          <div class="title">Hawaii</div>134          <div class="subtitle">03 Nov - 04 Nov, 1 Room, 2 Guests</div>135        </div>136      </div>137      <div class="edit-link">138        <svg viewBox="0 0 24 24" width="32" height="32"><path d="M3 17l1-4 11-11 4 4-11 11-4 1z" fill="none" stroke="#1677ff" stroke-width="2"/></svg>139        <span>Edit</span>140      </div>141    </div>142    <div class="header-actions">143      <div class="text-link">144        <svg viewBox="0 0 24 24" width="36" height="36"><circle cx="10" cy="10" r="7" stroke="#1677ff" stroke-width="2" fill="none"/><path d="M16 16l6 6" stroke="#1677ff" stroke-width="2"/></svg>145        <span>Search</span>146      </div>147    </div>148  </div>149 150  <!-- Filters -->151  <div class="filters">152    <div class="pill">153      <svg viewBox="0 0 24 24"><path d="M7 4l-3 4h16M7 20l-3-4h16" fill="none" stroke="#555" stroke-width="2"/></svg>154      <span>Sort By</span>155      <svg viewBox="0 0 24 24"><path d="M8 10l4 4 4-4" stroke="#666" stroke-width="2" fill="none"/></svg>156    </div>157    <div class="pill">158      <svg viewBox="0 0 24 24"><path d="M4 6h10M4 12h16M4 18h6" stroke="#555" stroke-width="2" fill="none"/><circle cx="14" cy="6" r="2" fill="#555"/><circle cx="10" cy="12" r="2" fill="#555"/><circle cx="8" cy="18" r="2" fill="#555"/></svg>159      <span>All Filters</span>160    </div>161    <div class="pill">162      <svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" stroke="#555" fill="none" stroke-width="2"/></svg>163      <span>Star Rating</span>164      <svg viewBox="0 0 24 24"><path d="M8 10l4 4 4-4" stroke="#666" stroke-width="2" fill="none"/></svg>165    </div>166    <div class="pill">167      <span>Popular</span>168      <svg viewBox="0 0 24 24"><path d="M8 10l4 4 4-4" stroke="#666" stroke-width="2" fill="none"/></svg>169    </div>170  </div>171 172  <!-- Section Title -->173  <div class="section-title">Showing Properties in Hawaii</div>174 175  <!-- Card 1 -->176  <div class="card">177    <div class="card-image">178      <div class="img-placeholder">[IMG: Hotel Room Interior]</div>179      <div class="heart">180        <svg viewBox="0 0 24 24" width="40" height="40"><path d="M12 21s-7-4.35-9-8c-1.5-2.6.3-6 3.5-6 2 0 3.5 1.4 4.5 3 1-1.6 2.5-3 4.5-3 3.2 0 5 3.4 3.5 6-2 3.65-9 8-9 8z" fill="none" stroke="#fff" stroke-width="2"/></svg>181      </div>182      <div class="dots">183        <div class="dot active"></div>184        <div class="dot"></div>185        <div class="dot"></div>186      </div>187    </div>188    <div class="card-body">189      <div class="rating-row">190        <div class="rating-chip">191          <svg viewBox="0 0 24 24" width="28" height="28"><circle cx="12" cy="12" r="10" fill="#1b9c58"/></svg>192          <span>3.0</span>193        </div>194        <div>(197 Ratings)</div>195      </div>196 197      <div class="row-between">198        <div>199          <div class="hotel-title">Hilo Reeds Bay Hotel ★★★★☆</div>200          <div class="muted">Hilo | 2.9 km from Hilo Airport, HI (ITO-Hilo Intl.)</div>201        </div>202        <div class="price">203          <div class="value">₹ 11,157</div>204          <div class="note">+ ₹ 2,004 taxes & fees<br>Per Night</div>205        </div>206      </div>207 208      <div class="facilities">Swimming Pool | Snorkelling | Canoeing</div>209      <div class="pay">210        <svg viewBox="0 0 24 24" width="32" height="32"><path d="M4 12l5 5 11-11" stroke="#0aaeb0" stroke-width="2" fill="none"/></svg>211        <span>Pay at Hotel</span>212      </div>213    </div>214  </div>215 216  <!-- Card 2 (partial) -->217  <div class="card">218    <div class="card-image pattern-image">219      <div class="img-placeholder">[IMG: Property Pattern Placeholder]</div>220      <div class="heart">221        <svg viewBox="0 0 24 24" width="40" height="40"><path d="M12 21s-7-4.35-9-8c-1.5-2.6.3-6 3.5-6 2 0 3.5 1.4 4.5 3 1-1.6 2.5-3 4.5-3 3.2 0 5 3.4 3.5 6-2 3.65-9 8-9 8z" fill="none" stroke="#fff" stroke-width="2"/></svg>222      </div>223      <div class="dots">224        <div class="dot active"></div>225        <div class="dot"></div>226        <div class="dot"></div>227      </div>228    </div>229    <div class="card-body" style="padding-top:22px;">230      <div class="hotel-title">Mahana House Country Inn</div>231      <div class="muted" style="margin-top:10px;">Kids Play Area</div>232    </div>233  </div>234 235  <!-- Floating Map View -->236  <div class="map-view">237    <svg viewBox="0 0 24 24" width="40" height="40"><path d="M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13s-7-8-7-13a7 7 0 0 1 7-7z" fill="none" stroke="#fff" stroke-width="2"/><circle cx="12" cy="9" r="2.5" fill="#fff"/></svg>238    <span>Map View</span>239  </div>240 241  <!-- Home indicator -->242  <div class="home-indicator"></div>243</div>244</body>245</html>