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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #222; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #ffffff;12  }13 14  /* Top hero area */15  .hero {16    position: absolute; left: 0; top: 0;17    width: 1080px; height: 520px;18    background: #ffd9df;19    border-bottom-left-radius: 140px;20  }21  .hero .circle {22    position: absolute; right: -120px; bottom: -40px;23    width: 420px; height: 420px; border-radius: 50%;24    background: radial-gradient(circle at 50% 50%, #ff6c6c 0%, #ff6c6c 20%, #ff8f8f 55%, rgba(255, 144, 144, 0.6) 75%, rgba(255, 144, 144, 0) 100%);25  }26 27  /* Header elements */28  .back-btn {29    position: absolute; left: 48px; top: 140px;30    width: 100px; height: 100px; border-radius: 50%;31    background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,0.12);32    display: flex; align-items: center; justify-content: center;33  }34  .back-btn svg { width: 44px; height: 44px; }35  .currency-chip {36    position: absolute; right: 48px; top: 130px;37    background: #fff; border-radius: 28px; padding: 18px 28px;38    display: flex; align-items: center; gap: 16px;39    box-shadow: 0 6px 16px rgba(0,0,0,0.12);40    font-weight: 600;41  }42  .currency-icon {43    width: 46px; height: 46px; border-radius: 50%;44    background: #fff; border: 1px solid #DFE3EB;45    display: flex; align-items: center; justify-content: center;46  }47  .header-title {48    position: absolute; left: 168px; top: 168px;49    font-size: 64px; font-weight: 800; color: #222;50  }51 52  /* Search card */53  .card {54    position: absolute; left: 40px; right: 40px; top: 360px;55    background: #fff; border-radius: 28px;56    box-shadow: 0 10px 20px rgba(0,0,0,0.12);57    padding: 28px 32px 36px 32px;58  }59  .tabs {60    display: flex; align-items: center; gap: 48px;61    font-size: 36px; font-weight: 700;62  }63  .tab-active { color: #2e6cf6; }64  .tab-inactive { color: #8b8f98; }65  .tab-underline {66    margin-top: 16px; height: 6px; width: 180px; background: #2e6cf6; border-radius: 3px;67  }68  .new-badge {69    position: absolute; left: 240px; top: -20px;70    background: #e8453c; color: #fff; font-weight: 700; font-size: 26px;71    padding: 8px 14px; border-radius: 10px; box-shadow: 0 6px 14px rgba(0,0,0,0.16);72  }73  .divider { margin-top: 24px; height: 2px; background: #E8EBF2; }74 75  .pill {76    height: 96px; border-radius: 48px;77    background: #ECF0F9; display: flex; align-items: center;78    padding: 0 28px; font-size: 34px; font-weight: 700; color: #333;79    margin-top: 26px;80    gap: 20px;81  }82  .pill svg { width: 50px; height: 50px; }83 84  .date-row { display: flex; gap: 28px; }85  .date-pill { flex: 1; }86 87  .cta-row { display: flex; align-items: center; gap: 28px; margin-top: 32px; }88  .map-circle {89    width: 110px; height: 110px; border-radius: 55px;90    border: 2px solid #2e6cf6; display: flex; align-items: center; justify-content: center;91    color: #2e6cf6;92  }93  .search-btn {94    flex: 1; height: 110px; background: #2e6cf6; color: #fff;95    border-radius: 56px; display: flex; align-items: center; justify-content: center;96    font-size: 40px; font-weight: 800;97    box-shadow: 0 8px 16px rgba(46,108,246,0.35);98  }99 100  /* Discount section */101  .section {102    position: absolute; left: 40px; right: 40px; top: 1020px;103  }104  .section h2 {105    margin: 0 0 24px 0; font-size: 48px; font-weight: 800; color: #222;106  }107 108  .coupon-row { display: flex; gap: 24px; }109  .coupon-card {110    flex: 1;111    background: #fff; border-radius: 26px;112    border: 2px solid #D8E1F2;113    box-shadow: 0 6px 10px rgba(0,0,0,0.06);114    padding: 20px; display: flex; gap: 22px; align-items: center;115  }116  .img-ph {117    width: 200px; height: 160px; background: #E0E0E0; border: 1px solid #BDBDBD;118    display: flex; justify-content: center; align-items: center; color: #757575; border-radius: 12px;119    text-align: center; padding: 6px;120  }121  .coupon-content { flex: 1; }122  .coupon-title { font-size: 36px; font-weight: 800; margin-bottom: 6px; }123  .coupon-desc { font-size: 28px; color: #666; }124  .coupon-link { margin-top: 12px; color: #2e6cf6; font-size: 34px; font-weight: 700; }125 126  /* Bottom gesture bar */127  .gesture-bar {128    position: absolute; bottom: 28px; left: 50%;129    transform: translateX(-50%);130    width: 240px; height: 12px; background: #C9CDD3; border-radius: 6px;131  }132</style>133</head>134<body>135<div id="render-target">136  <div class="hero">137    <div class="circle"></div>138  </div>139 140  <div class="back-btn">141    <svg viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">142      <path d="M15 18l-6-6 6-6"/>143    </svg>144  </div>145 146  <div class="currency-chip">147    <div class="currency-icon">148      <svg viewBox="0 0 24 24" width="26" height="26">149        <circle cx="12" cy="12" r="10" fill="none" stroke="#333" stroke-width="1.6"/>150        <path d="M7 12h10M12 7v10" stroke="#333" stroke-width="1.6" />151      </svg>152    </div>153    <div>INR</div>154  </div>155 156  <div class="header-title">All rooms</div>157 158  <div class="card">159    <div class="new-badge">New!</div>160    <div class="tabs">161      <div class="tab-active">Overnight</div>162      <div class="tab-inactive">Day Use</div>163    </div>164    <div class="tab-underline"></div>165    <div class="divider"></div>166 167    <div class="pill">168      <svg viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">169        <circle cx="11" cy="11" r="8"></circle>170        <path d="M21 21l-4.3-4.3"></path>171      </svg>172      <span>London</span>173    </div>174 175    <div class="date-row">176      <div class="pill date-pill">177        <svg viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">178          <rect x="3" y="5" width="18" height="16" rx="2"></rect>179          <path d="M16 3v4M8 3v4M3 10h18"></path>180        </svg>181        <span>Mon, Jan 15, 2024</span>182      </div>183      <div class="pill date-pill">184        <svg viewBox="0 0 24 24" fill="none" stroke="#333" stroke-width="2">185          <rect x="3" y="5" width="18" height="16" rx="2"></rect>186          <path d="M16 3v4M8 3v4M3 10h18"></path>187        </svg>188        <span>Tue, Jan 16, 2024</span>189      </div>190    </div>191 192    <div class="pill">193      <svg viewBox="0 0 24 24" fill="#333">194        <circle cx="12" cy="8" r="4"></circle>195        <path d="M4 20c0-4 4-6 8-6s8 2 8 6" fill="#333"></path>196      </svg>197      <span>1 room 2 adults</span>198    </div>199 200    <div class="cta-row">201      <div class="map-circle">202        <svg viewBox="0 0 24 24" fill="none" stroke="#2e6cf6" stroke-width="2">203          <path d="M12 21s7-7 7-11a7 7 0 10-14 0c0 4 7 11 7 11z"></path>204          <circle cx="12" cy="10" r="3"></circle>205        </svg>206      </div>207      <div class="search-btn">Search</div>208    </div>209  </div>210 211  <div class="section">212    <h2>Discount Coupons</h2>213    <div class="coupon-row">214      <div class="coupon-card">215        <div class="img-ph">[IMG: Coupon 5% OFF]</div>216        <div class="coupon-content">217          <div class="coupon-title">UP TO ₹8,000 ...</div>218          <div class="coupon-desc">* No minimum spend required. | Offer expires in 3 days!</div>219          <div class="coupon-link">Get coupon</div>220        </div>221      </div>222      <div class="coupon-card">223        <div class="img-ph">[IMG: Coupon 8% OFF]</div>224        <div class="coupon-content">225          <div class="coupon-title">UP TO 8% ...</div>226          <div class="coupon-desc">Min. spend required | Offer details inside.</div>227          <div class="coupon-link">Get coupon</div>228        </div>229      </div>230    </div>231  </div>232 233  <div class="gesture-bar"></div>234</div>235</body>236</html>