GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Search UI - Stained Window Glass</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #121212;20    color: #FFFFFF;21  }22 23  /* Status bar */24  .status-bar {25    height: 110px;26    background: #1A1A1A;27    display: flex;28    align-items: center;29    justify-content: space-between;30    padding: 0 32px;31    box-sizing: border-box;32  }33  .status-left {34    font-size: 36px;35    font-weight: 600;36    color: #EDEDED;37    letter-spacing: 0.5px;38  }39  .status-right {40    display: flex;41    align-items: center;42    gap: 22px;43  }44  .status-dot, .status-icon {45    width: 22px;46    height: 22px;47    background: #DADADA;48    border-radius: 50%;49    opacity: 0.8;50  }51  .status-battery {52    width: 36px;53    height: 22px;54    border: 2px solid #DADADA;55    border-radius: 4px;56    position: relative;57  }58  .status-battery::after {59    content: "";60    position: absolute;61    right: -8px;62    top: 6px;63    width: 6px;64    height: 10px;65    background: #DADADA;66    border-radius: 2px;67  }68  .status-battery .level {69    position: absolute;70    left: 2px;71    top: 2px;72    height: 16px;73    width: 24px;74    background: #DADADA;75    border-radius: 2px;76  }77 78  /* Search header */79  .search-header {80    height: 120px;81    background: #1F1F1F;82    display: flex;83    align-items: center;84    gap: 24px;85    padding: 0 28px;86    box-sizing: border-box;87    border-bottom: 1px solid #2A2A2A;88  }89  .search-text {90    font-size: 44px;91    color: #FFFFFF;92    flex: 1;93    white-space: nowrap;94    overflow: hidden;95    text-overflow: ellipsis;96  }97  .icon-btn {98    width: 56px;99    height: 56px;100    display: flex;101    align-items: center;102    justify-content: center;103    border-radius: 28px;104    background: transparent;105  }106  .icon-btn svg {107    width: 44px;108    height: 44px;109    fill: none;110    stroke: #FFFFFF;111    stroke-width: 5;112  }113 114  /* Suggestion row */115  .suggestion {116    padding: 24px 28px;117    box-sizing: border-box;118    background: #121212;119    border-bottom: 1px solid #2A2A2A;120    display: flex;121    align-items: center;122  }123  .suggestion-text {124    font-size: 42px;125    color: #FFFFFF;126    flex: 1;127  }128  .suggestion .arrow {129    width: 38px;130    height: 38px;131  }132 133  /* Section title */134  .section-title {135    padding: 26px 28px 18px;136    font-size: 30px;137    color: #A6A6A6;138    letter-spacing: 0.2px;139  }140 141  /* Shop list */142  .shop-list {143    padding-bottom: 24px;144    box-sizing: border-box;145  }146  .shop-item {147    display: flex;148    align-items: center;149    gap: 24px;150    padding: 22px 28px;151    border-bottom: 1px solid #272727;152  }153  .avatar {154    width: 92px;155    height: 92px;156    background: #E0E0E0;157    border: 1px solid #BDBDBD;158    border-radius: 50%;159    display: flex;160    align-items: center;161    justify-content: center;162    color: #757575;163    font-size: 20px;164    text-align: center;165    box-sizing: border-box;166  }167  .shop-texts .title {168    font-size: 36px;169    color: #FFFFFF;170    line-height: 1.2;171  }172  .shop-texts .subtitle {173    font-size: 28px;174    color: #B2B2B2;175    margin-top: 6px;176  }177 178  /* Keyboard overlay */179  .keyboard {180    position: absolute;181    left: 0;182    right: 0;183    bottom: 0;184    height: 820px;185    background: #0F1612;186    border-top-left-radius: 22px;187    border-top-right-radius: 22px;188    box-shadow: 0 -6px 18px rgba(0,0,0,0.45);189  }190  .kb-suggestions {191    height: 90px;192    padding: 0 24px;193    box-sizing: border-box;194    display: flex;195    align-items: center;196    gap: 22px;197    color: #D6D6D6;198    font-size: 32px;199  }200  .chip {201    padding: 10px 18px;202    background: #1D1D1D;203    border-radius: 22px;204    border: 1px solid #2A2A2A;205    color: #CFCFCF;206  }207  .keys {208    padding: 16px 18px;209    box-sizing: border-box;210    display: grid;211    grid-template-rows: repeat(4, 1fr);212    gap: 18px;213    height: calc(100% - 90px);214  }215  .row {216    display: flex;217    justify-content: space-between;218    gap: 14px;219  }220  .key {221    flex: 1;222    height: 120px;223    background: #1A1E1B;224    border: 1px solid #273127;225    border-radius: 22px;226    color: #DADADA;227    font-size: 40px;228    display: flex;229    align-items: center;230    justify-content: center;231  }232  .key.wide {233    flex: 1.25;234  }235  .key.space {236    flex: 3.2;237    color: #97A597;238  }239  .key.green {240    background: #3CF573;241    border-color: #2DD15F;242    color: #0A0A0A;243    font-weight: 700;244  }245  .key.light {246    background: #2A2A2A;247    border-color: #3A3A3A;248    color: #E6E6E6;249  }250  .kb-bottom-bar {251    position: absolute;252    bottom: 20px;253    left: 50%;254    transform: translateX(-50%);255    width: 280px;256    height: 10px;257    background: #DADADA;258    border-radius: 6px;259    opacity: 0.9;260  }261</style>262</head>263<body>264<div id="render-target">265 266  <!-- Status bar -->267  <div class="status-bar">268    <div class="status-left">9:50</div>269    <div class="status-right">270      <div class="status-dot"></div>271      <div class="status-dot"></div>272      <div class="status-icon"></div>273      <div class="status-dot"></div>274      <div class="status-battery"><div class="level"></div></div>275    </div>276  </div>277 278  <!-- Search header -->279  <div class="search-header">280    <button class="icon-btn" aria-label="Back">281      <svg viewBox="0 0 24 24">282        <path d="M15 6 L9 12 L15 18" />283        <path d="M9 12 H22" />284      </svg>285    </button>286    <div class="search-text">stained window glass</div>287    <button class="icon-btn" aria-label="Clear">288      <svg viewBox="0 0 24 24">289        <path d="M6 6 L18 18 M18 6 L6 18" />290      </svg>291    </button>292  </div>293 294  <!-- Suggestion row -->295  <div class="suggestion">296    <div class="suggestion-text">stained window glass</div>297    <svg class="arrow" viewBox="0 0 24 24">298      <path d="M6 4 L18 12 L6 20" stroke="#FFFFFF" stroke-width="3" fill="none"/>299    </svg>300  </div>301 302  <div class="section-title">Shops</div>303 304  <!-- Shop list -->305  <div class="shop-list">306    <div class="shop-item">307      <div class="avatar">[IMG: Shop Avatar]</div>308      <div class="shop-texts">309        <div class="title">GlassStained</div>310        <div class="subtitle">Leah • Shop owner</div>311      </div>312    </div>313 314    <div class="shop-item">315      <div class="avatar">[IMG: Shop Avatar]</div>316      <div class="shop-texts">317        <div class="title">WindowCandyGlass</div>318        <div class="subtitle">Linnea DeSouza • Shop owner</div>319      </div>320    </div>321 322    <div class="shop-item">323      <div class="avatar">[IMG: Shop Avatar]</div>324      <div class="shop-texts">325        <div class="title">FunkyWindowGlass</div>326        <div class="subtitle">Anne • Shop owner</div>327      </div>328    </div>329 330    <div class="shop-item">331      <div class="avatar">[IMG: Shop Avatar]</div>332      <div class="shop-texts">333        <div class="title">StainedGlassAddie</div>334        <div class="subtitle">StainedGlassAddie • Shop owner</div>335      </div>336    </div>337 338    <div class="shop-item">339      <div class="avatar">[IMG: Shop Avatar]</div>340      <div class="shop-texts">341        <div class="title">StainedGlassElements</div>342        <div class="subtitle">Francis • Shop owner</div>343      </div>344    </div>345 346    <div class="shop-item">347      <div class="avatar">[IMG: Shop Avatar]</div>348      <div class="shop-texts">349        <div class="title">FurryStainedGlass</div>350        <div class="subtitle">Heather • Shop owner</div>351      </div>352    </div>353 354    <div class="shop-item">355      <div class="avatar">[IMG: Shop Avatar]</div>356      <div class="shop-texts">357        <div class="title">BarbarasStainedGlass</div>358        <div class="subtitle">Barbara • Shop owner</div>359      </div>360    </div>361 362    <div class="shop-item">363      <div class="avatar">[IMG: Shop Avatar]</div>364      <div class="shop-texts">365        <div class="title">KathanStainedGlass</div>366        <div class="subtitle">Kathan • Shop owner</div>367      </div>368    </div>369  </div>370 371  <!-- Keyboard overlay -->372  <div class="keyboard">373    <div class="kb-suggestions">374      <span class="chip">glass</span>375      <span class="chip">glasses</span>376      <span class="chip">🍷</span>377      <span class="chip">🥂</span>378      <span class="chip">🎤</span>379    </div>380 381    <div class="keys">382      <div class="row">383        <div class="key">q</div>384        <div class="key">w</div>385        <div class="key">e</div>386        <div class="key">r</div>387        <div class="key">t</div>388        <div class="key">y</div>389        <div class="key">u</div>390        <div class="key">i</div>391        <div class="key">o</div>392        <div class="key">p</div>393      </div>394      <div class="row">395        <div class="key">a</div>396        <div class="key">s</div>397        <div class="key">d</div>398        <div class="key">f</div>399        <div class="key">g</div>400        <div class="key">h</div>401        <div class="key">j</div>402        <div class="key">k</div>403        <div class="key">l</div>404      </div>405      <div class="row">406        <div class="key light">⇧</div>407        <div class="key">z</div>408        <div class="key">x</div>409        <div class="key">c</div>410        <div class="key">v</div>411        <div class="key">b</div>412        <div class="key">n</div>413        <div class="key">m</div>414        <div class="key light">⌫</div>415      </div>416      <d