GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Search Suggestions - Budapest</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    position: relative;10    overflow: hidden;11    width: 1080px;12    height: 2400px;13    background: #FFFFFF;14    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;15    color: #222;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 104px;25    padding: 26px 36px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #212121;30    font-weight: 600;31    font-size: 36px;32  }33  .status-icons {34    display: flex;35    align-items: center;36    gap: 20px;37  }38  .dot {39    width: 10px;40    height: 10px;41    background: #9E9E9E;42    border-radius: 50%;43  }44  .pill-icon {45    width: 44px;46    height: 26px;47    border-radius: 14px;48    background: #EEEEEE;49    border: 1px solid #D0D0D0;50  }51  .wifi {52    width: 28px; height: 28px;53  }54  .battery {55    width: 36px; height: 22px;56  }57 58  /* Search bar */59  .search-wrap {60    position: absolute;61    top: 132px;62    left: 36px;63    width: 1008px;64    height: 96px;65    border: 6px solid #F3B63F;66    border-radius: 26px;67    background: #FFFFFF;68    box-shadow: 0 2px 0 rgba(0,0,0,0.04);69    display: flex;70    align-items: center;71    padding: 0 24px;72    gap: 24px;73  }74  .back-icon {75    width: 46px; height: 46px;76  }77  .search-text {78    flex: 1;79    font-size: 40px;80    color: #1E1E1E;81  }82  .clear-btn {83    width: 52px; height: 52px;84    border-radius: 26px;85    border: 1px solid #CFCFCF;86    display: flex;87    align-items: center;88    justify-content: center;89    background: #FFFFFF;90  }91  .clear-btn svg { width: 26px; height: 26px; }92 93  /* Results list */94  .content {95    position: absolute;96    top: 256px;97    left: 0;98    width: 1080px;99    padding: 0 36px;100  }101  .result {102    display: flex;103    gap: 28px;104    padding: 28px 0;105    border-bottom: 1px solid #EEEEEE;106  }107  .thumb {108    width: 136px;109    height: 136px;110    background: #E0E0E0;111    border: 1px solid #BDBDBD;112    border-radius: 12px;113    display: flex;114    align-items: center;115    justify-content: center;116    color: #757575;117    font-size: 24px;118    text-align: center;119    padding: 8px;120  }121  .result-text {122    flex: 1;123    display: flex;124    flex-direction: column;125    justify-content: center;126  }127  .title {128    font-size: 40px;129    font-weight: 700;130    color: #212121;131    margin-bottom: 8px;132  }133  .subtitle, .meta {134    font-size: 28px;135    color: #777777;136    line-height: 1.35;137  }138 139  /* Keyboard */140  .keyboard {141    position: absolute;142    left: 0;143    width: 1080px;144    bottom: 86px; /* leave space for home pill */145    height: 840px;146    background: #F2EEF7;147    border-top-left-radius: 22px;148    border-top-right-radius: 22px;149    box-shadow: 0 -2px 0 rgba(0,0,0,0.06);150  }151  .kb-suggestion {152    height: 96px;153    display: flex;154    align-items: center;155    justify-content: space-between;156    padding: 0 36px;157    font-size: 34px;158    color: #3A3A3A;159  }160  .kb-keys {161    padding: 18px 24px 24px;162    display: grid;163    grid-template-columns: repeat(10, 1fr);164    grid-gap: 12px;165  }166  .kb-row {167    display: grid;168    grid-template-columns: repeat(10, 1fr);169    gap: 12px;170    margin-top: 18px;171    padding: 0 24px;172  }173  .key {174    height: 120px;175    background: #FFFFFF;176    border: 1px solid #DDD;177    border-radius: 18px;178    display: flex;179    align-items: center;180    justify-content: center;181    color: #4A4A4A;182    font-size: 40px;183    font-weight: 500;184  }185  .key.small { font-size: 34px; }186  .key.wide { grid-column: span 2; }187  .key.space { grid-column: span 5; }188  .key.back {189    background: #F6F3FB;190    border-color: #D2CDE5;191  }192  .kb-footer {193    display: grid;194    grid-template-columns: 1.2fr 0.8fr 0.8fr 4.2fr 0.8fr 1.2fr;195    gap: 12px;196    padding: 18px 24px 24px;197  }198 199  /* Home pill */200  .home-pill {201    position: absolute;202    bottom: 24px;203    left: 50%;204    transform: translateX(-50%);205    width: 360px;206    height: 16px;207    border-radius: 8px;208    background: #5C5C5C;209    opacity: 0.55;210  }211</style>212</head>213<body>214<div id="render-target">215 216  <!-- Status bar -->217  <div class="status-bar">218    <div>2:53</div>219    <div class="status-icons">220      <div class="pill-icon"></div>221      <div class="pill-icon"></div>222      <div class="pill-icon"></div>223      <div class="dot"></div>224      <svg class="wifi" viewBox="0 0 24 24">225        <path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M9 16c2-2 6-2 8 0M12 19a3 3 0 1 0 0.01 0" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round"/>226      </svg>227      <svg class="battery" viewBox="0 0 28 16">228        <rect x="1" y="2" width="22" height="12" rx="2" ry="2" fill="none" stroke="#444" stroke-width="2"/>229        <rect x="3" y="4" width="18" height="8" rx="1" ry="1" fill="#444"/>230        <rect x="23" y="6" width="4" height="4" rx="1" fill="#444"/>231      </svg>232    </div>233  </div>234 235  <!-- Search bar -->236  <div class="search-wrap">237    <svg class="back-icon" viewBox="0 0 24 24">238      <path d="M15 5 L9 12 L15 19" stroke="#333" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>239    </svg>240    <div class="search-text">Budapest</div>241    <div class="clear-btn">242      <svg viewBox="0 0 24 24">243        <circle cx="12" cy="12" r="10" fill="none" stroke="#B5B5B5" stroke-width="1.5"/>244        <path d="M8 8 L16 16 M16 8 L8 16" stroke="#8A8A8A" stroke-width="2" stroke-linecap="round"/>245      </svg>246    </div>247  </div>248 249  <!-- Suggestions -->250  <div class="content">251    <div class="result">252      <div class="thumb">[IMG: Budapest landmark]</div>253      <div class="result-text">254        <div class="title">Budapest</div>255        <div class="subtitle">City in Pest, Hungary</div>256        <div class="meta">6249 properties</div>257      </div>258    </div>259 260    <div class="result">261      <div class="thumb">[IMG: Budapest city view]</div>262      <div class="result-text">263        <div class="title">Budapest City Centre</div>264        <div class="subtitle">District in Budapest</div>265        <div class="meta">2248 properties</div>266      </div>267    </div>268 269    <div class="result">270      <div class="thumb">[IMG: Budapest airport runway]</div>271      <div class="result-text">272        <div class="title">Budapest Ferenc Liszt International Airport</div>273        <div class="subtitle">Airport in Budapest, Hungary</div>274        <div class="meta">53 properties</div>275      </div>276    </div>277 278    <div class="result">279      <div class="thumb">[IMG: Aquaworld Resort pool]</div>280      <div class="result-text">281        <div class="title">Aquaworld Resort Budapest</div>282        <div class="subtitle">Property in Budapest, Hungary</div>283        <div class="meta">—</div>284      </div>285    </div>286 287    <div class="result" style="border-bottom: none;">288      <div class="thumb">[IMG: Prague cityscape]</div>289      <div class="result-text">290        <div class="title">Prague</div>291        <div class="subtitle">City in Czech Republic</div>292        <div class="meta">4915 properties</div>293      </div>294    </div>295  </div>296 297  <!-- Keyboard -->298  <div class="keyboard">299    <div class="kb-suggestion">300      <svg class="back-icon" viewBox="0 0 24 24">301        <path d="M15 5 L9 12 L15 19" stroke="#6B6B6B" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>302      </svg>303      <div>Budapest</div>304      <svg viewBox="0 0 24 24" width="36" height="36">305        <path d="M12 3c3 0 3 3 3 6v3l2 2-10 0 2-2V9c0-3 0-6 3-6z M10 20h4" fill="none" stroke="#6B6B6B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>306      </svg>307    </div>308 309    <!-- Row 1 -->310    <div class="kb-keys">311      <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>312      <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>313    </div>314 315    <!-- Row 2 -->316    <div class="kb-row">317      <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>318      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key back">⌫</div>319    </div>320 321    <!-- Row 3 -->322    <div class="kb-row">323      <div class="key wide">⇧</div>324      <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>325      <div class="key">b</div><div class="key">n</div><div class="key">m</div>326      <div class="key wide back">⌫</div>327    </div>328 329    <!-- Row 4 -->330    <div class="kb-footer">331      <div class="key small">?123</div>332      <div class="key small">,</div>333      <div class="key small">☺</div>334      <div class="key space">space</div>335      <div class="key small">.</div>336      <div class="key small">✓</div>337    </div>338  </div>339 340  <!-- Home pill -->341  <div class="home-pill"></div>342 343</div>344</body>345</html>