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, Arial, sans-serif; color: #1f2937; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff;13  }14 15  /* Status bar */16  .status-bar {17    height: 110px;18    padding: 32px 36px 0 36px;19    box-sizing: border-box;20    display: flex; align-items: center; justify-content: space-between;21    color: #111827;22  }23  .status-time { font-size: 44px; letter-spacing: 0.5px; }24  .status-icons { display: flex; align-items: center; gap: 26px; }25 26  /* App bar */27  .app-bar {28    height: 140px;29    display: flex; align-items: center; justify-content: center;30    position: relative;31    border-bottom: 1px solid #E5E7EB;32  }33  .app-title { font-size: 56px; font-weight: 600; }34  .app-action { position: absolute; top: 50%; transform: translateY(-50%); }35  .app-action.left { left: 32px; }36  .app-action.right { right: 32px; }37 38  /* Search card */39  .search-section { padding: 36px 48px 0 48px; }40  .search-card {41    border: 1px solid #E5E7EB; border-radius: 36px; overflow: hidden;42    background: #fff;43  }44  .row { display: flex; align-items: center; gap: 26px; padding: 34px 36px; font-size: 42px; }45  .divider { height: 1px; background: #E5E7EB; margin: 0 36px; }46  .muted { color: #6b7280; }47  .bullet { margin: 0 10px; color: #6b7280; }48  .search-btn {49    margin-top: 20px;50    margin-left: 48px; margin-right: 48px;51    height: 120px; border-radius: 36px; background: #F28C28; color: #fff;52    display: flex; align-items: center; justify-content: center; gap: 22px;53    font-size: 44px; font-weight: 600;54  }55 56  /* Banner */57  .banner {58    margin: 34px 48px 0 48px;59    background: #2D7BE5; border-radius: 36px; height: 300px;60    display: flex; align-items: center; padding: 0 36px; box-sizing: border-box; color: #fff; gap: 36px;61  }62  .img-placeholder {63    width: 240px; height: 220px; background: #E0E0E0;64    border: 1px solid #BDBDBD; display: flex; justify-content: center; align-items: center;65    color: #757575; border-radius: 16px; text-align: center; font-size: 28px; padding: 12px; box-sizing: border-box;66  }67  .banner-text { font-size: 42px; line-height: 1.2; font-weight: 600; }68 69  /* Sections */70  .section-title {71    font-size: 48px; font-weight: 700; margin: 48px 48px 20px 48px; color: #1f2937;72  }73 74  /* Offers carousel */75  .offers {76    margin: 0 48px; display: flex; gap: 24px; overflow: hidden;77  }78  .offer-card {79    width: 936px; height: 440px; border-radius: 36px; background: #F7EDE3;80    position: relative; padding: 36px; box-sizing: border-box; flex: 0 0 auto;81    display: flex; gap: 30px; align-items: center;82  }83  .offer-card.dark { background: #111827; color: #fff; }84  .offer-content { flex: 1; }85  .offer-title { font-size: 42px; font-weight: 700; color: #1f2937; }86  .offer-title.light { color: #ffffff; }87  .code-pill {88    display: inline-block; margin-top: 18px; padding: 12px 18px; border-radius: 18px;89    background: #F28C28; color: #fff; font-size: 32px; font-weight: 700;90  }91  .pager {92    margin: 22px auto 0 auto; width: 140px; height: 18px; background: #E5E7EB; border-radius: 9px;93  }94  .pager-dot {95    width: 34px; height: 18px; background: #2D7BE5; border-radius: 9px;96    transform: translateX(52px);97  }98 99  /* Why Book */100  .benefits {101    margin: 20px 48px 0 48px; display: flex; gap: 24px;102  }103  .benefit-card {104    width: 320px; height: 220px; border-radius: 28px; background: #EAF7E9;105    padding: 24px; box-sizing: border-box;106  }107  .benefit-title { font-size: 36px; font-weight: 700; color: #1f2937; margin-top: 12px; }108 109  /* Gesture bar */110  .gesture {111    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);112    width: 360px; height: 18px; background: rgba(0,0,0,0.8); border-radius: 9px;113  }114 115  /* Simple icon defaults */116  svg { display: block; }117  .icon { width: 48px; height: 48px; }118  .icon.large { width: 54px; height: 54px; }119  .icon-stroke { stroke: #1f2937; stroke-width: 3; fill: none; }120  .icon-fill { fill: #1f2937; }121  .icon-muted { stroke: #6b7280; fill: none; }122</style>123</head>124<body>125<div id="render-target">126 127  <!-- Status Bar -->128  <div class="status-bar">129    <div class="status-time">10:49</div>130    <div class="status-icons">131      <!-- Network icon -->132      <svg class="icon" viewBox="0 0 24 24">133        <path class="icon-fill" d="M3 17h4l9-9 5-1-1 5-9 9H7L3 17z"></path>134      </svg>135      <!-- Battery icon -->136      <svg class="icon" viewBox="0 0 24 24">137        <rect x="2" y="6" width="18" height="12" rx="2" class="icon-stroke"></rect>138        <rect x="20" y="9" width="2" height="6" class="icon-fill"></rect>139        <rect x="4" y="8" width="10" height="8" rx="1" class="icon-fill"></rect>140      </svg>141    </div>142  </div>143 144  <!-- App Bar -->145  <div class="app-bar">146    <div class="app-action left">147      <!-- Back chevron -->148      <svg class="icon large" viewBox="0 0 24 24">149        <path class="icon-stroke" d="M15 19L8 12l7-7"></path>150      </svg>151    </div>152    <div class="app-title">Hotels</div>153    <div class="app-action right">154      <!-- Heart outline -->155      <svg class="icon large" viewBox="0 0 24 24">156        <path class="icon-stroke" d="M12 20s-7-4.5-9-8.5C1 7.6 3.6 5 6.6 5c1.8 0 3.4.9 4.4 2.3C12.9 5.9 14.5 5 16.3 5 19.3 5 22 7.6 21 11.5 19 15.5 12 20 12 20z"></path>157      </svg>158    </div>159  </div>160 161  <!-- Search Card -->162  <div class="search-section">163    <div class="search-card">164      <div class="row">165        <!-- Location pin -->166        <svg class="icon" viewBox="0 0 24 24">167          <path class="icon-stroke" d="M12 21s7-6 7-11a7 7 0 0 0-14 0c0 5 7 11 7 11z"></path>168          <circle cx="12" cy="10" r="3" class="icon-stroke"></circle>169        </svg>170        <div>Goa</div>171      </div>172      <div class="divider"></div>173      <div class="row">174        <!-- Calendar left -->175        <svg class="icon" viewBox="0 0 24 24">176          <rect x="3" y="5" width="18" height="16" rx="2" class="icon-stroke"></rect>177          <line x1="3" y1="9" x2="21" y2="9" class="icon-stroke"></line>178          <line x1="8" y1="3" x2="8" y2="7" class="icon-stroke"></line>179          <line x1="16" y1="3" x2="16" y2="7" class="icon-stroke"></line>180        </svg>181        <div>Mon, 25 Dec <span class="bullet">—</span> Tue, 26 Dec</div>182      </div>183      <div class="divider"></div>184      <div class="row">185        <!-- Person icon -->186        <svg class="icon" viewBox="0 0 24 24">187          <circle cx="12" cy="8" r="4" class="icon-stroke"></circle>188          <path class="icon-stroke" d="M4 20c0-4 4-6 8-6s8 2 8 6"></path>189        </svg>190        <div>1 Room <span class="bullet">•</span> 2 Adults</div>191      </div>192    </div>193 194    <div class="search-btn">195      <!-- Search icon -->196      <svg class="icon" viewBox="0 0 24 24">197        <circle cx="11" cy="11" r="7" stroke="#ffffff" stroke-width="3" fill="none"></circle>198        <line x1="16.5" y1="16.5" x2="21" y2="21" stroke="#ffffff" stroke-width="3"></line>199      </svg>200      <span>Search Hotels</span>201    </div>202  </div>203 204  <!-- Sign-in Banner -->205  <div class="banner">206    <div class="img-placeholder">[IMG: Hand holding phone]</div>207    <div class="banner-text">Sign in to get the best deals on hotel bookings</div>208  </div>209 210  <!-- Offers Section -->211  <div class="section-title">Offers For You</div>212  <div class="offers">213    <div class="offer-card">214      <div class="img-placeholder" style="width: 280px; height: 300px;">[IMG: Hotel reception illustration]</div>215      <div class="offer-content">216        <div class="offer-title">Get upto 25% off on Hotels</div>217        <div class="code-pill">Code: IXISTAY</div>218      </div>219    </div>220    <div class="offer-card dark">221      <div class="offer-content">222        <div class="offer-title light">Get Flat off on Hotels</div>223        <div class="code-pill" style="background:#F28C28; color:#fff;">Code: IXIGO</div>224      </div>225    </div>226  </div>227  <div class="pager"><div class="pager-dot"></div></div>228 229  <!-- Why Book Section -->230  <div class="section-title" style="margin-top: 46px;">Why Book With ixigo?</div>231  <div class="benefits">232    <div class="benefit-card">233      <div class="img-placeholder" style="width: 80px; height: 80px;">[IMG: Support icon]</div>234      <div class="benefit-title">24x7 support</div>235    </div>236    <div class="benefit-card" style="background:#E6F5EC;">237      <div class="img-placeholder" style="width: 80px; height: 80px;">[IMG: Map pins]</div>238      <div class="benefit-title">Largest selection of hotels</div>239    </div>240    <div class="benefit-card">241      <div class="img-placeholder" style="width: 80px; height: 80px;">[IMG: Easy booking]</div>242      <div class="benefit-title">Easy booking & cancellations</div>243    </div>244  </div>245 246  <!-- Gesture bar -->247  <div class="gesture"></div>248</div>249</body>250</html>