GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Galapagos Southern Loop</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7  #render-target {8    position: relative;9    width: 1080px;10    height: 2400px;11    overflow: hidden;12    background: #ffffff;13  }14 15  /* Top App Bar */16  .app-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 140px;22    background: #1f4c86;23    display: flex;24    align-items: center;25    padding: 0 40px;26    color: #ffffff;27  }28  .app-bar .icon {29    width: 80px;30    height: 80px;31    display: inline-flex;32    align-items: center;33    justify-content: center;34    margin-right: 28px;35    opacity: 0.95;36  }37  .app-bar .title-right {38    margin-left: auto;39    font-size: 44px;40    font-weight: 600;41    letter-spacing: 0.5px;42  }43 44  /* Hero image placeholder */45  .hero {46    position: absolute;47    top: 140px;48    left: 0;49    width: 1080px;50    height: 2260px;51    background: #E0E0E0;52    border-top: 1px solid #BDBDBD;53    border-bottom: 1px solid #BDBDBD;54    display: flex;55    align-items: flex-start;56    justify-content: center;57    color: #757575;58  }59  .hero .img-label {60    position: absolute;61    top: 40px;62    left: 40px;63    padding: 10px 16px;64    background: rgba(255,255,255,0.7);65    border: 1px dashed #BDBDBD;66    font-size: 28px;67    border-radius: 8px;68  }69  /* Soft overlay so white text is readable */70  .hero::after {71    content: "";72    position: absolute;73    inset: 0;74    background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.20) 25%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0.35) 100%);75    pointer-events: none;76  }77 78  /* Content overlay on hero */79  .content {80    position: absolute;81    top: 420px;82    left: 60px;83    width: 960px;84    color: #ffffff;85  }86  .eyebrow {87    font-size: 40px;88    font-weight: 700;89    letter-spacing: 2px;90    text-transform: uppercase;91    margin-bottom: 24px;92  }93  .main-title {94    font-size: 78px;95    line-height: 1.15;96    font-weight: 800;97    margin-bottom: 24px;98  }99  .sub-title {100    font-size: 40px;101    letter-spacing: 0.5px;102    color: #E6F1FF;103    margin-bottom: 36px;104  }105  .link {106    font-size: 42px;107    color: #9ad0e4;108    text-decoration: none;109    font-weight: 700;110    margin-bottom: 70px;111    display: inline-block;112  }113 114  .section-title {115    font-size: 54px;116    font-weight: 800;117    margin-bottom: 28px;118    color: #ffffff;119  }120 121  /* Date cards */122  .cards {123    display: flex;124    gap: 40px;125    margin-bottom: 38px;126  }127  .card-dark {128    width: 360px;129    height: 360px;130    background: #3b5671;131    border-radius: 10px;132    padding: 32px;133    box-shadow: 0 6px 14px rgba(0,0,0,0.35);134  }135  .card-dark .year {136    font-size: 40px;137    color: #cfe4ff;138    margin-bottom: 24px;139    font-weight: 700;140  }141  .card-dark .date {142    font-size: 86px;143    font-weight: 800;144    line-height: 1.05;145    color: #ffffff;146  }147 148  .card-light {149    width: 360px;150    height: 260px;151    background: #ffffff;152    border-radius: 10px;153    padding: 30px;154    box-shadow: 0 6px 14px rgba(0,0,0,0.30);155    color: #222;156  }157  .card-light .year {158    font-size: 40px;159    color: #777;160    font-weight: 700;161    margin-bottom: 14px;162  }163  .card-light .date {164    font-size: 80px;165    font-weight: 800;166    margin-bottom: 12px;167  }168  .card-light .price {169    font-size: 40px;170    color: #333;171    font-weight: 700;172  }173 174  .link.secondary {175    margin-top: 10px;176    color: #bfe9f3;177  }178 179  .avg-label {180    margin-top: 36px;181    font-size: 34px;182    color: #e8ecf6;183    letter-spacing: 0.5px;184  }185  .prices {186    display: flex;187    gap: 40px;188    align-items: baseline;189    margin: 12px 0 60px;190  }191  .old-price {192    font-size: 58px;193    color: #ffffff;194    position: relative;195    opacity: 0.95;196  }197  .old-price::after {198    content: "";199    position: absolute;200    left: -6px;201    right: -6px;202    top: 50%;203    height: 6px;204    background: #d55;205    transform: rotate(-5deg);206  }207  .new-price {208    font-size: 64px;209    font-weight: 800;210    color: #ffffff;211  }212 213  /* Buttons */214  .btn-outline {215    width: 960px;216    height: 120px;217    border: 3px solid rgba(255,255,255,0.85);218    border-radius: 14px;219    background: rgba(255,255,255,0.08);220    color: #ffffff;221    font-size: 46px;222    font-weight: 800;223    letter-spacing: 0.5px;224    display: flex;225    align-items: center;226    justify-content: center;227    margin-bottom: 40px;228  }229 230  .btn-primary {231    width: 960px;232    height: 140px;233    background: #d55a3c;234    border-radius: 16px;235    color: #ffffff;236    font-size: 52px;237    font-weight: 800;238    letter-spacing: 0.5px;239    display: flex;240    align-items: center;241    justify-content: center;242    box-shadow: 0 10px 18px rgba(0,0,0,0.35);243  }244 245  .footnote {246    position: absolute;247    bottom: 90px;248    left: 60px;249    width: 960px;250    font-size: 32px;251    color: #ffffff;252    opacity: 0.92;253    text-align: center;254  }255</style>256</head>257<body>258<div id="render-target">259 260  <!-- Top navigation bar -->261  <div class="app-bar">262    <div class="icon">263      <svg width="48" height="48" viewBox="0 0 24 24" fill="#ffffff">264        <path d="M15 6l-6 6 6 6-1.5 1.5L6 12l7.5-7.5L15 6z"></path>265      </svg>266    </div>267    <div class="icon">268      <svg width="48" height="48" viewBox="0 0 24 24" fill="#ffffff">269        <path d="M9 6l6 6-6 6 1.5 1.5L18 12 10.5 4.5 9 6z"></path>270      </svg>271    </div>272    <div class="title-right">Close</div>273  </div>274 275  <!-- Hero image area -->276  <div class="hero">277    <div class="img-label">[IMG: Beach shoreline with sea lion - Galapagos]</div>278  </div>279 280  <!-- Overlay content -->281  <div class="content">282    <div class="eyebrow">7 NIGHTS</div>283    <div class="main-title">Galapagos Southern Loop</div>284    <div class="sub-title">ONBOARD CELEBRITY XPEDITION</div>285    <a href="#" class="link">VIEW PORTS +</a>286 287    <div class="section-title">2 SAILINGS</div>288 289    <div class="cards">290      <div class="card-dark">291        <div class="year">2024</div>292        <div class="date">APR 06</div>293      </div>294      <div class="card-light">295        <div class="year">2024</div>296        <div class="date">APR 20</div>297        <div class="price">$9,299 USD</div>298      </div>299    </div>300 301    <a href="#" class="link secondary">VIEW CATEGORIES +</a>302 303    <div class="avg-label">AVG. PER PERSON</div>304    <div class="prices">305      <div class="old-price">$11,624 USD*</div>306      <div class="new-price">$9,299 USD*</div>307    </div>308 309    <div class="btn-outline">VIEW ITINERARY</div>310    <div class="btn-primary">BOOK NOW</div>311  </div>312 313  <div class="footnote">†Taxes, fees and port expenses $120.00 USD*</div>314</div>315</body>316</html>