GD-ML/AndroidCode

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 UI</title>7<style>8  * { box-sizing: border-box; }9  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }10  #render-target {11    position: relative;12    overflow: hidden;13    width: 1080px;14    height: 2400px;15    background: #ffffff;16    border-radius: 24px;17    box-shadow: 0 8px 24px rgba(0,0,0,0.2);18  }19 20  /* Colors */21  .blue { background: #1F5D88; }22  .blue-text { color: #1F5D88; }23  .muted { color: #7A8A99; }24  .dark { color: #263238; }25 26  /* Status bar */27  .status-bar {28    position: absolute;29    top: 0;30    left: 0;31    width: 1080px;32    height: 110px;33    padding: 0 36px;34    background: #1F5D88;35    color: #fff;36    display: flex;37    align-items: center;38    justify-content: space-between;39    font-weight: 600;40    font-size: 40px;41    letter-spacing: 0.5px;42  }43  .status-left, .status-right {44    display: flex;45    align-items: center;46    gap: 22px;47  }48  .status-icon {49    width: 32px; height: 32px; border: 2px solid rgba(255,255,255,0.8); border-radius: 50%;50    opacity: 0.9;51  }52  .battery {53    display: inline-flex;54    align-items: center;55    gap: 16px;56  }57  .battery svg { display: block; }58  /* App bar */59  .app-bar {60    position: absolute;61    top: 110px;62    left: 0;63    width: 1080px;64    height: 150px;65    padding: 24px 36px 0 36px;66    background: #1F5D88;67    color: #fff;68  }69  .app-title {70    font-size: 64px;71    font-weight: 700;72    margin-top: 10px;73  }74  .close-btn {75    position: absolute;76    right: 36px;77    top: 42px;78    width: 72px;79    height: 72px;80    display: flex;81    align-items: center;82    justify-content: center;83  }84  .close-btn svg { width: 48px; height: 48px; stroke: #ffffff; stroke-width: 4; }85 86  /* Tabs */87  .tabs {88    position: absolute;89    top: 260px;90    left: 0;91    width: 1080px;92    height: 92px;93    background: #1F5D88;94    display: flex;95    align-items: center;96    padding: 0 36px;97    gap: 42px;98    border-bottom: 4px solid rgba(255,255,255,0.12);99  }100  .tab {101    color: #ffffff;102    font-size: 42px;103    font-weight: 700;104    letter-spacing: 1px;105  }106 107  /* Hero image placeholder */108  .hero {109    position: absolute;110    top: 352px;111    left: 0;112    width: 1080px;113    height: 620px;114    background: #E0E0E0;115    border-top: 1px solid #BDBDBD;116    border-bottom: 1px solid #BDBDBD;117    display: flex;118    align-items: center;119    justify-content: center;120    color: #757575;121    font-size: 42px;122    font-weight: 600;123  }124 125  /* Content section */126  .content {127    position: absolute;128    top: 980px;129    left: 0;130    width: 1080px;131    padding: 30px 64px 160px 64px;132  }133  .trip-title {134    text-align: center;135    font-size: 56px;136    font-weight: 800;137    color: #3A474F;138    margin: 24px 0 22px 0;139  }140  .date-row {141    display: flex;142    align-items: center;143    justify-content: center;144    gap: 18px;145    color: #7A8A99;146    font-size: 38px;147    font-weight: 700;148    margin-bottom: 40px;149  }150  .date-row svg { width: 40px; height: 40px; fill: #7A8A99; }151 152  .cta {153    display: flex;154    align-items: center;155    justify-content: center;156    margin: 10px auto 46px auto;157    width: 520px;158    height: 96px;159    background: #7CC232;160    color: #ffffff;161    border-radius: 20px;162    font-size: 44px;163    font-weight: 800;164    box-shadow: 0 6px 0 rgba(0,0,0,0.1);165    gap: 16px;166  }167  .cta svg { width: 38px; height: 38px; fill: #ffffff; }168 169  .paragraph {170    font-size: 42px;171    line-height: 1.55;172    color: #4A4A4A;173    margin-bottom: 40px;174  }175  .section-heading {176    font-size: 52px;177    font-weight: 800;178    color: #1F5D88;179    margin: 24px 0 22px 0;180  }181 182  /* Carousel of images */183  .carousel {184    display: flex;185    gap: 18px;186    padding-top: 12px;187  }188  .thumb {189    width: 192px;190    height: 160px;191    background: #E0E0E0;192    border: 1px solid #BDBDBD;193    border-radius: 14px;194    display: flex;195    align-items: center;196    justify-content: center;197    color: #757575;198    font-size: 28px;199    font-weight: 600;200  }201 202  /* Floating help widget (bottom-left) */203  .help-widget {204    position: absolute;205    left: 22px;206    bottom: 160px;207    display: flex;208    flex-direction: column;209    align-items: center;210    gap: 12px;211  }212  .help-bubble {213    width: 86px; height: 86px;214    background: #1F9EDB;215    border-radius: 20px;216    box-shadow: 0 6px 18px rgba(0,0,0,0.2);217    display: flex; align-items: center; justify-content: center;218  }219  .help-bubble span {220    color: #fff; font-weight: 800; font-size: 46px; line-height: 1;221  }222  .help-close {223    color: #1F9EDB; font-size: 48px; font-weight: 800;224  }225 226  /* Home indicator */227  .home-indicator {228    position: absolute;229    bottom: 48px;230    left: 50%;231    transform: translateX(-50%);232    width: 420px;233    height: 14px;234    background: #D9D9D9;235    border-radius: 10px;236  }237</style>238</head>239<body>240<div id="render-target">241 242  <!-- Status bar -->243  <div class="status-bar">244    <div class="status-left">245      <div style="margin-right:8px;">4:17</div>246      <div class="status-icon"></div>247      <div class="status-icon"></div>248      <div class="status-icon"></div>249      <div class="status-icon"></div>250      <div style="opacity:0.8;">•</div>251    </div>252    <div class="status-right">253      <svg width="44" height="44" viewBox="0 0 24 24">254        <path fill="#fff" d="M12 2a10 10 0 100 20 10 10 0 000-20zm0 6a1 1 0 011 1v3a1 1 0 01-2 0V9a1 1 0 011-1zm0 9a1.25 1.25 0 110-2.5 1.25 1.25 0 010 2.5z"/>255      </svg>256      <div class="battery">257        <svg width="54" height="28" viewBox="0 0 54 28">258          <rect x="1" y="5" width="44" height="18" rx="4" ry="4" fill="none" stroke="#fff" stroke-width="2"/>259          <rect x="5" y="9" width="36" height="10" rx="2" ry="2" fill="#fff"/>260          <rect x="46" y="10" width="6" height="8" rx="1" ry="1" fill="#fff"/>261        </svg>262        <div style="font-weight:700;">100%</div>263      </div>264    </div>265  </div>266 267  <!-- App bar -->268  <div class="app-bar">269    <div class="app-title">AIDAprima</div>270    <div class="close-btn">271      <svg viewBox="0 0 24 24">272        <path d="M5 5 L19 19 M19 5 L5 19" fill="none" />273      </svg>274    </div>275  </div>276 277  <!-- Tabs -->278  <div class="tabs">279    <div class="tab">REVIEW</div>280    <div class="tab">ITINERARIES</div>281    <div class="tab">SPECS</div>282    <div class="tab">DECKPLANS</div>283  </div>284 285  <!-- Hero image -->286  <div class="hero">[IMG: Cruise Ship AIDAprima]</div>287 288  <!-- Content -->289  <div class="content">290    <div class="trip-title">One-way from Rotterdam to Hamburg</div>291    <div class="date-row">292      <svg viewBox="0 0 24 24">293        <path d="M4 4h16v16H4zM4 8h16" fill="none" stroke="#7A8A99" stroke-width="2"/>294        <path d="M7 2v4M17 2v4" fill="none" stroke="#7A8A99" stroke-width="2"/>295      </svg>296      <div>02 Nov, 2023 - 08 Nov, 2023 (6 days)</div>297    </div>298 299    <div class="cta">300      <svg viewBox="0 0 24 24">301        <path d="M2 12l19-9-8 19-2-7-7-3z"/>302      </svg>303      <div>Track on map</div>304    </div>305 306    <div class="paragraph">307      The 2016-built AIDAprima cruise ship is the first of two AIDA Cruises vessels in the Hyperion-Class series, together with the sister-ship AIDAperla (launched 2017). AIDAprima is the fleet's 11th vessel and the 1st of two Japan-built AIDA ships. AIDA's Hyperion-Class was succeeded by the Helios-Class (AIDAnova and AIDAcosma).308    </div>309 310    <div class="paragraph">311      The vessel (IMO number 9636955) is currently Italy-flagged (MMSI 247353800) and registered in Genova.312    </div>313 314    <div class="section-heading">History - construction and ownership</div>315 316    <div class="paragraph">317      AIDA Cruises is a Rostock-headquartered subsidiary company owned by Carnival Corporation. AIDA is Europe's318    </div>319 320    <div class="carousel">321      <div class="thumb">[IMG: City Landmark]</div>322      <div class="thumb">[IMG: Cathedral]</div>323      <div class="thumb">[IMG: Historic Facade]</div>324      <div class="thumb">[IMG: Tower]</div>325      <div class="thumb">[IMG: Skyline]</div>326    </div>327  </div>328 329  <!-- Floating help widget -->330  <div class="help-widget">331    <div class="help-bubble"><span>i</span></div>332    <div class="help-close">x</div>333  </div>334 335  <!-- Home indicator -->336  <div class="home-indicator"></div>337</div>338</body>339</html>