GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Cruise Search 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, "Roboto", sans-serif;15    color: #455A64;16  }17 18  /* Top status bar */19  .status-bar {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    padding: 0 32px;29    box-sizing: border-box;30  }31  .status-left, .status-right {32    display: flex;33    align-items: center;34    gap: 20px;35    color: #CFD8DC;36    font-size: 32px;37  }38  .status-left { flex: 1; }39  .dot { width: 14px; height: 14px; background: #CFD8DC; border-radius: 50%; display: inline-block; }40 41  /* App bar */42  .app-bar {43    position: absolute;44    top: 110px;45    left: 0;46    width: 1080px;47    height: 170px;48    background: #263238;49    display: flex;50    align-items: center;51    box-sizing: border-box;52    padding: 0 40px;53  }54  .app-title {55    font-size: 60px;56    font-weight: 700;57    color: #FFFFFF;58    flex: 1;59  }60  .menu-dots {61    width: 60px;62    height: 120px;63    display: flex;64    flex-direction: column;65    justify-content: center;66    gap: 16px;67    align-items: flex-end;68  }69  .menu-dots span {70    width: 14px;71    height: 14px;72    background: #B0BEC5;73    border-radius: 50%;74    display: block;75  }76 77  /* List */78  .list {79    position: absolute;80    top: 280px; /* 110 + 170 */81    left: 0;82    width: 1080px;83  }84  .list-item {85    height: 200px;86    display: flex;87    align-items: center;88    box-sizing: border-box;89    padding: 0 40px;90    border-bottom: 1px solid #CFD8DC;91    background: #FFFFFF;92  }93  .list-item.light { background: #ECEFF1; }94  .list-item.selected { background: #E2E7EA; }95  .icon {96    width: 150px;97    height: 150px;98    display: flex;99    align-items: center;100    justify-content: center;101    margin-right: 30px;102  }103  .icon svg { width: 120px; height: 120px; fill: #455A64; stroke: #455A64; }104  .item-text {105    font-size: 60px;106    color: #616C74;107  }108 109  /* Bottom navigation */110  .bottom-nav {111    position: absolute;112    bottom: 0;113    left: 0;114    width: 1080px;115    height: 180px;116    background: #37474F;117    display: flex;118    box-sizing: border-box;119    padding-top: 20px;120    border-top: 1px solid #2c3940;121  }122  .nav-item {123    flex: 1;124    display: flex;125    flex-direction: column;126    align-items: center;127    justify-content: center;128    gap: 16px;129    color: #FFFFFF;130  }131  .nav-item svg { width: 70px; height: 70px; stroke: none; fill: #FFFFFF; }132  .nav-item .label { font-size: 36px; color: #FFFFFF; }133  .nav-item.active svg { fill: #E91E63; }134  .nav-item.active .label { color: #E91E63; }135 136  /* Home indicator (visual only) */137  .home-indicator {138    position: absolute;139    bottom: 10px;140    left: 50%;141    transform: translateX(-50%);142    width: 300px;143    height: 12px;144    background: #00000022;145    border-radius: 8px;146  }147</style>148</head>149<body>150<div id="render-target">151 152  <!-- Status Bar -->153  <div class="status-bar">154    <div class="status-left">155      <span style="color:#ECEFF1;">10:02</span>156      <span class="dot"></span>157      <span class="dot"></span>158      <span class="dot"></span>159    </div>160    <div class="status-right">161      <!-- Simple wifi and battery placeholders -->162      <svg width="46" height="46" viewBox="0 0 24 24">163        <path fill="#CFD8DC" d="M2 8c5.5-5.5 14.5-5.5 20 0l-2 2c-4.4-4.4-11.6-4.4-16 0L2 8zm4 4c3.3-3.3 8.7-3.3 12 0l-2 2c-2.2-2.2-5.8-2.2-8 0l-2-2zm4 4c1.1-1.1 2.9-1.1 4 0l-2 2-2-2z"/>164      </svg>165      <svg width="46" height="46" viewBox="0 0 24 24">166        <rect x="3" y="7" width="16" height="10" rx="2" fill="#CFD8DC"></rect>167        <rect x="19" y="10" width="2" height="4" fill="#CFD8DC"></rect>168      </svg>169      <span style="color:#CFD8DC;font-size:32px;">100%</span>170    </div>171  </div>172 173  <!-- App Bar -->174  <div class="app-bar">175    <div class="app-title">Cruise Search</div>176    <div class="menu-dots">177      <span></span><span></span><span></span>178    </div>179  </div>180 181  <!-- Menu List -->182  <div class="list">183    <div class="list-item">184      <div class="icon">185        <!-- Map pin -->186        <svg viewBox="0 0 24 24">187          <path d="M12 2a7 7 0 0 0-7 7c0 4.5 7 13 7 13s7-8.5 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>188        </svg>189      </div>190      <div class="item-text">Destinations</div>191    </div>192 193    <div class="list-item selected">194      <div class="icon">195        <!-- Calendar -->196        <svg viewBox="0 0 24 24">197          <rect x="3" y="5" width="18" height="15" rx="2" ry="2"></rect>198          <rect x="3" y="9" width="18" height="3" fill="#FFFFFF"></rect>199          <rect x="6" y="3" width="3" height="4"></rect>200          <rect x="15" y="3" width="3" height="4"></rect>201        </svg>202      </div>203      <div class="item-text">Sail Months</div>204    </div>205 206    <div class="list-item light">207      <div class="icon">208        <!-- Clock -->209        <svg viewBox="0 0 24 24">210          <circle cx="12" cy="12" r="9"></circle>211          <rect x="11" y="6" width="2" height="7" fill="#FFFFFF"></rect>212          <rect x="12" y="12" width="5" height="2" transform="rotate(45 12 12)" fill="#FFFFFF"></rect>213        </svg>214      </div>215      <div class="item-text">Cruise Lengths</div>216    </div>217 218    <div class="list-item">219      <div class="icon">220        <!-- Ship -->221        <svg viewBox="0 0 24 24">222          <path d="M12 3l3 3h4v3l-3 1-4-1-4 1-3-1V6h4l3-3z"></path>223          <path d="M4 12l8 3 8-3-2 6H6l-2-6z"></path>224        </svg>225      </div>226      <div class="item-text">Cruise Lines</div>227    </div>228 229    <div class="list-item light">230      <div class="icon">231        <!-- Map pin again -->232        <svg viewBox="0 0 24 24">233          <path d="M12 2a7 7 0 0 0-7 7c0 4.5 7 13 7 13s7-8.5 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/>234        </svg>235      </div>236      <div class="item-text">Departure Ports</div>237    </div>238 239    <div class="list-item">240      <div class="icon">241        <!-- Price Tag -->242        <svg viewBox="0 0 24 24">243          <path d="M3 12l9-9h7v7l-9 9L3 12z"></path>244          <circle cx="16" cy="8" r="2" fill="#FFFFFF"></circle>245        </svg>246      </div>247      <div class="item-text">Max Price</div>248    </div>249  </div>250 251  <!-- Bottom Navigation -->252  <div class="bottom-nav">253    <div class="nav-item">254      <svg viewBox="0 0 24 24">255        <path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 18l-6.2 3 1.2-6.8-5-4.9 6.9-1L12 2z" fill="none" stroke="#FFFFFF" stroke-width="2"></path>256      </svg>257      <div class="label">Top Deals</div>258    </div>259    <div class="nav-item active">260      <svg viewBox="0 0 24 24">261        <circle cx="10" cy="10" r="6"></circle>262        <rect x="14.5" y="14.5" width="7" height="2" transform="rotate(45 18 15.5)" fill="#E91E63"></rect>263      </svg>264      <div class="label">Cruise Search</div>265    </div>266    <div class="nav-item">267      <svg viewBox="0 0 24 24">268        <circle cx="12" cy="12" r="10"></circle>269        <rect x="11" y="10" width="2" height="7" fill="#FFFFFF"></rect>270        <rect x="11" y="6" width="2" height="2" fill="#FFFFFF"></rect>271      </svg>272      <div class="label">Contact Us</div>273    </div>274  </div>275 276  <div class="home-indicator"></div>277</div>278</body>279</html>