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 Search 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: #ffffff;15  }16 17  /* Status bar */18  .status-bar {19    height: 120px;20    background: #37474F;21    color: #fff;22    display: flex;23    align-items: center;24    padding: 0 30px;25    font-weight: 500;26  }27  .status-left, .status-right { display: flex; align-items: center; }28  .status-left span.time { font-size: 42px; margin-right: 24px; }29  .status-icon { width: 28px; height: 28px; margin-right: 18px; opacity: 0.9; }30  .status-right { margin-left: auto; font-size: 36px; }31  .status-right .battery { margin-left: 12px; }32 33  /* App bar */34  .app-bar {35    height: 160px;36    background: #263238;37    color: #fff;38    display: flex;39    align-items: center;40    padding: 0 40px;41  }42  .app-title { font-size: 64px; font-weight: 700; }43  .menu-dots { margin-left: auto; display: flex; gap: 10px; }44  .menu-dots span {45    width: 14px; height: 14px; background: #cfd8dc; border-radius: 50%;46    display: inline-block;47  }48 49  /* List */50  .list { width: 100%; }51  .item {52    display: flex;53    align-items: center;54    padding: 40px 40px;55    height: 180px;56  }57  .alt { background: #ECEFF1; }58  .icon-wrap {59    width: 140px;60    height: 100%;61    display: flex;62    align-items: center;63    justify-content: center;64    color: #455A64;65  }66  .icon-wrap svg { width: 88px; height: 88px; fill: none; stroke: #455A64; stroke-width: 28px; }67  .item-content { flex: 1; }68  .item-title { font-size: 64px; color: #616A6E; line-height: 1.1; }69  .item-sub { font-size: 44px; color: #ff1a63; margin-top: 10px; font-weight: 700; }70 71  /* Spacer for the large white area */72  .spacer { height: 1060px; }73 74  /* CTA */75  .cta {76    position: absolute;77    left: 0; right: 0;78    bottom: 230px;79    height: 160px;80    background: #00E676;81    color: #fff;82    display: flex;83    align-items: center;84    justify-content: center;85    font-size: 64px;86    font-weight: 800;87  }88 89  /* Bottom nav */90  .bottom-nav {91    position: absolute;92    left: 0; right: 0; bottom: 60px;93    height: 170px;94    background: #37474F;95    display: flex;96    align-items: center;97    justify-content: space-around;98    color: #fff;99  }100  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 14px; }101  .nav-item svg { width: 70px; height: 70px; stroke: #fff; stroke-width: 20px; fill: none; }102  .nav-item span { font-size: 40px; }103  .active svg { stroke: #ff1a63; }104  .active span { color: #ff1a63; }105 106  /* Gesture bar (visual) */107  .gesture {108    position: absolute;109    bottom: 10px; left: 50%;110    transform: translateX(-50%);111    width: 320px; height: 16px;112    background: #cfd8dc; border-radius: 10px;113  }114</style>115</head>116<body>117<div id="render-target">118 119  <!-- Status Bar -->120  <div class="status-bar">121    <div class="status-left">122      <span class="time">10:05</span>123      <svg class="status-icon" viewBox="0 0 24 24">124        <path d="M12 2l10 18H2z" fill="#cfd8dc"></path>125      </svg>126      <svg class="status-icon" viewBox="0 0 24 24">127        <circle cx="12" cy="12" r="10" stroke="#cfd8dc" stroke-width="2"></circle>128        <path d="M6 12h6V6" stroke="#cfd8dc" stroke-width="2"></path>129      </svg>130      <svg class="status-icon" viewBox="0 0 24 24">131        <rect x="3" y="4" width="18" height="14" rx="2" ry="2" stroke="#cfd8dc" stroke-width="2" fill="none"></rect>132        <path d="M8 2h8" stroke="#cfd8dc" stroke-width="2"></path>133      </svg>134      <svg class="status-icon" viewBox="0 0 24 24">135        <path d="M3 17c4-3 14-3 18 0" stroke="#cfd8dc" stroke-width="2" fill="none"></path>136        <path d="M7 13c2-2 8-2 10 0" stroke="#cfd8dc" stroke-width="2" fill="none"></path>137      </svg>138    </div>139    <div class="status-right">140      <svg class="status-icon" viewBox="0 0 24 24">141        <path d="M2 16h20M4 12h16M6 8h12" stroke="#cfd8dc" stroke-width="2" fill="none"></path>142      </svg>143      <svg class="status-icon" viewBox="0 0 24 24">144        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#cfd8dc" stroke-width="2" fill="none"></rect>145        <rect x="3" y="8" width="12" height="8" fill="#cfd8dc"></rect>146      </svg>147      <span class="battery">100%</span>148    </div>149  </div>150 151  <!-- App Bar -->152  <div class="app-bar">153    <div class="app-title">Cruise Search</div>154    <div class="menu-dots">155      <span></span><span></span><span></span>156    </div>157  </div>158 159  <!-- List Items -->160  <div class="list">161    <div class="item">162      <div class="icon-wrap">163        <!-- Location Pin -->164        <svg viewBox="0 0 100 100">165          <path d="M50 10c-15 0-27 12-27 27 0 21 27 53 27 53s27-32 27-53c0-15-12-27-27-27z"></path>166          <circle cx="50" cy="37" r="12"></circle>167        </svg>168      </div>169      <div class="item-content">170        <div class="item-title">Destinations</div>171      </div>172    </div>173 174    <div class="item alt">175      <div class="icon-wrap">176        <!-- Calendar -->177        <svg viewBox="0 0 100 100">178          <rect x="15" y="25" width="70" height="60" rx="8" ry="8"></rect>179          <path d="M15 40h70"></path>180          <path d="M30 15v20M70 15v20"></path>181        </svg>182      </div>183      <div class="item-content">184        <div class="item-title">Sail Months</div>185      </div>186    </div>187 188    <div class="item">189      <div class="icon-wrap">190        <!-- Clock -->191        <svg viewBox="0 0 100 100">192          <circle cx="50" cy="50" r="32"></circle>193          <path d="M50 28v22l16 10"></path>194        </svg>195      </div>196      <div class="item-content">197        <div class="item-title">Cruise Lengths</div>198      </div>199    </div>200 201    <div class="item alt">202      <div class="icon-wrap">203        <!-- Ship -->204        <svg viewBox="0 0 100 100">205          <path d="M20 60l30-18 30 18-10 22H30z"></path>206          <rect x="40" y="30" width="20" height="12"></rect>207        </svg>208      </div>209      <div class="item-content">210        <div class="item-title">Cruise Lines</div>211        <div class="item-sub">MSC Cruises</div>212      </div>213    </div>214 215    <div class="item">216      <div class="icon-wrap">217        <!-- Location Pin -->218        <svg viewBox="0 0 100 100">219          <path d="M50 10c-15 0-27 12-27 27 0 21 27 53 27 53s27-32 27-53c0-15-12-27-27-27z"></path>220          <circle cx="50" cy="37" r="12"></circle>221        </svg>222      </div>223      <div class="item-content">224        <div class="item-title">Departure Ports</div>225        <div class="item-sub">Hamburg, Germany</div>226      </div>227    </div>228 229    <div class="item alt">230      <div class="icon-wrap">231        <!-- Price Tag -->232        <svg viewBox="0 0 100 100">233          <path d="M20 40l30-20 30 30-30 30-30-20z"></path>234          <circle cx="40" cy="40" r="6"></circle>235        </svg>236      </div>237      <div class="item-content">238        <div class="item-title">Max Price</div>239      </div>240    </div>241 242    <div class="spacer"></div>243  </div>244 245  <!-- CTA Button -->246  <div class="cta">See 29 Cruise Options</div>247 248  <!-- Bottom Navigation -->249  <div class="bottom-nav">250    <div class="nav-item">251      <!-- Star -->252      <svg viewBox="0 0 100 100">253        <path d="M50 12l12 26 28 4-20 19 5 28-25-14-25 14 5-28-20-19 28-4z"></path>254      </svg>255      <span>Top Deals</span>256    </div>257    <div class="nav-item active">258      <!-- Search -->259      <svg viewBox="0 0 100 100">260        <circle cx="44" cy="44" r="26"></circle>261        <path d="M65 65l22 22"></path>262      </svg>263      <span>Cruise Search</span>264    </div>265    <div class="nav-item">266      <!-- Info -->267      <svg viewBox="0 0 100 100">268        <circle cx="50" cy="50" r="36"></circle>269        <path d="M50 42v28M50 32v2"></path>270      </svg>271      <span>Contact Us</span>272    </div>273  </div>274 275  <!-- Gesture bar -->276  <div class="gesture"></div>277</div>278</body>279</html>