GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Cruise UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 }15 .status-bar {16 height: 90px;17 background: #000;18 }19 .topbar {20 height: 120px;21 background: #0B8A94;22 color: #fff;23 display: flex;24 align-items: center;25 padding: 0 40px;26 box-sizing: border-box;27 }28 .topbar .left-icons { display: flex; gap: 40px; align-items: center; }29 .topbar .cancel { margin-left: auto; font-size: 42px; }30 .blue-banner {31 height: 120px;32 background: #3A78AE;33 color: #fff;34 display: flex;35 align-items: center;36 padding: 0 40px;37 box-sizing: border-box;38 font-size: 38px;39 }40 .blue-banner .flag {41 width: 90px; height: 56px;42 background: #E0E0E0; border: 1px solid #BDBDBD;43 display: inline-flex; justify-content: center; align-items: center;44 color: #757575; font-size: 24px; margin: 0 20px 0 16px;45 }46 .blue-banner .close {47 margin-left: auto; display: flex; align-items: center; gap: 16px;48 }49 .brand {50 height: 140px;51 background: #fff;52 display: flex; align-items: center; justify-content: center;53 border-bottom: 1px solid #eee;54 }55 .brand .logotext {56 font-size: 56px; color: #0b1f3a; font-weight: 600;57 }58 .brand .logotext .x {59 font-size: 72px; color: #0b1f3a; font-weight: 800;60 margin: 0 16px;61 }62 .hero {63 height: 900px;64 position: relative;65 display: flex; align-items: center; justify-content: center;66 }67 .hero .img {68 position: absolute; inset: 0;69 background: #E0E0E0;70 border-top: 1px solid #BDBDBD;71 border-bottom: 1px solid #BDBDBD;72 display: flex; align-items: center; justify-content: center;73 color: #757575; font-size: 40px;74 }75 .new-ship {76 position: absolute; top: 60px; left: 360px;77 background: #118A86; color: #fff; font-weight: 700;78 padding: 18px 36px; border-radius: 6px;79 font-size: 38px;80 }81 .dept-title {82 position: absolute; top: 280px; width: 100%;83 text-align: center; color: #fff; font-size: 72px; font-weight: 800;84 letter-spacing: 1px;85 }86 .date-card {87 position: absolute; top: 420px; left: 50%;88 transform: translateX(-50%);89 width: 300px; height: 320px; background: #1979C7;90 display: flex; flex-direction: column; align-items: center; justify-content: center;91 color: #fff; border-radius: 6px;92 }93 .date-card .year { font-size: 44px; opacity: 0.9; }94 .date-card .day { font-size: 72px; font-weight: 800; margin-top: 12px; }95 .hero .outline-btn {96 position: absolute; bottom: 80px; left: 60px; right: 60px;97 border: 2px solid #fff; color: #fff; text-align: center;98 padding: 30px 20px; font-size: 44px; font-weight: 700;99 border-radius: 6px;100 }101 102 .content {103 background: #fff;104 padding: 40px 60px 0 60px;105 }106 .share {107 width: 80px; height: 80px; margin: 40px auto 10px auto;108 display: flex; align-items: center; justify-content: center;109 }110 .title {111 text-align: left; font-size: 88px; font-weight: 800; color: #333; margin: 10px 0 30px 0;112 }113 .features {114 display: flex; justify-content: space-between; text-align: center; margin-top: 20px;115 }116 .feature {117 width: 25%;118 color: #444;119 }120 .feature svg { width: 64px; height: 64px; margin-bottom: 18px; fill: none; stroke: #555; stroke-width: 6; }121 .feature .label { font-size: 36px; }122 .desc {123 font-size: 44px; color: #444; margin: 40px 0;124 }125 .price-banner {126 margin: 10px -60px 0 -60px;127 background: #F7F7F7; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0;128 padding: 40px 60px;129 }130 .price-row {131 display: flex; align-items: baseline; justify-content: space-between;132 }133 .price {134 font-size: 70px; font-weight: 800; color: #3a3a3a;135 }136 .per-person {137 font-size: 34px; font-weight: 800; color: #444;138 }139 .fees {140 font-size: 34px; color: #666; margin-top: 16px;141 }142 .cta {143 margin: 40px 0 0 0;144 background: #E65C3A; color: #fff; border: none; width: 100%;145 font-size: 50px; font-weight: 800; padding: 36px 20px; border-radius: 6px;146 }147 .home-indicator {148 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);149 width: 300px; height: 14px; background: #000; opacity: 0.8; border-radius: 7px;150 }151 /* Simple text links */152 .blue-banner a { color: #fff; font-weight: 700; text-decoration: underline; }153</style>154</head>155<body>156<div id="render-target">157 <div class="status-bar"></div>158 159 <div class="topbar">160 <div class="left-icons">161 <!-- Back arrow -->162 <svg width="56" height="56" viewBox="0 0 24 24">163 <path d="M14 5l-7 7 7 7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>164 </svg>165 <!-- Forward arrow -->166 <svg width="56" height="56" viewBox="0 0 24 24">167 <path d="M10 5l7 7-7 7" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>168 </svg>169 </div>170 <div class="cancel">Cancel</div>171 </div>172 173 <div class="blue-banner">174 <span>Visiting from</span>175 <div class="flag">[IMG: India Flag]</div>176 <span>India? <a href="#">Go to site</a></span>177 <div class="close">178 <svg width="44" height="44" viewBox="0 0 24 24">179 <path d="M5 5l14 14M19 5L5 19" stroke="#fff" stroke-width="2"/>180 </svg>181 </div>182 </div>183 184 <div class="brand">185 <div class="logotext">Celebrity <span class="x">X</span> Cruises®</div>186 </div>187 188 <div class="hero">189 <div class="img">[IMG: Coastal landscape banner]</div>190 <div class="new-ship">NEW SHIP</div>191 <div class="dept-title">DEPARTURE DATE</div>192 <div class="date-card">193 <div class="year">2023</div>194 <div class="day">SEP 02</div>195 </div>196 <div class="outline-btn">STATEROOM CATEGORIES & RATE DETAILS</div>197 </div>198 199 <div class="content">200 <div class="share">201 <!-- Upload/share up arrow -->202 <svg width="80" height="80" viewBox="0 0 24 24">203 <path d="M12 16V6M7 10l5-5 5 5" stroke="#2d6cdf" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>204 <path d="M5 18h14" stroke="#2d6cdf" stroke-width="2"/>205 </svg>206 </div>207 208 <div class="title">Cruise Itinerary</div>209 210 <div class="features">211 <div class="feature">212 <svg viewBox="0 0 24 24">213 <circle cx="4" cy="12" r="2"></circle>214 <circle cx="12" cy="12" r="2"></circle>215 <circle cx="20" cy="12" r="2"></circle>216 <path d="M6 12h4M14 12h4"></path>217 </svg>218 <div class="label">One Way</div>219 </div>220 <div class="feature">221 <svg viewBox="0 0 24 24">222 <rect x="4" y="6" width="16" height="12" rx="2"></rect>223 <path d="M8 3v3M16 3v3"></path>224 </svg>225 <div class="label">12 Nights</div>226 </div>227 <div class="feature">228 <svg viewBox="0 0 24 24">229 <path d="M12 21s6-5 6-10a6 6 0 1 0-12 0c0 5 6 10 6 10z"></path>230 <circle cx="12" cy="11" r="2"></circle>231 </svg>232 <div class="label">10 Ports</div>233 </div>234 <div class="feature">235 <svg viewBox="0 0 24 24">236 <path d="M3 15h18M5 12h14M7 9h10"></path>237 <rect x="8" y="6" width="8" height="3"></rect>238 </svg>239 <div class="label">3 Sea Days</div>240 </div>241 </div>242 243 <div class="desc">Explore Amsterdam’s fascinating</div>244 245 <div class="price-banner">246 <div class="price-row">247 <div class="price">$1,999 USD*</div>248 <div class="per-person">AVG PER PERSON</div>249 </div>250 <div class="fees">†Taxes, fees and port expenses $249.90 USD *</div>251 </div>252 253 <button class="cta">BOOK NOW</button>254 </div>255 256 <div class="home-indicator"></div>257</div>258</body>259</html>