GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>IndiGo Hotel List UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7  #render-target { width: 1080px; height: 2400px; position: relative; overflow: hidden; background: #ffffff; }8 9  /* Header / Status */10  .header { position: relative; width: 100%; height: 170px; background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,0.06); }11  .status { display: flex; justify-content: space-between; align-items: center; padding: 20px 30px; color: #444; font-size: 34px; }12  .logo { text-align: center; font-weight: 600; color: #1636a0; font-size: 64px; letter-spacing: 0.5px; }13  .logo .plane { color: #1636a0; font-size: 48px; margin-left: 10px; }14  .close-btn { position: absolute; left: 28px; top: 68px; font-size: 56px; color: #5f5f5f; }15 16  /* Search area */17  .search-area { background: #0c2f88; padding: 30px 26px; }18  .search-card { background: #ffffff; border-radius: 14px; padding: 26px; }19  .search-row { display: flex; align-items: center; font-size: 42px; color: #111; }20  .icon { width: 42px; height: 42px; margin-right: 16px; }21  .sub-row { display: flex; margin-top: 20px; font-size: 36px; color: #333; align-items: center; }22  .sub-chip { display: flex; align-items: center; margin-right: 28px; }23 24  /* Filter pills */25  .filters { display: flex; padding: 20px 26px; background: #fff; }26  .pill { border: 1px solid #d4d4d4; border-radius: 14px; padding: 22px 26px; margin-right: 18px; font-size: 38px; color: #222; background: #fff; display: flex; align-items: center; }27  .pill .chev { margin-left: 12px; color: #777; }28 29  /* List area / cards */30  .list-area { background: #fff; padding: 10px 0 0 0; }31  .card { display: flex; padding: 24px; position: relative; }32  .card + .card { border-top: 1px solid #eee; }33  .img, .small-img { width: 260px; background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; justify-content: center; align-items: center; color: #757575; text-align: center; }34  .img { height: 620px; font-size: 32px; }35  .small-img { height: 520px; font-size: 30px; }36  .details { flex: 1; padding-left: 26px; }37  .title { font-size: 46px; font-weight: 700; color: #111; line-height: 1.24; }38  .subtitle { font-size: 40px; font-weight: 700; color: #111; }39 40  .rating-row { margin-top: 12px; display: flex; align-items: center; font-size: 34px; color: #555; }41  .badge { background: #0c56c9; color: #fff; font-weight: 700; font-size: 34px; border-radius: 12px; padding: 8px 16px; margin-right: 14px; }42  .location { display: flex; align-items: center; margin-top: 14px; font-size: 34px; color: #333; }43  .sustainable { margin-top: 12px; font-size: 34px; color: #2e7d32; }44  .deal { display: inline-block; background: #2e7d32; color: #fff; font-weight: 700; font-size: 34px; border-radius: 12px; padding: 10px 18px; margin-top: 20px; }45 46  .price-block { margin-top: 26px; font-size: 38px; color: #111; }47  .old-price { text-decoration: line-through; color: #d32f2f; margin-right: 12px; }48  .new-price { font-weight: 800; font-size: 54px; }49  .tax { color: #555; font-size: 32px; margin-top: 8px; }50  .price-small { font-size: 42px; font-weight: 800; color: #111; }51 52  .inclusions { margin-top: 18px; font-size: 36px; color: #0d5b1f; line-height: 1.6; }53  .check { color: #23a559; margin-right: 8px; }54  .pay-line { color: #333; font-size: 34px; }55 56  .chevron { color: #999; font-size: 56px; }57 58  .star { color: #f6b80b; font-size: 40px; margin-right: 6px; }59  .feature { background: #eee; border-radius: 10px; padding: 10px 14px; margin-left: 16px; font-size: 30px; color: #333; }60  .icon-round { width: 40px; height: 40px; background: #eee; border-radius: 20px; display: inline-block; margin-left: 12px; text-align: center; line-height: 40px; }61 62  .map-btn { position: absolute; left: 320px; bottom: 340px; width: 420px; height: 140px; background: #1a5ae8; border-radius: 20px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 48px; box-shadow: 0 10px 24px rgba(0,0,0,0.25); }63  .map-btn svg { margin-right: 16px; }64 65  .footer-space { height: 320px; }66</style>67</head>68<body>69<div id="render-target">70  <!-- Header with Status Bar -->71  <div class="header">72    <div class="status">73      <div>3:08</div>74      <div>📶 🔋</div>75    </div>76    <div class="close-btn">×</div>77    <div class="logo">IndiGo <span class="plane">✈️</span></div>78  </div>79 80  <!-- Search Section -->81  <div class="search-area">82    <div class="search-card">83      <div class="search-row">84        <svg class="icon" viewBox="0 0 24 24">85          <circle cx="10" cy="10" r="7" stroke="#3a3a3a" stroke-width="2" fill="none"></circle>86          <line x1="15" y1="15" x2="22" y2="22" stroke="#3a3a3a" stroke-width="2"></line>87        </svg>88        <div style="flex:1; font-weight:600;">Srinagar</div>89      </div>90      <div class="sub-row">91        <div class="sub-chip">92          <svg class="icon" viewBox="0 0 24 24">93            <rect x="3" y="4" width="18" height="16" rx="2" stroke="#3a3a3a" stroke-width="2" fill="none"></rect>94            <line x1="3" y1="9" x2="21" y2="9" stroke="#3a3a3a" stroke-width="2"></line>95          </svg>96          <span>10 Aug - 15 Aug <strong>(5 nights)</strong></span>97        </div>98        <div class="sub-chip">99          <svg class="icon" viewBox="0 0 24 24">100            <circle cx="12" cy="8" r="4" stroke="#3a3a3a" stroke-width="2" fill="none"></circle>101            <path d="M4 20c0-4 4-6 8-6s8 2 8 6" stroke="#3a3a3a" stroke-width="2" fill="none"></path>102          </svg>103          <span>1 adult</span>104        </div>105      </div>106    </div>107  </div>108 109  <!-- Filter Pills -->110  <div class="filters">111    <div class="pill">112      <svg class="icon" viewBox="0 0 24 24">113        <path d="M3 5h18M6 12h12M9 19h6" stroke="#555" stroke-width="2" fill="none"></path>114      </svg>115      Filters <span class="chev">⌄</span>116    </div>117    <div class="pill">118      <svg class="icon" viewBox="0 0 24 24">119        <path d="M12 4v16M4 12h16" stroke="#555" stroke-width="2" fill="none"></path>120      </svg>121      Sort <span class="chev">⌄</span>122    </div>123    <div class="pill">Type of place <span class="chev">⌄</span></div>124    <div class="pill">Free c…</div>125  </div>126 127  <!-- Listing Cards -->128  <div class="list-area">129    <!-- First card: Houseboats -->130    <div class="card">131      <div class="img">[IMG: Houseboat at Dal Lake]</div>132      <div class="details">133        <div class="title">The Heritage Plato Group Of HouseBoats</div>134        <div class="rating-row">135          <div class="badge">9.1</div>136          Superb · 35 reviews137          <div style="margin-left:auto;" class="chevron">›</div>138        </div>139        <div class="location">📍 Dal Lake, Srinagar · 3.8 km from centre</div>140        <div class="sustainable">Travel Sustainable Level 2</div>141        <div class="deal">Limited-time Deal</div>142 143        <div class="price-block">144          Price for 5 nights:145          <div style="margin-top:8px;">146            <span class="old-price">₹ 21,500</span>147            <span class="new-price">₹ 12,900</span>148          </div>149          <div class="tax">+₹ 1,548 taxes and charges</div>150        </div>151 152        <div class="inclusions">153          <div><span class="check">✔</span>Breakfast included</div>154          <div><span class="check">✔</span>Free cancellation</div>155          <div><span class="check">✔</span>No prepayment needed</div>156          <div class="pay-line">– pay at the property</div>157        </div>158      </div>159    </div>160 161    <!-- Second card: Hotel New Sahil -->162    <div class="card">163      <div class="small-img">[IMG: Hotel building facade]</div>164      <div class="details">165        <div class="subtitle">hotel new sahil</div>166        <div style="margin-top:10px; display:flex; align-items:center; font-size:36px; color:#555;">167          <span class="star">★ ★ ★ ★ ★</span>168          <div class="feature">Featured</div>169          <div class="icon-round">👍</div>170          <div class="icon-round">💬</div>171          <div style="margin-left:auto;" class="chevron">›</div>172        </div>173        <div class="rating-row" style="margin-top:12px;">174          <div class="badge" style="background:#0c56c9;">8.8</div>175          Fabulous · 22 reviews176        </div>177        <div class="location">📍 Srinagar · 7.6 km from centre</div>178 179        <div class="price-block" style="margin-top:24px;">180          Price for 5 nights: <span class="price-small">₹ 5,000</span>181          <div class="tax">+₹ 600 taxes and charges</div>182        </div>183 184        <div class="inclusions" style="margin-top:16px;">185          <div><span class="check">✔</span>Free cancellation</div>186          <div><span class="check">✔</span>No prepayment needed</div>187        </div>188      </div>189    </div>190 191    <div class="footer-space"></div>192  </div>193 194  <!-- Floating Map Button -->195  <div class="map-btn">196    <svg width="54" height="54" viewBox="0 0 24 24">197      <path d="M4 6l6-2 6 2 4-2v14l-4 2-6-2-6 2V6z" fill="none" stroke="#fff" stroke-width="2"></path>198      <circle cx="12" cy="12" r="3" fill="none" stroke="#fff" stroke-width="2"></circle>199    </svg>200    Map201  </div>202</div>203</body>204</html>