GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Your Library - Mock</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    color: #FFFFFF;16    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 100%;25    height: 120px;26    background: #0E0E0E;27    display: flex;28    align-items: center;29    padding: 0 40px;30    box-sizing: border-box;31  }32  .status-left { font-size: 40px; font-weight: 600; }33  .status-right {34    margin-left: auto;35    display: flex;36    align-items: center;37    gap: 36px;38  }39  .status-icon svg { width: 48px; height: 48px; fill: #FFFFFF; }40 41  /* Header */42  .header {43    position: absolute;44    top: 120px;45    left: 0;46    width: 100%;47    padding: 40px;48    box-sizing: border-box;49    background: #121212;50  }51  .header-top {52    display: flex;53    align-items: center;54    justify-content: space-between;55  }56  .title-group {57    display: flex;58    align-items: center;59    gap: 26px;60  }61  .avatar {62    width: 92px;63    height: 92px;64    border-radius: 50%;65    background: #B59DFF;66    color: #121212;67    display: flex;68    align-items: center;69    justify-content: center;70    font-weight: 800;71    font-size: 44px;72  }73  .title {74    font-size: 72px;75    font-weight: 800;76    letter-spacing: 0.2px;77  }78  .header-actions {79    display: flex;80    align-items: center;81    gap: 40px;82  }83  .icon-btn {84    width: 88px;85    height: 88px;86    border-radius: 44px;87    display: flex;88    align-items: center;89    justify-content: center;90  }91  .icon-btn svg { width: 52px; height: 52px; stroke: #FFFFFF; fill: none; stroke-width: 7px; }92 93  /* Filter pills */94  .filters {95    margin-top: 34px;96    display: flex;97    gap: 18px;98  }99  .pill {100    padding: 22px 32px;101    border-radius: 44px;102    background: #2A2A2A;103    color: #FFFFFF;104    font-size: 36px;105    font-weight: 600;106  }107 108  /* Section header */109  .section {110    position: absolute;111    top: 380px;112    left: 0;113    width: 100%;114    padding: 0 40px;115    box-sizing: border-box;116  }117  .section-head {118    display: flex;119    align-items: center;120    justify-content: space-between;121    color: #FFFFFF;122    margin-bottom: 24px;123  }124  .section-left {125    display: flex;126    align-items: center;127    gap: 16px;128    font-size: 34px;129    font-weight: 600;130  }131  .section-right svg { width: 48px; height: 48px; fill: #FFFFFF; }132 133  /* List */134  .list { margin-top: 8px; }135  .item {136    display: flex;137    align-items: center;138    gap: 30px;139    padding: 22px 0;140    border-bottom: 1px solid rgba(255,255,255,0.04);141  }142  .img-square, .img-circle {143    width: 140px;144    height: 140px;145    background: #E0E0E0;146    border: 1px solid #BDBDBD;147    color: #757575;148    display: flex;149    align-items: center;150    justify-content: center;151    font-size: 30px;152    box-sizing: border-box;153    text-align: center;154    line-height: 1.1;155  }156  .img-circle { border-radius: 50%; }157  .meta {158    display: flex;159    flex-direction: column;160    gap: 8px;161  }162  .title-text {163    font-size: 48px;164    font-weight: 700;165    color: #FFFFFF;166  }167  .sub-text {168    font-size: 34px;169    color: #B3B3B3;170  }171 172  /* Mini player */173  .mini-player {174    position: absolute;175    left: 40px;176    right: 40px;177    bottom: 260px;178    height: 180px;179    background: #2B2B2B;180    border-radius: 28px;181    display: flex;182    align-items: center;183    padding: 16px 24px;184    box-sizing: border-box;185    box-shadow: 0 8px 24px rgba(0,0,0,0.35);186  }187  .mini-art {188    width: 140px;189    height: 140px;190    background: #E0E0E0;191    border: 1px solid #BDBDBD;192    color: #757575;193    display: flex;194    align-items: center;195    justify-content: center;196    margin-right: 24px;197    font-size: 26px;198  }199  .mini-info {200    flex: 1;201    display: flex;202    flex-direction: column;203    gap: 10px;204    overflow: hidden;205  }206  .mini-title {207    font-size: 40px;208    font-weight: 800;209    white-space: nowrap;210    overflow: hidden;211    text-overflow: ellipsis;212  }213  .mini-artist {214    font-size: 32px;215    color: #B3B3B3;216  }217  .mini-controls {218    display: flex;219    align-items: center;220    gap: 26px;221    margin-left: 16px;222  }223  .mini-controls svg {224    width: 52px;225    height: 52px;226    fill: none;227    stroke: #FFFFFF;228    stroke-width: 7px;229  }230  .play-btn {231    width: 88px;232    height: 88px;233    border-radius: 44px;234    background: #3D3D3D;235    display: flex;236    align-items: center;237    justify-content: center;238  }239  .play-btn svg { width: 48px; height: 48px; fill: #FFFFFF; stroke: none; }240 241  /* Bottom nav */242  .bottom-nav {243    position: absolute;244    left: 0;245    bottom: 0;246    width: 100%;247    height: 220px;248    background: rgba(0,0,0,0.7);249    border-top: 1px solid #2A2A2A;250    display: flex;251    align-items: center;252    justify-content: space-around;253  }254  .nav-item {255    display: flex;256    flex-direction: column;257    align-items: center;258    gap: 18px;259    color: #B3B3B3;260  }261  .nav-item.active { color: #FFFFFF; }262  .nav-item svg { width: 64px; height: 64px; fill: none; stroke: currentColor; stroke-width: 8px; }263  .nav-label { font-size: 30px; font-weight: 600; }264  .home-indicator {265    position: absolute;266    bottom: 220px;267    left: 50%;268    transform: translateX(-50%);269    width: 300px;270    height: 14px;271    background: #FFFFFF;272    opacity: 0.75;273    border-radius: 20px;274  }275</style>276</head>277<body>278<div id="render-target">279 280  <!-- Status Bar -->281  <div class="status-bar">282    <div class="status-left">11: