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>Depart From - UI Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #FFFFFF;14    border-radius: 0;15    box-shadow: 0 0 0 rgba(0,0,0,0);16  }17 18  /* Status bar */19  .status-bar {20    height: 110px;21    background: #EEF1F8;22    color: #2b2b2b;23    font-size: 40px;24    display: flex;25    align-items: center;26    padding: 0 36px;27    box-sizing: border-box;28  }29  .status-left { font-weight: 600; }30  .status-right {31    margin-left: auto;32    display: flex;33    gap: 26px;34    align-items: center;35  }36  .ico {37    width: 44px;38    height: 44px;39  }40 41  /* Header */42  .header {43    background: #F3F5FC;44    padding: 30px 36px 28px 36px;45    box-sizing: border-box;46    border-bottom: 1px solid #E4E7F2;47  }48  .header-top {49    display: flex;50    align-items: center;51    gap: 26px;52    margin-bottom: 18px;53  }54  .back-btn {55    width: 70px;56    height: 70px;57    display: inline-flex;58    align-items: center;59    justify-content: center;60    border-radius: 14px;61    color: #1C2C5A;62  }63  .title {64    font-size: 56px;65    font-weight: 800;66    color: #1B2A57;67  }68  .subtitle {69    margin-left: 96px;70    margin-top: -6px;71    font-size: 36px;72    color: #2E4AC9;73    opacity: 0.9;74  }75 76  /* Search field */77  .search-wrap {78    padding: 30px 36px 16px 36px;79    box-sizing: border-box;80    background: #FFFFFF;81  }82  .input {83    height: 120px;84    border: 1px solid #E0E3EE;85    border-radius: 22px;86    display: flex;87    align-items: center;88    padding: 0 28px;89    gap: 22px;90    box-sizing: border-box;91    background: #FFFFFF;92  }93  .placeholder {94    font-size: 36px;95    color: #9AA3B7;96  }97 98  /* Section label */99  .section-label {100    padding: 22px 36px 12px 36px;101    font-size: 28px;102    letter-spacing: 2px;103    font-weight: 700;104    color: #7B8DBA;105  }106 107  /* List */108  .list {109    height: 1670px;110    overflow: hidden;111    padding-bottom: 0;112  }113  .row {114    display: flex;115    align-items: center;116    gap: 28px;117    padding: 34px 36px;118    border-bottom: 1px solid #EFF1F7;119    box-sizing: border-box;120  }121  .row .pin {122    width: 48px; height: 48px; color: #1E2B6B;123    flex-shrink: 0;124  }125  .row .text {126    font-size: 42px;127    color: #1F2E5C;128  }129 130  /* Bottom tab bar */131  .tabbar {132    position: absolute;133    bottom: 0;134    left: 0;135    right: 0;136    height: 180px;137    border-top: 1px solid #E6E8F1;138    background: #FFFFFF;139    display: flex;140    align-items: center;141    justify-content: space-around;142  }143  .tab {144    display: flex;145    flex-direction: column;146    align-items: center;147    gap: 12px;148    color: #8F97B1;149    font-size: 36px;150  }151  .tab .ico { width: 56px; height: 56px; }152  .tab.active { color: #233DDF; }153  .gesture {154    position: absolute;155    bottom: 10px;156    left: 50%;157    transform: translateX(-50%);158    width: 320px;159    height: 10px;160    background: #000;161    border-radius: 8px;162    opacity: 0.6;163  }164</style>165</head>166<body>167<div id="render-target">168 169  <!-- Status Bar -->170  <div class="status-bar">171    <div class="status-left">3:28</div>172    <div class="status-right">173      <!-- subtle icons -->174      <svg class="ico" viewBox="0 0 24 24"><path fill="#56607A" d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2h-14a2 2 0 0 1-2-2v-9z" opacity="0.2"/></svg>175      <svg class="ico" viewBox="0 0 24 24"><path fill="#56607A" d="M2 18h20a1 1 0 0 0 .8-1.6L13 3.5a1 1 0 0 0-1.6 0L1.2 16.4A1 1 0 0 0 2 18z"/></svg>176      <svg class="ico" viewBox="0 0 24 24"><rect x="2" y="7" width="18" height="10" rx="2" ry="2" fill="#56607A"/><rect x="20" y="10" width="2" height="4" fill="#56607A"/></svg>177    </div>178  </div>179 180  <!-- Header -->181  <div class="header">182    <div class="header-top">183      <div class="back-btn">184        <svg class="ico" viewBox="0 0 24 24">185          <path d="M15.5 4.5L7 12l8.5 7.5" fill="none" stroke="#1B2A57" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>186        </svg>187      </div>188      <div class="title">Depart from</div>189    </div>190    <div class="subtitle">City, station, airport, port...</div>191  </div>192 193  <!-- Search field -->194  <div class="search-wrap">195    <div class="input">196      <svg class="ico" viewBox="0 0 24 24">197        <path d="M12 2c-3.9 0-7 3.1-7 7 0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z" fill="#5F71B2"/>198      </svg>199      <div class="placeholder">From: City, Station or Airport</div>200    </div>201  </div>202 203  <!-- Section Label -->204  <div class="section-label">MOST POPULAR ROUTES</div>205 206  <!-- List -->207  <div class="list">208    <div class="row">209      <svg class="pin" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.2a2.2 2.2 0 1 1 0-4.4 2.2 2.2 0 0 1 0 4.4z" fill="#223487"/></svg>210      <div class="text">Split (Croatia)</div>211    </div>212    <div class="row">213      <svg class="pin" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.2a2.2 2.2 0 1 1 0-4.4 2.2 2.2 0 0 1 0 4.4z" fill="#223487"/></svg>214      <div class="text">Hvar town (Croatia)</div>215    </div>216    <div class="row">217      <svg class="pin" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.2a2.2 2.2 0 1 1 0-4.4 2.2 2.2 0 0 1 0 4.4z" fill="#223487"/></svg>218      <div class="text">Bol (Croatia)</div>219    </div>220    <div class="row">221      <svg class="pin" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.2a2.2 2.2 0 1 1 0-4.4 2.2 2.2 0 0 1 0 4.4z" fill="#223487"/></svg>222      <div class="text">Zadar (Croatia)</div>223    </div>224    <div class="row">225      <svg class="pin" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.2a2.2 2.2 0 1 1 0-4.4 2.2 2.2 0 0 1 0 4.4z" fill="#223487"/></svg>226      <div class="text">Zagreb (Croatia)</div>227    </div>228    <div class="row">229      <svg class="pin" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.2a2.2 2.2 0 1 1 0-4.4 2.2 2.2 0 0 1 0 4.4z" fill="#223487"/></svg>230      <div class="text">Dubrovnik (Croatia)</div>231    </div>232    <div class="row">233      <svg class="pin" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.2a2.2 2.2 0 1 1 0-4.4 2.2 2.2 0 0 1 0 4.4z" fill="#223487"/></svg>234      <div class="text">Plitvice Lakes (Croatia)</div>235    </div>236    <div class="row">237      <svg class="pin" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.2a2.2 2.2 0 1 1 0-4.4 2.2 2.2 0 0 1 0 4.4z" fill="#223487"/></svg>238      <div class="text">Kotor (Montenegro)</div>239    </div>240    <div class="row">241      <svg class="pin" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.2a2.2 2.2 0 1 1 0-4.4 2.2 2.2 0 0 1 0 4.4z" fill="#223487"/></svg>242      <div class="text">Split (airport) (Croatia)</div>243    </div>244    <div class="row">245      <svg class="pin" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.2a2.2 2.2 0 1 1 0-4.4 2.2 2.2 0 0 1 0 4.4z" fill="#223487"/></svg>246      <div class="text">Supetar (Croatia)</div>247    </div>248    <div class="row">249      <svg class="pin" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.2a2.2 2.2 0 1 1 0-4.4 2.2 2.2 0 0 1 0 4.4z" fill="#223487"/></svg>250      <div class="text">Skradin (Krka NP) (Croatia)</div>251    </div>252    <div class="row">253      <svg class="pin" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.2a2.2 2.2 0 1 1 0-4.4 2.2 2.2 0 0 1 0 4.4z" fill="#223487"/></svg>254      <div class="text">Korcula (Croatia)</div>255    </div>256    <div class="row" style="border-bottom:none;">257      <svg class="pin" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.2a2.2 2.2 0 1 1 0-4.4 2.2 2.2 0 0 1 0 4.4z" fill="#223487"/></svg>258      <div class="text">Makarska (Croatia)</div>259    </div>260  </div>261 262  <!-- Bottom Tabs -->263  <div class="tabbar">264    <div class="tab active">265      <svg class="ico" viewBox="0 0 24 24"><circle cx="10" cy="10" r="6" stroke="#233DDF" stroke-width="2.2" fill="none"/><path d="M15.5 15.5L21 21" stroke="#233DDF" stroke-width="2.2" stroke-linecap="round"/></svg>266      <div>Search</div>267    </div>268    <div class="tab">269      <svg class="ico" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2" ry="2" fill="#8F97B1"/><path d="M8 6v3M16 6v3" stroke="#fff" stroke-width="1.5"/></svg>270      <div>Booking</div>271    </div>272    <div class="tab">273      <svg class="ico" viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16" stroke="#8F97B1" stroke-width="2.2" stroke-linecap="round"/></svg>274      <div>Menu</div>275    </div>276    <div class="gesture"></div>277  </div>278 279</div>280</body>281</html>