GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Search UI - Antwerp</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: 'Roboto', Arial, sans-serif; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #FFFFFF;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 110px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    padding: 0 38px;28    color: #2E3A45;29    font-size: 38px;30    letter-spacing: 0.2px;31  }32  .status-icons {33    display: flex;34    align-items: center;35    gap: 26px;36  }37  .icon {38    width: 44px; height: 44px;39  }40 41  /* Top search area */42  .top-area {43    position: absolute;44    top: 110px;45    left: 0;46    width: 1080px;47    padding: 24px 32px 28px 32px;48    box-sizing: border-box;49    background: #FFFFFF;50    border-bottom: 1px solid #E8EEF2;51  }52  .top-row {53    display: flex;54    align-items: center;55    gap: 24px;56  }57  .close-btn {58    width: 68px; height: 68px; border-radius: 34px;59    display: flex; align-items: center; justify-content: center;60    color: #3A4651; border: 1px solid #E6E9ED;61    background: #FFFFFF;62  }63  .search-pill {64    flex: 1;65    height: 120px;66    border-radius: 28px;67    border: 4px solid #1E88E5;68    display: flex; align-items: center;69    padding: 0 28px;70    box-sizing: border-box;71    gap: 20px;72  }73  .search-pill .pin {74    width: 50px; height: 50px;75    color: #1E88E5;76  }77  .search-input-text {78    flex: 1;79    font-size: 44px;80    color: #2C3F53;81    font-weight: 600;82  }83  .pill-clear {84    width: 64px; height: 64px; border-radius: 32px;85    display: flex; align-items: center; justify-content: center;86    color: #2C3F53; background: #F3F6FA; border: 1px solid #D7E0E7;87  }88 89  /* Content sections */90  .content {91    position: absolute;92    top: 270px;93    left: 0;94    width: 1080px;95    padding: 0 40px;96    box-sizing: border-box;97    color: #2C3F53;98  }99  .section-title {100    display: flex; align-items: center; justify-content: space-between;101    font-size: 36px; color: #7C9FB6;102    margin-top: 32px; margin-bottom: 18px;103  }104  .divider {105    width: 100%; height: 2px; background: #E6EDF3; margin: 10px 0 8px 0;106  }107  .item {108    display: flex; align-items: center; gap: 26px;109    padding: 34px 0;110  }111  .item-icon {112    width: 58px; height: 58px; color: #7C9FB6;113  }114  .item-text-main {115    font-size: 40px; font-weight: 700; color: #223B52;116    line-height: 1.25;117  }118  .item-text-sub {119    font-size: 34px; color: #7A8FA1;120  }121 122  /* Keyboard mock */123  .keyboard {124    position: absolute;125    left: 0;126    bottom: 80px;127    width: 1080px;128    height: 820px;129    background: #1E1E1E;130    box-sizing: border-box;131    padding: 18px 22px 24px 22px;132    color: #EBD9CC;133  }134  .kb-suggestion {135    height: 76px; border-radius: 14px;136    background: #2C2C2C; display: flex; align-items: center;137    padding: 0 24px; font-size: 38px; color: #EBD9CC;138    margin-bottom: 14px;139  }140  .kb-row {141    display: flex; justify-content: space-between;142    margin: 16px 0;143  }144  .key {145    height: 120px; min-width: 88px; flex: 1;146    margin: 0 8px; border-radius: 18px;147    background: #2A2A2A; display: flex; align-items: center; justify-content: center;148    font-size: 40px; color: #EBD9CC;149    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);150  }151  .key.small { flex: 0 0 140px; }152  .key.medium { flex: 0 0 170px; }153  .key.wide { flex: 0 0 220px; }154  .key.space { flex: 1 1 480px; }155 156  /* Bottom gesture bar */157  .gesture-bar {158    position: absolute;159    bottom: 20px;160    left: 50%;161    transform: translateX(-50%);162    width: 400px; height: 12px; border-radius: 6px;163    background: #D9D9D9;164    opacity: 0.9;165  }166 167  /* Utility SVG styling */168  svg { width: 100%; height: 100%; }169</style>170</head>171<body>172<div id="render-target">173 174  <!-- Status bar -->175  <div class="status-bar">176    <div>2:49</div>177    <div class="status-icons">178      <!-- mail icon -->179      <div class="icon">180        <svg viewBox="0 0 24 24">181          <path fill="#4B5563" d="M3 5h18v14H3z" opacity="0.25"/>182          <path fill="#4B5563" d="M21 5H3l9 6 9-6z"/>183        </svg>184      </div>185      <!-- cast icon -->186      <div class="icon">187        <svg viewBox="0 0 24 24">188          <path fill="#4B5563" d="M3 6h18v12H3z" opacity="0.25"/>189          <path fill="#4B5563" d="M3 18h3c0-1.66-1.34-3-3-3v3zm0-5c3.87 0 7 3.13 7 7h3c0-5.52-4.48-10-10-10v3z"/>190        </svg>191      </div>192      <!-- signal/battery icons simplified -->193      <div class="icon">194        <svg viewBox="0 0 24 24">195          <rect x="2" y="8" width="14" height="8" rx="2" fill="#4B5563"/>196          <rect x="17" y="10" width="3" height="4" fill="#4B5563"/>197        </svg>198      </div>199    </div>200  </div>201 202  <!-- Search bar area -->203  <div class="top-area">204    <div class="top-row">205      <div class="close-btn">206        <svg viewBox="0 0 24 24">207          <path d="M6 6l12 12M18 6L6 18" stroke="#495866" stroke-width="2" stroke-linecap="round"/>208        </svg>209      </div>210      <div class="search-pill">211        <div class="pin">212          <svg viewBox="0 0 24 24">213            <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#1E88E5"/>214          </svg>215        </div>216        <div class="search-input-text">Antwerp</div>217        <div class="pill-clear">218          <svg viewBox="0 0 24 24">219            <circle cx="12" cy="12" r="9" fill="#DCE4EA"/>220            <path d="M8 8l8 8M16 8l-8 8" stroke="#3A4651" stroke-width="2" stroke-linecap="round"/>221          </svg>222        </div>223      </div>224    </div>225  </div>226 227  <!-- Content: Recently searched and results -->228  <div class="content">229    <div class="section-title">230      <span>Recently searched</span>231      <span style="color:#1E88E5; font-weight:600;">Clear</span>232    </div>233    <div class="divider"></div>234 235    <!-- Recently searched item -->236    <div class="item">237      <div class="item-icon">238        <svg viewBox="0 0 24 24">239          <rect x="4" y="6" width="16" height="12" rx="2" fill="#7C9FB6"/>240          <rect x="7" y="8" width="3" height="3" fill="#CFE0EA"/>241          <rect x="11" y="8" width="3" height="3" fill="#CFE0EA"/>242          <rect x="15" y="8" width="3" height="3" fill="#CFE0EA"/>243        </svg>244      </div>245      <div>246        <div class="item-text-main">Antwerp</div>247        <div class="item-text-sub">Antwerp, Belgium</div>248      </div>249    </div>250 251    <div class="section-title" style="margin-top: 24px;">Search results</div>252    <div class="divider"></div>253 254    <!-- Result 1 -->255    <div class="item">256      <div class="item-icon">257        <svg viewBox="0 0 24 24">258          <path d="M6 17h12l-1 2H7l-1-2zm2-10h8a2 2 0 0 1 2 2v6H6V9a2 2 0 0 1 2-2zm4 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z" fill="#7C9FB6"/>259        </svg>260      </div>261      <div class="item-text-main">Antwerp Central Station</div>262    </div>263 264    <!-- Result 2 -->265    <div class="item">266      <div class="item-icon">267        <svg viewBox="0 0 24 24">268          <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#7C9FB6"/>269        </svg>270      </div>271      <div class="item-text-main">Antwerp Central Train Station</div>272    </div>273 274    <!-- Result 3 -->275    <div class="item">276      <div class="item-icon">277        <svg viewBox="0 0 24 24">278          <path d="M3 12l18-6-8 8 1 6-4-4-7-4z" fill="#7C9FB6"/>279        </svg>280      </div>281      <div class="item-text-main">Antwerpen</div>282    </div>283 284    <!-- Result 4 -->285    <div class="item">286      <div class="item-icon">287        <svg viewBox="0 0 24 24">288          <path d="M6 17h12l-1 2H7l-1-2zm2-10h8a2 2 0 0 1 2 2v6H6V9a2 2 0 0 1 2-2zm4 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z" fill="#7C9FB6"/>289        </svg>290      </div>291      <div class="item-text-main">Antwerpen-Berchem</div>292    </div>293  </div>294 295  <!-- Keyboard mock -->296  <div class="keyboard">297    <div class="kb-suggestion">Antwerp</div>298 299    <div class="kb-row">300      <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><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>301    </div>302    <div class="kb-row">303      <div class="key small">⇧</div><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><div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key medium">⌫</div>304    </div>305    <div class="kb-row">306      <div class="key small">?123</div><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><div class="key small">.</div><div class="key medium">✔︎</div>307    </div>308    <div class="kb-row">309      <div class="key small">⌨︎</div>310      <div class="key small">☺︎</div>311      <div class="key space"></div>312      <div class="key small">,</div>313      <div class="key small">🎤</div>314    </div>315  </div>316 317  <!-- Gesture bar -->318  <div class="gesture-bar"></div>319</div>320</body>321</html>