GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Departure Ports UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #37474F; /* page background */14    font-family: Arial, Helvetica, sans-serif;15    color: #fff;16  }17 18  /* Top status bar */19  .statusbar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 110px;25    background: #37474F;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 36px;30    box-sizing: border-box;31    font-size: 38px;32    opacity: 0.95;33  }34  .status-left, .status-right {35    display: flex;36    align-items: center;37    gap: 22px;38  }39  .status-icon {40    width: 36px;41    height: 36px;42    opacity: 0.95;43  }44  .status-time { font-weight: 600; letter-spacing: 1px; }45 46  /* Title bar */47  .titlebar {48    position: absolute;49    top: 110px;50    left: 0;51    width: 1080px;52    background: #3E5159;53    padding: 36px 40px 44px;54    box-sizing: border-box;55    border-bottom: 1px solid rgba(255,255,255,0.08);56  }57  .titlebar h1 {58    margin: 0;59    font-size: 66px;60    font-weight: 700;61  }62 63  .section-label {64    position: absolute;65    top: 240px;66    left: 40px;67    font-size: 42px;68    font-weight: 700;69    color: #ECEFF1;70  }71 72  /* List content area */73  .content {74    position: absolute;75    top: 300px;76    left: 0;77    right: 0;78    bottom: 220px; /* leave space for bottom nav */79    overflow: hidden;80    padding: 0 24px;81    box-sizing: border-box;82  }83 84  .card {85    margin: 24px 0;86    padding: 0;87  }88  .img {89    position: relative;90    width: 1032px;91    height: 500px;92    background: #E0E0E0;93    border: 1px solid #BDBDBD;94    display: flex;95    align-items: center;96    justify-content: center;97    color: #757575;98    font-size: 34px;99    box-sizing: border-box;100  }101  .caption {102    position: absolute;103    bottom: 18px;104    left: 24px;105    right: 24px;106    text-align: center;107    font-size: 56px;108    font-weight: 500;109    color: #FFFFFF;110    text-shadow: 0 2px 6px rgba(0,0,0,0.4);111  }112 113  /* Bottom navigation */114  .bottom-nav {115    position: absolute;116    bottom: 0;117    left: 0;118    width: 1080px;119    height: 220px;120    background: #455A64;121    border-top: 1px solid rgba(255,255,255,0.08);122    display: flex;123    align-items: center;124    justify-content: space-around;125    box-sizing: border-box;126  }127  .nav-item {128    width: 33.33%;129    text-align: center;130    color: #FFFFFF;131  }132  .nav-icon {133    width: 80px;134    height: 80px;135    margin: 0 auto 16px;136    display: block;137  }138  .nav-label { font-size: 34px; }139  .active { color: #FF4D8D; } /* pink active label */140  .active svg path, .active svg circle, .active svg line { stroke: #FF4D8D; }141 142  /* Thin divider between cards to mimic screenshot spacing */143  .divider {144    height: 20px;145    background: #546E7A;146    margin: 0 0 24px;147    border-radius: 4px;148  }149</style>150</head>151<body>152<div id="render-target">153 154  <!-- Status Bar -->155  <div class="statusbar">156    <div class="status-left">157      <div class="status-time">10:02</div>158      <!-- checkmark -->159      <svg class="status-icon" viewBox="0 0 24 24">160        <path d="M20 6L9 17l-5-5" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>161      </svg>162      <!-- warning -->163      <svg class="status-icon" viewBox="0 0 24 24">164        <path d="M12 3l9 16H3l9-16z" fill="none" stroke="#fff" stroke-width="2"></path>165        <path d="M12 9v5" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>166        <circle cx="12" cy="17" r="1.5" fill="#fff"></circle>167      </svg>168      <!-- calendar -->169      <svg class="status-icon" viewBox="0 0 24 24">170        <rect x="3" y="5" width="18" height="16" rx="2" fill="none" stroke="#fff" stroke-width="2"></rect>171        <line x1="3" y1="9" x2="21" y2="9" stroke="#fff" stroke-width="2"></line>172        <line x1="7" y1="2.5" x2="7" y2="6" stroke="#fff" stroke-width="2" stroke-linecap="round"></line>173        <line x1="17" y1="2.5" x2="17" y2="6" stroke="#fff" stroke-width="2" stroke-linecap="round"></line>174      </svg>175      <!-- cloud -->176      <svg class="status-icon" viewBox="0 0 24 24">177        <path d="M6 16h10a4 4 0 0 0 0-8c-1.2 0-2.3.5-3 1.3A5 5 0 0 0 6 9a3 3 0 0 0 0 7z" fill="none" stroke="#fff" stroke-width="2"></path>178      </svg>179    </div>180    <div class="status-right">181      <!-- diamond (network) -->182      <svg class="status-icon" viewBox="0 0 24 24">183        <path d="M12 3l7 7-7 7-7-7 7-7z" fill="none" stroke="#fff" stroke-width="2"></path>184      </svg>185      <!-- battery with percentage -->186      <div style="display:flex; align-items:center; gap:12px;">187        <svg class="status-icon" viewBox="0 0 28 24">188          <rect x="2" y="6" width="20" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"></rect>189          <rect x="23" y="10" width="3" height="4" rx="1" fill="#fff"></rect>190          <rect x="4" y="8" width="12" height="8" fill="#fff"></rect>191        </svg>192        <div>100%</div>193      </div>194    </div>195  </div>196 197  <!-- Title Bar -->198  <div class="titlebar">199    <h1>Departure Ports</h1>200  </div>201 202  <!-- Section label -->203  <div class="section-label">North America</div>204 205  <!-- Content cards -->206  <div class="content">207    <div class="card">208      <div class="img">209        [IMG: Baltimore Harbor Skyline]210        <div class="caption">Baltimore, Maryland</div>211      </div>212    </div>213 214    <div class="card">215      <div class="img">216        [IMG: Boston Skyline]217        <div class="caption">Boston, Massachusetts</div>218      </div>219    </div>220 221    <div class="card">222      <div class="img">223        [IMG: Statue of Liberty & Jersey City Skyline]224        <div class="caption">Cape Liberty (Bayonne), New Jersey</div>225      </div>226    </div>227  </div>228 229  <!-- Bottom Navigation -->230  <div class="bottom-nav">231    <div class="nav-item active">232      <svg class="nav-icon" viewBox="0 0 64 64">233        <path d="M32 6l8 16 18 2-13 12 4 18-17-10-17 10 4-18-13-12 18-2 8-16z" fill="none" stroke="#FF4D8D" stroke-width="3" stroke-linejoin="round"></path>234      </svg>235      <div class="nav-label">Top Deals</div>236    </div>237    <div class="nav-item">238      <svg class="nav-icon" viewBox="0 0 64 64">239        <circle cx="28" cy="28" r="16" fill="none" stroke="#FFFFFF" stroke-width="4"></circle>240        <line x1="42" y1="42" x2="58" y2="58" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"></line>241      </svg>242      <div class="nav-label">Cruise Search</div>243    </div>244    <div class="nav-item">245      <svg class="nav-icon" viewBox="0 0 64 64">246        <circle cx="32" cy="32" r="26" fill="none" stroke="#FFFFFF" stroke-width="4"></circle>247        <line x1="32" y1="22" x2="32" y2="34" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round"></line>248        <circle cx="32" cy="42" r="3" fill="#FFFFFF"></circle>249      </svg>250      <div class="nav-label">Contact Us</div>251    </div>252  </div>253 254</div>255</body>256</html>