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 UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #000; color: #fff; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;13  }14  .status-bar {15    position: absolute; top: 0; left: 0; right: 0; height: 100px;16    display: flex; align-items: center; justify-content: space-between;17    padding: 0 36px; color: #fff; font-size: 40px;18  }19  .status-icons { display: flex; align-items: center; gap: 24px; opacity: 0.9; }20  .header {21    position: absolute; top: 130px; left: 36px; right: 36px;22    display: flex; align-items: center; justify-content: space-between;23  }24  .title {25    display: flex; align-items: center; gap: 16px;26    font-weight: 800; font-size: 72px; letter-spacing: -0.5px;27  }28  .header-icons { display: flex; align-items: center; gap: 36px; }29  .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 36px; }30  .avatar {31    width: 72px; height: 72px; border-radius: 36px; background: #2db39d; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 40px; color: #081e18;32  }33  .tabs {34    position: absolute; top: 300px; left: 36px; right: 36px;35    display: flex; gap: 24px;36  }37  .pill {38    background: #171717; border: 1px solid #313131; color: #fff;39    padding: 28px 40px; border-radius: 24px; font-size: 44px; font-weight: 700;40    box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset;41  }42  .empty-state {43    position: absolute; left: 0; right: 0; top: 980px;44    display: flex; flex-direction: column; align-items: center; gap: 40px;45    color: #BDBDBD; text-align: center;46  }47  .music-note { width: 120px; height: 120px; opacity: 0.9; }48  .empty-text { font-size: 42px; color: #9e9e9e; }49  .cta {50    background: #fff; color: #000; padding: 28px 60px; border-radius: 999px; font-size: 48px; font-weight: 800; box-shadow: 0 8px 16px rgba(0,0,0,0.35);51  }52  .mini-player {53    position: absolute; left: 0; right: 0; bottom: 240px; height: 180px;54    background: #1c1c1c; border-top: 1px solid #2d2d2d;55    display: flex; align-items: center; padding: 0 24px; gap: 24px;56  }57  .album {58    width: 140px; height: 140px; background: #E0E0E0; border: 1px solid #BDBDBD;59    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 32px;60  }61  .track-info { flex: 1; display: flex; flex-direction: column; gap: 10px; }62  .track-title { font-size: 44px; font-weight: 800; color: #fff; }63  .track-artist { font-size: 34px; color: #bdbdbd; }64  .player-actions { display: flex; align-items: center; gap: 28px; }65  .nav {66    position: absolute; left: 0; right: 0; bottom: 0; height: 240px;67    background: #121212; border-top: 1px solid #2d2d2d;68    display: flex; align-items: flex-start; justify-content: space-around; padding-top: 28px;69  }70  .nav-item { width: 25%; display: flex; flex-direction: column; align-items: center; gap: 16px; color: #bdbdbd; }71  .nav-item.active { color: #fff; }72  .nav-label { font-size: 32px; }73  .gesture {74    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);75    width: 360px; height: 12px; background: #e6e6e6; border-radius: 8px; opacity: 0.7;76  }77  /* Simple helper for SVG icons */78  svg { display: block; }79</style>80</head>81<body>82<div id="render-target">83 84  <!-- Status bar -->85  <div class="status-bar">86    <div>1:25</div>87    <div class="status-icons">88      <!-- WiFi icon -->89      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">90        <path d="M2 8c5-4 15-4 20 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>91        <path d="M6 12c3-3 9-3 12 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>92        <path d="M10 16c2-2 4-2 6 0" stroke="#fff" stroke-width="2" stroke-linecap="round"/>93        <circle cx="12" cy="19" r="1.5" fill="#fff"/>94      </svg>95      <!-- Battery icon -->96      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">97        <rect x="3" y="6" width="16" height="12" rx="2" stroke="#fff" stroke-width="2"/>98        <rect x="5" y="8" width="12" height="8" rx="1" fill="#fff"/>99        <rect x="20" y="10" width="2" height="4" fill="#fff"/>100      </svg>101    </div>102  </div>103 104  <!-- Header -->105  <div class="header">106    <div class="title">107      <div>Library</div>108      <!-- Dropdown chevron -->109      <svg width="44" height="44" viewBox="0 0 24 24" fill="none">110        <path d="M6 9l6 6 6-6" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>111      </svg>112    </div>113    <div class="header-icons">114      <!-- History icon (circular arrow with clock) -->115      <div class="icon-btn">116        <svg width="54" height="54" viewBox="0 0 24 24" fill="none">117          <circle cx="12" cy="12" r="8" stroke="#fff" stroke-width="2"/>118          <path d="M12 7v5l4 2" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>119        </svg>120      </div>121      <!-- Search icon -->122      <div class="icon-btn">123        <svg width="54" height="54" viewBox="0 0 24 24" fill="none">124          <circle cx="11" cy="11" r="8" stroke="#fff" stroke-width="2"/>125          <path d="M21 21l-5-5" stroke="#fff" stroke-width="2" stroke-linecap="round"/>126        </svg>127      </div>128      <div class="avatar">C</div>129    </div>130  </div>131 132  <!-- Tabs -->133  <div class="tabs">134    <div class="pill">Playlists</div>135    <div class="pill">Songs</div>136    <div class="pill">Albums</div>137    <div class="pill">Artists</div>138  </div>139 140  <!-- Empty state -->141  <div class="empty-state">142    <!-- Music note icon -->143    <svg class="music-note" viewBox="0 0 24 24" fill="none">144      <path d="M9 20a3 3 0 100-6 3 3 0 000 6z" stroke="#cfcfcf" stroke-width="2"/>145      <path d="M12 14V5l7-2v9" stroke="#cfcfcf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>146    </svg>147    <div class="empty-text">Content you save to your library will show here</div>148    <div class="cta">Find music</div>149  </div>150 151  <!-- Mini player -->152  <div class="mini-player">153    <div class="album">[IMG: Album Art]</div>154    <div class="track-info">155      <div class="track-title">Tere Vaaste - Unplugged</div>156      <div class="track-artist">Varun Jain</div>157    </div>158    <div class="player-actions">159      <!-- Cast icon -->160      <svg width="56" height="56" viewBox="0 0 24 24" fill="none">161        <rect x="3" y="5" width="18" height="14" rx="2" stroke="#fff" stroke-width="2"/>162        <path d="M3 17c3 0 5 2 5 4" stroke="#fff" stroke-width="2" stroke-linecap="round"/>163        <path d="M3 14c4 0 7 3 7 7" stroke="#fff" stroke-width="2" stroke-linecap="round"/>164      </svg>165      <!-- Play icon -->166      <svg width="56" height="56" viewBox="0 0 24 24" fill="#fff">167        <path d="M8 5l12 7-12 7V5z"/>168      </svg>169    </div>170  </div>171 172  <!-- Bottom navigation -->173  <div class="nav">174    <div class="nav-item">175      <!-- Home outline -->176      <svg width="56" height="56" viewBox="0 0 24 24" fill="none">177        <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-9z" stroke="#bdbdbd" stroke-width="2" stroke-linejoin="round"/>178        <path d="M9 22V12h6v10" stroke="#bdbdbd" stroke-width="2"/>179      </svg>180      <div class="nav-label">Home</div>181    </div>182    <div class="nav-item">183      <!-- Explore/compass -->184      <svg width="56" height="56" viewBox="0 0 24 24" fill="none">185        <circle cx="12" cy="12" r="9" stroke="#bdbdbd" stroke-width="2"/>186        <path d="M10 14l6-2-2 6-6 2 2-6z" fill="#bdbdbd"/>187      </svg>188      <div class="nav-label">Explore</div>189    </div>190    <div class="nav-item active">191      <!-- Library note (active) -->192      <svg width="56" height="56" viewBox="0 0 24 24" fill="none">193        <path d="M9 19a3 3 0 100-6 3 3 0 000 6z" stroke="#fff" stroke-width="2"/>194        <path d="M12 13V5l8-2v8" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>195      </svg>196      <div class="nav-label">Library</div>197    </div>198    <div class="nav-item">199      <!-- Upgrade/star -->200      <svg width="56" height="56" viewBox="0 0 24 24" fill="none">201        <path d="M12 3l3 6 6 .9-4.5 4.3 1 6.8L12 18l-5.5 3 1-6.8L3 9.9 9 9l3-6z" stroke="#bdbdbd" stroke-width="2" stroke-linejoin="round"/>202      </svg>203      <div class="nav-label">Upgrade</div>204    </div>205  </div>206 207  <!-- Gesture bar -->208  <div class="gesture"></div>209 210</div>211</body>212</html>