GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8" />5<meta name="viewport" content="width=1080, height=2400, initial-scale=1.0" />6<title>Hotels UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", Arial, sans-serif;13    color: #1f2937;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #ffffff;21  }22 23  /* Global helpers */24  .row {25    display: flex;26    align-items: center;27  }28  .spacer {29    flex: 1;30  }31  .hairline {32    height: 2px;33    background: #e9edf3;34    width: 100%;35  }36  .content {37    padding: 0 48px;38  }39 40  /* Status bar */41  .statusbar {42    height: 120px;43    padding: 36px 36px 0 36px;44    font-size: 36px;45    color: #111827;46  }47  .status-icons {48    display: flex;49    gap: 24px;50    align-items: center;51  }52  .status-icon {53    width: 40px;54    height: 40px;55  }56 57  /* App bar */58  .appbar {59    height: 140px;60    padding: 0 36px;61  }62  .appbar-title {63    font-size: 52px;64    font-weight: 600;65    letter-spacing: 0.2px;66    color: #0f172a;67  }68  .appbar-btn {69    width: 88px;70    height: 88px;71    display: flex;72    align-items: center;73    justify-content: center;74  }75  .icon {76    width: 48px;77    height: 48px;78  }79 80  /* Search card */81  .search-card {82    margin: 24px 48px 0 48px;83    border: 2px solid #e6e8ee;84    border-radius: 36px;85    overflow: hidden;86    box-shadow: 0 2px 0 rgba(17, 24, 39, 0.03);87    background: #ffffff;88  }89  .search-row {90    padding: 36px 36px;91    font-size: 38px;92    color: #0f172a;93  }94  .search-row .label {95    margin-left: 24px;96  }97  .search-row.small {98    font-size: 34px;99    color: #1f2937;100  }101  .divider {102    height: 2px;103    background: #e9edf3;104    margin: 0 0;105  }106  .search-btn {107    background: #ea8a35;108    color: #ffffff;109    font-size: 42px;110    font-weight: 600;111    padding: 36px 36px;112    display: flex;113    align-items: center;114    gap: 18px;115  }116 117  /* Banner image placeholder */118  .img-placeholder {119    background: #E0E0E0;120    border: 1px solid #BDBDBD;121    color: #757575;122    display: flex;123    align-items: center;124    justify-content: center;125    text-align: center;126  }127  .rounded {128    border-radius: 36px;129  }130 131  /* Section titles */132  .section-title {133    font-size: 46px;134    font-weight: 600;135    margin: 48px 48px 24px 48px;136    color: #111827;137  }138 139  /* Offer card carousel (single visible) */140  .offer-card {141    width: 984px;142    height: 520px;143    margin: 0 48px;144  }145  .pager {146    display: flex;147    gap: 18px;148    justify-content: center;149    align-items: center;150    margin: 24px 0 36px 0;151  }152  .dot {153    width: 24px;154    height: 24px;155    border-radius: 12px;156    background: #e5e7eb;157  }158  .dot.active {159    background: #3b82f6;160  }161 162  /* Why Book cards */163  .why-row {164    display: flex;165    gap: 24px;166    padding: 0 48px;167  }168  .why-card {169    width: 320px;170    height: 220px;171    border-radius: 32px;172  }173 174  /* Bottom gesture bar */175  .gesture {176    position: absolute;177    bottom: 36px;178    left: 50%;179    transform: translateX(-50%);180    width: 360px;181    height: 18px;182    border-radius: 9px;183    background: rgba(0,0,0,0.25);184  }185</style>186</head>187<body>188<div id="render-target">189  <!-- Status bar -->190  <div class="statusbar row content">191    <div>10:52</div>192    <div class="spacer"></div>193    <div class="status-icons">194      <!-- Network -->195      <svg class="status-icon" viewBox="0 0 24 24">196        <path d="M3 17h3v2H3v-2zm5-4h3v6H8v-6zm5-3h3v9h-3V10zm5-4h3v13h-3V6z" fill="#6b7280"></path>197      </svg>198      <!-- Battery -->199      <svg class="status-icon" viewBox="0 0 24 24">200        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#6b7280" fill="none" stroke-width="2"></rect>201        <rect x="20" y="10" width="2" height="4" fill="#6b7280"></rect>202        <rect x="4" y="8" width="12" height="8" fill="#6b7280"></rect>203      </svg>204    </div>205  </div>206 207  <!-- App bar -->208  <div class="appbar row">209    <div class="appbar-btn">210      <!-- Back chevron -->211      <svg class="icon" viewBox="0 0 48 48">212        <path d="M30 10 L16 24 L30 38" fill="none" stroke="#111827" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>213      </svg>214    </div>215    <div class="spacer"></div>216    <div class="appbar-title">Hotels</div>217    <div class="spacer"></div>218    <div class="appbar-btn">219      <!-- Heart outline -->220      <svg class="icon" viewBox="0 0 48 48">221        <path d="M24 39s-12-8-16-14a10 10 0 0 1 16-12 10 10 0 0 1 16 12c-4 6-16 14-16 14z" fill="none" stroke="#111827" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>222      </svg>223    </div>224  </div>225  <div class="hairline"></div>226 227  <!-- Search card -->228  <div class="search-card">229    <div class="search-row row">230      <!-- Location pin -->231      <svg class="icon" viewBox="0 0 48 48">232        <path d="M24 44s-14-16-14-24a14 14 0 1 1 28 0c0 8-14 24-14 24z" fill="none" stroke="#0f172a" stroke-width="3"></path>233        <circle cx="24" cy="20" r="5" fill="none" stroke="#0f172a" stroke-width="3"></circle>234      </svg>235      <div class="label" style="font-weight:600;">Berlin</div>236    </div>237    <div class="divider"></div>238    <div class="search-row row small" style="gap: 18px;">239      <!-- Calendar icon -->240      <svg class="icon" viewBox="0 0 48 48">241        <rect x="6" y="10" width="36" height="28" rx="4" fill="none" stroke="#0f172a" stroke-width="3"></rect>242        <path d="M12 6v8M36 6v8M6 18h36" stroke="#0f172a" stroke-width="3" stroke-linecap="round"></path>243      </svg>244      <div>Sat, 23 Dec</div>245      <div style="color:#9ca3af; margin: 0 6px;">—</div>246      <svg class="icon" viewBox="0 0 48 48">247        <rect x="6" y="10" width="36" height="28" rx="4" fill="none" stroke="#0f172a" stroke-width="3"></rect>248        <path d="M12 6v8M36 6v8M6 18h36" stroke="#0f172a" stroke-width="3" stroke-linecap="round"></path>249      </svg>250      <div>Mon, 25 Dec</div>251    </div>252    <div class="divider"></div>253    <div class="search-row row small">254      <!-- Person icon -->255      <svg class="icon" viewBox="0 0 48 48">256        <circle cx="24" cy="16" r="7" fill="none" stroke="#0f172a" stroke-width="3"></circle>257        <path d="M8 40c4-8 12-10 16-10s12 2 16 10" fill="none" stroke="#0f172a" stroke-width="3" stroke-linecap="round"></path>258      </svg>259      <div class="label">1 Room • 2 Adults</div>260    </div>261    <div class="search-btn row">262      <!-- Search icon -->263      <svg class="icon" viewBox="0 0 48 48">264        <circle cx="22" cy="22" r="12" fill="none" stroke="#ffffff" stroke-width="3"></circle>265        <path d="M34 34 L42 42" stroke="#ffffff" stroke-width="3" stroke-linecap="round"></path>266      </svg>267      <div>Search Hotels</div>268    </div>269  </div>270 271  <!-- Sign-in banner placeholder -->272  <div class="content" style="margin-top: 36px;">273    <div class="img-placeholder rounded" style="width: 984px; height: 280px;">274      [IMG: Sign-in deals on hotel bookings banner]275    </div>276  </div>277 278  <!-- Offers For You -->279  <div class="section-title">Offers For You</div>280  <div class="offer-card img-placeholder rounded">281    [IMG: Offer banner - Get up to 25% off on Hotels (Code: IXISTAY)]282  </div>283  <div class="pager">284    <div class="dot active"></div>285    <div class="dot"></div>286  </div>287 288  <!-- Why Book With ixigo? -->289  <div class="section-title" style="margin-top: 24px;">Why Book With ixigo?</div>290  <div class="why-row">291    <div class="img-placeholder why-card">[IMG: 24x7 support card]</div>292    <div class="img-placeholder why-card">[IMG: Largest selection of hotels card]</div>293    <div class="img-placeholder why-card">[IMG: Best prices & deals card]</div>294  </div>295 296  <!-- Bottom gesture bar -->297  <div class="gesture"></div>298</div>299</body>300</html>