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>Departure Ports UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    font-family: Arial, Helvetica, sans-serif;16  }17 18  /* Top status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 120px;25    background: #37474F;26    color: #ffffff;27    display: flex;28    align-items: center;29    justify-content: space-between;30    padding: 0 36px;31    box-sizing: border-box;32    font-size: 40px;33  }34  .status-left, .status-right {35    display: flex;36    align-items: center;37    gap: 22px;38  }39  .status-icon svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 4; }40 41  /* App bar */42  .app-bar {43    position: absolute;44    top: 120px;45    left: 0;46    width: 1080px;47    height: 170px;48    background: #263238;49    color: #ffffff;50    display: flex;51    align-items: center;52    padding: 0 36px;53    box-sizing: border-box;54  }55  .app-bar .title {56    font-size: 64px;57    font-weight: 600;58    margin-left: 24px;59  }60  .app-bar .spacer { flex: 1; }61  .icon-btn svg { width: 64px; height: 64px; fill: #ffffff; }62 63  .top-divider {64    position: absolute;65    top: 290px;66    left: 0;67    width: 1080px;68    height: 6px;69    background: #B0BEC5;70  }71 72  /* Content */73  .content {74    position: absolute;75    top: 296px;76    left: 0;77    width: 1080px;78    height: 1744px; /* leave room for bottom nav + gesture */79    background: #ffffff;80    overflow: hidden;81  }82  .section-label {83    font-size: 38px;84    color: #616161;85    font-weight: 700;86    padding: 28px 36px 18px 36px;87    box-sizing: border-box;88  }89 90  .list {91    width: 100%;92  }93  .list-item {94    display: flex;95    align-items: center;96    padding: 36px;97    box-sizing: border-box;98    height: 160px;99    border-bottom: 3px solid #E0E0E0;100  }101  .radio {102    width: 72px;103    height: 72px;104    border-radius: 50%;105    border: 8px solid #BDBDBD;106    margin-right: 36px;107    position: relative;108    box-sizing: border-box;109  }110  .radio.selected {111    border-color: #00E676;112  }113  .radio.selected::after {114    content: '';115    position: absolute;116    left: 50%;117    top: 50%;118    width: 26px;119    height: 26px;120    background: #00E676;121    border-radius: 50%;122    transform: translate(-50%, -50%);123  }124  .item-text {125    font-size: 56px;126    color: #757575;127  }128 129  /* Bottom nav */130  .bottom-nav {131    position: absolute;132    bottom: 90px;133    left: 0;134    width: 1080px;135    height: 190px;136    background: #37474F;137    color: #ECEFF1;138    display: flex;139    align-items: center;140    justify-content: space-around;141    box-sizing: border-box;142    padding: 16px 0;143  }144  .nav-item {145    width: 33.33%;146    text-align: center;147  }148  .nav-item svg { width: 64px; height: 64px; }149  .nav-label {150    margin-top: 10px;151    font-size: 42px;152  }153  .active svg { fill: #E91E63; }154  .active .nav-label { color: #E91E63; }155 156  /* Gesture bar */157  .gesture {158    position: absolute;159    bottom: 24px;160    left: 50%;161    transform: translateX(-50%);162    width: 360px;163    height: 16px;164    background: #D0D0D0;165    border-radius: 10px;166  }167</style>168</head>169<body>170<div id="render-target">171 172  <!-- Status Bar -->173  <div class="status-bar">174    <div class="status-left">175      <div>10:03</div>176      <div class="status-icon">177        <!-- check icon -->178        <svg viewBox="0 0 24 24"><path d="M4 12l5 5 11-11" stroke="#fff" fill="none" stroke-width="3"/></svg>179      </div>180      <div class="status-icon">181        <!-- calendar -->182        <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="15" stroke="#fff"/><line x1="3" y1="10" x2="21" y2="10" stroke="#fff"/></svg>183      </div>184      <div class="status-icon">185        <!-- warning triangle -->186        <svg viewBox="0 0 24 24"><path d="M12 3L2 21h20L12 3z" stroke="#fff"/><circle cx="12" cy="16" r="1.6" fill="#fff"/><line x1="12" y1="9" x2="12" y2="13" stroke="#fff"/></svg>187      </div>188      <div class="status-icon">189        <!-- cloud -->190        <svg viewBox="0 0 24 24"><path d="M6 17h10a4 4 0 0 0 0-8h-1a5 5 0 0 0-9 2" stroke="#fff"/></svg>191      </div>192    </div>193    <div class="status-right">194      <div class="status-icon">195        <!-- wifi -->196        <svg viewBox="0 0 24 24"><path d="M2 8c5-5 15-5 20 0" /><path d="M5 12c3-3 11-3 14 0" /><path d="M8 16c2-2 6-2 8 0" /><circle cx="12" cy="19" r="1.8" fill="#fff" stroke="none"/></svg>197      </div>198      <div class="status-icon">199        <!-- battery -->200        <svg viewBox="0 0 28 18"><rect x="1" y="3" width="22" height="12" stroke="#fff"/><rect x="3" y="5" width="16" height="8" fill="#fff"/><rect x="23" y="6" width="3" height="6" fill="#fff"/></svg>201      </div>202      <div>100%</div>203    </div>204  </div>205 206  <!-- App Bar -->207  <div class="app-bar">208    <div class="icon-btn">209      <!-- back arrow -->210      <svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" fill="none" stroke="#fff" stroke-width="3"/></svg>211    </div>212    <div class="title">Departure Ports</div>213    <div class="spacer"></div>214    <div class="icon-btn">215      <!-- more vert -->216      <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>217    </div>218  </div>219  <div class="top-divider"></div>220 221  <!-- Content Area -->222  <div class="content">223    <div class="section-label">Europe</div>224    <div class="list">225      <div class="list-item">226        <div class="radio"></div>227        <div class="item-text">Amsterdam, Netherlands</div>228      </div>229      <div class="list-item">230        <div class="radio"></div>231        <div class="item-text">Avignon, France</div>232      </div>233      <div class="list-item">234        <div class="radio"></div>235        <div class="item-text">Barcelona, Spain</div>236      </div>237      <div class="list-item">238        <div class="radio"></div>239        <div class="item-text">Basel, Switzerland</div>240      </div>241      <div class="list-item">242        <div class="radio"></div>243        <div class="item-text">Budapest, Hungary</div>244      </div>245      <div class="list-item">246        <div class="radio"></div>247        <div class="item-text">Chalon-Sur-Saone, France</div>248      </div>249      <div class="list-item">250        <div class="radio"></div>251        <div class="item-text">Civitavecchia (Rome), Italy</div>252      </div>253      <div class="list-item">254        <div class="radio"></div>255        <div class="item-text">Copenhagen, Denmark</div>256      </div>257      <div class="list-item">258        <div class="radio"></div>259        <div class="item-text">Dover (London), England</div>260      </div>261      <div class="list-item">262        <div class="radio"></div>263        <div class="item-text">Genoa, Italy</div>264      </div>265      <div class="list-item">266        <div class="radio selected"></div>267        <div class="item-text">Hamburg, Germany</div>268      </div>269    </div>270  </div>271 272  <!-- Bottom Navigation -->273  <div class="bottom-nav">274    <div class="nav-item">275      <!-- star -->276      <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 1-5.2 5 1.3 7-6.2-3.6-6.2 3.6 1.3-7-5.2-5 7-1L12 2z" fill="#ECEFF1"/></svg>277      <div class="nav-label">Top Deals</div>278    </div>279    <div class="nav-item active">280      <!-- search -->281      <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" fill="#E91E63"/><line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#E91E63" stroke-width="3"/></svg>282      <div class="nav-label">Cruise Search</div>283    </div>284    <div class="nav-item">285      <!-- info -->286      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#ECEFF1"/><line x1="12" y1="10" x2="12" y2="18" stroke="#37474F" stroke-width="3"/><circle cx="12" cy="6.5" r="1.5" fill="#37474F"/></svg>287      <div class="nav-label">Contact Us</div>288    </div>289  </div>290 291  <!-- Gesture bar -->292  <div class="gesture"></div>293</div>294</body>295</html>