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 Planner UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #DFF1F9;15 border-radius: 24px;16 box-shadow: 0 8px 30px rgba(0,0,0,0.08);17 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;18 color: #1E3853;19 }20 21 /* Decorative soft circles */22 .soft-circle {23 position: absolute;24 border-radius: 50%;25 background: rgba(170, 216, 238, 0.5);26 filter: blur(0.3px);27 }28 .soft-circle.c1 { width: 700px; height: 700px; top: -180px; right: -180px; }29 .soft-circle.c2 { width: 520px; height: 520px; top: 240px; left: -180px; opacity: 0.35; }30 31 /* Status bar */32 .status-bar {33 position: absolute;34 top: 18px;35 left: 0;36 right: 0;37 height: 64px;38 display: flex;39 align-items: center;40 padding: 0 40px;41 font-size: 34px;42 color: #2B3E52;43 }44 .status-left { flex: 1; }45 .status-right {46 display: flex;47 gap: 28px;48 align-items: center;49 }50 .status-icon svg { width: 36px; height: 36px; fill: #2B3E52; }51 52 /* Main content */53 .content {54 position: absolute;55 top: 110px;56 left: 28px;57 right: 28px;58 padding: 24px;59 }60 61 .card {62 background: #FFFFFF;63 border-radius: 44px;64 box-shadow: 0 14px 40px rgba(0,0,0,0.08);65 padding: 44px;66 }67 68 .brand-mark {69 width: 84px;70 height: 84px;71 margin: 8px auto 18px;72 background: #F4A934;73 border-radius: 18px;74 transform: rotate(45deg);75 position: relative;76 }77 .brand-mark:after {78 content: "";79 position: absolute;80 left: 50%; top: 50%;81 width: 44px; height: 22px;82 border: 6px solid rgba(255,255,255,0.9);83 border-top: none; border-left: none; border-right: none;84 border-bottom-left-radius: 40px; border-bottom-right-radius: 40px;85 transform: translate(-50%, -10%);86 }87 88 .title {89 text-align: center;90 font-weight: 800;91 font-size: 64px;92 line-height: 72px;93 margin: 6px 24px 28px;94 color: #1C2F49;95 }96 97 .field {98 background: #EAF1F5;99 border-radius: 28px;100 padding: 26px 34px;101 margin: 18px 0;102 position: relative;103 }104 .field .label {105 font-size: 30px;106 color: #72859B;107 margin-bottom: 8px;108 }109 .field .value {110 font-size: 42px;111 font-weight: 800;112 color: #1F3650;113 }114 .muted {115 color: #7A93AB;116 font-weight: 600;117 }118 119 .swap-icon {120 position: absolute;121 right: 18px;122 top: 50%;123 transform: translateY(-50%);124 width: 82px; height: 82px;125 background: #FFFFFF;126 border-radius: 24px;127 display: flex; align-items: center; justify-content: center;128 box-shadow: 0 4px 10px rgba(0,0,0,0.06);129 }130 .swap-icon svg { width: 40px; height: 40px; stroke: #6E8AA4; }131 132 .row {133 display: flex;134 gap: 24px;135 }136 .row .cell { flex: 1; }137 .field.small { padding: 24px 28px; min-height: 152px; }138 .field.small .value { font-size: 40px; font-weight: 700; }139 140 .search-btn {141 margin-top: 26px;142 background: #3E86FF;143 color: #FFFFFF;144 border: none;145 border-radius: 36px;146 height: 120px;147 font-size: 44px;148 font-weight: 800;149 display: flex;150 align-items: center;151 justify-content: center;152 gap: 18px;153 box-shadow: inset 0 0 0 6px rgba(255,255,255,0.25);154 }155 .search-btn svg { width: 46px; height: 46px; fill: #FFFFFF; }156 157 .ideas {158 margin-top: 36px;159 padding: 10px 8px;160 }161 .ideas h3 {162 margin: 30px 20px 22px;163 font-size: 44px;164 color: #3C5671;165 }166 167 .cards {168 display: grid;169 grid-template-columns: 1fr 1fr;170 gap: 28px;171 padding: 0 12px 220px 12px; /* leave space above nav */172 }173 174 .idea-card {175 position: relative;176 border-radius: 40px;177 overflow: hidden;178 background: #CCE3F2;179 }180 .idea-image {181 width: 100%;182 height: 420px;183 background: #E0E0E0;184 border: 1px solid #BDBDBD;185 display: flex; align-items: center; justify-content: center;186 color: #757575;187 font-size: 34px;188 }189 .idea-info {190 position: absolute;191 left: 24px;192 right: 24px;193 bottom: 22px;194 background: #FFFFFF;195 border-radius: 34px;196 padding: 24px 26px;197 box-shadow: 0 10px 24px rgba(0,0,0,0.08);198 }199 .idea-info .sub {200 font-size: 30px;201 color: #7D8EA3;202 margin-bottom: 6px;203 font-weight: 700;204 }205 .idea-info .main {206 font-size: 42px;207 font-weight: 800;208 color: #1D334D;209 }210 211 /* Bottom navigation */212 .tabbar {213 position: absolute;214 left: 0; right: 0; bottom: 46px;215 height: 170px;216 background: #FFFFFF;217 border-top-left-radius: 26px; border-top-right-radius: 26px;218 box-shadow: 0 -8px 22px rgba(0,0,0,0.08);219 display: flex;220 align-items: center;221 justify-content: space-around;222 padding-bottom: 12px;223 }224 .tab {225 display: flex;226 flex-direction: column;227 align-items: center;228 gap: 12px;229 color: #7B8FA6;230 font-size: 26px;231 font-weight: 800;232 letter-spacing: 0.5px;233 }234 .tab svg { width: 52px; height: 52px; }235 .tab.active { color: #3178FF; }236 .tab.active svg path, .tab.active svg circle { stroke: #3178FF; fill: #3178FF; }237 238 /* Home indicator */239 .home-indicator {240 position: absolute;241 left: 50%;242 bottom: 10px;243 transform: translateX(-50%);244 width: 360px; height: 10px;245 background: #0A0A0A;246 border-radius: 8px;247 opacity: 0.95;248 }249 250 /* Utilities */251 .pill { border-radius: 30px; }252 .right { text-align: right; }253</style>254</head>255<body>256 <div id="render-target">257 <div class="soft-circle c1"></div>258 <div class="soft-circle c2"></div>259 260 <!-- Status Bar -->261 <div class="status-bar">262 <div class="status-left">2:47</div>263 <div class="status-right">264 <span class="status-icon" title="mail">265 <svg viewBox="0 0 24 24"><path d="M3 6h18v12H3z" fill="none" stroke="#2B3E52" stroke-width="2"/><path d="M3 7l9 6 9-6" fill="none" stroke="#2B3E52" stroke-width="2"/></svg>266 </span>267 <span class="status-icon" title="cast">268 <svg viewBox="0 0 24 24"><path d="M3 18h3" stroke="#2B3E52" stroke-width="2" fill="none"/><path d="M3 14h7" stroke="#2B3E52" stroke-width="2" fill="none"/><path d="M3 10h11" stroke="#2B3E52" stroke-width="2" fill="none"/><rect x="8" y="5" width="13" height="14" rx="2" ry="2" fill="none" stroke="#2B3E52" stroke-width="2"/></svg>269 </span>270 <span class="status-icon" title="signal">271 <svg viewBox="0 0 24 24"><path d="M2 20h3v-4H2zM7 20h3v-7H7zM12 20h3v-10h-3zM17 20h3V6h-3z" fill="#2B3E52"/></svg>272 </span>273 <span class="status-icon" title="battery">274 <svg viewBox="0 0 26 24">275 <rect x="1" y="6" width="20" height="12" rx="2" ry="2" fill="none" stroke="#2B3E52" stroke-width="2"/>276 <rect x="3" y="8" width="16" height="8" fill="#2B3E52"/>277 <rect x="22" y="9" width="3" height="6" rx="1" fill="#2B3E52"/>278 </svg>279 </span>280 </div>281 </div>282 283 <div class="content">284 <div class="card">285 <div class="brand-mark"></div>286 <div class="title">What are your travel plans?</div>287 288 <div class="field">289 <div class="label">From</div>290 <div class="value">Brussels City Center - Midi Train station, …</div>291 <div class="swap-icon" aria-hidden="true">292 <svg viewBox="0 0 24 24" fill="none">293 <path d="M8 4v8M5 7l3-3 3 3" stroke-width="2" stroke="#6E8AA4" stroke-linecap="round" stroke-linejoin="round"/>294 <path d="M16 20v-8M19 17l-3 3-3-3" stroke-width="2" stroke="#6E8AA4" stroke-linecap="round" stroke-linejoin="round"/>295 </svg>296 </div>297 </div>298 299 <div class="field">300 <div class="label">To</div>301 <div class="value">Gajnice Train Station, <span class="muted">Zagreb</span></div>302 </div>303 304 <div class="row">305 <div class="cell">306 <div class="field small">307 <div class="label">Date • <span class="muted">Tomorrow</span></div>308 <div class="value">Fri, Nov 10</div>309 </div>310 </div>311 <div class="cell">312 <div class="field small">313 <div class="label"> </div>314 <div class="value">+ <span class="muted">Return</span></div>315 </div>316 </div>317 </div>318 319 <div class="field">320 <div class="label">Passengers</div>321 <div class="value">1 Adult</div>322 </div>323 324 <button class="search-btn">325 <svg viewBox="0 0 24 24">326 <path d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1 0 14 15.5l.27.28v.79L20 22l2-2-6.5-6.5zM5 10.5A5.5 5.5 0 1 1 10.5 16 5.5 5.5 0 0 1 5 10.5z"/>327 </svg>328 Search329 </button>330 </div>331 332 <div class="ideas">333 <h3>Ideas for your next trip</h3>334 335 <div class="cards">336 <!-- Idea card 1 -->337 <div class="idea-card">338 <div class="idea-image">[IMG: Statue of Liberty skyline]</div>339 <div class="idea-info">340 <div class="sub">Boston</div>341 <div class="main">New York</div>342 </div>343 </div>344 345 <!-- Idea card 2 -->346 <div class="idea-card">347 <div class="idea-image">[IMG: Retro diner neon lights]</div>348 <div class="idea-info">349 <div class="sub">Miami</div>350 <div class="main">Orlando</div>351 </div>352 </div>353 </div>354 </div>355 </div>356 357 <!-- Bottom navigation -->358 <div class="tabbar">359 <div class="tab active">360 <svg viewBox="0 0 24 24"><path d="M10.5 3a7.5 7.5 0 105.2 12.8L22 22l-2 2-6.3-5.8A7.5 7.5 0 0010.5 3z" fill="none" stroke="#7B8FA6" stroke-width="2"/></svg>361 <div>SEARCH</div>362 </div>363 <div class="tab">364 <svg viewBox="0 0 24 24">365 <rect x="3" y="7" width="18" height="12" rx="2" ry="2" fill="none" stroke="#7B8FA6" stroke-width="2"/>366 <path d="M8 7V5a4 4 0 018 0v2" fill="none" stroke="#7B8FA6" stroke-width="2"/>367 </svg>368 <div>TRIPS</div>369 </div>370 <div class="tab">371 <svg viewBox="0 0 24 24">372 <circle cx="12" cy="12" r="10" fill="none" stroke="#7B8FA6" stroke-width="2"/>373 <path d="M12 17v-1.5a3 3 0 10-3-3" fill="none" stroke="#7B8FA6" stroke-width="2" stroke-linecap="round"/>374 <circle cx="12" cy="18.5" r="1" fill="#7B8FA6"/>375 </svg>376 <div>HELP</div>377 </div>378 <div class="tab">379 <svg viewBox="0 0 24 24">380 <circle cx="12" cy="8" r="4" fill="none" stroke="#7B8FA6" stroke-width="2"/>381 <path d="M4 20c2-4 6-6 8-6s6 2 8 6" fill="none" stroke="#7B8FA6" stroke-width="2" stroke-linecap="round"/>382 </svg>383 <div>PROFILE</div>384 </div>385 </div>386 387 <div class="home-indicator"></div>388 </div>389</body>390</html>