GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Travel App UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, system-ui, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 }15 16 /* Header gradient area */17 .header {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 560px;23 background: linear-gradient(180deg, #1a57ff 0%, #2e7bff 50%, #7fb6ff 100%);24 }25 26 /* Status bar */27 .status-bar {28 position: absolute;29 top: 20px;30 left: 24px;31 right: 24px;32 height: 40px;33 color: #fff;34 font-size: 26px;35 display: flex;36 justify-content: space-between;37 align-items: center;38 opacity: 0.95;39 }40 .status-right {41 display: flex;42 align-items: center;43 gap: 16px;44 }45 .status-icon {46 width: 28px; height: 28px;47 }48 49 /* Search */50 .search-bar {51 position: absolute;52 top: 140px;53 left: 60px;54 width: 960px;55 height: 110px;56 background: rgba(255,255,255,0.95);57 border-radius: 22px;58 box-shadow: 0 6px 16px rgba(0,0,0,0.08);59 display: flex;60 align-items: center;61 padding: 0 24px;62 gap: 18px;63 }64 .search-bar input {65 border: none;66 outline: none;67 width: 760px;68 font-size: 34px;69 color: #4A4A4A;70 background: transparent;71 }72 .search-actions {73 margin-left: auto;74 display: flex;75 align-items: center;76 gap: 14px;77 }78 .circle-mini {79 width: 46px; height: 46px;80 border-radius: 50%;81 background: #ffc93a;82 display: flex; justify-content: center; align-items: center;83 color: #333; font-weight: 700; font-size: 24px;84 }85 .envelope {86 position: relative;87 width: 46px; height: 46px;88 border-radius: 8px; background: #ffffff;89 display: flex; justify-content: center; align-items: center;90 box-shadow: 0 2px 6px rgba(0,0,0,0.15);91 }92 .badge {93 position: absolute;94 top: -6px; right: -6px;95 background: #ff4d4f; color: #fff;96 font-size: 20px; font-weight: 700;97 width: 30px; height: 30px; border-radius: 50%;98 display: flex; justify-content: center; align-items: center;99 box-shadow: 0 2px 4px rgba(0,0,0,0.2);100 }101 102 /* City chips */103 .chips {104 position: absolute;105 top: 270px;106 left: 50px;107 width: 980px;108 display: flex;109 gap: 16px;110 }111 .chip {112 padding: 16px 26px;113 background: rgba(255,255,255,0.2);114 border: 1px solid rgba(255,255,255,0.4);115 color: #ffffff;116 font-size: 28px;117 border-radius: 50px;118 backdrop-filter: blur(2px);119 white-space: nowrap;120 }121 122 /* Curved white surface for actions + content */123 .surface {124 position: absolute;125 top: 360px;126 left: 0;127 width: 1080px;128 min-height: 1700px;129 background: #fff;130 border-top-left-radius: 40px;131 border-top-right-radius: 40px;132 box-shadow: 0 -10px 20px rgba(0,0,0,0.12);133 padding-top: 40px;134 }135 136 /* Quick actions rows */137 .actions-row {138 display: flex;139 justify-content: space-around;140 padding: 0 24px;141 margin-bottom: 22px;142 }143 .action {144 width: 24%;145 text-align: center;146 }147 .icon-big {148 width: 140px; height: 140px;149 margin: 0 auto 16px auto;150 border-radius: 50%;151 background: radial-gradient(circle at 30% 30%, #6ea6ff, #3b70ff);152 display: flex; align-items: center; justify-content: center;153 }154 .icon-small {155 width: 78px; height: 78px;156 margin: 0 auto 10px auto;157 border-radius: 50%;158 background: radial-gradient(circle at 30% 30%, #bcd3ff, #7aa6ff);159 display: flex; align-items: center; justify-content: center;160 }161 .action label {162 display: block;163 color: #222;164 font-size: 28px;165 line-height: 1.2;166 }167 .sub-label { font-size: 26px; color: #5a5a5a; }168 169 .pager-dots {170 display: flex;171 justify-content: center;172 align-items: center;173 gap: 10px;174 margin: 10px 0 20px 0;175 }176 .dot { width: 10px; height: 10px; border-radius: 50%; background: #8aa8ff; }177 .dot.inactive { background: #d0dbff; }178 179 /* Gift pack card */180 .card {181 width: 980px;182 margin: 20px auto 18px auto;183 background: #fff;184 border-radius: 26px;185 box-shadow: 0 12px 24px rgba(0,0,0,0.08);186 padding: 26px;187 }188 .card-header {189 display: flex; align-items: center; justify-content: space-between;190 margin-bottom: 18px;191 }192 .card-title {193 display: flex; align-items: center; gap: 16px;194 font-size: 34px; color: #1f2a44; font-weight: 700;195 }196 .info {197 width: 26px; height: 26px; border-radius: 50%; background: #e9eefc;198 color: #4a5b86; font-weight: 700; font-size: 22px; display: inline-flex; align-items: center; justify-content: center;199 margin-left: 8px;200 }201 .btn-primary {202 background: #3b70ff; color: #fff; font-weight: 700;203 border: none; border-radius: 16px; padding: 18px 34px; font-size: 30px;204 }205 .coupons {206 display: flex; gap: 18px;207 }208 .coupon {209 flex: 1;210 background: #fde9ef;211 border-radius: 18px;212 padding: 18px;213 position: relative;214 border: 1px solid #f7cbd8;215 }216 .coupon .tag {217 display: inline-block;218 background: #ff6d7a; color: #fff;219 border-radius: 12px; padding: 10px 16px; font-size: 24px; font-weight: 700;220 margin-bottom: 12px;221 }222 .coupon .value {223 font-size: 48px; color: #ff4d68; font-weight: 800;224 }225 .coupon .desc {226 font-size: 28px; color: #a76073; font-weight: 700;227 margin-bottom: 6px;228 }229 230 /* Promotions grid */231 .promo-grid {232 width: 980px;233 margin: 0 auto;234 display: grid;235 grid-template-columns: 1fr 1fr;236 gap: 20px;237 }238 .promo {239 background: #fff;240 border-radius: 24px;241 overflow: hidden;242 box-shadow: 0 10px 22px rgba(0,0,0,0.08);243 }244 .promo-content {245 padding: 20px;246 }247 .promo-title {248 font-size: 34px;249 color: #1f2a44;250 font-weight: 700;251 line-height: 1.2;252 margin-bottom: 8px;253 }254 .promo-sub {255 font-size: 28px; color: #38a169;256 }257 258 /* Image placeholders */259 .img-ph {260 width: 100%;261 height: 280px;262 background: #E0E0E0;263 border: 1px solid #BDBDBD;264 display: flex; justify-content: center; align-items: center;265 color: #757575; font-size: 26px; text-align: center;266 }267 268 /* Bottom handle */269 .handle {270 position: absolute;271 left: 50%;272 transform: translateX(-50%);273 bottom: 210px;274 width: 300px; height: 12px;275 background: #cfcfcf; border-radius: 8px;276 }277 278 /* Bottom nav */279 .bottom-nav {280 position: absolute;281 bottom: 0; left: 0;282 width: 1080px; height: 190px;283 background: #fff;284 border-top: 1px solid #e6e6e6;285 display: flex;286 justify-content: space-around;287 align-items: center;288 }289 .nav-item {290 text-align: center;291 width: 25%;292 color: #8b93a7;293 }294 .nav-item.active { color: #2e6bff; }295 .nav-icon {296 width: 56px; height: 56px; margin: 0 auto 10px auto; display: block;297 }298 .nav-label { font-size: 26px; }299 300 /* SVG helpers */301 svg { display: block; }302 .svg-white path, .svg-white rect, .svg-white circle, .svg-white line, .svg-white polyline { fill: #fff; stroke: #fff; }303 .svg-blue path, .svg-blue rect, .svg-blue circle, .svg-blue line, .svg-blue polyline { fill: #2e6bff; stroke: #2e6bff; }304 .svg-gray path, .svg-gray rect, .svg-gray circle, .svg-gray line, .svg-gray polyline { fill: #8b93a7; stroke: #8b93a7; }305 306</style>307</head>308<body>309<div id="render-target">310 <!-- Header gradient and status -->311 <div class="header"></div>312 <div class="status-bar">313 <div>8:11</div>314 <div class="status-right">315 <svg class="status-icon" viewBox="0 0 24 24">316 <rect x="3" y="8" width="14" height="8" rx="2" fill="#fff"></rect>317 <rect x="18" y="10" width="3" height="4" rx="1" fill="#fff" opacity="0.7"></rect>318 </svg>319 <span style="font-size:24px;">100%</span>320 </div>321 </div>322 323 <!-- Search bar -->324 <div class="search-bar">325 <svg width="40" height="40" viewBox="0 0 24 24">326 <circle cx="11" cy="11" r="7" stroke="#9AA0A6" stroke-width="2" fill="none"></circle>327 <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#9AA0A6" stroke-width="2" stroke-linecap="round"></line>328 </svg>329 <input type="text" value="Bangkok" />330 <div class="search-actions">331 <div class="circle-mini">T</div>332 <div class="envelope">333 <svg width="28" height="28" viewBox="0 0 24 24">334 <rect x="3" y="6" width="18" height="12" rx="3" fill="#3b70ff"></rect>335 <polyline points="3,8 12,13 21,8" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></polyline>336 </svg>337 <div class="badge">1</div>338 </div>339 </div>340 </div>341 342 <!-- City chips -->343 <div class="chips">344 <div class="chip">Bangkok</div>345 <div class="chip">Hong Kong</div>346 <div class="chip">Tokyo</div>347 <div class="chip">Shanghai</div>348 <div class="chip">New York</div>349 </div>350 351 <!-- Curved white surface -->352 <div class="surface">353 <!-- Big actions -->354 <div class="actions-row" style="margin-top: 22px;">355 <div class="action">356 <div class="icon-big">357 <svg class="svg-white" width="80" height="80" viewBox="0 0 24 24">358 <rect x="5" y="7" width="14" height="12" rx="2"></rect>359 <rect x="7" y="9" width="3" height="3" rx="1"></rect>360 <rect x="12" y="9" width="3" height="3" rx="1"></rect>361 <rect x="7" y="14" width="8" height="3" rx="1"></rect>362 </svg>363 </div>364 <label>Hotels</label>365 </div>366 <div class="action">367 <div class="icon-big">368 <svg class="svg-white" width="80" height="80" viewBox="0 0 24 24">369 <path d="M2 12l8 2 2-2 10-4-1.5-2-9 3-3-3-2 1 2 4-6 3z"></path>370 </svg>371 </div>372 <label>Flights</label>373 </div>374 <div class="action">375 <div class="icon-big">376 <svg class="svg-white" width="80" height="80" viewBox="0 0 24 24">377 <rect x="4" y="7" width="16" height="9" rx="2"></rect>378 <rect x="6" y="9" width="4" height="3" rx="1"></rect>379 <rect x="14" y="9" width="4" height="3" rx="1"></rect>380 <rect x="3" y="17" width="18" height="2" rx="1"></rect>381 </svg>382 </div>383 <label>Trains</label>384 </div>385 <div class="action">386 <div class="icon-big">387 <svg class="svg-white" width="80" height="80" viewBox="0 0 24 24">388 <circle cx="12" cy="12" r="7"></circle>389 <circle cx="12" cy="12" r="3" fill="#3b70ff"></circle>390 </svg>391 </div>392 <label>Attractions & Tours</label>393 </div>394 </div>395 396 <!-- Small actions -->397 <div class="actions-row" style="margin-top: 10px;">398 <div class="action">399 <div class="icon-small">400 <svg class="svg-white" width="48" height="48" viewBox="0 0 24 24">401 <rect x="6" y="9" width="8" height="8" rx="2"></rect>402 <path d="M2 10l6 1 1-1 11-3-1-2-10 3-3-3-2 1 2 4-4 2z"></path>403 </svg>404 </div>405 <span class="sub-label">Bundle & Save</span>406 </div>407 <div class="action">408 <div class="icon-small">409 <svg class="svg-white" width="48" height="48" viewBox="0 0 24 24">410 <path d="M5 16h14l-2 3H7l-2-3z"></path>411 <circle cx="8" cy="19" r="2"></circle>412 <circle cx="16" cy="19" r="2"></circle>413 <polyline points="4,8 10,6 14,7" fill="none" stroke="#fff" stroke-width="2"></polyline>414 </svg>415 </div>416 <span class="sub-label">Airport Transfers</span>417 </div>418 <div class="action">419 <div class="icon-small">420 <svg class="svg-white" width="48" height="48" viewBox="0 0 24 24">421 <path d="M5 16h14l-2 3H7l-2-3z"></path>422 <circle cx="8" cy="19" r="2"></circle>423 <circle cx="16" cy="19" r="2"></circle>424 </svg>425 </div>426 <span class="sub-label">Car Rentals</span>427 </div>428 <div class="action">429 <div class="icon-small">430 <svg class="svg-white" width="48" height="48" viewBox="0 0 24 24">431 <path d="M12 4c3.3 0 6 2.7 6 6 0 4.5-6 10-6 10s-6-5.5-6-10c0-3.3 2.7-6 6-6z"></path>432 <circle cx="12" cy="10" r="2" fill="#3b70ff"></circle>433 </svg>434 </div>435 <span class="sub-label">Destinations</span>436 </div>437 </div>438 439 <div class="pager-dots">440 <div class="dot"></div>441 <div class="dot inactive"></div>442 </div>443 444 <!-- Gift Pack card -->445 <div class="card">446 <div class="card-header">447 <div class="card-title">448 <div class="circle-mini" style="background:#7aa6ff;color:#fff;">🎁</div>449 <span>Gift Pack for Your First Booking</span>450 <span class="info">i</span>451 </div>452 <button class="btn-primary">Claim</button>453 </div>454 <div class="coupons">455 <div class="coupon">456 <span class="tag">Hotels</span>457 <div class="desc">Up to</div>458 <div class="value">$ 16 OFF</div>459 </div>460 <div class="coupon">461 <span class="tag">Hotels</span>462 <div class="desc">Gold Tier Trial: Up to</div>463 <div class="value">10% OFF</div>464 </div>465 <div class="coupon">466 <span class="tag" style="background:#ff8a65;">Car Rentals</span>467 <div class="desc">Discount up to</div>468 <div class="value">8% OFF</div>469 </div>470 </div>471 </div>472 473 <!-- Promotions -->474 <div class="promo-grid">475 <div class="promo">476 <div class="img-ph">[IMG: Australia attractions promotion]</div>477 <div class="promo-content" style="background:linear-gradient(180deg,#fff7e6 0,#ffe3ba 100%); border-top:1px solid #f2d6a2;">478 <div style="font-weight:800;color:#c47a1e;font-size:30px;margin-bottom:6px;">Trip.com</div>479 <div class="promo-title" style="color:#c47a1e;">Buy 1, Get 1 Free<br/>Australia attractions</div>480 <div style="color:#8b6b3a;font-size:26px;margin-top:6px;">Valid on weekdays till Dec 29, 2023</div>481 <div style="margin-top:14px;">482 <button style="background:#fff; color:#c47a1e; border:1px solid #c47a1e; border-radius:14px; padding:12px 18px; font-size:26px;">Book Now</button>483 </div>484 </div>485 </div>486 <div class="promo">487 <div class="img-ph">[IMG: Fantasy show banner]</div>488 <div class="promo-content">489 <div class="promo-title">Fantasy Show Ticket in Las Vegas</div>490 <div class="promo-sub">Available for Tomorrow</div>491 </div>492 </div>493 </div>494 495 <!-- Handle bar above bottom nav -->496 <div class="handle"></div>497 </div>498 499 <!-- Bottom navigation -->500 <div class="bottom-nav">501 <div class="nav-item active">502 <svg class="nav-icon svg-blue" viewBox="0 0 24 24">503 <path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1v-9z"></path>504 </svg>505 <div class="nav-label">Home</div>506 </div>507 <div class="nav-item">508 <svg class="nav-icon svg-gray" viewBox="0 0 24 24">509 <circle cx="8" cy="8" r="3"></circle>510 <circle cx="16" cy="16" r="3"></circle>511 <path d="M5 16l10-10" stroke="#8b93a7" stroke-width="2"></path>512 </svg>513 <div class="nav-label">Deals</div>514 </div>515 <div class="nav-item">516 <svg class="nav-icon svg-gray" viewBox="0 0 24 24">517 <rect x="6" y="7" width="12" height="10" rx="2"></rect>518 <rect x="8" y="5" width="8" height="3" rx="1"></rect>519 </svg>520 <div class="nav-label">My Trips</div>521 </div>522 <div class="nav-item">523 <svg class="nav-icon svg-gray" viewBox="0 0 24 24">524 <circle cx="12" cy="8" r="4"></circle>525 <path d="M4 20c0-4 4-7 8-7s8 3 8 7" fill="none" stroke="#8b93a7" stroke-width="2"></path>526 </svg>527 <div class="nav-label">Account</div>528 </div>529 </div>530</div>531</body>532</html>