GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Ports of Call - Mock</title>7<style>8  body { margin:0; padding:0; background: transparent; font-family: "Helvetica Neue", Arial, sans-serif; color:#222; }9  #render-target{10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#ffffff;12  }13  /* Top areas */14  .status-bar{ height:90px; background:#000; }15  .appbar{16    height:160px; background:#0c8690; color:#fff; display:flex; align-items:center; padding:0 36px;17    justify-content:space-between; font-size:44px;18  }19  .appbar-left{ display:flex; gap:34px; align-items:center;}20  .icon{21    width:54px; height:54px; display:inline-block;22  }23  .promo{24    height:110px; background:#336fa2; color:#fff; display:flex; align-items:center;25    padding:0 36px; font-size:40px; justify-content:space-between;26  }27  .promo .left{ display:flex; align-items:center; gap:18px; }28  .promo .link{ text-decoration:underline; }29  .promo .close{ font-size:54px; opacity:0.9; }30  .logo-bar{31    height:180px; background:#fff; display:flex; align-items:center; justify-content:center;32    border-bottom:1px solid #ececec;33  }34  .logo-text{ font-weight:700; color:#0c2a52; font-size:58px; letter-spacing:1px; }35  .logo-text .x{ font-size:84px; margin:0 16px; font-weight:800; }36 37  /* Heading */38  .page-title{39    font-size:110px; font-weight:800; text-align:center; color:#333; margin:64px 0 20px;40  }41 42  /* Cards */43  .cards{ padding:0 28px; }44  .card{45    display:flex; background:#fff; border-radius:26px; box-shadow:0 6px 24px rgba(0,0,0,0.08);46    overflow:hidden; margin:36px 0; border:1px solid #eee;47  }48  .card-img{49    position:relative; width:44%;50    background:#E0E0E0; border-right:1px solid #BDBDBD; min-height:380px; display:flex;51    align-items:center; justify-content:center; color:#757575; text-align:center; padding:16px;52  }53  .day-badge{54    position:absolute; left:28px; bottom:28px; color:#ffffff;55    font-weight:700; letter-spacing:2px;56  }57  .day-badge .day{ font-size:44px; opacity:0.95; }58  .day-badge .num{ font-size:120px; line-height:1; }59  .card-content{60    width:56%; padding:36px 40px; display:flex; flex-direction:column; justify-content:center;61  }62  .card-title{ font-size:56px; font-weight:800; color:#2d2d2d; margin:6px 0 16px; }63  .meta{ color:#5e5e5e; font-size:40px; line-height:1.6; }64  .outline-btn{65    margin-top:42px; padding:30px 24px; border:2px solid #333; border-radius:10px;66    text-align:center; font-weight:800; font-size:44px; letter-spacing:1px;67  }68 69  /* Sticky price bar */70  .price-bar{71    position:absolute; left:0; right:0; bottom:110px; background:#ffffff;72    box-shadow:0 -6px 24px rgba(0,0,0,0.12); padding:30px 28px 32px; border-top-left-radius:18px; border-top-right-radius:18px;73  }74  .price-text{75    text-align:center; margin:10px 0 18px;76  }77  .price-amount{ font-size:64px; font-weight:900; color:#555; }78  .price-sub{ font-size:34px; color:#7a7a7a; margin-top:6px; }79  .cta{80    background:#e4573d; color:#fff; border:none; width:100%; padding:36px 24px; border-radius:10px;81    font-size:56px; font-weight:800; text-align:center; letter-spacing:1px; margin-top:16px;82  }83 84  /* Home indicator */85  .home-indicator{86    position:absolute; bottom:24px; left:50%; transform:translateX(-50%);87    width:260px; height:14px; background:#000; border-radius:8px; opacity:0.8;88  }89</style>90</head>91<body>92<div id="render-target">93  <div class="status-bar"></div>94 95  <div class="appbar">96    <div class="appbar-left">97      <!-- Back -->98      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">99        <path d="M14 4 L6 12 L14 20"></path>100      </svg>101      <!-- Forward -->102      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">103        <path d="M10 4 L18 12 L10 20"></path>104      </svg>105    </div>106    <div>Cancel</div>107  </div>108 109  <div class="promo">110    <div class="left">111      <span style="font-size:48px;">🇮🇳</span>112      <div>Visiting from <strong>India</strong>? <span class="link">Go to site</span> 113        <svg class="icon" viewBox="0 0 24 24" style="width:38px;height:38px;vertical-align:middle;">114          <path d="M9 5 L16 12 L9 19" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>115        </svg>116      </div>117    </div>118    <div class="close">×</div>119  </div>120 121  <div class="logo-bar">122    <div class="logo-text">Celebrity <span class="x">X</span> Cruises</div>123  </div>124 125  <div class="page-title">Ports of Call</div>126 127  <div class="cards">128    <!-- Card 1 -->129    <div class="card">130      <div class="card-img">131        <div>[IMG: Amsterdam canals and windmills]</div>132        <div class="day-badge">133          <div class="day">DAY</div>134          <div class="num">1</div>135        </div>136      </div>137      <div class="card-content">138        <div class="card-title">Amsterdam, Netherlands</div>139        <div class="meta">140          Sat, Sep 2, 2023<br>141          Departs: 3:30PM142        </div>143        <div class="outline-btn">VIEW DETAILS</div>144      </div>145    </div>146 147    <!-- Card 2 -->148    <div class="card">149      <div class="card-img">150        <div>[IMG: Indoor pool on cruise ship]</div>151        <div class="day-badge">152          <div class="day">DAY</div>153          <div class="num">2</div>154        </div>155      </div>156      <div class="card-content">157        <div class="card-title">At Sea - Cruising</div>158        <div class="meta">159          Sun, Sep 3, 2023160        </div>161        <div class="outline-btn">VIEW DETAILS</div>162      </div>163    </div>164 165    <!-- Card 3 (partially visible behind price bar) -->166    <div class="card">167      <div class="card-img">168        <div>[IMG: Portland, Dorset coastline]</div>169        <div class="day-badge">170          <div class="day">DAY</div>171          <div class="num">3</div>172        </div>173      </div>174      <div class="card-content">175        <div class="card-title">Portland, Dorset, UK</div>176        <div class="meta">Mon, Sep 4, 2023</div>177        <div class="outline-btn">VIEW DETAILS</div>178      </div>179    </div>180  </div>181 182  <!-- Sticky pricing/CTA -->183  <div class="price-bar">184    <div class="price-text">185      <div class="price-amount">$1,999 USD*</div>186      <div class="price-sub">†Taxes, fees and port expenses $249.90 USD *</div>187    </div>188    <div class="cta">BOOK NOW</div>189  </div>190 191  <div class="home-indicator"></div>192</div>193</body>194</html>