GD-ML/AndroidCode

1<!DOCTYPE html>2<html>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, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: linear-gradient(180deg, #f6cfd2 0%, #f7f5f7 50%, #f5f6f8 100%);15  }16 17  /* Decorative top bar (status area) */18  .status-bar {19    position: absolute;20    left: 0; top: 0; width: 1080px; height: 120px;21    background: #b29fa0;22  }23 24  /* Background accents */25  .accent-circle {26    position: absolute;27    right: -140px; top: 340px;28    width: 520px; height: 520px; border-radius: 50%;29    background: radial-gradient(circle at 30% 30%, #ff6b6b 0%, #f56f79 55%, #f7c9cd 100%);30    opacity: 0.45;31  }32 33  /* Header */34  .header {35    position: absolute;36    top: 140px; left: 40px; right: 40px;37  }38  .back-btn {39    position: absolute;40    left: 0; top: 10px;41    width: 100px; height: 100px; border-radius: 50%;42    background: #ffffff;43    box-shadow: 0 6px 18px rgba(0,0,0,0.12);44    display: flex; align-items: center; justify-content: center;45  }46  .back-btn svg { width: 42px; height: 42px; }47  .title {48    margin-left: 140px;49    font-size: 72px; font-weight: 700; color: #1a1a1a;50  }51  .currency-pill {52    position: absolute; right: 0; top: 0;53    background: #ffffff; border-radius: 30px;54    box-shadow: 0 8px 22px rgba(0,0,0,0.12);55    padding: 20px 28px;56    display: flex; align-items: center; gap: 18px;57    font-weight: 600; color: #222;58  }59  .currency-pill svg { width: 40px; height: 40px; }60 61  /* Search card */62  .card {63    position: absolute;64    left: 40px; right: 40px; top: 360px;65    background: #ffffff;66    border-radius: 34px;67    box-shadow: 0 12px 28px rgba(0,0,0,0.14);68    padding: 32px 34px 40px 34px;69  }70  .tabs {71    display: flex; align-items: center; gap: 44px;72    font-size: 40px; font-weight: 600;73  }74  .tab-active { color: #2a66f7; position: relative; padding-bottom: 18px; }75  .tab-active::after {76    content: ""; position: absolute; left: 0; bottom: 0;77    width: 160px; height: 8px; background: #2a66f7; border-radius: 8px;78  }79  .tab-inactive { color: #7b8794; }80  .new-badge {81    position: absolute; left: 280px; top: 30px;82    background: #e63a2d; color: #fff; font-weight: 700;83    font-size: 30px; padding: 10px 18px; border-radius: 10px;84    box-shadow: 0 6px 16px rgba(230,58,45,0.35);85  }86  .divider {87    height: 2px; background: #e0e6ed; margin-top: 26px;88  }89 90  .field {91    margin-top: 28px;92    background: #eef2f8;93    border-radius: 60px;94    padding: 28px 30px;95    display: flex; align-items: center; gap: 20px;96    color: #2a2f36; font-size: 38px; font-weight: 600;97  }98  .field .sub { font-weight: 600; }99  .field-half-wrap { display: flex; gap: 24px; margin-top: 28px; }100  .field-half {101    flex: 1;102    background: #eef2f8; border-radius: 60px;103    padding: 28px 30px;104    display: flex; align-items: center; gap: 20px;105    color: #2a2f36; font-size: 36px; font-weight: 700;106  }107  .field svg { width: 50px; height: 50px; color: #2d2d2d; }108  .field-half svg { width: 48px; height: 48px; color: #2d2d2d; }109 110  /* Search action area */111  .action-row {112    margin-top: 40px;113    display: flex; align-items: center; gap: 30px;114  }115  .geo-icon {116    width: 120px; height: 120px; border-radius: 60px;117    border: 2px solid #2a66f7;118    display: flex; align-items: center; justify-content: center;119    color: #2a66f7;120    background: #ffffff;121  }122  .geo-icon svg { width: 52px; height: 52px; }123  .search-btn {124    flex: 1;125    background: linear-gradient(90deg, #2a66f7 0%, #2a66f7 100%);126    color: #ffffff; font-size: 44px; font-weight: 700;127    border-radius: 64px; padding: 34px 20px; text-align: center;128    box-shadow: 0 10px 22px rgba(42,102,247,0.35);129  }130 131  /* Coupons section */132  .section {133    position: absolute; left: 40px; right: 40px; top: 1150px;134  }135  .section-title {136    font-size: 54px; font-weight: 700; color: #1a1a1a; margin-bottom: 30px;137  }138  .coupon-row { display: flex; gap: 26px; }139  .coupon-card {140    width: 500px; background: #ffffff; border-radius: 26px;141    box-shadow: 0 8px 22px rgba(0,0,0,0.1);142    padding: 24px; display: flex; gap: 22px; align-items: center;143  }144  .img-ph {145    width: 170px; height: 170px;146    background: #E0E0E0; border: 1px solid #BDBDBD;147    display: flex; align-items: center; justify-content: center;148    color: #757575; font-size: 30px; text-align: center; border-radius: 18px;149  }150  .coupon-info { flex: 1; }151  .coupon-title { font-size: 40px; font-weight: 800; color: #1f2937; line-height: 1.2; }152  .coupon-desc { font-size: 30px; color: #6b7280; margin-top: 8px; }153  .coupon-link { margin-top: 14px; font-size: 34px; color: #2a66f7; font-weight: 700; }154 155  /* Bottom gesture bar */156  .gesture-area {157    position: absolute; left: 0; bottom: 0; width: 1080px; height: 140px; background: #000000;158  }159  .gesture-bar {160    position: absolute; left: 50%; transform: translateX(-50%);161    bottom: 46px; width: 380px; height: 16px; border-radius: 10px; background: #d7d7d7;162    opacity: 0.85;163  }164 165  /* Common icon color */166  svg { fill: currentColor; }167</style>168</head>169<body>170<div id="render-target">171 172  <div class="status-bar"></div>173  <div class="accent-circle"></div>174 175  <div class="header">176    <div class="back-btn">177      <svg viewBox="0 0 24 24">178        <path d="M15.5 4.5L7 12l8.5 7.5-1.8 2L3.5 12 13.7 2.5z"/>179      </svg>180    </div>181    <div class="title">All rooms</div>182    <div class="currency-pill">183      <svg viewBox="0 0 24 24">184        <path d="M12 3c4.4 0 8 3.6 8 8s-3.6 8-8 8-8-3.6-8-8 3.6-8 8-8zm-1 4h-1v2H8v2h2v3.5c0 1.7 1.3 3 3 3h1v-2h-1c-.6 0-1-.4-1-1V11h2V9h-2V7z"/>185      </svg>186      <span>INR</span>187    </div>188  </div>189 190  <div class="card">191    <div class="tabs">192      <div class="tab-active">Overnight</div>193      <div class="tab-inactive">Day Use</div>194      <div class="new-badge">New!</div>195    </div>196    <div class="divider"></div>197 198    <div class="field">199      <svg viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 10-.9.9l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 110-9 4.5 4.5 0 010 9z"/></svg>200      <span>Where would you like to go?</span>201    </div>202 203    <div class="field-half-wrap">204      <div class="field-half">205        <svg viewBox="0 0 24 24"><path d="M19 4h-1V3h-2v1H8V3H6v1H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H5V9h14v9z"/></svg>206        <span>Thu, Dec 07</span>207      </div>208      <div class="field-half">209        <svg viewBox="0 0 24 24"><path d="M19 4h-1V3h-2v1H8V3H6v1H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H5V9h14v9z"/></svg>210        <span>Fri, Dec 08</span>211      </div>212    </div>213 214    <div class="field">215      <svg viewBox="0 0 24 24"><path d="M12 12c2.2 0 4-1.8 4-4s-1.8-4-4-4-4 1.8-4 4 1.8 4 4 4zm0 2c-3.3 0-6 2.7-6 6h12c0-3.3-2.7-6-6-6z"/></svg>216      <span>1 room 2 adults</span>217    </div>218 219    <div class="action-row">220      <div class="geo-icon">221        <svg viewBox="0 0 24 24"><path d="M12 2C7.6 2 4 5.6 4 10c0 6 8 12 8 12s8-6 8-12c0-4.4-3.6-8-8-8zm0 11a3 3 0 110-6 3 3 0 010 6z"/></svg>222      </div>223      <div class="search-btn">Search</div>224    </div>225  </div>226 227  <div class="section">228    <div class="section-title">Discount Coupons</div>229    <div class="coupon-row">230      <div class="coupon-card">231        <div class="img-ph">[IMG: Coupon 5% off]</div>232        <div class="coupon-info">233          <div class="coupon-title">UP TO ₹8,000 off</div>234          <div class="coupon-desc">* No minimum spend required. | Offer expires in 3 days!</div>235          <div class="coupon-link">Get coupon</div>236        </div>237      </div>238      <div class="coupon-card">239        <div class="img-ph">[IMG: Coupon 8% off]</div>240        <div class="coupon-info">241          <div class="coupon-title">UP TO 8% off</div>242          <div class="coupon-desc">Min. spend required | Offer expires soon</div>243          <div class="coupon-link">Get coupon</div>244        </div>245      </div>246    </div>247  </div>248 249  <div class="gesture-area">250    <div class="gesture-bar"></div>251  </div>252 253</div>254</body>255</html>