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>Flights UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif; color: #212121; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #ffffff;15  }16  /* Status bar */17  .status-bar {18    height: 120px;19    background: #000;20    color: #fff;21    display: flex;22    align-items: center;23    padding: 0 36px;24    box-sizing: border-box;25    font-weight: 600;26    font-size: 34px;27    justify-content: space-between;28  }29  .status-left, .status-right { display: flex; align-items: center; gap: 28px; }30  /* Header */31  .header {32    display: flex;33    align-items: center;34    gap: 24px;35    padding: 32px 36px 20px 36px;36    box-sizing: border-box;37    background: #fff;38  }39  .back-btn {40    width: 64px; height: 64px;41    display: flex; align-items: center; justify-content: center;42  }43  .brand-wrap {44    display: flex; align-items: center; gap: 26px;45  }46  .brand-icon {47    width: 96px; height: 96px; border-radius: 48px; background: #ff7a35;48    display: flex; align-items: center; justify-content: center;49  }50  .title { font-size: 64px; font-weight: 800; letter-spacing: 0.2px; }51  /* Card */52  .card {53    margin: 12px 24px 0 24px;54    background: #fff;55    border-radius: 24px;56    box-shadow: 0 4px 12px rgba(0,0,0,0.08);57    padding: 24px;58    box-sizing: border-box;59  }60  .tabs {61    display: flex; gap: 16px;62  }63  .tab {64    border: 2px solid #CFD8DC;65    color: #455A64;66    padding: 18px 26px;67    border-radius: 16px;68    font-size: 34px;69    font-weight: 700;70    background: #f7f7f8;71  }72  .tab.active {73    border-color: #1976D2;74    color: #1976D2;75    background: #E3F2FD;76  }77  .summary-pill {78    margin-top: 18px;79    display: inline-flex;80    align-items: center;81    gap: 16px;82    background: #F1F3F4;83    border: 2px solid #E0E0E0;84    color: #616161;85    padding: 16px 22px;86    border-radius: 16px;87    font-size: 30px;88    font-weight: 600;89  }90  .fields {91    margin-top: 18px;92    border-top: 2px solid #EEEEEE;93  }94  .row {95    display: grid;96    grid-template-columns: 1fr 1fr;97    gap: 24px;98    padding: 24px 8px;99    border-bottom: 2px solid #EEEEEE;100  }101  .label { color: #757575; font-size: 32px; margin-bottom: 6px; }102  .value { font-size: 60px; font-weight: 800; color: #16202a; }103  .subtext { color: #9E9E9E; font-size: 30px; margin-top: 6px; }104  .swap {105    position: absolute;106    left: 50%;107    transform: translateX(-50%);108    width: 72px; height: 72px; border-radius: 36px; background: #8ea1b4;109    display: flex; align-items: center; justify-content: center;110    top: 710px; /* visually between STR and BER */111    box-shadow: 0 4px 8px rgba(0,0,0,0.12);112  }113  .options {114    padding: 24px 8px 8px 8px;115  }116  .option-card {117    display: flex; align-items: center; gap: 18px;118    background: #fff; border: 2px solid #E0E0E0;119    border-radius: 16px; padding: 16px 18px;120    box-shadow: 0 4px 10px rgba(0,0,0,0.06);121    width: 440px;122  }123  .img-placeholder {124    width: 84px; height: 84px; background: #E0E0E0; border: 1px solid #BDBDBD;125    display: flex; align-items: center; justify-content: center; color: #757575; border-radius: 12px;126    font-size: 22px; text-align: center; padding: 4px; box-sizing: border-box;127  }128  .opt-title { color: #1976D2; font-weight: 800; font-size: 32px; }129  .opt-sub { color: #757575; font-size: 28px; margin-top: 4px; }130  .search-wrap {131    position: relative;132    height: 120px;133  }134  .search-btn {135    position: absolute;136    left: 50%;137    transform: translateX(-50%);138    bottom: -24px;139    background: #ff7a35;140    color: #fff;141    font-size: 44px;142    font-weight: 800;143    border: none;144    border-radius: 60px;145    padding: 24px 52px;146    box-shadow: 0 10px 18px rgba(255,122,53,0.45);147  }148  /* Easy Visa section */149  .section {150    padding: 72px 24px 24px 24px;151  }152  .section-title { font-size: 48px; font-weight: 800; margin-bottom: 24px; }153  .banner {154    position: relative;155    border-radius: 20px;156    overflow: hidden;157    box-shadow: 0 6px 16px rgba(0,0,0,0.12);158  }159  .banner .img {160    height: 360px;161    background: #E0E0E0;162    border: 1px solid #BDBDBD;163    display: flex; align-items: center; justify-content: center; color: #757575;164    font-size: 32px;165  }166  .banner-content {167    position: absolute;168    inset: 0;169    padding: 24px;170    box-sizing: border-box;171    color: #fff;172  }173  .banner-title { font-size: 52px; font-weight: 900; }174  .banner-details { margin-top: 8px; font-size: 34px; display: flex; gap: 22px; align-items: center; }175  .pill {176    position: absolute; top: 20px; right: 20px;177    background: #2ebf6a; color: #fff; font-weight: 800; font-size: 30px;178    padding: 12px 18px; border-radius: 12px;179  }180  .discount {181    position: absolute; bottom: 20px; right: 20px;182    background: #36c46f; color: #0b3a1a; font-weight: 900; font-size: 30px;183    padding: 14px 18px; border-radius: 12px;184  }185  .price-line { margin-top: 20px; font-size: 34px; }186  .price { color: #ffb300; font-size: 48px; font-weight: 900; }187  .dots { display: flex; gap: 14px; justify-content: center; margin: 18px 0 0 0; }188  .dot { width: 16px; height: 16px; border-radius: 8px; background: #cfd8dc; }189  .dot.active { background: #263238; width: 38px; border-radius: 10px; }190  /* Gesture bar */191  .gesture {192    position: absolute;193    bottom: 24px; left: 50%;194    transform: translateX(-50%);195    width: 360px; height: 12px; background: #000; border-radius: 8px;196    opacity: 0.6;197  }198</style>199</head>200<body>201<div id="render-target">202  <!-- Status Bar -->203  <div class="status-bar">204    <div class="status-left">205      <div>12:46</div>206      <svg width="38" height="38" viewBox="0 0 24 24" fill="#fff" aria-hidden="true"><circle cx="12" cy="12" r="10" opacity="0.4"/></svg>207      <svg width="38" height="38" viewBox="0 0 24 24" fill="#fff" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2" opacity="0.4"/></svg>208      <svg width="38" height="38" viewBox="0 0 24 24" fill="#fff" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2" opacity="0.4"/></svg>209      <svg width="8" height="8"><circle cx="4" cy="4" r="4" fill="#fff"/></svg>210    </div>211    <div class="status-right">212      <svg width="34" height="34" viewBox="0 0 24 24"><path d="M12 3a9 9 0 0 0-9 9c0 1.8.52 3.49 1.42 4.91l1.48-1.03A7 7 0 1 1 19 12h2A9 9 0 0 0 12 3z" fill="#fff"/></svg>213      <div style="display:flex;align-items:center;gap:10px;">214        <svg width="44" height="24" viewBox="0 0 26 12">215          <rect x="1" y="1" width="20" height="10" rx="2" fill="none" stroke="#fff" stroke-width="2"/>216          <rect x="3" y="3" width="16" height="6" rx="1" fill="#fff"/>217          <rect x="22" y="4" width="3" height="4" rx="1" fill="#fff"/>218        </svg>219        <div>100%</div>220      </div>221    </div>222  </div>223 224  <!-- Header -->225  <div class="header">226    <div class="back-btn">227      <svg width="56" height="56" viewBox="0 0 24 24">228        <path d="M15 19l-7-7 7-7" fill="none" stroke="#1f2937" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>229      </svg>230    </div>231    <div class="brand-wrap">232      <div class="brand-icon">233        <svg width="56" height="56" viewBox="0 0 24 24">234          <path d="M3 12l7-2 4-6 2 2-3 5 6 3-1 2-6-2-6 4z" fill="#fff"/>235        </svg>236      </div>237      <div class="title">Flights</div>238    </div>239  </div>240 241  <!-- Card -->242  <div class="card">243    <div class="tabs">244      <div class="tab active">One-Way</div>245      <div class="tab">Round Trip</div>246      <div class="tab">Multi-City</div>247    </div>248 249    <div class="summary-pill">250      <svg width="32" height="32" viewBox="0 0 24 24">251        <circle cx="12" cy="12" r="10" fill="#9E9E9E"/>252        <path d="M12 6v6l4 2" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>253      </svg>254      DEL - BOM, Tue, 19 Dec, 2 Adults255    </div>256 257    <div class="fields">258      <div class="row">259        <div>260          <div class="label">From</div>261          <div class="value">STR</div>262          <div class="subtext">Stuttgart</div>263        </div>264        <div style="text-align:right;">265          <div class="label">Destination</div>266          <div class="value">BER</div>267          <div class="subtext">Berlin</div>268        </div>269      </div>270 271      <div class="row">272        <div>273          <div class="label">Depart</div>274          <div class="value">01 Jan' 24</div>275          <div class="subtext">Monday</div>276        </div>277        <div style="text-align:right;">278          <div class="label">Return</div>279          <div class="value" style="color:#0e1726;">Select date</div>280          <div class="subtext">book return</div>281        </div>282      </div>283 284      <div class="row">285        <div>286          <div class="label">Travellers</div>287          <div class="value">2 Adults</div>288        </div>289        <div style="text-align:right;">290          <div class="label">Class</div>291          <div class="value">Economy</div>292        </div>293      </div>294 295      <div class="options">296        <div class="label" style="margin-bottom:16px;">Special options</div>297        <div class="option-card">298          <div class="img-placeholder">[IMG: Student Icon]</div>299          <div>300            <div class="opt-title">STUDENTS</div>301            <div class="opt-sub">ID required</div>302          </div>303        </div>304      </div>305 306      <div class="search-wrap">307        <button class="search-btn">Search</button>308      </div>309    </div>310  </div>311 312  <!-- Swap Icon between fields -->313  <div class="swap">314    <svg width="40" height="40" viewBox="0 0 24 24">315      <path d="M7 8h8l-2-2M17 16H9l2 2" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>316    </svg>317  </div>318 319  <!-- Easy Visa Destinations -->320  <div class="section">321    <div class="section-title">Easy Visa Destinations</div>322    <div class="banner">323      <div class="img">[IMG: Dubai Skyline Banner]</div>324      <div class="banner-content">325        <div class="banner-title">Flights to Dubai</div>326        <div class="banner-details">327          <svg width="32" height="32" viewBox="0 0 24 24"><path d="M2 13l8-2 4-6 2 2-3 5 8 3-1 2-8-2-8 4z" fill="#fff"/></svg>328          Mumbai329          <svg width="32" height="32" viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="14" rx="2" fill="none" stroke="#fff" stroke-width="2"/><line x1="8" y1="9" x2="8" y2="9" stroke="#fff" stroke-width="2"/></svg>330          12th Jan331        </div>332        <div class="price-line">View flights starting at <span class="price">₹10,838</span></div>333        <div class="pill">EASY VISA PROCESS</div>334        <div class="discount">Additional 3% Off Using GIWINGS</div>335      </div>336    </div>337    <div class="dots">338      <div class="dot"></div>339      <div class="dot active"></div>340      <div class="dot"></div>341      <div class="dot"></div>342      <div class="dot"></div>343    </div>344  </div>345 346  <!-- Gesture bar -->347  <div class="gesture"></div>348</div>349</body>350</html>