GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Departure Ports UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px; height: 2400px; position: relative; overflow: hidden;10    background: #FFFFFF;11  }12  .status-bar {13    position: absolute; top: 0; left: 0; width: 100%; height: 110px;14    background: #37474F; color: #ECEFF1; font-size: 40px;15    display: flex; align-items: center; justify-content: space-between;16    padding: 0 30px;17  }18  .status-left { display: flex; align-items: center; gap: 20px; }19  .status-right { display: flex; align-items: center; gap: 20px; }20  .status-icon {21    width: 34px; height: 34px; border-radius: 50%; border: 2px solid #CFD8DC; opacity: 0.9;22  }23  .battery {24    display: flex; align-items: center; gap: 10px; color: #CFD8DC; font-size: 34px;25  }26  .battery svg { width: 46px; height: 26px; }27  .app-bar {28    position: absolute; top: 110px; left: 0; width: 100%; height: 160px;29    background: #37474F; color: #FFFFFF; display: flex; align-items: center; justify-content: space-between;30    padding: 0 30px; box-sizing: border-box;31  }32  .app-left { display: flex; align-items: center; gap: 26px; }33  .app-title { font-size: 56px; font-weight: 600; letter-spacing: 0.3px; }34  .app-actions { display: flex; align-items: center; gap: 20px; }35  .divider-top {36    position: absolute; top: 270px; left: 0; width: 100%; height: 6px; background: #B0BEC5;37  }38  .section {39    position: absolute; top: 276px; left: 0; width: 100%; height: 100px;40    background: #F3F5F7; color: #37474F; display: flex; align-items: center;41    padding: 0 32px; box-sizing: border-box; font-size: 38px; font-weight: 600;42    border-bottom: 1px solid #E0E0E0;43  }44  .list {45    position: absolute; top: 376px; left: 0; right: 0; bottom: 190px;46    overflow: hidden; /* visual only; no actual scrolling in this static render */47    background: #FFFFFF;48  }49  .list-item {50    display: flex; align-items: center; gap: 34px;51    padding: 38px 32px; box-sizing: border-box;52    border-bottom: 2px solid #E0E0E0;53  }54  .radio {55    width: 84px; height: 84px; border-radius: 50%;56    border: 6px solid #BDBDBD; box-sizing: border-box;57  }58  .item-text {59    font-size: 48px; color: #616161;60  }61  .bottom-nav {62    position: absolute; bottom: 0; left: 0; width: 100%; height: 190px;63    background: #37474F; color: #ECEFF1; display: flex; align-items: center; justify-content: space-around;64    box-shadow: 0 -4px 12px rgba(0,0,0,0.15);65  }66  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; }67  .nav-label { font-size: 34px; }68  .nav-icon svg { width: 60px; height: 60px; }69  .pink { color: #E91E63; fill: #E91E63; }70  .white { color: #FFFFFF; fill: #FFFFFF; }71</style>72</head>73<body>74<div id="render-target">75  <!-- Status Bar -->76  <div class="status-bar">77    <div class="status-left">78      <div>10:03</div>79      <div class="status-icon"></div>80      <div class="status-icon"></div>81      <div class="status-icon"></div>82    </div>83    <div class="status-right">84      <div class="status-icon"></div>85      <div class="battery">86        <svg viewBox="0 0 60 30">87          <rect x="2" y="6" width="50" height="18" rx="3" stroke="#CFD8DC" fill="none" stroke-width="3"/>88          <rect x="54" y="11" width="5" height="8" rx="1" fill="#CFD8DC"/>89          <rect x="5" y="9" width="40" height="12" rx="2" fill="#CFD8DC"/>90        </svg>91        <span>100%</span>92      </div>93    </div>94  </div>95 96  <!-- App Bar -->97  <div class="app-bar">98    <div class="app-left">99      <svg width="64" height="64" viewBox="0 0 48 48">100        <path d="M30 10 L14 24 L30 38" fill="none" stroke="#FFFFFF" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>101      </svg>102      <div class="app-title">Departure Ports</div>103    </div>104    <div class="app-actions">105      <svg width="52" height="52" viewBox="0 0 24 24">106        <circle cx="12" cy="5" r="2" fill="#FFFFFF"/>107        <circle cx="12" cy="12" r="2" fill="#FFFFFF"/>108        <circle cx="12" cy="19" r="2" fill="#FFFFFF"/>109      </svg>110    </div>111  </div>112 113  <div class="divider-top"></div>114 115  <!-- Section Header -->116  <div class="section">Europe</div>117 118  <!-- List Items -->119  <div class="list">120    <div class="list-item">121      <div class="radio"></div>122      <div class="item-text">Amsterdam, Netherlands</div>123    </div>124    <div class="list-item">125      <div class="radio"></div>126      <div class="item-text">Avignon, France</div>127    </div>128    <div class="list-item">129      <div class="radio"></div>130      <div class="item-text">Barcelona, Spain</div>131    </div>132    <div class="list-item">133      <div class="radio"></div>134      <div class="item-text">Basel, Switzerland</div>135    </div>136    <div class="list-item">137      <div class="radio"></div>138      <div class="item-text">Budapest, Hungary</div>139    </div>140    <div class="list-item">141      <div class="radio"></div>142      <div class="item-text">Chalon-Sur-Saone, France</div>143    </div>144    <div class="list-item">145      <div class="radio"></div>146      <div class="item-text">Civitavecchia (Rome), Italy</div>147    </div>148    <div class="list-item">149      <div class="radio"></div>150      <div class="item-text">Copenhagen, Denmark</div>151    </div>152    <div class="list-item">153      <div class="radio"></div>154      <div class="item-text">Dover (London), England</div>155    </div>156    <div class="list-item">157      <div class="radio"></div>158      <div class="item-text">Genoa, Italy</div>159    </div>160    <div class="list-item">161      <div class="radio"></div>162      <div class="item-text">Hamburg, Germany</div>163    </div>164  </div>165 166  <!-- Bottom Navigation -->167  <div class="bottom-nav">168    <div class="nav-item">169      <div class="nav-icon white">170        <svg viewBox="0 0 24 24">171          <polygon points="12,2 15,9 22,9 16.5,13.5 18.5,21 12,17 5.5,21 7.5,13.5 2,9 9,9" fill="currentColor"/>172        </svg>173      </div>174      <div class="nav-label">Top Deals</div>175    </div>176    <div class="nav-item">177      <div class="nav-icon pink">178        <svg viewBox="0 0 24 24">179          <circle cx="10" cy="10" r="7" fill="none" stroke="currentColor" stroke-width="2"/>180          <line x1="16" y1="16" x2="22" y2="22" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>181        </svg>182      </div>183      <div class="nav-label" style="color:#E91E63;">Cruise Search</div>184    </div>185    <div class="nav-item">186      <div class="nav-icon white">187        <svg viewBox="0 0 24 24">188          <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/>189          <rect x="11" y="7" width="2" height="2" fill="currentColor"/>190          <rect x="11" y="10" width="2" height="7" fill="currentColor"/>191        </svg>192      </div>193      <div class="nav-label">Contact Us</div>194    </div>195  </div>196</div>197</body>198</html>