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>Cruise Booking UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 17 /* Top status area */18 .statusbar {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 90px;24 background: #000;25 }26 27 .topbar {28 position: absolute;29 top: 90px;30 left: 0;31 width: 1080px;32 height: 160px;33 background: #0C97A3; /* teal */34 color: #fff;35 }36 .topbar .inner {37 height: 100%;38 display: flex;39 align-items: center;40 padding: 0 40px;41 justify-content: space-between;42 }43 .topbar .nav {44 display: flex;45 gap: 40px;46 align-items: center;47 }48 .topbar .cancel {49 font-size: 44px;50 font-weight: 500;51 }52 .icon-btn svg { width: 60px; height: 60px; fill: none; stroke: #fff; stroke-width: 6px; }53 54 /* Geo banner */55 .geo-banner {56 position: absolute;57 top: 250px;58 left: 0;59 width: 1080px;60 height: 150px;61 background: #3B78B2; /* blue */62 color: #fff;63 display: flex;64 align-items: center;65 padding: 0 40px;66 box-sizing: border-box;67 }68 .geo-banner .flag {69 width: 100px;70 height: 64px;71 background: #E0E0E0;72 border: 1px solid #BDBDBD;73 display: flex;74 justify-content: center;75 align-items: center;76 color: #757575;77 font-size: 26px;78 margin-right: 24px;79 border-radius: 6px;80 }81 .geo-banner .text {82 font-size: 40px;83 }84 .geo-banner .text .link { text-decoration: underline; font-weight: 600; margin-left: 12px; }85 .geo-banner .close {86 margin-left: auto;87 display: flex;88 align-items: center;89 color: #fff;90 font-size: 56px;91 padding-right: 20px;92 }93 94 /* Brand bar */95 .brand-bar {96 position: absolute;97 top: 400px;98 left: 0;99 width: 1080px;100 height: 140px;101 background: #fff;102 display: flex;103 align-items: center;104 justify-content: center;105 color: #1c2d4a;106 }107 .brand-bar .brand {108 font-size: 52px;109 font-weight: 600;110 letter-spacing: 1px;111 }112 .brand-bar .brand .x {113 color: #0b2a53;114 font-weight: 800;115 font-size: 72px;116 margin: 0 10px;117 }118 119 /* Hero section */120 .hero {121 position: absolute;122 top: 540px;123 left: 0;124 width: 1080px;125 height: 900px;126 overflow: hidden;127 }128 .hero .hero-img {129 position: absolute;130 inset: 0;131 background: #E0E0E0;132 border-top: 1px solid #BDBDBD;133 border-bottom: 1px solid #BDBDBD;134 display: flex;135 justify-content: center;136 align-items: center;137 color: #757575;138 font-size: 38px;139 }140 .hero .tag {141 position: absolute;142 top: 40px;143 left: 360px;144 background: #0C97A3;145 color: #fff;146 font-weight: 700;147 font-size: 38px;148 padding: 18px 38px;149 border-radius: 8px;150 }151 .hero .title {152 position: absolute;153 top: 280px;154 left: 0;155 width: 100%;156 text-align: center;157 color: #ffffff;158 font-size: 64px;159 font-weight: 800;160 letter-spacing: 1.5px;161 text-transform: uppercase;162 }163 .hero .date-card {164 position: absolute;165 top: 420px;166 left: 50%;167 transform: translateX(-50%);168 width: 280px;169 height: 300px;170 background: #1676BE; /* blue box */171 border-radius: 8px;172 display: flex;173 flex-direction: column;174 align-items: center;175 justify-content: center;176 color: #fff;177 }178 .hero .date-card .year { font-size: 40px; font-weight: 700; opacity: 0.95; }179 .hero .date-card .day { font-size: 64px; font-weight: 800; margin-top: 20px; }180 .hero .cta-outline {181 position: absolute;182 bottom: 40px;183 left: 60px;184 width: 960px;185 padding: 26px 30px;186 border: 2px solid rgba(255,255,255,0.85);187 color: #fff;188 text-align: center;189 font-size: 40px;190 font-weight: 700;191 letter-spacing: 1px;192 }193 194 /* Content section */195 .content {196 position: absolute;197 top: 1440px;198 left: 0;199 width: 100%;200 padding: 40px 60px 260px;201 box-sizing: border-box;202 color: #333;203 }204 .share-icon {205 width: 60px;206 height: 60px;207 margin-bottom: 20px;208 }209 .content h1 {210 font-size: 72px;211 margin: 20px 0 20px 0;212 color: #222;213 }214 .info-row {215 display: flex;216 gap: 80px;217 align-items: center;218 margin: 14px 0 26px 0;219 color: #666;220 font-size: 36px;221 }222 .info-item {223 display: flex;224 align-items: center;225 gap: 20px;226 }227 .info-item svg { width: 48px; height: 48px; stroke: #444; stroke-width: 6px; fill: none; }228 229 .subtitle {230 font-size: 48px;231 color: #444;232 margin-top: 10px;233 }234 235 /* Share sheet overlay */236 .share-sheet {237 position: absolute;238 top: 1540px;239 right: 40px;240 width: 630px;241 background: #fff;242 border-radius: 10px;243 box-shadow: 0 12px 40px rgba(0,0,0,0.25);244 padding: 30px 30px 20px 30px;245 }246 .share-sheet h3 {247 font-size: 44px;248 margin: 10px 0 16px;249 color: #222;250 }251 .share-sheet .divider {252 height: 2px;253 background: #eee;254 margin: 8px 0 16px;255 }256 .share-item {257 display: flex;258 align-items: center;259 gap: 26px;260 padding: 24px 10px;261 font-size: 40px;262 color: #222;263 }264 .share-item svg { width: 56px; height: 56px; }265 .share-item .fb {266 width: 56px; height: 56px; border-radius: 50%; background: #1877F2; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 38px;267 }268 269 /* Bottom price bar */270 .price-bar {271 position: absolute;272 left: 0;273 bottom: 80px;274 width: 1080px;275 background: #fff;276 border-top: 1px solid #eee;277 box-shadow: 0 -6px 20px rgba(0,0,0,0.08);278 padding: 26px 40px 30px;279 box-sizing: border-box;280 }281 .price-bar .label {282 position: absolute;283 top: -18px;284 right: 40px;285 background: #fff;286 padding: 6px 12px;287 font-size: 28px;288 font-weight: 700;289 color: #111;290 letter-spacing: 1px;291 }292 .price-bar .price {293 font-size: 64px;294 font-weight: 800;295 color: #4a4a4a;296 margin-top: 6px;297 }298 .price-bar .small {299 font-size: 32px;300 color: #666;301 margin-top: 6px;302 }303 .price-bar .cta {304 margin-top: 28px;305 width: 100%;306 height: 130px;307 background: #E4573D;308 color: #fff;309 font-size: 52px;310 font-weight: 800;311 border: none;312 border-radius: 10px;313 letter-spacing: 1px;314 }315 316 /* Bottom home indicator */317 .home {318 position: absolute;319 bottom: 0;320 left: 0;321 width: 1080px;322 height: 80px;323 background: #000;324 }325 .home .pill {326 position: absolute;327 top: 24px;328 left: 50%;329 transform: translateX(-50%);330 width: 210px;331 height: 10px;332 background: #fff;333 border-radius: 10px;334 opacity: 0.9;335 }336</style>337</head>338<body>339<div id="render-target">340 341 <div class="statusbar"></div>342 343 <div class="topbar">344 <div class="inner">345 <div class="nav">346 <div class="icon-btn">347 <svg viewBox="0 0 24 24"><path d="M15 5l-7 7 7 7"/></svg>348 </div>349 <div class="icon-btn">350 <svg viewBox="0 0 24 24"><path d="M9 5l7 7-7 7"/></svg>351 </div>352 </div>353 <div class="cancel">Cancel</div>354 </div>355 </div>356 357 <div class="geo-banner">358 <div class="flag">[IMG: India Flag]</div>359 <div class="text">Visiting from India? <span class="link">Go to site</span></div>360 <div class="close">×</div>361 </div>362 363 <div class="brand-bar">364 <div class="brand">Celebrity <span class="x">X</span> Cruises</div>365 </div>366 367 <div class="hero">368 <div class="hero-img">[IMG: Scenic coastline hero]</div>369 <div class="tag">NEW SHIP</div>370 <div class="title">DEPARTURE DATE</div>371 <div class="date-card">372 <div class="year">2023</div>373 <div class="day">SEP 02</div>374 </div>375 <div class="cta-outline">STATEROOM CATEGORIES & RATE DETAILS</div>376 </div>377 378 <div class="content">379 <svg class="share-icon" viewBox="0 0 24 24">380 <path d="M12 4v12M7 9l5-5 5 5" stroke="#3498db" stroke-width="2" fill="none"/>381 </svg>382 383 <h1>Cruise Itinerary</h1>384 <div class="info-row">385 <div class="info-item">386 <svg viewBox="0 0 24 24"><path d="M4 12h16M16 8l4 4-4 4"/></svg>387 <div>One Way</div>388 </div>389 <div class="info-item">390 <svg viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="15" rx="2" ry="2"/><path d="M8 3v4M16 3v4"/></svg>391 <div>12 Nights</div>392 </div>393 </div>394 <div class="subtitle">Explore Amsterdam and more…</div>395 </div>396 397 <div class="share-sheet">398 <h3>Share to</h3>399 <div class="divider"></div>400 <div class="share-item">401 <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 8l9 5 9-5" fill="none" stroke="#222" stroke-width="1.5"/></svg>402 <div>Email</div>403 </div>404 <div class="share-item">405 <div class="fb">f</div>406 <div>Facebook</div>407 </div>408 </div>409 410 <div class="price-bar">411 <div class="label">AVG PER PERSON</div>412 <div class="price">$1,999 USD*</div>413 <div class="small">†Taxes, fees and port expenses $249.90 USD *</div>414 <button class="cta">BOOK NOW</button>415 </div>416 417 <div class="home"><div class="pill"></div></div>418 419</div>420</body>421</html>