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: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;13 color: #26364D;14 }15 #render-target {16 width: 1080px;17 height: 2400px;18 position: relative;19 overflow: hidden;20 background: #DDF0F7;21 }22 /* Status bar */23 .status-bar {24 position: absolute;25 top: 0;26 left: 0;27 width: 1080px;28 height: 140px;29 background: #FFFFFF;30 display: flex;31 align-items: center;32 justify-content: space-between;33 padding: 0 40px;34 box-sizing: border-box;35 }36 .status-left {37 font-size: 38px;38 letter-spacing: 0.5px;39 color: #2F3D56;40 }41 .status-right {42 display: flex;43 gap: 28px;44 align-items: center;45 }46 .icon {47 width: 44px;48 height: 44px;49 }50 51 /* Main card */52 .main-card {53 position: absolute;54 top: 160px;55 left: 40px;56 width: 1000px;57 background: #FFFFFF;58 border-radius: 56px;59 box-shadow: 0 10px 30px rgba(31, 60, 85, 0.14);60 padding: 54px 48px 38px 48px;61 box-sizing: border-box;62 }63 .logo-mark {64 width: 72px;65 height: 72px;66 background: #F6B62C;67 border-radius: 16px;68 margin: 0 auto 28px;69 position: relative;70 }71 .logo-mark::after {72 content: '';73 position: absolute;74 left: 18px;75 top: 22px;76 width: 36px;77 height: 20px;78 border-radius: 20px 20px 0 0;79 border: 6px solid rgba(255,255,255,0.9);80 border-bottom: none;81 }82 .card-title {83 text-align: center;84 font-weight: 800;85 font-size: 64px;86 line-height: 74px;87 margin-bottom: 48px;88 color: #1F344F;89 }90 .field {91 background: #EEF4F7;92 border-radius: 28px;93 padding: 26px 32px;94 margin-bottom: 26px;95 position: relative;96 }97 .field-label {98 font-size: 32px;99 color: #6D819C;100 margin-bottom: 10px;101 }102 .field-value {103 font-weight: 800;104 font-size: 44px;105 color: #2A3E5A;106 }107 .field-placeholder {108 font-weight: 600;109 font-size: 44px;110 color: #94A6BB;111 }112 .swap-bubble {113 position: absolute;114 right: 16px;115 top: 16px;116 width: 78px;117 height: 78px;118 background: #FFFFFF;119 border-radius: 22px;120 box-shadow: 0 3px 6px rgba(0,0,0,0.08);121 display: flex;122 align-items: center;123 justify-content: center;124 }125 .dual-row {126 display: flex;127 gap: 28px;128 margin-top: 6px;129 margin-bottom: 26px;130 }131 .dual-row .field {132 flex: 1;133 margin: 0;134 min-height: 160px;135 }136 .sub-label {137 font-size: 34px;138 color: #6D819C;139 }140 .sub-link {141 color: #3A73B5;142 font-weight: 700;143 }144 .search-bar {145 margin-top: 14px;146 background: linear-gradient(180deg, #9ED1FF 0%, #78B9F4 100%);147 border-radius: 44px;148 height: 140px;149 display: flex;150 align-items: center;151 justify-content: center;152 color: #EAF6FF;153 font-weight: 800;154 font-size: 48px;155 letter-spacing: 0.5px;156 }157 .search-bar svg {158 margin-right: 20px;159 width: 56px;160 height: 56px;161 opacity: 0.9;162 }163 164 /* Ideas section */165 .ideas {166 position: absolute;167 left: 40px;168 top: 1200px;169 width: 1000px;170 }171 .ideas-title {172 font-weight: 800;173 font-size: 54px;174 color: #2A3E5A;175 margin-bottom: 34px;176 }177 .cards-row {178 display: flex;179 gap: 32px;180 }181 .idea-card {182 width: 484px;183 border-radius: 40px;184 overflow: hidden;185 position: relative;186 background: #FFFFFF;187 box-shadow: 0 12px 26px rgba(31, 60, 85, 0.12);188 }189 .idea-image {190 width: 100%;191 height: 540px;192 background: #E0E0E0;193 border-bottom: 1px solid #BDBDBD;194 display: flex;195 align-items: center;196 justify-content: center;197 color: #757575;198 font-weight: 700;199 font-size: 34px;200 }201 .idea-label {202 position: absolute;203 left: 24px;204 bottom: 24px;205 right: 24px;206 background: #FFFFFF;207 border-radius: 34px;208 padding: 26px 28px;209 box-shadow: 0 8px 22px rgba(0,0,0,0.08);210 }211 .idea-sub {212 font-size: 34px;213 color: #6D819C;214 margin-bottom: 6px;215 }216 .idea-main {217 font-size: 48px;218 font-weight: 800;219 color: #1F344F;220 }221 222 /* Bottom nav */223 .bottom-nav {224 position: absolute;225 left: 0;226 bottom: 140px;227 width: 1080px;228 height: 210px;229 background: #FFFFFF;230 border-top-left-radius: 36px;231 border-top-right-radius: 36px;232 box-shadow: 0 -8px 24px rgba(31,60,85,0.12);233 display: flex;234 align-items: center;235 justify-content: space-around;236 padding: 0 40px;237 box-sizing: border-box;238 }239 .nav-item {240 text-align: center;241 color: #7A8CA8;242 }243 .nav-item .icon {244 width: 58px;245 height: 58px;246 margin-bottom: 16px;247 }248 .nav-label {249 font-size: 32px;250 font-weight: 800;251 letter-spacing: 0.4px;252 }253 .nav-item.active {254 color: #3A73B5;255 }256 257 /* Home indicator */258 .home-indicator {259 position: absolute;260 left: 340px;261 bottom: 60px;262 width: 400px;263 height: 14px;264 background: #000000;265 opacity: 0.12;266 border-radius: 12px;267 }268</style>269</head>270<body>271<div id="render-target">272 <!-- Status bar -->273 <div class="status-bar">274 <div class="status-left">2:46</div>275 <div class="status-right">276 <!-- simple indicators -->277 <svg class="icon" viewBox="0 0 24 24">278 <path fill="#5B6D86" d="M3 17h18v2H3zM4 6h16l2 3H2z"/>279 </svg>280 <svg class="icon" viewBox="0 0 24 24">281 <rect x="3" y="7" width="18" height="10" rx="2" ry="2" fill="#5B6D86"/>282 <rect x="21" y="10" width="2" height="4" fill="#5B6D86"/>283 </svg>284 </div>285 </div>286 287 <!-- Main card -->288 <div class="main-card">289 <div class="logo-mark"></div>290 <div class="card-title">What are your travel plans?</div>291 292 <div class="field">293 <div class="field-label">From</div>294 <div class="field-placeholder">Leaving from...</div>295 <div class="swap-bubble">296 <svg class="icon" viewBox="0 0 24 24">297 <path d="M7 4l4 4-4 4M17 20l-4-4 4-4" stroke="#5B6D86" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>298 </svg>299 </div>300 </div>301 302 <div class="field">303 <div class="field-label">To</div>304 <div class="field-value">Gajnice Train Station, <span style="color:#6D819C; font-weight:800;">Zagreb</span></div>305 </div>306 307 <div class="dual-row">308 <div class="field">309 <div class="sub-label">Date • <span class="sub-link">Tomorrow</span></div>310 <div class="field-value" style="margin-top:10px;">Fri, Nov 10</div>311 </div>312 <div class="field" style="display:flex; align-items:center; justify-content:space-between;">313 <div style="display:flex; align-items:center;">314 <svg class="icon" viewBox="0 0 24 24">315 <path d="M12 5v14M5 12h14" stroke="#5B6D86" stroke-width="2" stroke-linecap="round"/>316 </svg>317 <div class="field-value" style="font-size:42px;">Return</div>318 </div>319 </div>320 </div>321 322 <div class="field">323 <div class="field-label">Passengers</div>324 <div class="field-value">1 Adult</div>325 </div>326 327 <div class="search-bar">328 <svg viewBox="0 0 24 24">329 <circle cx="10.5" cy="10.5" r="6.5" stroke="#EAF6FF" stroke-width="2" fill="none"/>330 <path d="M16 16l5 5" stroke="#EAF6FF" stroke-width="2" stroke-linecap="round"/>331 </svg>332 Search333 </div>334 </div>335 336 <!-- Ideas section -->337 <div class="ideas">338 <div class="ideas-title">Ideas for your next trip</div>339 <div class="cards-row">340 <div class="idea-card">341 <div class="idea-image">[IMG: Statue of Liberty]</div>342 <div class="idea-label">343 <div class="idea-sub">Boston</div>344 <div class="idea-main">New York</div>345 </div>346 </div>347 348 <div class="idea-card">349 <div class="idea-image">[IMG: Neon Diner Sign]</div>350 <div class="idea-label">351 <div class="idea-sub">Miami</div>352 <div class="idea-main">Orlando</div>353 </div>354 </div>355 </div>356 </div>357 358 <!-- Bottom navigation -->359 <div class="bottom-nav">360 <div class="nav-item active">361 <svg class="icon" viewBox="0 0 24 24">362 <circle cx="11" cy="11" r="7" stroke="#3A73B5" stroke-width="2" fill="none"/>363 <path d="M16 16l5 5" stroke="#3A73B5" stroke-width="2" stroke-linecap="round"/>364 </svg>365 <div class="nav-label">SEARCH</div>366 </div>367 <div class="nav-item">368 <svg class="icon" viewBox="0 0 24 24">369 <path d="M6 8h12v11H6z" fill="#7A8CA8"/>370 <path d="M9 8V6a3 3 0 0 1 6 0v2" stroke="#7A8CA8" stroke-width="2" fill="none" stroke-linecap="round"/>371 </svg>372 <div class="nav-label">TRIPS</div>373 </div>374 <div class="nav-item">375 <svg class="icon" viewBox="0 0 24 24">376 <circle cx="12" cy="12" r="10" fill="none" stroke="#7A8CA8" stroke-width="2"/>377 <path d="M12 7a3 3 0 0 0-3 3h2a1 1 0 0 1 2 0c0 1-1 1.5-2 2-1 .5-2 1.2-2 3h2c0-1 .5-1.5 1.5-2 .8-.4 2-1.2 2-3 0-2-1.7-3-3.5-3z" fill="#7A8CA8"/>378 <circle cx="12" cy="17.5" r="1.2" fill="#7A8CA8"/>379 </svg>380 <div class="nav-label">HELP</div>381 </div>382 <div class="nav-item">383 <svg class="icon" viewBox="0 0 24 24">384 <circle cx="12" cy="8" r="4" fill="#7A8CA8"/>385 <path d="M4 22c0-4.4 3.6-8 8-8s8 3.6 8 8" fill="none" stroke="#7A8CA8" stroke-width="2" stroke-linecap="round"/>386 </svg>387 <div class="nav-label">PROFILE</div>388 </div>389 </div>390 391 <div class="home-indicator"></div>392</div>393</body>394</html>