GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Travel To UI</title>5<style>6  body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width:1080px; height:2400px; position:relative; overflow:hidden;9    background:#F7F8FB; border-radius:0;10  }11 12  /* Status bar */13  .status-bar {14    height:120px; background:#EDEFF6; display:flex; align-items:center; justify-content:space-between;15    padding:0 40px; color:#3c3c3c; font-size:36px;16  }17  .status-icons { display:flex; gap:28px; align-items:center; }18  .dot { width:10px; height:10px; border-radius:50%; background:#3c3c3c; display:inline-block; }19  .wifi, .battery { width:42px; height:28px; border:2px solid #3c3c3c; border-radius:6px; position:relative; }20  .wifi:before { content:""; position:absolute; left:6px; top:8px; width:20px; height:8px; border-top:2px solid #3c3c3c; border-left:2px solid transparent; border-right:2px solid transparent; }21  .battery:after { content:""; position:absolute; right:-10px; top:8px; width:8px; height:12px; background:#3c3c3c; border-radius:2px; }22 23  /* Header */24  .app-header {25    background:#EEF1F6;26    padding:30px 40px 26px 40px;27    border-bottom:1px solid #dfe3eb;28  }29  .header-row { display:flex; align-items:center; gap:28px; }30  .back-btn {31    width:72px; height:72px; border-radius:36px; display:flex; align-items:center; justify-content:center;32  }33  .title-wrap { display:flex; flex-direction:column; }34  .title { font-size:54px; font-weight:700; color:#1b2a4a; }35  .subtitle { font-size:36px; color:#3f4f73; margin-top:8px; }36 37  .search-input {38    margin:30px 0 12px 0; background:#fff; border:2px solid #e7e7ea; border-radius:18px;39    padding:26px 28px; display:flex; align-items:center; gap:24px;40  }41  .pin-green {42    width:42px; height:42px; border-radius:21px; background:#27ae60; position:relative;43  }44  .pin-green:after {45    content:""; position:absolute; left:14px; top:8px; width:14px; height:14px; border-radius:50%; background:#fff;46  }47  .input-text { font-size:40px; color:#7a7a86; }48  .section-title {49    font-size:30px; color:#8390a8; letter-spacing:1px; text-transform:uppercase; padding:24px 40px;50  }51  .section-title .accent { color:#F4A938; font-weight:700; }52 53  /* List items */54  .list { background:#fff; }55  .list-item {56    display:flex; align-items:center; gap:28px; padding:40px; font-size:44px; color:#25304f;57    border-top:1px solid #ececf1;58  }59  .pin-blue {60    width:42px; height:42px; border:2px solid #223a8e; border-radius:50%;61    position:relative;62  }63  .pin-blue:after {64    content:""; position:absolute; left:13px; top:13px; width:8px; height:8px; border-radius:50%; background:#223a8e;65  }66  .country { color:#7d8196; margin-left:8px; font-size:42px; }67 68  /* Bottom tabs */69  .tabs {70    position:absolute; left:0; right:0; bottom:900px; height:160px; background:#fff;71    border-top:1px solid #e6e6ea; display:flex; justify-content:space-around; align-items:center;72  }73  .tab { display:flex; flex-direction:column; align-items:center; gap:14px; color:#7b7f90; font-size:34px; }74  .tab.active { color:#3a3aaf; }75  .tab svg { width:56px; height:56px; }76  .active-dot { width:12px; height:12px; border-radius:6px; background:#3a3aaf; margin-top:-8px; }77 78  /* Keyboard */79  .keyboard {80    position:absolute; left:0; right:0; bottom:0; height:900px; background:#1f1b18; color:#eee;81    border-top-left-radius:24px; border-top-right-radius:24px;82  }83  .kb-toolbar { display:flex; align-items:center; gap:28px; padding:24px 32px; }84  .tool {85    width:84px; height:84px; background:#2b2623; border-radius:18px; display:flex; align-items:center; justify-content:center;86    font-size:32px; color:#cfcfcf;87  }88 89  .keys { padding:10px 24px 24px; }90  .row { display:flex; justify-content:space-between; margin:22px 10px; }91  .key {92    width:86px; height:120px; background:#2b2623; border-radius:22px; display:flex; align-items:center; justify-content:center;93    font-size:44px; color:#f1f1f1;94  }95  .key.wide { width:180px; }96  .space { flex:1; height:120px; margin:0 14px; background:#2b2623; border-radius:24px; display:flex; align-items:center; justify-content:center; font-size:38px; color:#cfcfcf; }97  .enter-btn {98    width:160px; height:120px; background:#F4D0B9; color:#3b2a25; border-radius:28px; display:flex; align-items:center; justify-content:center; font-size:42px;99  }100  .done-circle {101    position:absolute; right:40px; bottom:40px; width:150px; height:150px; background:#F6D2BE; border-radius:75px;102    display:flex; align-items:center; justify-content:center;103  }104  .check { width:84px; height:84px; border:10px solid #3b2a25; border-left:0; border-top:0; transform:rotate(45deg); }105</style>106</head>107<body>108<div id="render-target">109 110  <!-- Status Bar -->111  <div class="status-bar">112    <div>3:30</div>113    <div class="status-icons">114      <span class="dot"></span>115      <span class="dot"></span>116      <span class="dot"></span>117      <div class="wifi"></div>118      <div class="battery"></div>119    </div>120  </div>121 122  <!-- Header and Input -->123  <div class="app-header">124    <div class="header-row">125      <div class="back-btn">126        <!-- Back Arrow -->127        <svg width="48" height="48" viewBox="0 0 24 24">128          <path d="M14 5 L7 12 L14 19" stroke="#2e3a67" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>129          <path d="M7 12 H21" stroke="#2e3a67" stroke-width="2.5" fill="none" stroke-linecap="round"/>130        </svg>131      </div>132      <div class="title-wrap">133        <div class="title">Travel to</div>134        <div class="subtitle">City, station, airport, port...</div>135      </div>136    </div>137 138    <div class="search-input">139      <div class="pin-green"></div>140      <div class="input-text">To: City, Station or Airport</div>141    </div>142  </div>143 144  <div class="section-title">MOST POPULAR DEPARTURES FROM <span class="accent">ROME</span></div>145 146  <!-- List of locations -->147  <div class="list">148    <div class="list-item">149      <div class="pin-blue"></div>150      <div>Rome Ciampino (Airport) <span class="country">(Italy)</span></div>151    </div>152    <div class="list-item">153      <div class="pin-blue"></div>154      <div>Rome Fiumicino (Airport) <span class="country">(Italy)</span></div>155    </div>156    <div class="list-item">157      <div class="pin-blue"></div>158      <div>Milan <span class="country">(Italy)</span></div>159    </div>160    <div class="list-item">161      <div class="pin-blue"></div>162      <div>Pompei <span class="country">(Italy)</span></div>163    </div>164    <div class="list-item">165      <div class="pin-blue"></div>166      <div>Siena <span class="country">(Italy)</span></div>167    </div>168    <div class="list-item">169      <div class="pin-blue"></div>170      <div>Florence <span class="country">(Italy)</span></div>171    </div>172  </div>173 174  <!-- Bottom Tabs -->175  <div class="tabs">176    <div class="tab active">177      <!-- Search icon -->178      <svg viewBox="0 0 24 24">179        <circle cx="10" cy="10" r="6.5" stroke="#3a3aaf" stroke-width="2" fill="none"/>180        <line x1="15.5" y1="15.5" x2="21" y2="21" stroke="#3a3aaf" stroke-width="2" />181      </svg>182      <div>Search</div>183      <div class="active-dot"></div>184    </div>185    <div class="tab">186      <!-- Ticket icon -->187      <svg viewBox="0 0 24 24">188        <rect x="3" y="6" width="18" height="12" rx="3" ry="3" stroke="#7b7f90" stroke-width="2" fill="none"/>189        <circle cx="8" cy="12" r="1.6" fill="#7b7f90"/>190        <circle cx="16" cy="12" r="1.6" fill="#7b7f90"/>191      </svg>192      <div>Booking</div>193    </div>194    <div class="tab">195      <!-- Menu icon -->196      <svg viewBox="0 0 24 24">197        <line x1="4" y1="6" x2="20" y2="6" stroke="#7b7f90" stroke-width="2"/>198        <line x1="4" y1="12" x2="20" y2="12" stroke="#7b7f90" stroke-width="2"/>199        <line x1="4" y1="18" x2="20" y2="18" stroke="#7b7f90" stroke-width="2"/>200      </svg>201      <div>Menu</div>202    </div>203  </div>204 205  <!-- Keyboard -->206  <div class="keyboard">207    <div class="kb-toolbar">208      <div class="tool">⌗</div>209      <div class="tool">🙂</div>210      <div class="tool">GIF</div>211      <div class="tool">G⌁</div>212      <div class="tool">⚙</div>213      <div class="tool">🎨</div>214      <div class="tool">🎤</div>215    </div>216    <div class="keys">217      <div class="row">218        <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>219        <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>220      </div>221      <div class="row">222        <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>223        <div class="key">H</div><div class="key">J</div><div class="key">K</div><div class="key">L</div>224      </div>225      <div class="row">226        <div class="key wide">⇧</div>227        <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>228        <div class="key wide">⌫</div>229      </div>230      <div class="row">231        <div class="key wide">?123</div>232        <div class="key">,</div>233        <div class="key">🙂</div>234        <div class="space">Space</div>235        <div class="key">.</div>236        <div class="enter-btn">⏎</div>237      </div>238    </div>239 240    <div class="done-circle">241      <div class="check"></div>242    </div>243  </div>244 245</div>246</body>247</html>