GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8">4<title>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;color:#222;}7  #render-target{8    width:1080px;height:2400px;position:relative;overflow:hidden;9    background:#f3f4f6;10  }11 12  /* Status bar */13  .status-bar{height:90px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;color:#222;font-size:34px;}14  .status-right{display:flex;gap:22px;align-items:center;}15  .icon-signal,.icon-battery{width:38px;height:24px;border:2px solid #333;border-radius:4px;position:relative;}16  .icon-signal:before{content:"";position:absolute;left:3px;right:10px;top:3px;bottom:3px;background:#333;}17  .icon-battery:after{content:"";position:absolute;right:-10px;top:6px;width:8px;height:12px;border:2px solid #333;border-left:none;border-radius:2px;}18  .close-x{position:absolute;left:36px;top:130px;font-size:50px;color:#666;}19 20  /* Top app bar */21  .app-bar{height:118px;background:#ffffff;display:flex;align-items:center;padding:0 28px;border-bottom:1px solid #e6e6e6;}22  .logo{font-weight:700;color:#1648ff;font-size:48px;letter-spacing:1px;}23  .logo small{font-size:44px;color:#1650ff;opacity:.9;margin-left:8px;}24 25  /* Banner / slider placeholder */26  .banner{height:180px;background:#e0e0e0;border:1px solid #bdbdbd;margin:14px 20px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#666;font-size:34px;}27 28  /* Card common */29  .card{background:#fff;border:1px solid #e3e3e3;border-radius:16px;margin:18px 20px;padding:18px;display:flex;gap:20px;position:relative;}30  .thumb{width:320px;border:1px solid #bdbdbd;background:#e0e0e0;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#6b7280;text-align:center;padding:10px;}31  .content{flex:1;min-width:0;}32  .title{font-size:44px;font-weight:700;margin:4px 0 6px;}33  .stars{color:#f5b300;font-size:32px;margin-right:10px;}34  .badge{display:inline-block;background:#eef2ff;color:#4f46e5;border:1px solid #dbe4ff;padding:6px 14px;border-radius:12px;font-size:28px;margin-left:8px;}35  .mini-btn{display:inline-block;background:#ffe8a3;color:#9a6a00;border:1px solid #f3d580;padding:6px 10px;border-radius:10px;font-size:26px;margin-left:6px;}36  .score{display:inline-block;background:#1e40af;color:#fff;border-radius:10px;padding:4px 10px;font-size:30px;margin-right:8px;}37  .subline{color:#6b7280;font-size:30px;margin:10px 0;}38  .location{display:flex;gap:6px;align-items:center;color:#374151;font-size:30px;margin:8px 0;}39  .dot{width:10px;height:10px;background:#374151;border-radius:50%;}40  .price-line{font-size:36px;margin:18px 0 6px;}41  .price-line .big{font-weight:800;font-size:44px;}42  .tax{color:#6b7280;font-size:28px;margin-bottom:8px;}43  .green{color:#149d38;font-size:32px;margin:6px 0;display:flex;align-items:center;gap:10px;}44  .green svg{width:26px;height:26px;fill:#149d38;}45  .pay{color:#149d38;font-size:32px;margin-top:2px;}46  .chev{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:52px;color:#9ca3af;}47 48  .deal{display:inline-block;background:#0ea5e9;color:white;padding:10px 18px;border-radius:14px;font-size:30px;margin:12px 0;}49  .strike{color:#b91c1c;text-decoration:line-through;margin-right:14px;}50  .newprice{font-size:46px;font-weight:800;}51  .included{color:#149d38;font-weight:700;font-size:34px;margin:10px 0 0;}52 53  /* Floating Map button */54  .map-fab{55    position:absolute;left:50%;transform:translateX(-50%);56    bottom:540px; /* sits above bottom cards like the screenshot */57    background:#2563eb;color:#fff;border-radius:22px;box-shadow:0 8px 20px rgba(0,0,0,.2);58    display:flex;align-items:center;gap:22px;padding:26px 44px;font-size:42px;font-weight:700;59  }60  .map-icon{width:64px;height:64px;background:rgba(255,255,255,.2);border-radius:14px;display:flex;align-items:center;justify-content:center;}61  .map-icon svg{width:38px;height:38px;fill:#fff;}62 63  /* small leaf icons for sustainable label */64  .leaves{display:inline-flex;gap:8px;margin-right:10px;}65  .leaf{width:28px;height:28px;border-radius:50%;background:#1aa34a;}66  .sust{color:#166534;font-size:30px;}67</style>68</head>69<body>70<div id="render-target">71 72  <div class="status-bar">73    <div>3:10</div>74    <div class="status-right">75      <div class="icon-signal"></div>76      <div class="icon-battery"></div>77    </div>78  </div>79 80  <div class="app-bar">81    <div class="logo">IndiGo <small>✈</small></div>82  </div>83 84  <div class="close-x">✕</div>85 86  <div class="banner">[IMG: Offer/Hotel Banner + "Breakfast included • Free cancellation • No prepayment needed"]</div>87 88  <!-- Card 1 -->89  <div class="card">90    <div class="thumb" style="height:340px;">[IMG: Hotel New Sahil facade]</div>91    <div class="content">92      <div class="title">hotel new sahil</div>93      <div>94        <span class="stars">★★★★★</span>95        <span class="badge">Featured</span>96        <span class="mini-btn">👍</span><span class="mini-btn">➕</span>97      </div>98      <div class="subline">99        <span class="score">8.8</span>100        Fabulous · 22 reviews101      </div>102      <div class="location">103        <div class="dot"></div>104        Srinagar · 7.6 km from centre105      </div>106 107      <div class="price-line">Price for <b>5 nights</b>: <span class="big">₹ 5,000</span></div>108      <div class="tax">+₹ 600 taxes and charges</div>109 110      <div class="green">111        <svg viewBox="0 0 24 24"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>112        Free cancellation113      </div>114      <div class="green">115        <svg viewBox="0 0 24 24"><path d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>116        No prepayment needed117      </div>118      <div class="pay">– pay at the property</div>119    </div>120    <div class="chev">›</div>121  </div>122 123  <!-- Card 2 -->124  <div class="card">125    <div class="thumb" style="height:660px;">[IMG: Ornate wooden houseboat interior]</div>126    <div class="content">127      <div class="title" style="line-height:1.15;">Floating Luxury Group Of Houseboats</div>128      <div>129        <span class="stars">★★★★☆</span>130        <span class="badge">Featured</span>131        <span class="mini-btn">👍</span><span class="mini-btn">➕</span>132      </div>133      <div class="subline">134        <span class="score">7.6</span>135        Good · 108 reviews136      </div>137      <div class="location">138        <div class="dot"></div>139        Dal Lake, Srinagar · 8.1 km from centre140      </div>141      <div class="subline">142        <span class="leaves"><span class="leaf"></span><span class="leaf"></span><span class="leaf"></span></span>143        <span class="sust">Travel Sustainable Level 3</span>144      </div>145      <div class="deal">Getaway Deal</div>146 147      <div class="price-line" style="margin-top:10px;">Price for <b>5 nights</b>:</div>148      <div class="price-line"><span class="strike">₹ 20,250</span><span class="newprice">₹ 15,188</span></div>149      <div class="tax">+₹ 1,822 taxes and charges</div>150      <div class="included">Breakfast included</div>151    </div>152    <div class="chev">›</div>153  </div>154 155  <!-- Card 3 (partially visible like screenshot) -->156  <div class="card">157    <div class="thumb" style="height:520px;">[IMG: Heritage houseboat veranda]</div>158    <div class="content">159      <div class="title">The Heritage Group of Houseboats</div>160      <div>161        <span class="stars">★★★★☆</span>162        <span class="badge">Featured</span>163        <span class="mini-btn">👍</span><span class="mini-btn">➕</span>164      </div>165      <div class="location" style="margin-top:10px;">166        <div class="dot"></div>167        Dal Lake, Srinagar · 4.7 km from centre168      </div>169      <div class="subline">170        <span class="leaves"><span class="leaf"></span><span class="leaf"></span><span class="leaf"></span></span>171        <span class="sust">Travel Sustainable Level 3</span>172      </div>173 174      <div class="price-line" style="margin-top:24px;">Price for <b>5 nights</b>:</div>175      <div class="price-line"><span class="strike">₹ 15,750</span><span class="newprice">₹ 11,813</span></div>176      <div class="tax">+₹ 1,117 taxes and charges</div>177    </div>178    <div class="chev">›</div>179  </div>180 181  <!-- Floating Map button -->182  <div class="map-fab">183    <div class="map-icon">184      <svg viewBox="0 0 24 24"><path d="M12 2C8.1 2 5 5.1 5 9c0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5c-1.4 0-2.5-1.1-2.5-2.5S10.6 6.5 12 6.5s2.5 1.1 2.5 2.5S13.4 11.5 12 11.5z"/></svg>185    </div>186    Map187  </div>188 189</div>190</body>191</html>