GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Flights UI</title>6<style>7 body {8 margin: 0;9 padding: 0;10 background: transparent;11 font-family: Arial, Helvetica, sans-serif;12 color: #212121;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #ffffff;20 }21 22 /* Top app bar */23 .status-bar {24 height: 110px;25 background: #0b3d66;26 }27 .header {28 background: #0b5ea9;29 color: #fff;30 padding: 40px 40px 20px 40px;31 }32 .header-title {33 display: flex;34 align-items: center;35 gap: 24px;36 font-size: 58px;37 font-weight: 700;38 }39 .back-icon {40 width: 52px;41 height: 52px;42 }43 .tabs {44 display: flex;45 gap: 80px;46 padding: 30px 40px 0 40px;47 align-items: flex-end;48 height: 140px;49 box-sizing: border-box;50 }51 .tab {52 font-size: 40px;53 letter-spacing: 0.5px;54 color: rgba(255,255,255,0.75);55 }56 .tab.active {57 color: #ffffff;58 position: relative;59 font-weight: 700;60 }61 .tab.active::after {62 content: "";63 position: absolute;64 left: 0;65 bottom: -30px;66 width: 220px;67 height: 8px;68 background: #ffce2e;69 border-radius: 4px;70 }71 72 /* Form card */73 .form-card {74 background: #fff;75 padding: 30px 40px;76 border-top-left-radius: 12px;77 border-top-right-radius: 12px;78 }79 .field {80 padding: 34px 0;81 border-bottom: 1px solid #E0E0E0;82 display: flex;83 align-items: center;84 justify-content: space-between;85 }86 .field:last-child {87 border-bottom: none;88 }89 .label {90 font-size: 34px;91 color: #9E9E9E;92 margin-bottom: 10px;93 }94 .value {95 font-size: 48px;96 font-weight: 700;97 color: #2b2b2b;98 }99 .swap-circle {100 width: 92px;101 height: 92px;102 border-radius: 50%;103 border: 2px solid #BDBDBD;104 display: flex;105 align-items: center;106 justify-content: center;107 margin-left: 20px;108 }109 110 .dates {111 display: grid;112 grid-template-columns: 1fr 1fr;113 gap: 0;114 border-bottom: 1px solid #E0E0E0;115 }116 .date-item {117 padding: 32px 0;118 border-right: 1px solid #E0E0E0;119 }120 .date-item:last-child {121 border-right: none;122 }123 124 .checkbox-row {125 display: flex;126 align-items: center;127 gap: 24px;128 padding: 24px 0 10px 0;129 }130 .checkbox {131 width: 54px;132 height: 54px;133 border: 3px solid #BDBDBD;134 border-radius: 8px;135 box-sizing: border-box;136 background: #fff;137 }138 .checkbox-label {139 font-size: 40px;140 color: #5f5f5f;141 }142 143 /* Action area */144 .action-area {145 background: #f3f3f3;146 padding: 40px;147 box-shadow: inset 0 1px 0 rgba(0,0,0,0.06);148 }149 .btn-primary {150 width: 100%;151 height: 120px;152 background: #0b5ea9;153 color: #fff;154 font-size: 46px;155 font-weight: 800;156 border: none;157 border-radius: 18px;158 box-shadow: 0 6px 0 rgba(0,0,0,0.15);159 margin-bottom: 28px;160 letter-spacing: 1px;161 }162 .btn-secondary {163 width: 100%;164 height: 120px;165 background: #ffffff;166 color: #0b5ea9;167 font-size: 44px;168 font-weight: 800;169 border: 2px solid #D0D0D0;170 border-radius: 18px;171 display: flex;172 align-items: center;173 justify-content: center;174 flex-direction: column;175 }176 .btn-secondary span {177 font-size: 34px;178 color: #9E9E9E;179 font-weight: 600;180 margin-top: 6px;181 }182 183 .divider-yellow {184 height: 10px;185 background: #ffce2e;186 }187 188 /* Recent searches */189 .recent {190 padding: 36px 40px 20px 40px;191 background: #fff;192 }193 .recent h2 {194 font-size: 56px;195 margin: 10px 0 24px 0;196 color: #222;197 }198 .search-item {199 display: flex;200 align-items: flex-start;201 gap: 24px;202 padding: 18px 0;203 }204 .thumb {205 width: 120px;206 height: 120px;207 background: #E0E0E0;208 border: 1px solid #BDBDBD;209 display: flex;210 align-items: center;211 justify-content: center;212 color: #757575;213 border-radius: 10px;214 flex-shrink: 0;215 }216 .item-content {217 flex: 1;218 }219 .item-title {220 font-size: 48px;221 font-weight: 700;222 color: #2b2b2b;223 margin-bottom: 6px;224 }225 .item-sub {226 font-size: 36px;227 color: #757575;228 display: flex;229 gap: 16px;230 align-items: center;231 }232 .price-time {233 font-size: 40px;234 margin-top: 12px;235 display: flex;236 gap: 20px;237 align-items: baseline;238 }239 .price {240 color: #1a73e8;241 font-weight: 800;242 }243 .time-ago {244 color: #9E9E9E;245 font-size: 34px;246 font-weight: 600;247 }248 249 /* Bottom navigation bar */250 .bottom-nav {251 position: absolute;252 left: 0;253 right: 0;254 bottom: 0;255 height: 120px;256 background: #000;257 display: flex;258 align-items: center;259 justify-content: center;260 }261 .home-pill {262 width: 220px;263 height: 16px;264 border-radius: 12px;265 background: #fff;266 opacity: 0.85;267 }268</style>269</head>270<body>271<div id="render-target">272 <div class="status-bar"></div>273 274 <div class="header">275 <div class="header-title">276 <svg class="back-icon" viewBox="0 0 24 24">277 <path fill="#ffffff" d="M15.5 3.5L6 12l9.5 8.5-1.7 2L2 12 13.8 1.5z"/>278 </svg>279 <span>Flights</span>280 </div>281 <div class="tabs">282 <div class="tab active">ROUNDTRIP</div>283 <div class="tab">ONE WAY</div>284 <div class="tab">MULTI-STOP</div>285 </div>286 </div>287 288 <div class="form-card">289 <div class="field">290 <div style="flex:1;">291 <div class="label">Origin</div>292 <div class="value">ORY - Paris, France</div>293 </div>294 <div class="swap-circle">295 <svg width="44" height="44" viewBox="0 0 24 24">296 <path fill="#9E9E9E" d="M8 5l-3 3h6V5H8zm8 14l3-3h-6v3h3zM5 13h14v-2H5v2z"/>297 </svg>298 </div>299 </div>300 301 <div class="field">302 <div style="flex:1;">303 <div class="label">Destination</div>304 <div class="value">FCO - Rome, Italy</div>305 </div>306 </div>307 308 <div class="dates">309 <div class="date-item">310 <div class="label">Departure date</div>311 <div class="value">Fri 20 Oct '23</div>312 </div>313 <div class="date-item">314 <div class="label">Return date</div>315 <div class="value">Sun 22 Oct '23</div>316 </div>317 </div>318 319 <div class="field" style="border-bottom:none;">320 <div style="flex:1;">321 <div class="label">Passengers & Class</div>322 <div class="value">3 passengers, Economy</div>323 </div>324 </div>325 326 <div class="checkbox-row">327 <div class="checkbox"></div>328 <div class="checkbox-label">Only direct flights</div>329 </div>330 </div>331 332 <div class="action-area">333 <button class="btn-primary">SEARCH FLIGHTS</button>334 <div class="btn-secondary">335 SEARCH FLIGHT + HOTEL336 <span>Save up to 40% by booking together!</span>337 </div>338 </div>339 340 <div class="divider-yellow"></div>341 342 <div class="recent">343 <h2>Your recent searches</h2>344 345 <div class="search-item">346 <div class="thumb">[IMG: Paris ↔ Rome]</div>347 <div class="item-content">348 <div class="item-title">Paris ↔ Rome</div>349 <div class="item-sub">350 <span>20 Oct - 22 Oct</span>351 <svg width="36" height="36" viewBox="0 0 24 24">352 <path fill="#757575" d="M12 12c2.8 0 5-2.2 5-5s-2.2-5-5-5-5 2.2-5 5 2.2 5 5 5zm0 2c-3.3 0-10 1.7-10 5v3h20v-3c0-3.3-6.7-5-10-5z"/>353 </svg>354 <span>3</span>355 </div>356 <div class="price-time">357 <span class="price">$ 172.97</span>358 <span class="time-ago">1 minute ago</span>359 </div>360 </div>361 </div>362 363 <div class="search-item">364 <div class="thumb">[IMG: Paris ↔ Rome]</div>365 <div class="item-content">366 <div class="item-title">Paris ↔ Rome</div>367 <div class="item-sub">368 <span>24 Oct - 27 Oct</span>369 <svg width="36" height="36" viewBox="0 0 24 24">370 <path fill="#757575" d="M12 12c2.8 0 5-2.2 5-5s-2.2-5-5-5-5 2.2-5 5 2.2 5 5 5zm0 2c-3.3 0-10 1.7-10 5v3h20v-3c0-3.3-6.7-5-10-5z"/>371 </svg>372 <span>1</span>373 </div>374 <div class="price-time">375 <span class="price">$ 237.21</span>376 <span class="time-ago">2 days ago</span>377 </div>378 </div>379 </div>380 </div>381 382 <div class="bottom-nav">383 <div class="home-pill"></div>384 </div>385</div>386</body>387</html>