GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>IndiGo App UI Replica</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13  }14 15  /* Status bar */16  .status-bar {17    height: 100px;18    padding: 20px 28px;19    display: flex;20    align-items: center;21    justify-content: space-between;22    color: #212121;23    font-weight: 600;24    font-size: 36px;25  }26  .status-icons { display: flex; gap: 24px; align-items: center; }27  .status-icons svg { width: 44px; height: 44px; }28 29  /* Header */30  .app-header {31    padding: 10px 28px 0 28px;32    height: 140px;33    display: flex;34    align-items: center;35    justify-content: space-between;36  }37  .avatar {38    width: 84px;39    height: 84px;40    border-radius: 50%;41    background: #e9f0ff;42    border: 2px solid #d7e3ff;43    display: flex;44    align-items: center;45    justify-content: center;46  }47  .brand {48    font-size: 60px;49    font-weight: 700;50    color: #1a2ea8;51    letter-spacing: 0.5px;52  }53  .header-actions { display: flex; gap: 36px; }54  .header-actions .icon {55    width: 64px; height: 64px;56    border-radius: 16px;57    display: flex; align-items: center; justify-content: center;58    color: #3b3b3b;59  }60  .header-actions svg { width: 48px; height: 48px; }61 62  /* New badge */63  .new-badge {64    position: absolute;65    left: 470px; top: 270px;66    background: #d8f4dc;67    color: #1a7f34;68    border: 1px solid #a8e5b3;69    border-radius: 30px;70    padding: 10px 20px;71    font-size: 28px;72    font-weight: 700;73  }74 75  /* Quick actions grid */76  .actions-grid {77    padding: 18px 28px 0 28px;78  }79  .grid-row {80    display: flex;81    justify-content: space-between;82    margin-top: 26px;83  }84  .action-item {85    width: 240px;86    display: flex;87    flex-direction: column;88    align-items: center;89    gap: 20px;90  }91  .circle {92    width: 170px;93    height: 170px;94    border-radius: 50%;95    background: #eef5ff;96    border: 1px solid #d7e1ff;97    display: flex;98    align-items: center;99    justify-content: center;100  }101  .circle svg { width: 90px; height: 90px; stroke: #2f3dd9; }102  .label {103    font-size: 34px;104    color: #202124;105    text-align: center;106    line-height: 40px;107    font-weight: 600;108  }109 110  /* Recent searches */111  .section-title {112    margin: 28px;113    font-size: 36px;114    font-weight: 700;115    color: #5a5a5a;116  }117  .recent-card {118    margin: 0 28px;119    width: 1024px;120    height: 160px;121    border: 1px solid #dcdcdc;122    border-radius: 28px;123    display: flex;124    align-items: center;125    padding: 0 32px;126    gap: 28px;127    background: #ffffff;128    box-shadow: 0 4px 12px rgba(0,0,0,0.05);129  }130  .recent-airport {131    font-size: 54px;132    font-weight: 800;133    color: #1f1f1f;134    width: 180px;135  }136  .arrow {137    width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;138  }139  .recent-meta {140    font-size: 32px; color: #606770;141    margin-left: auto;142    text-align: right;143  }144 145  /* Banners */146  .promo {147    margin: 30px 28px;148    width: 1024px;149    height: 720px;150    background: #E0E0E0;151    border: 1px solid #BDBDBD;152    border-radius: 20px;153    display: flex;154    align-items: center;155    justify-content: center;156    color: #757575;157    font-size: 40px;158    text-align: center;159  }160  .mid-banner {161    margin: 20px 28px 220px 28px;162    width: 1024px;163    height: 320px;164    background: #E0E0E0;165    border: 1px solid #BDBDBD;166    border-radius: 20px;167    display: flex; align-items: center; justify-content: center;168    color: #757575; font-size: 42px; font-weight: 700;169  }170 171  /* Bottom nav */172  .bottom-nav {173    position: absolute;174    bottom: 0; left: 0;175    width: 1080px;176    height: 170px;177    border-top: 1px solid #e6e6e6;178    background: #ffffff;179    display: flex;180    justify-content: space-around;181    align-items: center;182    padding: 10px 0;183  }184  .nav-item {185    display: flex;186    flex-direction: column;187    align-items: center;188    gap: 14px;189  }190  .nav-item svg { width: 60px; height: 60px; stroke: #6b6b6b; }191  .nav-item.active svg { stroke: #2f3dd9; }192  .nav-item span { font-size: 30px; color: #6b6b6b; }193  .nav-item.active span { color: #2f3dd9; font-weight: 700; }194</style>195</head>196<body>197<div id="render-target">198 199  <!-- Status Bar -->200  <div class="status-bar">201    <div>3:04</div>202    <div class="status-icons">203      <!-- WiFi -->204      <svg viewBox="0 0 24 24" fill="none" stroke="#424242" stroke-width="2">205        <path d="M2 8c5-4 15-4 20 0" />206        <path d="M5 12c3-3 11-3 14 0" />207        <path d="M8 16c2-2 6-2 8 0" />208        <circle cx="12" cy="20" r="1.8" fill="#424242"/>209      </svg>210      <!-- Battery -->211      <svg viewBox="0 0 28 18" fill="none" stroke="#424242" stroke-width="2">212        <rect x="1" y="3" width="22" height="12" rx="2" />213        <rect x="24" y="6" width="3" height="6" rx="1" />214        <rect x="3" y="5" width="12" height="8" fill="#424242" stroke="none"/>215      </svg>216    </div>217  </div>218 219  <!-- Header -->220  <div class="app-header">221    <div class="avatar">222      <svg viewBox="0 0 24 24" stroke="#3b4fd9" fill="none" stroke-width="2">223        <circle cx="12" cy="9" r="4"></circle>224        <path d="M4 21c2-4 14-4 16 0" />225        <path d="M6 6h6M6 10h9" />226      </svg>227    </div>228    <div class="brand">IndiGo ✈</div>229    <div class="header-actions">230      <div class="icon">231        <!-- Bell -->232        <svg viewBox="0 0 24 24" fill="none" stroke="#3b3b3b" stroke-width="2">233          <path d="M12 3c-3 0-5 2-5 5v3c0 1-1 2-2 3h14c-1-1-2-2-2-3V8c0-3-2-5-5-5z"/>234          <path d="M9 19c1 2 5 2 6 0" />235        </svg>236      </div>237      <div class="icon">238        <!-- Chat -->239        <svg viewBox="0 0 24 24" fill="none" stroke="#3b3b3b" stroke-width="2">240          <path d="M3 4h18v12H8l-5 4z"/>241          <path d="M7 8h10M7 12h8"/>242        </svg>243      </div>244    </div>245  </div>246 247  <!-- New badge near Holidays -->248  <div class="new-badge">(ALL-NEW)</div>249 250  <!-- Quick Actions -->251  <div class="actions-grid">252    <div class="grid-row">253      <div class="action-item">254        <div class="circle">255          <!-- Airplane icon -->256          <svg viewBox="0 0 24 24" fill="none" stroke-width="2">257            <path d="M2 16l7-3 3-9 3 1-2 8 7 3-1 2-7-1-3 3-2-1 2-4-5-1z"/>258          </svg>259        </div>260        <div class="label">Book flight</div>261      </div>262      <div class="action-item">263        <div class="circle">264          <!-- Small jet icon -->265          <svg viewBox="0 0 24 24" fill="none" stroke-width="2">266            <path d="M2 14l6-2 2-6 3 1-1 5 6 2-1 2-5-1-3 3-2-1 2-3-6-1z"/>267          </svg>268        </div>269        <div class="label">Charter</div>270      </div>271      <div class="action-item">272        <div class="circle">273          <!-- Umbrella & lounger -->274          <svg viewBox="0 0 24 24" fill="none" stroke-width="2">275            <path d="M3 10c3-5 15-5 18 0" />276            <path d="M12 10v7" />277            <path d="M6 16h10l2 2H4z" />278          </svg>279        </div>280        <div class="label">6E Holidays</div>281      </div>282      <div class="action-item">283        <div class="circle">284          <!-- Group icon -->285          <svg viewBox="0 0 24 24" fill="none" stroke-width="2">286            <circle cx="8" cy="9" r="3"/>287            <circle cx="16" cy="9" r="3"/>288            <path d="M3 19c2-4 10-4 12 0M9 19c2-3 8-3 10 0"/>289          </svg>290        </div>291        <div class="label">Group bookings</div>292      </div>293    </div>294 295    <div class="grid-row">296      <div class="action-item">297        <div class="circle">298          <!-- Hotel/building -->299          <svg viewBox="0 0 24 24" fill="none" stroke-width="2">300            <rect x="4" y="6" width="16" height="12" rx="1"/>301            <path d="M8 10h2M12 10h2M16 10h2M8 14h2M12 14h2M16 14h2"/>302            <path d="M10 18v3M14 18v3"/>303          </svg>304        </div>305        <div class="label">Hotels</div>306      </div>307      <div class="action-item">308        <div class="circle">309          <!-- Gift voucher -->310          <svg viewBox="0 0 24 24" fill="none" stroke-width="2">311            <rect x="3" y="7" width="18" height="12" rx="2"/>312            <path d="M12 7v12M7 7c1-2 3-2 4 0M17 7c-1-2-3-2-4 0"/>313          </svg>314        </div>315        <div class="label">Gift voucher</div>316      </div>317      <div class="action-item">318        <div class="circle">319          <!-- Suitcase with plane -->320          <svg viewBox="0 0 24 24" fill="none" stroke-width="2">321            <rect x="6" y="8" width="12" height="10" rx="2"/>322            <path d="M9 8V6h6v2"/>323            <path d="M7 13l5-1 1-4 2 .5-1 3 4 1-.5 1.5-4-.5-1.5 2-1-.5 1-2.5-3-.5z"/>324          </svg>325        </div>326        <div class="label">CarterPorter</div>327      </div>328      <div class="action-item">329        <div class="circle">330          <!-- Down caret -->331          <svg viewBox="0 0 24 24" fill="none" stroke-width="2">332            <path d="M6 9l6 6 6-6"/>333          </svg>334        </div>335        <div class="label">More</div>336      </div>337    </div>338  </div>339 340  <!-- Recent Searches -->341  <div class="section-title">RECENT SEARCHES</div>342  <div class="recent-card">343    <div class="recent-airport">DEL</div>344    <div class="arrow">345      <svg viewBox="0 0 24 24" fill="none" stroke="#1f3bd9" stroke-width="2">346        <path d="M2 12h20M12 5l5 7-5 7"/>347      </svg>348    </div>349    <div class="recent-airport">SXR</div>350    <div class="recent-meta">351      10 Aug - 15 Aug<br>1 Pax352    </div>353  </div>354 355  <!-- Promo Banner -->356  <div class="promo">[IMG: IndiGo wild promotional banner with animal fur texture and Nairobi route details]</div>357 358  <!-- Web Check-in Banner -->359  <div class="mid-banner">[IMG: Web check-in for free banner]</div>360 361  <!-- Bottom Navigation -->362  <div class="bottom-nav">363    <div class="nav-item active">364      <svg viewBox="0 0 24 24" fill="none" stroke-width="2">365        <path d="M3 11l9-7 9 7v9H15v-5H9v5H3z"/>366      </svg>367      <span>Home</span>368    </div>369    <div class="nav-item">370      <svg viewBox="0 0 24 24" fill="none" stroke-width="2">371        <path d="M5 5h14v14H5z"/>372        <path d="M12 9v6M9 12h6"/>373      </svg>374      <span>Book</span>375    </div>376    <div class="nav-item">377      <svg viewBox="0 0 24 24" fill="none" stroke-width="2">378        <rect x="3" y="4" width="18" height="16" rx="2"/>379        <path d="M7 4v4M17 4v4"/>380        <path d="M7 14l3 3 7-7"/>381      </svg>382      <span>Check-in</span>383    </div>384    <div class="nav-item">385      <svg viewBox="0 0 24 24" fill="none" stroke-width="2">386        <circle cx="12" cy="12" r="9"/>387        <path d="M12 6v6l4 2"/>388      </svg>389      <span>Flight Status</span>390    </div>391    <div class="nav-item">392      <svg viewBox="0 0 24 24" fill="none" stroke-width="2">393        <rect x="4" y="6" width="16" height="10" rx="2"/>394        <path d="M6 10h12M8 14h8"/>395      </svg>396      <span>My Bookings</span>397    </div>398  </div>399 400</div>401</body>402</html>