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 App UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #EEEEEE;13 border-radius: 28px;14 box-shadow: 0 10px 30px rgba(0,0,0,0.15);15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16 color: #111;17 }18 19 /* Top status bar */20 .status-bar {21 height: 96px;22 display: flex;23 align-items: center;24 padding: 0 40px;25 font-weight: 600;26 color: #2c2c2c;27 font-size: 34px;28 }29 .status-left { flex: 1; }30 .status-right { display: flex; gap: 28px; align-items: center; color: #4b4b4b; font-weight: 500; }31 32 /* Header row */33 .header {34 display: flex;35 align-items: center;36 justify-content: space-between;37 padding: 24px 40px 16px;38 }39 .hamburger {40 width: 56px; height: 40px;41 }42 .hamburger svg { width: 56px; height: 40px; }43 .header-right {44 display: flex; gap: 36px; align-items: center;45 font-size: 34px; color: #222;46 }47 .badge {48 display: inline-flex; align-items: center; gap: 12px;49 }50 .pill {51 background: #FF7157; color: #fff; border-radius: 12px;52 padding: 6px 12px; font-size: 28px; font-weight: 700;53 }54 55 /* Search bar */56 .search-bar {57 margin: 8px 40px 24px;58 background: #fff;59 border-radius: 56px;60 height: 120px;61 display: flex; align-items: center;62 padding: 0 32px;63 box-shadow: 0 4px 10px rgba(0,0,0,0.08);64 }65 .search-icon {66 width: 54px; height: 54px; margin-right: 20px;67 }68 .search-placeholder {69 font-size: 36px; color: #7D7D7D;70 }71 72 /* Quick actions */73 .quick-actions {74 display: grid;75 grid-template-columns: repeat(4, 1fr);76 gap: 28px;77 padding: 0 40px;78 margin-bottom: 24px;79 }80 .qa-card {81 background: #fff;82 border-radius: 36px;83 padding: 24px;84 box-shadow: 0 6px 12px rgba(0,0,0,0.08);85 text-align: center;86 }87 .img-ph {88 background: #E0E0E0;89 border: 1px solid #BDBDBD;90 color: #757575;91 display: flex; align-items: center; justify-content: center;92 margin: 10px auto 18px;93 }94 .img-ph.small { width: 140px; height: 110px; border-radius: 16px; }95 .qa-title {96 font-weight: 800; font-size: 34px;97 }98 99 /* More services card */100 .services-card {101 background: #fff;102 border-radius: 40px;103 margin: 24px 40px;104 padding: 34px 28px 20px;105 box-shadow: 0 8px 16px rgba(0,0,0,0.08);106 }107 .services-grid {108 display: grid;109 grid-template-columns: repeat(4, 1fr);110 gap: 30px 10px;111 }112 .service {113 text-align: center;114 }115 .service .img-ph { width: 120px; height: 100px; border-radius: 16px; margin-bottom: 14px; }116 .service .label {117 font-size: 30px; line-height: 40px; color: #333; font-weight: 600;118 }119 .chev-wrap { display: flex; justify-content: center; padding: 10px 0 4px; }120 .chev {121 width: 36px; height: 24px; fill: #1e90ff;122 }123 124 /* Section titles */125 .section-title {126 font-size: 54px; font-weight: 800; color: #111;127 padding: 20px 40px 8px;128 }129 130 /* Recent search card */131 .recent-card {132 margin: 12px 40px 24px;133 width: 720px;134 border: 4px solid #1e90ff;135 border-radius: 40px;136 background: #fff;137 padding: 28px 28px;138 box-shadow: 0 6px 12px rgba(0,0,0,0.06);139 }140 .tag {141 color: #1e90ff; font-weight: 800; font-size: 34px; margin-bottom: 10px;142 }143 .route {144 font-size: 42px; font-weight: 800; margin-bottom: 8px;145 }146 .meta { color: #777; font-size: 32px; }147 148 /* Offer banner */149 .offer-title {150 font-size: 54px; font-weight: 800; padding: 20px 40px 20px;151 }152 .offer-banner {153 margin: 0 40px 20px;154 border-radius: 34px; overflow: hidden;155 position: relative;156 }157 .offer-banner .hero {158 width: 100%; height: 380px;159 background: #E0E0E0;160 border: 1px solid #BDBDBD;161 color: #757575;162 display: flex; align-items: center; justify-content: center;163 }164 .banner-pill {165 position: absolute; right: 28px; top: 24px;166 background: #fff; border-radius: 26px; padding: 12px 18px;167 font-weight: 800; font-size: 28px; color: #333;168 box-shadow: 0 4px 8px rgba(0,0,0,0.12);169 }170 .sponsored {171 position: absolute; right: 26px; top: 84px;172 background: #F2F2F2; color: #666; border-radius: 20px;173 padding: 10px 14px; font-size: 26px; border: 1px solid #ddd;174 }175 .ad-bar {176 position: absolute; left: 20px; right: 20px; bottom: -20px;177 background: #4A4F57; color: #fff;178 border-radius: 50px;179 height: 110px; display: flex; align-items: center; padding: 0 24px;180 gap: 20px; box-shadow: 0 10px 20px rgba(0,0,0,0.25);181 }182 .ad-logo {183 width: 90px; height: 90px; border-radius: 45px;184 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;185 display: flex; justify-content: center; align-items: center;186 font-size: 24px;187 }188 .ad-text { flex: 1; font-size: 30px; font-weight: 600; }189 .arrow-btn {190 width: 80px; height: 80px; border-radius: 40px;191 background: rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center;192 }193 .arrow-btn svg { width: 40px; height: 40px; fill: #fff; }194 195 /* Bottom navigation */196 .bottom-nav {197 position: absolute; left: 0; right: 0; bottom: 0;198 height: 220px; background: #1c1c1f;199 border-top-left-radius: 26px; border-top-right-radius: 26px;200 box-shadow: 0 -10px 18px rgba(0,0,0,0.25);201 padding-top: 24px;202 }203 .nav-items {204 display: flex; justify-content: space-around; align-items: center;205 padding: 22px 24px;206 color: #bbb; font-size: 28px; font-weight: 700;207 }208 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; position: relative; }209 .nav-icon {210 width: 56px; height: 56px;211 background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 14px;212 display: flex; align-items: center; justify-content: center; color: #757575;213 }214 .active { color: #1e90ff; }215 .active-underline {216 position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%);217 width: 120px; height: 8px; background: #1e90ff; border-radius: 10px;218 }219 .new-pill {220 position: absolute; top: -10px; right: -20px;221 background: #ff2d2d; color: #fff; font-size: 26px; font-weight: 800;222 padding: 2px 10px; border-radius: 20px;223 }224 225 /* Home indicator */226 .home-indicator {227 position: absolute; left: 50%; transform: translateX(-50%);228 bottom: 230px; width: 200px; height: 12px; background: #fff; opacity: 0.9;229 border-radius: 10px;230 }231</style>232</head>233<body>234<div id="render-target">235 236 <!-- Status bar -->237 <div class="status-bar">238 <div class="status-left">11:44</div>239 <div class="status-right">240 <span>68°</span>241 <span>✔︎</span>242 <span>✉︎</span>243 <span>⌂</span>244 <span>◦</span>245 <span>📶</span>246 <span>🔋</span>247 </div>248 </div>249 250 <!-- Header -->251 <div class="header">252 <div class="hamburger">253 <svg viewBox="0 0 24 24">254 <rect x="2" y="5" width="20" height="2" fill="#2d2d2d"></rect>255 <rect x="2" y="11" width="16" height="2" fill="#2d2d2d"></rect>256 <rect x="2" y="17" width="12" height="2" fill="#2d2d2d"></rect>257 </svg>258 </div>259 <div class="header-right">260 <div class="badge"><span style="font-weight:800;">my</span><span>Cash</span></div>261 <div class="badge"><span style="font-weight:800;">my</span><span class="pill">Biz</span></div>262 </div>263 </div>264 265 <!-- Search bar -->266 <div class="search-bar">267 <div class="search-icon">268 <svg viewBox="0 0 24 24">269 <circle cx="10" cy="10" r="7" stroke="#6b6b6b" stroke-width="2" fill="none"></circle>270 <line x1="15" y1="15" x2="22" y2="22" stroke="#6b6b6b" stroke-width="2"></line>271 </svg>272 </div>273 <div class="search-placeholder">Try Mumbai to Pune Bus</div>274 </div>275 276 <!-- Quick actions -->277 <div class="quick-actions">278 <div class="qa-card">279 <div class="img-ph small">[IMG: Airplane Icon]</div>280 <div class="qa-title">Flights</div>281 </div>282 <div class="qa-card">283 <div class="img-ph small">[IMG: Hotel Icon]</div>284 <div class="qa-title">Hotels</div>285 </div>286 <div class="qa-card">287 <div class="img-ph small">[IMG: Umbrella Beach Icon]</div>288 <div class="qa-title">Holiday Packages</div>289 </div>290 <div class="qa-card">291 <div class="img-ph small">[IMG: Train & Bus Icon]</div>292 <div class="qa-title">Trains/ Bus</div>293 </div>294 </div>295 296 <!-- Services card -->297 <div class="services-card">298 <div class="services-grid">299 <div class="service">300 <div class="img-ph">[IMG: Airport Cab Icon]</div>301 <div class="label">Airport Cabs</div>302 </div>303 <div class="service">304 <div class="img-ph">[IMG: Homestay Icon]</div>305 <div class="label">Homestays & Villas</div>306 </div>307 <div class="service">308 <div class="img-ph">[IMG: Outstation Cab Icon]</div>309 <div class="label">Outstation Cabs</div>310 </div>311 <div class="service">312 <div class="img-ph">[IMG: Forex Icon]</div>313 <div class="label">Forex Card & Currency</div>314 </div>315 316 <div class="service">317 <div class="img-ph">[IMG: Gift Card Icon]</div>318 <div class="label">Gift Cards</div>319 </div>320 <div class="service">321 <div class="img-ph">[IMG: Hourly Stays Icon]</div>322 <div class="label">Hourly Stays</div>323 </div>324 <div class="service">325 <div class="img-ph">[IMG: Bag Icon]</div>326 <div class="label">Nearby Staycations</div>327 </div>328 <div class="service">329 <div class="img-ph">[IMG: Shield Insurance Icon]</div>330 <div class="label">Travel Insurance</div>331 </div>332 </div>333 <div class="chev-wrap">334 <svg class="chev" viewBox="0 0 24 24"><path d="M12 15l-7-7h14z"></path></svg>335 </div>336 </div>337 338 <!-- Recent Searches -->339 <div class="section-title">Recent Searches</div>340 <div class="recent-card">341 <div class="tag">Flight</div>342 <div class="route">Knoxville → Honolulu</div>343 <div class="meta">1 traveller</div>344 <div class="meta" style="margin-top:6px;">04 Nov 23</div>345 </div>346 347 <!-- Welcome Offer -->348 <div class="offer-title">Welcome Offer, lucas</div>349 <div class="offer-banner">350 <div class="hero">[IMG: Travel Offer Banner]</div>351 <div class="banner-pill">FLIGHTS</div>352 <div class="sponsored">Sponsored</div>353 <div class="ad-bar">354 <div class="ad-logo">[IMG]</div>355 <div class="ad-text">Starting at INR 47.85 per day, Travel anywhere in ASIA</div>356 <div class="arrow-btn">357 <svg viewBox="0 0 24 24"><path d="M9 18l6-6-6-6v12z"></path></svg>358 </div>359 </div>360 </div>361 362 <!-- Home indicator (OS) -->363 <div class="home-indicator"></div>364 365 <!-- Bottom Navigation -->366 <div class="bottom-nav">367 <div class="nav-items">368 <div class="nav-item active">369 <div class="nav-icon">🏠</div>370 <div>Home</div>371 <div class="active-underline"></div>372 </div>373 <div class="nav-item">374 <div class="nav-icon">🧳</div>375 <div>My Trips</div>376 </div>377 <div class="nav-item">378 <div class="nav-icon">🧭</div>379 <div>Where2Go</div>380 <div class="new-pill">new</div>381 </div>382 <div class="nav-item">383 <div class="nav-icon">Ⓜ️</div>384 <div>TripMoney</div>385 </div>386 <div class="nav-item">387 <div class="nav-icon">🎖️</div>388 <div>Be A Host</div>389 </div>390 </div>391 </div>392 393</div>394</body>395</html>