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>Artist Screen</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: #121212;15    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;16    color: #fff;17  }18 19  /* Status bar */20  .status-bar {21    height: 96px;22    padding: 0 36px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #EDEDED;27    font-weight: 600;28    font-size: 40px;29    background: rgba(18,18,18,0.85);30  }31  .status-left, .status-right {32    display: flex;33    align-items: center;34    gap: 24px;35  }36  .icon {37    width: 48px; height: 48px;38    display: inline-flex;39    align-items: center;40    justify-content: center;41  }42  .icon svg { width: 48px; height: 48px; fill: #EDEDED; }43 44  /* Header */45  .header {46    position: relative;47    height: 760px;48    background: linear-gradient(180deg, #1b1b1b 0%, #7a2e2b 35%, #121212 100%);49  }50  .back-btn {51    position: absolute;52    top: 126px;53    left: 36px;54    width: 96px;55    height: 96px;56    border-radius: 48px;57    background: rgba(0,0,0,0.35);58    display: flex;59    align-items: center;60    justify-content: center;61  }62  .back-btn svg { width: 56px; height: 56px; fill: #fff; }63 64  .hero-image {65    position: absolute;66    top: 160px;67    left: 50%;68    transform: translateX(-50%);69    width: 360px;70    height: 420px;71    background: #E0E0E0;72    border: 1px solid #BDBDBD;73    display: flex;74    align-items: center;75    justify-content: center;76    color: #757575;77    font-weight: 600;78  }79 80  .artist-name {81    position: absolute;82    bottom: 24px;83    left: 36px;84    font-size: 140px;85    font-weight: 800;86    letter-spacing: -2px;87    line-height: 1;88    color: #fff;89  }90 91  /* Info + actions */92  .artist-info {93    padding: 32px 36px 24px 36px;94  }95  .listeners {96    color: #B3B3B3;97    font-size: 36px;98    margin-bottom: 24px;99  }100  .info-row {101    display: flex;102    align-items: center;103    justify-content: space-between;104  }105  .follow-controls {106    display: flex;107    align-items: center;108    gap: 24px;109  }110  .btn-follow {111    padding: 18px 32px;112    border: 2px solid #fff;113    border-radius: 12px;114    background: transparent;115    color: #fff;116    font-size: 36px;117    font-weight: 700;118  }119  .dots-btn {120    width: 64px; height: 64px;121    display: inline-flex; align-items: center; justify-content: center;122    background: rgba(255,255,255,0.06);123    border-radius: 12px;124  }125  .dots-btn svg { width: 36px; height: 36px; fill: #B3B3B3; }126 127  .play-controls {128    display: flex;129    align-items: center;130    gap: 28px;131  }132  .icon-shuffle {133    width: 72px; height: 72px;134    display: inline-flex; align-items: center; justify-content: center;135    background: rgba(255,255,255,0.06);136    border-radius: 36px;137  }138  .icon-shuffle svg { width: 40px; height: 40px; fill: #B3B3B3; }139  .play-btn {140    width: 120px; height: 120px;141    border-radius: 60px;142    background: #1DB954;143    display: flex; align-items: center; justify-content: center;144  }145  .play-btn svg { width: 64px; height: 64px; fill: #121212; }146 147  /* Section header */148  .section-title {149    margin: 36px;150    margin-bottom: 18px;151    font-size: 52px;152    font-weight: 800;153  }154 155  /* Tracks list */156  .track-list {157    padding: 0 36px 24px 36px;158  }159  .track {160    display: grid;161    grid-template-columns: 64px 140px 1fr 80px;162    align-items: center;163    gap: 24px;164    padding: 22px 0;165    border-bottom: 1px solid rgba(255,255,255,0.06);166  }167  .track .index {168    color: #B3B3B3;169    font-size: 36px;170    text-align: center;171  }172  .album-art {173    width: 120px;174    height: 120px;175    background: #E0E0E0;176    border: 1px solid #BDBDBD;177    display: flex; align-items: center; justify-content: center;178    color: #757575; font-weight: 600; font-size: 26px;179  }180  .track-info .title {181    font-size: 44px;182    font-weight: 700;183    color: #fff;184    margin-bottom: 12px;185  }186  .track-info .meta {187    font-size: 32px;188    color: #B3B3B3;189  }190  .track .more {191    display: flex; align-items: center; justify-content: center;192  }193  .track .more svg { width: 36px; height: 36px; fill: #B3B3B3; }194 195  .artist-pick {196    margin: 36px;197    font-size: 52px;198    font-weight: 800;199  }200 201  /* Bottom nav */202  .bottom-nav {203    position: absolute;204    bottom: 72px;205    left: 0;206    right: 0;207    height: 160px;208    background: linear-gradient(180deg, rgba(18,18,18,0) 0%, rgba(18,18,18,0.65) 20%, #121212 60%);209    display: flex;210    align-items: flex-end;211    padding-bottom: 18px;212    justify-content: space-around;213  }214  .nav-item {215    display: flex;216    flex-direction: column;217    align-items: center;218    gap: 10px;219    color: #B3B3B3;220    font-size: 32px;221    font-weight: 600;222  }223  .nav-item.active { color: #fff; }224  .nav-item svg { width: 54px; height: 54px; fill: currentColor; }225 226  .gesture {227    position: absolute;228    bottom: 18px;229    left: 50%;230    transform: translateX(-50%);231    width: 360px; height: 14px;232    background: #FFFFFF;233    border-radius: 7px;234    opacity: 0.85;235  }236</style>237</head>238<body>239<div id="render-target">240  <!-- Status Bar -->241  <div class="status-bar">242    <div class="status-left">243      <div>5:30</div>244      <div class="icon">245        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1 0 16 14.5l.27.28v.79L21 20.49 20.49 21l-4.99-4.99zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/></svg>246      </div>247      <div class="icon">248        <svg viewBox="0 0 24 24"><path d="M3 4h18v2H3zm0 6h18v2H3zm0 6h12v2H3z"/></svg>249      </div>250    </div>251    <div class="status-right">252      <div class="icon">253        <svg viewBox="0 0 24 24"><path d="M12 3L1 14h3v7h6v-5h4v5h6v-7h3L12 3z"/></svg>254      </div>255      <div class="icon">256        <svg viewBox="0 0 24 24"><path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm3.5-5.5a4.5 4.5 0 0 1-7 0l1.2-1a3 3 0 0 0 4.6 0l1.2 1z"/></svg>257      </div>258      <div class="icon">259        <svg viewBox="0 0 24 24"><path d="M17 6.5V4a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v2.5H5a1 1 0 0 0-1 1V20a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V7.5a1 1 0 0 0-1-1h-3zM9 4h6v2H9V4zm10 16H5V8h14v12z"/></svg>260      </div>261    </div>262  </div>263 264  <!-- Header -->265  <div class="header">266    <div class="back-btn">267      <svg viewBox="0 0 24 24"><path d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>268    </div>269 270    <div class="hero-image">[IMG: Artist Cover]</div>271 272    <div class="artist-name">Martin Garrix</div>273  </div>274 275  <!-- Info and Actions -->276  <div class="artist-info">277    <div class="listeners">21.7M monthly listeners</div>278    <div class="info-row">279      <div class="follow-controls">280        <button class="btn-follow">Following</button>281        <div class="dots-btn">282          <svg viewBox="0 0 24 24"><path d="M12 3a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm0 7a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm0 7a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/></svg>283        </div>284      </div>285      <div class="play-controls">286        <div class="icon-shuffle">287          <svg viewBox="0 0 24 24"><path d="M17 3h4v4h-2V5h-2V3zM3 6h6l2 3-2 3H3V10h4.5L9 8.5 7.5 7H3V6zm18 12v3h-4v-2h2v-1h2zM3 18h6l5-6h6v-2h-6l-5 6H3v2z"/></svg>288        </div>289        <div class="play-btn">290          <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>291        </div>292      </div>293    </div>294  </div>295 296  <!-- Popular section -->297  <div class="section-title">Popular</div>298  <div class="track-list">299    <div class="track">300      <div class="index">1</div>301      <div class="album-art">[IMG: Cover]</div>302      <div class="track-info">303        <div class="title">In the Name of Love</div>304        <div class="meta">1,364,963,924</div>305      </div>306      <div class="more">307        <svg viewBox="0 0 24 24"><path d="M12 3a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm0 7a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm0 7a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/></svg>308      </div>309    </div>310 311    <div class="track">312      <div class="index">2</div>313      <div class="album-art">[IMG: Cover]</div>314      <div class="track-info">315        <div class="title">Scared to Be Lonely</div>316        <div class="meta">1,189,678,093</div>317      </div>318      <div class="more">319        <svg viewBox="0 0 24 24"><path d="M12 3a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm0 7a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm0 7a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/></svg>320      </div>321    </div>322 323    <div class="track">324      <div class="index">3</div>325      <div class="album-art">[IMG: Cover]</div>326      <div class="track-info">327        <div class="title">Summer Days (feat. Macklemore ...)</div>328        <div class="meta">623,756,297</div>329      </div>330      <div class="more">331        <svg viewBox="0 0 24 24"><path d="M12 3a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm0 7a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm0 7a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/></svg>332      </div>333    </div>334 335    <div class="track">336      <div class="index">4</div>337      <div class="album-art">[IMG: Cover]</div>338      <div class="track-info">339        <div class="title">Real Love</div>340        <div class="meta">13,223,541</div>341      </div>342      <div class="more">343        <svg viewBox="0 0 24 24"><path d="M12 3a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm0 7a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm0 7a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/></svg>344      </div>345    </div>346 347    <div class="track">348      <div class="index">5</div>349      <div class="album-art">[IMG: Cover]</div>350      <div class="track-info">351        <div class="title">High On Life (feat. Bonn)</div>352        <div class="meta">412,014,379</div>353      </div>354      <div class="more">355        <svg viewBox="0 0 24 24"><path d="M12 3a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm0 7a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm0 7a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/></svg>356      </div>357    </div>358  </div>359 360  <div class="artist-pick">Artist Pick</div>361 362  <!-- Bottom Navigation -->363  <div class="bottom-nav">364    <div class="nav-item">365      <svg viewBox="0 0 24 24"><path d="M12 3 3 11h3v8h5v-5h2v5h5v-8h3z"/></svg>366      <div>Home</div>367    </div>368    <div class="nav-item active">369      <svg viewBox="0 0 24 24"><path d="M15.5 14h-.8l-.28-.27A6.5 6.5 0 1 0 16 14.5l.27.28v.8L21 20.5 20.5 21l-5-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/></svg>370      <div>Search</div>371    </div>372    <div class="nav-item">373      <svg viewBox="0 0 24 24"><path d="M4 4h4v16H4zm6 6h4v10h-4zm6-4h4v14h-4z"/></svg>374      <div>Your Library</div>375    </div>376    <div class="nav-item">377      <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M7 15c3.5-1.2 7.5-.8 10 1" stroke="#121212" stroke-width="1.5" fill="none"/><path d="M6.5 12.5c4-1 8-.7 10.8 1.3" stroke="#121212" stroke-width="1.5" fill="none"/><path d="M6 10c4.5-.8 9-.5 12 1.5" stroke="#121212" stroke-width="1.5" fill="none"/></svg>378      <div>Premium</div>379    </div>380  </div>381 382  <div class="gesture"></div>383</div>384</body>385</html>