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    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #FFFFFF;14    font-family: Arial, Helvetica, sans-serif;15    color: #212121;16  }17 18  /* Top system status bar */19  .statusbar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 120px;25    background: #37474F;26    color: #fff;27    display: flex;28    align-items: center;29    justify-content: space-between;30    padding: 0 32px;31    box-sizing: border-box;32    font-size: 34px;33    letter-spacing: 0.5px;34  }35  .status-left { display: flex; align-items: center; gap: 22px; }36  .status-right { display: flex; align-items: center; gap: 22px; }37  .status-icon {38    width: 26px; height: 26px; border-radius: 50%;39    border: 2px solid rgba(255,255,255,0.8);40  }41  .battery {42    display: flex; align-items: center; gap: 10px;43    font-size: 32px;44  }45  .battery-box {46    width: 40px; height: 22px; border: 2px solid #fff; position: relative;47  }48  .battery-box::after {49    content: ""; position: absolute; right: -6px; top: 6px;50    width: 6px; height: 10px; background: #fff;51  }52 53  /* App bar */54  .appbar {55    position: absolute;56    top: 120px;57    left: 0;58    width: 1080px;59    height: 170px;60    background: #2F3D43;61    color: #fff;62    display: flex;63    align-items: center;64    padding: 0 32px;65    box-sizing: border-box;66  }67  .appbar-title {68    font-size: 56px;69    font-weight: 600;70    margin-left: 22px;71  }72  .appbar-right {73    margin-left: auto;74    display: flex;75    align-items: center;76    gap: 24px;77  }78  .icon-btn svg { display: block; }79 80  /* Section header */81  .section-header {82    position: absolute;83    top: 290px;84    left: 0;85    width: 1080px;86    background: #ffffff;87    color: #263238;88    font-weight: 700;89    font-size: 38px;90    padding: 24px 32px;91    box-sizing: border-box;92    border-bottom: 2px solid #e0e0e0;93  }94 95  /* List */96  .list {97    position: absolute;98    top: 356px;99    left: 0;100    width: 1080px;101    height: 1644px; /* leaves space for bottom nav */102    overflow: hidden;103    background: #ffffff;104  }105  .list-item {106    display: flex;107    align-items: center;108    padding: 30px 32px;109    box-sizing: border-box;110    border-bottom: 2px solid #e0e0e0;111    color: #9E9E9E;112    font-size: 44px;113    line-height: 1.2;114  }115  .radio {116    width: 72px; height: 72px;117    border: 6px solid #BDBDBD;118    border-radius: 50%;119    margin-right: 26px;120    box-sizing: border-box;121  }122 123  /* Bottom navigation */124  .bottomnav {125    position: absolute;126    bottom: 0;127    left: 0;128    width: 1080px;129    height: 200px;130    background: #37474F;131    border-top: 1px solid rgba(255,255,255,0.15);132    display: flex;133    align-items: center;134    justify-content: space-around;135    color: #fff;136    box-sizing: border-box;137  }138  .nav-item {139    display: flex;140    flex-direction: column;141    align-items: center;142    gap: 18px;143    font-size: 34px;144  }145  .nav-item svg { width: 64px; height: 64px; }146  .active { color: #E91E63; }147  .active svg path, .active svg circle, .active svg line { stroke: #E91E63; }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>10:02</div>158      <div class="status-icon"></div>159      <div class="status-icon" style="border-style: dashed;"></div>160      <div class="status-icon" style="border-radius: 4px;"></div>161      <div class="status-icon" style="background: rgba(255,255,255,0.25); border-color: transparent;"></div>162    </div>163    <div class="status-right">164      <!-- simple wifi glyph -->165      <svg width="38" height="38" viewBox="0 0 24 24" fill="none">166        <path d="M3 9c4-3 14-3 18 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>167        <path d="M6 12c3-2 9-2 12 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>168        <path d="M9 15c2-1 4-1 6 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>169        <circle cx="12" cy="18" r="1.5" fill="#fff"/>170      </svg>171      <div class="battery">172        <div class="battery-box"></div>173        <div>100%</div>174      </div>175    </div>176  </div>177 178  <!-- App Bar -->179  <div class="appbar">180    <div class="icon-btn">181      <svg width="72" height="72" viewBox="0 0 24 24" fill="none">182        <path d="M15 6L9 12l6 6" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>183      </svg>184    </div>185    <div class="appbar-title">Departure Ports</div>186    <div class="appbar-right">187      <svg width="56" height="56" viewBox="0 0 24 24" fill="none">188        <circle cx="12" cy="5" r="2" fill="#FFFFFF"/>189        <circle cx="12" cy="12" r="2" fill="#FFFFFF"/>190        <circle cx="12" cy="19" r="2" fill="#FFFFFF"/>191      </svg>192    </div>193  </div>194 195  <!-- Section header -->196  <div class="section-header">North America</div>197 198  <!-- List -->199  <div class="list">200    <div class="list-item">201      <div class="radio"></div>202      <div>Baltimore, Maryland</div>203    </div>204    <div class="list-item">205      <div class="radio"></div>206      <div>Boston, Massachusetts</div>207    </div>208    <div class="list-item">209      <div class="radio"></div>210      <div>Cape Liberty (Bayonne), New Jersey</div>211    </div>212    <div class="list-item">213      <div class="radio"></div>214      <div>Charleston, South Carolina</div>215    </div>216    <div class="list-item">217      <div class="radio"></div>218      <div>Ft. Lauderdale (Port Everglades), Florida</div>219    </div>220    <div class="list-item">221      <div class="radio"></div>222      <div>Galveston, Texas</div>223    </div>224    <div class="list-item">225      <div class="radio"></div>226      <div>Houston, Texas</div>227    </div>228    <div class="list-item">229      <div class="radio"></div>230      <div>Jacksonville, Florida</div>231    </div>232    <div class="list-item">233      <div class="radio"></div>234      <div>Long Beach (Los Angeles), California</div>235    </div>236    <div class="list-item">237      <div class="radio"></div>238      <div>Miami, Florida</div>239    </div>240    <div class="list-item">241      <div class="radio"></div>242      <div>Montreal, Quebec</div>243    </div>244  </div>245 246  <!-- Bottom Navigation -->247  <div class="bottomnav">248    <div class="nav-item">249      <svg viewBox="0 0 24 24" fill="none">250        <path d="M12 3l2.5 5.5L20 9l-4 4 1 6-5-3-5 3 1-6-4-4 5.5-.5L12 3z"251              stroke="#FFFFFF" stroke-width="2" stroke-linejoin="round"/>252      </svg>253      <div>Top Deals</div>254    </div>255    <div class="nav-item active">256      <svg viewBox="0 0 24 24" fill="none">257        <circle cx="11" cy="11" r="6" stroke="#FFFFFF" stroke-width="2"/>258        <line x1="16" y1="16" x2="21" y2="21" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>259      </svg>260      <div>Cruise Search</div>261    </div>262    <div class="nav-item">263      <svg viewBox="0 0 24 24" fill="none">264        <circle cx="12" cy="12" r="9" stroke="#FFFFFF" stroke-width="2"/>265        <line x1="12" y1="8" x2="12" y2="8" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round"/>266        <line x1="12" y1="11" x2="12" y2="16" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>267      </svg>268      <div>Contact Us</div>269    </div>270  </div>271 272</div>273</body>274</html>