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</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15    color: #222;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 100px;25    background: #455A64;26    color: #fff;27    display: flex;28    align-items: center;29    padding: 0 24px;30    box-sizing: border-box;31    font-size: 34px;32  }33  .status-left { display: flex; gap: 18px; align-items: center; }34  .status-right { margin-left: auto; display: flex; gap: 18px; align-items: center; font-size: 30px; }35  .sb-icon {36    width: 26px; height: 26px; opacity: 0.9;37    border: 2px solid #cfd8dc; border-radius: 4px;38  }39  .battery {40    display: inline-flex; align-items: center; gap: 10px;41  }42  .battery-shape {43    width: 42px; height: 22px; border: 3px solid #fff; position: relative; border-radius: 3px;44  }45  .battery-shape::after {46    content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 10px; background: #fff; border-radius: 1px;47  }48  .battery-level {49    position: absolute; left: 0; top: 0; height: 100%; width: 80%; background: #fff;50  }51 52  /* App bar */53  .app-bar {54    position: absolute;55    top: 100px;56    left: 0;57    width: 1080px;58    height: 150px;59    background: #263238;60    color: #fff;61    display: flex;62    align-items: center;63    padding: 0 24px;64    box-sizing: border-box;65  }66  .app-title {67    font-size: 48px;68    font-weight: 600;69    margin-left: 20px;70    letter-spacing: 0.2px;71  }72  .app-actions { margin-left: auto; display: flex; align-items: center; }73 74  .icon-btn {75    width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center;76  }77  .icon {78    width: 48px; height: 48px; fill: none; stroke: #fff; stroke-width: 6;79  }80  .dots svg circle { fill: #fff; }81 82  /* Scrollable content */83  .content {84    position: absolute;85    top: 250px; /* status (100) + app bar (150) */86    left: 0;87    width: 1080px;88    height: 1870px; /* total minus bottom nav + gesture */89    overflow-y: auto;90    -webkit-overflow-scrolling: touch;91    background: #fff;92  }93 94  .list-row {95    display: flex;96    align-items: center;97    padding: 28px 24px 28px 24px;98    height: 150px;99    box-sizing: border-box;100    border-bottom: 2px solid #e0e0e0;101  }102  .radio {103    width: 54px;104    height: 54px;105    border: 6px solid #BDBDBD;106    border-radius: 50%;107    margin-right: 32px;108    box-sizing: border-box;109  }110  .row-text {111    font-size: 46px;112    color: #7A7A7A;113    line-height: 1.15;114  }115 116  .section-header {117    background: #37474F;118    color: #fff;119    font-weight: 700;120    font-size: 36px;121    padding: 18px 24px;122    height: 100px;123    display: flex;124    align-items: center;125    letter-spacing: 0.3px;126  }127 128  /* Bottom navigation */129  .bottom-nav {130    position: absolute;131    bottom: 90px; /* leave space for gesture bar */132    left: 0;133    width: 1080px;134    height: 170px;135    background: #37474F;136    color: #CFD8DC;137    display: flex;138    align-items: center;139    justify-content: space-around;140    box-shadow: 0 -2px 6px rgba(0,0,0,0.15);141  }142  .nav-item {143    width: 33.33%;144    height: 100%;145    display: flex;146    flex-direction: column;147    align-items: center;148    justify-content: center;149    gap: 12px;150  }151  .nav-item svg { width: 54px; height: 54px; }152  .nav-item .label { font-size: 34px; }153  .active { color: #FF2E7E; }154  .active svg path, .active svg circle { stroke: #FF2E7E; fill: none; }155 156  /* Gesture bar */157  .gesture {158    position: absolute;159    bottom: 0;160    left: 0;161    width: 1080px;162    height: 90px;163    background: #000;164    display: flex;165    align-items: center;166    justify-content: center;167  }168  .home-pill {169    width: 260px;170    height: 12px;171    background: #EDEDED;172    border-radius: 10px;173    opacity: 0.95;174  }175</style>176</head>177<body>178<div id="render-target">179 180  <!-- Status Bar -->181  <div class="status-bar">182    <div class="status-left">183      <div style="font-weight:600;">10:03</div>184      <div class="sb-icon"></div>185      <div class="sb-icon" style="border-radius:50%;"></div>186      <div class="sb-icon" style="border:2px dashed #cfd8dc;"></div>187      <div class="sb-icon" style="border:2px solid transparent; border-top-color:#cfd8dc; border-left-color:#cfd8dc; transform: rotate(45deg);"></div>188    </div>189    <div class="status-right">190      <div class="battery">191        <div class="battery-shape"><div class="battery-level"></div></div>192      </div>193      <div>100%</div>194    </div>195  </div>196 197  <!-- App Bar -->198  <div class="app-bar">199    <div class="icon-btn" aria-label="Back">200      <svg class="icon" viewBox="0 0 64 64">201        <path d="M36 10 L20 32 L36 54" stroke-linecap="round" stroke-linejoin="round"></path>202      </svg>203    </div>204    <div class="app-title">Departure Ports</div>205    <div class="app-actions dots icon-btn" aria-label="More">206      <svg viewBox="0 0 24 24">207        <circle cx="12" cy="5" r="2.2"></circle>208        <circle cx="12" cy="12" r="2.2"></circle>209        <circle cx="12" cy="19" r="2.2"></circle>210      </svg>211    </div>212  </div>213 214  <!-- Content -->215  <div class="content">216    <div class="list-row">217      <div class="radio"></div>218      <div class="row-text">Miami, Florida</div>219    </div>220    <div class="list-row">221      <div class="radio"></div>222      <div class="row-text">Montreal, Quebec</div>223    </div>224    <div class="list-row">225      <div class="radio"></div>226      <div class="row-text">New Orleans, Louisiana</div>227    </div>228    <div class="list-row">229      <div class="radio"></div>230      <div class="row-text">New York, New York</div>231    </div>232    <div class="list-row">233      <div class="radio"></div>234      <div class="row-text">Port Canaveral, Florida</div>235    </div>236    <div class="list-row">237      <div class="radio"></div>238      <div class="row-text">San Diego, California</div>239    </div>240    <div class="list-row">241      <div class="radio"></div>242      <div class="row-text">San Francisco, California</div>243    </div>244    <div class="list-row" style="padding-right: 60px;">245      <div class="radio"></div>246      <div class="row-text">San Pedro (Los Angeles), California</div>247    </div>248    <div class="list-row">249      <div class="radio"></div>250      <div class="row-text">Seattle, Washington</div>251    </div>252    <div class="list-row">253      <div class="radio"></div>254      <div class="row-text">Tampa, Florida</div>255    </div>256 257    <div class="section-header">Europe</div>258 259    <div class="list-row">260      <div class="radio"></div>261      <div class="row-text">Amsterdam, Netherlands</div>262    </div>263    <div class="list-row">264      <div class="radio"></div>265      <div class="row-text">Avignon, France</div>266    </div>267    <div class="list-row">268      <div class="radio"></div>269      <div class="row-text">Barcelona, Spain</div>270    </div>271  </div>272 273  <!-- Bottom Navigation -->274  <div class="bottom-nav">275    <div class="nav-item">276      <svg viewBox="0 0 24 24">277        <path d="M12 3 L14.5 9.5 L21 9.5 L16 13.5 L18 20 L12 16.5 L6 20 L8 13.5 L3 9.5 L9.5 9.5 Z" stroke="#CFD8DC" stroke-width="2" fill="none" stroke-linejoin="round"></path>278      </svg>279      <div class="label">Top Deals</div>280    </div>281    <div class="nav-item active">282      <svg viewBox="0 0 24 24">283        <circle cx="11" cy="11" r="7" stroke="#FF2E7E" stroke-width="2" fill="none"></circle>284        <path d="M16 16 L21 21" stroke="#FF2E7E" stroke-width="2" stroke-linecap="round"></path>285      </svg>286      <div class="label">Cruise Search</div>287    </div>288    <div class="nav-item">289      <svg viewBox="0 0 24 24">290        <circle cx="12" cy="12" r="9" stroke="#CFD8DC" stroke-width="2" fill="none"></circle>291        <path d="M12 8 L12 12" stroke="#CFD8DC" stroke-width="2" stroke-linecap="round"></path>292        <circle cx="12" cy="16" r="1.2" fill="#CFD8DC"></circle>293      </svg>294      <div class="label">Contact Us</div>295    </div>296  </div>297 298  <!-- Gesture/Home indicator -->299  <div class="gesture">300    <div class="home-pill"></div>301  </div>302 303</div>304</body>305</html>