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 - Offers</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, sans-serif; color: #1f1f1f; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #ffffff;15 }16 17 /* Top orange hero */18 .hero {19 position: relative;20 height: 520px;21 background: #ff6d3a;22 }23 .hero:after {24 content: "";25 position: absolute;26 left: -120px;27 right: -120px;28 bottom: -140px;29 height: 240px;30 background: #ffffff;31 border-top-left-radius: 180px;32 border-top-right-radius: 180px;33 transform: rotate(-2deg);34 box-shadow: 0 2px 0 rgba(0,0,0,0.04) inset;35 }36 37 /* Status bar */38 .statusbar {39 height: 66px;40 padding: 16px 28px 0 28px;41 display: flex;42 align-items: center;43 color: #fff;44 font-weight: 600;45 font-size: 32px;46 }47 .statusbar .spacer { flex: 1; }48 .statusbar .dot { width: 10px; height: 10px; background: #ffd6c5; border-radius: 50%; margin: 0 10px; opacity: 0.8; }49 .statusbar .icon {50 width: 34px; height: 34px; margin-left: 18px; opacity: 0.95;51 }52 .statusbar svg { width: 100%; height: 100%; fill: #ffe8df; }53 54 /* Welcome area */55 .welcome {56 position: relative;57 padding: 36px 36px 0 36px;58 display: flex;59 align-items: center;60 color: #fff;61 }62 .avatar {63 width: 90px; height: 90px; border-radius: 50%;64 background: rgba(255,255,255,0.25);65 display: flex; align-items: center; justify-content: center;66 margin-right: 24px;67 border: 2px solid rgba(255,255,255,0.35);68 }69 .avatar svg { width: 44px; height: 44px; stroke: #fff; fill: none; stroke-width: 3; opacity: 0.9; }70 .welcome-text { flex: 1; }71 .welcome-title { font-size: 44px; font-weight: 800; margin: 0 0 14px 0; letter-spacing: 0.2px; }72 .pill {73 display: inline-flex; align-items: center; gap: 8px;74 background: #fff; color: #ff6d3a;75 border-radius: 999px; padding: 10px 18px; font-size: 26px; font-weight: 700;76 box-shadow: 0 6px 14px rgba(0,0,0,0.12);77 }78 .welcome-actions { display: flex; gap: 22px; margin-left: 20px; }79 .action-btn {80 width: 76px; height: 76px; border-radius: 18px; border: 2px solid rgba(255,255,255,0.7);81 display: flex; align-items: center; justify-content: center;82 background: transparent;83 }84 .action-btn svg { width: 40px; height: 40px; stroke: #fff; fill: none; stroke-width: 3; }85 86 /* Top feature cards */87 .sheet {88 position: relative;89 margin-top: -38px;90 padding: 18px 28px 0 28px;91 }92 .feature-cards {93 display: grid;94 grid-template-columns: repeat(4, 1fr);95 gap: 26px;96 padding: 10px 8px;97 }98 .card {99 height: 240px;100 background: #ffffff;101 border-radius: 34px;102 box-shadow: 0 14px 26px rgba(0,0,0,0.08);103 display: flex; flex-direction: column; align-items: center; justify-content: center;104 }105 .img-ph {106 width: 140px; height: 90px; background: #E0E0E0; border: 1px solid #BDBDBD;107 display: flex; align-items: center; justify-content: center; color: #757575; font-weight: 700; font-size: 24px;108 border-radius: 16px; margin-bottom: 18px;109 }110 .card-title { font-size: 34px; font-weight: 800; color: #222; }111 112 /* Small services row */113 .mini-services {114 margin-top: 22px;115 background: #fff;116 border-radius: 30px;117 padding: 24px 18px 16px 18px;118 box-shadow: 0 10px 18px rgba(0,0,0,0.06);119 }120 .mini-row {121 display: grid;122 grid-template-columns: repeat(4, 1fr);123 text-align: center;124 gap: 10px;125 }126 .mini-item { padding: 6px 8px; }127 .mini-icon {128 width: 84px; height: 64px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 14px;129 margin: 0 auto 8px auto; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 20px; font-weight: 700;130 }131 .mini-label { font-size: 26px; font-weight: 700; color: #545454; }132 .pager {133 display: flex; justify-content: center; align-items: center; gap: 10px; padding: 12px 0 6px 0;134 }135 .pager .dot { width: 14px; height: 8px; background: #ff6d3a; border-radius: 6px; }136 .pager .dash { width: 66px; height: 8px; background: #e6e6e8; border-radius: 6px; }137 138 .section {139 padding: 26px 36px;140 }141 .sec-title {142 display: flex; align-items: center; gap: 16px;143 font-size: 42px; font-weight: 800; color: #222;144 margin: 8px 0 18px 0;145 }146 .ad-pill {147 font-size: 26px; font-weight: 800; color: #7a7a7a;148 background: #eeeeef; padding: 6px 12px; border-radius: 12px;149 }150 151 /* Horizontal ads */152 .h-scroll {153 display: flex; gap: 24px; overflow: hidden;154 }155 .banner {156 flex: 0 0 980px;157 height: 220px;158 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;159 display: flex; align-items: center; justify-content: center; border-radius: 26px; font-weight: 800; font-size: 30px;160 }161 162 /* Other offerings grid */163 .chip-grid {164 display: grid;165 grid-template-columns: repeat(3, 1fr);166 gap: 24px;167 margin-top: 8px;168 }169 .chip {170 height: 140px; border: 2px solid #e7e7ea; border-radius: 28px; background: #fff;171 display: flex; align-items: center; padding: 24px; gap: 20px;172 box-shadow: 0 6px 14px rgba(0,0,0,0.03) inset;173 position: relative;174 }175 .chip .tag {176 position: absolute; top: -16px; left: 18px; background: #ff2b2b; color: #fff; padding: 8px 16px; border-radius: 12px; font-size: 26px; font-weight: 800;177 }178 .chip .tag.right { left: auto; right: 18px; background: #ff2b2b; }179 .chip .ico {180 width: 72px; height: 72px; border-radius: 14px; background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575; font-weight: 800; font-size: 24px;181 }182 .chip .txt { font-size: 30px; font-weight: 800; color: #2b2b2b; }183 184 /* Signup grey card */185 .info-card {186 margin: 18px 36px 10px 36px; background: #f7f8fb; border-radius: 26px; padding: 26px;187 border: 1px solid #ececf0;188 }189 .info-title { font-size: 36px; font-weight: 800; margin-bottom: 6px; }190 .info-sub { font-size: 28px; color: #4c4c4c; display: flex; align-items: center; gap: 12px; }191 .check {192 width: 26px; height: 26px; background: #1abc63; border-radius: 50%;193 display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; font-weight: 900;194 }195 196 /* Purple banner */197 .promo {198 position: absolute; left: 0; right: 0; bottom: 170px;199 margin: 0 0; padding: 22px 28px;200 background: linear-gradient(90deg, #e7d8ff, #f0dffb);201 display: flex; align-items: center; justify-content: space-between;202 height: 120px; border-top-left-radius: 14px; border-top-right-radius: 14px;203 border-top: 1px solid #e6e0f2;204 }205 .promo .left { display: flex; align-items: center; gap: 18px; }206 .promo .iconcircle {207 width: 64px; height: 64px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #6b22ff; font-weight: 900;208 border: 1px solid #d8c7ff;209 }210 .promo .title { font-size: 34px; font-weight: 900; color: #1c1c1c; }211 .promo .subtitle { font-size: 24px; color: #3a3a3a; }212 .promo .cta { color: #1a66ff; font-size: 30px; font-weight: 900; }213 .promo .close { color: #6b6b6b; font-size: 32px; margin-left: 22px; }214 215 /* Bottom navigation */216 .bottom-nav {217 position: absolute; left: 0; right: 0; bottom: 0;218 height: 160px; background: #0e1013; color: #cfd4db;219 display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;220 box-shadow: 0 -6px 20px rgba(0,0,0,0.2);221 }222 .nav-item { text-align: center; font-size: 24px; }223 .nav-ico {224 width: 60px; height: 60px; border-radius: 16px; margin: 0 auto 10px auto;225 border: 2px solid #333b45; display: flex; align-items: center; justify-content: center;226 }227 .nav-item.active .nav-ico {228 background: #1f8cff; border: none; width: 80px; height: 80px; border-radius: 40px; color: #fff;229 }230 .nav-item.active { color: #ffffff; font-weight: 800; }231 .home-indicator {232 position: absolute; left: 50%; transform: translateX(-50%);233 bottom: 160px; width: 240px; height: 10px; background: #ffffff; border-radius: 8px; opacity: 0.9;234 }235 236 /* Utility */237 .muted { color: #7d7d7d; }238</style>239</head>240<body>241<div id="render-target">242 243 <div class="hero">244 <div class="statusbar">245 12:46246 <div class="spacer"></div>247 <div class="icon">248 <svg viewBox="0 0 24 24"><path d="M17 4h-2l-2-2h-2l-2 2H7a3 3 0 00-3 3v11a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3z"/></svg>249 </div>250 <div class="icon">251 <svg viewBox="0 0 24 24"><path d="M7 18h10l-1-2H8l-1 2zM12 3a5 5 0 00-5 5v4l-2 3h14l-2-3V8a5 5 0 00-5-5z"/></svg>252 </div>253 <div class="dot"></div>254 <div class="icon">255 <svg viewBox="0 0 24 24"><path d="M13 7h6v10H5V7h6V5H3v14h18V5h-8v2z"/></svg>256 </div>257 </div>258 259 <div class="welcome">260 <div class="avatar">261 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 20c1-4 5-6 8-6s7 2 8 6"/></svg>262 </div>263 <div class="welcome-text">264 <div class="welcome-title">Welcome Guest</div>265 <div class="pill">Explore goTribe ▶</div>266 </div>267 <div class="welcome-actions">268 <div class="action-btn" title="Wallet">269 <svg viewBox="0 0 24 24"><path d="M3 7h15a3 3 0 013 3v4a3 3 0 01-3 3H3V7z"/><path d="M16 10h5v4h-5"/></svg>270 </div>271 <div class="action-btn" title="Bell">272 <svg viewBox="0 0 24 24"><path d="M12 3a4 4 0 00-4 4v4l-2 3h12l-2-3V7a4 4 0 00-4-4z"/><path d="M9 18a3 3 0 006 0"/></svg>273 </div>274 <div class="action-btn" title="Refer">275 <svg viewBox="0 0 24 24"><path d="M8 12a4 4 0 110-8 4 4 0 010 8zM16 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2M19 8l3 3-3 3M16 11h6"/></svg>276 </div>277 </div>278 </div>279 </div>280 281 <div class="sheet">282 <div class="feature-cards">283 <div class="card">284 <div class="img-ph">[IMG: Hotel]</div>285 <div class="card-title">Hotels</div>286 </div>287 <div class="card">288 <div class="img-ph">[IMG: Flight]</div>289 <div class="card-title">Flights</div>290 </div>291 <div class="card">292 <div class="img-ph">[IMG: Train]</div>293 <div class="card-title">Trains</div>294 </div>295 <div class="card">296 <div class="img-ph">[IMG: Bus]</div>297 <div class="card-title">Bus</div>298 </div>299 </div>300 301 <div class="mini-services">302 <div class="mini-row">303 <div class="mini-item">304 <div class="mini-icon">[IMG]</div>305 <div class="mini-label">Hourly Stays</div>306 </div>307 <div class="mini-item">308 <div class="mini-icon">[IMG]</div>309 <div class="mini-label">Holiday Packages</div>310 </div>311 <div class="mini-item">312 <div class="mini-icon">[IMG]</div>313 <div class="mini-label">Travel Insurance</div>314 </div>315 <div class="mini-item">316 <div class="mini-icon">[IMG]</div>317 <div class="mini-label">Cabs</div>318 </div>319 </div>320 <div class="pager">321 <div class="dot"></div>322 <div class="dash"></div>323 </div>324 </div>325 </div>326 327 <div class="section">328 <div class="sec-title">329 <div class="ad-pill">Ad</div>330 Exclusive Partners331 </div>332 <div class="h-scroll">333 <div class="banner">[IMG: Partner Promotion Banner - Forex Cashback]</div>334 <div class="banner">[IMG: Partner Promotion Banner]</div>335 </div>336 </div>337 338 <div class="section">339 <div class="sec-title">Other Offerings</div>340 <div class="chip-grid">341 <div class="chip">342 <div class="tag">₹5000</div>343 <div class="ico">[I]</div>344 <div class="txt">Refer & Earn</div>345 </div>346 <div class="chip">347 <div class="ico">[I]</div>348 <div class="txt">Travel Guidelines</div>349 </div>350 <div class="chip">351 <div class="tag right">Open</div>352 <div class="ico">[I]</div>353 <div class="txt">International Destinations</div>354 </div>355 </div>356 </div>357 358 <div class="info-card">359 <div class="info-title">Sign-up & get special deals</div>360 <div class="info-sub">361 <span class="check">✓</span>362 ₹100 goCash + up to 25% off on Signup363 </div>364 </div>365 366 <div class="promo">367 <div class="left">368 <div class="iconcircle">go</div>369 <div>370 <div class="title">Get ₹100 goCash</div>371 <div class="subtitle">& LOGGED IN Deals on Signup</div>372 </div>373 </div>374 <div>375 <span class="cta">Sign-In</span>376 <span class="close">×</span>377 </div>378 </div>379 380 <div class="home-indicator"></div>381 382 <div class="bottom-nav">383 <div class="nav-item">384 <div class="nav-ico"></div>385 <div>Go to top</div>386 </div>387 <div class="nav-item">388 <div class="nav-ico"></div>389 <div>My Trips</div>390 </div>391 <div class="nav-item active">392 <div class="nav-ico">🎟️</div>393 <div>Offers</div>394 </div>395 <div class="nav-item">396 <div class="nav-ico"></div>397 <div>SyncN'Cash</div>398 </div>399 <div class="nav-item">400 <div class="nav-ico"></div>401 <div>TripMoney</div>402 </div>403 </div>404 405</div>406</body>407</html>