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 Itinerary UI</title>7<style>8 :root{9 --teal:#0c8893;10 --blue:#2f67a1;11 --navy:#123a6c;12 --text:#333333;13 --muted:#6b6b6b;14 --link:#1e88e5;15 --card:#ffffff;16 --shadow:0 8px 20px rgba(0,0,0,0.15);17 --orange:#e85a3d;18 }19 body{20 margin:0;21 padding:0;22 background:transparent;23 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;24 color: var(--text);25 }26 #render-target{27 width:1080px;28 height:2400px;29 position:relative;30 overflow:hidden;31 background:#ffffff;32 border-radius:0;33 box-shadow:none;34 }35 36 /* Top teal app bar */37 .app-bar{38 position:absolute;39 top:0;40 left:0;41 width:100%;42 height:170px;43 background:var(--teal);44 color:#fff;45 display:flex;46 align-items:center;47 padding:0 48px;48 box-sizing:border-box;49 }50 .app-bar .left-icons{51 display:flex;52 gap:32px;53 align-items:center;54 }55 .app-bar .cancel{56 margin-left:auto;57 font-size:40px;58 font-weight:500;59 }60 .icon{61 width:64px;62 height:64px;63 }64 .icon svg{65 width:100%;66 height:100%;67 }68 .icon path, .icon polyline, .icon line, .icon circle{69 stroke:#ffffff;70 stroke-width:7;71 fill:none;72 stroke-linecap:round;73 stroke-linejoin:round;74 }75 76 /* Geo banner */77 .geo-banner{78 position:absolute;79 top:170px;80 left:0;81 width:100%;82 height:120px;83 background:var(--blue);84 color:#fff;85 display:flex;86 align-items:center;87 padding:0 48px;88 box-sizing:border-box;89 font-size:40px;90 }91 .geo-banner .flag{92 font-size:44px;93 margin-right:18px;94 }95 .geo-banner .link{96 color:#fff;97 font-weight:600;98 margin:0 8px;99 text-decoration:underline;100 }101 .geo-banner .chev{102 display:inline-block;103 margin-left:6px;104 transform:translateY(4px);105 }106 .geo-banner .close{107 margin-left:auto;108 width:54px;109 height:54px;110 }111 .geo-banner .close path{112 stroke:#ffffff;113 stroke-width:7;114 }115 116 /* Brand strip */117 .brand{118 position:absolute;119 top:290px;120 left:0;121 width:100%;122 height:150px;123 background:#fff;124 box-shadow:var(--shadow);125 display:flex;126 align-items:center;127 justify-content:center;128 gap:20px;129 font-size:50px;130 color:#222;131 font-weight:600;132 }133 .brand .x{134 font-size:90px;135 color:var(--navy);136 font-weight:800;137 margin:0 8px;138 }139 140 /* Content area */141 .content{142 position:absolute;143 top:470px;144 left:0;145 width:100%;146 padding:0 56px 480px;147 box-sizing:border-box;148 }149 .title{150 font-size:96px;151 font-weight:800;152 letter-spacing:0.2px;153 margin:40px 0 20px;154 }155 156 .features{157 display:flex;158 justify-content:space-between;159 padding:30px 40px;160 max-width:940px;161 }162 .feat{163 display:flex;164 flex-direction:column;165 align-items:center;166 gap:18px;167 color:var(--muted);168 }169 .feat .feat-icon{170 width:70px;171 height:70px;172 }173 .feat .feat-icon svg{174 width:100%; height:100%;175 }176 .feat .label{177 font-size:36px;178 }179 180 .description{181 max-width:940px;182 font-size:40px;183 line-height:1.5;184 color:#4a4a4a;185 margin:30px 0 20px;186 }187 .read-more{188 color:var(--link);189 font-weight:700;190 font-size:44px;191 }192 193 /* Map card */194 .map-card{195 margin-top:40px;196 width:968px;197 background:#fff;198 border-radius:16px;199 box-shadow:var(--shadow);200 padding:24px;201 box-sizing:border-box;202 }203 .img-ph{204 width:100%;205 height:620px;206 background:#E0E0E0;207 border:1px solid #BDBDBD;208 border-radius:8px;209 display:flex;210 align-items:center;211 justify-content:center;212 color:#757575;213 font-size:40px;214 }215 .legend{216 display:flex;217 gap:34px;218 align-items:center;219 flex-wrap:wrap;220 margin-top:22px;221 color:#4b4b4b;222 font-size:34px;223 }224 .dot{225 width:26px; height:26px;226 border-radius:50%;227 display:inline-block;228 }229 .red{ background:#c9303a; }230 .blue{ background:#2b6bd5; }231 .line{232 width:50px; height:6px; background:#2aa59b; display:inline-block; border-radius:3px;233 }234 235 /* Sticky price bar */236 .price-bar{237 position:absolute;238 left:0;239 bottom:36px;240 width:100%;241 background:#ffffff;242 box-shadow:0 -10px 24px rgba(0,0,0,0.18);243 padding:28px 48px 40px;244 box-sizing:border-box;245 }246 .avg{247 position:absolute;248 top:10px;249 right:50px;250 font-size:28px;251 font-weight:800;252 color:#777;253 letter-spacing:0.8px;254 }255 .price{256 font-size:64px;257 font-weight:800;258 margin-top:16px;259 }260 .fees{261 font-size:34px;262 color:#666;263 margin-top:10px;264 }265 .cta{266 margin-top:26px;267 width:100%;268 background:var(--orange);269 color:#fff;270 border:none;271 border-radius:10px;272 padding:36px 0;273 font-size:52px;274 font-weight:800;275 text-align:center;276 letter-spacing:1px;277 }278 279 /* Home indicator */280 .home-indicator{281 position:absolute;282 bottom:0;283 left:50%;284 transform:translateX(-50%);285 width:300px;286 height:16px;287 background:#000000;288 opacity:0.85;289 border-radius:9px;290 margin-bottom:12px;291 }292</style>293</head>294<body>295<div id="render-target">296 297 <!-- Top teal bar -->298 <div class="app-bar">299 <div class="left-icons">300 <div class="icon">301 <svg viewBox="0 0 64 64">302 <polyline points="40,12 20,32 40,52"></polyline>303 </svg>304 </div>305 <div class="icon">306 <svg viewBox="0 0 64 64">307 <polyline points="24,12 44,32 24,52"></polyline>308 </svg>309 </div>310 </div>311 <div class="cancel">Cancel</div>312 </div>313 314 <!-- Geo banner -->315 <div class="geo-banner">316 <span class="flag">🇮🇳</span>317 <span>Visiting from</span> <strong>India?</strong>318 <a class="link" href="#">Go to site</a>319 <span class="chev">320 <svg width="30" height="30" viewBox="0 0 24 24">321 <path d="M8 5l8 7-8 7" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>322 </svg>323 </span>324 <div class="close">325 <svg viewBox="0 0 24 24">326 <path d="M5 5 L19 19 M19 5 L5 19"></path>327 </svg>328 </div>329 </div>330 331 <!-- Brand strip -->332 <div class="brand">333 <span>Celebrity</span>334 <span class="x">X</span>335 <span>Cruises</span>336 </div>337 338 <!-- Main content -->339 <div class="content">340 <div class="title">Cruise Itinerary</div>341 342 <div class="features">343 <div class="feat">344 <div class="feat-icon">345 <svg viewBox="0 0 64 64">346 <circle cx="12" cy="32" r="6" stroke="#777" stroke-width="4" fill="none"></circle>347 <circle cx="52" cy="32" r="6" stroke="#777" stroke-width="4" fill="none"></circle>348 <line x1="18" y1="32" x2="46" y2="32" stroke="#777" stroke-width="4"></line>349 </svg>350 </div>351 <div class="label">One Way</div>352 </div>353 <div class="feat">354 <div class="feat-icon">355 <svg viewBox="0 0 64 64">356 <rect x="10" y="14" width="44" height="36" rx="6" stroke="#777" stroke-width="4" fill="none"></rect>357 <line x1="10" y1="24" x2="54" y2="24" stroke="#777" stroke-width="4"></line>358 <line x1="20" y1="10" x2="20" y2="18" stroke="#777" stroke-width="4"></line>359 <line x1="44" y1="10" x2="44" y2="18" stroke="#777" stroke-width="4"></line>360 </svg>361 </div>362 <div class="label">12 Nights</div>363 </div>364 <div class="feat">365 <div class="feat-icon">366 <svg viewBox="0 0 64 64">367 <path d="M32 10 a13 13 0 1 1 0 26 a13 13 0 1 1 0 -26" stroke="#777" stroke-width="4" fill="none"></path>368 <line x1="32" y1="36" x2="32" y2="54" stroke="#777" stroke-width="4"></line>369 </svg>370 </div>371 <div class="label">10 Ports</div>372 </div>373 <div class="feat">374 <div class="feat-icon">375 <svg viewBox="0 0 64 64">376 <path d="M12 40 c10 10 30 10 40 0" stroke="#777" stroke-width="4" fill="none"></path>377 <path d="M32 14 l8 10 h-16 z" stroke="#777" stroke-width="4" fill="none"></path>378 </svg>379 </div>380 <div class="label">3 Sea Days</div>381 </div>382 </div>383 384 <div class="description">385 Explore Amsterdam’s fascinating landmarks during a scenic ride across its bike-friendly streets. In Dorset, head to the386 <span class="read-more">... Read more</span>387 </div>388 389 <div class="map-card">390 <div class="img-ph">[IMG: Cruise Route Map]</div>391 <div class="legend">392 <span class="dot red"></span>393 <span>Port of Departure</span>394 <span class="dot blue"></span>395 <span>Port of Call</span>396 <span class="line"></span>397 <span>Cruise Route</span>398 </div>399 </div>400 </div>401 402 <!-- Sticky price bar -->403 <div class="price-bar">404 <div class="avg">AVG PER PERSON</div>405 <div class="price">$1,999 USD*</div>406 <div class="fees">†Taxes, fees and port expenses $249.90 USD *</div>407 <div class="cta">BOOK NOW</div>408 </div>409 410 <div class="home-indicator"></div>411</div>412</body>413</html>