GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Amsterdam Details</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: linear-gradient(180deg, #3d3a48 0%, #544c59 55%, #1a1a1a 100%);15  }16 17  /* Top App Bar */18  .app-bar {19    position: absolute;20    top: 0; left: 0; right: 0;21    height: 120px;22    background: #0d8ea0;23    color: #ffffff;24    display: flex;25    align-items: center;26    padding: 0 36px;27    box-sizing: border-box;28  }29  .app-left {30    display: flex;31    gap: 44px;32    align-items: center;33  }34  .app-right {35    margin-left: auto;36    font-size: 40px;37    opacity: 0.95;38  }39  .app-icon {40    width: 54px;41    height: 54px;42    opacity: 0.8;43  }44 45  /* Hero */46  .hero {47    position: relative;48    margin-top: 120px; /* below app bar */49    height: 820px;50    text-align: center;51    color: #ffffff;52    display: flex;53    flex-direction: column;54    justify-content: center;55  }56  .hero::after {57    content: "";58    position: absolute;59    inset: 0;60    background: radial-gradient(1200px 700px at 50% 20%, rgba(255,255,255,0.06), rgba(0,0,0,0.35));61    pointer-events: none;62  }63  .pin {64    margin: 0 auto 24px;65    width: 120px;66    height: 120px;67  }68  .hero h1 {69    margin: 10px 60px 30px;70    font-size: 78px;71    line-height: 1.1;72    font-weight: 800;73    letter-spacing: 0.2px;74  }75  .hero .sub {76    font-size: 44px;77    margin: 10px 60px;78    opacity: 0.95;79  }80 81  /* Card */82  .card {83    width: 1020px;84    margin: 28px auto 0;85    background: #ffffff;86    border-radius: 10px;87    overflow: hidden;88    box-shadow: 0 16px 40px rgba(0,0,0,0.35);89  }90  .carousel {91    position: relative;92    height: 650px;93    background: #E0E0E0;94    border-bottom: 1px solid #e5e5e5;95    display: flex;96    align-items: center;97    justify-content: center;98    color: #757575;99    font-size: 40px;100  }101  .carousel .count-chip {102    position: absolute;103    top: 24px;104    right: 24px;105    background: rgba(0,0,0,0.6);106    color: #fff;107    font-size: 36px;108    padding: 10px 22px;109    border-radius: 28px;110  }111  .carousel .nav-btn {112    position: absolute;113    width: 110px; height: 110px;114    border-radius: 55px;115    background: #ffffff;116    box-shadow: 0 6px 16px rgba(0,0,0,0.25);117    display: flex; align-items: center; justify-content: center;118    top: 50%;119    transform: translateY(-50%);120  }121  .carousel .nav-btn.left { left: 24px; }122  .carousel .nav-btn.right { right: 24px; }123 124  .dots {125    display: flex;126    justify-content: center;127    gap: 26px;128    padding: 26px 0 8px;129  }130  .dot {131    width: 26px; height: 26px; border-radius: 13px; background: #d6d6d6;132  }133  .dot.active { background: #63a9c7; }134 135  .card-body {136    position: relative;137    padding: 28px 36px 40px;138  }139  .stamp {140    position: absolute;141    right: 36px;142    top: -8px;143    width: 280px;144    height: 140px;145    background: #E0E0E0;146    border: 1px solid #BDBDBD;147    color: #757575;148    display: flex; align-items: center; justify-content: center;149    font-size: 28px;150  }151  .desc {152    margin-top: 120px;153    font-size: 44px;154    line-height: 1.45;155    color: #222;156  }157 158  /* Bottom gesture bar */159  .home-indicator {160    position: absolute;161    bottom: 24px; left: 50%;162    transform: translateX(-50%);163    width: 300px; height: 10px;164    border-radius: 6px;165    background: #cfcfcf;166    opacity: 0.85;167  }168</style>169</head>170<body>171<div id="render-target">172  <!-- Top App Bar -->173  <div class="app-bar">174    <div class="app-left">175      <svg class="app-icon" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">176        <path d="M15 18l-6-6 6-6"></path>177      </svg>178      <svg class="app-icon" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">179        <path d="M9 6l6 6-6 6"></path>180      </svg>181    </div>182    <div class="app-right">Cancel</div>183  </div>184 185  <!-- Hero Section -->186  <section class="hero">187    <svg class="pin" viewBox="0 0 48 60" xmlns="http://www.w3.org/2000/svg">188      <path d="M24 0C12 0 2 10.7 2 23.9 2 38.7 24 60 24 60s22-21.3 22-36.1C46 10.7 36 0 24 0zm0 34a10 10 0 1 1 0-20 10 10 0 0 1 0 20z" fill="#ffffff"/>189    </svg>190    <h1>Amsterdam, Netherlands</h1>191    <div class="sub">Saturday, September 2, 2023</div>192    <div class="sub">Departs: 3:30PM</div>193  </section>194 195  <!-- Content Card -->196  <div class="card">197    <div class="carousel">198      <div class="count-chip">1/3</div>199      <div style="position:absolute; inset:0; display:flex; align-items:center; justify-content:center;">200        <div style="width:96%; height:92%; background:#E0E0E0; border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center; color:#757575; font-size:42px;">201          [IMG: Amsterdam city skyline]202        </div>203      </div>204      <div class="nav-btn left">205        <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">206          <path d="M15 18l-6-6 6-6"></path>207        </svg>208      </div>209      <div class="nav-btn right">210        <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">211          <path d="M9 6l6 6-6 6"></path>212        </svg>213      </div>214    </div>215    <div class="dots">216      <div class="dot active"></div>217      <div class="dot"></div>218      <div class="dot"></div>219    </div>220    <div class="card-body">221      <div class="stamp">[IMG: Cruise stamp logo]</div>222      <div class="desc">223        Amsterdam, the beautiful capital of the Netherlands, charms visitors with its winding canals, iconic gabled houses, and a thriving arts scene. Discover world‑class museums, cozy cafés, and bike‑friendly streets that invite you to explore at your own pace. Stroll through the historic Jordaan district or cruise along the waterways for unforgettable sunset views.224      </div>225    </div>226  </div>227 228  <!-- Bottom home indicator -->229  <div class="home-indicator"></div>230</div>231</body>232</html>