GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Share Itinerary - Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    font-family: "Helvetica Neue", Arial, sans-serif;15    color: #222;16  }17 18  /* Top bars */19  .top-black {20    position: absolute;21    top: 0; left: 0;22    width: 100%;23    height: 120px;24    background: #000;25  }26  .header {27    position: absolute;28    top: 120px; left: 0;29    width: 100%;30    height: 160px;31    background: #0A8A95; /* teal */32    color: #fff;33  }34  .header-icons {35    position: absolute;36    left: 40px;37    top: 50%;38    transform: translateY(-50%);39    display: flex;40    gap: 80px;41    align-items: center;42  }43  .header .cancel {44    position: absolute;45    right: 40px;46    top: 50%;47    transform: translateY(-50%);48    font-size: 42px;49  }50 51  /* Content */52  .content {53    position: absolute;54    top: 280px; /* below header */55    left: 0; width: 100%;56  }57  .content-inner {58    margin: 20px 60px 0 60px;59  }60  .close-icon {61    position: absolute;62    right: 60px;63    top: 320px;64    width: 56px;65    height: 56px;66  }67 68  .logo {69    text-align: center;70    margin-top: 40px;71    font-size: 36px;72    color: #1f3a5b;73    letter-spacing: 0.5px;74  }75  .logo .x {76    font-weight: 700;77    font-size: 48px;78    color: #173a64;79    margin: 0 10px;80  }81 82  .share-title {83    text-align: center;84    font-size: 56px;85    font-weight: 500;86    color: #333;87    margin: 28px 0 0;88  }89  .itinerary-name {90    text-align: center;91    font-size: 74px;92    font-weight: 800;93    color: #242424;94    margin: 26px 0;95  }96  .subtext {97    text-align: center;98    font-size: 36px;99    color: #666;100    margin-top: 4px;101  }102  .date {103    text-align: center;104    font-size: 48px;105    color: #333;106    margin-top: 22px;107  }108 109  .hero-image {110    width: 100%;111    height: 420px;112    margin-top: 60px;113    background: #E0E0E0;114    border: 1px solid #BDBDBD;115    display: flex;116    align-items: center;117    justify-content: center;118    color: #757575;119    font-size: 28px;120  }121 122  .field {123    margin-top: 70px;124  }125  .input {126    font-size: 42px;127    color: #333;128    padding-bottom: 24px;129    border-bottom: 2px solid #E5E5E5;130  }131 132  .action-btn {133    width: 650px;134    height: 120px;135    margin: 70px auto 0 auto;136    background: #0B3E68; /* navy */137    color: #fff;138    border-radius: 10px;139    display: flex;140    align-items: center;141    justify-content: center;142    font-weight: 800;143    font-size: 40px;144    letter-spacing: 1px;145  }146 147  /* Bottom overlay mimic */148  .footer-overlay {149    position: absolute;150    bottom: 0; left: 0;151    width: 100%;152    height: 200px;153    background: #0b0b0b;154  }155  .book-now {156    width: 920px;157    height: 130px;158    margin: 35px auto 0 auto;159    background: rgba(150, 40, 20, 0.35);160    border-radius: 12px;161    display: flex; align-items: center; justify-content: center;162    color: rgba(255,255,255,0.6);163    font-size: 54px;164    font-weight: 800;165  }166  .home-indicator {167    position: absolute;168    bottom: 22px;169    left: 50%;170    transform: translateX(-50%);171    width: 220px;172    height: 12px;173    border-radius: 6px;174    background: #eaeaea;175    opacity: 0.9;176  }177</style>178</head>179<body>180<div id="render-target">181  <div class="top-black"></div>182  <div class="header">183    <div class="header-icons">184      <!-- Back arrow -->185      <svg viewBox="0 0 100 100" width="64" height="64">186        <path d="M60 20 L30 50 L60 80" stroke="#CFEAEC" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>187      </svg>188      <!-- Forward arrow -->189      <svg viewBox="0 0 100 100" width="64" height="64">190        <path d="M40 20 L70 50 L40 80" stroke="#CFEAEC" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>191      </svg>192    </div>193    <div class="cancel">Cancel</div>194  </div>195 196  <!-- Close icon (X) -->197  <svg class="close-icon" viewBox="0 0 100 100">198    <path d="M20 20 L80 80 M80 20 L20 80" stroke="#111" stroke-width="8" stroke-linecap="round"></path>199  </svg>200 201  <div class="content">202    <div class="content-inner">203      <div class="logo">Celebrity <span class="x">X</span> Cruises</div>204      <div class="share-title">Share with a Friend</div>205      <div class="itinerary-name">British Isles</div>206      <div class="subtext">Onboard CELEBRITY APEX</div>207      <div class="date">Sep 2 - Sep 14, 2023</div>208 209      <div class="hero-image">[IMG: Scenic coastline landscape]</div>210 211      <div class="field">212        <div class="input">Your Email</div>213      </div>214 215      <div class="field">216        <div class="input">Your Friend’s Email</div>217      </div>218 219      <div class="action-btn">SHARE ITINERARY</div>220    </div>221  </div>222 223  <div class="footer-overlay">224    <div class="book-now">BOOK NOW</div>225    <div class="home-indicator"></div>226  </div>227</div>228</body>229</html>