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; font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #37474F; /* app background */15    color: #fff;16  }17 18  /* Status bar */19  .status-bar {20    height: 110px;21    background: #2F3C41;22    display: flex;23    align-items: center;24    justify-content: space-between;25    padding: 0 36px;26    box-sizing: border-box;27    font-size: 40px;28  }29  .status-left, .status-right {30    display: flex;31    align-items: center;32    gap: 28px;33  }34  .status-icon svg { width: 40px; height: 40px; fill: #CFD8DC; }35  .battery {36    display: flex; align-items: center; gap: 16px; color: #CFD8DC; font-size: 36px;37  }38  .battery svg { width: 60px; height: 34px; }39 40  /* Title bar */41  .title-bar {42    height: 180px;43    display: flex;44    align-items: center;45    padding: 0 36px;46    box-sizing: border-box;47    background: #2F3C41;48    border-bottom: 1px solid rgba(255,255,255,0.08);49  }50  .title-bar h1 {51    margin: 0;52    font-size: 68px;53    font-weight: 600;54    letter-spacing: 0.5px;55  }56 57  /* Scroll content area */58  .content {59    position: absolute;60    left: 0;61    right: 0;62    top: 290px; /* status + title heights (110+180) */63    bottom: 200px; /* reserve space for bottom nav */64    overflow-y: auto;65    padding: 22px 24px 24px;66    box-sizing: border-box;67  }68 69  /* Card */70  .card {71    background: #FFFFFF;72    color: #212121;73    border-radius: 8px;74    box-shadow: 0 2px 6px rgba(0,0,0,0.18);75    margin-bottom: 28px;76    overflow: hidden;77  }78  .banner {79    position: relative;80    height: 280px;81    border-top: 12px solid #2F3C41;82  }83  .banner .img {84    position: absolute;85    inset: 0;86    background: #E0E0E0;87    border: 1px solid #BDBDBD;88    display: flex;89    align-items: center;90    justify-content: center;91    color: #757575;92    font-size: 42px;93  }94  .banner .overlay-title {95    position: absolute;96    left: 50%;97    top: 50%;98    transform: translate(-50%, -50%);99    color: #FFFFFF;100    font-size: 62px;101    text-shadow: 0 2px 4px rgba(0,0,0,0.5);102    font-weight: 500;103    white-space: nowrap;104  }105 106  .details {107    display: grid;108    grid-template-columns: 260px 1fr 280px;109    align-items: center;110    gap: 20px;111    padding: 26px 24px;112    box-sizing: border-box;113  }114 115  .logo-nights {116    display: grid;117    grid-template-columns: 120px 1fr;118    align-items: center;119    gap: 20px;120  }121  .logo {122    width: 120px; height: 120px;123    background: #E0E0E0;124    border: 1px solid #BDBDBD;125    display: flex; align-items: center; justify-content: center;126    color: #757575; font-size: 26px; text-align: center;127  }128  .nights {129    display: flex; flex-direction: column; line-height: 1;130  }131  .nights .num { font-size: 96px; font-weight: 600; color: #212121; }132  .nights .lbl { font-size: 34px; color: #757575; margin-top: 8px; }133 134  .info {135    display: flex; flex-direction: column;136  }137  .info .city { font-size: 44px; color: #616161; }138  .info .date { font-size: 36px; color: #9E9E9E; margin-top: 8px; }139 140  .price {141    position: relative;142    justify-self: end;143    background: #1ED17A;144    color: #fff;145    font-size: 60px;146    font-weight: 700;147    padding: 22px 36px;148    border-radius: 8px 0 0 8px;149  }150  .price::after {151    content: "";152    position: absolute;153    right: -44px;154    top: 50%;155    transform: translateY(-50%);156    width: 0; height: 0;157    border-left: 44px solid #1ED17A;158    border-top: 44px solid transparent;159    border-bottom: 44px solid transparent;160  }161 162  /* Bottom navigation */163  .bottom-nav {164    position: absolute;165    left: 0; right: 0; bottom: 0;166    height: 200px;167    background: #2F3C41;168    border-top: 1px solid rgba(255,255,255,0.08);169    display: flex; align-items: center; justify-content: space-around;170    padding-bottom: 10px;171  }172  .nav-item {173    display: flex; flex-direction: column; align-items: center; justify-content: center;174    gap: 16px; color: #ECEFF1;175    width: 30%;176  }177  .nav-item svg { width: 64px; height: 64px; }178  .nav-item .label { font-size: 36px; }179  .nav-item.active { color: #FF3E8D; }180  .nav-item.active svg { fill: #FF3E8D; }181  .nav-item:not(.active) svg { fill: #ECEFF1; }182</style>183</head>184<body>185<div id="render-target">186 187  <!-- Status Bar -->188  <div class="status-bar">189    <div class="status-left">190      <div>10:06</div>191      <div class="status-icon">192        <!-- check circle -->193        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M8 12l2 2 5-5" stroke="#2F3C41" stroke-width="2" fill="none"/></svg>194      </div>195      <div class="status-icon">196        <!-- warning triangle -->197        <svg viewBox="0 0 24 24"><path d="M12 3l10 18H2L12 3z"/><rect x="11" y="9" width="2" height="6" fill="#2F3C41"/><rect x="11" y="16" width="2" height="2" fill="#2F3C41"/></svg>198      </div>199      <div class="status-icon">200        <!-- cloud -->201        <svg viewBox="0 0 24 24"><path d="M6 15a5 5 0 119-3h2a4 4 0 010 8H7a3 3 0 010-5z"/></svg>202      </div>203    </div>204    <div class="status-right">205      <div class="battery">206        <!-- battery icon -->207        <svg viewBox="0 0 28 14">208          <rect x="1" y="1" width="24" height="12" rx="2" ry="2" fill="#CFD8DC" />209          <rect x="23" y="4" width="6" height="6" rx="1" ry="1" fill="#CFD8DC" />210          <rect x="3" y="3" width="18" height="8" fill="#2F3C41"/>211        </svg>212        <div>100%</div>213      </div>214    </div>215  </div>216 217  <!-- Title -->218  <div class="title-bar">219    <h1>Cruise Search</h1>220  </div>221 222  <!-- Content / Cards -->223  <div class="content">224 225    <!-- Card 1 -->226    <div class="card">227      <div class="banner">228        <div class="img">[IMG: European cityscape / Venice]</div>229        <div class="overlay-title">Europe - Northern Europe</div>230      </div>231      <div class="details">232        <div class="logo-nights">233          <div class="logo">[IMG: Cruise Logo]</div>234          <div class="nights">235            <div class="num">14</div>236            <div class="lbl">nights</div>237          </div>238        </div>239        <div class="info">240          <div class="city">Hamburg, Germany</div>241          <div class="date">April 14, 2024</div>242        </div>243        <div class="price">$1129</div>244      </div>245    </div>246 247    <!-- Card 2 -->248    <div class="card">249      <div class="banner">250        <div class="img">[IMG: Nordic valley / fjords]</div>251        <div class="overlay-title">Europe - Northern Europe</div>252      </div>253      <div class="details">254        <div class="logo-nights">255          <div class="logo">[IMG: Cruise Logo]</div>256          <div class="nights">257            <div class="num">11</div>258            <div class="lbl">nights</div>259          </div>260        </div>261        <div class="info">262          <div class="city">Hamburg, Germany</div>263          <div class="date">May 15, 2024</div>264        </div>265        <div class="price">$1489</div>266      </div>267    </div>268 269    <!-- Card 3 -->270    <div class="card">271      <div class="banner">272        <div class="img">[IMG: Coastal town with bell tower]</div>273        <div class="overlay-title">Europe - Northern Europe</div>274      </div>275      <div class="details">276        <div class="logo-nights">277          <div class="logo">[IMG: Cruise Logo]</div>278          <div class="nights">279            <div class="num">11</div>280            <div class="lbl">nights</div>281          </div>282        </div>283        <div class="info">284          <div class="city">Hamburg, Germany</div>285          <div class="date">May 26, 2024</div>286        </div>287        <div class="price">$1509</div>288      </div>289    </div>290 291    <!-- Card 4 -->292    <div class="card">293      <div class="banner">294        <div class="img">[IMG: Nordic valley / fjords]</div>295        <div class="overlay-title">Europe - Northern Europe</div>296      </div>297      <div class="details">298        <div class="logo-nights">299          <div class="logo">[IMG: Cruise Logo]</div>300          <div class="nights">301            <div class="num">11</div>302            <div class="lbl">nights</div>303          </div>304        </div>305        <div class="info">306          <div class="city">Hamburg, Germany</div>307          <div class="date">June 05, 2024</div>308        </div>309        <div class="price">$1499</div>310      </div>311    </div>312 313  </div>314 315  <!-- Bottom Navigation -->316  <div class="bottom-nav">317    <div class="nav-item">318      <svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>319      <div class="label">Top Deals</div>320    </div>321    <div class="nav-item active">322      <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" fill="currentColor"/><rect x="16" y="16" width="6" height="2" transform="rotate(45 16 16)" /></svg>323      <div class="label">Cruise Search</div>324    </div>325    <div class="nav-item">326      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="8" r="2" fill="#2F3C41"/><rect x="11" y="11" width="2" height="6" fill="#2F3C41"/></svg>327      <div class="label">Contact Us</div>328    </div>329  </div>330 331</div>332</body>333</html>