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, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;13 color: #1F2C3A;14 }15 #render-target {16 width: 1080px;17 height: 2400px;18 position: relative;19 overflow: hidden;20 background: #DFF1F7;21 border-radius: 32px;22 box-shadow: 0 8px 20px rgba(0,0,0,0.08);23 }24 25 /* Status bar (simplified) */26 .status-bar {27 position: absolute;28 top: 0;29 left: 0;30 width: 1080px;31 height: 140px;32 background: #FFFFFF;33 box-shadow: 0 1px 0 rgba(0,0,0,0.06);34 }35 .status-content {36 position: absolute;37 top: 36px;38 left: 40px;39 right: 40px;40 height: 68px;41 display: flex;42 align-items: center;43 justify-content: space-between;44 color: #2A3140;45 font-weight: 600;46 font-size: 38px;47 letter-spacing: 0.2px;48 }49 .status-icons {50 display: flex;51 align-items: center;52 gap: 24px;53 }54 .status-icon {55 width: 44px;56 height: 44px;57 opacity: 0.85;58 }59 60 /* Main card */61 .card {62 position: absolute;63 top: 180px;64 left: 40px;65 width: 1000px;66 background: #FFFFFF;67 border-radius: 56px;68 box-shadow: 0 10px 24px rgba(18, 62, 96, 0.12);69 padding: 48px 44px 44px 44px;70 }71 .brand-mark {72 width: 80px;73 height: 80px;74 margin: 0 auto 24px auto;75 background: #F5A623;76 border-radius: 18px;77 transform: rotate(45deg);78 box-shadow: 0 3px 8px rgba(0,0,0,0.15);79 position: relative;80 }81 .brand-mark::after {82 content: "";83 position: absolute;84 left: 18px;85 right: 18px;86 bottom: 18px;87 height: 14px;88 border-radius: 14px 14px 0 0;89 background: rgba(255,255,255,0.85);90 transform: rotate(-45deg);91 }92 .card-title {93 text-align: center;94 font-size: 58px;95 line-height: 68px;96 font-weight: 800;97 color: #1D3853;98 margin: 0 0 36px 0;99 }100 101 .field {102 background: #EBF2F5;103 border-radius: 36px;104 padding: 26px 32px;105 margin-bottom: 22px;106 }107 .field.inline {108 display: flex;109 gap: 22px;110 }111 .pill {112 flex: 1;113 background: #EBF2F5;114 border-radius: 36px;115 padding: 26px 32px;116 }117 .label {118 font-size: 28px;119 color: #6C7C90;120 margin-bottom: 8px;121 }122 .value {123 font-size: 44px;124 color: #1F2C3A;125 font-weight: 700;126 }127 .value.secondary {128 font-weight: 600;129 color: #627389;130 }131 132 /* Swap icon bubble at right of From field */133 .field.from {134 position: relative;135 padding-right: 96px;136 }137 .swap-bubble {138 position: absolute;139 right: 22px;140 top: 22px;141 width: 92px;142 height: 92px;143 background: #FFFFFF;144 border-radius: 28px;145 box-shadow: 0 3px 8px rgba(0,0,0,0.08);146 display: flex;147 align-items: center;148 justify-content: center;149 }150 151 /* Search button */152 .search-btn {153 margin-top: 24px;154 background: #4D87FF;155 border-radius: 46px;156 padding: 30px 40px;157 display: flex;158 align-items: center;159 justify-content: center;160 gap: 22px;161 color: #FFFFFF;162 font-size: 42px;163 font-weight: 800;164 box-shadow: 0 12px 22px rgba(77,135,255,0.32);165 }166 .search-btn svg {167 width: 52px;168 height: 52px;169 fill: none;170 stroke: #FFFFFF;171 stroke-width: 6;172 }173 174 /* Ideas section */175 .ideas {176 position: absolute;177 left: 40px;178 right: 40px;179 top: 1210px;180 }181 .ideas h2 {182 margin: 0 0 22px 0;183 font-size: 44px;184 color: #2A4D74;185 font-weight: 800;186 }187 .cards {188 display: flex;189 gap: 28px;190 }191 .trip-card {192 width: 480px;193 border-radius: 40px;194 overflow: visible;195 position: relative;196 }197 .img-placeholder {198 width: 480px;199 height: 420px;200 background: #E0E0E0;201 border: 1px solid #BDBDBD;202 border-radius: 40px;203 display: flex;204 align-items: center;205 justify-content: center;206 color: #757575;207 font-size: 30px;208 text-align: center;209 }210 .trip-label {211 position: absolute;212 left: 16px;213 bottom: -6px;214 background: #FFFFFF;215 border-radius: 36px;216 box-shadow: 0 6px 16px rgba(0,0,0,0.12);217 padding: 22px 28px;218 width: 420px;219 }220 .trip-label .sub {221 font-size: 30px;222 color: #6C7C90;223 margin-bottom: 6px;224 }225 .trip-label .title {226 font-size: 44px;227 font-weight: 800;228 color: #1F2C3A;229 }230 231 /* Bottom nav */232 .bottom-nav {233 position: absolute;234 left: 0;235 bottom: 80px;236 width: 1080px;237 height: 220px;238 background: #FFFFFF;239 box-shadow: 0 -10px 18px rgba(0,0,0,0.08);240 border-top-left-radius: 28px;241 border-top-right-radius: 28px;242 padding-top: 28px;243 }244 .nav-items {245 display: flex;246 justify-content: space-around;247 align-items: center;248 text-align: center;249 }250 .nav-item {251 width: 200px;252 color: #73859A;253 }254 .nav-item .icon-wrap {255 width: 72px;256 height: 72px;257 margin: 0 auto 12px auto;258 }259 .nav-item svg {260 width: 72px;261 height: 72px;262 stroke: #73859A;263 fill: none;264 stroke-width: 6;265 }266 .nav-item .label {267 font-size: 28px;268 font-weight: 700;269 }270 .nav-item.active svg {271 stroke: #3777FF;272 }273 .nav-item.active .label {274 color: #3777FF;275 }276 277 /* Home indicator */278 .home-indicator {279 position: absolute;280 left: 50%;281 transform: translateX(-50%);282 bottom: 24px;283 width: 300px;284 height: 18px;285 background: #111;286 opacity: 0.2;287 border-radius: 12px;288 }289</style>290</head>291<body>292<div id="render-target">293 294 <!-- Status bar -->295 <div class="status-bar"></div>296 <div class="status-content">297 <div>2:50</div>298 <div class="status-icons">299 <svg class="status-icon" viewBox="0 0 24 24">300 <path d="M5 4h14v16H5z" fill="none" stroke="#2A3140" stroke-width="2"></path>301 <path d="M8 7h8v10H8z" fill="none" stroke="#2A3140" stroke-width="2"></path>302 </svg>303 <svg class="status-icon" viewBox="0 0 24 24">304 <path d="M2 16h20M5 12h14M8 8h8M11 4h2" stroke="#2A3140" stroke-width="2" fill="none"></path>305 </svg>306 <svg class="status-icon" viewBox="0 0 24 24">307 <path d="M18 6v12a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V6" stroke="#2A3140" stroke-width="2" fill="none"></path>308 <path d="M9 3h6v3H9z" stroke="#2A3140" stroke-width="2" fill="none"></path>309 </svg>310 </div>311 </div>312 313 <!-- Main card -->314 <div class="card">315 <div class="brand-mark"></div>316 <h1 class="card-title">What are your travel plans?</h1>317 318 <div class="field from">319 <div class="label">From</div>320 <div class="value">Brussels City Center - Midi Train station, …</div>321 <div class="swap-bubble" title="Swap">322 <svg viewBox="0 0 24 24">323 <path d="M12 4v8M9 8l3-3 3 3M12 12v8M9 16l3 3 3-3" stroke="#4D87FF" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>324 </svg>325 </div>326 </div>327 328 <div class="field">329 <div class="label">To</div>330 <div class="value">Antwerp, <span class="value secondary">Antwerp, Belgium</span></div>331 </div>332 333 <div class="field inline">334 <div class="pill">335 <div class="label">Date • <span style="color:#3777FF;font-weight:700;">Tomorrow</span></div>336 <div class="value">Fri, Nov 10</div>337 </div>338 <div class="pill" style="display:flex;align-items:center;gap:18px;">339 <svg viewBox="0 0 24 24" style="width:40px;height:40px;stroke:#6C7C90;">340 <path d="M12 5v14M5 12h14" stroke-width="2.4" fill="none" stroke-linecap="round"></path>341 </svg>342 <div class="value secondary" style="font-size:40px;">Return</div>343 </div>344 </div>345 346 <div class="field">347 <div class="label">Passengers</div>348 <div class="value">1 Adult</div>349 </div>350 351 <div class="search-btn">352 <svg viewBox="0 0 24 24">353 <circle cx="10" cy="10" r="6"></circle>354 <path d="M15 15l6 6"></path>355 </svg>356 <span>Search</span>357 </div>358 </div>359 360 <!-- Ideas section -->361 <div class="ideas">362 <h2>Ideas for your next trip</h2>363 <div class="cards">364 <div class="trip-card">365 <div class="img-placeholder">[IMG: Statue of Liberty]</div>366 <div class="trip-label">367 <div class="sub">Boston</div>368 <div class="title">New York</div>369 </div>370 </div>371 <div class="trip-card">372 <div class="img-placeholder">[IMG: Neon Drive-In Diner]</div>373 <div class="trip-label">374 <div class="sub">Miami</div>375 <div class="title">Orlando</div>376 </div>377 </div>378 </div>379 </div>380 381 <!-- Bottom navigation -->382 <div class="bottom-nav">383 <div class="nav-items">384 <div class="nav-item active">385 <div class="icon-wrap">386 <svg viewBox="0 0 24 24">387 <circle cx="11" cy="11" r="6"></circle>388 <path d="M15.5 15.5L22 22"></path>389 </svg>390 </div>391 <div class="label">SEARCH</div>392 </div>393 <div class="nav-item">394 <div class="icon-wrap">395 <svg viewBox="0 0 24 24">396 <rect x="4" y="8" width="16" height="10" rx="2"></rect>397 <path d="M8 8V6h8v2"></path>398 </svg>399 </div>400 <div class="label">TRIPS</div>401 </div>402 <div class="nav-item">403 <div class="icon-wrap">404 <svg viewBox="0 0 24 24">405 <circle cx="12" cy="5" r="2"></circle>406 <path d="M12 9c2.5 0 4 1.2 4 3 0 1.3-1 2.3-2.6 2.8M12 17h0"></path>407 </svg>408 </div>409 <div class="label">HELP</div>410 </div>411 <div class="nav-item">412 <div class="icon-wrap">413 <svg viewBox="0 0 24 24">414 <circle cx="12" cy="8" r="4"></circle>415 <path d="M4 20c2.2-3.5 6-4 8-4s5.8.5 8 4" stroke-linecap="round"></path>416 </svg>417 </div>418 <div class="label">PROFILE</div>419 </div>420 </div>421 </div>422 423 <div class="home-indicator"></div>424</div>425</body>426</html>