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 - New Playlist</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #000;13    border-radius: 0;14  }15  .status-bar {16    position: absolute; top: 0; left: 0; right: 0;17    height: 90px; color: #fff;18    font-size: 28px; display: flex; align-items: center; justify-content: space-between;19    padding: 0 36px;20    opacity: 0.9;21  }22  .status-right { display: flex; gap: 20px; align-items: center; }23  .app-header {24    position: absolute; top: 130px; left: 48px; right: 48px; height: 120px;25    display: flex; align-items: center; justify-content: space-between;26  }27  .title {28    display: flex; align-items: center; gap: 14px;29    color: #EFEFEF; font-size: 72px; font-weight: 700;30  }31  .top-actions { display: flex; align-items: center; gap: 38px; }32  .icon-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; opacity: 0.85; }33  .icon-btn svg { width: 56px; height: 56px; fill: none; stroke: #DADADA; stroke-width: 2.5; }34  .avatar {35    width: 64px; height: 64px; border-radius: 32px; background: #285B52; color: #fff;36    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 34px;37  }38  .filter-pill {39    position: absolute; top: 320px; left: 60px;40    display: flex; align-items: center; gap: 22px;41    padding: 24px 32px; background: #1F1F1F; border: 1px solid #3A3A3A;42    border-radius: 26px; color: #E5E5E5; font-size: 42px; font-weight: 600;43  }44  .pill-x {45    width: 84px; height: 84px; border-radius: 18px; background: #2A2A2A; border: 1px solid #4A4A4A;46    display: flex; align-items: center; justify-content: center;47  }48  /* Modal / Dialog */49  .dialog {50    position: absolute; left: 60px; right: 60px; top: 920px;51    background: #212121; border: 1px solid #3A3A3A;52    border-radius: 22px; color: #fff;53    box-shadow: 0 18px 40px rgba(0,0,0,0.6);54    padding: 44px 48px 40px 48px;55  }56  .dialog-title { font-size: 50px; font-weight: 800; margin-bottom: 42px; }57  .field {58    margin-bottom: 44px;59  }60  .input-line {61    width: 100%; background: transparent; color: #fff; font-size: 42px; font-weight: 600;62    border: none; outline: none; padding: 10px 0; display: block;63    border-bottom: 4px solid #2E2E2E;64  }65  .input-line.active { border-bottom-color: #3B82F6; }66  .placeholder { color: #B0B0B0; font-weight: 500; }67  .subtle { color: #BDBDBD; font-size: 36px; margin-bottom: 18px; }68  .privacy-row {69    display: flex; align-items: center; justify-content: space-between; gap: 20px;70    margin-top: 10px;71  }72  .privacy-left { display: flex; align-items: center; gap: 24px; }73  .globe-icon { width: 60px; height: 60px; }74  .dropdown { width: 32px; height: 32px; }75  .dialog-actions {76    margin-top: 40px; display: flex; justify-content: flex-end; gap: 22px;77  }78  .btn {79    padding: 22px 36px; font-size: 40px; font-weight: 700; border-radius: 40px; border: 2px solid transparent;80  }81  .btn-outline { color: #EDEDED; background: transparent; border-color: #5A5A5A; }82  .btn-primary { color: #111; background: #fff; }83  /* Mini player */84  .mini-player {85    position: absolute; left: 0; right: 0; bottom: 360px;86    height: 220px; background: #151515; border-top: 1px solid #2D2D2D;87    display: flex; align-items: center; padding: 0 24px; color: #fff;88  }89  .album {90    width: 160px; height: 160px; margin-right: 28px;91    background: #E0E0E0; border: 1px solid #BDBDBD;92    display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;93  }94  .track-info { flex: 1; }95  .track-title { font-size: 36px; font-weight: 700; color: #EDEDED; }96  .track-artist { font-size: 30px; color: #BDBDBD; margin-top: 6px; }97  .player-actions { display: flex; gap: 28px; align-items: center; padding-right: 16px; }98  .player-actions svg { width: 56px; height: 56px; stroke: #EDEDED; fill: none; stroke-width: 3; }99  .play { width: 64px; height: 64px; border-radius: 32px; background: #2A2A2A; display:flex; align-items:center; justify-content:center; }100  .play svg { width: 40px; height: 40px; fill: #fff; stroke: none; }101  /* Bottom nav */102  .bottom-nav {103    position: absolute; left: 0; right: 0; bottom: 120px;104    height: 240px; background: #101010; border-top: 1px solid #262626;105    display: flex; align-items: center; justify-content: space-around; color: #CFCFCF;106  }107  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 14px; }108  .nav-item svg { width: 56px; height: 56px; stroke: #CFCFCF; fill: none; stroke-width: 2.8; }109  .nav-item .label { font-size: 30px; }110  .nav-item.active .label { color: #FFFFFF; font-weight: 700; }111  .nav-item.active svg { stroke: #FFFFFF; }112  /* Home indicator */113  .home-indicator {114    position: absolute; left: 50%; transform: translateX(-50%);115    bottom: 36px; width: 360px; height: 10px; border-radius: 6px; background: rgba(255,255,255,0.8);116  }117</style>118</head>119<body>120<div id="render-target">121 122  <!-- Status bar -->123  <div class="status-bar">124    <div style="display:flex;align-items:center;gap:14px;">125      <span>1:28</span>126    </div>127    <div class="status-right">128      <svg width="28" height="28" viewBox="0 0 24 24">129        <path d="M2 6h20M2 12h16M2 18h12" stroke="#fff" stroke-width="2" />130      </svg>131      <svg width="28" height="28" viewBox="0 0 24 24">132        <path d="M3 18c3-3 7-5 9-5s6 2 9 5" stroke="#fff" stroke-width="2" fill="none"/>133        <circle cx="12" cy="18" r="2" fill="#fff"/>134      </svg>135      <svg width="28" height="28" viewBox="0 0 24 24">136        <rect x="6" y="4" width="12" height="16" rx="2" stroke="#fff" fill="none" stroke-width="2"/>137        <rect x="10" y="4" width="4" height="2" fill="#fff"/>138      </svg>139    </div>140  </div>141 142  <!-- App header -->143  <div class="app-header">144    <div class="title">145      <span>Library</span>146      <svg width="28" height="28" viewBox="0 0 24 24">147        <path d="M6 9l6 6 6-6" stroke="#DADADA" stroke-width="2.5" fill="none" stroke-linecap="round"/>148      </svg>149    </div>150    <div class="top-actions">151      <!-- History -->152      <div class="icon-btn">153        <svg viewBox="0 0 24 24">154          <circle cx="12" cy="12" r="9" />155          <path d="M12 6v6l4 2" />156        </svg>157      </div>158      <!-- Search -->159      <div class="icon-btn">160        <svg viewBox="0 0 24 24">161          <circle cx="10.5" cy="10.5" r="6.5"/>162          <path d="M16 16l5 5" />163        </svg>164      </div>165      <!-- Avatar -->166      <div class="avatar">C</div>167    </div>168  </div>169 170  <!-- Filter pill -->171  <div class="filter-pill">172    <div class="pill-x">173      <svg width="40" height="40" viewBox="0 0 24 24">174        <path d="M6 6l12 12M18 6L6 18" stroke="#D8D8D8" stroke-width="2.5" />175      </svg>176    </div>177    <div>Playlists</div>178  </div>179 180  <!-- Dialog: New playlist -->181  <div class="dialog">182    <div class="dialog-title">New playlist</div>183 184    <div class="field">185      <input class="input-line active" type="text" value="XYZ" />186    </div>187 188    <div class="field">189      <div class="placeholder">Description</div>190      <div class="input-line" style="margin-top: 8px;"></div>191    </div>192 193    <div class="field">194      <div class="subtle">Privacy</div>195      <div class="privacy-row">196        <div class="privacy-left">197          <svg class="globe-icon" viewBox="0 0 24 24">198            <circle cx="12" cy="12" r="9" stroke="#DADADA" fill="none" stroke-width="2"/>199            <path d="M3 12h18M12 3c3 4 3 14 0 18M9 3c-2 4-2 14 0 18" stroke="#DADADA" stroke-width="1.6" fill="none"/>200          </svg>201          <div style="font-size:40px; font-weight:700; color:#EDEDED;">Public</div>202        </div>203        <svg class="dropdown" viewBox="0 0 24 24">204          <path d="M6 9l6 6 6-6" stroke="#DADADA" stroke-width="2.5" fill="none" stroke-linecap="round"/>205        </svg>206      </div>207    </div>208 209    <div class="dialog-actions">210      <button class="btn btn-outline">Cancel</button>211      <button class="btn btn-primary">Create</button>212    </div>213  </div>214 215  <!-- Mini player -->216  <div class="mini-player">217    <div class="album">[IMG: Album Art]</div>218    <div class="track-info">219      <div class="track-title">Tere Vaaste - Unplugged</div>220      <div class="track-artist">Varun Jain</div>221    </div>222    <div class="player-actions">223      <!-- Cast -->224      <svg viewBox="0 0 24 24">225        <rect x="3" y="5" width="18" height="14" rx="2"/>226        <path d="M3 17c3 0 5 2 5 4M3 13c5 0 8 3 8 8" />227      </svg>228      <!-- Play -->229      <div class="play">230        <svg viewBox="0 0 24 24">231          <path d="M7 5l12 7-12 7Z"/>232        </svg>233      </div>234    </div>235  </div>236 237  <!-- Bottom navigation -->238  <div class="bottom-nav">239    <div class="nav-item">240      <svg viewBox="0 0 24 24">241        <path d="M3 11l9-7 9 7"/>242        <path d="M5 10v9h14v-9" />243      </svg>244      <div class="label">Home</div>245    </div>246    <div class="nav-item">247      <svg viewBox="0 0 24 24">248        <circle cx="12" cy="12" r="7"/>249        <path d="M12 5v14M5 12h14" />250      </svg>251      <div class="label">Explore</div>252    </div>253    <div class="nav-item active">254      <svg viewBox="0 0 24 24">255        <path d="M8 5v12" />256        <path d="M14 7v10" />257        <circle cx="8" cy="5" r="2" fill="#fff" stroke="none"/>258        <circle cx="14" cy="7" r="2" fill="#fff" stroke="none"/>259      </svg>260      <div class="label">Library</div>261    </div>262    <div class="nav-item">263      <svg viewBox="0 0 24 24">264        <path d="M12 2l3 7 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z"/>265      </svg>266      <div class="label">Upgrade</div>267    </div>268  </div>269 270  <!-- Home indicator -->271  <div class="home-indicator"></div>272 273</div>274</body>275</html>