GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Search UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Inter", Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #FFFFFF;14  }15 16  /* Status bar */17  .status-bar {18    height: 120px;19    padding: 0 36px;20    display: flex;21    align-items: center;22    justify-content: space-between;23    color: #2E2E2E;24    font-weight: 600;25    font-size: 36px;26  }27  .status-right {28    display: flex;29    align-items: center;30    gap: 18px;31  }32  .dot {33    width: 24px; height: 24px; background: #5A5A5A; border-radius: 50%;34  }35  .status-icon {36    width: 38px; height: 38px; border-radius: 8px; border: 1px solid #CFCFCF; display: inline-flex; align-items: center; justify-content: center;37  }38 39  /* Header with back and search */40  .header {41    padding: 10px 36px 24px 36px;42  }43  .search-row {44    display: flex; align-items: center; gap: 24px;45  }46  .back-btn {47    width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center;48  }49  .search-input {50    flex: 1;51    height: 96px;52    border: 1px solid #E0E0E0;53    border-radius: 48px;54    display: flex;55    align-items: center;56    padding: 0 28px;57    gap: 18px;58    color: #9E9E9E;59    font-size: 40px;60  }61  .caret {62    width: 3px; height: 54px; background: #2AC06E; border-radius: 2px;63  }64  .divider {65    height: 1px; background: #E9E9E9; margin-top: 18px;66  }67 68  /* List area */69  .content {70    padding: 24px 36px 0 36px;71  }72  .item {73    display: flex; align-items: center; gap: 28px;74    margin: 26px 0;75  }76  .square {77    width: 120px; height: 120px; background: #F8F8F8; border: 1px solid #E0E0E0; border-radius: 28px; display: flex; align-items: center; justify-content: center;78  }79  .title {80    font-size: 44px; color: #111111; font-weight: 700; line-height: 1.2;81  }82  .subtitle {83    font-size: 28px; color: #6A6A6A; margin-top: 6px;84  }85  .section-label {86    margin-top: 24px;87    color: #333333; font-weight: 700; font-size: 24px; letter-spacing: 2px;88  }89 90  .thumb {91    width: 160px; height: 160px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 24px;92    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px; text-align: center; padding: 10px;93  }94 95  /* Keyboard mock */96  .keyboard {97    position: absolute;98    left: 0; right: 0; bottom: 44px;99    height: 860px;100    background: #F0F2E9;101    border-top: 1px solid #E2E4D9;102    padding: 24px 24px 36px 24px;103  }104  .kb-toolbar {105    display: flex; align-items: center; justify-content: space-between;106    padding: 0 40px; margin-bottom: 18px;107  }108  .kb-tool {109    width: 64px; height: 64px; border-radius: 20px; background: #FFFFFF; border: 1px solid #DADADA;110    display: flex; align-items: center; justify-content: center; color: #707070; font-size: 24px;111  }112  .keys-row {113    display: flex; justify-content: center; gap: 18px; margin: 16px 0;114  }115  .key {116    width: 84px; height: 108px; background: #FFFFFF; border: 1px solid #E1E1E1; border-radius: 24px;117    display: flex; align-items: center; justify-content: center; font-size: 36px; color: #202020; box-shadow: 0 1px 0 #EFEFEF inset;118  }119  .key-wide {120    width: 540px;121  }122  .key-mid {123    width: 120px;124  }125  .key-green {126    background: #DCEAD4; border-color: #CBDAC3;127  }128 129  /* Bottom navigation pill */130  .nav-pill {131    position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);132    width: 240px; height: 16px; border-radius: 8px; background: #9E9E9E; opacity: 0.6;133  }134 135  /* Simple inline icon wrappers */136  .svg-24 { width: 36px; height: 36px; }137  .svg-32 { width: 42px; height: 42px; }138</style>139</head>140<body>141<div id="render-target">142 143  <!-- Status bar -->144  <div class="status-bar">145    <div>1:00</div>146    <div class="status-right">147      <div class="dot"></div>148      <div class="dot"></div>149      <div class="dot"></div>150      <div style="color:#7C7C7C;font-weight:700;">oyo</div>151      <div class="dot" style="opacity:.4;"></div>152      <div class="status-icon">153        <!-- wifi -->154        <svg class="svg-24" viewBox="0 0 24 24">155          <path d="M12 18.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-7-7c4.7-4.7 15.3-4.7 20 0" fill="none" stroke="#5A5A5A" stroke-width="2" stroke-linecap="round"/>156          <path d="M5 14c5-5 14-5 19 0" fill="none" stroke="#5A5A5A" stroke-width="2" stroke-linecap="round"/>157          <path d="M8 16.5c3.5-3 9-3 12.5 0" fill="none" stroke="#5A5A5A" stroke-width="2" stroke-linecap="round"/>158        </svg>159      </div>160      <div class="status-icon">161        <!-- battery -->162        <svg class="svg-24" viewBox="0 0 24 24">163          <rect x="3" y="6" width="16" height="12" rx="2" ry="2" fill="none" stroke="#5A5A5A" stroke-width="2"/>164          <rect x="5" y="8" width="12" height="8" fill="#5A5A5A"/>165          <rect x="20" y="10" width="2" height="4" fill="#5A5A5A"/>166        </svg>167      </div>168    </div>169  </div>170 171  <!-- Header -->172  <div class="header">173    <div class="search-row">174      <div class="back-btn">175        <svg class="svg-32" viewBox="0 0 24 24">176          <path d="M15 6L9 12l6 6" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>177        </svg>178      </div>179      <div class="search-input">180        <svg class="svg-32" viewBox="0 0 24 24">181          <circle cx="10" cy="10" r="6" fill="none" stroke="#7A7A7A" stroke-width="2"/>182          <path d="M15 15l5 5" stroke="#7A7A7A" stroke-width="2" stroke-linecap="round"/>183        </svg>184        <div class="caret"></div>185        <div>Where to?</div>186      </div>187    </div>188    <div class="divider"></div>189  </div>190 191  <!-- Content list -->192  <div class="content">193    <!-- Nearby -->194    <div class="item" style="margin-top: 24px;">195      <div class="square">196        <svg class="svg-32" viewBox="0 0 24 24">197          <path d="M3 12l18-7-7 18-3-8-8-3z" fill="none" stroke="#4A4A4A" stroke-width="2" stroke-linejoin="round"/>198        </svg>199      </div>200      <div>201        <div class="title">Nearby</div>202      </div>203    </div>204 205    <!-- Recent label -->206    <div class="section-label">RECENT</div>207 208    <!-- Honolulu -->209    <div class="item">210      <div class="square">211        <svg class="svg-32" viewBox="0 0 24 24">212          <path d="M12 22s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11z" fill="none" stroke="#2E2E2E" stroke-width="2"/>213          <circle cx="12" cy="11" r="2.2" fill="none" stroke="#2E2E2E" stroke-width="2"/>214        </svg>215      </div>216      <div>217        <div class="title">Honolulu</div>218        <div class="subtitle">Hawaii, United States</div>219      </div>220    </div>221 222    <!-- Hawaii -->223    <div class="item">224      <div class="square">225        <svg class="svg-32" viewBox="0 0 24 24">226          <path d="M12 22s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11z" fill="none" stroke="#2E2E2E" stroke-width="2"/>227          <circle cx="12" cy="11" r="2.2" fill="none" stroke="#2E2E2E" stroke-width="2"/>228        </svg>229      </div>230      <div>231        <div class="title">Hawaii</div>232        <div class="subtitle">United States, North America</div>233      </div>234    </div>235 236    <!-- Dolphins item -->237    <div class="item" style="margin-top: 20px;">238      <div class="thumb">[IMG: Dolphins swimming in blue water]</div>239      <div>240        <div class="title" style="max-width: 770px;">241          Swim with Dolphins in the West Coast line of Oahu242        </div>243        <div class="subtitle">Honolulu, Hawaii</div>244      </div>245    </div>246  </div>247 248  <!-- Keyboard mock -->249  <div class="keyboard">250    <div class="kb-toolbar">251      <div class="kb-tool">😊</div>252      <div class="kb-tool">GIF</div>253      <div class="kb-tool">⚙️</div>254      <div class="kb-tool">G↔︎</div>255      <div class="kb-tool">🎨</div>256      <div class="kb-tool">🎤</div>257    </div>258 259    <div class="keys-row">260      <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>261      <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>262    </div>263    <div class="keys-row">264      <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>265      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>266    </div>267    <div class="keys-row">268      <div class="key key-green">⇧</div>269      <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>270      <div class="key key-green">⌫</div>271    </div>272    <div class="keys-row" style="gap: 14px;">273      <div class="key key-green">?123</div>274      <div class="key key-green">,</div>275      <div class="key">😊</div>276      <div class="key key-wide"></div>277      <div class="key">.</div>278      <div class="key key-green">279        <svg class="svg-24" viewBox="0 0 24 24">280          <circle cx="10" cy="10" r="6" fill="none" stroke="#333" stroke-width="2"/>281          <path d="M15 15l5 5" stroke="#333" stroke-width="2" stroke-linecap="round"/>282        </svg>283      </div>284    </div>285  </div>286 287  <div class="nav-pill"></div>288</div>289</body>290</html>