GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>IndiGo - Stay Search</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: linear-gradient(#ffffff 0px, #dff1ff 220px, #c6e7ff 500px, #eaf6ff 1800px, #ffffff 2400px);14  }15  /* Status bar */16  .status-bar {17    height: 90px;18    padding: 0 36px;19    display: flex;20    align-items: center;21    justify-content: space-between;22    color: #5a5a5a;23    font-size: 40px;24    background: transparent;25  }26  .status-icons {27    display: flex;28    align-items: center;29    gap: 22px;30  }31  .icon {32    width: 38px;33    height: 38px;34  }35  /* Header */36  .app-header {37    height: 120px;38    display: flex;39    align-items: center;40    justify-content: center;41    background: #ffffff;42    position: relative;43  }44  .close-btn {45    position: absolute;46    left: 32px;47    top: 50%;48    transform: translateY(-50%);49    width: 56px;50    height: 56px;51    border-radius: 28px;52    display: flex;53    align-items: center;54    justify-content: center;55    color: #555;56  }57  .logo {58    font-size: 64px;59    font-weight: 700;60    color: #1637b3;61    letter-spacing: 1px;62  }63  .logo small { font-weight: 400; margin-left: 8px; font-size: 52px; }64  /* Progress */65  .progress-wrap {66    height: 10px;67    background: #e1e6ee;68  }69  .progress-bar {70    height: 10px;71    width: 760px;72    background: #2a49d6;73  }74  /* Main content */75  .content {76    padding: 64px 32px 24px 32px;77  }78  .title {79    font-size: 72px;80    font-weight: 800;81    color: #1c2c3f;82    line-height: 1.1;83    margin-bottom: 18px;84  }85  .subtitle {86    font-size: 36px;87    color: #223b52;88    opacity: 0.85;89    margin-bottom: 28px;90  }91  /* Card / form */92  .form-card {93    width: 1016px;94    background: #0a1f6f;95    border-radius: 10px;96    padding: 28px;97    box-sizing: border-box;98    margin-top: 18px;99  }100  .field {101    background: #ffffff;102    height: 120px;103    border-radius: 12px;104    display: flex;105    align-items: center;106    padding: 0 24px;107    box-sizing: border-box;108    color: #0f1f33;109  }110  .field + .field { margin-top: 24px; }111  .search-field .placeholder {112    font-size: 44px;113    font-weight: 700;114    color: #1f2e45;115    margin-left: 16px;116  }117  .input-label {118    font-size: 32px;119    color: #5d6b7b;120    margin-bottom: 8px;121  }122  .two-col {123    display: flex;124    gap: 24px;125    margin-top: 24px;126  }127  .date-field {128    flex: 1;129    background: #ffffff;130    border-radius: 12px;131    padding: 18px 24px;132    box-sizing: border-box;133  }134  .date-row {135    display: flex;136    align-items: center;137    gap: 22px;138  }139  .big-num {140    font-size: 60px;141    font-weight: 800;142    color: #1a2d46;143  }144  .month-text {145    font-size: 40px;146    color: #1a2d46;147    font-weight: 600;148  }149  .triple-col {150    display: flex;151    gap: 24px;152    margin-top: 24px;153  }154  .col-box {155    flex: 1;156    background: #ffffff;157    border-radius: 12px;158    padding: 18px 24px;159    box-sizing: border-box;160  }161  .col-value {162    font-size: 60px;163    font-weight: 800;164    color: #1a2d46;165  }166  .checkbox-row {167    height: 120px;168    background: #ffffff;169    border-radius: 12px;170    margin-top: 24px;171    display: flex;172    align-items: center;173    padding-left: 22px;174  }175  .fake-checkbox {176    width: 68px;177    height: 68px;178    border: 4px solid #c7cbd3;179    border-radius: 12px;180    background: #fafafa;181  }182  .search-btn {183    margin-top: 24px;184    height: 120px;185    border-radius: 12px;186    background: #ead583;187    display: flex;188    align-items: center;189    justify-content: center;190    color: #0e1a4b;191    font-size: 58px;192    font-weight: 800;193  }194  /* Info card */195  .info-card {196    width: 1016px;197    height: 120px;198    background: #ffffff;199    border-radius: 12px;200    box-shadow: 0 6px 18px rgba(0,0,0,0.08);201    margin: 28px 32px 0 32px;202    display: flex;203    align-items: center;204    justify-content: center;205    color: #2b3c4d;206    font-size: 38px;207    font-weight: 600;208  }209  /* Gesture bar */210  .gesture {211    position: absolute;212    bottom: 34px;213    left: 50%;214    transform: translateX(-50%);215    width: 420px;216    height: 14px;217    background: #cccccc;218    border-radius: 8px;219  }220  /* Small helper */221  .srch-icon {222    width: 42px;223    height: 42px;224    flex: 0 0 42px;225  }226</style>227</head>228<body>229<div id="render-target">230  <!-- Status bar -->231  <div class="status-bar">232    <div class="time">3:04</div>233    <div class="status-icons">234      <!-- Wi-Fi -->235      <svg class="icon" viewBox="0 0 24 24">236        <path fill="#606060" d="M12 20.5c.9 0 1.6-.7 1.6-1.5s-.7-1.5-1.6-1.5-1.6.7-1.6 1.5.7 1.5 1.6 1.5zm6-4.7c-3.3-3.2-8.7-3.2-12 0l1.3 1.3c2.7-2.6 6.7-2.6 9.4 0L18 15.8zm3-3.7c-5-4.9-13-4.9-18 0l1.3 1.3c4.3-4.2 11.1-4.2 15.4 0L21 12.1z"/>237      </svg>238      <!-- Battery -->239      <svg class="icon" viewBox="0 0 28 24">240        <rect x="2" y="6" width="20" height="12" rx="2" ry="2" fill="#606060"/>241        <rect x="22" y="9" width="3" height="6" rx="1" fill="#606060"/>242        <rect x="4" y="8" width="12" height="8" fill="#b5ffb5"/>243      </svg>244    </div>245  </div>246 247  <!-- App header with logo -->248  <div class="app-header">249    <div class="close-btn">250      <svg width="36" height="36" viewBox="0 0 24 24">251        <path d="M6 6 L18 18 M18 6 L6 18" stroke="#444" stroke-width="2" stroke-linecap="round"/>252      </svg>253    </div>254    <div class="logo">IndiGo <small>✈︎</small></div>255  </div>256 257  <!-- Progress bar -->258  <div class="progress-wrap">259    <div class="progress-bar"></div>260  </div>261 262  <!-- Main content -->263  <div class="content">264    <div class="title">Find your next stay</div>265    <div class="subtitle">Search low prices on hotels, homes and much more...</div>266 267    <div class="form-card">268      <!-- Location search -->269      <div class="field search-field">270        <svg class="srch-icon" viewBox="0 0 24 24">271          <circle cx="10" cy="10" r="7" stroke="#6b6f78" stroke-width="2" fill="none"/>272          <line x1="15" y1="15" x2="21" y2="21" stroke="#6b6f78" stroke-width="2" stroke-linecap="round"/>273        </svg>274        <div class="placeholder">Lonavala</div>275      </div>276 277      <!-- Dates -->278      <div class="two-col">279        <div class="date-field">280          <div class="input-label">Check-in date</div>281          <div class="date-row">282            <div class="big-num">1</div>283            <div class="month-text">August 2023</div>284          </div>285        </div>286        <div class="date-field">287          <div class="input-label">Check-out date</div>288          <div class="date-row">289            <div class="big-num">3</div>290            <div class="month-text">August 2023</div>291          </div>292        </div>293      </div>294 295      <!-- Guests and rooms -->296      <div class="triple-col">297        <div class="col-box">298          <div class="input-label">Adults</div>299          <div class="col-value">1</div>300        </div>301        <div class="col-box">302          <div class="input-label">Children</div>303          <div class="col-value">0</div>304        </div>305        <div class="col-box">306          <div class="input-label">Rooms</div>307          <div class="col-value">1</div>308        </div>309      </div>310 311      <!-- Checkbox -->312      <div class="checkbox-row">313        <div class="fake-checkbox"></div>314      </div>315 316      <!-- Search button -->317      <div class="search-btn">Search</div>318    </div>319  </div>320 321  <div class="info-card">Get the latest COVID-19 travel advice</div>322 323  <!-- Bottom gesture bar -->324  <div class="gesture"></div>325</div>326</body>327</html>