GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Destination Search 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; border-radius: 0;11  }12 13  /* Status bar */14  .status-bar {15    height: 120px;16    padding: 26px 36px;17    display: flex;18    align-items: center;19    justify-content: space-between;20    color: #000;21    font-weight: 600;22  }23  .status-left { font-size: 42px; }24  .status-center {25    display: flex; gap: 18px; align-items: center;26  }27  .pill {28    height: 38px; padding: 0 18px; border-radius: 10px;29    background: #ECECEC; color: #555; font-size: 26px; display: flex; align-items: center;30  }31  .dot { width: 12px; height: 12px; border-radius: 50%; background: #7A7A7A; }32  .status-right { display: flex; gap: 24px; align-items: center; }33  .icon-std svg { width: 34px; height: 34px; }34 35  /* Search bar */36  .search-wrapper {37    padding: 14px 36px 0 36px;38  }39  .search-bar {40    width: 100%; height: 120px;41    background: #FFFFFF;42    border: 8px solid #F2B43C;43    border-radius: 26px;44    display: flex; align-items: center;45    box-sizing: border-box;46    padding: 0 26px;47    box-shadow: 0 2px 0 rgba(0,0,0,0.02);48  }49  .search-icon { margin-right: 22px; }50  .search-placeholder { font-size: 40px; color: #9E9E9E; }51 52  /* List and suggestions */53  .content { padding: 32px 36px 0 36px; }54  .list-item {55    display: flex; align-items: center;56    margin-bottom: 28px;57  }58  .tile {59    width: 112px; height: 112px;60    border-radius: 22px;61    background: #EFF4FF;62    display: flex; align-items: center; justify-content: center;63    border: 1px solid #DFE7FF;64    flex-shrink: 0;65  }66  .item-text { margin-left: 26px; }67  .item-title-blue { color: #2E66E5; font-size: 42px; font-weight: 700; }68  .item-sub { color: #707070; font-size: 32px; margin-top: 8px; }69 70  .section-title {71    font-size: 58px; font-weight: 800; color: #222; margin: 40px 0 24px 0;72  }73  .item-title { color: #111; font-size: 44px; font-weight: 800; }74  .show-more { color: #2E66E5; font-size: 42px; margin-top: 26px; }75 76  /* Keyboard */77  .keyboard {78    position: absolute; left: 0; right: 0; bottom: 0;79    height: 880px; background: #F2EEF8;80    border-top-left-radius: 28px; border-top-right-radius: 28px;81    box-shadow: 0 -2px 6px rgba(0,0,0,0.05);82    padding: 26px 24px;83    box-sizing: border-box;84  }85  .kb-top {86    display: flex; align-items: center; gap: 22px; margin-bottom: 22px;87  }88  .kb-circle {89    width: 88px; height: 88px; border-radius: 44px;90    background: #D9D4FA; display: flex; align-items: center; justify-content: center;91  }92  .kb-top .icon-std svg { width: 44px; height: 44px; }93  .key-row { display: flex; justify-content: space-between; padding: 0 12px; margin: 16px 0; }94  .key {95    width: 88px; height: 120px; background: #FFFFFF; border-radius: 22px;96    box-shadow: 0 1px 0 rgba(0,0,0,0.08);97    display: flex; align-items: center; justify-content: center;98    font-size: 44px; color: #222;99  }100  .key-wide { width: 170px; }101  .key-space { flex: 1; margin: 0 12px; }102  .kb-bottom {103    margin-top: 26px; display: flex; align-items: center; padding: 0 12px; gap: 14px;104  }105  .handle {106    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);107    width: 260px; height: 10px; border-radius: 5px; background: #9E9E9E;108  }109 110  /* Simple blue icons */111  .blue { stroke: #2E66E5; fill: none; }112</style>113</head>114<body>115<div id="render-target">116 117  <!-- Status bar -->118  <div class="status-bar">119    <div class="status-left">2:50</div>120    <div class="status-center">121      <div class="pill">ovo</div>122      <div class="pill">ebay</div>123      <div class="pill">▶</div>124      <div class="dot"></div>125