GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Artist Profile - Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #0f0f0f;15 color: #fff;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0;22 left: 0;23 height: 96px;24 width: 100%;25 padding: 0 36px;26 display: flex;27 align-items: center;28 justify-content: space-between;29 color: #fff;30 z-index: 5;31 }32 .status-left { display: flex; align-items: center; gap: 18px; font-weight: 600; font-size: 34px; }33 .status-right { display: flex; align-items: center; gap: 28px; }34 35 /* Header / hero */36 .hero {37 position: relative;38 width: 100%;39 height: 950px;40 overflow: hidden;41 background: #111;42 }43 .hero .img {44 position: absolute;45 inset: 0;46 background: #E0E0E0 center/cover no-repeat;47 border-bottom: 1px solid #2a2a2a;48 display: flex;49 align-items: center;50 justify-content: center;51 color: #757575;52 font-size: 44px;53 letter-spacing: 0.5px;54 }55 .hero::after {56 /* dark gradient fade to content */57 content: "";58 position: absolute;59 left: 0; right: 0; bottom: 0;60 height: 55%;61 background: linear-gradient(to bottom, rgba(15,15,15,0) 0%, rgba(15,15,15,0.5) 30%, rgba(15,15,15,0.85) 65%, #0f0f0f 100%);62 pointer-events: none;63 }64 65 /* Overlay circular controls */66 .circle-btn {67 position: absolute;68 top: 320px;69 width: 120px;70 height: 120px;71 border-radius: 60px;72 background: rgba(0,0,0,0.45);73 display: flex;74 align-items: center;75 justify-content: center;76 border: 1px solid rgba(255,255,255,0.1);77 z-index: 4;78 }79 .circle-left { left: 36px; }80 .circle-right { right: 36px; }81 82 /* Artist block */83 .artist-wrap {84 position: absolute;85 left: 48px;86 bottom: 170px;87 right: 48px;88 z-index: 3;89 display: flex;90 align-items: flex-end;91 justify-content: space-between;92 }93 .artist-info { max-width: 720px; }94 .artist-name {95 font-size: 96px;96 line-height: 1.02;97 font-weight: 800;98 letter-spacing: -0.5px;99 margin: 0 0 18px 0;100 text-shadow: 0 4px 24px rgba(0,0,0,0.4);101 }102 .artist-meta { color: #cfcfcf; font-size: 36px; margin-bottom: 36px; }103 .artist-actions { display: flex; gap: 24px; }104 .btn-follow {105 background: #e5e5e5;106 color: #111;107 border-radius: 22px;108 padding: 24px 42px;109 font-weight: 700;110 font-size: 40px;111 border: none;112 }113 .btn-more {114 width: 96px;115 height: 96px;116 border-radius: 48px;117 border: 1px solid #3a3a3a;118 background: rgba(255,255,255,0.06);119 display: flex; align-items: center; justify-content: center;120 }121 122 .big-play {123 width: 160px;124 height: 160px;125 border-radius: 80px;126 background: linear-gradient(135deg, #ff7b7b, #ff3b6a, #ff7a30);127 box-shadow: 0 10px 30px rgba(255,80,100,0.45);128 display: flex; align-items: center; justify-content: center;129 }130 131 /* Content area */132 .content {133 position: absolute;134 top: 950px;135 left: 0;136 right: 0;137 bottom: 300px;138 padding: 30px 36px 0 36px;139 overflow-y: hidden;140 background: transparent;141 }142 .section-header {143 display: flex; align-items: center; justify-content: space-between;144 padding: 26px 12px 14px 12px;145 }146 .section-title {147 font-weight: 800; font-size: 60px;148 }149 .see-all {150 color: #d9d9d9; font-size: 38px;151 }152 153 .song-list { margin-top: 8px; }154 .song-item {155 display: flex; align-items: center;156 padding: 26px 12px;157 gap: 26px;158 }159 .album {160 width: 140px; height: 140px; flex: 0 0 140px;161 background: #E0E0E0; border: 1px solid #BDBDBD;162 color: #757575; display: flex; align-items: center; justify-content: center;163 font-size: 28px; text-align: center;164 }165 .song-meta { flex: 1; min-width: 0; }166 .song-title { font-size: 44px; font-weight: 700; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }167 .song-plays { color: #bcbcbc; font-size: 32px; }168 .song-menu { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }169 170 /* Ad banner */171 .ad-wrap {172 margin: 22px 20px 10px 20px;173 background: #ffffff;174 border-radius: 12px;175 padding: 22px;176 display: flex;177 align-items: center;178 gap: 22px;179 color: #111;180 }181 .ad-img {182 width: 120px; height: 120px;183 background: #E0E0E0; border: 1px solid #BDBDBD;184 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;185 border-radius: 12px;186 flex-shrink: 0;187 }188 .ad-body { flex: 1; }189 .ad-title { font-size: 40px; font-weight: 700; margin-bottom: 6px; }190 .ad-sub { font-size: 30px; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }191 .ad-cta {192 background: #2ecc71; color: #fff;193 padding: 22px 34px; border-radius: 12px; font-weight: 800; font-size: 34px;194 }195 196 /* Bottom navigation */197 .bottom-nav {198 position: absolute;199 left: 0; right: 0; bottom: 70px;200 height: 190px;201 background: #121212;202 border-top: 1px solid #272727;203 }204 .nav-inner {205 position: relative;206 height: 100%;207 display: grid;208 grid-template-columns: 1fr 1fr 1fr 1fr 1fr;209 align-items: end;210 padding: 0 40px 20px 40px;211 gap: 18px;212 }213 .nav-item {214 color: #cfcfcf;215 text-align: center;216 font-size: 30px;217 display: flex; flex-direction: column; align-items: center; gap: 10px;218 }219 .nav-item.active { color: #ffffff; font-weight: 700; }220 .center-fab {221 position: absolute;222 left: 50%; transform: translateX(-50%);223 bottom: 72px;224 width: 168px; height: 168px; border-radius: 84px;225 background: linear-gradient(135deg, #ff8a65, #ff5177);226 box-shadow: 0 10px 30px rgba(255,81,119,0.45);227 display: flex; align-items: center; justify-content: center;228 border: 6px solid #121212;229 }230 231 /* Gesture bar */232 .gesture {233 position: absolute; left: 50%; transform: translateX(-50%);234 bottom: 18px; width: 320px; height: 12px; border-radius: 8px; background: #eaeaea20;235 }236 237 /* Helpers */238 .dot { width: 10px; height: 10px; background: #bbb; border-radius: 50%; display: inline-block; }239 .spacer { height: 8px; }240 .fade-divider { height: 1px; background: #1e1e1e; margin: 6px 0; opacity: 0.4; }241 svg { display: block; }242</style>243</head>244<body>245<div id="render-target">246 247 <!-- Status Bar -->248 <div class="status-bar">249 <div class="status-left">250 <div>10:14</div>251 <svg width="30" height="30" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">252 <path d="M12 1a4 4 0 00-4 4v2H7a2 2 0 00-2 2v8a2 2 0 002 2h10a2 2 0 002-2V9a2 2 0 00-2-2h-1V5a4 4 0 00-4-4zm-2 6V5a2 2 0 114 0v2h-4z"/>253 </svg>254 <span class="dot"></span>255 </div>256 <div class="status-right">257 <svg width="34" height="34" viewBox="0 0 24 24" fill="#fff"><path d="M12 3C7 3 2.73 6.11 1 10.5l2.18.72A9 9 0 0112 6c2.88 0 5.46 1.36 7.13 3.5L21 8.5C19.27 6.11 15 3 12 3zm0 6a6 6 0 00-5.33 3.24l2.1.97A3.99 3.99 0 0112 12a4 4 0 014 4h2a6 6 0 00-6-6zm0 4a2 2 0 00-1.73 1l1.73.99L13.73 16A2 2 0 0012 13z"/></svg>258 <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><rect x="3" y="7" width="18" height="10" rx="2"/><path d="M22 11v2"/></svg>259 </div>260 </div>261 262 <!-- Hero Image -->263 <div class="hero">264 <div class="img">[IMG: Conductor on stage]</div>265 266 <!-- Back button -->267 <div class="circle-btn circle-left" aria-label="Back">268 <svg width="48" height="48" viewBox="0 0 24 24" fill="#fff"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>269 </div>270 271 <!-- Search button -->272 <div class="circle-btn circle-right" aria-label="Search">273 <svg width="60" height="60" viewBox="0 0 24 24" fill="#fff"><path d="M10 2a8 8 0 105.29 14.29l4.21 4.2L21.7 19l-4.2-4.21A8 8 0 0010 2zm0 2a6 6 0 110 12A6 6 0 0110 4z"/></svg>274 </div>275 276 <!-- Artist info and big play -->277 <div class="artist-wrap">278 <div class="artist-info">279 <h1 class="artist-name">Luciano Pavarotti</h1>280 <div class="artist-meta">977 Monthly Listeners</div>281 <div class="artist-actions">282 <button class="btn-follow">Follow</button>283 <div class="btn-more">284 <svg width="32" height="32" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>285 </div>286 </div>287 </div>288 <div class="big-play" aria-label="Play">289 <svg width="72" height="72" viewBox="0 0 24 24" fill="#fff"><path d="M8 5v14l11-7z"/></svg>290 </div>291 </div>292 </div>293 294 <!-- Content -->295 <div class="content">296 <div class="section-header">297 <div class="section-title">Popular Songs</div>298 <div class="see-all">See all</div>299 </div>300 301 <div class="song-list">302 <!-- Song 1 -->303 <div class="song-item">304 <div class="album">[IMG: Album Art]</div>305 <div class="song-meta">306 <div class="song-title">We Are The World Live</div>307 <div class="song-plays">36.9K plays</div>308 </div>309 <div class="song-menu">310 <svg width="28" height="28" viewBox="0 0 24 24" fill="#bbb"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>311 </div>312 </div>313 314 <!-- Song 2 -->315 <div class="song-item">316 <div class="album">317 <svg width="68" height="68" viewBox="0 0 24 24" fill="#9e9e9e">318 <path d="M12 3a9 9 0 100 18 9 9 0 000-18zm1 5v6.2a2.5 2.5 0 11-1.5-2.3V6h2.5z"/>319 </svg>320 </div>321 <div class="song-meta">322 <div class="song-title">It's A Man's World Live</div>323 <div class="song-plays">2.3K plays</div>324 </div>325 <div class="song-menu">326 <svg width="28" height="28" viewBox="0 0 24 24" fill="#bbb"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>327 </div>328 </div>329 330 <!-- Song 3 -->331 <div class="song-item">332 <div class="album">[IMG: Album Art]</div>333 <div class="song-meta">334 <div class="song-title">Ave Maria Jacknife Lee Mix</div>335 <div class="song-plays">42 plays</div>336 </div>337 <div class="song-menu">338 <svg width="28" height="28" viewBox="0 0 24 24" fill="#bbb"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>339 </div>340 </div>341 342 <!-- Song 4 -->343 <div class="song-item">344 <div class="album">[IMG: Album Art]</div>345 <div class="song-meta">346 <div class="song-title">My Way</div>347 <div class="song-plays">894 plays</div>348 </div>349 <div class="song-menu">350 <svg width="28" height="28" viewBox="0 0 24 24" fill="#bbb"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>351 </div>352 </div>353 354 <!-- Ad -->355 <div class="ad-wrap">356 <div class="ad-img">[IMG: App Icon]</div>357 <div class="ad-body">358 <div class="ad-title">CallApp Caller ID & Block</div>359 <div class="ad-sub">Not knowing who called you is so...</div>360 </div>361 <div class="ad-cta">INSTALL</div>362 </div>363 </div>364 </div>365 366 <!-- Bottom Navigation -->367 <div class="bottom-nav">368 <div class="nav-inner">369 <div class="nav-item active">370 <svg width="44" height="44" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3z"/></svg>371 <div>Home</div>372 </div>373 <div class="nav-item">374 <svg width="44" height="44" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3a9 9 0 100 18 9 9 0 000-18zm1 5v7.2a2.7 2.7 0 11-1.6-2.5V6.5h2.6z"/></svg>375 <div>My Music</div>376 </div>377 378 <div class="nav-item"></div>379 380 <div class="nav-item">381 <svg width="44" height="44" viewBox="0 0 24 24" fill="currentColor">382 <path d="M12 3a9 9 0 100 18 9 9 0 000-18zm1 5v6.2a2.5 2.5 0 11-1.5-2.3V6h2.5z"/>383 </svg>384 <div>Hellotunes</div>385 </div>386 <div class="nav-item">387 <svg width="44" height="44" viewBox="0 0 24 24" fill="currentColor"><path d="M19.14 12.94a7.97 7.97 0 000-1.88l2.03-1.58a.5.5 0 00.12-.64l-1.92-3.32a.5.5 0 00-.6-.22l-2.39.96a7.94 7.94 0 00-1.63-.95l-.36-2.54a.5.5 0 00-.5-.42h-3.84a.5.5 0 00-.5.42l-.36 2.54c-.57.23-1.12.53-1.63.95l-2.39-.96a.5.5 0 00-.6.22L2.7 8.84a.5.5 0 00.12.64l2.03 1.58a7.97 7.97 0 000 1.88L2.82 14.6a.5.5 0 00-.12.64l1.92 3.32c.13.22.39.31.6.22l2.39-.96c.5.41 1.05.72 1.63.95l.36 2.54a.5.5 0 00.5.42h3.84a.5.5 0 00.5-.42l.36-2.54c.57-.23 1.12-.53 1.63-.95l2.39.96c.22.09.47 0 .6-.22l1.92-3.32a.5.5 0 00-.12-.64l-2.03-1.66zM12 15a3 3 0 110-6 3 3 0 010 6z"/></svg>388 <div>Settings</div>389 </div>390 391 <!-- Center Play FAB -->392 <div class="center-fab">393 <svg width="68" height="68" viewBox="0 0 24 24" fill="#fff"><path d="M8 5v14l11-7z"/></svg>394 </div>395 </div>396 </div>397 398 <!-- Gesture bar -->399 <div class="gesture"></div>400</div>401</body>402</html>