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>Itinerary UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #f2f5f8;15 color: #2c3e50;16 }17 18 /* Status bar */19 .status-bar {20 height: 96px;21 background: #1f5e8a;22 color: #fff;23 display: flex;24 align-items: center;25 padding: 0 30px;26 box-sizing: border-box;27 font-size: 38px;28 }29 .status-left { display: flex; align-items: center; gap: 24px; }30 .status-right { margin-left: auto; display: flex; align-items: center; gap: 24px; }31 .icon { display: inline-flex; align-items: center; justify-content: center; }32 .icon svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 3; }33 34 /* Header */35 .header {36 height: 170px;37 background: #2c6fa2;38 color: #fff;39 padding: 36px 36px;40 box-sizing: border-box;41 display: flex;42 align-items: center;43 position: relative;44 box-shadow: 0 2px 0 rgba(0,0,0,0.1) inset;45 }46 .header-title {47 font-size: 60px;48 font-weight: 700;49 }50 .close-btn {51 position: absolute;52 right: 36px;53 top: 36px;54 width: 72px; height: 72px;55 border-radius: 36px;56 display: flex; align-items: center; justify-content: center;57 }58 .close-btn svg { width: 46px; height: 46px; stroke: #fff; stroke-width: 6; }59 60 /* Tabs */61 .tabs {62 background: #2c6fa2;63 color: #dbe7f2;64 display: flex;65 gap: 60px;66 padding: 0 36px 10px 36px;67 height: 100px;68 align-items: center;69 box-sizing: border-box;70 position: relative;71 }72 .tab { font-size: 40px; letter-spacing: 0.5px; }73 .tab.active { color: #ffffff; position: relative; }74 .tab-underline {75 position: absolute; bottom: 0; left: 230px;76 width: 160px; height: 8px; background: #f39c12; border-radius: 4px;77 }78 79 /* Year title */80 .year-title {81 background: #2c6fa2;82 color: #fff;83 text-align: center;84 font-size: 56px;85 font-weight: 700;86 padding: 24px 0 36px;87 box-shadow: 0 4px 8px rgba(0,0,0,0.15);88 }89 90 /* Cards */91 .list {92 padding: 24px 24px 180px;93 box-sizing: border-box;94 }95 .card {96 background: #ffffff;97 border-radius: 10px;98 box-shadow: 0 1px 0 rgba(0,0,0,0.08);99 margin-bottom: 20px;100 overflow: hidden;101 border: 1px solid #dfe6ee;102 }103 .card-header {104 display: grid;105 grid-template-columns: 170px 1fr 90px;106 align-items: center;107 min-height: 180px;108 border-bottom: 1px solid #e6edf4;109 }110 .date-pill {111 background: #2478b6;112 color: #fff;113 text-align: center;114 height: 100%;115 display: flex; flex-direction: column; justify-content: center;116 }117 .date-pill .day { font-size: 72px; font-weight: 800; line-height: 1; }118 .date-pill .month { font-size: 38px; opacity: 0.95; }119 .card-title {120 padding: 24px 20px;121 }122 .card-title .title { font-size: 44px; font-weight: 700; color: #333; }123 .card-title .subtitle {124 margin-top: 16px; font-size: 34px; color: #7f8c8d; display: flex; align-items: center; gap: 14px;125 }126 .chevron {127 display: flex; align-items: center; justify-content: center;128 }129 .chevron svg { width: 40px; height: 40px; stroke: #7f8c8d; stroke-width: 6; }130 131 /* Expanded details */132 .details {133 background: #fbf6d9;134 padding: 24px;135 box-sizing: border-box;136 }137 .table {138 width: 100%;139 border: 1px solid #d7dfe8;140 border-radius: 8px;141 overflow: hidden;142 background: #fff;143 }144 .thead {145 display: grid;146 grid-template-columns: 360px 1fr;147 background: #2c6fa2;148 color: #fff;149 font-size: 38px;150 font-weight: 700;151 }152 .thead div { padding: 22px 26px; }153 .row {154 display: grid;155 grid-template-columns: 360px 1fr;156 border-top: 1px solid #e6edf4;157 align-items: center;158 }159 .cell { padding: 26px; font-size: 34px; color: #2c3e50; }160 .muted { color: #7f8c8d; }161 .port-cell { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }162 .mini-icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; }163 .mini-icon svg { width: 42px; height: 42px; stroke: #2c3e50; stroke-width: 3; }164 .anchor { font-size: 42px; }165 .flag {166 width: 52px; height: 34px; border: 2px solid #2c3e50; border-radius: 2px; position: relative; margin-right: 6px;167 }168 .flag::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 17px; background: #2c3e50; }169 .link { color: #1a73b7; text-decoration: none; }170 171 /* Ad bar */172 .ad-bar {173 position: absolute; left: 0; right: 0; bottom: 90px;174 background: #ffffff; border-top: 1px solid #dfe6ee;175 height: 210px; display: flex; align-items: center; gap: 24px;176 padding: 24px 24px; box-sizing: border-box;177 }178 .ad-img {179 width: 150px; height: 150px;180 background: #E0E0E0; border: 1px solid #BDBDBD;181 display: flex; justify-content: center; align-items: center; color: #757575; font-size: 32px; border-radius: 24px;182 }183 .ad-text { display: flex; flex-direction: column; }184 .ad-title { font-size: 56px; font-weight: 700; }185 .ad-sub { font-size: 36px; color: #6c7a89; display: flex; align-items: center; gap: 14px; }186 .install-btn {187 margin-left: auto;188 background: #0ba060; color: #fff; border-radius: 50px;189 padding: 22px 46px; font-size: 44px; font-weight: 700; border: none;190 }191 .ad-close {192 position: absolute; left: 20px; bottom: 20px; color: #2c6fa2; font-size: 52px;193 }194 195 /* Bottom gesture bar */196 .gesture {197 position: absolute; left: 420px; bottom: 20px;198 width: 240px; height: 12px; background: #000; opacity: 0.25; border-radius: 6px;199 }200</style>201</head>202<body>203<div id="render-target">204 205 <!-- Status bar -->206 <div class="status-bar">207 <div class="status-left">208 <div>10:01</div>209 <div class="icon">210 <svg viewBox="0 0 24 24"><path d="M4 12l4 4 12-12"/></svg>211 </div>212 <div class="icon">213 <svg viewBox="0 0 24 24"><path d="M12 2v8"/><path d="M12 14v8"/><path d="M2 12h8"/><path d="M14 12h8"/></svg>214 </div>215 <div class="icon">216 <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M7 3v4M17 3v4M3 9h18"/></svg>217 </div>218 <div class="icon">219 <svg viewBox="0 0 24 24"><path d="M3 15c3-5 15-5 18 0"/><path d="M8 10c2-2 6-2 8 0"/><circle cx="12" cy="7" r="1"/></svg>220 </div>221 </div>222 <div class="status-right">223 <div class="icon">224 <svg viewBox="0 0 24 24"><path d="M2 8h18v8H2z"/><path d="M20 10h2v4h-2z"/></svg>225 </div>226 <div>100%</div>227 </div>228 </div>229 230 <!-- Header -->231 <div class="header">232 <div class="header-title">AIDAprima</div>233 <div class="close-btn">234 <svg viewBox="0 0 24 24"><path d="M4 4l16 16M20 4L4 20"/></svg>235 </div>236 </div>237 238 <!-- Tabs -->239 <div class="tabs">240 <div class="tab">REVIEW</div>241 <div class="tab active">ITINERARIES</div>242 <div class="tab">SPECS</div>243 <div class="tab">DECKPLANS</div>244 <div class="tab-underline"></div>245 </div>246 247 <!-- Year -->248 <div class="year-title">2023</div>249 250 <!-- List -->251 <div class="list">252 253 <!-- Card 1 -->254 <div class="card">255 <div class="card-header">256 <div class="date-pill">257 <div class="day">19</div>258 <div class="month">Oct</div>259 </div>260 <div class="card-title">261 <div class="title">Round-trip Metropolen Norwegen Ab Rotterdam</div>262 <div class="subtitle">263 <span class="mini-icon">264 <svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7 4v4M17 4v4M3 10h18"/></svg>265 </span>266 <span>19 Oct, 2023 - 02 Nov, 2023 (14 days)</span>267 </div>268 </div>269 <div class="chevron">270 <svg viewBox="0 0 24 24"><path d="M6 10l6 6 6-6"/></svg>271 </div>272 </div>273 </div>274 275 <!-- Card 2 (expanded) -->276 <div class="card">277 <div class="card-header">278 <div class="date-pill">279 <div class="day">21</div>280 <div class="month">Oct</div>281 </div>282 <div class="card-title">283 <div class="title">Round-trip Metropolen Norwegen</div>284 <div class="subtitle">285 <span class="mini-icon">286 <svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7 4v4M17 4v4M3 10h18"/></svg>287 </span>288 <span>21 Oct, 2023 - 04 Nov, 2023 (14 days)</span>289 </div>290 </div>291 <div class="chevron">292 <svg viewBox="0 0 24 24"><path d="M18 14l-6-6-6 6"/></svg>293 </div>294 </div>295 296 <div class="details">297 <div class="table">298 <div class="thead">299 <div>Date / Time</div>300 <div>Port</div>301 </div>302 303 <div class="row">304 <div class="cell">21 Oct 18:00</div>305 <div class="cell port-cell">306 <div class="mini-icon"><svg viewBox="0 0 24 24"><path d="M3 21V3M3 3h6l4 3H3"/><path d="M3 12h10"/></svg></div>307 <div class="flag"></div>308 <strong>Departing</strong> from <a class="link" href="#">Hamburg, Germany</a> <span class="muted">hotels</span>309 </div>310 </div>311 312 <div class="row">313 <div class="cell">23 Oct 09:00 - 17:30</div>314 <div class="cell port-cell">315 <div class="anchor">⚓</div>316 <div class="flag"></div>317 <a class="link" href="#">Bergen, Norway</a>318 </div>319 </div>320 321 <div class="row">322 <div class="cell">24 Oct 11:00 - 21:00</div>323 <div class="cell port-cell">324 <div class="anchor">⚓</div>325 <div class="flag"></div>326 <a class="link" href="#">Geiranger, Norway</a>327 </div>328 </div>329 330 <div class="row">331 <div class="cell">25 Oct 07:00 - 16:30</div>332 <div class="cell port-cell">333 <div class="anchor">⚓</div>334 <div class="flag"></div>335 <a class="link" href="#">Alesund, Norway</a>336 </div>337 </div>338 339 <div class="row">340 <div class="cell">26 Oct 10:00 - 20:00</div>341 <div class="cell port-cell">342 <div class="anchor">⚓</div>343 <div class="flag"></div>344 <a class="link" href="#">Stavanger, Norway</a>345 </div>346 </div>347 348 <div class="row">349 <div class="cell">28 Oct 08:00 - 18:00</div>350 <div class="cell port-cell">351 <div class="anchor">⚓</div>352 <div class="flag"></div>353 <a class="link" href="#">Hamburg, Germany</a>354 </div>355 </div>356 357 <div class="row">358 <div class="cell">30 Oct 08:30 - 20:30</div>359 <div class="cell port-cell">360 <div class="anchor">⚓</div>361 <div class="flag"></div>362 <a class="link" href="#">Southampton, England</a>363 </div>364 </div>365 366 <div class="row">367 <div class="cell">31 Oct 08:00 - 20:00</div>368 <div class="cell port-cell">369 <div class="anchor">⚓</div>370 <div class="flag"></div>371 <a class="link" href="#">Le Havre-Paris, France</a>372 </div>373 </div>374 375 <div class="row">376 <div class="cell">01 Nov 10:00 - 19:00</div>377 <div class="cell port-cell">378 <div class="anchor">⚓</div>379 <div class="flag"></div>380 <a class="link" href="#">Zeebrugge, Bruges, Belgium</a>381 </div>382 </div>383 384 <div class="row">385 <div class="cell">02 Nov 08:00 - 03 Nov 06:00</div>386 <div class="cell port-cell">387 <div class="anchor">⚓</div>388 <div class="flag"></div>389 <a class="link" href="#">Rotterdam, Netherlands South Holland</a>390 </div>391 </div>392 393 <div class="row">394 <div class="cell">04 Nov 08:00</div>395 <div class="cell port-cell">396 <div class="mini-icon"><svg viewBox="0 0 24 24"><path d="M3 21V3M3 3h6l4 3H3"/><path d="M3 12h10"/></svg></div>397 <div class="flag"></div>398 <strong>Arriving</strong> in <a class="link" href="#">Hamburg, Germany</a>399 <span class="muted">hotels</span>400 </div>401 </div>402 403 </div>404 </div>405 </div>406 407 <!-- Card 3 (next short) -->408 <div class="card">409 <div class="card-header">410 <div class="date-pill">411 <div class="day">28</div>412 <div class="month">Oct</div>413 </div>414 <div class="card-title">415 <div class="title">Round-trip Metropolen Ab Hamburg</div>416 <div class="subtitle">417 <span class="mini-icon">418 <svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M7 4v4M17 4v4M3 10h18"/></svg>419 </span>420 <span>28 Oct, 2023 - 04 Nov, 2023 (7 days)</span>421 </div>422 </div>423 <div class="chevron">424 <svg viewBox="0 0 24 24"><path d="M6 10l6 6 6-6"/></svg>425 </div>426 </div>427 </div>428 429 </div>430 431 <!-- Ad bar -->432 <div class="ad-bar">433 <div class="ad-img">[IMG: Klook Logo]</div>434 <div class="ad-text">435 <div class="ad-title">Klook</div>436 <div class="ad-sub">437 <span class="mini-icon">438 <svg viewBox="0 0 24 24"><path d="M4 12l4 4 12-12" stroke="#6c7a89" fill="none" stroke-width="2"/></svg>439 </span>440 Google Play441 </div>442 </div>443 <button class="install-btn">INSTALL</button>444 <div class="ad-close">×</div>445 </div>446 447 <!-- Bottom gesture bar -->448 <div class="gesture"></div>449 450</div>451</body>452</html>