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 Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0E0E0E;15    color: #FFFFFF;16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;17  }18  /* Status bar */19  .status-bar {20    height: 120px;21    background: #141414;22    color: #fff;23    display: flex;24    align-items: center;25    padding: 0 36px;26    box-sizing: border-box;27    font-weight: 600;28    font-size: 40px;29    letter-spacing: 0.5px;30  }31  .status-left { flex: 1; }32  .status-right {33    display: flex;34    gap: 28px;35    align-items: center;36  }37  .status-icon svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 3; }38 39  /* Header */40  .header {41    padding: 36px 36px 10px 36px;42  }43  .title-row {44    display: flex;45    align-items: center;46    justify-content: space-between;47    margin-bottom: 30px;48  }49  .title-left {50    display: flex;51    align-items: center;52    gap: 24px;53  }54  .avatar {55    width: 96px;56    height: 96px;57    border-radius: 50%;58    background: #FF7D3E;59    display: flex;60    align-items: center;61    justify-content: center;62    font-weight: 800;63    font-size: 48px;64    color: #121212;65  }66  .page-title {67    font-size: 72px;68    line-height: 1;69    font-weight: 800;70  }71  .camera-btn {72    width: 88px;73    height: 88px;74    border-radius: 20px;75    display: flex;76    align-items: center;77    justify-content: center;78  }79  .camera-btn svg { width: 64px; height: 64px; fill: none; stroke: #fff; stroke-width: 6; }80 81  /* Search bar */82  .search-bar {83    margin-top: 10px;84    width: 100%;85    box-sizing: border-box;86    background: #FFFFFF;87    border-radius: 26px;88    padding: 28px 36px;89    display: flex;90    align-items: center;91    gap: 22px;92  }93  .search-icon {94    width: 56px; height: 56px;95  }96  .search-placeholder {97    color: #616161;98    font-size: 44px;99    font-weight: 700;100  }101 102  .section-title {103    margin: 32px 36px 20px 36px;104    font-size: 44px;105    font-weight: 800;106  }107 108  /* Cards grid */109  .cards {110    padding: 10px 24px 0 24px;111    display: grid;112    grid-template-columns: 1fr 1fr;113    grid-gap: 28px;114    box-sizing: border-box;115  }116  .card {117    height: 260px;118    border-radius: 26px;119    position: relative;120    overflow: hidden;121    padding: 34px;122    display: flex;123    align-items: flex-start;124  }125  .card h3 {126    margin: 0;127    font-size: 46px;128    line-height: 1.1;129    font-weight: 800;130    color: #FFFFFF;131    text-shadow: 0 1px 0 rgba(0,0,0,0.15);132  }133  .mini-art {134    position: absolute;135    right: 22px;136    bottom: 18px;137    width: 180px;138    height: 120px;139    background: #E0E0E0;140    border: 1px solid #BDBDBD;141    border-radius: 12px;142    color: #757575;143    font-size: 28px;144    display: flex;145    align-items: center;146    justify-content: center;147    transform: rotate(-12deg);148  }149 150  /* Card colors approximating screenshot */151  .c-purple { background: #5E2B97; }152  .c-pink { background: #D64BA9; }153  .c-green { background: #2E7D66; }154  .c-violet { background: #6A3DFF; }155  .c-blue { background: #3B5B7A; }156  .c-rose { background: #D64C63; }157  .c-orange { background: #B86E2D; }158  .c-teal { background: #3BA690; }159  .c-pink2 { background: #C24692; }160  .c-magenta { background: #8A3EB2; }161 162  /* Bottom navigation */163  .bottom-bar {164    position: absolute;165    left: 0;166    right: 0;167    bottom: 42px;168    height: 170px;169    background: linear-gradient(180deg, rgba(18,18,18,0.0) 0%, rgba(18,18,18,0.85) 30%, rgba(18,18,18,1) 100%);170    border-top: 1px solid #2A2A2A;171    display: flex;172    align-items: center;173    justify-content: space-around;174    padding: 0 24px;175    box-sizing: border-box;176  }177  .nav-item {178    text-align: center;179    color: #BDBDBD;180    font-size: 28px;181    font-weight: 700;182  }183  .nav-item.active { color: #FFFFFF; }184  .nav-icon {185    width: 56px; height: 56px; margin: 0 auto 12px;186  }187  .home-indicator {188    position: absolute;189    bottom: 16px;190    left: 50%;191    transform: translateX(-50%);192    width: 360px;193    height: 10px;194    border-radius: 6px;195    background: #FFFFFF;196    opacity: 0.85;197  }198</style>199</head>200<body>201<div id="render-target">202 203  <!-- Status Bar -->204  <div class="status-bar">205    <div class="status-left">5:29</div>206    <div class="status-right">207      <div class="status-icon" title="Do Not Disturb">208        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><line x1="7" y1="12" x2="17" y2="12"></line></svg>209      </div>210      <div class="status-icon" title="Wi‑Fi">211        <svg viewBox="0 0 24 24"><path d="M2 9c5-5 15-5 20 0" stroke-linecap="round"/><path d="M5 12c3.5-3.5 10.5-3.5 14 0" stroke-linecap="round"/><path d="M8.5 15.5c2-2 5-2 7 0" stroke-linecap="round"/><circle cx="12" cy="19" r="1.6" fill="#fff" stroke="none"/></svg>212      </div>213      <div class="status-icon" title="Battery">214        <svg viewBox="0 0 24 24"><rect x="3" y="7" width="16" height="10" rx="2"></rect><rect x="19" y="10" width="2" height="4"></rect><rect x="5" y="9" width="12" height="6" fill="#fff" stroke="none"></rect></svg>215      </div>216    </div>217  </div>218 219  <!-- Header -->220  <div class="header">221    <div class="title-row">222      <div class="title-left">223        <div class="avatar">L</div>224        <div class="page-title">Search</div>225      </div>226      <div class="camera-btn" aria-label="Camera">227        <svg viewBox="0 0 24 24">228          <rect x="3" y="6" width="18" height="12" rx="2"></rect>229          <path d="M9 6l1.5-2h3L15 6"></path>230          <circle cx="12" cy="12" r="3.2"></circle>231        </svg>232      </div>233    </div>234 235    <div class="search-bar">236      <svg class="search-icon" viewBox="0 0 24 24">237        <circle cx="11" cy="11" r="7" stroke="#121212" stroke-width="2" fill="none"></circle>238        <line x1="16.5" y1="16.5" x2="21" y2="21" stroke="#121212" stroke-width="2"></line>239      </svg>240      <div class="search-placeholder">What do you want to listen to?</div>241    </div>242  </div>243 244  <div class="section-title">Browse all</div>245 246  <!-- Cards Grid -->247  <div class="cards">248    <div class="card c-purple">249      <h3>Wrapped</h3>250      <div class="mini-art">[IMG: Playlist Art]</div>251    </div>252    <div class="card c-pink">253      <h3>Music</h3>254      <div class="mini-art">[IMG: Artist Art]</div>255    </div>256    <div class="card c-green">257      <h3>Podcasts</h3>258      <div class="mini-art">[IMG: Podcast Cover]</div>259    </div>260    <div class="card c-violet">261      <h3>Live Events</h3>262      <div class="mini-art">[IMG: Concert Photo]</div>263    </div>264    <div class="card c-blue">265      <h3>Made For You</h3>266      <div class="mini-art">[IMG: Mix Art]</div>267    </div>268    <div class="card c-rose">269      <h3>New Releases</h3>270      <div class="mini-art">[IMG: Album Art]</div>271    </div>272    <div class="card c-orange">273      <h3>2023 in Music</h3>274      <div class="mini-art">[IMG: Year Recap]</div>275    </div>276    <div class="card c-teal">277      <h3>2023 in Podcasts</h3>278      <div class="mini-art">[IMG: Year Recap]</div>279    </div>280    <div class="card c-pink2">281      <h3>Hindi</h3>282      <div class="mini-art">[IMG: Bollywood Tile]</div>283    </div>284    <div class="card c-magenta">285      <h3>Punjabi</h3>286      <div class="mini-art">[IMG: Punjabi Tile]</div>287    </div>288  </div>289 290  <!-- Bottom Navigation -->291  <div class="bottom-bar">292    <div class="nav-item">293      <svg class="nav-icon" viewBox="0 0 24 24">294        <path d="M3 10.5l9-7 9 7v9a1.5 1.5 0 0 1-1.5 1.5H4.5A1.5 1.5 0 0 1 3 19.5z" fill="none" stroke="#BDBDBD" stroke-width="2"/>295        <path d="M9 21v-6h6v6" fill="none" stroke="#BDBDBD" stroke-width="2"/>296      </svg>297      Home298    </div>299    <div class="nav-item active">300      <svg class="nav-icon" viewBox="0 0 24 24">301        <circle cx="11" cy="11" r="7" stroke="#FFFFFF" stroke-width="2" fill="none"></circle>302        <line x1="16.5" y1="16.5" x2="21" y2="21" stroke="#FFFFFF" stroke-width="2"></line>303      </svg>304      Search305    </div>306    <div class="nav-item">307      <svg class="nav-icon" viewBox="0 0 24 24">308        <rect x="3" y="4" width="4" height="16" rx="1.5" fill="#BDBDBD"></rect>309        <rect x="10" y="8" width="4" height="12" rx="1.5" fill="#BDBDBD"></rect>310        <rect x="17" y="12" width="4" height="8" rx="1.5" fill="#BDBDBD"></rect>311      </svg>312      Your Library313    </div>314    <div class="nav-item">315      <svg class="nav-icon" viewBox="0 0 24 24">316        <circle cx="12" cy="12" r="9" fill="none" stroke="#BDBDBD" stroke-width="2"></circle>317        <path d="M7 15c3.5-2.2 6.5-2.2 10 0" stroke="#BDBDBD" stroke-width="2" fill="none" stroke-linecap="round"/>318        <path d="M6 11c4-3 8-3 12 0" stroke="#BDBDBD" stroke-width="2" fill="none" stroke-linecap="round"/>319      </svg>320      Premium321    </div>322  </div>323  <div class="home-indicator"></div>324 325</div>326</body>327</html>