GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>UI Render - AIDAprima</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: 'Roboto', Arial, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px;10    position: relative; overflow: hidden;11    background: #ffffff; border-radius: 24px;12    box-shadow: 0 10px 40px rgba(0,0,0,0.15);13  }14  /* Top app bar */15  .app-top {16    position: absolute; left: 0; top: 0; width: 1080px;17    background: #1F5E86; color: #fff;18  }19  .status-bar {20    height: 90px; padding: 0 32px;21    display: flex; align-items: center; justify-content: space-between;22    font-size: 38px; letter-spacing: 0.5px;23  }24  .status-left { display: flex; align-items: center; gap: 20px; }25  .status-right { display: flex; align-items: center; gap: 24px; }26  .header {27    height: 140px; padding: 0 36px;28    display: flex; align-items: center; justify-content: space-between;29  }30  .title { font-size: 64px; font-weight: 700; }31  .close-btn {32    width: 72px; height: 72px; border-radius: 36px;33    display: flex; align-items: center; justify-content: center;34    cursor: default;35  }36  .tabs {37    height: 110px; display: flex; align-items: flex-end;38    gap: 56px; padding: 0 36px 0 36px;39  }40  .tab {41    color: #DDE9F2; font-weight: 700;42    font-size: 36px; padding-bottom: 24px; position: relative;43  }44  .tab.active { color: #FFFFFF; }45  .tab.active::after {46    content: ""; position: absolute; left: 0; bottom: 0;47    width: 140px; height: 6px; background: #F1892D; border-radius: 3px;48  }49  /* Content */50  .content {51    position: absolute; left: 0; top: 340px; /* below blue area */52    width: 100%; height: 1760px; overflow: hidden;53    background: #fff;54  }55  .article {56    padding: 36px 56px 24px 56px;57    color: #3b3b3b; font-size: 42px; line-height: 1.45;58  }59  .article ul {60    margin: 20px 0 12px 40px; padding: 0;61  }62  .article li {63    margin: 22px 0;64  }65  /* Bottom ad card */66  .ad-bar {67    position: absolute; left: 24px; bottom: 150px;68    width: 1032px; height: 180px;69    border: 1px solid #E0E0E0; border-radius: 24px;70    background: #ffffff; display: flex; align-items: center; padding: 24px;71    box-shadow: 0 6px 16px rgba(0,0,0,0.08);72  }73  .ad-icon {74    width: 132px; height: 132px;75    background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 28px;76    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;77  }78  .ad-info { flex: 1; padding: 0 28px; }79  .ad-title { font-size: 54px; font-weight: 700; color: #222; }80  .ad-sub {81    margin-top: 10px; color: #19A05A; font-size: 36px; display: flex; align-items: center; gap: 12px;82  }83  .ad-btn {84    width: 240px; height: 96px; border-radius: 48px; background: #1DBD73;85    color: #fff; font-size: 42px; font-weight: 700;86    display: flex; align-items: center; justify-content: center;87  }88  .ad-aux {89    position: absolute; left: 24px; bottom: 350px; display: flex; align-items: center; gap: 16px;90  }91  .aux-pill {92    width: 44px; height: 44px; border-radius: 22px;93    border: 2px solid #69B5E6; color: #69B5E6; display: flex; align-items: center; justify-content: center; font-size: 28px;94  }95  .aux-close {96    color: #69B5E6; font-size: 40px; line-height: 40px;97  }98  /* Home indicator */99  .home-indicator {100    position: absolute; bottom: 48px; left: 50%;101    width: 420px; height: 12px; background: #000; opacity: 0.3;102    border-radius: 12px; transform: translateX(-50%);103  }104</style>105</head>106<body>107<div id="render-target">108  <div class="app-top">109    <div class="status-bar">110      <div class="status-left">111        <div>7:42</div>112        <!-- simple icons -->113        <svg width="42" height="42" viewBox="0 0 24 24" fill="#fff"><path d="M3 12l4 4 6-8 8 12H3z"/></svg>114        <svg width="42" height="42" viewBox="0 0 24 24" fill="#fff"><path d="M12 2l10 18H2L12 2zm0 4l-6 10h12L12 6z"/></svg>115        <svg width="42" height="42" viewBox="0 0 24 24" fill="#fff"><path d="M12 7v6l4 2-1 2-5-3V7h2z"/></svg>116        <svg width="42" height="42" viewBox="0 0 24 24" fill="#fff"><path d="M6 17c2-3 6-3 8 0 2 0 4-2 4-4-3 1-6-1-8-4-2 3-5 5-8 4 0 2 2 4 4 4z"/></svg>117      </div>118      <div class="status-right">119        <!-- WiFi -->120        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">121          <path d="M2 9c5-5 15-5 20 0"/><path d="M5 12c3-3 11-3 14 0"/><path d="M8 15c2-2 6-2 8 0"/><circle cx="12" cy="18" r="1.5" fill="#fff"/>122        </svg>123        <!-- Battery -->124        <svg width="60" height="44" viewBox="0 0 28 16" fill="none" stroke="#fff" stroke-width="2">125          <rect x="1" y="2" width="22" height="12" rx="2"/>126          <rect x="3" y="4" width="16" height="8" fill="#fff"/>127          <rect x="23" y="5" width="4" height="6" rx="1" fill="#fff"/>128        </svg>129        <div style="font-size:34px;">83%</div>130      </div>131    </div>132    <div class="header">133      <div class="title">AIDAprima</div>134      <div class="close-btn">135        <svg width="48" height="48" viewBox="0 0 24 24" stroke="#fff" stroke-width="2" fill="none">136          <path d="M4 4l16 16M20 4L4 20"/>137        </svg>138      </div>139    </div>140    <div class="tabs">141      <div class="tab active">REVIEW</div>142      <div class="tab">ITINERARIES</div>143      <div class="tab">SPECS</div>144      <div class="tab">DECKPLANS</div>145    </div>146  </div>147 148  <div class="content">149    <div class="article">150      <p>(sized 75 m2 / 810 ft2) includes the brand's popular toy collections LEGO Duplo, LEGO City, LEGO Harry Potter, LEGO Cars.</p>151      <p>Follows the complete list of AIDAprima lounges, clubs and other entertainment venues for kids, teens, and adults.</p>152 153      <ul>154        <li>Pier 3 Bar (coffee bar)</li>155        <li>Spray Bar (adults-only 2-level luxury lounge &amp; Champagne bar via a partnership with French winery "Moet &amp; Chandon")</li>156        <li>Diskothek (Disco D6, with a DJ program, light shows, and themed dance parties)</li>157        <li>Nachtclub Nightfly (adult-only nightclub lounge with grand piano, live band music, and its own bar)</li>158        <li>Tapas &amp; Bar</li>159        <li>AIDA Plaza (2-deck high, open-floor Atrium lounge with bars and live entertainment; luxury boutique shopping arcade)</li>160        <li>Jewelry Shop; Travel Shop; PhotoShop; Sports Shop; Parfumerie; Kids Shop; Treasure Chest Shop</li>161        <li>Kids Club (AIDA Cruises kids program is complimentary, with supervised, age-appropriate activities: the 3 age groups include Seahorses for 3-6 yo, Dolphins for 7-9 yo and Sharks 10-11 yo; the Kids Club has an outdoor area with a paddling pool)</li>162        <li>AIDA Bar (cocktail bar with live music)</li>163        <li>Art Gallery (Kunstgalerie; sells original artworks of renowned art schools and German artists; hosts art auctions)</li>164      </ul>165    </div>166  </div>167 168  <!-- Bottom ad / install bar -->169  <div class="ad-aux">170    <div class="aux-pill">i</div>171    <div class="aux-close">x</div>172  </div>173  <div class="ad-bar">174    <div class="ad-icon">[IMG: App Icon]</div>175    <div class="ad-info">176      <div class="ad-title">Omio</div>177      <div class="ad-sub">178        <svg width="34" height="34" viewBox="0 0 24 24" fill="#19A05A">179          <path d="M9 16l-4-4 2-2 2 2 6-6 2 2-8 8z"/>180        </svg>181        Installed182      </div>183    </div>184    <div class="ad-btn">Open</div>185  </div>186 187  <div class="home-indicator"></div>188</div>189</body>190</html>