GD-ML/AndroidCode
13.4k
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>Travel Plans UI</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;13 color: #19324A;14 }15 #render-target {16 width: 1080px;17 height: 2400px;18 position: relative;19 overflow: hidden;20 background: linear-gradient(180deg, #E6F7FC 0%, #DAF1F8 60%, #E6F7FC 100%);21 }22 23 /* Status bar */24 .status-bar {25 position: absolute;26 top: 0;27 left: 0;28 width: 1080px;29 height: 140px;30 background: #ffffff;31 display: flex;32 align-items: center;33 padding: 0 40px;34 box-sizing: border-box;35 color: #1B2E48;36 }37 .status-left {38 font-size: 32px;39 font-weight: 600;40 }41 .status-right {42 margin-left: auto;43 display: flex;44 align-items: center;45 gap: 28px;46 }47 .status-icon svg {48 width: 40px;49 height: 40px;50 fill: none;51 stroke: #1B2E48;52 stroke-width: 2.5;53 }54 55 /* Main card */56 .search-card {57 position: absolute;58 left: 40px;59 top: 170px;60 width: 1000px;61 background: #ffffff;62 border-radius: 44px;63 box-shadow: 0 12px 24px rgba(21, 58, 102, 0.12);64 padding: 36px 36px 44px;65 box-sizing: border-box;66 }67 .brand-mark {68 width: 68px;69 height: 68px;70 margin: 8px auto 16px;71 transform: rotate(45deg);72 background: #F5B542;73 border-radius: 18px;74 position: relative;75 }76 .brand-mark svg {77 position: absolute;78 left: 50%;79 top: 50%;80 transform: translate(-50%, -35%) rotate(-45deg);81 }82 .card-title {83 text-align: center;84 font-size: 52px;85 line-height: 1.15;86 font-weight: 800;87 margin: 8px 0 28px;88 color: #1C3553;89 }90 91 .field {92 background: #EAF1F4;93 border-radius: 28px;94 padding: 22px 28px;95 margin-bottom: 18px;96 position: relative;97 }98 .field-label {99 font-size: 24px;100 color: #6C839A;101 margin-bottom: 8px;102 }103 .field-value {104 font-size: 36px;105 font-weight: 700;106 color: #172D46;107 }108 .field-subtle {109 font-weight: 500;110 color: #8BA0B3;111 }112 113 .swap-chip {114 position: absolute;115 right: 16px;116 top: 50%;117 transform: translateY(-50%);118 background: #ffffff;119 border-radius: 20px;120 padding: 10px 14px;121 box-shadow: 0 3px 8px rgba(0,0,0,0.08);122 }123 .swap-chip svg {124 width: 28px;125 height: 28px;126 stroke: #6C839A;127 stroke-width: 2.5;128 fill: none;129 }130 131 .row {132 display: flex;133 gap: 22px;134 margin: 6px 0 6px;135 }136 .field-half {137 flex: 1;138 background: #EAF1F4;139 border-radius: 28px;140 padding: 22px 28px;141 position: relative;142 }143 .right-plus {144 position: absolute;145 right: 28px;146 top: 50%;147 transform: translateY(-50%);148 color: #6C839A;149 font-size: 36px;150 font-weight: 700;151 }152 153 .search-btn {154 margin-top: 26px;155 height: 124px;156 background: linear-gradient(180deg, #4B8CFF 0%, #2F73F8 100%);157 border-radius: 42px;158 color: #ffffff;159 display: flex;160 align-items: center;161 justify-content: center;162 gap: 22px;163 box-shadow: inset 0 0 0 8px rgba(255,255,255,0.55), 0 10px 18px rgba(59, 130, 246, 0.24);164 font-size: 40px;165 font-weight: 800;166 letter-spacing: 0.3px;167 }168 .search-btn svg {169 width: 42px;170 height: 42px;171 stroke: #ffffff;172 stroke-width: 3;173 fill: none;174 }175 176 /* Ideas section */177 .ideas {178 position: absolute;179 left: 40px;180 top: 1210px;181 width: 1000px;182 }183 .ideas-title {184 font-size: 36px;185 font-weight: 800;186 color: #305271;187 margin-bottom: 26px;188 }189 .ideas-row {190 display: flex;191 gap: 30px;192 }193 194 .trip-card {195 width: 485px;196 position: relative;197 }198 .trip-image {199 width: 485px;200 height: 480px;201 background: #E0E0E0;202 border: 1px solid #BDBDBD;203 border-radius: 40px;204 display: flex;205 align-items: center;206 justify-content: center;207 color: #757575;208 font-size: 26px;209 text-align: center;210 padding: 12px;211 box-sizing: border-box;212 }213 .trip-label {214 position: absolute;215 left: 20px;216 bottom: -10px;217 background: #ffffff;218 border-radius: 32px;219 padding: 22px 26px;220 width: 420px;221 box-shadow: 0 8px 16px rgba(26, 54, 92, 0.12);222 }223 .trip-city {224 font-size: 28px;225 color: #7D90A6;226 margin-bottom: 4px;227 font-weight: 700;228 }229 .trip-name {230 font-size: 40px;231 font-weight: 800;232 color: #1B2E48;233 }234 235 /* Bottom navigation */236 .bottom-nav {237 position: absolute;238 left: 0;239 bottom: 0;240 width: 1080px;241 height: 200px;242 background: #ffffff;243 border-top: 1px solid #E4E9EE;244 display: flex;245 align-items: center;246 justify-content: space-around;247 box-sizing: border-box;248 padding-bottom: 28px;249 }250 .nav-item {251 width: 220px;252 text-align: center;253 color: #6B829A;254 }255 .nav-item .icon {256 margin: 0 auto 12px;257 width: 54px;258 height: 54px;259 }260 .nav-item svg {261 width: 54px;262 height: 54px;263 stroke: #6B829A;264 stroke-width: 2.5;265 fill: none;266 }267 .nav-item.active svg {268 stroke: #3078F7;269 }270 .nav-item .label {271 font-size: 26px;272 font-weight: 800;273 letter-spacing: 0.2px;274 }275 .nav-item.active .label {276 color: #3078F7;277 }278 279 .home-indicator {280 position: absolute;281 bottom: 12px;282 left: 50%;283 transform: translateX(-50%);284 width: 420px;285 height: 12px;286 background: #0A0A0A;287 border-radius: 8px;288 opacity: 0.85;289 }290</style>291</head>292<body>293<div id="render-target">294 295 <!-- Status bar -->296 <div class="status-bar">297 <div class="status-left">2:51</div>298 <div class="status-right">299 <div class="status-icon">300 <svg viewBox="0 0 24 24">301 <path d="M3 5h18v14H3z"></path>302 <path d="M3 5l9 8 9-8"></path>303 </svg>304 </div>305 <div class="status-icon">306 <svg viewBox="0 0 24 24">307 <path d="M4 6h16v10H9l-5 4V6z"></path>308 </svg>309 </div>310 <div class="status-icon">311 <svg viewBox="0 0 24 24">312 <rect x="3" y="5" width="18" height="12" rx="2"></rect>313 <path d="M8 19h8"></path>314 </svg>315 </div>316 <div class="status-icon">317 <svg viewBox="0 0 24 24">318 <path d="M3 10c4-4 14-4 18 0"></path>319 <path d="M6 13c3-3 9-3 12 0"></path>320 <path d="M9 16c2-2 4-2 6 0"></path>321 </svg>322 </div>323 <div class="status-icon">324 <svg viewBox="0 0 24 24">325 <rect x="3" y="7" width="16" height="10" rx="2"></rect>326 <rect x="20" y="10" width="2" height="4" rx="1"></rect>327 </svg>328 </div>329 </div>330 </div>331 332 <!-- Main card -->333 <div class="search-card">334 <div class="brand-mark">335 <svg viewBox="0 0 48 48" width="42" height="42">336 <path d="M12 24c6 6 18 6 24 0" stroke="#D28824" stroke-width="4" stroke-linecap="round" fill="none"></path>337 <circle cx="18" cy="16" r="2.5" fill="#D28824"></circle>338 <circle cx="30" cy="16" r="2.5" fill="#D28824"></circle>339 </svg>340 </div>341 <div class="card-title">What are your travel plans?</div>342 343 <div class="field">344 <div class="field-label">From</div>345 <div class="field-value">Brussels City Center - Midi Train station, …</div>346 <div class="swap-chip" aria-hidden="true">347 <svg viewBox="0 0 24 24">348 <path d="M8 5v8M5 8l3-3 3 3"></path>349 <path d="M16 19V11M19 16l-3 3-3-3"></path>350 </svg>351 </div>352 </div>353 354 <div class="field">355 <div class="field-label">To</div>356 <div class="field-value">Antwerp, <span class="field-subtle">Antwerp, Belgium</span></div>357 </div>358 359 <div class="row">360 <div class="field-half">361 <div class="field-label">Date</div>362 <div class="field-value">Tue, Nov 14</div>363 </div>364 <div class="field-half">365 <div class="field-label"> </div>366 <div class="field-value"><span class="field-subtle">Return</span></div>367 <div class="right-plus">+</div>368 </div>369 </div>370 371 <div class="field">372 <div class="field-label">Passengers</div>373 <div class="field-value">1 Adult</div>374 </div>375 376 <div class="search-btn">377 <svg viewBox="0 0 24 24">378 <circle cx="11" cy="11" r="7"></circle>379 <path d="M20 20l-4-4"></path>380 </svg>381 Search382 </div>383 </div>384 385 <!-- Ideas section -->386 <div class="ideas">387 <div class="ideas-title">Ideas for your next trip</div>388 <div class="ideas-row">389 <div class="trip-card">390 <div class="trip-image">[IMG: Statue of Liberty with cloudy sky]</div>391 <div class="trip-label">392 <div class="trip-city">Boston</div>393 <div class="trip-name">New York</div>394 </div>395 </div>396 397 <div class="trip-card">398 <div class="trip-image">[IMG: Neon diner sign at night]</div>399 <div class="trip-label">400 <div class="trip-city">Miami</div>401 <div class="trip-name">Orlando</div>402 </div>403 </div>404 </div>405 </div>406 407 <!-- Bottom navigation -->408 <div class="bottom-nav">409 <div class="nav-item active">410 <div class="icon">411 <svg viewBox="0 0 24 24">412 <circle cx="11" cy="11" r="7"></circle>413 <path d="M20 20l-4-4"></path>414 </svg>415 </div>416 <div class="label">SEARCH</div>417 </div>418 <div class="nav-item">419 <div class="icon">420 <svg viewBox="0 0 24 24">421 <rect x="6" y="4" width="12" height="16" rx="2"></rect>422 <path d="M9 8h6M9 12h6M9 16h6"></path>423 </svg>424 </div>425 <div class="label">TRIPS</div>426 </div>427 <div class="nav-item">428 <div class="icon">429 <svg viewBox="0 0 24 24">430 <circle cx="12" cy="12" r="9"></circle>431 <path d="M12 17v-2"></path>432 <path d="M9.5 9.5a3.5 3.5 0 0 1 5 3.2"></path>433 </svg>434 </div>435 <div class="label">HELP</div>436 </div>437 <div class="nav-item">438 <div class="icon">439 <svg viewBox="0 0 24 24">440 <circle cx="12" cy="8" r="4"></circle>441 <path d="M4 20c0-4 4-6 8-6s8 2 8 6"></path>442 </svg>443 </div>444 <div class="label">PROFILE</div>445 </div>446 </div>447 448 <div class="home-indicator"></div>449</div>450</body>451</html>