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>Cruise Search UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ECEFF1; /* app background */13    font-family: Arial, Helvetica, sans-serif;14    color: #212121;15  }16 17  /* Header */18  .app-header {19    background: #37474F;20    height: 220px;21    box-shadow: 0 2px 0 rgba(0,0,0,0.25);22  }23  .app-header .title {24    color: #FFFFFF;25    font-size: 64px;26    font-weight: 700;27    padding: 110px 40px 0 40px;28    letter-spacing: 0.5px;29  }30 31  /* Content scroll area */32  .content {33    position: absolute;34    top: 220px;35    left: 0;36    width: 100%;37    height: calc(2400px - 220px - 190px);38    overflow-y: auto;39    -webkit-overflow-scrolling: touch;40    padding-bottom: 24px;41  }42 43  /* Cruise card */44  .card {45    margin: 24px 24px 28px 24px;46    background: #FFFFFF;47    border-radius: 6px;48    box-shadow: 0 2px 0 rgba(0,0,0,0.08);49  }50  .card .hero {51    position: relative;52    height: 360px;53    background: #E0E0E0;54    border: 1px solid #BDBDBD;55    display: flex;56    align-items: center;57    justify-content: center;58    color: #757575;59    font-size: 32px;60  }61  .card .hero .overlay-title {62    position: absolute;63    bottom: 24px;64    left: 40px;65    right: 40px;66    text-align: center;67    color: #FFFFFF;68    font-size: 56px;69    font-weight: 700;70    text-shadow: 0 2px 4px rgba(0,0,0,0.35);71  }72 73  .details {74    display: flex;75    align-items: center;76    padding: 26px 24px;77    gap: 24px;78  }79  .brand {80    width: 120px; height: 120px;81    background: #E0E0E0;82    border: 1px solid #BDBDBD;83    display: flex; align-items: center; justify-content: center;84    color: #757575; font-size: 24px; border-radius: 4px;85  }86 87  .nights {88    width: 140px;89    text-align: center;90  }91  .nights .count {92    font-size: 72px; font-weight: 700; line-height: 1;93    color: #424242;94  }95  .nights .label {96    font-size: 28px; color: #757575;97  }98 99  .trip-info {100    flex: 1;101    line-height: 1.35;102  }103  .trip-info .city {104    font-size: 40px; color: #616161;105  }106  .trip-info .date {107    font-size: 30px; color: #9E9E9E;108    margin-top: 6px;109  }110 111  .price-wrap {112    display: flex;113    align-items: center;114    margin-left: auto;115  }116  .price-tag {117    position: relative;118    height: 120px;119    padding: 0 40px;120    background: #18D67B;121    color: #FFFFFF;122    font-size: 56px; font-weight: 700;123    line-height: 120px;124    border-radius: 6px;125    text-align: center;126    min-width: 260px;127  }128  .price-tag:before {129    content: "";130    position: absolute;131    left: -36px; top: 0;132    width: 0; height: 0;133    border-top: 60px solid transparent;134    border-bottom: 60px solid transparent;135    border-left: 36px solid #18D67B; /* arrow notch */136  }137 138  /* Bottom navigation */139  .bottom-nav {140    position: absolute;141    bottom: 0; left: 0; right: 0;142    height: 190px;143    background: #455A64;144    box-shadow: 0 -2px 0 rgba(0,0,0,0.25);145    display: flex;146  }147  .nav-item {148    flex: 1;149    color: #FFFFFF;150    text-align: center;151    padding-top: 26px;152  }153  .nav-item .icon {154    width: 72px; height: 72px; margin: 0 auto 12px;155  }156  .nav-item .label {157    font-size: 30px;158  }159  .nav-item.active { color: #E91E63; }160  .nav-item.active .label { color: #E91E63; }161  .nav-item.active svg path { fill: #E91E63; stroke: #E91E63; }162 163  /* Divider bar to echo screenshot separators */164  .divider {165    height: 10px; background: #B0BEC5;166  }167</style>168</head>169<body>170<div id="render-target">171 172  <!-- Header -->173  <div class="app-header">174    <div class="title">Cruise Search</div>175  </div>176 177  <!-- Scroll content -->178  <div class="content">179 180    <!-- Card 1 -->181    <div class="card">182      <div class="hero">183        [IMG: Coastal hillside town photo]184        <div class="overlay-title">Europe - Northern Europe</div>185      </div>186      <div class="details">187        <div class="brand">[IMG: MSC logo]</div>188        <div class="nights">189          <div class="count">7</div>190          <div class="label">nights</div>191        </div>192        <div class="trip-info">193          <div class="city">Hamburg, Germany</div>194          <div class="date">December 17, 2023</div>195        </div>196        <div class="price-wrap">197          <div class="price-tag">$349</div>198        </div>199      </div>200    </div>201 202    <!-- Card 2 -->203    <div class="card">204      <div class="hero">205        [IMG: Scenic fjords and mountains]206        <div class="overlay-title">Europe - Northern Europe</div>207      </div>208      <div class="details">209        <div class="brand">[IMG: MSC logo]</div>210        <div class="nights">211          <div class="count">21</div>212          <div class="label">nights</div>213        </div>214        <div class="trip-info">215          <div class="city">Hamburg, Germany</div>216          <div class="date">January 07, 2024</div>217        </div>218        <div class="price-wrap">219          <div class="price-tag">$969</div>220        </div>221      </div>222    </div>223 224    <!-- Card 3 -->225    <div class="card">226      <div class="hero">227        [IMG: Greek island and cruise ship on blue sea]228        <div class="overlay-title">Europe - Northern Europe</div>229      </div>230      <div class="details">231        <div class="brand">[IMG: MSC logo]</div>232        <div class="nights">233          <div class="count">13</div>234          <div class="label">nights</div>235        </div>236        <div class="trip-info">237          <div class="city">Hamburg, Germany</div>238          <div class="date">April 14, 2024</div>239        </div>240        <div class="price-wrap">241          <div class="price-tag">$1199</div>242        </div>243      </div>244    </div>245 246    <!-- Partial fourth hero to mirror screenshot bottom -->247    <div class="card" style="margin-bottom: 12px;">248      <div class="hero" style="height: 300px;">249        [IMG: Venice canal and domed cathedral at sunset]250        <div class="overlay-title">Europe - Northern Europe</div>251      </div>252    </div>253  </div>254 255  <!-- Bottom Navigation -->256  <div class="bottom-nav">257    <div class="nav-item">258      <div class="icon">259        <!-- Star icon -->260        <svg viewBox="0 0 24 24" width="72" height="72">261          <path d="M12 2l3.2 6.5 7 1-5.2 4.9 1.4 7.1L12 18l-6.4 3.5 1.4-7.1L2 9.5l7-1L12 2z" fill="#FFFFFF"></path>262        </svg>263      </div>264      <div class="label">Top Deals</div>265    </div>266    <div class="nav-item active">267      <div class="icon">268        <!-- Search icon -->269        <svg viewBox="0 0 24 24" width="72" height="72">270          <path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 10-.9.9l.3.3v.8l5 5 1.5-1.5-5-5zM10 15a5 5 0 110-10 5 5 0 010 10z" fill="#E91E63"></path>271        </svg>272      </div>273      <div class="label">Cruise Search</div>274    </div>275    <div class="nav-item">276      <div class="icon">277        <!-- Info icon -->278        <svg viewBox="0 0 24 24" width="72" height="72">279          <circle cx="12" cy="12" r="10" fill="#FFFFFF"></circle>280          <rect x="11" y="10" width="2" height="7" fill="#455A64"></rect>281          <circle cx="12" cy="7" r="1.5" fill="#455A64"></circle>282        </svg>283      </div>284      <div class="label">Contact Us</div>285    </div>286  </div>287 288</div>289</body>290</html>