GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>GetByFerry - UI Mock</title>6<style>7  body{margin:0;padding:0;background:transparent;font-family: Arial, Helvetica, sans-serif;color:#2d2d2d;}8  #render-target{9    width:1080px;height:2400px;position:relative;overflow:hidden;10    background:#EEF2F9;11  }12 13  /* Status bar */14  .status-bar{15    height:90px; display:flex; align-items:center; justify-content:space-between;16    padding:0 36px; color:#222; font-weight:600; font-size:42px;17  }18  .sb-left, .sb-right{display:flex; align-items:center;}19  .sb-left span.time{margin-right:18px;}20  .dot-icon{width:28px;height:28px;border-radius:50%;background:#474747;margin-left:16px;}21  .sb-right .wifi{width:42px;height:28px;border:2px solid #424242;border-radius:6px;margin-right:18px;}22  .sb-right .battery{width:34px;height:28px;border:2px solid #424242;border-radius:4px;position:relative;}23  .sb-right .battery:after{content:"";position:absolute;right:-8px;top:8px;width:6px;height:12px;background:#424242;border-radius:2px;}24  .sb-right .battery:before{content:"";position:absolute;left:4px;top:6px;width:22px;height:16px;background:#7AC943;border-radius:2px;}25 26  /* Logo */27  .logo-wrap{padding:30px 0 20px 0;text-align:center;}28  .logo-box{29    margin:0 auto; width:520px;height:110px; display:flex; align-items:center; justify-content:center;30    background:#E0E8FF; border:1px solid #CBD5EA; border-radius:10px; color:#4A72D9; font-size:56px; font-weight:800;31  }32  .logo-box span{color:#6CC04A;margin-right:8px;}33  .logo-box em{color:#F6A23A;font-style:normal;margin:0 8px;}34 35  /* Transport icons row */36  .transport-row{display:flex; justify-content:center; gap:28px; margin:10px 0 24px 0;}37  .ti{38    width:110px;height:72px;background:#E0E0E0;border:1px solid #BDBDBD;border-radius:8px;39    display:flex;align-items:center;justify-content:center;color:#757575;font-size:22px;40  }41 42  /* Form cards */43  .content{padding:0 50px;}44  .card{45    width:980px;background:#fff;border-radius:26px;box-shadow:0 2px 0 rgba(0,0,0,0.05);46    margin:22px auto; padding:34px 38px;47  }48  .card .label{49    font-size:32px; color:#7E7BA5; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; margin-bottom:22px;50  }51  .row{display:flex; align-items:center; justify-content:flex-start;}52  .row .icon{width:48px;height:48px;margin-right:22px;}53  .main-text{font-size:44px;color:#24243C;}54  .swap{55    position:absolute; right:88px; top:0; transform:translateY(50%); width:64px;height:64px;background:#86D559;border-radius:12px;56    display:flex;align-items:center;justify-content:center;57    box-shadow:0 2px 0 rgba(0,0,0,0.06);58  }59 60  /* Two-column date card */61  .split{display:grid; grid-template-columns:1fr 1fr; gap:0;}62  .split .col{padding:0 0 0 8px;}63  .split .col:first-child{padding-right:38px;border-right:1px solid #E5E6EF;}64  .subtext{font-size:44px;color:#404064;}65  .optional{color:#7E7BA5;font-size:38px;margin-left:10px;}66 67  /* Search button */68  .search-btn{69    width:980px;height:140px;background:#8ED34A;border:none;border-radius:18px;color:#fff;70    font-size:60px;font-weight:800;display:block;margin:40px auto; cursor:pointer;71    box-shadow:0 6px 0 rgba(0,0,0,0.06);72  }73 74  /* Bottom nav */75  .bottom-nav{76    position:absolute; left:0; right:0; bottom:0; height:210px; background:#fff; border-top:1px solid #E3E6EE;77    display:flex; justify-content:space-around; align-items:center;78  }79  .nav-item{display:flex; flex-direction:column; align-items:center; color:#7E7BA5;}80  .nav-item.active{color:#2D2E54;}81  .nav-item .ni-icon{width:60px;height:60px;margin-bottom:16px;}82  .nav-item .label{font-size:40px;}83 84  /* Simple icons */85  svg{display:block}86  .purple{stroke:#6F61C9; fill:none; stroke-width:6}87  .purple-fill{fill:#6F61C9}88  .calendar rect{stroke:#6F61C9; fill:none; stroke-width:6}89</style>90</head>91<body>92<div id="render-target">93 94  <!-- Status Bar -->95  <div class="status-bar">96    <div class="sb-left">97      <span class="time">3:28</span>98      <div class="dot-icon"></div>99      <div class="dot-icon"></div>100      <div class="dot-icon"></div>101      <div class="dot-icon"></div>102    </div>103    <div class="sb-right">104      <div class="wifi"></div>105      <div class="battery"></div>106    </div>107  </div>108 109  <!-- Logo -->110  <div class="logo-wrap">111    <div class="logo-box"><span>get</span><em>by</em>ferry</div>112  </div>113 114  <!-- Transport icons row (image placeholders) -->115  <div class="transport-row">116    <div class="ti">[Icon: Signpost]</div>117    <div class="ti">[Icon: Walk]</div>118    <div class="ti">[Icon: Group]</div>119    <div class="ti">[Icon: Bus]</div>120    <div class="ti">[Icon: Drink]</div>121    <div class="ti">[Icon: Ferry]</div>122    <div class="ti">[Icon: Car]</div>123    <div class="ti">[Icon: Plane]</div>124  </div>125 126  <!-- Cards -->127  <div class="content">128 129    <!-- Depart From -->130    <div class="card" style="position:relative;">131      <div class="label">Depart from</div>132      <div class="row">133        <svg class="icon" viewBox="0 0 64 64">134          <path class="purple" d="M32 8c9 0 16 7 16 16 0 12-16 30-16 30S16 36 16 24c0-9 7-16 16-16z"/>135          <circle class="purple" cx="32" cy="24" r="6"/>136        </svg>137        <div class="main-text">From: City, Station or Airport</div>138      </div>139    </div>140 141    <!-- Travel To -->142    <div class="card" style="position:relative;">143      <div class="label">Travel to</div>144      <div class="row">145        <svg class="icon" viewBox="0 0 64 64">146          <path class="purple" d="M32 8c9 0 16 7 16 16 0 12-16 30-16 30S16 36 16 24c0-9 7-16 16-16z"/>147          <circle class="purple" cx="32" cy="24" r="6"/>148        </svg>149        <div class="main-text">To: City, Station or Airport</div>150      </div>151      <div class="swap">152        <svg viewBox="0 0 64 64" width="38" height="38">153          <path d="M20 16h24l-8-8M44 48H20l8 8" stroke="#fff" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>154        </svg>155      </div>156    </div>157 158    <!-- Departing / Returning -->159    <div class="card">160      <div style="display:flex;">161        <div class="label" style="flex:1">Departing on</div>162        <div class="label" style="flex:1; margin-left:22px;">Returning on</div>163      </div>164 165      <div class="split">166        <div class="col">167          <div class="row">168            <svg class="icon calendar" viewBox="0 0 64 64">169              <rect x="8" y="14" width="48" height="42" rx="6"></rect>170              <line x1="8" y1="24" x2="56" y2="24" stroke="#6F61C9" stroke-width="6"></line>171              <line x1="18" y1="8" x2="18" y2="20" stroke="#6F61C9" stroke-width="6"></line>172              <line x1="46" y1="8" x2="46" y2="20" stroke="#6F61C9" stroke-width="6"></line>173            </svg>174            <div class="subtext">Select date</div>175          </div>176        </div>177        <div class="col" style="padding-left:38px;">178          <div class="row">179            <svg class="icon calendar" viewBox="0 0 64 64">180              <rect x="8" y="14" width="48" height="42" rx="6"></rect>181              <line x1="8" y1="24" x2="56" y2="24" stroke="#6F61C9" stroke-width="6"></line>182              <line x1="18" y1="8" x2="18" y2="20" stroke="#6F61C9" stroke-width="6"></line>183              <line x1="46" y1="8" x2="46" y2="20" stroke="#6F61C9" stroke-width="6"></line>184            </svg>185            <div class="subtext">Optional</div>186          </div>187        </div>188      </div>189    </div>190 191    <!-- Passengers -->192    <div class="card">193      <div class="label">Passengers</div>194      <div class="row">195        <svg class="icon" viewBox="0 0 64 64">196          <circle class="purple" cx="24" cy="20" r="10"/>197          <path class="purple" d="M12 48c0-10 10-14 12-14s12 4 12 14"/>198          <circle class="purple" cx="46" cy="26" r="6"/>199          <path class="purple" d="M38 48c0-8 8-9 8-9"/>200        </svg>201        <div class="main-text">1 passenger</div>202      </div>203    </div>204 205    <!-- Search button -->206    <button class="search-btn">Search</button>207  </div>208 209  <!-- Bottom Navigation -->210  <div class="bottom-nav">211    <div class="nav-item active">212      <svg class="ni-icon" viewBox="0 0 64 64">213        <circle cx="28" cy="28" r="18" stroke="#2D2E54" stroke-width="6" fill="none"/>214        <line x1="44" y1="44" x2="60" y2="60" stroke="#2D2E54" stroke-width="8" stroke-linecap="round"/>215      </svg>216      <div class="label">Search</div>217    </div>218    <div class="nav-item">219      <svg class="ni-icon" viewBox="0 0 64 64">220        <rect x="10" y="18" width="44" height="28" rx="6" stroke="#7E7BA5" stroke-width="6" fill="none"/>221        <circle cx="22" cy="32" r="6" fill="#7E7BA5"/>222        <path d="M10 28 l-8 6 l8 6" stroke="#7E7BA5" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>223      </svg>224      <div class="label">Booking</div>225    </div>226    <div class="nav-item">227      <svg class="ni-icon" viewBox="0 0 64 64">228        <line x1="10" y1="18" x2="54" y2="18" stroke="#7E7BA5" stroke-width="8" stroke-linecap="round"/>229        <line x1="10" y1="32" x2="54" y2="32" stroke="#7E7BA5" stroke-width="8" stroke-linecap="round"/>230        <line x1="10" y1="46" x2="44" y2="46" stroke="#7E7BA5" stroke-width="8" stroke-linecap="round"/>231      </svg>232      <div class="label">Menu</div>233    </div>234  </div>235 236</div>237</body>238</html>