GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>IndiGo Booking UI - Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 position: relative;9 width: 1080px;10 height: 2400px;11 overflow: hidden;12 background: #ffffff;13 box-sizing: border-box;14 }15 16 /* General */17 .row { display: flex; align-items: center; }18 .pad { padding: 0 40px; }19 .muted { color: #7a7a7a; }20 .label { color: #5d5d5d; font-size: 40px; }21 .chip {22 display: inline-flex; align-items: center; justify-content: center;23 padding: 22px 36px; border-radius: 60px; border: 1px solid #D7D7D7; background: #fff;24 font-size: 40px; color: #2b2b2b; margin-right: 24px;25 }26 .field {27 width: 100%; height: 140px; border: 1px solid #DADADA; border-radius: 28px;28 background: #fff; box-sizing: border-box; padding: 36px; font-size: 46px; color: #1a1a1a;29 }30 .field.small {31 height: 130px; font-size: 44px;32 }33 .blue { color: #0B3BBF; }34 .btn-primary {35 width: 100%; height: 140px; border-radius: 20px; background: #0B3BBF;36 color: #fff; font-size: 56px; font-weight: 700; border: none;37 }38 39 /* Status bar */40 .status-bar { height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 36px; }41 .icon-24 { width: 48px; height: 48px; }42 .icon-28 { width: 56px; height: 56px; }43 .icon-32 { width: 64px; height: 64px; }44 .circle-avatar {45 width: 96px; height: 96px; border-radius: 50%; background: #e9f0ff;46 border: 2px solid #cbd7ff; position: relative; display: flex; align-items: center; justify-content: center; color: #0B3BBF; font-weight: 700;47 }48 .avatar-badge {49 position: absolute; right: -4px; bottom: -4px; width: 44px; height: 44px; border-radius: 50%;50 background: #ffffff; border: 1px solid #DADADA; display: flex; align-items: center; justify-content: center;51 }52 53 /* Header with logo & actions */54 .app-header { padding: 24px 40px; display: flex; align-items: center; justify-content: space-between; }55 .logo { font-size: 80px; font-weight: 800; letter-spacing: 1px; color: #0B3BBF; }56 .logo small { font-size: 64px; margin-left: 10px; }57 58 /* Trip type toggles */59 .trip-types { padding: 10px 40px 10px 40px; display: flex; gap: 36px; }60 .toggle {61 font-size: 48px; color: #2b2b2b; display: flex; align-items: center; gap: 20px;62 }63 .toggle .dot {64 width: 54px; height: 54px; border-radius: 50%; border: 2px solid #BDBDBD;65 }66 .toggle.active .dot {67 background: #0B3BBF; border-color: #0B3BBF;68 position: relative;69 }70 .toggle.active .dot::after {71 content: ""; position: absolute; width: 26px; height: 14px; border-left: 4px solid #fff; border-bottom: 4px solid #fff;72 transform: rotate(-45deg); left: 12px; top: 16px;73 }74 75 /* From-To section */76 .section { padding: 20px 40px; }77 .swap-circle {78 position: absolute; right: 56px; top: 470px; width: 110px; height: 110px; border-radius: 60px; background: #F3F6FF;79 border: 2px solid #E0E6FF; display: flex; align-items: center; justify-content: center;80 }81 82 /* Sub fields row */83 .sub-row { display: flex; gap: 30px; }84 .half { width: calc(50% - 15px); }85 86 /* Currency */87 .currency-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 40px; }88 .currency { font-size: 44px; color: #2b2b2b; }89 90 /* Recent card */91 .card {92 margin: 20px 40px; border: 1px solid #E0E0E0; border-radius: 24px; padding: 36px; background: #fff;93 }94 .card-title { font-size: 54px; font-weight: 700; color: #2b2b2b; display: flex; align-items: center; gap: 18px; }95 .arrow-mid {96 width: 56px; height: 56px; border-radius: 50%; border: 1px solid #D0D0D0; display: inline-flex; align-items: center; justify-content: center;97 }98 .card-sub { margin-top: 14px; font-size: 44px; color: #555; display: flex; justify-content: space-between; }99 100 /* Image placeholder */101 .img-ph {102 width: 100%; height: 480px; background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;103 display: flex; align-items: center; justify-content: center; border-radius: 16px; margin: 20px 0;104 font-size: 42px;105 }106 107 /* Bottom navbar */108 .bottom-bar {109 position: absolute; bottom: 0; left: 0; width: 100%; height: 170px; border-top: 1px solid #E3E3E3; background: #fff;110 display: flex; align-items: center; justify-content: space-around; padding-bottom: 12px;111 }112 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #5d5d5d; font-size: 40px; }113 .nav-item.active { color: #0B3BBF; }114</style>115</head>116<body>117<div id="render-target">118 119 <!-- Status bar -->120 <div class="status-bar">121 <div class="muted" style="font-size:48px;">3:04</div>122 <div class="row" style="gap:22px;">123 <!-- simple wifi -->124 <svg class="icon-24" viewBox="0 0 24 24">125 <path d="M2 8c5-4 15-4 20 0" stroke="#444" stroke-width="2" fill="none"/>126 <path d="M5 12c3-3 11-3 14 0" stroke="#444" stroke-width="2" fill="none"/>127 <path d="M9 16c2-2 6-2 8 0" stroke="#444" stroke-width="2" fill="none"/>128 <circle cx="13" cy="19" r="2" fill="#444"/>129 </svg>130 <!-- battery -->131 <svg class="icon-24" viewBox="0 0 24 24">132 <rect x="1" y="6" width="18" height="12" rx="2" stroke="#444" stroke-width="2" fill="none"/>133 <rect x="3" y="8" width="12" height="8" fill="#444"/>134 <rect x="20" y="9" width="3" height="6" fill="#444"/>135 </svg>136 </div>137 </div>138 139 <!-- App header -->140 <div class="app-header">141 <div class="row" style="gap:20px;">142 <div class="circle-avatar"> <span>👤</span>143 <div class="avatar-badge">144 <svg class="icon-24" viewBox="0 0 24 24">145 <path d="M3 6h18M3 12h18M3 18h10" stroke="#7a7a7a" stroke-width="2" fill="none"/>146 </svg>147 </div>148 </div>149 <div class="logo">IndiGo <small>✈</small></div>150 </div>151 <div class="row" style="gap:24px;">152 <!-- bell -->153 <svg class="icon-32" viewBox="0 0 24 24">154 <path d="M12 22a3 3 0 0 0 3-3H9a3 3 0 0 0 3 3Z" fill="#0B3BBF"/>155 <path d="M18 16H6l1-7a5 5 0 0 1 10 0l1 7Z" stroke="#0B3BBF" stroke-width="2" fill="none"/>156 </svg>157 <!-- chat -->158 <svg class="icon-32" viewBox="0 0 24 24">159 <path d="M3 4h18v12H8l-5 4V4Z" stroke="#0B3BBF" stroke-width="2" fill="none"/>160 <circle cx="9" cy="10" r="1.5" fill="#0B3BBF"/>161 <circle cx="13" cy="10" r="1.5" fill="#0B3BBF"/>162 <circle cx="17" cy="10" r="1.5" fill="#0B3BBF"/>163 </svg>164 </div>165 </div>166 167 <!-- Trip type toggles -->168 <div class="trip-types">169 <div class="toggle"><div class="dot"></div> <span>One Way</span></div>170 <div class="toggle active"><div class="dot"></div> <span>Round Trip</span></div>171 <div class="toggle"><div class="dot"></div> <span>Multi City</span></div>172 </div>173 174 <!-- From and To -->175 <div class="section">176 <div style="font-size:42px; color:#777; letter-spacing:0.5px;">From</div>177 <div class="field" style="margin-top:16px;">Delhi (DEL)</div>178 </div>179 180 <div class="swap-circle">181 <svg viewBox="0 0 24 24" class="icon-28">182 <path d="M7 7h10l-3-3M17 17H7l3 3" stroke="#0B3BBF" stroke-width="2" fill="none" stroke-linecap="round"/>183 </svg>184 </div>185 186 <div class="section" style="padding-top:0;">187 <div style="font-size:42px; color:#777; letter-spacing:0.5px;">To</div>188 <div class="field" style="margin-top:16px;">Srinagar (SXR)</div>189 </div>190 191 <!-- Travel dates and passengers -->192 <div class="section">193 <div class="sub-row">194 <div class="half">195 <div class="label">Travel Date(s)</div>196 <div class="field small row" style="margin-top:14px; justify-content: space-between;">197 <div class="row" style="gap:22px;">198 <svg class="icon-28" viewBox="0 0 24 24">199 <rect x="3" y="5" width="18" height="16" rx="2" stroke="#333" stroke-width="2" fill="none"/>200 <path d="M8 3v4M16 3v4M3 10h18" stroke="#333" stroke-width="2"/>201 </svg>202 <span>10 Aug - 15 Aug</span>203 </div>204 </div>205 </div>206 <div class="half">207 <div class="label">Passenger(s)</div>208 <div class="field small row" style="margin-top:14px; justify-content: space-between;">209 <div class="row" style="gap:22px;">210 <svg class="icon-28" viewBox="0 0 24 24">211 <circle cx="12" cy="8" r="4" stroke="#333" stroke-width="2" fill="none"/>212 <path d="M4 20c0-4 4-6 8-6s8 2 8 6" stroke="#333" stroke-width="2" fill="none"/>213 </svg>214 <span>1 Pax</span>215 </div>216 <svg class="icon-24" viewBox="0 0 24 24">217 <path d="M6 9l6 6 6-6" fill="none" stroke="#777" stroke-width="2"/>218 </svg>219 </div>220 </div>221 </div>222 </div>223 224 <!-- Promo code -->225 <div class="section">226 <div class="field small" placeholder="">Enter Promo Code</div>227 </div>228 229 <!-- Currency -->230 <div class="currency-row">231 <div></div>232 <div class="currency row" style="gap:12px;">233 <span>INR</span>234 <svg class="icon-24" viewBox="0 0 24 24">235 <path d="M6 9l6 6 6-6" fill="none" stroke="#111" stroke-width="2"/>236 </svg>237 </div>238 </div>239 240 <!-- Special Fare options -->241 <div class="section">242 <div class="row" style="gap:16px; align-items:center;">243 <span class="label">Special Fare options</span>244 <svg class="icon-24" viewBox="0 0 24 24">245 <circle cx="12" cy="12" r="10" stroke="#8aa0ff" stroke-width="2" fill="#F4F7FF"/>246 <path d="M12 7v6" stroke="#8aa0ff" stroke-width="2"/>247 <circle cx="12" cy="17" r="1.5" fill="#8aa0ff"/>248 </svg>249 </div>250 <div style="margin-top:24px;">251 <span class="chip">Vaccinated</span>252 <span class="chip">Doctors & Nurses</span>253 <span class="chip">Super 6E Fare254 <span style="width:14px;height:14px;border-radius:50%;background:#F4A33D;display:inline-block;margin-left:18px;"></span>255 </span>256 </div>257 </div>258 259 <!-- Search button -->260 <div class="section">261 <button class="btn-primary">Search Flight</button>262 </div>263 264 <!-- Recent searches -->265 <div class="section" style="padding-top:30px;">266 <div style="font-size:48px; font-weight:700; color:#2b2b2b;">RECENT SEARCHES</div>267 </div>268 269 <div class="card">270 <div class="card-title">271 <span>DEL</span>272 <span class="arrow-mid">273 <svg viewBox="0 0 24 24" class="icon-24">274 <path d="M4 12h16M14 6l6 6-6 6" stroke="#777" stroke-width="2" fill="none"/>275 </svg>276 </span>277 <span>SXR</span>278 </div>279 <div class="card-sub">280 <span class="muted">10 Aug - 15 Aug</span>281 <span class="muted">1 Pax</span>282 </div>283 </div>284 285 <!-- Image gallery placeholders -->286 <div class="pad">287 <div class="img-ph">[IMG: Blue street / travel destination banner]</div>288 <div class="img-ph">[IMG: Scenic banner placeholder]</div>289 </div>290 291 <!-- Bottom navigation bar -->292 <div class="bottom-bar">293 <div class="nav-item">294 <svg viewBox="0 0 24 24" class="icon-32">295 <path d="M3 11l9-7 9 7v9H3v-9Z" stroke="#5d5d5d" stroke-width="2" fill="none"/>296 </svg>297 <div>Home</div>298 </div>299 <div class="nav-item active">300 <svg viewBox="0 0 24 24" class="icon-32">301 <path d="M3 19l10-8-10-8v16Zm11 0h7V3h-7" stroke="#0B3BBF" stroke-width="2" fill="none"/>302 </svg>303 <div>Book</div>304 </div>305 <div class="nav-item">306 <svg viewBox="0 0 24 24" class="icon-32">307 <circle cx="12" cy="12" r="9" stroke="#5d5d5d" stroke-width="2" fill="none"/>308 <path d="M8 12h8" stroke="#5d5d5d" stroke-width="2"/>309 <path d="M12 8v8" stroke="#5d5d5d" stroke-width="2"/>310 </svg>311 <div>Check-in</div>312 </div>313 <div class="nav-item">314 <svg viewBox="0 0 24 24" class="icon-32">315 <circle cx="12" cy="12" r="9" stroke="#5d5d5d" stroke-width="2" fill="none"/>316 <path d="M12 6v6l4 2" stroke="#5d5d5d" stroke-width="2" fill="none"/>317 </svg>318 <div>Flight Status</div>319 </div>320 <div class="nav-item">321 <svg viewBox="0 0 24 24" class="icon-32">322 <rect x="3" y="4" width="18" height="16" rx="2" stroke="#5d5d5d" stroke-width="2" fill="none"/>323 <path d="M7 8h10M7 12h10M7 16h6" stroke="#5d5d5d" stroke-width="2"/>324 </svg>325 <div>My Bookings</div>326 </div>327 </div>328 329</div>330</body>331</html>