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 UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15  }16 17  /* Common */18  .text-dark { color: #1F2A37; }19  .text-muted { color: #6B7280; }20  .divider { height: 1px; background: #E5E7EB; }21 22  .icon-btn {23    width: 96px; height: 96px;24    border: none; background: transparent; padding: 0; cursor: pointer;25    display: flex; align-items: center; justify-content: center;26  }27  .icon { width: 48px; height: 48px; }28 29  /* Status bar */30  .status-bar {31    height: 120px; padding: 28px 40px 0 44px;32    display: flex; align-items: center; justify-content: space-between;33    color: #111827; font-size: 42px; letter-spacing: 0.5px;34  }35  .status-icons { display: flex; gap: 28px; align-items: center; }36  .status-icons svg { width: 44px; height: 44px; stroke: #1F2937; }37 38  /* App bar */39  .app-bar {40    height: 140px;41    display: grid;42    grid-template-columns: 120px 1fr 120px;43    align-items: center;44    padding: 0 32px;45  }46  .app-title {47    text-align: center; font-weight: 700; font-size: 54px; color: #1F2937;48  }49 50  /* Search card */51  .search-wrapper { padding: 20px 48px 0 48px; }52  .search-card {53    background: #FFFFFF;54    border: 1px solid #E5E7EB;55    border-radius: 36px;56    box-shadow: 0 2px 6px rgba(0,0,0,0.04);57    overflow: hidden;58  }59  .row {60    display: flex; align-items: center; gap: 24px;61    padding: 34px 36px;62    font-size: 42px; color: #111827;63  }64  .row .text { font-weight: 600; }65  .separator { height: 1px; background: #E5E7EB; }66  .dates-row { justify-content: space-between; padding-right: 36px; }67  .date-chip { display: flex; align-items: center; gap: 18px; color: #111827; }68  .dash { color: #6B7280; font-size: 42px; }69 70  .search-btn {71    margin: 22px 0 0 0;72    background: #F08A2E;73    color: #FFFFFF;74    font-size: 46px; font-weight: 700;75    display: flex; align-items: center; justify-content: center;76    gap: 24px;77    height: 120px;78    border-radius: 32px;79  }80 81  /* Image placeholders */82  .img-placeholder {83    background: #E0E0E0;84    border: 1px solid #BDBDBD;85    color: #757575;86    display: flex; align-items: center; justify-content: center;87    text-align: center;88    font-size: 40px;89    border-radius: 36px;90  }91 92  /* Banner */93  .banner { margin: 40px 48px 0 48px; height: 360px; }94 95  /* Sections */96  .section-title {97    font-size: 56px; font-weight: 700; color: #1F2937;98    margin: 56px 48px 28px 48px;99  }100 101  /* Offers carousel */102  .offers-carousel {103    display: flex; gap: 24px;104    padding: 0 48px;105    overflow: hidden;106  }107  .offer-card { width: 708px; height: 500px; border-radius: 36px; }108  .dots {109    display: flex; gap: 18px; align-items: center; justify-content: center;110    margin: 24px 0 0 0;111  }112  .dot {113    width: 26px; height: 10px; border-radius: 8px; background: #D1D5DB;114  }115  .dot.active { width: 26px; height: 10px; background: #3B82F6; }116 117  /* Features */118  .features-row {119    display: flex; gap: 24px;120    padding: 0 48px;121  }122  .feature-card { width: 316px; height: 280px; border-radius: 28px; }123 124  /* Bottom gesture bar */125  .gesture-area { position: absolute; left: 0; bottom: 0; width: 100%; height: 140px; background: #0000000A; }126  .gesture-bar {127    position: absolute; left: 50%; bottom: 36px;128    transform: translateX(-50%);129    width: 360px; height: 12px; background: #111827; border-radius: 6px;130  }131</style>132</head>133<body>134<div id="render-target">135 136  <!-- Status bar -->137  <div class="status-bar">138    <div class="time">10:50</div>139    <div class="status-icons">140      <!-- simple wifi -->141      <svg viewBox="0 0 24 24" fill="none">142        <path d="M2 8c5-4 15-4 20 0" stroke-width="2" />143        <path d="M5 12c4-3 10-3 14 0" stroke-width="2" />144        <path d="M8 16c3-2 5-2 8 0" stroke-width="2" />145        <circle cx="12" cy="19" r="1.6" fill="#1F2937"></circle>146      </svg>147      <!-- battery -->148      <svg viewBox="0 0 24 24" fill="none">149        <rect x="2" y="6" width="18" height="12" rx="2" stroke-width="2"></rect>150        <rect x="4" y="8" width="12" height="8" fill="#1F2937"></rect>151        <rect x="20" y="10" width="2.5" height="4" rx="1" fill="#1F2937"></rect>152      </svg>153    </div>154  </div>155 156  <!-- App bar -->157  <div class="app-bar">158    <button class="icon-btn" aria-label="Back">159      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">160        <path d="M15 18l-6-6 6-6"/>161      </svg>162    </button>163    <div class="app-title">Hotels</div>164    <button class="icon-btn" aria-label="Favorites">165      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111827" stroke-width="2">166        <path d="M12 21s-6.5-4.4-8.5-7.4C1.6 10.6 3 7.5 6 7.2c1.7-.2 3.2.6 4 2 0 0 .3-.6 1-1.2 1.5-1.4 4.4-1.3 5.8.5 1.8 2.2.7 5.2-1.3 7.2S12 21 12 21z"/>167      </svg>168    </button>169  </div>170  <div class="divider"></div>171 172  <!-- Search card -->173  <div class="search-wrapper">174    <div class="search-card">175      <div class="row location-row">176        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111827" stroke-width="2">177          <path d="M12 21s-6-6.4-6-10a6 6 0 1 1 12 0c0 3.6-6 10-6 10z"></path>178          <circle cx="12" cy="11" r="2.5"></circle>179        </svg>180        <div class="text">Berlin</div>181      </div>182      <div class="separator"></div>183      <div class="row dates-row">184        <div class="date-chip">185          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111827" stroke-width="2">186            <rect x="3" y="5" width="18" height="16" rx="2"></rect>187            <path d="M16 3v4M8 3v4M3 10h18"></path>188          </svg>189          <div>Mon, 25 Dec</div>190        </div>191        <div class="dash">—</div>192        <div class="date-chip">193          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111827" stroke-width="2">194            <rect x="3" y="5" width="18" height="16" rx="2"></rect>195            <path d="M16 3v4M8 3v4M3 10h18"></path>196          </svg>197          <div>Tue, 26 Dec</div>198        </div>199      </div>200      <div class="separator"></div>201      <div class="row">202        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#111827" stroke-width="2">203          <circle cx="9" cy="9" r="3"></circle>204          <circle cx="16" cy="11" r="2.5"></circle>205          <path d="M3 20a6 6 0 0 1 12 0"></path>206          <path d="M13 20c.3-1.9 1.7-3.3 3.6-3.6 1.6-.3 3.4.4 4.4 1.6"></path>207        </svg>208        <div>1 Room • 2 Adults</div>209      </div>210    </div>211    <div class="search-btn">212      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">213        <circle cx="11" cy="11" r="7"></circle>214        <path d="M20 20l-4-4"></path>215      </svg>216      <span>Search Hotels</span>217    </div>218  </div>219 220  <!-- Sign-in banner -->221  <div class="banner img-placeholder">[IMG: Sign-in promo for hotel bookings]</div>222 223  <!-- Offers -->224  <div class="section-title">Offers For You</div>225  <div class="offers-carousel">226    <div class="offer-card img-placeholder">[IMG: Offer - Get up to 25% off on Hotels]</div>227    <div class="offer-card img-placeholder">[IMG: Offer - Credit card discount on Hotels]</div>228    <div class="offer-card img-placeholder">[IMG: Offer - Limited-time hotel deals]</div>229  </div>230  <div class="dots">231    <div class="dot active"></div>232    <div class="dot"></div>233  </div>234 235  <!-- Why Book section -->236  <div class="section-title">Why Book With ixigo?</div>237  <div class="features-row">238    <div class="feature-card img-placeholder">[IMG: Free cancellation on select hotels]</div>239    <div class="feature-card img-placeholder">[IMG: Pay at hotel option available]</div>240    <div class="feature-card img-placeholder">[IMG: Best price guarantee]</div>241  </div>242 243  <!-- Gesture bar -->244  <div class="gesture-area"></div>245  <div class="gesture-bar"></div>246 247</div>248</body>249</html>