GD-ML/AndroidCode
13.4k
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</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #0e0e0e;20 color: #fff;21 }22 23 /* Status bar */24 .status-bar {25 position: absolute;26 top: 0;27 left: 0;28 width: 1080px;29 height: 110px;30 padding: 0 34px;31 display: flex;32 align-items: center;33 justify-content: space-between;34 color: #ffffff;35 box-sizing: border-box;36 }37 .status-left {38 font-size: 42px;39 letter-spacing: 0.5px;40 }41 .status-right {42 display: flex;43 align-items: center;44 gap: 26px;45 }46 .status-icon {47 width: 38px;48 height: 38px;49 }50 51 /* Header */52 .header {53 position: absolute;54 top: 118px;55 left: 0;56 width: 1080px;57 height: 120px;58 display: flex;59 align-items: center;60 justify-content: center;61 }62 .header h1 {63 margin: 0;64 font-size: 66px;65 font-weight: 700;66 color: #eaeaea;67 letter-spacing: 0.5px;68 }69 .header .cancel {70 position: absolute;71 right: 40px;72 font-size: 44px;73 color: #cfcfcf;74 }75 76 /* Search bar */77 .search-wrap {78 position: absolute;79 top: 250px;80 left: 40px;81 width: 1000px;82 }83 .search-bar {84 width: 100%;85 height: 120px;86 background: #2a2a2a;87 border-radius: 60px;88 display: flex;89 align-items: center;90 padding: 0 28px;91 box-sizing: border-box;92 gap: 22px;93 }94 .search-input {95 flex: 1;96 color: #bdbdbd;97 font-size: 40px;98 }99 .search-icon,100 .mic-icon {101 width: 56px;102 height: 56px;103 display: inline-flex;104 }105 106 /* Hint + toggle */107 .hint-row {108 margin-top: 22px;109 display: flex;110 align-items: center;111 justify-content: space-between;112 color: #9da0a6;113 font-size: 34px;114 }115 .toggle {116 width: 96px;117 height: 56px;118 background: #3b3b3b;119 border-radius: 28px;120 position: relative;121 border: 1px solid #4a4a4a;122 }123 .toggle::after {124 content: "";125 position: absolute;126 top: 6px;127 left: 8px;128 width: 44px;129 height: 44px;130 background: #c7c7c7;131 border-radius: 50%;132 }133 134 /* Section title */135 .section-title {136 position: absolute;137 top: 430px;138 left: 40px;139 font-size: 50px;140 font-weight: 700;141 color: #eaeaea;142 }143 144 /* Trending grid */145 .trending-grid {146 position: absolute;147 top: 520px;148 left: 40px;149 width: 1000px;150 display: grid;151 grid-template-columns: repeat(4, 1fr);152 gap: 26px;153 }154 .card {155 width: 1fr;156 }157 .album {158 width: 230px;159 height: 230px;160 background: #E0E0E0;161 border: 1px solid #BDBDBD;162 border-radius: 18px;163 display: flex;164 align-items: center;165 justify-content: center;166 color: #757575;167 position: relative;168 overflow: hidden;169 }170 .play-badge {171 position: absolute;172 left: 12px;173 bottom: 12px;174 width: 58px;175 height: 58px;176 }177 .card-title {178 margin-top: 18px;179 width: 230px;180 font-size: 34px;181 color: #dcdcdc;182 white-space: nowrap;183 overflow: hidden;184 text-overflow: ellipsis;185 }186 187 /* Keyboard (overlay at bottom) */188 .keyboard {189 position: absolute;190 left: 0;191 bottom: 0;192 width: 1080px;193 height: 880px;194 background: #151515;195 border-top: 1px solid #2a2a2a;196 box-sizing: border-box;197 padding-top: 24px;198 }199 .kb-tools {200 display: flex;201 align-items: center;202 justify-content: space-between;203 padding: 0 44px;204 margin-bottom: 20px;205 }206 .tool {207 width: 88px;208 height: 88px;209 background: #1f1f1f;210 border: 1px solid #303030;211 border-radius: 24px;212 display: flex;213 align-items: center;214 justify-content: center;215 }216 .tool svg {217 width: 44px;218 height: 44px;219 fill: #e0e0e0;220 }221 222 .kb-row {223 display: flex;224 justify-content: center;225 gap: 16px;226 padding: 0 24px;227 margin: 22px 0;228 }229 .key {230 width: 92px;231 height: 112px;232 background: #1f1f1f;233 border: 1px solid #2d2d2d;234 border-radius: 22px;235 color: #e8e8e8;236 font-size: 44px;237 display: flex;238 align-items: center;239 justify-content: center;240 box-sizing: border-box;241 }242 .key.wide {243 width: 150px;244 }245 .key.space {246 flex: 1;247 height: 112px;248 min-width: 420px;249 border-radius: 26px;250 font-size: 32px;251 color: #bfbfbf;252 }253 .key.action {254 background: #f3e1a3;255 color: #1a1a1a;256 border: 1px solid #d9c98d;257 }258 .key.icon {259 font-size: 40px;260 color: #d6d6d6;261 }262 .home-pill {263 position: absolute;264 bottom: 24px;265 left: 50%;266 transform: translateX(-50%);267 width: 300px;268 height: 12px;269 background: #e8e8e8;270 border-radius: 6px;271 opacity: 0.9;272 }273</style>274</head>275<body>276<div id="render-target">277 <!-- Status Bar -->278 <div class="status-bar">279 <div class="status-left">10:12</div>280 <div class="status-right">281 <!-- Simple notification dots -->282 <svg class="status-icon" viewBox="0 0 24 24">283 <circle cx="12" cy="12" r="10" fill="#d8d8d8"></circle>284 </svg>285 <svg class="status-icon" viewBox="0 0 24 24">286 <circle cx="12" cy="12" r="10" fill="#d8d8d8"></circle>287 </svg>288 <svg class="status-icon" viewBox="0 0 24 24">289 <circle cx="12" cy="12" r="10" fill="#d8d8d8"></circle>290 </svg>291 <!-- Separator dot -->292 <svg class="status-icon" viewBox="0 0 24 24">293 <circle cx="12" cy="12" r="3" fill="#d8d8d8"></circle>294 </svg>295 <!-- Wi-Fi -->296 <svg class="status-icon" viewBox="0 0 24 24">297 <path d="M2 8c5.5-4.5 14.5-4.5 20 0" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>298 <path d="M5 11c4-3 10-3 14 0" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>299 <path d="M8 14c2-1.5 6-1.5 8 0" stroke="#ffffff" stroke-width="2" fill="none" stroke-linecap="round"/>300 <circle cx="12" cy="18" r="2" fill="#ffffff"/>301 </svg>302 <!-- Battery -->303 <svg class="status-icon" viewBox="0 0 24 24">304 <rect x="2" y="7" width="18" height="10" rx="2" fill="none" stroke="#ffffff" stroke-width="2"/>305 <rect x="4" y="9" width="12" height="6" rx="1" fill="#ffffff"/>306 <rect x="20" y="10" width="2" height="4" rx="1" fill="#ffffff"/>307 </svg>308 </div>309 </div>310 311 <!-- Header -->312 <div class="header">313 <h1>Search</h1>314 <div class="cancel">Cancel</div>315 </div>316 317 <!-- Search bar and hint -->318 <div class="search-wrap">319 <div class="search-bar">320 <!-- Magnifying glass -->321 <svg class="search-icon" viewBox="0 0 24 24">322 <circle cx="11" cy="11" r="7" stroke="#d7d7d7" stroke-width="2" fill="none"/>323 <path d="M16 16l5 5" stroke="#d7d7d7" stroke-width="2" stroke-linecap="round"/>324 </svg>325 <div class="search-input">Artist, songs, podcast or hellotunes</div>326 <!-- Mic icon -->327 <svg class="mic-icon" viewBox="0 0 24 24">328 <rect x="9" y="5" width="6" height="10" rx="3" fill="#d7d7d7"/>329 <path d="M6 11c0 3.3 2.7 6 6 6s6-2.7 6-6" stroke="#d7d7d7" stroke-width="2" fill="none"/>330 <path d="M12 17v3" stroke="#d7d7d7" stroke-width="2" stroke-linecap="round"/>331 </svg>332 </div>333 <div class="hint-row">334 <div>Search songs with "Hellotunes"</div>335 <div class="toggle"></div>336 </div>337 </div>338 339 <!-- Section title -->340 <div class="section-title">Trending Searches</div>341 342 <!-- Trending grid -->343 <div class="trending-grid">344 <div class="card">345 <div class="album">[IMG: Album Art]346 <svg class="play-badge" viewBox="0 0 48 48">347 <circle cx="24" cy="24" r="22" fill="rgba(0,0,0,0.55)" stroke="#ffffff" stroke-width="2"/>348 <polygon points="20,16 36,24 20,32" fill="#ffffff"/>349 </svg>350 </div>351 <div class="card-title">Ram Siya Ram (...</div>352 </div>353 <div class="card">354 <div class="album">[IMG: Album Art]355 <svg class="play-badge" viewBox="0 0 48 48">356 <circle cx="24" cy="24" r="22" fill="rgba(0,0,0,0.55)" stroke="#ffffff" stroke-width="2"/>357 <polygon points="20,16 36,24 20,32" fill="#ffffff"/>358 </svg>359 </div>360 <div class="card-title">O Maahi (From ...</div>361 </div>362 <div class="card">363 <div class="album">[IMG: Album Art]364 <svg class="play-badge" viewBox="0 0 48 48">365 <circle cx="24" cy="24" r="22" fill="rgba(0,0,0,0.55)" stroke="#ffffff" stroke-width="2"/>366 <polygon points="20,16 36,24 20,32" fill="#ffffff"/>367 </svg>368 </div>369 <div class="card-title">Gulabi Sharara</div>370 </div>371 <div class="card">372 <div class="album">[IMG: Album Art]373 <svg class="play-badge" viewBox="0 0 48 48">374 <circle cx="24" cy="24" r="22" fill="rgba(0,0,0,0.55)" stroke="#ffffff" stroke-width="2"/>375 <polygon points="20,16 36,24 20,32" fill="#ffffff"/>376 </svg>377 </div>378 <div class="card-title">Pehle Bhi M...</div>379 </div>380 </div>381 382 <!-- Keyboard overlay -->383 <div class="keyboard">384 <div class="kb-tools">385 <div class="tool">386 <svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" fill="#e0e0e0"/><rect x="14" y="3" width="7" height="7" fill="#e0e0e0"/><rect x="3" y="14" width="7" height="7" fill="#e0e0e0"/><rect x="14" y="14" width="7" height="7" fill="#e0e0e0"/></svg>387 </div>388 <div class="tool">389 <svg viewBox="0 0 24 24"><circle cx="12" cy="9" r="5" fill="#e0e0e0"/><path d="M4 22c2-4 6-6 8-6s6 2 8 6" stroke="#e0e0e0" stroke-width="2" fill="none"/></svg>390 </div>391 <div class="tool"><span style="color:#e0e0e0;font-weight:700;">GIF</span></div>392 <div class="tool">393 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8" fill="none" stroke="#e0e0e0" stroke-width="2"/><rect x="11" y="6" width="2" height="6" fill="#e0e0e0"/><rect x="11" y="13" width="2" height="5" fill="#e0e0e0"/></svg>394 </div>395 <div class="tool">396 <svg viewBox="0 0 24 24"><rect x="5" y="5" width="14" height="14" rx="3" fill="none" stroke="#e0e0e0" stroke-width="2"/><path d="M10 14l2-2 2 2 3-3" fill="none" stroke="#e0e0e0" stroke-width="2"/></svg>397 </div>398 <div class="tool">399 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="5" fill="#e0e0e0"/><circle cx="12" cy="12" r="9" fill="none" stroke="#e0e0e0" stroke-width="2"/></svg>400 </div>401 <div class="tool">402 <svg viewBox="0 0 24 24"><rect x="9" y="5" width="6" height="10" rx="3" fill="#e0e0e0"/><path d="M6 11c0 3.3 2.7 6 6 6s6-2.7 6-6" stroke="#e0e0e0" stroke-width="2" fill="none"/><path d="M12 17v3" stroke="#e0e0e0" stroke-width="2" stroke-linecap="round"/></svg>403 </div>404 </div>405 406 <div class="kb-row">407 <div class="key">q</div>408 <div class="key">w</div>409 <div class="key">e</div>410 <div class="key">r</div>411 <div class="key">t</div>412 <div class="key">y</div>413 <div class="key">u</div>414 <div class="key">i</div>415 <div class="key">o</div>416 <div class="key">p</div>417 </div>418 <div class="kb-row">419 <div class="key">a</div>420 <div class="key">s</div>421 <div class="key">d</div>422 <div class="key">f</div>423 <div class="key">g</div>424 <div class="key">h</div>425 <div class="key">j</div>426 <div class="key">k</div>427 <div class="key">l</div>428 </div>429 <div class="kb-row">430 <div class="key icon">⬆</div>431 <div class="key">z</div>432 <div class="key">x</div>433 <div class="key">c</div>434 <div class="key">v</div>435 <div class="key">b</div>436 <div class="key">n</div>437 <div class="key">m</div>438 <div class="key icon">⌫</div>439 </div>440 <div class="kb-row">441 <div class="key wide">?123</div>442 <div class="key">,</div>443 <div class="key wide">😊</div>444 <div class="key space">space</div>445 <div class="key">.</div>446 <div class="key action">✔</div>447 </div>448 449 <div class="home-pill"></div>450 </div>451</div>452</body>453</html>