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; height: 2400px;10    position: relative; overflow: hidden;11    background: #ffffff;12    font-family: Arial, Helvetica, sans-serif;13    color: #455A64;14  }15  /* Top status bar */16  .statusbar {17    position: absolute; top: 0; left: 0; right: 0;18    height: 120px; background: #37474F; color: #ffffff;19    display: flex; align-items: center; justify-content: space-between;20    padding: 0 36px; box-sizing: border-box;21    font-size: 38px;22  }23  .status-left { display: flex; align-items: center; gap: 26px; }24  .status-right { display: flex; align-items: center; gap: 22px; }25  .sb-icon { width: 34px; height: 34px; }26  /* App bar */27  .appbar {28    position: absolute; top: 120px; left: 0; right: 0;29    height: 180px; background: #263238; color: #ffffff;30    display: flex; align-items: center; justify-content: space-between;31    padding: 0 36px; box-sizing: border-box;32  }33  .app-title { font-size: 64px; font-weight: 700; }34  .menu-dots { display: inline-flex; flex-direction: column; gap: 12px; }35  .menu-dots span {36    width: 12px; height: 12px; background: #ffffff; border-radius: 50%;37    display: block;38  }39  /* List */40  .list { position: absolute; top: 300px; left: 0; right: 0; }41  .list-item {42    height: 220px; display: flex; align-items: center;43    padding: 0 40px; box-sizing: border-box; border-bottom: 1px solid #e0e0e0;44    background: #ffffff;45  }46  .list-item:nth-child(even) { background: #ECEFF1; }47  .icon-wrap { width: 140px; display: flex; justify-content: center; }48  .icon { width: 100px; height: 100px; }49  .item-text { flex: 1; }50  .title {51    font-size: 64px; font-weight: 600; color: #6D6D6D;52    line-height: 72px;53  }54  .sub {55    font-size: 42px; color: #E91E63; font-weight: 700; margin-top: 10px;56  }57  /* CTA button */58  .cta {59    position: absolute; bottom: 200px; left: 0; right: 0;60    height: 160px; background: #10e070; color: #ffffff;61    display: flex; align-items: center; justify-content: center;62    font-size: 64px; font-weight: 800; letter-spacing: 1px;63  }64  /* Bottom navigation */65  .bottomnav {66    position: absolute; bottom: 0; left: 0; right: 0;67    height: 200px; background: #37474F; color: #ffffff;68    display: flex;69  }70  .nav-item {71    width: 33.333%; display: flex; flex-direction: column;72    align-items: center; justify-content: center; gap: 18px;73    font-size: 40px;74  }75  .nav-icon { width: 60px; height: 60px; }76  .active { color: #E91E63; }77</style>78</head>79<body>80<div id="render-target">81 82  <!-- Status bar -->83  <div class="statusbar">84    <div class="status-left">85      <div>10:04</div>86      <!-- simple check icon -->87      <svg class="sb-icon" viewBox="0 0 24 24" fill="none">88        <path d="M5 12l4 4 10-10" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>89      </svg>90      <!-- alert triangle -->91      <svg class="sb-icon" viewBox="0 0 24 24" fill="none">92        <path d="M12 3l10 18H2L12 3z" stroke="#fff" stroke-width="2"/>93        <circle cx="12" cy="16" r="1.5" fill="#fff"/>94      </svg>95      <!-- calendar-like icon -->96      <svg class="sb-icon" viewBox="0 0 24 24" fill="none">97        <rect x="3" y="5" width="18" height="16" rx="2" stroke="#fff" stroke-width="2"/>98        <path d="M7 3v4M17 3v4M3 9h18" stroke="#fff" stroke-width="2"/>99      </svg>100      <!-- cloud icon -->101      <svg class="sb-icon" viewBox="0 0 24 24" fill="none">102        <path d="M7 17h10a4 4 0 0 0 0-8 5 5 0 0 0-9.5-1.5A4 4 0 0 0 7 17z" fill="#fff"/>103      </svg>104    </div>105    <div class="status-right">106      <!-- wifi -->107      <svg class="sb-icon" viewBox="0 0 24 24" fill="none">108        <path d="M2 8a14 14 0 0 1 20 0M5 11a10 10 0 0 1 14 0M8 14a6 6 0 0 1 8 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>109        <circle cx="12" cy="18" r="2" fill="#fff"/>110      </svg>111      <!-- battery -->112      <svg class="sb-icon" viewBox="0 0 24 24" fill="none">113        <rect x="2" y="6" width="18" height="12" rx="2" stroke="#fff" stroke-width="2"/>114        <rect x="20" y="10" width="2" height="4" fill="#fff"/>115        <rect x="4" y="8" width="14" height="8" fill="#fff"/>116      </svg>117      <div>100%</div>118    </div>119  </div>120 121  <!-- App bar -->122  <div class="appbar">123    <div class="app-title">Cruise Search</div>124    <div class="menu-dots"><span></span><span></span><span></span></div>125  </div>126 127  <!-- List content -->128  <div class="list">129    <!-- Destinations -->130    <div class="list-item">131      <div class="icon-wrap">132        <svg class="icon" viewBox="0 0 64 64">133          <path d="M32 6c-10 0-18 8-18 18 0 13 18 34 18 34s18-21 18-34c0-10-8-18-18-18zm0 26a8 8 0 1 1 0-16 8 8 0 0 1 0 16z" fill="#455A64"/>134        </svg>135      </div>136      <div class="item-text">137        <div class="title">Destinations</div>138      </div>139    </div>140    <!-- Sail Months -->141    <div class="list-item">142      <div class="icon-wrap">143        <svg class="icon" viewBox="0 0 64 64" fill="none">144          <rect x="8" y="14" width="48" height="40" rx="6" stroke="#455A64" stroke-width="6" fill="none"/>145          <path d="M16 8v12M48 8v12M8 24h48" stroke="#455A64" stroke-width="6"/>146        </svg>147      </div>148      <div class="item-text">149        <div class="title">Sail Months</div>150      </div>151    </div>152    <!-- Cruise Lengths -->153    <div class="list-item">154      <div class="icon-wrap">155        <svg class="icon" viewBox="0 0 64 64" fill="none">156          <circle cx="32" cy="32" r="22" stroke="#455A64" stroke-width="6"/>157          <path d="M32 18v16l12 8" stroke="#455A64" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>158        </svg>159      </div>160      <div class="item-text">161        <div class="title">Cruise Lengths</div>162      </div>163    </div>164    <!-- Cruise Lines -->165    <div class="list-item">166      <div class="icon-wrap">167        <svg class="icon" viewBox="0 0 64 64" fill="none">168          <path d="M12 40l20-22 20 22-20 8-20-8z" fill="#455A64"/>169          <path d="M12 40h40" stroke="#455A64" stroke-width="6" stroke-linecap="round"/>170        </svg>171      </div>172      <div class="item-text">173        <div class="title">Cruise Lines</div>174      </div>175    </div>176    <!-- Departure Ports -->177    <div class="list-item">178      <div class="icon-wrap">179        <svg class="icon" viewBox="0 0 64 64">180          <path d="M32 6c-10 0-18 8-18 18 0 13 18 34 18 34s18-21 18-34c0-10-8-18-18-18zm0 26a8 8 0 1 1 0-16 8 8 0 0 1 0 16z" fill="#455A64"/>181        </svg>182      </div>183      <div class="item-text">184        <div class="title">Departure Ports</div>185        <div class="sub">Hamburg, Germany</div>186      </div>187    </div>188    <!-- Max Price -->189    <div class="list-item">190      <div class="icon-wrap">191        <svg class="icon" viewBox="0 0 64 64" fill="none">192          <path d="M38 10H18a6 6 0 0 0-6 6v20a6 6 0 0 0 1.8 4.3l16.9 16.9a6 6 0 0 0 8.5 0l16.9-16.9a6 6 0 0 0 0-8.5L42.3 11.8A6 6 0 0 0 38 10z" stroke="#455A64" stroke-width="6"/>193          <circle cx="24" cy="20" r="4" fill="#455A64"/>194        </svg>195      </div>196      <div class="item-text">197        <div class="title">Max Price</div>198      </div>199    </div>200  </div>201 202  <!-- CTA -->203  <div class="cta">See 68 Cruise Options</div>204 205  <!-- Bottom navigation -->206  <div class="bottomnav">207    <div class="nav-item">208      <svg class="nav-icon" viewBox="0 0 24 24" fill="none">209        <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" stroke="#fff" stroke-width="2" stroke-linejoin="round"/>210      </svg>211      <div>Top Deals</div>212    </div>213    <div class="nav-item active">214      <svg class="nav-icon" viewBox="0 0 24 24" fill="none">215        <circle cx="11" cy="11" r="7" stroke="#E91E63" stroke-width="2"/>216        <path d="M20 20l-4-4" stroke="#E91E63" stroke-width="2" stroke-linecap="round"/>217      </svg>218      <div>Cruise Search</div>219    </div>220    <div class="nav-item">221      <svg class="nav-icon" viewBox="0 0 24 24" fill="none">222        <circle cx="12" cy="12" r="9" stroke="#fff" stroke-width="2"/>223        <circle cx="12" cy="8" r="1.5" fill="#fff"/>224        <path d="M12 11v6" stroke="#fff" stroke-width="2" stroke-linecap="round"/>225      </svg>226      <div>Contact Us</div>227    </div>228  </div>229 230</div>231</body>232</html>