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>Music Search UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #000000; color: #ffffff;13 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;14 }15 16 .status-bar {17 height: 90px;18 padding: 28px 36px 0 36px;19 display: flex;20 align-items: center;21 font-weight: 600;22 font-size: 34px;23 color: #fff;24 opacity: 0.95;25 }26 .status-bar .right { margin-left: auto; display: flex; gap: 22px; align-items: center; }27 28 .toolbar {29 display: flex; align-items: center;30 padding: 24px 36px 8px 36px;31 gap: 20px;32 }33 .search-wrap {34 background: #2A2A2A; border-radius: 36px;35 height: 96px; flex: 1;36 display: flex; align-items: center; padding: 0 26px; gap: 22px;37 color: #cfcfcf;38 }39 .search-text { font-size: 34px; color: #e9e9e9; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }40 .chip-x {41 width: 58px; height: 58px; border-radius: 20px; background: #3A3A3A;42 display: flex; align-items: center; justify-content: center;43 }44 .tool-icon { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; }45 46 .section-title {47 padding: 20px 36px 10px 36px;48 font-size: 46px; font-weight: 800; color: #ffffff;49 }50 51 .list { padding: 10px 24px 0 24px; }52 .item {53 display: flex; gap: 26px; align-items: flex-start;54 padding: 24px 12px; margin: 0 12px;55 border-radius: 16px;56 }57 .thumb, .cover {58 width: 150px; height: 150px;59 background: #E0E0E0; border: 1px solid #BDBDBD;60 display: flex; align-items: center; justify-content: center;61 color: #757575; font-size: 24px; text-align: center;62 }63 .avatar {64 width: 150px; height: 150px; border-radius: 75px;65 background: #E0E0E0; border: 1px solid #BDBDBD;66 display: flex; align-items: center; justify-content: center;67 color: #757575; font-size: 24px; text-align: center;68 }69 .content { flex: 1; }70 .title {71 font-size: 38px; font-weight: 800; color: #ffffff; line-height: 46px;72 }73 .subtitle { font-size: 28px; color: #A9A9A9; margin-top: 6px; }74 .meta-row {75 display: flex; align-items: center; gap: 12px;76 margin-top: 10px; font-size: 26px; color: #FF8C37; font-weight: 600;77 }78 .gray-meta {79 display: flex; align-items: center; gap: 16px;80 margin-top: 10px; font-size: 26px; color: #9E9E9E;81 }82 .dots {83 width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; margin-left: auto;84 }85 86 .verify {87 display: inline-flex; align-items: center; gap: 10px;88 }89 .verify-badge {90 width: 34px; height: 34px; border-radius: 17px; background: #2196F3;91 display: inline-flex; align-items: center; justify-content: center;92 }93 94 .follow-btn {95 background: #ffffff; color: #000; border-radius: 24px;96 padding: 18px 34px; font-weight: 700; font-size: 30px;97 align-self: center; margin-left: 16px;98 }99 100 /* Bottom mini player */101 .mini-player {102 position: absolute; left: 0; right: 0; bottom: 240px;103 height: 190px; background: #141414;104 display: flex; align-items: center; gap: 22px; padding: 0 28px;105 border-top: 1px solid #222;106 }107 .mini-text { display: flex; flex-direction: column; }108 .mini-title { font-size: 34px; font-weight: 800; color: #fff; }109 .mini-sub { font-size: 26px; color: #bdbdbd; }110 .mini-actions { margin-left: auto; display: flex; gap: 28px; align-items: center; }111 112 /* Bottom navigation */113 .bottom-nav {114 position: absolute; left: 0; right: 0; bottom: 60px;115 height: 180px; background: #0C0C0C; border-top: 1px solid #202020;116 display: flex; align-items: center; justify-content: space-around;117 color: #cfcfcf;118 }119 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; }120 .nav-item .label { font-size: 26px; }121 .active .label { color: #ffffff; font-weight: 700; }122 .handle {123 position: absolute; left: 50%; transform: translateX(-50%);124 bottom: 10px; width: 260px; height: 14px; border-radius: 7px; background: #ffffff;125 opacity: 0.92;126 }127 128 /* Small helpers */129 .icon { width: 38px; height: 38px; }130 .icon-lg { width: 64px; height: 64px; }131</style>132</head>133<body>134<div id="render-target">135 136 <!-- Status bar -->137 <div class="status-bar">138 <div>10:35</div>139 <div class="right">140 <svg class="icon" viewBox="0 0 24 24">141 <circle cx="10" cy="10" r="7" stroke="#fff" stroke-width="2" fill="none"></circle>142 <line x1="16" y1="16" x2="22" y2="22" stroke="#fff" stroke-width="2"></line>143 </svg>144 <svg class="icon" viewBox="0 0 24 24">145 <circle cx="12" cy="12" r="10" stroke="#fff" stroke-width="2" fill="none"></circle>146 <rect x="10" y="6" width="4" height="12" fill="#fff"></rect>147 </svg>148 <svg class="icon" viewBox="0 0 24 24">149 <path d="M3 5h18v12H3z" stroke="#fff" stroke-width="2" fill="none"></path>150 <rect x="6" y="8" width="12" height="6" fill="#fff" opacity="0.4"></rect>151 </svg>152 </div>153 </div>154 155 <!-- Toolbar / Search -->156 <div class="toolbar">157 <div class="search-wrap">158 <svg class="icon" viewBox="0 0 24 24">159 <path d="M15 4L6 12l9 8" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>160 </svg>161 <div class="search-text">Real Love Martin Garrix</div>162 <div class="chip-x">163 <svg class="icon" viewBox="0 0 24 24">164 <path d="M6 6l12 12M18 6L6 18" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>165 </svg>166 </div>167 </div>168 <div class="tool-icon">169 <svg class="icon-lg" viewBox="0 0 24 24">170 <rect x="3" y="5" width="18" height="12" rx="2" stroke="#fff" stroke-width="2" fill="none"></rect>171 <path d="M6 17c3 0 5 2 6 4" stroke="#fff" stroke-width="2" fill="none"></path>172 <path d="M6 17c1 0 2 1 3 2" stroke="#fff" stroke-width="2" fill="none" opacity="0.6"></path>173 </svg>174 </div>175 <div class="tool-icon">176 <svg class="icon-lg" viewBox="0 0 24 24">177 <line x1="5" y1="5" x2="5" y2="19" stroke="#fff" stroke-width="2"></line>178 <circle cx="5" cy="9" r="3" fill="#fff"></circle>179 <line x1="12" y1="5" x2="12" y2="19" stroke="#fff" stroke-width="2"></line>180 <circle cx="12" cy="14" r="3" fill="#fff"></circle>181 <line x1="19" y1="5" x2="19" y2="19" stroke="#fff" stroke-width="2"></line>182 <circle cx="19" cy="8" r="3" fill="#fff"></circle>183 </svg>184 </div>185 </div>186 187 <div class="section-title">Top Result</div>188 189 <div class="list">190 <!-- Top Result: Track -->191 <div class="item">192 <div class="cover">[IMG: Real Love Cover]</div>193 <div class="content">194 <div class="title">Martin Garrix & Lloyiso - Real Love</div>195 <div class="subtitle">Martin Garrix</div>196 <div class="meta-row">197 <svg class="icon" viewBox="0 0 24 24">198 <rect x="4" y="8" width="3" height="8" fill="#FF8C37"></rect>199 <rect x="10" y="6" width="3" height="10" fill="#FF8C37"></rect>200 <rect x="16" y="10" width="3" height="6" fill="#FF8C37"></rect>201 </svg>202 <span>Now Playing</span>203 </div>204 </div>205 <div class="dots">206 <svg class="icon" viewBox="0 0 24 24">207 <circle cx="12" cy="5" r="2" fill="#9E9E9E"></circle>208 <circle cx="12" cy="12" r="2" fill="#9E9E9E"></circle>209 <circle cx="12" cy="19" r="2" fill="#9E9E9E"></circle>210 </svg>211 </div>212 </div>213 214 <!-- Artist card -->215 <div class="item">216 <div class="avatar">[IMG: Artist Avatar]</div>217 <div class="content">218 <div class="title verify">219 <span>Martin Garrix</span>220 <span class="verify-badge">221 <svg viewBox="0 0 24 24" width="22" height="22">222 <path d="M6 12l4 4 8-8" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round"></path>223 </svg>224 </span>225 </div>226 <div class="subtitle">Netherlands</div>227 <div class="gray-meta">228 <svg class="icon" viewBox="0 0 24 24">229 <circle cx="12" cy="8" r="4" stroke="#9E9E9E" stroke-width="2" fill="none"></circle>230 <path d="M4 20c2-4 14-4 16 0" stroke="#9E9E9E" stroke-width="2" fill="none"></path>231 </svg>232 <span>2M Followers</span>233 </div>234 </div>235 <div class="follow-btn">Follow</div>236 </div>237 238 <!-- Result items -->239 <div class="item">240 <div class="thumb">[IMG: Real Love Cover]</div>241 <div class="content">242 <div class="title">Martin Garrix & Lloyiso - Real Love (…)</div>243 <div class="subtitle">33 BELOW</div>244 <div class="gray-meta">245 <svg class="icon" viewBox="0 0 24 24">246 <polygon points="6,4 20,12 6,20" fill="#9E9E9E"></polygon>247 </svg>248 <span>11.3K · 3:05</span>249 </div>250 </div>251 <div class="dots">252 <svg class="icon" viewBox="0 0 24 24">253 <circle cx="12" cy="5" r="2" fill="#9E9E9E"></circle>254 <circle cx="12" cy="12" r="2" fill="#9E9E9E"></circle>255 <circle cx="12" cy="19" r="2" fill="#9E9E9E"></circle>256 </svg>257 </div>258 </div>259 260 <div class="item">261 <div class="thumb">[IMG: Remix Cover]</div>262 <div class="content">263 <div class="title">Martin Garrix & Lloyiso - Real Love (J…)</div>264 <div class="subtitle">Best House Remixes</div>265 <div class="gray-meta">266 <svg class="icon" viewBox="0 0 24 24">267 <polygon points="6,4 20,12 6,20" fill="#9E9E9E"></polygon>268 </svg>269 <span>1.5K · 4:03</span>270 </div>271 </div>272 <div class="dots">273 <svg class="icon" viewBox="0 0 24 24">274 <circle cx="12" cy="5" r="2" fill="#9E9E9E"></circle>275 <circle cx="12" cy="12" r="2" fill="#9E9E9E"></circle>276 <circle cx="12" cy="19" r="2" fill="#9E9E9E"></circle>277 </svg>278 </div>279 </div>280 281 <div class="item">282 <div class="thumb">[IMG: Real Love Cover]</div>283 <div class="content">284 <div class="title">Martin Garrix & Lloyiso - Real Love (j…)</div>285 <div class="subtitle">jeonghyeon Extras</div>286 <div class="gray-meta">287 <svg class="icon" viewBox="0 0 24 24">288 <polygon points="6,4 20,12 6,20" fill="#9E9E9E"></polygon>289 </svg>290 <span>11.4K · 4:03</span>291 </div>292 </div>293 <div class="dots">294 <svg class="icon" viewBox="0 0 24 24">295 <circle cx="12" cy="5" r="2" fill="#9E9E9E"></circle>296 <circle cx="12" cy="12" r="2" fill="#9E9E9E"></circle>297 <circle cx="12" cy="19" r="2" fill="#9E9E9E"></circle>298 </svg>299 </div>300 </div>301 302 <div class="item">303 <div class="thumb">[IMG: Real Love Cover]</div>304 <div class="content">305 <div class="title">Martin Garrix - Real Love (KDH & Se…)</div>306 <div class="subtitle">KDH</div>307 <div class="gray-meta">308 <svg class="icon" viewBox="0 0 24 24">309 <polygon points="6,4 20,12 6,20" fill="#9E9E9E"></polygon>310 </svg>311 <span>5.8K · 3:20</span>312 </div>313 </div>314 <div class="dots">315 <svg class="icon" viewBox="0 0 24 24">316 <circle cx="12" cy="5" r="2" fill="#9E9E9E"></circle>317 <circle cx="12" cy="12" r="2" fill="#9E9E9E"></circle>318 <circle cx="12" cy="19" r="2" fill="#9E9E9E"></circle>319 </svg>320 </div>321 </div>322 323 <div class="item">324 <div class="thumb" style="background:#CBE1F6;border-color:#9CC4E8;color:#4C6A85">[IMG: Blue Cover]</div>325 <div class="content">326 <div class="title">Martin Garrix & Bebe Rexha - In The …</div>327 <div class="subtitle">Martin Garrix</div>328 <div class="gray-meta">329 <svg class="icon" viewBox="0 0 24 24">330 <polygon points="6,4 20,12 6,20" fill="#9E9E9E"></polygon>331 </svg>332 <span>89.3M · 3:18</span>333 </div>334 </div>335 <div class="dots">336 <svg class="icon" viewBox="0 0 24 24">337 <circle cx="12" cy="5" r="2" fill="#9E9E9E"></circle>338 <circle cx="12" cy="12" r="2" fill="#9E9E9E"></circle>339 <circle cx="12" cy="19" r="2" fill="#9E9E9E"></circle>340 </svg>341 </div>342 </div>343 344 <div class="item">345 <div class="thumb">[IMG: Real Love Cover]</div>346 <div class="content">347 <div class="title">Martin Garrix & Lloyiso - Real Love (…)</div>348 <div class="subtitle">K…</div>349 <div class="gray-meta">350 <svg class="icon" viewBox="0 0 24 24">351 <polygon points="6,4 20,12 6,20" fill="#9E9E9E"></polygon>352 </svg>353 <span>— · —</span>354 </div>355 </div>356 <div class="dots">357 <svg class="icon" viewBox="0 0 24 24">358 <circle cx="12" cy="5" r="2" fill="#9E9E9E"></circle>359 <circle cx="12" cy="12" r="2" fill="#9E9E9E"></circle>360 <circle cx="12" cy="19" r="2" fill="#9E9E9E"></circle>361 </svg>362 </div>363 </div>364 </div>365 366 <!-- Mini Player -->367 <div class="mini-player">368 <svg class="icon-lg" viewBox="0 0 24 24">369 <rect x="6" y="4" width="4" height="16" fill="#fff"></rect>370 <rect x="14" y="4" width="4" height="16" fill="#fff"></rect>371 </svg>372 <div class="mini-text">373 <div class="mini-title">Martin Garrix & Lloyiso - Real Love</div>374 <div class="mini-sub">Martin Garrix</div>375 </div>376 <div class="mini-actions">377 <svg class="icon-lg" viewBox="0 0 24 24">378 <circle cx="12" cy="8" r="4" stroke="#cfcfcf" stroke-width="2" fill="none"></circle>379 <path d="M4 20c2-4 14-4 16 0" stroke="#cfcfcf" stroke-width="2" fill="none"></path>380 <path d="M18 8h4v4h-4" stroke="#cfcfcf" stroke-width="2" fill="none"></path>381 </svg>382 <svg class="icon-lg" viewBox="0 0 24 24">383 <path d="M12 21s-7-4.35-7-9a4 4 0 018 0 4 4 0 018 0c0 4.65-7 9-7 9z" stroke="#cfcfcf" stroke-width="2" fill="none"></path>384 </svg>385 <svg class="icon-lg" viewBox="0 0 24 24">386 <circle cx="12" cy="12" r="10" stroke="#cfcfcf" stroke-width="2" fill="none"></circle>387 <path d="M8 12h8" stroke="#cfcfcf" stroke-width="2"></path>388 </svg>389 </div>390 </div>391 392 <!-- Bottom Navigation -->393 <div class="bottom-nav">394 <div class="nav-item">395 <svg class="icon-lg" viewBox="0 0 24 24">396 <path d="M3 12l9-8 9 8v8H3z" stroke="#cfcfcf" stroke-width="2" fill="none"></path>397 </svg>398 <div class="label">Home</div>399 </div>400 <div class="nav-item">401 <svg class="icon-lg" viewBox="0 0 24 24">402 <rect x="4" y="4" width="6" height="6" fill="#cfcfcf"></rect>403 <rect x="14" y="4" width="6" height="6" fill="#cfcfcf" opacity="0.6"></rect>404 <rect x="4" y="14" width="6" height="6" fill="#cfcfcf" opacity="0.6"></rect>405 <rect x="14" y="14" width="6" height="6" fill="#cfcfcf"></rect>406 </svg>407 <div class="label">Feed</div>408 </div>409 <div class="nav-item active">410 <svg class="icon-lg" viewBox="0 0 24 24">411 <circle cx="10" cy="10" r="7" stroke="#fff" stroke-width="2" fill="none"></circle>412 <line x1="16" y1="16" x2="22" y2="22" stroke="#fff" stroke-width="2"></line>413 </svg>414 <div class="label">Search</div>415 </div>416 <div class="nav-item">417 <svg class="icon-lg" viewBox="0 0 24 24">418 <path d="M5 4h14v4H5z" stroke="#cfcfcf" stroke-width="2" fill="none"></path>419 <path d="M5 12h14v8H5z" stroke="#cfcfcf" stroke-width="2" fill="none"></path>420 </svg>421 <div class="label">Library</div>422 </div>423 <div class="nav-item">424 <svg class="icon-lg" viewBox="0 0 24 24">425 <path d="M12 3l4 8H8l4-8z" fill="#cfcfcf"></path>426 <rect x="6" y="12" width="12" height="9" stroke="#cfcfcf" stroke-width="2" fill="none"></rect>427 </svg>428 <div class="label">Upgrade</div>429 </div>430 </div>431 432 <div class="handle"></div>433</div>434</body>435</html>