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>Vessels Search</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;13    color: #111;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #FFFFFF;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    right: 0;29    height: 96px;30    padding: 0 36px;31    display: flex;32    align-items: center;33    justify-content: space-between;34    color: #111;35    font-size: 34px;36  }37  .status-right {38    display: flex;39    align-items: center;40    gap: 18px;41    color: #555;42    font-size: 30px;43  }44  .status-icon {45    width: 40px;46    height: 40px;47  }48 49  /* Search header row */50  .search-row {51    position: absolute;52    top: 110px;53    left: 36px;54    right: 36px;55    height: 100px;56    display: flex;57    align-items: center;58    justify-content: space-between;59  }60  .left-search {61    display: flex;62    align-items: center;63    gap: 22px;64  }65  .back-btn svg {66    width: 44px;67    height: 44px;68    stroke: #1a1a1a;69  }70  .search-placeholder {71    font-size: 38px;72    color: #9E9E9E;73  }74  .filter-btn svg {75    width: 44px;76    height: 44px;77    stroke: #111;78  }79 80  /* Tabs */81  .tabs {82    position: absolute;83    top: 220px;84    left: 36px;85    right: 36px;86    height: 92px;87    display: flex;88    align-items: center;89    gap: 36px;90  }91  .tab-pill {92    display: flex;93    align-items: center;94    gap: 18px;95    padding: 16px 26px;96    background: #D9ECFB;97    border-radius: 20px;98    color: #0B2E40;99    font-weight: 600;100    font-size: 34px;101  }102  .tab-pill svg {103    width: 46px;104    height: 46px;105    fill: #0B2E40;106  }107  .tab {108    display: flex;109    align-items: center;110    gap: 18px;111    font-size: 34px;112    color: #1a1a1a;113  }114  .tab svg {115    width: 44px;116    height: 44px;117    fill: #1a1a1a;118  }119 120  /* List */121  .list {122    position: absolute;123    top: 340px;124    left: 36px;125    right: 36px;126  }127  .item {128    display: flex;129    align-items: center;130    gap: 26px;131    padding: 28px 8px;132  }133  .thumb {134    width: 128px;135    height: 128px;136    background: #E0E0E0;137    border: 1px solid #BDBDBD;138    border-radius: 26px;139    display: flex;140    align-items: center;141    justify-content: center;142    color: #757575;143    font-size: 26px;144    text-align: center;145  }146  .details {147    display: flex;148    flex-direction: column;149    gap: 8px;150  }151  .title {152    font-size: 46px;153    font-weight: 800;154    letter-spacing: 0.5px;155    color: #111;156  }157  .subtitle {158    font-size: 32px;159    color: #9E9E9E;160  }161 162  /* Keyboard mock */163  .keyboard {164    position: absolute;165    left: 0;166    right: 0;167    bottom: 0;168    height: 950px;169    background: #13181C;170    border-top-left-radius: 18px;171    border-top-right-radius: 18px;172    padding: 24px 30px 40px 30px;173    box-sizing: border-box;174    color: #D7DFE7;175  }176  .kb-top {177    display: flex;178    align-items: center;179    justify-content: space-between;180    padding: 12px 6px 20px;181    color: #D7DFE7;182  }183  .kb-top .icon-pill {184    display: flex;185    align-items: center;186    justify-content: center;187    width: 78px;188    height: 78px;189    background: #1E252A;190    border-radius: 50%;191  }192  .kb-top .label {193    font-size: 28px;194    margin-left: 12px;195    margin-right: 24px;196    color: #D7DFE7;197    opacity: 0.85;198  }199 200  .kb-row {201    display: flex;202    justify-content: center;203    gap: 16px;204    padding: 14px 0;205  }206  .key {207    width: 86px;208    height: 96px;209    background: #20262B;210    border-radius: 14px;211    display: flex;212    align-items: center;213    justify-content: center;214    color: #D7DFE7;215    font-size: 36px;216    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);217  }218  .key.wide { width: 120px; }219  .key.lg { width: 140px; }220  .key.circle {221    width: 120px;222    height: 120px;223    border-radius: 60px;224    background: #A7E8C5;225    color: #1a1a1a;226    font-weight: 700;227  }228  .space {229    width: 520px;230    height: 100px;231    background: #20262B;232    border-radius: 16px;233  }234  .home-indicator {235    position: absolute;236    bottom: 12px;237    left: 50%;238    transform: translateX(-50%);239    width: 180px;240    height: 8px;241    background: #EAEAEA;242    border-radius: 8px;243    opacity: 0.8;244  }245</style>246</head>247<body>248<div id="render-target">249 250  <!-- Status bar -->251  <div class="status-bar">252    <div class="status-left">11:58</div>253    <div class="status-right">254      <!-- WiFi icon -->255      <svg class="status-icon" viewBox="0 0 24 24">256        <path d="M3 8c4-3 14-3 18 0" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>257        <path d="M6 12c3-2 9-2 12 0" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>258        <path d="M10 16c2-1 4-1 6 0" stroke="#777" stroke-width="2" fill="none" stroke-linecap="round"/>259        <circle cx="12" cy="19" r="1.6" fill="#777"/>260      </svg>261      <!-- Battery icon -->262      <svg class="status-icon" viewBox="0 0 24 24">263        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#777" stroke-width="2" fill="none"/>264        <rect x="4" y="8" width="12" height="8" fill="#777"/>265        <rect x="20" y="10" width="2.5" height="4" fill="#777"/>266      </svg>267      <span>100%</span>268    </div>269  </div>270 271  <!-- Search header -->272  <div class="search-row">273    <div class="left-search">274      <div class="back-btn">275        <svg viewBox="0 0 24 24">276          <path d="M20 4 L8 12 L20 20" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>277        </svg>278      </div>279      <div class="search-placeholder">Search...</div>280    </div>281    <div class="filter-btn">282      <svg viewBox="0 0 24 24">283        <path d="M6 4V20" stroke="#111" stroke-width="2" stroke-linecap="round"/>284        <circle cx="6" cy="8" r="2.2" fill="#111"/>285        <path d="M12 4V20" stroke="#111" stroke-width="2" stroke-linecap="round"/>286        <circle cx="12" cy="14" r="2.2" fill="#111"/>287        <path d="M18 4V20" stroke="#111" stroke-width="2" stroke-linecap="round"/>288        <circle cx="18" cy="6" r="2.2" fill="#111"/>289      </svg>290    </div>291  </div>292 293  <!-- Tabs -->294  <div class="tabs">295    <div class="tab-pill">296      <svg viewBox="0 0 24 24">297        <path d="M4 16H20L18 20H6Z" />298        <rect x="9" y="10" width="6" height="4" rx="1" />299        <path d="M5 21c2 0 3-1 7-1s5 1 7 1" stroke="#0B2E40" stroke-width="1.5" fill="none" opacity="0.6"/>300      </svg>301      <span>Vessels</span>302    </div>303    <div class="tab">304      <svg viewBox="0 0 24 24">305        <circle cx="12" cy="6" r="3"/>306        <path d="M12 9V16" stroke="#1a1a1a" stroke-width="2" stroke-linecap="round"/>307        <path d="M7 16c1.5 2 3.5 3 5 3s3.5-1 5-3" stroke="#1a1a1a" stroke-width="2" fill="none" stroke-linecap="round"/>308      </svg>309      <span>Ports</span>310    </div>311  </div>312 313  <!-- List of vessels -->314  <div class="list">315    <div class="item">316      <div class="thumb">[IMG: Cruise Ship]</div>317      <div class="details">318        <div class="title">AMERICAN SPIRIT</div>319        <div class="subtitle">Other / Cruise</div>320      </div>321    </div>322 323    <div class="item">324      <div class="thumb">[IMG: Yellow Chemical Tanker]</div>325      <div class="details">326        <div class="title">STOLT QUETZAL</div>327        <div class="subtitle">Chemical / Intermediate</div>328      </div>329    </div>330  </div>331 332  <!-- Keyboard mock -->333  <div class="keyboard">334    <div class="kb-top">335      <div style="display:flex; align-items:center; gap:18px;">336        <div class="icon-pill"></div>337        <span class="label">GIF</span>338        <div class="icon-pill"></div>339        <span class="label">G⚙︎</span>340        <div class="icon-pill"></div>341        <span class="label">Translate</span>342        <div class="icon-pill"></div>343        <span class="label">Palette</span>344      </div>345      <div class="icon-pill">346        <svg viewBox="0 0 24 24" width="34" height="34">347          <circle cx="12" cy="12" r="8" fill="#D7DFE7"/>348        </svg>349      </div>350    </div>351 352    <div class="kb-row">353      <div class="key">Q</div><div class="key">W</div><div class="key">E</div><div class="key">R</div><div class="key">T</div><div class="key">Y</div><div class="key">U</div><div class="key">I</div><div class="key">O</div><div class="key">P</div>354    </div>355    <div class="kb-row">356      <div class="key">A</div><div class="key">S</div><div class="key">D</div><div class="key">F</div><div class="key">G</div><div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div>357    </div>358    <div class="kb-row">359      <div class="key lg">⇧</div>360      <div class="key">Z</div><div class="key">X</div><div class="key">C</div><div class="key">V</div><div class="key">B</div><div class="key">N</div><div class="key">M</div>361      <div class="key lg">⌫</div>362    </div>363    <div class="kb-row">364      <div class="key circle">?123</div>365      <div class="key wide">,</div>366      <div class="space"></div>367      <div class="key wide">.</div>368      <div class="key circle">✓</div>369    </div>370 371    <div class="home-indicator"></div>372  </div>373 374</div>375</body>376</html>