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>All rooms UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #222; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #F7F8FA;12  }13 14  /* Top hero */15  .hero {16    position: absolute; left: 0; top: 0; width: 1080px; height: 520px;17    background: radial-gradient(1000px 600px at 88% 35%, #ff5b6f 0%, #ff8da1 30%, #ffd3d8 70%), linear-gradient(#fdd7da, #fdd7da);18  }19  .accent-circle {20    position: absolute; right: -140px; top: 190px; width: 420px; height: 420px;21    border-radius: 50%; background: radial-gradient(closest-side, #ff6a7a, #ff8e9f);22    opacity: 0.7;23  }24 25  .back-btn {26    position: absolute; left: 48px; top: 140px; width: 104px; height: 104px;27    background: #fff; border-radius: 52px; box-shadow: 0 6px 16px rgba(0,0,0,0.15);28    display: flex; align-items: center; justify-content: center;29  }30  .back-btn svg { width: 42px; height: 42px; }31  .page-title {32    position: absolute; left: 56px; top: 270px; font-weight: 700; font-size: 72px; color: #1B1B1B;33  }34 35  .currency-chip {36    position: absolute; right: 48px; top: 140px; padding: 18px 28px; height: 88px;37    background: #fff; border-radius: 44px; box-shadow: 0 6px 16px rgba(0,0,0,0.15);38    display: flex; align-items: center; gap: 14px; font-weight: 600; color: #222;39  }40  .currency-chip svg { width: 36px; height: 36px; }41 42  /* Card */43  .card {44    position: absolute; left: 48px; right: 48px; top: 410px;45    background: #fff; border-radius: 36px; box-shadow: 0 10px 24px rgba(0,0,0,0.12);46    padding: 30px 32px 36px 32px;47  }48  .tabs { display: flex; align-items: center; gap: 48px; position: relative; padding-bottom: 26px; }49  .tab { font-size: 38px; font-weight: 600; color: #6C7A88; }50  .tab.active { color: #2d6ee9; position: relative; }51  .tab.active::after {52    content: ""; position: absolute; left: 0; bottom: -8px; width: 160px; height: 6px; background: #2d6ee9; border-radius: 3px;53  }54  .new-badge {55    position: absolute; left: 210px; top: -16px; background: #E53935; color: #fff;56    font-size: 28px; font-weight: 700; padding: 8px 16px; border-radius: 10px; box-shadow: 0 8px 16px rgba(229,57,53,0.35);57  }58  .tabs-divider { height: 1px; background: #D7DEE8; }59 60  .field {61    margin-top: 26px; height: 112px; border-radius: 56px;62    background: #EEF1FF; display: flex; align-items: center; justify-content: space-between;63    padding: 0 32px; color: #2b2f33; font-size: 40px; font-weight: 600;64  }65  .field .left { display: flex; align-items: center; gap: 24px; }66  .field .right { display: flex; align-items: center; }67  .field svg { width: 48px; height: 48px; }68 69  .row { display: flex; gap: 26px; }70  .row .field { flex: 1; }71 72  .actions { margin-top: 32px; display: flex; align-items: center; gap: 28px; }73  .map-chip {74    width: 120px; height: 120px; border-radius: 60px; border: 2px solid #2d6ee9; display: flex; align-items: center; justify-content: center; color: #2d6ee9;75    background: #fff;76  }77  .map-chip svg { width: 52px; height: 52px; }78  .search-btn {79    flex: 1; height: 120px; border: none; border-radius: 60px; background: #2d6ee9;80    color: #fff; font-size: 44px; font-weight: 700; box-shadow: 0 8px 20px rgba(45,110,233,0.35);81    cursor: pointer;82  }83 84  /* Discount section */85  .section-title {86    position: absolute; left: 48px; top: 1020px; font-size: 50px; font-weight: 800; color: #2b2b2b;87  }88  .coupons {89    position: absolute; left: 48px; right: 48px; top: 1100px;90    display: flex; gap: 26px;91  }92  .coupon-card {93    flex: 1; min-width: 0; background: #fff; border-radius: 28px; box-shadow: 0 6px 14px rgba(0,0,0,0.08);94    border: 1px solid #E2E8F0; display: flex; padding: 24px; gap: 24px;95  }96  .img-ph {97    width: 200px; height: 200px; background: #E0E0E0; border: 1px solid #BDBDBD;98    display: flex; align-items: center; justify-content: center; color: #757575; font-weight: 700; text-align: center; border-radius: 16px;99    font-size: 28px; padding: 10px;100  }101  .coupon-body { display: flex; flex-direction: column; gap: 12px; justify-content: center; }102  .coupon-title { font-size: 40px; font-weight: 800; color: #2a2a2a; }103  .coupon-desc { font-size: 30px; color: #596275; }104  .coupon-link { margin-top: 12px; font-size: 34px; color: #2d6ee9; font-weight: 700; }105 106  /* Icon strokes */107  svg { stroke: #2f2f2f; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }108  .gray-icon svg { stroke: #3b3f44; }109</style>110</head>111<body>112<div id="render-target">113 114  <div class="hero">115    <div class="accent-circle"></div>116  </div>117 118  <div class="back-btn" aria-label="Back">119    <svg viewBox="0 0 24 24">120      <path d="M15 6 L9 12 L15 18"></path>121    </svg>122  </div>123 124  <div class="currency-chip">125    <svg viewBox="0 0 24 24">126      <circle cx="12" cy="12" r="9"></circle>127      <path d="M12 6 V18"></path>128      <path d="M8 9 H16"></path>129      <path d="M8 15 H16"></path>130    </svg>131    <span>INR</span>132  </div>133 134  <div class="page-title">All rooms</div>135 136  <div class="card">137    <div class="tabs">138      <div class="tab active">Overnight</div>139      <div class="tab">Day Use</div>140      <div class="new-badge">New!</div>141    </div>142 143    <div class="field">144      <div class="left">145        <svg viewBox="0 0 24 24" class="gray-icon">146          <circle cx="10" cy="10" r="6"></circle>147          <path d="M15 15 L21 21"></path>148        </svg>149        <span>Paris</span>150      </div>151      <div class="right">152        <svg viewBox="0 0 24 24">153          <circle cx="12" cy="12" r="7"></circle>154          <path d="M12 5 V8"></path>155          <path d="M12 16 V19"></path>156          <path d="M5 12 H8"></path>157          <path d="M16 12 H19"></path>158        </svg>159      </div>160    </div>161 162    <div class="row">163      <div class="field">164        <div class="left">165          <svg viewBox="0 0 24 24">166            <rect x="3" y="6" width="18" height="14" rx="2"></rect>167            <path d="M7 3 V6"></path>168            <path d="M17 3 V6"></path>169            <path d="M6 12 H18"></path>170          </svg>171          <span>Sun, Dec 24</span>172        </div>173      </div>174 175      <div class="field">176        <div class="left">177          <svg viewBox="0 0 24 24">178            <rect x="3" y="6" width="18" height="14" rx="2"></rect>179            <path d="M7 3 V6"></path>180            <path d="M17 3 V6"></path>181            <path d="M6 12 H18"></path>182          </svg>183          <span>Sun, Dec 31</span>184        </div>185      </div>186    </div>187 188    <div class="field">189      <div class="left">190        <svg viewBox="0 0 24 24">191          <circle cx="12" cy="8" r="3"></circle>192          <path d="M5 20 C6 15, 18 15, 19 20"></path>193        </svg>194        <span>1 room 2 adults</span>195      </div>196    </div>197 198    <div class="actions">199      <div class="map-chip" title="Map">200        <svg viewBox="0 0 24 24" style="stroke: #2d6ee9;">201          <path d="M12 4 C8 4,6 7,6 10 C6 14,12 20,12 20 C12 20,18 14,18 10 C18 7,16 4,12 4 Z"></path>202          <circle cx="12" cy="10" r="2" style="fill:none;"></circle>203        </svg>204      </div>205      <button class="search-btn">Search</button>206    </div>207  </div>208 209  <div class="section-title">Discount Coupons</div>210 211  <div class="coupons">212    <div class="coupon-card">213      <div class="img-ph">[IMG: 3% OFF coupon]</div>214      <div class="coupon-body">215        <div class="coupon-title">UP TO ₹8,000 ...</div>216        <div class="coupon-desc">* No minimum spend required. | Offer expires in 3 days!</div>217        <div class="coupon-link">Get coupon</div>218      </div>219    </div>220 221    <div class="coupon-card">222      <div class="img-ph">[IMG: 6% OFF coupon]</div>223      <div class="coupon-body">224        <div class="coupon-title">UP TO 6% ...</div>225        <div class="coupon-desc">Min. spend required | Offer expires soon</div>226      </div>227    </div>228  </div>229 230</div>231</body>232</html>