GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>AIDAprima Itineraries</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 /* Body reset and transparency */9 html, body { margin: 0; padding: 0; }10 body { background: transparent; font-family: Arial, Helvetica, sans-serif; color: #1e2a33; }11 12 /* Render target container */13 #render-target {14 width: 1080px;15 height: 2400px;16 position: relative;17 overflow: hidden;18 background: #eef2f6;19 border-radius: 24px;20 box-shadow: 0 8px 24px rgba(0,0,0,0.15);21 }22 23 /* Top status bar (mock) */24 .status-bar {25 height: 110px;26 background: #2a5f8b;27 color: #e7f1fb;28 display: flex;29 align-items: center;30 justify-content: space-between;31 padding: 0 28px;32 font-size: 34px;33 letter-spacing: 0.5px;34 }35 .status-icons { display: flex; align-items: center; gap: 22px; opacity: 0.9; }36 .dot { width: 12px; height: 12px; border-radius: 50%; background: #e7f1fb; display: inline-block; }37 38 /* App header */39 .app-header {40 height: 190px;41 background: linear-gradient(#2f6f9e, #2b648f);42 color: #fff;43 padding: 26px 36px 0 36px;44 position: relative;45 box-shadow: inset 0 -2px 0 rgba(255,255,255,0.05);46 }47 .app-title {48 font-size: 64px;49 font-weight: 700;50 margin-top: 20px;51 }52 .close-btn {53 position: absolute;54 right: 28px;55 top: 28px;56 width: 84px;57 height: 84px;58 border-radius: 50%;59 display: grid;60 place-items: center;61 color: #d8e7f6;62 cursor: default;63 }64 .close-btn svg { width: 44px; height: 44px; }65 66 /* Tabs */67 .tabs {68 height: 96px;69 background: #2b618f;70 display: flex;71 align-items: flex-end;72 padding: 0 26px;73 gap: 44px;74 color: #d9e6f5;75 font-size: 34px;76 letter-spacing: 0.4px;77 position: relative;78 }79 .tab { padding: 26px 6px 18px; }80 .tab.active { color: #ffffff; position: relative; }81 .tab.active::after {82 content: "";83 position: absolute;84 left: 6px; right: 6px; bottom: 10px;85 height: 6px; background: #f5a028; border-radius: 3px;86 }87 88 /* Year bar */89 .year-bar {90 height: 86px;91 background: #244f76;92 color: #fff;93 font-weight: 700;94 font-size: 44px;95 display: flex;96 align-items: center;97 justify-content: center;98 letter-spacing: 1.4px;99 }100 101 /* Scrollable content */102 .content {103 height: calc(2400px - 110px - 190px - 96px - 86px);104 overflow-y: auto;105 padding: 18px 18px 120px 18px;106 }107 108 /* Itinerary list item */109 .itinerary {110 display: grid;111 grid-template-columns: 160px 1fr;112 gap: 0;113 margin-bottom: 16px;114 }115 .date-col {116 background: #2d78b8;117 color: #fff;118 text-align: center;119 padding: 18px 10px;120 border-radius: 12px 0 0 12px;121 }122 .date-col .day { font-size: 68px; font-weight: 700; line-height: 1; }123 .date-col .month { font-size: 34px; margin-top: 8px; opacity: 0.95; }124 125 .item-card {126 background: #ffffff;127 border: 1px solid #d7dee6;128 border-left: none;129 border-radius: 0 12px 12px 0;130 padding: 22px 24px;131 position: relative;132 box-shadow: 0 1px 0 #e8eef4 inset;133 }134 .item-title {135 font-size: 40px;136 font-weight: 700;137 color: #2d3b45;138 margin-bottom: 10px;139 }140 .item-sub {141 font-size: 28px;142 color: #7b8b98;143 display: flex; align-items: center; gap: 12px;144 }145 .chevron {146 position: absolute; right: 24px; top: 34px;147 width: 24px; height: 24px; border-right: 4px solid #6c7b86; border-bottom: 4px solid #6c7b86;148 transform: rotate(-45deg);149 }150 .chevron.up { transform: rotate(135deg); top: 40px; }151 152 /* Schedule table block (expanded card) */153 .schedule {154 background: #fbf4c9;155 border: 1px solid #e2dcb0;156 border-radius: 12px;157 margin: 14px 10px 18px 178px;158 overflow: hidden;159 }160 .table-row {161 display: grid;162 grid-template-columns: 355px 1fr;163 border-bottom: 1px solid #d6d8db;164 }165 .table-row.header {166 background: #2e6da0;167 color: #fff;168 font-weight: 700;169 font-size: 32px;170 }171 .cell {172 padding: 22px 20px;173 font-size: 30px;174 color: #2b2f33;175 background: #fffdf0;176 }177 .table-row.header .cell { background: transparent; }178 .cell.port a { color: #2c73b8; text-decoration: none; }179 .icon {180 display: inline-block;181 width: 34px; height: 34px;182 margin-right: 12px;183 vertical-align: middle;184 }185 .icon.calendar, .icon.flag, .icon.anchor {186 background: #e0e6eb;187 border-radius: 6px;188 }189 .icon.anchor::before { content: "⚓"; display: block; font-size: 26px; line-height: 34px; text-align: center; color: #3c4c59; }190 .icon.flag::before { content: "🏳️"; display: block; font-size: 26px; line-height: 34px; text-align: center; }191 .icon.calendar::before { content: "📅"; display: block; font-size: 24px; line-height: 34px; text-align: center; }192 193 /* Ad area */194 .ad-card {195 margin: 18px;196 background: #ffffff;197 border: 1px solid #d7dee6;198 border-radius: 18px;199 padding: 24px;200 display: flex;201 align-items: center;202 justify-content: space-between;203 gap: 18px;204 }205 .ad-left { display: flex; align-items: center; gap: 22px; }206 .app-icon {207 width: 140px; height: 140px; background: #E0E0E0; border: 1px solid #BDBDBD;208 display: flex; justify-content: center; align-items: center; color: #757575; border-radius: 22px;209 font-size: 28px; text-align: center;210 }211 .ad-title { font-size: 46px; font-weight: 700; color: #1e2a33; }212 .ad-sub { font-size: 28px; color: #2b8f57; margin-top: 6px; }213 .ad-cta {214 background: #0f8f55; color: #fff; font-weight: 700;215 border: none; border-radius: 50px; padding: 22px 60px;216 font-size: 36px;217 }218 219 /* Bottom gesture bar (mock) */220 .gesture {221 position: absolute; bottom: 18px; left: 50%;222 transform: translateX(-50%);223 width: 300px; height: 10px; background: #1a1a1a; opacity: 0.25; border-radius: 8px;224 }225</style>226</head>227<body>228<div id="render-target">229 <!-- Status bar -->230 <div class="status-bar">231 <div>7:46</div>232 <div class="status-icons">233 <span class="dot"></span><span class="dot"></span><span class="dot"></span>234 <span>84%</span>235 </div>236 </div>237 238 <!-- Header with title and close -->239 <div class="app-header">240 <div class="app-title">AIDAprima</div>241 <div class="close-btn" title="Close">242 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">243 <line x1="5" y1="5" x2="19" y2="19"></line>244 <line x1="19" y1="5" x2="5" y2="19"></line>245 </svg>246 </div>247 </div>248 249 <!-- Tabs -->250 <div class="tabs">251 <div class="tab">REVIEW</div>252 <div class="tab active">ITINERARIES</div>253 <div class="tab">SPECS</div>254 <div class="tab">DECKPLANS</div>255 </div>256 257 <!-- Year header -->258 <div class="year-bar">2023</div>259 260 <!-- Scrollable content -->261 <div class="content">262 <!-- First itinerary (collapsed) -->263 <div class="itinerary">264 <div class="date-col">265 <div class="day">19</div>266 <div class="month">Oct</div>267 </div>268 <div class="item-card">269 <div class="item-title">Round-trip Metropolen Norwegen Ab Rotterdam</div>270 <div class="item-sub"><span class="icon calendar"></span>19 Oct, 2023 - 02 Nov, 2023 (14 days)</div>271 <div class="chevron"></div>272 </div>273 </div>274 275 <!-- Second itinerary (expanded) -->276 <div class="itinerary">277 <div class="date-col">278 <div class="day">21</div>279 <div class="month">Oct</div>280 </div>281 <div class="item-card">282 <div class="item-title">Round-trip Metropolen Norwegen</div>283 <div class="item-sub"><span class="icon calendar"></span>21 Oct, 2023 - 04 Nov, 2023 (14 days)</div>284 <div class="chevron up"></div>285 </div>286 </div>287 288 <!-- Schedule details -->289 <div class="schedule">290 <div class="table-row header">291 <div class="cell">Date / Time</div>292 <div class="cell">Port</div>293 </div>294 295 <div class="table-row">296 <div class="cell">21 Oct 18:00</div>297 <div class="cell port">298 <span class="icon flag"></span>299 <strong>Departing</strong> from <a href="#">Hamburg, Germany</a> — <a href="#">hotels</a>300 </div>301 </div>302 303 <div class="table-row">304 <div class="cell">23 Oct 09:00 - 17:30</div>305 <div class="cell port"><span class="icon anchor"></span><a href="#">Bergen, Norway</a></div>306 </div>307 308 <div class="table-row">309 <div class="cell">24 Oct 11:00 - 21:00</div>310 <div class="cell port"><span class="icon anchor"></span><a href="#">Geiranger, Norway</a></div>311 </div>312 313 <div class="table-row">314 <div class="cell">25 Oct 07:00 - 16:30</div>315 <div class="cell port"><span class="icon anchor"></span><a href="#">Alesund, Norway</a></div>316 </div>317 318 <div class="table-row">319 <div class="cell">26 Oct 10:00 - 20:00</div>320 <div class="cell port"><span class="icon anchor"></span><a href="#">Stavanger, Norway</a></div>321 </div>322 323 <div class="table-row">324 <div class="cell">28 Oct 08:00 - 18:00</div>325 <div class="cell port"><span class="icon anchor"></span><a href="#">Hamburg, Germany</a></div>326 </div>327 328 <div class="table-row">329 <div class="cell">30 Oct 08:30 - 20:30</div>330 <div class="cell port"><span class="icon anchor"></span><a href="#">Southampton, England</a></div>331 </div>332 333 <div class="table-row">334 <div class="cell">31 Oct 08:00 - 20:00</div>335 <div class="cell port"><span class="icon anchor"></span><a href="#">Le Havre-Paris, France</a></div>336 </div>337 338 <div class="table-row">339 <div class="cell">01 Nov 10:00 - 19:00</div>340 <div class="cell port"><span class="icon anchor"></span><a href="#">Zeebrugge, Bruges, Belgium</a></div>341 </div>342 343 <div class="table-row">344 <div class="cell">02 Nov 08:00 - 03 Nov 06:00</div>345 <div class="cell port"><span class="icon anchor"></span><a href="#">Rotterdam, Netherlands South Holland</a></div>346 </div>347 348 <div class="table-row">349 <div class="cell">04 Nov 08:00</div>350 <div class="cell port">351 <span class="icon flag"></span>352 <strong>Arriving</strong> in <a href="#">Hamburg, Germany</a> — <a href="#">hotels</a>353 </div>354 </div>355 </div>356 357 <!-- Third itinerary (collapsed) -->358 <div class="itinerary">359 <div class="date-col" style="background:#2b6aa7;">360 <div class="day">28</div>361 <div class="month">Oct</div>362 </div>363 <div class="item-card">364 <div class="item-title">Round-trip Metropolen Ab Hamburg</div>365 <div class="item-sub"><span class="icon calendar"></span>28 Oct, 2023 - 04 Nov, 2023 (7 days)</div>366 <div class="chevron"></div>367 </div>368 </div>369 370 <!-- Ad -->371 <div class="ad-card">372 <div class="ad-left">373 <div class="app-icon">[IMG: App Icon]</div>374 <div>375 <div class="ad-title">Omio</div>376 <div class="ad-sub">Installed</div>377 </div>378 </div>379 <button class="ad-cta">Open</button>380 </div>381 </div>382 383 <!-- Gesture bar -->384 <div class="gesture"></div>385</div>386</body>387</html>