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 Search UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0f1f26; /* deep navy */15  }16 17  /* Top navigation */18  .topbar {19    position: relative;20    padding: 60px 40px 20px 40px; /* includes status area spacing */21    color: #cfd8dc;22  }23  .back-btn {24    position: absolute;25    left: 40px;26    top: 88px;27    width: 72px;28    height: 72px;29    border: none;30    background: transparent;31    cursor: pointer;32  }33  .back-btn svg { width: 48px; height: 48px; fill: none; stroke: #cfd8dc; stroke-width: 6; }34 35  .tabs {36    display: flex;37    justify-content: center;38    gap: 140px;39    align-items: center;40    margin-top: 30px;41  }42  .tab {43    font-size: 44px;44    letter-spacing: 1px;45    color: #94a3ac;46  }47  .tab.active {48    color: #19a2a5;49    position: relative;50    font-weight: 700;51  }52  .tab.active::after {53    content: "";54    position: absolute;55    left: 0;56    right: 0;57    bottom: -24px;58    margin: auto;59    width: 340px;60    height: 6px;61    background: #19a2a5;62    border-radius: 3px;63  }64 65  /* Search inputs row */66  .search-row {67    display: flex;68    align-items: center;69    gap: 24px;70    padding: 40px;71    margin-top: 40px;72  }73  .input-main {74    flex: 1;75    height: 120px;76    background: #263642;77    border-radius: 16px;78    color: #e6edf1;79    display: flex;80    align-items: center;81    padding: 0 32px;82    font-size: 40px;83  }84  .chip {85    height: 120px;86    background: #263642;87    border-radius: 16px;88    color: #e6edf1;89    display: flex;90    align-items: center;91    padding: 0 26px;92    gap: 22px;93    font-size: 34px;94  }95  .chip.small {96    width: 140px;97    justify-content: center;98    gap: 16px;99  }100  .chip svg { width: 48px; height: 48px; fill: none; stroke: #cfd8dc; stroke-width: 5; }101  .chip .dates {102    display: flex;103    flex-direction: column;104    line-height: 1.15;105    font-size: 34px;106  }107 108  /* Illustration placeholder */109  .hero-illustration {110    width: 760px;111    height: 520px;112    margin: 180px auto 0 auto;113    background: #E0E0E0;114    border: 1px solid #BDBDBD;115    color: #757575;116    display: flex;117    justify-content: center;118    align-items: center;119    border-radius: 12px;120    font-size: 36px;121  }122 123  /* Centered intro text */124  .intro {125    margin-top: 120px;126    text-align: center;127    color: #ffffff;128  }129  .intro h1 {130    margin: 0 0 24px 0;131    font-size: 64px;132    font-weight: 800;133  }134  .intro p {135    margin: 0 auto;136    width: 820px;137    font-size: 34px;138    line-height: 1.5;139    color: #cfd8dc;140  }141 142  /* CTA button */143  .cta {144    width: 520px;145    height: 120px;146    margin: 60px auto 0 auto;147    background: #1e9f9f;148    color: #ffffff;149    border-radius: 24px;150    display: flex;151    align-items: center;152    justify-content: center;153    font-size: 42px;154    font-weight: 800;155    letter-spacing: 1px;156    text-transform: uppercase;157    box-shadow: 0 8px 16px rgba(0,0,0,0.35);158  }159 160  /* Bottom gesture pill */161  .gesture {162    position: absolute;163    bottom: 24px;164    left: 50%;165    transform: translateX(-50%);166    width: 300px;167    height: 16px;168    border-radius: 10px;169    background: #e6e6e6;170    opacity: 0.85;171  }172</style>173</head>174<body>175<div id="render-target">176 177  <div class="topbar">178    <button class="back-btn" aria-label="Back">179      <svg viewBox="0 0 48 48">180        <path d="M30 8 L16 24 L30 40"></path>181      </svg>182    </button>183 184    <div class="tabs">185      <div class="tab">FLIGHTS</div>186      <div class="tab active">HOTELS</div>187    </div>188  </div>189 190  <div class="search-row">191    <div class="input-main">Destination or hotel name</div>192 193    <div class="chip">194      <svg viewBox="0 0 48 48">195        <rect x="6" y="10" width="36" height="28" rx="4"></rect>196        <line x1="14" y1="6" x2="14" y2="14"></line>197        <line x1="34" y1="6" x2="34" y2="14"></line>198        <line x1="12" y1="18" x2="36" y2="18"></line>199      </svg>200      <div class="dates">201        <span>Dec 6</span>202        <span>Dec 8</span>203      </div>204    </div>205 206    <div class="chip small">207      <svg viewBox="0 0 48 48">208        <circle cx="24" cy="16" r="8"></circle>209        <path d="M10 40c0-9 28-9 28 0"></path>210      </svg>211      <span>2</span>212    </div>213  </div>214 215  <div class="hero-illus