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 Screen UI</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #121212;20  }21 22  /* Status bar */23  .status-bar {24    position: absolute;25    top: 0;26    left: 0;27    width: 100%;28    height: 140px;29    padding: 0 36px;30    background: #0f0f0f;31    color: #ffffff;32    display: flex;33    align-items: center;34    justify-content: space-between;35    box-sizing: border-box;36    font-weight: 700;37  }38  .status-left { font-size: 44px; letter-spacing: 0.5px; }39  .status-right {40    display: flex; align-items: center; gap: 28px;41  }42  .status-icon svg { fill: none; stroke: #fff; stroke-width: 4; }43 44  /* Page title */45  .page-title {46    position: absolute;47    top: 180px;48    left: 36px;49    color: #fff;50    font-size: 94px;51    font-weight: 800;52    letter-spacing: -0.5px;53  }54 55  /* Search input */56  .search-input {57    position: absolute;58    top: 320px;59    left: 36px;60    right: 36px;61    height: 130px;62    background: #ffffff;63    border-radius: 26px;64    display: flex;65    align-items: center;66    padding: 0 36px;67    box-sizing: border-box;68  }69  .search-input .icon {70    width: 60px; height: 60px; margin-right: 24px;71  }72  .search-placeholder {73    color: #666666;74    font-size: 46px;75    font-weight: 700;76  }77 78  /* Browse all title */79  .section-title {80    position: absolute;81    top: 480px;82    left: 36px;83    color: #fff;84    font-size: 56px;85    font-weight: 700;86  }87 88  /* Cards grid */89  .cards {90    position: absolute;91    top: 560px;92    left: 36px;93    right: 36px;94    display: grid;95    grid-template-columns: repeat(2, 1fr);96    grid-gap: 32px 30px;97  }98  .card {99    height: 240px;100    border-radius: 22px;101    padding: 36px;102    box-sizing: border-box;103    color: #ffffff;104    font-size: 54px;105    font-weight: 800;106    position: relative;107  }108  .card .art {109    position: absolute;110    right: 22px;111    bottom: 22px;112    width: 180px;113    height: 180px;114    background: #E0E0E0;115    border: 1px solid #BDBDBD;116    display: flex;117    justify-content: center;118    align-items: center;119    color: #757575;120    font-size: 28px;121    transform: rotate(-15deg);122    border-radius: 12px;123  }124 125  /* Specific card colors */126  .c-podcasts { background: #D94D2F; }127  .c-live { background: #6F63F6; }128  .c-made { background: #243A71; }129  .c-new { background: #E24D79; }130  .c-hindi { background: #E2413E; }131  .c-punjabi { background: #8F39B6; }132  .c-tamil { background: #82634B; }133  .c-telugu { background: #D25A27; }134  .c-charts { background: #7B6ABD; }135  .c-pop { background: #45B34D; }136 137  /* Now playing mini player */138  .player {139    position: absolute;140    left: 36px;141    right: 36px;142    bottom: 280px;143    height: 170px;144    background: #2a2a2a;145    border-radius: 24px;146    display: flex;147    align-items: center;148    padding: 16px 24px;149    box-sizing: border-box;150    color: #ffffff;151    box-shadow: 0 8px 24px rgba(0,0,0,0.4);152    gap: 24px;153  }154  .player .album {155    width: 130px;156    height: 130px;157    background: #E0E0E0;158    border: 1px solid #BDBDBD;159    display: flex;160    align-items: center;161    justify-content: center;162    color: #757575;163    font-size: 26px;164    border-radius: 12px;165  }166  .player .meta {167    flex: 1;168    min-width: 0;169  }170  .player .title {171    font-size: 42px;172    font-weight: 800;173    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;174  }175  .player .artist {176    font-size: 34px;177    color: #bdbdbd;178    margin-top: 8px;179    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;180  }181  .player .controls {182    display: flex;183    align-items: center;184    gap: 28px;185  }186  .player .controls svg { width: 56px; height: 56px; }187  .player .play {188    width: 70px; height: 70px; background: #1ED760; border-radius: 50%;189    display: flex; align-items: center; justify-content: center;190  }191  .player .play svg { width: 42px; height: 42px; fill: #121212; }192 193  /* Bottom navigation */194  .bottom-nav {195    position: absolute;196    left: 0;197    bottom: 0;198    width: 100%;199    height: 220px;200    background: rgba(0,0,0,0.9);201    display: flex;202    align-items: center;203    justify-content: space-around;204    box-sizing: border-box;205    padding-bottom: 40px;206  }207  .nav-item {208    display: flex;209    flex-direction: column;210    align-items: center;211    gap: 16px;212    color: #9e9e9e;213    font-size: 30px;214    font-weight: 700;215  }216  .nav-item.active { color: #ffffff; }217  .nav-item svg { width: 56px; height: 56px; stroke: #9e9e9e; fill: none; stroke-width: 4; }218  .nav-item.active svg { stroke: #ffffff; }219 220  /* Home indicator */221  .home-indicator {222    position: absolute;223    bottom: 20px;224    left: 50%;225    transform: translateX(-50%);226    width: 240px;227    height: 14px;228    background: #ffffff;229    border-radius: 7px;230    opacity: 0.9;231  }232</style>233</head>234<body>235<div id="render-target">236  <!-- Status Bar -->237  <div class="status-bar">238    <div class="status-left">11:05</div>239    <div class="status-right">240      <div class="status-icon">241        <!-- Signal icon -->242        <svg width="52" height="52" viewBox="0 0 64 64">243          <path d="M10 44h6M18 38h6M26 32h6M34 26h6M42 20h6" />244        </svg>245      </div>246      <div class="status-icon">247        <!-- Wi-Fi icon -->248        <svg width="52" height="52" viewBox="0 0 64 64">249          <path d="M12 26c10-10 30-10 40 0" />250          <path d="M18 32c7-7 21-7 28 0" />251          <path d="M24 38c4-4 12-4 16 0" />252          <circle cx="32" cy="46" r="3" />253        </svg>254      </div>255      <div class="status-icon">256        <!-- Battery icon -->257        <svg width="52" height="52" viewBox="0 0 64 64">258          <rect x="10" y="18" width="40" height="24" rx="4" />259          <rect x="52" y="24" width="4" height="12" rx="2" />260          <rect x="14" y="22" width="24" height="16" rx="2" fill="#fff" stroke="none" />261        </svg>262      </div>263    </div>264  </div>265 266  <!-- Title -->267  <div class="page-title">Search</div>268 269  <!-- Search Input -->270  <div class="search-input">271    <div class="icon">272      <svg viewBox="0 0 64 64">273        <circle cx="26" cy="26" r="18" stroke="#121212" stroke-width="4" fill="none"></circle>274        <path d="M42 42 L58 58" stroke="#121212" stroke-width="4" />275      </svg>276    </div>277    <div class="search-placeholder">Artists, songs, or podcasts</div>278  </div>279 280  <!-- Browse All -->281  <div class="section-title">Browse all</div>282 283  <div class="cards">284    <div class="card c-podcasts">Podcasts285      <div class="art">[IMG: Podcast Artwork]</div>286    </div>287    <div class="card c-live">Live Events288      <div class="art">[IMG: Concert Artwork]</div>289    </div>290 291    <div class="card c-made">Made For You292      <div class="art">[IMG: Mix Cover]</div>293    </div>294    <div class="card c-new">New releases295      <div class="art">[IMG: New Music Cover]</div>296    </div>297 298    <div class="card c-hindi">Hindi299      <div class="art">[IMG: Hindi Playlist Art]</div>300    </div>301    <div class="card c-punjabi">Punjabi302      <div class="art">[IMG: Punjabi Playlist Art]</div>303    </div>304 305    <div class="card c-tamil">Tamil306      <div class="art">[IMG: Tamil Playlist Art]</div>307    </div>308    <div class="card c-telugu">Telugu309      <div class="art">[IMG: Telugu Playlist Art]</div>310    </div>311 312    <div class="card c-charts">Charts313      <div class="art">[IMG: Charts Artwork]</div>314    </div>315    <div class="card c-pop">Pop316      <div class="art">[IMG: Pop Playlist Art]</div>317    </div>318  </div>319 320  <!-- Now Playing Mini Player -->321  <div class="player">322    <div class="album">[IMG: Album Art]</div>323    <div class="meta">324      <div class="title">Jagger - Studio Recording From</div>325      <div class="artist">Maroon 5</div>326    </div>327    <div class="controls">328      <!-- Devices icon -->329      <svg viewBox="0 0 64 64">330        <rect x="8" y="14" width="36" height="26" rx="4" stroke="#fff" fill="none" />331        <rect x="48" y="30" width="8" height="14" rx="2" stroke="#fff" fill="none" />332      </svg>333      <!-- Heart icon -->334      <svg viewBox="0 0 64 64">335        <path d="M32 50c-10-7-18-13-18-22a10 10 0 0 1 18-6 10 10 0 0 1 18 6c0 9-8 15-18 22z" stroke="#fff" fill="none" />336      </svg>337      <!-- Play button -->338      <div class="play">339        <svg viewBox="0 0 64 64">340          <path d="M24 18 L50 32 L24 46 Z"></path>341        </svg>342      </div>343    </div>344  </div>345 346  <!-- Bottom Navigation -->347  <div class="bottom-nav">348    <div class="nav-item">349      <svg viewBox="0 0 64 64">350        <path d="M12 30 L32 16 L52 30 V52 H12 Z" />351      </svg>352      <div>Home</div>353    </div>354    <div class="nav-item active">355      <svg viewBox="0 0 64 64">356        <circle cx="28" cy="28" r="16" />357        <path d="M40 40 L56 56" />358      </svg>359      <div>Search</div>360    </div>361    <div class="nav-item">362      <svg viewBox="0 0 64 64">363        <rect x="12" y="16" width="10" height="32" />364        <rect x="28" y="24" width="10" height="24" />365        <rect x="44" y="20" width="10" height="28" />366      </svg>367      <div>Your Library</div>368    </div>369    <div class="nav-item">370      <svg viewBox="0 0 64 64">371        <circle cx="32" cy="32" r="26" />372        <path d="M18 26c8-4 20-2 26 2" />373        <path d="M20 34c6-3 18-1 24 2" />374        <path d="M22 42c5-2 12-1 18 2" />375      </svg>376      <div>Premium</div>377    </div>378  </div>379 380  <!-- Home Indicator -->381  <div class="home-indicator"></div>382</div>383</body>384</html>