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</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #0b3b6f;14    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;15    color: #fff;16  }17 18  /* Top app bar */19  .appbar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 140px;25    background: #1f4f86;26    display: flex;27    align-items: center;28    padding: 0 32px;29    box-sizing: border-box;30  }31  .appbar .icon {32    width: 72px;33    height: 72px;34    display: inline-flex;35    align-items: center;36    justify-content: center;37    margin-right: 24px;38    opacity: 0.95;39  }40  .appbar .spacer { flex: 1; }41  .appbar .close {42    font-size: 44px;43    font-weight: 600;44    letter-spacing: 0.5px;45  }46 47  .divider-line {48    position: absolute;49    top: 140px;50    left: 0;51    width: 1080px;52    height: 6px;53    background: #dcdcdc;54    opacity: 0.5;55  }56 57  /* Hero and content background */58  .hero {59    position: absolute;60    top: 146px;61    left: 0;62    width: 1080px;63    height: 2254px;64    color: #fff;65  }66 67  .bg-photo {68    position: absolute;69    inset: 0;70    background: #E0E0E0;71    border-top: 1px solid #BDBDBD;72    border-bottom: 1px solid #BDBDBD;73    display: flex;74    align-items: center;75    justify-content: center;76    color: #757575;77    font-size: 36px;78    letter-spacing: 1px;79  }80  .bg-overlay {81    position: absolute;82    inset: 0;83    background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.55) 25%, rgba(0,0,0,0.6) 100%);84  }85 86  .hero-header {87    position: absolute;88    top: 24px;89    left: 0;90    width: 100%;91    padding: 40px 48px 10px;92    box-sizing: border-box;93  }94  .hero-header .mini-close {95    position: absolute;96    right: 40px;97    top: 18px;98    font-size: 34px;99    font-weight: 700;100    letter-spacing: 2px;101    opacity: 0.9;102  }103  .tag {104    font-size: 42px;105    font-weight: 700;106    letter-spacing: 2px;107    margin-bottom: 18px;108    text-transform: uppercase;109  }110  .title {111    font-size: 86px;112    font-weight: 800;113    line-height: 1.1;114    margin-bottom: 18px;115  }116  .subtitle {117    font-size: 40px;118    letter-spacing: 1px;119    opacity: 0.95;120  }121 122  /* Itinerary list */123  .list {124    position: absolute;125    left: 0;126    top: 360px;127    width: 100%;128    padding: 0 48px 60px;129    box-sizing: border-box;130  }131  .entry {132    padding: 34px 0 34px;133    border-bottom: 4px solid rgba(255,255,255,0.35);134  }135  .dayline {136    font-size: 46px;137    font-weight: 800;138    margin-bottom: 20px;139  }140  .location {141    font-size: 48px;142    font-weight: 700;143    margin-bottom: 10px;144  }145  .note {146    font-size: 40px;147    font-style: italic;148    opacity: 0.95;149  }150 151  /* bottom gesture handle mimic */152  .gesture {153    position: absolute;154    bottom: 18px;155    left: 50%;156    transform: translateX(-50%);157    width: 420px;158    height: 12px;159    background: rgba(255,255,255,0.7);160    border-radius: 8px;161  }162</style>163</head>164<body>165<div id="render-target">166 167  <!-- Top App Bar -->168  <div class="appbar">169    <div class="icon">170      <svg width="56" height="56" viewBox="0 0 24 24" fill="#ffffff">171        <path d="M15.5 19.5L8 12l7.5-7.5v15z"/>172      </svg>173    </div>174    <div class="icon">175      <svg width="56" height="56" viewBox="0 0 24 24" fill="#ffffff">176        <path d="M8.5 4.5L16 12l-7.5 7.5v-15z"/>177      </svg>178    </div>179    <div class="spacer"></div>180    <div class="close">Close</div>181  </div>182  <div class="divider-line"></div>183 184  <!-- Hero area and content -->185  <div class="hero">186    <div class="bg-photo">[IMG: Ocean Background]</div>187    <div class="bg-overlay"></div>188 189    <div class="hero-header">190      <div class="mini-close">CLOSE</div>191      <div class="tag">7 NIGHTS</div>192      <div class="title">Galapagos Southern Loop</div>193      <div class="subtitle">ONBOARD CELEBRITY XPEDITION</div>194    </div>195 196    <div class="list">197      <div class="entry">198        <div class="dayline">Day 1, Sat, Apr 6, 2024</div>199        <div class="location">BALTRA (GALAPAGOS)</div>200        <div class="note">Departs: 3:00PM</div>201      </div>202 203      <div class="entry">204        <div class="dayline">Day 1, Sat, Apr 6, 2024</div>205        <div class="location">NORTH SEYMOUR ISLAND</div>206        <div class="note">Tendered: 3:30PM to 6:00PM</div>207      </div>208 209      <div class="entry">210        <div class="dayline">Day 2, Sun, Apr 7, 2024</div>211        <div class="location">SOUTH PLAZA (SANTA CRUZ)</div>212        <div class="note">Tendered: 7:00AM to 11:30AM</div>213      </div>214 215      <div class="entry">216        <div class="dayline">Day 2, Sun, Apr 7, 2024</div>217        <div class="location">SANTA FE ISLAND</div>218        <div class="note">Tendered: 3:00PM to 6:00PM</div>219      </div>220 221      <div class="entry">222        <div class="dayline">Day 3, Mon, Apr 8, 2024</div>223        <div class="location">PUNTA PITT (SAN CRISTOBAL)</div>224        <div class="note">Tendered: 7:00AM to 11:30AM</div>225      </div>226 227      <div class="entry">228        <div class="dayline">Day 3, Mon, Apr 8, 2024</div>229        <div class="location">PUERTO BAQUERIZO (CRISTOBAL)</div>230        <div class="note">Tendered: 3:00PM to 6:00PM</div>231      </div>232 233      <div class="entry">234        <div class="dayline">Day 4, Tue, Apr 9, 2024</div>235        <div class="location">BAHIA POST OFFICE (FLOREANA)</div>236        <div class="note">Tendered: 7:00AM to 11:30AM</div>237      </div>238    </div>239  </div>240 241  <div class="gesture"></div>242</div>243</body>244</html>