GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>All rooms UI</title>6<style>7  body { margin:0; padding:0; background: transparent; font-family: 'Inter', Arial, sans-serif; }8  #render-target {9    width:1080px; height:2400px;10    position:relative; overflow:hidden;11    background:#ffffff;12  }13 14  /* Top decorative areas */15  .status-bar {16    position:absolute; top:0; left:0; width:100%; height:120px;17    background:#a89290;18  }19  .hero {20    position:absolute; top:120px; left:0; width:100%; height:520px;21    background:#ffd6dc;22    border-bottom-left-radius:120px;23  }24  .hero-accent {25    position:absolute; right:-160px; top:260px;26    width:560px; height:560px; border-radius:50%;27    background: radial-gradient(circle at 40% 40%, #ff6a6a, #ff6a6a 30%, #ff8a8a 60%, #ffb7b7 100%);28    opacity:0.75;29  }30  .back-btn {31    position:absolute; top:220px; left:48px;32    width:110px; height:110px; border-radius:55px;33    background:#ffffff; box-shadow:0 6px 16px rgba(0,0,0,0.15);34    display:flex; align-items:center; justify-content:center;35  }36  .back-btn svg { width:44px; height:44px; }37  .currency-pill {38    position:absolute; top:210px; right:48px;39    background:#fff; border-radius:48px; padding:18px 28px;40    box-shadow:0 6px 16px rgba(0,0,0,0.15);41    display:flex; align-items:center; gap:14px; font-weight:600; font-size:34px; color:#333;42  }43  .currency-pill .icon { width:40px; height:40px; }44  .title {45    position:absolute; top:320px; left:60px;46    font-size:72px; font-weight:800; color:#222;47  }48 49  /* Search card */50  .search-card {51    position:absolute; top:580px; left:40px; width:1000px;52    background:#fff; border-radius:36px; box-shadow:0 16px 30px rgba(0,0,0,0.12);53  }54  .tabs { display:flex; align-items:center; gap:36px; padding:34px 36px 20px; font-size:40px; }55  .tab { color:#7b7f89; font-weight:600; }56  .tab.active { color:#2e6df6; }57  .tab-underline {58    height:6px; width:160px; background:#2e6df6; border-radius:3px; margin-left:36px;59  }60  .new-badge {61    position:absolute; top:56px; left:270px;62    background:#e6423b; color:#fff; font-size:30px; font-weight:700;63    padding:12px 18px; border-radius:12px; box-shadow:0 4px 10px rgba(0,0,0,0.15);64  }65  .divider { height:1px; background:#e5e7eb; margin:0 0 26px; }66 67  .pill { background:#eef2fb; border-radius:60px; height:120px; display:flex; align-items:center; padding:0 34px; margin:22px 36px; color:#222; font-size:40px; font-weight:600; }68  .pill svg { width:52px; height:52px; margin-right:24px; }69  .pill-row { display:flex; gap:24px; padding:0 36px; }70  .pill-half { flex:1; background:#eef2fb; border-radius:60px; height:120px; display:flex; align-items:center; padding:0 34px; color:#222; font-size:38px; font-weight:700; }71  .action-row { display:flex; align-items:center; gap:26px; padding:34px 36px 40px; }72  .locate-circle {73    width:120px; height:120px; border-radius:60px; background:#ffffff; border:2px solid #e0e4ef;74    display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(0,0,0,0.08);75  }76  .locate-circle svg { width:54px; height:54px; }77  .search-btn {78    flex:1; height:120px; border-radius:60px; background:#2e6df6; color:#fff; font-size:44px; font-weight:700;79    display:flex; align-items:center; justify-content:center; box-shadow:0 10px 18px rgba(46,109,246,0.35);80  }81 82  /* Discount section */83  .section-title {84    position:absolute; top:1120px; left:60px; font-size:54px; font-weight:800; color:#222;85  }86  .coupon-row {87    position:absolute; top:1220px; left:40px; width:1000px; display:flex; gap:26px;88  }89  .coupon-card {90    flex:1; background:#fff; border:2px solid #dfE4ef; border-radius:30px; box-shadow:0 6px 16px rgba(0,0,0,0.05);91    display:flex; padding:24px;92  }93  .coupon-image {94    width:210px; height:210px; background:#E0E0E0; border:1px solid #BDBDBD;95    border-radius:16px; display:flex; align-items:center; justify-content:center; color:#757575; font-size:30px; text-align:center; margin-right:20px;96  }97  .coupon-content { display:flex; flex-direction:column; justify-content:space-between; }98  .coupon-title { font-size:40px; font-weight:800; color:#111; }99  .coupon-sub { font-size:30px; color:#6b7280; line-height:1.3; margin-top:6px; }100  .coupon-link { font-size:34px; font-weight:700; color:#2e6df6; margin-top:14px; }101 102  /* Bottom gesture bar */103  .gesture {104    position:absolute; bottom:42px; left:50%; transform:translateX(-50%);105    width:300px; height:12px; background:#d1d5db; border-radius:6px;106  }107</style>108</head>109<body>110<div id="render-target">111  <div class="status-bar"></div>112  <div class="hero">113    <div class="hero-accent"></div>114  </div>115 116  <div class="back-btn">117    <svg viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">118      <path d="M15 18l-6-6 6-6"/>119    </svg>120  </div>121 122  <div class="currency-pill">123    <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">124      <circle cx="12" cy="12" r="9"></circle>125      <path d="M8 10h8M8 14h8"></path>126    </svg>127    INR128  </div>129 130  <div class="title">All rooms</div>131 132  <div class="search-card">133    <div class="tabs">134      <div class="tab active">Overnight</div>135      <div class="tab">Day Use</div>136    </div>137    <div class="tab-underline"></div>138    <div class="new-badge">New!</div>139    <div class="divider"></div>140 141    <div class="pill">142      <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">143        <circle cx="11" cy="11" r="8"></circle>144        <path d="M21 21l-4.3-4.3"></path>145      </svg>146      London147    </div>148 149    <div class="pill-row">150      <div class="pill-half">151        <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">152          <rect x="3" y="5" width="18" height="16" rx="2"></rect>153          <path d="M3 9h18M8 5v4M16 5v4"></path>154        </svg>155        Thu, Dec 07156      </div>157      <div class="pill-half">158        <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">159          <rect x="3" y="5" width="18" height="16" rx="2"></rect>160          <path d="M3 9h18M8 5v4M16 5v4"></path>161        </svg>162        Fri, Dec 08163      </div>164    </div>165 166    <div class="pill">167      <svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">168        <circle cx="12" cy="7" r="3"></circle>169        <path d="M5 21c1.5-4 5.5-6 7-6s5.5 2 7 6"></path>170      </svg>171      1 room 2 adults172    </div>173 174    <div class="action-row">175      <div class="locate-circle">176        <svg viewBox="0 0 24 24" fill="none" stroke="#2e6df6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">177          <path d="M12 3c4.4 0 8 3.6 8 8 0 6-8 10-8 10S4 17 4 11c0-4.4 3.6-8 8-8z"></path>178          <circle cx="12" cy="11" r="3"></circle>179        </svg>180      </div>181      <div class="search-btn">Search</div>182    </div>183  </div>184 185  <div class="section-title">Discount Coupons</div>186 187  <div class="coupon-row">188    <div class="coupon-card">189      <div class="coupon-image">[IMG: Coupon 5% OFF - Blue]</div>190      <div class="coupon-content">191        <div>192          <div class="coupon-title">UP TO ₹8,000 …</div>193          <div class="coupon-sub">* No minimum spend required. | Offer expires in 3 days!</div>194        </div>195        <div class="coupon-link">Get coupon</div>196      </div>197    </div>198 199    <div class="coupon-card">200      <div class="coupon-image">[IMG: Coupon 8% OFF - Green]</div>201      <div class="coupon-content">202        <div>203          <div class="coupon-title">UP TO 8% …</div>204          <div class="coupon-sub">Min. spend applies | Limited time offer</div>205        </div>206        <div class="coupon-link">Get coupon</div>207      </div>208    </div>209  </div>210 211  <div class="gesture"></div>212</div>213</body>214</html>