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 Lines UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #2f3e45;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 90px;24    background: #2f3e45;25    color: #ffffff;26    display: flex;27    align-items: center;28    justify-content: space-between;29    padding: 0 36px;30    box-sizing: border-box;31    font-size: 32px;32    letter-spacing: 1px;33  }34  .status-left, .status-right {35    display: flex;36    align-items: center;37    gap: 18px;38  }39  .status-icon svg { display: block; }40 41  /* App bar */42  .app-bar {43    position: absolute;44    top: 90px;45    left: 0;46    width: 1080px;47    height: 160px;48    background: #253239;49    color: #fff;50    display: flex;51    align-items: center;52    padding: 0 24px;53    box-sizing: border-box;54    border-bottom: 1px solid rgba(255,255,255,0.06);55  }56  .app-bar .title {57    flex: 1;58    text-align: left;59    font-size: 56px;60    font-weight: 600;61    padding-left: 24px;62  }63  .app-icon {64    width: 80px;65    height: 80px;66    display: flex;67    align-items: center;68    justify-content: center;69  }70 71  /* Subheader labels */72  .subheader {73    position: absolute;74    top: 250px;75    left: 0;76    width: 1080px;77    background: #37474f;78    color: #fff;79    padding: 24px 36px 24px 36px;80    box-sizing: border-box;81    border-bottom: 1px solid rgba(255,255,255,0.08);82  }83  .subheader .label {84    font-size: 40px;85    font-weight: 600;86    margin: 20px 0;87  }88 89  /* List area */90  .list-area {91    position: absolute;92    top: 360px;93    left: 0;94    width: 1080px;95    background: #ffffff;96    box-sizing: border-box;97    border-top: 1px solid #e0e0e0;98  }99  .list-item {100    display: flex;101    align-items: center;102    height: 160px;103    padding: 0 36px;104    box-sizing: border-box;105    border-bottom: 2px solid #e5e5e5;106  }107  .radio {108    width: 80px;109    height: 80px;110    margin-right: 24px;111    display: flex;112    align-items: center;113    justify-content: center;114  }115  .item-text {116    font-size: 48px;117    color: #7a7a7a;118    font-weight: 500;119  }120  .list-item.selected .item-text { color: #666; }121 122  /* Spacer after list to show dark background */123  .bottom-dark {124    position: absolute;125    left: 0;126    width: 1080px;127    height: 900px;128    background: #2f3e45;129  }130 131  /* Bottom nav */132  .bottom-nav {133    position: absolute;134    bottom: 80px;135    left: 0;136    width: 1080px;137    height: 180px;138    background: #2f3e45;139    display: flex;140    align-items: center;141    justify-content: space-around;142    color: #9fb0b7;143    box-sizing: border-box;144    border-top: 1px solid rgba(255,255,255,0.05);145  }146  .nav-item {147    display: flex;148    flex-direction: column;149    align-items: center;150    gap: 16px;151    font-size: 36px;152  }153  .nav-item .icon { width: 72px; height: 72px; }154  .nav-item.active { color: #d81b60; }155  .nav-item.active svg path,156  .nav-item.active svg circle {157    stroke: #d81b60;158    fill: none;159  }160 161  /* Gesture bar */162  .gesture-bar {163    position: absolute;164    bottom: 24px;165    left: 50%;166    transform: translateX(-50%);167    width: 360px;168    height: 12px;169    background: #ffffff;170    border-radius: 6px;171    opacity: 0.85;172  }173</style>174</head>175<body>176<div id="render-target">177 178  <!-- Status Bar -->179  <div class="status-bar">180    <div class="status-left">181      <div>10:04</div>182      <div class="status-icon">183        <!-- check icon -->184        <svg width="28" height="28" viewBox="0 0 24 24"><path d="M5 12l4 4 10-10" fill="none" stroke="#cfd8dc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>185      </div>186      <div class="status-icon">187        <!-- alert icon -->188        <svg width="28" height="28" viewBox="0 0 24 24"><path d="M12 3l9 16H3z" fill="none" stroke="#cfd8dc" stroke-width="2"/></svg>189      </div>190      <div class="status-icon">191        <!-- calendar glyph -->192        <svg width="30" height="30" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="2" fill="none" stroke="#cfd8dc" stroke-width="2"/><path d="M3 9h18" stroke="#cfd8dc" stroke-width="2"/><path d="M7 3v4M17 3v4" stroke="#cfd8dc" stroke-width="2"/></svg>193      </div>194      <div class="status-icon">195        <!-- cloud -->196        <svg width="32" height="32" viewBox="0 0 24 24"><path d="M7 17h9a4 4 0 0 0 0-8 5 5 0 0 0-9-1 4 4 0 0 0 0 9z" fill="none" stroke="#cfd8dc" stroke-width="2"/></svg>197      </div>198    </div>199    <div class="status-right">200      <div class="status-icon">201        <!-- wifi -->202        <svg width="32" height="32" viewBox="0 0 24 24"><path d="M2 8c5.5-5 14.5-5 20 0M6 12c3.5-3 8.5-3 12 0M10 16c1.5-1 3.5-1 5 0M12 20h0" fill="none" stroke="#cfd8dc" stroke-width="2" stroke-linecap="round"/></svg>203      </div>204      <div class="status-icon">205        <!-- battery -->206        <svg width="42" height="28" viewBox="0 0 28 16"><rect x="1" y="3" width="22" height="10" rx="2" fill="none" stroke="#cfd8dc" stroke-width="2"/><rect x="3" y="5" width="18" height="6" fill="#cfd8dc"/><rect x="23" y="6" width="3" height="4" fill="#cfd8dc"/></svg>207      </div>208      <div>100%</div>209    </div>210  </div>211 212  <!-- App Bar -->213  <div class="app-bar">214    <div class="app-icon">215      <!-- Back Arrow -->216      <svg width="64" height="64" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>217    </div>218    <div class="title">Cruise Lines</div>219    <div class="app-icon">220      <!-- More (vertical dots) -->221      <svg width="64" height="64" viewBox="0 0 24 24">222        <circle cx="12" cy="5" r="2" fill="#ffffff"/>223        <circle cx="12" cy="12" r="2" fill="#ffffff"/>224        <circle cx="12" cy="19" r="2" fill="#ffffff"/>225      </svg>226    </div>227  </div>228 229  <!-- Subheader with sections -->230  <div class="subheader">231    <div class="label">Popular</div>232    <div class="label">Other</div>233  </div>234 235  <!-- List Area -->236  <div class="list-area" style="top: 360px;">237    <!-- Item 1 -->238    <div class="list-item">239      <div class="radio">240        <!-- unselected -->241        <svg width="64" height="64" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="#bdbdbd" stroke-width="3"/></svg>242      </div>243      <div class="item-text">Cunard</div>244    </div>245    <!-- Item 2 selected -->246    <div class="list-item selected">247      <div class="radio">248        <!-- selected -->249        <svg width="64" height="64" viewBox="0 0 24 24">250          <circle cx="12" cy="12" r="9" fill="none" stroke="#00c853" stroke-width="3"/>251          <circle cx="12" cy="12" r="5" fill="#00c853"/>252        </svg>253      </div>254      <div class="item-text">MSC Cruises</div>255    </div>256    <!-- Item 3 -->257    <div class="list-item">258      <div class="radio">259        <svg width="64" height="64" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="#bdbdbd" stroke-width="3"/></svg>260      </div>261      <div class="item-text">Oceania Cruises</div>262    </div>263    <!-- Item 4 -->264    <div class="list-item">265      <div class="radio">266        <svg width="64" height="64" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="#bdbdbd" stroke-width="3"/></svg>267      </div>268      <div class="item-text">Regent Seven Seas Cruises</div>269    </div>270    <!-- Item 5 -->271    <div class="list-item" style="border-bottom: 1px solid #e5e5e5;">272      <div class="radio">273        <svg width="64" height="64" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="#bdbdbd" stroke-width="3"/></svg>274      </div>275      <div class="item-text">Silversea Cruises</div>276    </div>277  </div>278 279  <!-- Bottom dark area to match screenshot space -->280  <div class="bottom-dark" style="top: 1160px;"></div>281 282  <!-- Bottom Navigation -->283  <div class="bottom-nav">284    <div class="nav-item">285      <svg class="icon" viewBox="0 0 24 24">286        <path d="M12 3l2.6 5.3 5.8.8-4.2 4.1 1 5.7-5.2-2.8-5.2 2.8 1-5.7-4.2-4.1 5.8-.8z" fill="none" stroke="#9fb0b7" stroke-width="2" stroke-linejoin="round"/>287      </svg>288      <div>Top Deals</div>289    </div>290    <div class="nav-item active">291      <svg class="icon" viewBox="0 0 24 24">292        <circle cx="11" cy="11" r="6" fill="none" stroke="#d81b60" stroke-width="2"/>293        <path d="M20 20l-4-4" stroke="#d81b60" stroke-width="2" stroke-linecap="round"/>294      </svg>295      <div>Cruise Search</div>296    </div>297    <div class="nav-item">298      <svg class="icon" viewBox="0 0 24 24">299        <circle cx="12" cy="12" r="10" fill="none" stroke="#9fb0b7" stroke-width="2"/>300        <path d="M12 8h0" stroke="#9fb0b7" stroke-width="2" stroke-linecap="round"/>301        <path d="M12 11v6" stroke="#9fb0b7" stroke-width="2" stroke-linecap="round"/>302      </svg>303      <div>Contact Us</div>304    </div>305  </div>306 307  <!-- Gesture Bar -->308  <div class="gesture-bar"></div>309 310</div>311</body>312</html>