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>AIDAprima Itineraries</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #eef2f5;15 font-family: Arial, Helvetica, sans-serif;16 color: #1b2b3a;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0;23 left: 0;24 width: 1080px;25 height: 90px;26 background: #1d5e86;27 color: #eaf6ff;28 display: flex;29 align-items: center;30 padding: 0 28px;31 box-sizing: border-box;32 font-size: 34px;33 }34 .status-bar .right {35 margin-left: auto;36 display: flex;37 align-items: center;38 gap: 18px;39 opacity: 0.9;40 }41 .status-dot {42 width: 18px; height: 18px; background: #eaf6ff; border-radius: 50%;43 }44 .battery {45 width: 48px; height: 26px; border: 3px solid #eaf6ff; border-radius: 5px; position: relative;46 }47 .battery:after { content: ""; position: absolute; right: -6px; top: 7px; width: 6px; height: 12px; background: #eaf6ff; }48 .battery .level { position: absolute; top: 3px; left: 3px; right: 8px; bottom: 3px; background: #eaf6ff; }49 .battery-text { font-size: 28px; margin-left: 6px; }50 51 /* App bar */52 .app-bar {53 position: absolute;54 top: 90px;55 left: 0;56 width: 1080px;57 height: 170px;58 background: #21638f;59 display: flex;60 align-items: center;61 padding: 0 36px;62 box-sizing: border-box;63 color: #fff;64 }65 .app-title { font-size: 56px; font-weight: 700; letter-spacing: 0.5px; }66 .close-btn {67 margin-left: auto;68 width: 64px; height: 64px; border-radius: 50%;69 display: flex; align-items: center; justify-content: center;70 }71 .close-btn svg { width: 42px; height: 42px; fill: none; stroke: #ffffff; stroke-width: 8; stroke-linecap: round; }72 73 /* Tabs */74 .tabs {75 position: absolute;76 top: 260px;77 left: 0;78 width: 1080px;79 height: 90px;80 background: #1e5b86;81 display: flex;82 align-items: flex-end;83 padding: 0 36px;84 box-sizing: border-box;85 gap: 54px;86 }87 .tab {88 color: #d8e6f1;89 font-size: 30px;90 padding-bottom: 18px;91 letter-spacing: 1px;92 }93 .tab.active {94 position: relative;95 font-weight: 700;96 color: #ffffff;97 }98 .tab.active:after {99 content: "";100 position: absolute;101 left: 0;102 bottom: 10px;103 width: 120%;104 height: 6px;105 background: #ff8c2d;106 border-radius: 3px;107 transform: translateX(-10%);108 }109 110 /* Year header */111 .year-header {112 position: absolute;113 top: 350px;114 left: 0;115 width: 1080px;116 height: 80px;117 background: #214e6d;118 color: #e7f1f8;119 display: flex;120 align-items: center;121 justify-content: center;122 font-size: 44px;123 font-weight: 800;124 letter-spacing: 1px;125 }126 127 /* List */128 .list {129 position: absolute;130 top: 430px;131 left: 0;132 width: 1080px;133 bottom: 0;134 padding-bottom: 260px; /* leave space above ad and home indicator */135 box-sizing: border-box;136 overflow: hidden; /* fixed screenshot */137 }138 .item {139 display: flex;140 width: 1080px;141 align-items: stretch;142 background: #f8f9fb;143 }144 .item + .item { border-top: 1px solid #dfe3e7; }145 .date-col {146 width: 170px;147 background: #2a79ab;148 color: #ffffff;149 text-align: center;150 padding-top: 24px;151 box-sizing: border-box;152 }153 .date-day { font-size: 54px; font-weight: 800; line-height: 1; }154 .date-mon { font-size: 28px; font-weight: 600; opacity: 0.95; margin-top: 6px; margin-bottom: 10px; }155 .card {156 flex: 1;157 background: #ffffff;158 border-left: 1px solid #d5dbe0;159 padding: 28px 24px 24px 28px;160 position: relative;161 box-sizing: border-box;162 }163 .title {164 font-size: 34px;165 font-weight: 800;166 color: #1c2e3a;167 margin-right: 70px;168 }169 .meta {170 margin-top: 10px;171 color: #6d7b86;172 font-size: 26px;173 display: flex;174 align-items: center;175 gap: 10px;176 }177 .meta svg { width: 28px; height: 28px; fill: #6d7b86; }178 .chevron {179 position: absolute;180 right: 22px;181 top: 34px;182 width: 28px; height: 28px;183 }184 .chevron svg { width: 28px; height: 28px; fill: #6d7b86; }185 186 /* Ad banner */187 .ad-banner {188 position: absolute;189 left: 16px;190 right: 16px;191 bottom: 110px;192 height: 190px;193 background: #ffffff;194 border-radius: 18px;195 box-shadow: 0 4px 18px rgba(0,0,0,0.12);196 display: flex;197 align-items: center;198 padding: 0 24px;199 box-sizing: border-box;200 gap: 22px;201 }202 .ad-icon {203 width: 140px; height: 140px;204 background: #E0E0E0; border: 1px solid #BDBDBD;205 display: flex; align-items: center; justify-content: center;206 color: #757575; font-size: 22px; text-align: center; border-radius: 24px;207 }208 .ad-text { flex: 1; }209 .ad-title { font-size: 40px; font-weight: 700; color: #1c2e3a; }210 .ad-sub { margin-top: 6px; font-size: 26px; color: #3ca66a; }211 .ad-btn {212 width: 220px; height: 92px; background: #0e8b5b; color: #fff;213 border-radius: 46px; display: flex; align-items: center; justify-content: center;214 font-size: 34px; font-weight: 700;215 }216 .ad-info {217 position: absolute;218 left: -6px; bottom: -18px; color: #3aa0e6; font-size: 46px;219 }220 221 /* Home indicator */222 .home-indicator {223 position: absolute;224 bottom: 30px;225 left: 50%;226 width: 360px;227 height: 10px;228 background: #000;229 opacity: 0.25;230 border-radius: 6px;231 transform: translateX(-50%);232 }233</style>234</head>235<body>236<div id="render-target">237 238 <!-- Status -->239 <div class="status-bar">240 <div class="time">7:45</div>241 <div class="right">242 <div class="status-dot"></div>243 <div class="status-dot" style="opacity:.8;"></div>244 <div class="status-dot" style="opacity:.6;"></div>245 <div class="battery"></div>246 <div class="battery-text">84%</div>247 </div>248 </div>249 250 <!-- App bar -->251 <div class="app-bar">252 <div class="app-title">AIDAprima</div>253 <div class="close-btn">254 <svg viewBox="0 0 24 24"><path d="M5 5 L19 19 M19 5 L5 19"></path></svg>255 </div>256 </div>257 258 <!-- Tabs -->259 <div class="tabs">260 <div class="tab">REVIEW</div>261 <div class="tab active">ITINERARIES</div>262 <div class="tab">SPECS</div>263 <div class="tab">DECKPLANS</div>264 </div>265 266 <!-- Year -->267 <div class="year-header">2023</div>268 269 <!-- List -->270 <div class="list">271 <!-- Item 1 -->272 <div class="item">273 <div class="date-col">274 <div class="date-day">19</div>275 <div class="date-mon">Oct</div>276 </div>277 <div class="card">278 <div class="title">Round-trip Metropolen Norwegen Ab Rotterdam</div>279 <div class="meta">280 <svg viewBox="0 0 24 24"><path d="M19 4H5v2h14V4zM19 8H5v12h14V8zm-9 4h4v4h-4z"/></svg>281 <span>19 Oct, 2023 - 02 Nov, 2023 (14 days)</span>282 </div>283 <div class="chevron"><svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6z"/></svg></div>284 </div>285 </div>286 287 <!-- Item 2 -->288 <div class="item">289 <div class="date-col">290 <div class="date-day">21</div>291 <div class="date-mon">Oct</div>292 </div>293 <div class="card">294 <div class="title">Round-trip Metropolen Norwegen</div>295 <div class="meta">296 <svg viewBox="0 0 24 24"><path d="M19 4H5v2h14V4zM19 8H5v12h14V8zm-9 4h4v4h-4z"/></svg>297 <span>21 Oct, 2023 - 04 Nov, 2023 (14 days)</span>298 </div>299 <div class="chevron"><svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6z"/></svg></div>300 </div>301 </div>302 303 <!-- Item 3 -->304 <div class="item">305 <div class="date-col" style="background:#2c7fb0;">306 <div class="date-day">28</div>307 <div class="date-mon">Oct</div>308 </div>309 <div class="card">310 <div class="title">Round-trip Metropolen Ab Hamburg</div>311 <div class="meta">312 <svg viewBox="0 0 24 24"><path d="M19 4H5v2h14V4zM19 8H5v12h14V8zm-9 4h4v4h-4z"/></svg>313 <span>28 Oct, 2023 - 04 Nov, 2023 (7 days)</span>314 </div>315 <div class="chevron"><svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6z"/></svg></div>316 </div>317 </div>318 319 <!-- Item 4 -->320 <div class="item">321 <div class="date-col" style="background:#2a79ab;">322 <div class="date-day">02</div>323 <div class="date-mon">Nov</div>324 </div>325 <div class="card">326 <div class="title">One-way from Rotterdam to Hamburg</div>327 <div class="meta">328 <svg viewBox="0 0 24 24"><path d="M19 4H5v2h14V4zM19 8H5v12h14V8zm-9 4h4v4h-4z"/></svg>329 <span>02 Nov, 2023 - 08 Nov, 2023 (6 days)</span>330 </div>331 <div class="chevron"><svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6z"/></svg></div>332 </div>333 </div>334 335 <!-- Item 5 -->336 <div class="item">337 <div class="date-col" style="background:#2a79ab;">338 <div class="date-day">04</div>339 <div class="date-mon">Nov</div>340 </div>341 <div class="card">342 <div class="title">Round-trip Kurzreise Ab Hamburg Nach Stavanger</div>343 <div class="meta">344 <svg viewBox="0 0 24 24"><path d="M19 4H5v2h14V4zM19 8H5v12h14V8zm-9 4h4v4h-4z"/></svg>345 <span>04 Nov, 2023 - 08 Nov, 2023 (4 days)</span>346 </div>347 <div class="chevron"><svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6z"/></svg></div>348 </div>349 </div>350 351 <!-- Item 6 -->352 <div class="item">353 <div class="date-col" style="background:#2a79ab;">354 <div class="date-day">08</div>355 <div class="date-mon">Nov</div>356 </div>357 <div class="card">358 <div class="title">One-way from Hamburg to Palma de Mallorca</div>359 <div class="meta">360 <svg viewBox="0 0 24 24"><path d="M19 4H5v2h14V4zM19 8H5v12h14V8zm-9 4h4v4h-4z"/></svg>361 <span>08 Nov, 2023 - 19 Nov, 2023 (11 days)</span>362 </div>363 <div class="chevron"><svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6z"/></svg></div>364 </div>365 </div>366 367 <!-- Item 7 -->368 <div class="item">369 <div class="date-col" style="background:#2a79ab;">370 <div class="date-day">08</div>371 <div class="date-mon">Nov</div>372 </div>373 <div class="card">374 <div class="title">One-way from Hamburg to Abu Dhabi</div>375 <div class="meta">376 <svg viewBox="0 0 24 24"><path d="M19 4H5v2h14V4zM19 8H5v12h14V8zm-9 4h4v4h-4z"/></svg>377 <span>08 Nov, 2023 - 10 Dec, 2023 (32 days)</span>378 </div>379 <div class="chevron"><svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6z"/></svg></div>380 </div>381 </div>382 383 <!-- Item 8 -->384 <div class="item">385 <div class="date-col" style="background:#2a79ab;">386 <div class="date-day">08</div>387 <div class="date-mon">Nov</div>388 </div>389 <div class="card">390 <div class="title">One-way from Hamburg to Dubai</div>391 <div class="meta">392 <svg viewBox="0 0 24 24"><path d="M19 4H5v2h14V4zM19 8H5v12h14V8zm-9 4h4v4h-4z"/></svg>393 <span>08 Nov, 2023 - 16 Dec, 2023 (38 days)</span>394 </div>395 <div class="chevron"><svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6z"/></svg></div>396 </div>397 </div>398 399 <!-- Item 9 -->400 <div class="item">401 <div class="date-col" style="background:#2a79ab;">402 <div class="date-day">19</div>403 <div class="date-mon">Nov</div>404 </div>405 <div class="card">406 <div class="title">One-way from Palma de Mallorca to Dubai</div>407 <div class="meta">408 <svg viewBox="0 0 24 24"><path d="M19 4H5v2h14V4zM19 8H5v12h14V8zm-9 4h4v4h-4z"/></svg>409 <span>19 Nov, 2023 - 08 Dec, 2023 (19 days)</span>410 </div>411 <div class="chevron"><svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6z"/></svg></div>412 </div>413 </div>414 415 <!-- Extra cut-off item mimicking screenshot continuation -->416 <div class="item">417 <div class="date-col" style="background:#2a79ab;">418 <div class="date-day">19</div>419 <div class="date-mon">Nov</div>420 </div>421 <div class="card">422 <div class="title">One-way from Palma de Mallorca to Dubai</div>423 <div class="meta">424 <svg viewBox="0 0 24 24"><path d="M19 4H5v2h14V4zM19 8H5v12h14V8zm-9 4h4v4h-4z"/></svg>425 <span>19 Nov, 2023 - …</span>426 </div>427 <div class="chevron"><svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6z"/></svg></div>428 </div>429 </div>430 </div>431 432 <!-- Ad banner -->433 <div class="ad-banner">434 <div class="ad-icon">[IMG: App Icon]</div>435 <div class="ad-text">436 <div class="ad-title">Omio</div>437 <div class="ad-sub">✔ Installed</div>438 </div>439 <div class="ad-btn">Open</div>440 <div class="ad-info">i</div>441 </div>442 443 <!-- Home indicator -->444 <div class="home-indicator"></div>445 446</div>447</body>448</html>