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 - Music App</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #000;15 color: #fff;16 }17 18 /* Status bar */19 .status-bar {20 height: 96px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 padding: 0 32px;25 font-size: 34px;26 letter-spacing: 0.5px;27 color: #fff;28 }29 .status-right {30 display: flex;31 align-items: center;32 gap: 24px;33 }34 .icon {35 width: 36px;36 height: 36px;37 }38 39 /* Search header */40 .search-header {41 display: flex;42 align-items: center;43 padding: 16px 32px 8px 32px;44 gap: 24px;45 }46 .back-btn {47 width: 64px;48 height: 64px;49 border-radius: 32px;50 display: flex;51 align-items: center;52 justify-content: center;53 }54 .search-field {55 flex: 1;56 height: 88px;57 background: #2B2B2B;58 border-radius: 22px;59 display: flex;60 align-items: center;61 padding: 0 24px;62 gap: 16px;63 }64 .search-text {65 flex: 1;66 font-size: 34px;67 color: #fff;68 opacity: 0.95;69 }70 .tool-icons {71 display: flex;72 align-items: center;73 gap: 28px;74 margin-left: 8px;75 }76 77 /* Section */78 .section-title {79 font-size: 48px;80 font-weight: 700;81 padding: 16px 32px;82 }83 84 /* Top result card */85 .top-result {86 display: flex;87 align-items: center;88 padding: 12px 32px 28px 32px;89 gap: 28px;90 }91 .avatar {92 width: 150px;93 height: 150px;94 border-radius: 75px;95 background: #E0E0E0;96 border: 1px solid #BDBDBD;97 display: flex;98 align-items: center;99 justify-content: center;100 color: #757575;101 font-size: 22px;102 text-align: center;103 }104 .artist-info {105 flex: 1;106 display: flex;107 flex-direction: column;108 gap: 8px;109 }110 .artist-name-row {111 display: flex;112 align-items: center;113 gap: 10px;114 }115 .artist-name {116 font-size: 40px;117 font-weight: 700;118 }119 .verified {120 width: 26px;121 height: 26px;122 border-radius: 13px;123 background: #1DA1F2;124 display: inline-flex;125 align-items: center;126 justify-content: center;127 }128 .subtext {129 font-size: 28px;130 color: #AFAFAF;131 }132 .followers {133 font-size: 26px;134 color: #C7C7C7;135 }136 .follow-btn {137 background: #fff;138 color: #000;139 border-radius: 18px;140 padding: 18px 32px;141 font-weight: 600;142 font-size: 30px;143 }144 145 /* Track list */146 .list {147 padding-bottom: 220px; /* space above bottom nav */148 }149 .track-item {150 display: flex;151 align-items: center;152 padding: 22px 32px;153 gap: 24px;154 }155 .thumb {156 width: 120px;157 height: 120px;158 background: #E0E0E0;159 border: 1px solid #BDBDBD;160 display: flex;161 align-items: center;162 justify-content: center;163 color: #757575;164 font-size: 22px;165 text-align: center;166 }167 .track-info {168 flex: 1;169 display: flex;170 flex-direction: column;171 gap: 6px;172 }173 .track-title {174 font-size: 36px;175 font-weight: 700;176 color: #fff;177 }178 .track-artist {179 font-size: 28px;180 color: #AFAFAF;181 }182 .meta {183 display: flex;184 align-items: center;185 gap: 10px;186 color: #BDBDBD;187 font-size: 26px;188 }189 .more-btn {190 width: 40px;191 height: 40px;192 display: flex;193 align-items: center;194 justify-content: center;195 }196 197 /* Bottom navigation */198 .bottom-nav {199 position: absolute;200 left: 0;201 right: 0;202 bottom: 86px;203 height: 160px;204 background: #222;205 display: flex;206 align-items: center;207 justify-content: space-around;208 border-top: 1px solid #2F2F2F;209 }210 .nav-item {211 display: flex;212 flex-direction: column;213 align-items: center;214 gap: 10px;215 color: #D9D9D9;216 font-size: 26px;217 }218 .nav-item.active {219 color: #fff;220 }221 .home-indicator {222 position: absolute;223 bottom: 30px;224 left: 50%;225 transform: translateX(-50%);226 width: 220px;227 height: 10px;228 background: #fff;229 opacity: 0.85;230 border-radius: 6px;231 }232</style>233</head>234<body>235<div id="render-target">236 237 <!-- Status Bar -->238 <div class="status-bar">239 <div>10:33</div>240 <div class="status-right">241 <!-- simple status icons -->242 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"/></svg>243 <svg class="icon" viewBox="0 0 24 24"><path d="M5 8h14M5 12h10M5 16h6" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>244 <svg class="icon" viewBox="0 0 24 24"><rect x="6" y="5" width="12" height="14" rx="2" stroke="#fff" stroke-width="2" fill="none"/><path d="M12 3v4" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>245 </div>246 </div>247 248 <!-- Search Header -->249 <div class="search-header">250 <div class="back-btn">251 <svg class="icon" viewBox="0 0 24 24">252 <path d="M15 6l-6 6 6 6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>253 </svg>254 </div>255 <div class="search-field">256 <div class="search-text">Martin Garrix</div>257 <svg class="icon" viewBox="0 0 24 24">258 <path d="M6 6l12 12M18 6l-12 12" stroke="#fff" stroke-width="2" stroke-linecap="round"/>259 </svg>260 </div>261 <div class="tool-icons">262 <!-- Cast icon -->263 <svg class="icon" viewBox="0 0 24 24">264 <rect x="3" y="5" width="18" height="14" rx="2" stroke="#fff" stroke-width="2" fill="none"/>265 <path d="M3 17c2 0 3 1 4 2M3 13c3 0 5 2 6 3" stroke="#fff" stroke-width="2" stroke-linecap="round"/>266 </svg>267 <!-- Sliders icon -->268 <svg class="icon" viewBox="0 0 24 24">269 <path d="M6 4v12M6 10h4M14 4v16M14 14h4M20 6v12M20 8h-4" stroke="#fff" stroke-width="2" stroke-linecap="round"/>270 </svg>271 </div>272 </div>273 274 <!-- Section Title -->275 <div class="section-title">Top Result</div>276 277 <!-- Top Result Card -->278 <div class="top-result">279 <div class="avatar">[IMG: Artist Avatar]</div>280 <div class="artist-info">281 <div class="artist-name-row">282 <div class="artist-name">Martin Garrix</div>283 <div class="verified">284 <svg viewBox="0 0 24 24" width="18" height="18">285 <path d="M6 12l3 3 9-9" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>286 </svg>287 </div>288 </div>289 <div class="subtext">Netherlands</div>290 <div class="followers">2M Followers</div>291 </div>292 <div class="follow-btn">Follow</div>293 </div>294 295 <!-- Track List -->296 <div class="list">297 <!-- Item 1 -->298 <div class="track-item">299 <div class="thumb">[IMG: Album Cover - Real Love]</div>300 <div class="track-info">301 <div class="track-title">Martin Garrix & Lloyiso - Real Love</div>302 <div class="track-artist">Martin Garrix</div>303 <div class="meta">304 <svg viewBox="0 0 24 24" width="24" height="24"><path d="M6 4l12 8-12 8z" fill="#BDBDBD"/></svg>305 <span>71.3K · 2:43</span>306 </div>307 </div>308 <div class="more-btn">309 <svg viewBox="0 0 24 24" width="24" height="24">310 <circle cx="12" cy="5" r="2" fill="#D0D0D0"/><circle cx="12" cy="12" r="2" fill="#D0D0D0"/><circle cx="12" cy="19" r="2" fill="#D0D0D0"/>311 </svg>312 </div>313 </div>314 315 <!-- Item 2 -->316 <div class="track-item">317 <div class="thumb">[IMG: Album Cover - Animals]</div>318 <div class="track-info">319 <div class="track-title">Martin Garrix - Animals (Original Mix)...</div>320 <div class="track-artist">Martin Garrix</div>321 <div class="meta">322 <svg viewBox="0 0 24 24" width="24" height="24"><path d="M6 4l12 8-12 8z" fill="#BDBDBD"/></svg>323 <span>73.8M · 5:04</span>324 </div>325 </div>326 <div class="more-btn">327 <svg viewBox="0 0 24 24" width="24" height="24">328 <circle cx="12" cy="5" r="2" fill="#D0D0D0"/><circle cx="12" cy="12" r="2" fill="#D0D0D0"/><circle cx="12" cy="19" r="2" fill="#D0D0D0"/>329 </svg>330 </div>331 </div>332 333 <!-- Item 3 -->334 <div class="track-item">335 <div class="thumb">[IMG: Album Cover - In The Name Of Love]</div>336 <div class="track-info">337 <div class="track-title">Martin Garrix & Bebe Rexha - In The ...</div>338 <div class="track-artist">Martin Garrix</div>339 <div class="meta">340 <svg viewBox="0 0 24 24" width="24" height="24"><path d="M6 4l12 8-12 8z" fill="#BDBDBD"/></svg>341 <span>89.3M · 3:18</span>342 </div>343 </div>344 <div class="more-btn">345 <svg viewBox="0 0 24 24" width="24" height="24">346 <circle cx="12" cy="5" r="2" fill="#D0D0D0"/><circle cx="12" cy="12" r="2" fill="#D0D0D0"/><circle cx="12" cy="19" r="2" fill="#D0D0D0"/>347 </svg>348 </div>349 </div>350 351 <!-- Item 4 -->352 <div class="track-item">353 <div class="thumb">[IMG: Album Cover - Scared To Be Lonely]</div>354 <div class="track-info">355 <div class="track-title">Martin Garrix & Dua Lipa - Scared To ...</div>356 <div class="track-artist">Martin Garrix</div>357 <div class="meta">358 <svg viewBox="0 0 24 24" width="24" height="24"><path d="M6 4l12 8-12 8z" fill="#BDBDBD"/></svg>359 <span>35.3M · 3:40</span>360 </div>361 </div>362 <div class="more-btn">363 <svg viewBox="0 0 24 24" width="24" height="24">364 <circle cx="12" cy="5" r="2" fill="#D0D0D0"/><circle cx="12" cy="12" r="2" fill="#D0D0D0"/><circle cx="12" cy="19" r="2" fill="#D0D0D0"/>365 </svg>366 </div>367 </div>368 369 <!-- Item 5 -->370 <div class="track-item">371 <div class="thumb">[IMG: Album Cover - So Far Away]</div>372 <div class="track-info">373 <div class="track-title">Martin Garrix & David Guetta - So Far...</div>374 <div class="track-artist">Martin Garrix</div>375 <div class="meta">376 <svg viewBox="0 0 24 24" width="24" height="24"><path d="M6 4l12 8-12 8z" fill="#BDBDBD"/></svg>377 <span>3:03</span>378 </div>379 </div>380 <div class="more-btn">381 <svg viewBox="0 0 24 24" width="24" height="24">382 <circle cx="12" cy="5" r="2" fill="#D0D0D0"/><circle cx="12" cy="12" r="2" fill="#D0D0D0"/><circle cx="12" cy="19" r="2" fill="#D0D0D0"/>383 </svg>384 </div>385 </div>386 387 <!-- Item 6 -->388 <div class="track-item">389 <div class="thumb">[IMG: Album Cover - Can't Feel My Face]</div>390 <div class="track-info">391 <div class="track-title">The Weeknd - Can't Feel My Face (M...</div>392 <div class="track-artist">Martin Garrix</div>393 <div class="meta">394 <svg viewBox="0 0 24 24" width="24" height="24"><path d="M6 4l12 8-12 8z" fill="#BDBDBD"/></svg>395 <span>40.8M · 4:13</span>396 </div>397 </div>398 <div class="more-btn">399 <svg viewBox="0 0 24 24" width="24" height="24">400 <circle cx="12" cy="5" r="2" fill="#D0D0D0"/><circle cx="12" cy="12" r="2" fill="#D0D0D0"/><circle cx="12" cy="19" r="2" fill="#D0D0D0"/>401 </svg>402 </div>403 </div>404 405 <!-- Item 7 -->406 <div class="track-item">407 <div class="thumb">[IMG: Album Cover - High On Life]</div>408 <div class="track-info">409 <div class="track-title">Martin Garrix feat. Bonn - High On Li...</div>410 <div class="track-artist">Martin Garrix</div>411 <div class="meta">412 <svg viewBox="0 0 24 24" width="24" height="24"><path d="M6 4l12 8-12 8z" fill="#BDBDBD"/></svg>413 <span>6.7M · 3:50</span>414 </div>415 </div>416 <div class="more-btn">417 <svg viewBox="0 0 24 24" width="24" height="24">418 <circle cx="12" cy="5" r="2" fill="#D0D0D0"/><circle cx="12" cy="12" r="2" fill="#D0D0D0"/><circle cx="12" cy="19" r="2" fill="#D0D0D0"/>419 </svg>420 </div>421 </div>422 </div>423 424 <!-- Bottom Navigation -->425 <div class="bottom-nav">426 <div class="nav-item">427 <svg viewBox="0 0 24 24" width="36" height="36">428 <path d="M3 11l9-7 9 7v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" stroke="#D9D9D9" stroke-width="2" fill="none" stroke-linejoin="round"/>429 </svg>430 <div>Home</div>431 </div>432 <div class="nav-item">433 <svg viewBox="0 0 24 24" width="36" height="36">434 <rect x="4" y="6" width="16" height="12" rx="2" stroke="#D9D9D9" stroke-width="2" fill="none"/>435 <path d="M8 10h8M8 14h5" stroke="#D9D9D9" stroke-width="2" stroke-linecap="round"/>436 </svg>437 <div>Feed</div>438 </div>439 <div class="nav-item active">440 <svg viewBox="0 0 24 24" width="36" height="36">441 <circle cx="11" cy="11" r="7" stroke="#fff" stroke-width="2" fill="none"/>442 <path d="M20 20l-4-4" stroke="#fff" stroke-width="2" stroke-linecap="round"/>443 </svg>444 <div>Search</div>445 </div>446 <div class="nav-item">447 <svg viewBox="0 0 24 24" width="36" height="36">448 <path d="M5 5h6v14H5zM13 9h6v10h-6z" stroke="#D9D9D9" stroke-width="2" fill="none"/>449 </svg>450 <div>Library</div>451 </div>452 <div class="nav-item">453 <svg viewBox="0 0 24 24" width="36" height="36">454 <path d="M6 16a6 6 0 1 1 11.5-2H20a4 4 0 0 1 0 8H7a3 3 0 0 1-1-6z" stroke="#D9D9D9" stroke-width="2" fill="none" stroke-linecap="round"/>455 <path d="M12 13v5" stroke="#D9D9D9" stroke-width="2" stroke-linecap="round"/>456 <path d="M10 16h4" stroke="#D9D9D9" stroke-width="2" stroke-linecap="round"/>457 </svg>458 <div>Upgrade</div>459 </div>460 </div>461 462 <div class="home-indicator"></div>463</div>464</body>465</html>