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>Hotels & Homestays</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #F7F7F7;13    font-family: Arial, sans-serif; color: #222;14  }15 16  .appbar {17    height: 140px;18    background: #FFFFFF;19    box-shadow: 0 2px 0 rgba(0,0,0,0.05);20    display: flex; align-items: center;21    padding: 0 40px;22  }23  .back-icon {24    width: 56px; height: 56px; border-radius: 28px;25    display: flex; align-items: center; justify-content: center;26    margin-right: 20px;27  }28  .app-title {29    font-size: 52px; font-weight: 700;30  }31  .new-badge {32    margin-left: auto;33    background: #F44336;34    color: #fff;35    font-size: 28px; font-weight: 700;36    padding: 12px 22px;37    border-radius: 32px;38    position: relative;39  }40  .new-badge::after {41    content:""; position:absolute; right:-18px; top:36px;42    width: 20px; height: 20px; border: 3px solid #2196F3; border-radius: 50%;43  }44 45  .tabs {46    background: transparent;47    display: flex; gap: 18px;48    padding: 24px 40px 0 40px;49  }50  .tab {51    padding: 24px 34px;52    border: 2px solid #E0E0E0;53    border-radius: 22px;54    background: #fff;55    font-size: 30px; font-weight: 700; color: #666;56    box-shadow: 0 3px 6px rgba(0,0,0,0.06);57  }58  .tab.active {59    color: #0B78FF;60    border-color: #0B78FF;61    background: #EAF4FF;62  }63 64  .banner {65    margin: 24px 40px 0 40px;66    background: #CDEFE1;67    border-radius: 22px;68    box-shadow: 0 6px 10px rgba(0,0,0,0.08);69    display: flex; align-items: center;70    padding: 28px;71  }72  .banner-icon {73    width: 64px; height: 64px; margin-right: 22px;74  }75  .banner-text {76    font-size: 30px; font-weight: 600; color: #1E4E40;77  }78 79  .form {80    padding: 24px 40px;81  }82  .card {83    background: #FFFFFF;84    border: 1px solid #E5E5E5;85    border-radius: 26px;86    box-shadow: 0 4px 9px rgba(0,0,0,0.06);87    padding: 28px;88    margin-bottom: 24px;89  }90  .row {91    display: flex; align-items: center;92  }93  .icon {94    width: 56px; height: 56px; margin-right: 18px;95  }96  .titleline {97    font-size: 44px; font-weight: 700; color: #222;98  }99  .subtitle {100    font-size: 30px; color: #8A8A8A; margin-top: 6px;101  }102 103  .dates {104    justify-content: space-between;105  }106  .date-item {107    display: flex; align-items: center; gap: 12px;108    font-size: 36px; font-weight: 700;109    color: #222;110  }111  .date-sub {112    font-size: 26px; color: #777; margin-left: 6px; font-weight: 600;113  }114  .night-pill {115    padding: 10px 22px;116    border: 2px solid #E0E0E0;117    border-radius: 22px;118    color: #777; font-size: 26px; font-weight: 700;119  }120 121  .section-label {122    margin: 18px 40px 8px 40px;123    font-size: 32px; font-weight: 800; color: #9B9B9B;124    letter-spacing: 0.5px;125  }126  .chips {127    display: flex; gap: 18px; flex-wrap: wrap;128    padding: 8px 40px 20px 40px;129  }130  .chip {131    background: #fff; border: 2px solid #E0E0E0;132    border-radius: 20px; padding: 16px 22px;133    font-size: 30px; color: #444; font-weight: 700;134    box-shadow: 0 3px 6px rgba(0,0,0,0.05);135  }136 137  .search-wrap {138    padding: 10px 40px 0 40px;139  }140  .search-btn {141    height: 120px; border-radius: 26px; border: none;142    background: linear-gradient(90deg,#2DA8FF,#1C5BFF);143    color: #fff; font-size: 44px; font-weight: 900; letter-spacing: 2px;144    box-shadow: 0 10px 16px rgba(28,91,255,0.25);145    cursor: pointer; width: 100%;146  }147 148  .carousel {149    margin: 24px 40px;150    display: flex; gap: 18px;151  }152  .promo-card {153    width: 740px; height: 320px;154    background: #FFFFFF;155    border-radius: 26px;156    box-shadow: 0 6px 12px rgba(0,0,0,0.08);157    position: relative; overflow: hidden;158    padding: 16px;159  }160  .sponsored-badge {161    position: absolute; right: 22px; top: 22px;162    background: #FFFFFF; border: 1px solid #DADADA;163    color: #5A5A5A; font-size: 24px; font-weight: 700;164    padding: 10px 16px; border-radius: 18px;165  }166  .img-placeholder {167    width: 100%; height: 100%;168    background: #E0E0E0;169    border: 1px solid #BDBDBD;170    display: flex; align-items: center; justify-content: center;171    color: #757575; font-size: 30px; font-weight: 700;172    border-radius: 18px;173  }174  .thumb {175    width: 280px; height: 320px;176    background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 26px;177    display: flex; align-items: center; justify-content: center;178    color: #757575; font-size: 28px; font-weight: 700;179  }180 181  .section-row {182    margin: 14px 40px 8px 40px;183    display: flex; align-items: baseline;184  }185  .section-title {186    font-size: 46px; font-weight: 800;187  }188  .section-sub {189    width: 100%;190    font-size: 30px; color: #8A8A8A; margin-top: 8px;191  }192  .view-all {193    margin-left: auto; color: #1478FF; font-weight: 800;194    font-size: 32px; display: flex; align-items: center; gap: 10px;195  }196 197  .grid {198    display: grid;199    grid-template-columns: 1fr 1fr;200    gap: 18px;201    padding: 0 40px;202  }203  .grid .grid-img {204    height: 240px; border-radius: 26px;205    background: #E0E0E0; border: 1px solid #BDBDBD;206    display: flex; align-items: center; justify-content: center;207    color: #757575; font-size: 28px; font-weight: 700;208  }209</style>210</head>211<body>212<div id="render-target">213 214  <div class="appbar">215    <div class="back-icon">216      <svg class="icon" viewBox="0 0 24 24">217        <path d="M15 6 L9 12 L15 18" stroke="#444" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>218        <path d="M9 12 H20" stroke="#444" stroke-width="2.5" fill="none" stroke-linecap="round"/>219      </svg>220    </div>221    <div class="app-title">Hotels & Homestays</div>222    <div class="new-badge">New</div>223  </div>224 225  <div class="tabs">226    <div class="tab active">UPTO 4 ROOMS</div>227    <div class="tab">GROUP DEALS</div>228    <div class="tab">HOURLY STAYS</div>229  </div>230 231  <div class="banner">232    <svg class="banner-icon" viewBox="0 0 24 24">233      <circle cx="12" cy="12" r="10" fill="#1EAE87"/>234      <text x="7" y="16" font-size="12" font-family="Arial" font-weight="800" fill="#fff">%</text>235    </svg>236    <div class="banner-text">Up to 20% OFF* on your first hotel booking! Use code: WELCOMEMMT</div>237  </div>238 239  <div class="form">240 241    <div class="card">242      <div class="row">243        <svg class="icon" viewBox="0 0 24 24">244          <circle cx="11" cy="11" r="7" stroke="#8A8A8A" stroke-width="2" fill="none"/>245          <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#8A8A8A" stroke-width="2" stroke-linecap="round"/>246        </svg>247        <div>248          <div class="titleline">Delhi</div>249          <div class="subtitle">India</div>250        </div>251      </div>252    </div>253 254    <div class="card">255      <div class="row dates">256        <div class="row">257          <svg class="icon" viewBox="0 0 24 24">258            <rect x="3" y="5" width="18" height="16" rx="2" ry="2" stroke="#8A8A8A" stroke-width="2" fill="none"/>259            <line x1="7" y1="3" x2="7" y2="7" stroke="#8A8A8A" stroke-width="2"/>260            <line x1="17" y1="3" x2="17" y2="7" stroke="#8A8A8A" stroke-width="2"/>261            <line x1="3" y1="9" x2="21" y2="9" stroke="#8A8A8A" stroke-width="2"/>262          </svg>263          <div class="date-item">03 Nov <span class="date-sub">'23, Fri</span></div>264        </div>265        <div class="night-pill">1 NIGHT</div>266        <div class="date-item">04 Nov <span class="date-sub">'23, Sat</span></div>267      </div>268    </div>269 270    <div class="card">271      <div class="row">272        <svg class="icon" viewBox="0 0 24 24">273          <circle cx="12" cy="8" r="4" stroke="#8A8A8A" stroke-width="2" fill="none"/>274          <path d="M4 22 C4 16 20 16 20 22" stroke="#8A8A8A" stroke-width="2" fill="none"/>275        </svg>276        <div class="titleline">1 Room, 2 Adults & 0 Children</div>277      </div>278    </div>279  </div>280 281  <div class="section-label">PURPOSE OF STAY</div>282  <div class="chips">283    <div class="chip">Work</div>284    <div class="chip">Holiday</div>285    <div class="chip">Transit</div>286    <div class="chip">Special Occasion</div>287  </div>288 289  <div class="search-wrap">290    <button class="search-btn">SEARCH</button>291  </div>292 293  <div class="carousel">294    <div class="promo-card">295      <div class="sponsored-badge">Sponsored</div>296      <div class="img-placeholder">[IMG: Sponsored Hotel Card]</div>297    </div>298    <div class="thumb">[IMG: Poolside Hotel]</div>299  </div>300 301  <div class="section-row">302    <div>303      <div class="section-title">Rare Finds</div>304      <div class="section-sub">Handpicked stays near you</div>305    </div>306    <div class="view-all">View All307      <svg viewBox="0 0 24 24" width="28" height="28">308        <path d="M8 5 L16 12 L8 19" fill="none" stroke="#1478FF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>309      </svg>310    </div>311  </div>312 313  <div class="grid">314    <div class="grid-img">[IMG: Rare Find #1]</div>315    <div class="grid-img">[IMG: Rare Find #2]</div>316    <div class="grid-img">[IMG: Rare Find #3]</div>317    <div class="grid-img">[IMG: Rare Find #4]</div>318  </div>319 320</div>321</body>322</html>