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 Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #f3f4f6;15 font-family: "Segoe UI", Arial, sans-serif;16 color: #333;17 }18 19 /* Top bars */20 .status-bar {21 position: absolute;22 top: 0; left: 0;23 width: 100%; height: 90px;24 background: #2b6fa6;25 color: #fff;26 display: flex;27 align-items: center;28 padding: 0 40px;29 font-size: 40px;30 }31 .status-icons {32 margin-left: 16px;33 display: flex;34 align-items: center;35 gap: 22px;36 color: #dbe6f3;37 font-size: 34px;38 }39 .status-right {40 margin-left: auto;41 display: flex;42 align-items: center;43 gap: 18px;44 font-size: 34px;45 }46 .header {47 position: absolute;48 top: 90px; left: 0;49 width: 100%; height: 220px;50 background: #2b6fa6;51 display: flex;52 align-items: center;53 padding: 0 40px;54 box-shadow: inset 0 -6px 0 rgba(0,0,0,0.08);55 }56 .header h1 {57 margin: 0;58 color: #fff;59 font-size: 68px;60 font-weight: 700;61 letter-spacing: 0.5px;62 }63 .close-btn {64 margin-left: auto;65 width: 72px; height: 72px;66 border-radius: 36px;67 display: flex; align-items: center; justify-content: center;68 }69 .close-btn svg { width: 56px; height: 56px; }70 71 .tabs {72 position: absolute;73 top: 310px; left: 0;74 width: 100%; height: 110px;75 background: #306fa2;76 display: flex;77 align-items: center;78 padding: 0 40px;79 gap: 60px;80 color: #eaf3fb;81 font-weight: 600;82 font-size: 36px;83 }84 .tab {85 padding: 0 10px 18px 10px;86 opacity: 0.9;87 }88 .tab.active {89 border-bottom: 8px solid #f28c22;90 color: #ffffff;91 opacity: 1;92 }93 94 .year-bar {95 position: absolute;96 top: 420px; left: 0;97 width: 100%; height: 90px;98 background: #2b6fa6;99 color: #fff;100 display: flex; align-items: center; justify-content: center;101 font-size: 52px; font-weight: 800;102 letter-spacing: 1px;103 }104 105 /* List items */106 .list {107 position: absolute;108 top: 510px; left: 0;109 width: 100%;110 padding-bottom: 240px; /* space for bottom strip */111 }112 .item {113 display: flex;114 width: 100%;115 height: 175px;116 background: #ffffff;117 border-top: 1px solid #d7dce2;118 border-bottom: 1px solid #d7dce2;119 }120 .date-block {121 width: 170px;122 background: #2f78aa;123 color: #fff;124 display: flex;125 flex-direction: column;126 align-items: center;127 justify-content: center;128 border-right: 1px solid rgba(255,255,255,0.4);129 }130 .date-day {131 font-size: 60px;132 font-weight: 800;133 line-height: 1;134 }135 .date-month {136 font-size: 34px;137 margin-top: 8px;138 opacity: 0.95;139 }140 .card {141 flex: 1;142 padding: 22px 26px;143 position: relative;144 }145 .title {146 font-size: 42px;147 font-weight: 800;148 color: #2a2f35;149 margin-bottom: 12px;150 }151 .details {152 display: flex;153 align-items: center;154 gap: 12px;155 color: #7b8793;156 font-size: 30px;157 font-weight: 600;158 }159 .chevron {160 position: absolute;161 right: 26px;162 top: 30px;163 width: 42px; height: 42px;164 opacity: 0.7;165 }166 .calendar-icon {167 width: 34px; height: 34px;168 }169 170 /* Bottom image strip */171 .image-strip {172 position: absolute;173 bottom: 120px;174 left: 0;175 width: 100%;176 height: 210px;177 background: #ffffff;178 border-top: 1px solid #d7dce2;179 display: flex;180 align-items: center;181 gap: 18px;182 padding: 10px 24px;183 box-sizing: border-box;184 }185 .logo-badge {186 width: 120px; height: 180px;187 border-radius: 16px;188 background: #f3f6fb;189 border: 1px solid #d7dce2;190 display: flex; align-items: center; justify-content: center;191 color: #336aaa;192 font-weight: 800;193 font-size: 48px;194 }195 .thumb {196 width: 190px; height: 180px;197 background: #E0E0E0;198 border: 1px solid #BDBDBD;199 display: flex; align-items: center; justify-content: center;200 color: #757575; font-size: 28px; font-weight: 600;201 border-radius: 12px;202 }203 204 .gesture-bar {205 position: absolute;206 bottom: 34px; left: 50%;207 width: 280px; height: 16px;208 transform: translateX(-50%);209 background: #d5d9df;210 border-radius: 10px;211 }212</style>213</head>214<body>215<div id="render-target">216 217 <!-- Status Bar -->218 <div class="status-bar">219 <div>4:18</div>220 <div class="status-icons">221 <span>◯</span>222 <span>✔︎</span>223 <span>Ⓜ</span>224 <span>Ⓜ</span>225 <span>•</span>226 </div>227 <div class="status-right">228 <!-- simple battery icon -->229 <svg width="40" height="40" viewBox="0 0 24 24" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">230 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#ffffff" fill="none" stroke-width="2"/>231 <rect x="4" y="8" width="14" height="8" fill="#ffffff"/>232 <rect x="20" y="10" width="2" height="4" fill="#ffffff"/>233 </svg>234 <span>100%</span>235 </div>236 </div>237 238 <!-- Header -->239 <div class="header">240 <h1>AIDAprima</h1>241 <div class="close-btn">242 <svg viewBox="0 0 24 24" fill="none">243 <path d="M6 6 L18 18 M18 6 L6 18" stroke="#ffffff" stroke-width="2.8" stroke-linecap="round"/>244 </svg>245 </div>246 </div>247 248 <!-- Tabs -->249 <div class="tabs">250 <div class="tab">REVIEW</div>251 <div class="tab active">ITINERARIES</div>252 <div class="tab">SPECS</div>253 <div class="tab">DECKPLANS</div>254 </div>255 256 <!-- Year -->257 <div class="year-bar">2023</div>258 259 <!-- Itinerary list -->260 <div class="list">261 <!-- Row 1 -->262 <div class="item">263 <div class="date-block">264 <div class="date-day">19</div>265 <div class="date-month">Oct</div>266 </div>267 <div class="card">268 <div class="title">Round-trip Metropolen Norwegen Ab Rotterdam</div>269 <div class="details">270 <svg class="calendar-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">271 <rect x="3" y="5" width="18" height="16" rx="2" ry="2" stroke="#7b8793" fill="none" stroke-width="2"/>272 <line x1="3" y1="9" x2="21" y2="9" stroke="#7b8793" stroke-width="2"/>273 <line x1="7" y1="3" x2="7" y2="7" stroke="#7b8793" stroke-width="2"/>274 <line x1="17" y1="3" x2="17" y2="7" stroke="#7b8793" stroke-width="2"/>275 </svg>276 <span>19 Oct, 2023 - 02 Nov, 2023 (14 days)</span>277 </div>278 <svg class="chevron" viewBox="0 0 24 24">279 <path d="M6 9 L12 15 L18 9" stroke="#7b8793" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>280 </svg>281 </div>282 </div>283 284 <!-- Row 2 -->285 <div class="item">286 <div class="date-block">287 <div class="date-day">21</div>288 <div class="date-month">Oct</div>289 </div>290 <div class="card">291 <div class="title">Round-trip Metropolen Norwegen</div>292 <div class="details">293 <svg class="calendar-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">294 <rect x="3" y="5" width="18" height="16" rx="2" ry="2" stroke="#7b8793" fill="none" stroke-width="2"/>295 <line x1="3" y1="9" x2="21" y2="9" stroke="#7b8793" stroke-width="2"/>296 <line x1="7" y1="3" x2="7" y2="7" stroke="#7b8793" stroke-width="2"/>297 <line x1="17" y1="3" x2="17" y2="7" stroke="#7b8793" stroke-width="2"/>298 </svg>299 <span>21 Oct, 2023 - 04 Nov, 2023 (14 days)</span>300 </div>301 <svg class="chevron" viewBox="0 0 24 24">302 <path d="M6 9 L12 15 L18 9" stroke="#7b8793" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>303 </svg>304 </div>305 </div>306 307 <!-- Row 3 -->308 <div class="item">309 <div class="date-block">310 <div class="date-day">28</div>311 <div class="date-month">Oct</div>312 </div>313 <div class="card">314 <div class="title">Round-trip Metropolen Ab Hamburg</div>315 <div class="details">316 <svg class="calendar-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">317 <rect x="3" y="5" width="18" height="16" rx="2" ry="2" stroke="#7b8793" fill="none" stroke-width="2"/>318 <line x1="3" y1="9" x2="21" y2="9" stroke="#7b8793" stroke-width="2"/>319 <line x1="7" y1="3" x2="7" y2="7" stroke="#7b8793" stroke-width="2"/>320 <line x1="17" y1="3" x2="17" y2="7" stroke="#7b8793" stroke-width="2"/>321 </svg>322 <span>28 Oct, 2023 - 04 Nov, 2023 (7 days)</span>323 </div>324 <svg class="chevron" viewBox="0 0 24 24">325 <path d="M6 9 L12 15 L18 9" stroke="#7b8793" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>326 </svg>327 </div>328 </div>329 330 <!-- Row 4 -->331 <div class="item">332 <div class="date-block">333 <div class="date-day">02</div>334 <div class="date-month">Nov</div>335 </div>336 <div class="card">337 <div class="title">One-way from Rotterdam to Hamburg</div>338 <div class="details">339 <svg class="calendar-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">340 <rect x="3" y="5" width="18" height="16" rx="2" ry="2" stroke="#7b8793" fill="none" stroke-width="2"/>341 <line x1="3" y1="9" x2="21" y2="9" stroke="#7b8793" stroke-width="2"/>342 <line x1="7" y1="3" x2="7" y2="7" stroke="#7b8793" stroke-width="2"/>343 <line x1="17" y1="3" x2="17" y2="7" stroke="#7b8793" stroke-width="2"/>344 </svg>345 <span>02 Nov, 2023 - 08 Nov, 2023 (6 days)</span>346 </div>347 <svg class="chevron" viewBox="0 0 24 24">348 <path d="M6 9 L12 15 L18 9" stroke="#7b8793" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>349 </svg>350 </div>351 </div>352 353 <!-- Row 5 -->354 <div class="item">355 <div class="date-block">356 <div class="date-day">04</div>357 <div class="date-month">Nov</div>358 </div>359 <div class="card">360 <div class="title">Round-trip Kurzreise Ab Hamburg Nach Stavanger</div>361 <div class="details">362 <svg class="calendar-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">363 <rect x="3" y="5" width="18" height="16" rx="2" ry="2" stroke="#7b8793" fill="none" stroke-width="2"/>364 <line x1="3" y1="9" x2="21" y2="9" stroke="#7b8793" stroke-width="2"/>365 <line x1="7" y1="3" x2="7" y2="7" stroke="#7b8793" stroke-width="2"/>366 <line x1="17" y1="3" x2="17" y2="7" stroke="#7b8793" stroke-width="2"/>367 </svg>368 <span>04 Nov, 2023 - 08 Nov, 2023 (4 days)</span>369 </div>370 <svg class="chevron" viewBox="0 0 24 24">371 <path d="M6 9 L12 15 L18 9" stroke="#7b8793" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>372 </svg>373 </div>374 </div>375 376 <!-- Row 6 -->377 <div class="item">378 <div class="date-block">379 <div class="date-day">08</div>380 <div class="date-month">Nov</div>381 </div>382 <div class="card">383 <div class="title">One-way from Hamburg to Palma de Mallorca</div>384 <div class="details">385 <svg class="calendar-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">386 <rect x="3" y="5" width="18" height="16" rx="2" ry="2" stroke="#7b8793" fill="none" stroke-width="2"/>387 <line x1="3" y1="9" x2="21" y2="9" stroke="#7b8793" stroke-width="2"/>388 <line x1="7" y1="3" x2="7" y2="7" stroke="#7b8793" stroke-width="2"/>389 <line x1="17" y1="3" x2="17" y2="7" stroke="#7b8793" stroke-width="2"/>390 </svg>391 <span>08 Nov, 2023 - 19 Nov, 2023 (11 days)</span>392 </div>393 <svg class="chevron" viewBox="0 0 24 24">394 <path d="M6 9 L12 15 L18 9" stroke="#7b8793" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>395 </svg>396 </div>397 </div>398 399 <!-- Row 7 -->400 <div class="item">401 <div class="date-block">402 <div class="date-day">08</div>403 <div class="date-month">Nov</div>404 </div>405 <div class="card">406 <div class="title">One-way from Hamburg to Abu Dhabi</div>407 <div class="details">408 <svg class="calendar-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">409 <rect x="3" y="5" width="18" height="16" rx="2" ry="2" stroke="#7b8793" fill="none" stroke-width="2"/>410 <line x1="3" y1="9" x2="21" y2="9" stroke="#7b8793" stroke-width="2"/>411 <line x1="7" y1="3" x2="7" y2="7" stroke="#7b8793" stroke-width="2"/>412 <line x1="17" y1="3" x2="17" y2="7" stroke="#7b8793" stroke-width="2"/>413 </svg>414 <span>08 Nov, 2023 - 10 Dec, 2023 (32 days)</span>415 </div>416 <svg class="chevron" viewBox="0 0 24 24">417 <path d="M6 9 L12 15 L18 9" stroke="#7b8793" stroke-width="2.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>418 </svg>419 </div>420 </div>421 422 <!-- Row 8 -->423 <div class="item">424 <div class="date-block">425 <div class="date-day">08</div>426 <div class="date-month">No