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 Results</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 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #000;15 color: #fff;16 }17 18 /* Status bar */19 .status-bar {20 height: 110px;21 padding: 0 36px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #fff;26 font-size: 42px;27 letter-spacing: 0.5px;28 }29 .status-left { display: flex; align-items: center; gap: 18px; }30 .status-right { display: flex; align-items: center; gap: 24px; opacity: 0.9; }31 32 /* Header/search area */33 .search-header {34 padding: 12px 24px 8px 24px;35 display: flex;36 align-items: center;37 gap: 18px;38 }39 .back-btn {40 width: 84px;41 height: 84px;42 border-radius: 18px;43 display: flex; align-items: center; justify-content: center;44 background: rgba(255,255,255,0.06);45 }46 .search-pill {47 flex: 1;48 height: 84px;49 border-radius: 42px;50 background: rgba(255,255,255,0.12);51 display: flex;52 align-items: center;53 padding: 0 28px;54 gap: 16px;55 }56 .search-pill .text {57 font-size: 40px;58 color: #EDEDED;59 white-space: nowrap;60 overflow: hidden;61 text-overflow: ellipsis;62 }63 .header-actions {64 display: flex; align-items: center; gap: 22px;65 padding-left: 6px;66 }67 .icon-btn {68 width: 84px; height: 84px; border-radius: 18px;69 display: flex; align-items: center; justify-content: center;70 }71 72 /* Section title */73 .section-title {74 font-size: 54px;75 font-weight: 700;76 padding: 24px 32px 8px 32px;77 }78 79 /* Result cards */80 .result-row {81 display: flex;82 align-items: center;83 padding: 18px 24px;84 gap: 24px;85 }86 .art-square {87 width: 160px; height: 160px;88 background: #E0E0E0;89 border: 1px solid #BDBDBD;90 color: #757575;91 display: flex; align-items: center; justify-content: center;92 font-size: 28px; text-align: center;93 }94 .art-circle {95 width: 160px; height: 160px; border-radius: 50%;96 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;97 display: flex; align-items: center; justify-content: center; font-size: 28px; text-align: center;98 }99 .result-content {100 flex: 1;101 min-width: 0;102 }103 .title {104 font-size: 44px;105 font-weight: 700;106 color: #fff;107 line-height: 1.2;108 margin-bottom: 6px;109 }110 .subtitle {111 font-size: 32px;112 color: #BBBBBB;113 margin-bottom: 8px;114 }115 .meta {116 display: flex; align-items: center; gap: 12px;117 font-size: 28px; color: #A9A9A9;118 }119 .options {120 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;121 }122 123 /* Artist row special (with button) */124 .artist-row .title {125 display: inline-flex; align-items: center; gap: 10px;126 }127 .follow-btn {128 background: #fff; color: #000;129 padding: 16px 32px; font-size: 34px; font-weight: 600;130 border-radius: 20px;131 }132 .followers {133 display: flex; align-items: center; gap: 12px; font-size: 28px; color: #A9A9A9;134 margin-top: 6px;135 }136 137 /* Track list items */138 .track-row {139 display: flex; align-items: center;140 gap: 24px; padding: 20px 24px;141 }142 .track-art {143 width: 132px; height: 132px; background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;144 display: flex; align-items: center; justify-content: center; font-size: 26px; text-align: center;145 }146 .track-title {147 font-size: 38px; color: #fff; font-weight: 600; line-height: 1.25;148 }149 .track-sub {150 font-size: 28px; color: #B5B5B5; margin-top: 4px;151 }152 .list {153 padding-bottom: 220px; /* space for bottom nav and home indicator */154 }155 156 /* Bottom navigation */157 .bottom-nav {158 position: absolute; left: 0; right: 0; bottom: 90px;159 height: 140px; background: #1A1A1A; border-top: 1px solid #2A2A2A;160 display: flex; align-items: center; justify-content: space-around;161 }162 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #CCCCCC; font-size: 28px; }163 .nav-item.active { color: #fff; }164 .home-indicator {165 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);166 width: 360px; height: 12px; background: #D9D9D9; border-radius: 8px; opacity: 0.9;167 }168 169 /* Utility */170 .spacer-8 { height: 8px; }171</style>172</head>173<body>174<div id="render-target">175 176 <!-- Status Bar -->177 <div class="status-bar">178 <div class="status-left">179 <div>10:35</div>180 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">181 <circle cx="10" cy="10" r="7" stroke="white" stroke-width="2" fill="none"></circle>182 <line x1="15" y1="15" x2="22" y2="22" stroke="white" stroke-width="2"></line>183 </svg>184 </div>185 <div class="status-right">186 <!-- simple status glyphs -->187 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="2"/></svg>188 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">189 <path d="M2 8h20M6 12h12M10 16h4"/>190 </svg>191 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">192 <path d="M6 18h12"/><path d="M18 18V6a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v12" />193 </svg>194 </div>195 </div>196 197 <!-- Search Header -->198 <div class="search-header">199 <div class="back-btn">200 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">201 <path d="M15 18l-6-6 6-6"/>202 </svg>203 </div>204 205 <div class="search-pill">206 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#E7E7E7" stroke-width="2">207 <circle cx="10" cy="10" r="7"/><line x1="15" y1="15" x2="22" y2="22"/>208 </svg>209 <div class="text">Real Love Martin Garrix</div>210 <div style="margin-left:auto; display:flex; align-items:center;">211 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#E7E7E7" stroke-width="2">212 <line x1="6" y1="6" x2="18" y2="18"/><line x1="6" y1="18" x2="18" y2="6"/>213 </svg>214 </div>215 </div>216 217 <div class="header-actions">218 <div class="icon-btn">219 <!-- Cast icon -->220 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">221 <path d="M3 5h18v12H11"/><path d="M3 17a3 3 0 0 1 3 3"/><path d="M3 13a7 7 0 0 1 7 7"/>222 </svg>223 </div>224 <div class="icon-btn">225 <!-- Sliders icon -->226 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">227 <line x1="4" y1="6" x2="20" y2="6"/><circle cx="12" cy="6" r="2"/>228 <line x1="4" y1="12" x2="20" y2="12"/><circle cx="8" cy="12" r="2"/>229 <line x1="4" y1="18" x2="20" y2="18"/><circle cx="16" cy="18" r="2"/>230 </svg>231 </div>232 </div>233 </div>234 235 <!-- Section: Top Result -->236 <div class="section-title">Top Result</div>237 238 <!-- Top result song -->239 <div class="result-row" style="padding-top:8px;">240 <div class="art-square">[IMG: REAL LOVE Cover]</div>241 <div class="result-content">242 <div class="title">Martin Garrix & Lloyiso - Real Love</div>243 <div class="subtitle">Martin Garrix</div>244 <div class="meta">245 <svg width="28" height="28" viewBox="0 0 24 24" fill="#A9A9A9" aria-hidden="true">246 <path d="M8 5v14l11-7z"></path>247 </svg>248 <span>71.3K · 2:43</span>249 </div>250 </div>251 <div class="options">252 <svg width="32" height="32" viewBox="0 0 24 24" fill="#BDBDBD">253 <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>254 </svg>255 </div>256 </div>257 258 <!-- Artist card -->259 <div class="result-row artist-row">260 <div class="art-circle">[IMG: Artist Avatar]</div>261 <div class="result-content">262 <div class="title">263 <span>Martin Garrix</span>264 <svg width="32" height="32" viewBox="0 0 24 24">265 <circle cx="12" cy="12" r="10" fill="#1DA1F2"></circle>266 <path d="M7 12l3 3 7-7" stroke="#fff" stroke-width="2" fill="none"/>267 </svg>268 </div>269 <div class="subtitle">Netherlands</div>270 <div class="followers">271 <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#A9A9A9" stroke-width="2">272 <circle cx="12" cy="8" r="3"></circle>273 <path d="M4 20c1.5-4 14.5-4 16 0"></path>274 </svg>275 <span>2M Followers</span>276 </div>277 </div>278 <div class="follow-btn">Follow</div>279 </div>280 281 <!-- Track list -->282 <div class="list">283 <div class="track-row">284 <div class="track-art">[IMG: REAL LOVE Cover]</div>285 <div class="result-content">286 <div class="track-title">Martin Garrix & Lloyiso - Real Love (…</div>287 <div class="track-sub">33 BELOW</div>288 <div class="meta" style="margin-top:6px;">289 <svg width="26" height="26" viewBox="0 0 24 24" fill="#A9A9A9"><path d="M8 5v14l11-7z"></path></svg>290 <span>11.3K · 3:05</span>291 </div>292 </div>293 <div class="options">294 <svg width="32" height="32" viewBox="0 0 24 24" fill="#BDBDBD">295 <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>296 </svg>297 </div>298 </div>299 300 <div class="track-row">301 <div class="track-art">[IMG: Artist Portrait]</div>302 <div class="result-content">303 <div class="track-title">Martin Garrix & Lloyiso - Real Love (J…</div>304 <div class="track-sub">Best House Remixes</div>305 <div class="meta" style="margin-top:6px;">306 <svg width="26" height="26" viewBox="0 0 24 24" fill="#A9A9A9"><path d="M8 5v14l11-7z"></path></svg>307 <span>1.5K · 4:03</span>308 </div>309 </div>310 <div class="options">311 <svg width="32" height="32" viewBox="0 0 24 24" fill="#BDBDBD">312 <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>313 </svg>314 </div>315 </div>316 317 <div class="track-row">318 <div class="track-art">[IMG: REAL LOVE Cover]</div>319 <div class="result-content">320 <div class="track-title">Martin Garrix & Lloyiso - Real Love (J…</div>321 <div class="track-sub">jeonghyeon Extras</div>322 <div class="meta" style="margin-top:6px;">323 <svg width="26" height="26" viewBox="0 0 24 24" fill="#A9A9A9"><path d="M8 5v14l11-7z"></path></svg>324 <span>11.4K · 4:03</span>325 </div>326 </div>327 <div class="options">328 <svg width="32" height="32" viewBox="0 0 24 24" fill="#BDBDBD">329 <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>330 </svg>331 </div>332 </div>333 334 <div class="track-row">335 <div class="track-art">[IMG: REAL LOVE Cover]</div>336 <div class="result-content">337 <div class="track-title">Martin Garrix - Real Love (KDH & Se…</div>338 <div class="track-sub">KDH</div>339 <div class="meta" style="margin-top:6px;">340 <svg width="26" height="26" viewBox="0 0 24 24" fill="#A9A9A9"><path d="M8 5v14l11-7z"></path></svg>341 <span>5.8K · 3:20</span>342 </div>343 </div>344 <div class="options">345 <svg width="32" height="32" viewBox="0 0 24 24" fill="#BDBDBD">346 <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>347 </svg>348 </div>349 </div>350 351 <div class="track-row">352 <div class="track-art">[IMG: Blue Single Art]</div>353 <div class="result-content">354 <div class="track-title">Martin Garrix & Bebe Rexha - In The …</div>355 <div class="track-sub">Martin Garrix</div>356 <div class="meta" style="margin-top:6px;">357 <svg width="26" height="26" viewBox="0 0 24 24" fill="#A9A9A9"><path d="M8 5v14l11-7z"></path></svg>358 <span>89.3M · 3:18</span>359 </div>360 </div>361 <div class="options">362 <svg width="32" height="32" viewBox="0 0 24 24" fill="#BDBDBD">363 <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>364 </svg>365 </div>366 </div>367 368 <div class="track-row">369 <div class="track-art">[IMG: REAL LOVE Cover]</div>370 <div class="result-content">371 <div class="track-title">Martin Garrix & Lloyiso - Real Love (…</div>372 <div class="track-sub">Kajacks</div>373 <div class="meta" style="margin-top:6px;">374 <svg width="26" height="26" viewBox="0 0 24 24" fill="#A9A9A9"><path d="M8 5v14l11-7z"></path></svg>375 <span>3.2K · 3:31</span>376 </div>377 </div>378 <div class="options">379 <svg width="32" height="32" viewBox="0 0 24 24" fill="#BDBDBD">380 <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>381 </svg>382 </div>383 </div>384 </div>385 386 <!-- Bottom Navigation -->387 <div class="bottom-nav">388 <div class="nav-item">389 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#CCCCCC" stroke-width="2">390 <path d="M3 10l9-7 9 7v7a2 2 0 0 1-2 2h-4v-6H9v6H5a2 2 0 0 1-2-2z"/>391 </svg>392 <div>Home</div>393 </div>394 <div class="nav-item">395 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#CCCCCC" stroke-width="2">396 <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/>397 <rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/>398 </svg>399 <div>Feed</div>400 </div>401 <div class="nav-item active">402 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">403 <circle cx="11" cy="11" r="7"/><line x1="17" y1="17" x2="22" y2="22"/>404 </svg>405 <div>Search</div>406 </div>407 <div class="nav-item">408 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#CCCCCC" stroke-width="2">409 <path d="M4 4h6v16H4zM14 4h6v16h-6z"/>410 </svg>411 <div>Library</div>412 </div>413 <div class="nav-item">414 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#CCCCCC" stroke-width="2">415 <path d="M6 20V8M12 20V4M18 20v-6"/>416 </svg>417 <div>Upgrade</div>418 </div>419 </div>420 421 <div class="home-indicator"></div>422</div>423</body>424</html>