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">6<title>Search UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #121212;15    color: #EEE;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    width: 1080px;24    height: 96px;25    padding: 0 32px;26    box-sizing: border-box;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #DADADA;31    font-size: 34px;32    letter-spacing: 0.3px;33  }34  .status-left, .status-right {35    display: flex;36    align-items: center;37    gap: 18px;38  }39  .status-dot {40    width: 26px; height: 26px; border-radius: 50%; background: #BDBDBD; opacity: 0.9;41  }42  .wifi {43    width: 42px; height: 42px;44  }45  .battery {46    width: 52px; height: 28px;47  }48 49  /* Header */50  .header {51    position: absolute;52    top: 96px;53    left: 0;54    width: 1080px;55    height: 140px;56    display: flex;57    align-items: center;58    padding: 0 40px;59    box-sizing: border-box;60  }61  .header-title {62    font-size: 64px;63    font-weight: 600;64    color: #F2F2F2;65  }66  .header-right {67    margin-left: auto;68    font-size: 40px;69    color: #BDBDBD;70  }71 72  /* Search bar */73  .search-bar {74    position: absolute;75    top: 236px;76    left: 40px;77    width: 1000px;78    height: 96px;79    background: #232323;80    border-radius: 16px;81    display: flex;82    align-items: center;83    padding: 0 24px;84    box-sizing: border-box;85    color: #EAEAEA;86  }87  .search-input-text {88    font-size: 40px;89    line-height: 1;90    flex: 1;91    white-space: nowrap;92    overflow: hidden;93    text-overflow: ellipsis;94  }95  .icon-btn {96    width: 56px; height: 56px; border-radius: 28px; background: #2E2E2E; display: flex; align-items: center; justify-content: center;97  }98  .icon-btn svg { width: 28px; height: 28px; fill: #CFCFCF; }99 100  /* Results list */101  .results {102    position: absolute;103    top: 356px;104    left: 0;105    width: 1080px;106    padding: 0 24px 0 24px;107    box-sizing: border-box;108  }109  .result {110    display: flex;111    align-items: center;112    padding: 24px 16px;113    gap: 28px;114  }115  .thumb {116    width: 120px; height: 120px;117    background: #E0E0E0;118    border: 1px solid #BDBDBD;119    color: #757575;120    display: flex; align-items: center; justify-content: center;121    font-size: 22px; text-align: center;122  }123  .result-body {124    flex: 1;125    min-width: 0;126  }127  .title {128    font-size: 36px;129    color: #F5F5F5;130  }131  .subtitle {132    font-size: 28px;133    color: #9E9E9E;134    margin-top: 6px;135    white-space: nowrap;136    overflow: hidden;137    text-overflow: ellipsis;138  }139  .result-actions {140    width: 90px; display: flex; align-items: center; justify-content: flex-end;141  }142  .ellipsis { width: 32px; height: 32px; fill: #BDBDBD; }143  .chev { width: 28px; height: 28px; fill: none; stroke: #BDBDBD; stroke-width: 6; }144 145  /* Suggestion chip above keyboard */146  .suggestion-bar {147    position: absolute;148    left: 0;149    width: 1080px;150    top: 1600px;151    height: 72px;152    display: flex;153    align-items: center;154    justify-content: center;155    gap: 16px;156  }157  .chip {158    padding: 10px 24px;159    border-radius: 18px;160    background: #1E1E1E;161    color: #EAEAEA;162    font-size: 30px;163    border: 1px solid #2E2E2E;164  }165 166  /* Keyboard */167  .keyboard {168    position: absolute;169    left: 0;170    bottom: 96px;171    width: 1080px;172    height: 760px;173    background: #0F0F0F;174    border-top: 1px solid #242424;175    padding: 26px 24px 24px 24px;176    box-sizing: border-box;177  }178  .keys-row {179    display: grid;180    grid-template-columns: repeat(10, 1fr);181    gap: 16px;182    margin-bottom: 22px;183  }184  .key {185    height: 104px;186    background: #2B2B2B;187    border-radius: 18px;188    color: #E6E6E6;189    display: flex; align-items: center; justify-content: center;190    font-size: 40px;191  }192  .key.small { font-size: 32px; }193  .key.wide { grid-column: span 2; }194  .key.shift { grid-column: span 1; }195  .key.space { grid-column: span 6; }196  .key.enter {197    width: 120px; height: 120px;198    border-radius: 60px;199    background: #F4D891;200    color: #2C2C2C;201    font-weight: 700;202    justify-self: end;203  }204  .key.mode {205    background: #C7BB9B;206    color: #2C2C2C;207  }208  .keyboard-bottom {209    display: grid;210    grid-template-columns: 1.2fr 6fr 1.2fr 1.2fr;211    gap: 16px;212    align-items: center;213  }214  .mic svg { width: 40px; height: 40px; fill: #E6E6E6; }215 216  /* Home pill */217  .home-pill {218    position: absolute;219    bottom: 24px;220    left: 50%;221    transform: translateX(-50%);222    width: 220px; height: 10px; border-radius: 6px; background: #FFFFFF;223    opacity: 0.85;224  }225</style>226</head>227<body>228<div id="render-target">229 230  <!-- Status Bar -->231  <div class="status-bar">232    <div class="status-left">233      <div>10:14</div>234      <div class="status-dot"></div>235      <div class="status-dot"></div>236      <div class="status-dot"></div>237      <div class="status-dot"></div>238      <div class="status-dot" style="width:10px; height:10px;"></div>239    </div>240    <div class="status-right">241      <svg class="wifi" viewBox="0 0 24 24">242        <path fill="#DADADA" d="M12 18l-2 2 2 2 2-2-2-2zm-6-6l-2 2 8 8 8-8-2-2-6 6-6-6zm-4-4l-2 2 12 12 12-12-2-2L12 16 2 8z"/>243      </svg>244      <svg class="battery" viewBox="0 0 40 20">245        <rect x="1" y="2" width="34" height="16" rx="3" ry="3" fill="none" stroke="#DADADA" stroke-width="2"/>246        <rect x="4" y="5" width="28" height="10" rx="2" fill="#DADADA"/>247        <rect x="36" y="6" width="3" height="8" rx="1" fill="#DADADA"/>248      </svg>249    </div>250  </div>251 252  <!-- Header -->253  <div class="header">254    <div class="header-title">Search</div>255    <div class="header-right">Cancel</div>256  </div>257 258  <!-- Search Bar -->259  <div class="search-bar">260    <div class="search-input-text">Luciano Pavarotti</div>261    <div class="icon-btn" aria-label="Clear">262      <svg viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18" stroke="#CFCFCF" stroke-width="2" stroke-linecap="round"/></svg>263    </div>264  </div>265 266  <!-- Results -->267  <div class="results">268    <!-- Artist result -->269    <div class="result">270      <div class="thumb">[IMG: Artist Photo]</div>271      <div class="result-body">272        <div class="title">Luciano Pavarotti</div>273        <div class="subtitle">Artist · 900+ Monthly Listeners</div>274      </div>275      <div class="result-actions">276        <svg class="chev" viewBox="0 0 24 24"><path d="M8 4l8 8-8 8"/></svg>277      </div>278    </div>279 280    <!-- Song results -->281    <div class="result">282      <div class="thumb">[IMG: Album Art]</div>283      <div class="result-body">284        <div class="title">Leoncavallo: Mattinata (Orch. Faris)</div>285        <div class="subtitle">Song · 36 Plays · Luciano Pavarotti - Luciano Pa…</div>286      </div>287      <div class="result-actions">288        <svg class="ellipsis" viewBox="0 0 24 24">289          <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>290        </svg>291      </div>292    </div>293 294    <div class="result">295      <div class="thumb">[IMG: Album Art]</div>296      <div class="result-body">297        <div class="title">Leoncavallo: Mattinata (Orch. Faris)</div>298        <div class="subtitle">Song · 37 Plays · Luciano Pavarotti - Luciano Pa…</div>299      </div>300      <div class="result-actions">301        <svg class="ellipsis" viewBox="0 0 24 24">302          <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>303        </svg>304      </div>305    </div>306 307    <div class="result">308      <div class="thumb">[IMG: Album Art + Play Icon]</div>309      <div class="result-body">310        <div class="title">L'amico Fritz, Act 2 Scene 7: "Che Più S'as…"</div>311        <div class="subtitle">Song · 600+ Plays · Mirella Freni/Luciano Pavarotti…</div>312      </div>313      <div class="result-actions">314        <svg class="ellipsis" viewBox="0 0 24 24">315          <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>316        </svg>317      </div>318    </div>319 320    <div class="result">321      <div class="thumb">[IMG: Album Art]</div>322      <div class="result-body">323        <div class="title">We Are The World Live</div>324        <div class="subtitle">Song · 37K+ Plays · Luciano Pavarotti - Pavarotti…</div>325      </div>326      <div class="result-actions">327        <svg class="ellipsis" viewBox="0 0 24 24">328          <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>329        </svg>330      </div>331    </div>332 333    <div class="result">334      <div class="thumb">[IMG: Album Art + Play Icon]</div>335      <div class="result-body">336        <div class="title">L'amico Fritz, Act 1 Scene 3: "Chi Mai Sar…"</div>337        <div class="subtitle">Song · 100+ Plays · Mirella Freni/Luciano Pavarotti…</div>338      </div>339      <div class="result-actions">340        <svg class="ellipsis" viewBox="0 0 24 24">341          <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>342        </svg>343      </div>344    </div>345  </div>346 347  <!-- Suggestion chip -->348  <div class="suggestion-bar">349    <div class="chip">Pavarotti</div>350  </div>351 352  <!-- Keyboard -->353  <div class="keyboard">354    <div class="keys-row">355      <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>356      <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>357    </div>358    <div class="keys-row">359      <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>360      <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div><div class="key">;</div>361    </div>362    <div class="keys-row">363      <div class="key shift">⇧</div>364      <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div>365      <div class="key">b</div><div class="key">n</div><div class="key">m</div>366      <div class="key">⌫</div>367      <div class="key small">.</div>368    </div>369    <div class="keyboard-bottom">370      <div class="key mode small">?123</div>371      <div class="key space">space</div>372      <div class="key mic">373        <svg viewBox="0 0 24 24"><path d="M12 14a4 4 0 0 0 4-4V6a4 4 0 1 0-8 0v4a4 4 0 0 0 4 4zm6-4a6 6 0 0 1-12 0h-2a8 8 0 0 0 7 7.93V20h2v-2.07A8 8 0 0 0 20 10h-2z"/></svg>374      </div>375      <div class="key enter">✓</div>376    </div>377  </div>378 379  <!-- Home Pill -->380  <div class="home-pill"></div>381 382</div>383</body>384</html>