GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Cruise Lines UI</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin:0; padding:0; background: transparent; }9  #render-target {10    width:1080px; height:2400px;11    position:relative; overflow:hidden;12    background:#37474f; /* dark slate app background */13    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;14    color:#fff;15  }16  .status-bar {17    position:absolute; top:0; left:0; right:0;18    height:110px; background:#37474f;19    display:flex; align-items:center; justify-content:space-between;20    padding:0 40px; font-size:36px; color:#e0e0e0;21  }22  .status-right { display:flex; align-items:center; gap:24px; }23  .app-bar {24    position:absolute; top:110px; left:0; right:0;25    height:160px; background:#2f3f46;26    display:flex; align-items:center;27    padding:0 32px;28    box-sizing:border-box;29  }30  .app-title {31    font-size:60px; font-weight:600; margin-left:24px;32  }33  .app-actions { margin-left:auto; display:flex; align-items:center; gap:32px; }34  .section-tags {35    position:absolute; top:270px; left:0; right:0;36    background:#3b4a50;37    padding:30px 36px 22px 36px;38    font-weight:600;39  }40  .section-tags div { font-size:36px; margin:8px 0; color:#ffffff; opacity:0.9; }41  .list-sheet {42    position:absolute; top:360px; left:0; right:0;43    background:#ffffff; color:#9e9e9e;44    border-top:4px solid #e0e0e0;45    min-height:1100px;46  }47  .list-item {48    display:flex; align-items:center;49    height:180px; padding:0 36px; box-sizing:border-box;50    border-bottom:3px solid #e0e0e0;51  }52  .radio {53    width:72px; height:72px; border-radius:50%;54    border:8px solid #bdbdbd; margin-right:36px;55  }56  .item-text {57    font-size:56px; font-weight:500; color:#9e9e9e;58  }59  .bottom-nav {60    position:absolute; bottom:90px; left:0; right:0;61    height:200px; background:#2f3f46;62    display:flex; justify-content:space-around; align-items:center;63    color:#cfd8dc;64  }65  .nav-item { width:33.333%; text-align:center; }66  .nav-item .label { margin-top:18px; font-size:36px; }67  .nav-item.magenta .label { color:#d81b60; }68  .home-indicator {69    position:absolute; bottom:24px; left:50%; transform:translateX(-50%);70    width:360px; height:12px; background:#ffffff; border-radius:8px; opacity:0.7;71  }72  /* Helpers for SVG icons */73  svg { display:inline-block; }74</style>75</head>76<body>77<div id="render-target">78  <!-- Status bar -->79  <div class="status-bar">80    <div>10:04</div>81    <div class="status-right">82      <span>Wi‑Fi</span>83      <span>🔋 100%</span>84    </div>85  </div>86 87  <!-- App bar -->88  <div class="app-bar">89    <!-- Back arrow -->90    <svg width="72" height="72" viewBox="0 0 24 24" fill="none">91      <path d="M15 6L9 12L15 18" stroke="#ffffff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/>92    </svg>93    <div class="app-title">Cruise Lines</div>94    <div class="app-actions">95      <!-- Kebab menu -->96      <svg width="60" height="60" viewBox="0 0 24 24" fill="#ffffff">97        <circle cx="12" cy="5" r="2.2"></circle>98        <circle cx="12" cy="12" r="2.2"></circle>99        <circle cx="12" cy="19" r="2.2"></circle>100      </svg>101    </div>102  </div>103 104  <!-- Section tags -->105  <div class="section-tags">106    <div>Popular</div>107    <div>Other</div>108  </div>109 110  <!-- List content -->111  <div class="list-sheet">112    <div class="list-item">113      <div class="radio"></div>114      <div class="item-text">Cunard</div>115    </div>116    <div class="list-item">117      <div class="radio"></div>118      <div class="item-text">MSC Cruises</div>119    </div>120    <div class="list-item">121      <div class="radio"></div>122      <div class="item-text">Oceania Cruises</div>123    </div>124    <div class="list-item">125      <div class="radio"></div>126      <div class="item-text">Regent Seven Seas Cruises</div>127    </div>128    <div class="list-item">129      <div class="radio"></div>130      <div class="item-text">Silversea Cruises</div>131    </div>132  </div>133 134  <!-- Large dark area below list (matches screenshot) -->135  <!-- Implicit by background of render-target -->136 137  <!-- Bottom navigation -->138  <div class="bottom-nav">139    <div class="nav-item">140      <svg width="64" height="64" viewBox="0 0 24 24" fill="none">141        <path d="M12 2l3.1 6.3 6.9 1-5 4.8 1.2 6.9L12 18l-6.2 3 1.2-6.9-5-4.8 6.9-1L12 2z" stroke="#cfd8dc" stroke-width="1.8" fill="none"/>142      </svg>143      <div class="label">Top Deals</div>144    </div>145    <div class="nav-item magenta">146      <svg width="64" height="64" viewBox="0 0 24 24" fill="none">147        <circle cx="10" cy="10" r="6.5" stroke="#d81b60" stroke-width="2.4"></circle>148        <path d="M15.5 15.5L21 21" stroke="#d81b60" stroke-width="2.4" stroke-linecap="round"/>149      </svg>150      <div class="label">Cruise Search</div>151    </div>152    <div class="nav-item">153      <svg width="64" height="64" viewBox="0 0 24 24" fill="none">154        <circle cx="12" cy="12" r="9" stroke="#cfd8dc" stroke-width="2"></circle>155        <path d="M12 8.5v.5" stroke="#cfd8dc" stroke-width="2" stroke-linecap="round"/>156        <path d="M12 11v6" stroke="#cfd8dc" stroke-width="2" stroke-linecap="round"/>157      </svg>158      <div class="label">Contact Us</div>159    </div>160  </div>161 162  <div class="home-indicator"></div>163</div>164</body>165</html>