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>Library Screen</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;13  }14  #render-target {15    position: relative;16    overflow: hidden;17    width: 1080px;18    height: 2400px;19    background: #000;20    color: #fff;21  }22 23  /* Status bar (simulated) */24  .status-bar {25    position: absolute;26    top: 20px;27    left: 30px;28    right: 30px;29    height: 60px;30    display: flex;31    align-items: center;32    justify-content: space-between;33    color: #fff;34    opacity: 0.9;35    font-size: 34px;36    letter-spacing: 0.5px;37  }38  .status-right {39    display: flex;40    align-items: center;41    gap: 24px;42  }43  .status-icon {44    width: 34px;45    height: 34px;46  }47 48  /* Header */49  .header {50    position: absolute;51    top: 110px;52    left: 36px;53    right: 36px;54    display: flex;55    align-items: center;56    justify-content: space-between;57  }58  .title-wrap {59    display: flex;60    align-items: center;61    gap: 18px;62  }63  .title {64    font-size: 76px;65    font-weight: 700;66  }67  .dropdown-icon {68    width: 36px;69    height: 36px;70    fill: #fff;71    opacity: 0.9;72  }73  .header-actions {74    display: flex;75    align-items: center;76    gap: 40px;77  }78  .action-icon {79    width: 64px;80    height: 64px;81    fill: #fff;82    opacity: 0.92;83  }84  .avatar {85    width: 64px;86    height: 64px;87    background: #E0E0E0;88    border: 1px solid #BDBDBD;89    border-radius: 50%;90    color: #757575;91    display: flex;92    align-items: center;93    justify-content: center;94    font-size: 22px;95  }96 97  /* Filter chips */98  .chips {99    position: absolute;100    top: 240px;101    left: 36px;102    display: flex;103    gap: 24px;104  }105  .chip {106    height: 100px;107    padding: 0 42px;108    border-radius: 28px;109    background: #fff;110    color: #000;111    display: flex;112    align-items: center;113    gap: 20px;114    font-size: 40px;115    font-weight: 600;116    box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset;117  }118  .chip .chip-icon {119    width: 52px;120    height: 52px;121    fill: #000;122  }123  .chip.square {124    width: 120px;125    padding: 0 0;126    justify-content: center;127  }128 129  /* Empty state center */130  .empty-icon {131    position: absolute;132    top: 980px;133    left: 0;134    right: 0;135    margin: 0 auto;136    width: 180px;137    height: 120px;138    fill: #BDBDBD;139    opacity: 0.9;140  }141  .empty-text {142    position: absolute;143    top: 1110px;144    width: 100%;145    text-align: center;146    color: #BDBDBD;147    font-size: 38px;148    letter-spacing: 0.2px;149  }150 151  /* CTA */152  .cta {153    position: absolute;154    top: 1300px;155    left: 0;156    right: 0;157    width: 540px;158    height: 140px;159    margin: 0 auto;160    background: #fff;161    color: #000;162    border-radius: 80px;163    display: flex;164    align-items: center;165    justify-content: center;166    font-size: 44px;167    font-weight: 700;168    box-shadow: 0 8px 24px rgba(0,0,0,0.35);169  }170 171  /* Mini player */172  .mini-player {173    position: absolute;174    left: 0;175    bottom: 380px;176    width: 100%;177    height: 220px;178    background: #2B2B2B;179    display: flex;180    align-items: center;181    padding: 0 24px;182  }183  .art {184    width: 180px;185    height: 180px;186    background: #E0E0E0;187    border: 1px solid #BDBDBD;188    display: flex;189    align-items: center;190    justify-content: center;191    color: #757575;192    font-size: 26px;193  }194  .track-info {195    flex: 1;196    padding: 0 28px;197  }198  .track-title {199    font-size: 40px;200    font-weight: 700;201    color: #fff;202  }203  .track-sub {204    font-size: 32px;205    color: #BDBDBD;206    margin-top: 12px;207  }208  .mini-actions {209    display: flex;210    align-items: center;211    gap: 36px;212    padding-right: 16px;213  }214  .mini-icon {215    width: 68px;216    height: 68px;217    fill: #fff;218    opacity: 0.95;219  }220 221  .progress {222    position: absolute;223    bottom: 380px;224    left: 0;225    width: 100%;226    height: 6px;227    background: rgba(255,255,255,0.12);228  }229  .progress .bar {230    width: 20%;231    height: 100%;232    background: #fff;233  }234 235  /* Bottom navigation */236  .bottom-nav {237    position: absolute;238    bottom: 0;239    left: 0;240    width: 100%;241    height: 380px;242    background: #1E1E1E;243    display: flex;244    flex-direction: column;245    align-items: center;246    padding-top: 36px;247  }248  .nav-items {249    width: 100%;250    display: flex;251    justify-content: space-around;252    align-items: flex-start;253    margin-top: 24px;254  }255  .nav-item {256    display: flex;257    flex-direction: column;258    align-items: center;259    gap: 18px;260    color: #BDBDBD;261    font-size: 30px;262  }263  .nav-item.active {264    color: #fff;265  }266  .nav-icon {267    width: 72px;268    height: 72px;269    fill: currentColor;270    opacity: 0.95;271  }272 273  /* Gesture pill */274  .gesture-pill {275    position: absolute;276    bottom: 210px;277    left: 50%;278    transform: translateX(-50%);279    width: 320px;280    height: 12px;281    background: #CFCFCF;282    border-radius: 8px;283    opacity: 0.7;284  }285</style>286</head>287<body>288<div id="render-target">289 290  <!-- Simulated status bar -->291  <div class="status-bar">292    <div>1:26</div>293    <div class="status-right">294      <svg class="status-icon" viewBox="0 0 24 24"><path fill="#fff" d="M3 17h2a8 8 0 0 1 8 8H11a6 6 0 0 0-6-6zM3 13h2a12 12 0 0 1 12 12h-2A10 10 0 0 0 3 13z"/></svg>295      <svg class="status-icon" viewBox="0 0 24 24"><path fill="#fff" d="M2 7h20v12H2z"/><path fill="#fff" d="M18 2h2v4h-2z"/></svg>296    </div>297  </div>298 299  <!-- Header -->300  <div class="header">301    <div class="title-wrap">302      <div class="title">Library</div>303      <svg class="dropdown-icon" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>304    </div>305    <div class="header-actions">306      <!-- History -->307      <svg class="action-icon" viewBox="0 0 24 24"><path d="M12 5a7 7 0 1 1-7 7H3l2.5-2.5L8 12H6a6 6 0 1 0 6-6z"/><path d="M12 8h1v5l4 2-0.5 1L12 14z"/></svg>308      <!-- Search -->309      <svg class="action-icon" viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"/><path d="M14 14l6 6"/></svg>310      <!-- Profile -->311      <div class="avatar">[IMG: Profile]</div>312    </div>313  </div>314 315  <!-- Filter chips -->316  <div class="chips">317    <div class="chip square">318      <svg class="chip-icon" viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19" stroke="#000" stroke-width="2" fill="none"/></svg>319    </div>320    <div class="chip">321      <span>Playlists</span>322    </div>323  </div>324 325  <!-- Empty state icon -->326  <svg class="empty-icon" viewBox="0 0 200 120">327    <rect x="20" y="30" width="100" height="12" fill="#BDBDBD"/>328    <rect x="20" y="52" width="100" height="12" fill="#BDBDBD"/>329    <polygon points="140,30 180,60 140,90" fill="#BDBDBD"/>330  </svg>331 332  <!-- Empty state text -->333  <div class="empty-text">Playlists you save to your library will show up here</div>334 335  <!-- CTA -->336  <div class="cta">New playlist</div>337 338  <!-- Mini player -->339  <div class="mini-player">340    <div class="art">[IMG: Album Art]</div>341    <div class="track-info">342      <div class="track-title">Tere Vaaste - Unplugged</div>343      <div class="track-sub">Varun Jain</div>344    </div>345    <div class="mini-actions">346      <svg class="mini-icon" viewBox="0 0 24 24">347        <path d="M2 18h2a4 4 0 0 1 4 4H6a2 2 0 0 0-2-2H2zM2 14h2a8 8 0 0 1 8 8h-2a6 6 0 0 0-6-6H2zM2 10h2a12 12 0 0 1 12 12h-2A10 10 0 0 0 2 12H2z"/>348      </svg>349      <svg class="mini-icon" viewBox="0 0 24 24">350        <polygon points="6,4 20,12 6,20" />351      </svg>352    </div>353  </div>354 355  <!-- Progress bar -->356  <div class="progress"><div class="bar"></div></div>357 358  <!-- Bottom navigation -->359  <div class="bottom-nav">360    <div class="nav-items">361      <div class="nav-item">362        <svg class="nav-icon" viewBox="0 0 24 24"><path d="M3 11l9-7 9 7v9h-6v-6H9v6H3z" /></svg>363        <div>Home</div>364      </div>365      <div class="nav-item">366        <svg class="nav-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 6l3 6-6 3 3-9z"/></svg>367        <div>Explore</div>368      </div>369      <div class="nav-item active">370        <svg class="nav-icon" viewBox="0 0 24 24"><path d="M6 4h3v10a3 3 0 1 1-3-3V4zm9 3h3v10a3 3 0 1 1-3-3V7z"/></svg>371        <div>Library</div>372      </div>373      <div class="nav-item">374        <svg class="nav-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 7v6l4 2"/></svg>375        <div>Upgrade</div>376      </div>377    </div>378    <div class="gesture-pill"></div>379  </div>380 381</div>382</body>383</html>