GD-ML/AndroidCode

1<html>2<head>3<meta charset="utf-8" />4<meta name="viewport" content="width=1080, initial-scale=1.0" />5<title>Galapagos Southern Loop - Mock</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width:1080px; height:2400px;10    position:relative; overflow:hidden;11    background:#ffffff;12  }13 14  /* Top bar */15  .top-bar{16    position:absolute; left:0; top:0; width:100%; height:140px;17    background:#1f4f7a; color:#fff;18    display:flex; align-items:center; justify-content:space-between;19    padding:0 40px;20    box-sizing:border-box;21  }22  .nav-icons{ display:flex; gap:36px; align-items:center; }23  .top-bar .close{ font-size:42px; letter-spacing:1px; }24 25  .tax-note{26    position:absolute; top:150px; left:0; width:100%;27    text-align:center; color:#ffffff; font-size:30px;28    opacity:0.95;29  }30 31  /* Hero image placeholder */32  .hero{33    position:absolute; top:200px; left:0; width:100%; height:1180px;34    background:#E0E0E0;35    border-top:1px solid #BDBDBD;36    border-bottom:1px solid #BDBDBD;37    box-sizing:border-box;38    display:flex; align-items:flex-end; justify-content:center;39  }40  .hero::after{41    content:"";42    position:absolute; inset:0;43    background:linear-gradient(to top, rgba(0,0,0,0.55) 5%, rgba(0,0,0,0.2) 35%, rgba(0,0,0,0) 70%);44    pointer-events:none;45  }46  .hero .label{47    position:absolute; bottom:20px; left:20px;48    background:rgba(0,0,0,0.25); color:#fff; font-size:28px;49    padding:8px 12px; border-radius:6px; border:1px solid rgba(255,255,255,0.35);50  }51  .hero .title-wrap{52    position:absolute; top:290px; left:60px; right:60px; color:#fff;53  }54  .kicker{ font-size:36px; letter-spacing:2px; font-weight:700; text-transform:uppercase; }55  .main-title{ font-size:82px; line-height:1.1; font-weight:800; margin:16px 0 18px; }56  .sub-title{ font-size:38px; letter-spacing:1px; text-transform:uppercase; opacity:0.95; }57  .link-inline{58    margin-top:30px; display:inline-block;59    color:#cfe8ff; font-size:40px; text-decoration:underline; font-weight:700;60  }61 62  /* Sailings section */63  .sailings{64    position:absolute; top:1160px; left:60px; right:60px; color:#fff;65  }66  .sailings .heading{ font-size:56px; font-weight:800; letter-spacing:1px; }67  .cards{68    margin-top:26px; display:flex; gap:28px; align-items:stretch;69  }70  .card-blue{71    width:360px; height:300px; background:#2b5276; color:#fff; border-radius:6px;72    display:flex; flex-direction:column; align-items:center; justify-content:center;73    box-shadow:0 4px 12px rgba(0,0,0,0.3);74  }75  .card-blue .y{ font-size:40px; opacity:0.9; }76  .card-blue .d{ font-size:74px; font-weight:800; letter-spacing:3px; margin-top:8px; }77 78  .card-white{79    width:420px; height:260px; background:#ffffff; color:#111; border-radius:6px;80    display:flex; flex-direction:column; justify-content:center; padding:30px 34px;81    box-shadow:0 4px 12px rgba(0,0,0,0.25);82  }83  .card-white .y{ font-size:40px; color:#3a4a5a; }84  .card-white .d{ font-size:74px; font-weight:800; letter-spacing:2px; margin-top:6px; }85  .card-white .price{ font-size:40px; color:#333; margin-top:10px; }86 87  .view-categories{88    position:absolute; top:1500px; left:60px; font-size:40px; color:#d3ecff; text-decoration:underline; font-weight:700;89  }90 91  /* Pricing area under image (still visually over sand) */92  .pricing{93    position:absolute; top:1630px; left:60px; right:60px; color:#1a1a1a;94  }95  .pricing .avg{ color:#3a3a3a; font-size:32px; text-transform:uppercase; letter-spacing:2px; }96  .pricing .row{97    display:flex; align-items:baseline; gap:40px; margin-top:18px;98  }99  .old{ font-size:56px; color:#7a7a7a; text-decoration:line-through; }100  .new{ font-size:64px; font-weight:800; color:#111; }101 102  /* Buttons */103  .btn-outline{104    position:absolute; top:1770px; left:60px; right:60px; height:120px;105    border:2px solid #d7d7d7; border-radius:10px; color:#1a1a1a;106    display:flex; align-items:center; justify-content:center;107    font-size:44px; font-weight:700; letter-spacing:1px;108    background:rgba(255,255,255,0.85);109  }110  .btn-solid{111    position:absolute; bottom:200px; left:60px; right:60px; height:140px;112    background:#d95f40; color:#fff; border-radius:10px;113    display:flex; align-items:center; justify-content:center;114    font-size:50px; font-weight:800; letter-spacing:1px;115    box-shadow:0 8px 18px rgba(0,0,0,0.18);116  }117 118  /* Placeholder for the big beach image text */119  .img-note{120    position:absolute; top:200px; left:0; width:100%; height:1180px;121    display:flex; align-items:center; justify-content:center;122    color:#666; font-size:34px; z-index:0;123  }124 125  /* Bottom home indicator */126  .home-indicator{127    position:absolute; bottom:110px; left:50%; transform:translateX(-50%);128    width:360px; height:16px; background:#000; opacity:0.2; border-radius:10px;129  }130</style>131</head>132<body>133<div id="render-target">134  <!-- Top navigation bar -->135  <div class="top-bar">136    <div class="nav-icons">137      <!-- Back -->138      <svg width="56" height="56" viewBox="0 0 24 24" fill="#fff" aria-label="Back">139        <path d="M15.5 4.5L7 12l8.5 7.5-1.4 1.6L4.8 12l9.3-9.1 1.4 1.6z"/>140      </svg>141      <!-- Forward -->142      <svg width="56" height="56" viewBox="0 0 24 24" fill="#b9d5f2" aria-label="Forward">143        <path d="M8.5 4.5l8.7 7.5-8.7 7.5 1.4 1.6L21 12 9.9 2.9 8.5 4.5z"/>144      </svg>145    </div>146    <div class="close">Close</div>147  </div>148 149  <div class="tax-note">†Taxes, fees and port expenses $120.00 USD *</div>150 151  <!-- Hero image placeholder -->152  <div class="hero">153    <div class="label">[IMG: Beach with sea lions]</div>154 155    <div class="title-wrap">156      <div class="kicker">7 NIGHTS</div>157      <div class="main-title">Galapagos Southern Loop</div>158      <div class="sub-title">ONBOARD CELEBRITY XPEDITION</div>159      <div class="link-inline">VIEW PORTS +</div>160    </div>161 162    <div class="sailings">163      <div class="heading">2 SAILINGS</div>164      <div class="cards">165        <div class="card-blue">166          <div class="y">2024</div>167          <div class="d">APR 06</div>168        </div>169        <div class="card-white">170          <div class="y">2024</div>171          <div class="d">APR 20</div>172          <div class="price">$9,299 USD</div>173        </div>174      </div>175    </div>176 177    <div class="view-categories">VIEW CATEGORIES +</div>178  </div>179 180  <!-- Pricing and call-to-actions -->181  <div class="pricing">182    <div class="avg">AVG. PER PERSON</div>183    <div class="row">184      <div class="old">$11,624 USD*</div>185      <div class="new">$9,299 USD*</div>186    </div>187  </div>188 189  <div class="btn-outline">VIEW ITINERARY</div>190  <div class="btn-solid">BOOK NOW</div>191 192  <div class="home-indicator"></div>193</div>194</body>195</html>