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>Playlist 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: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;13  }14  .topbar {15    position: relative;16    padding: 100px 36px 24px 36px;17  }18  .topbar-row {19    display:flex; align-items:center; gap:22px;20  }21  .back-btn {22    width:64px; height:64px; display:flex; align-items:center; justify-content:center;23  }24  .avatar {25    width:56px; height:56px; border-radius:50%;26    background:#CF5A32; display:flex; align-items:center; justify-content:center;27    font-weight:700; color:#fff; font-size:32px;28  }29  .title-wrap { line-height:1.15; }30  .title { font-size:42px; font-weight:600; color:#EDEDED; }31  .subtitle { font-size:30px; color:#9E9E9E; margin-top:6px; }32  .spacer { flex:1; }33  .icon-btn { width:64px; height:64px; display:flex; align-items:center; justify-content:center; }34 35  .cover {36    width:800px; height:520px; border-radius:18px;37    background:#2A2A2A; border:1px solid #3A3A3A;38    margin: 24px auto 0 auto;39    display:flex; align-items:center; justify-content:center;40    color:#BDBDBD; font-size:36px; letter-spacing:0.5px;41  }42 43  .main-title {44    text-align:center; font-size:92px; font-weight:800; letter-spacing:2px;45    margin-top:42px;46  }47 48  .actions {49    display:flex; justify-content:center; gap:40px; margin-top:18px;50  }51  .circle-action {52    width:120px; height:120px; border-radius:60px;53    background:#1C1C1C; border:1px solid #333;54    display:flex; align-items:center; justify-content:center;55  }56  .add-row {57    display:flex; align-items:center; gap:28px;58    margin-top:42px; padding: 0 140px;59  }60  .add-box {61    width:120px; height:120px; border-radius:10px;62    background:#333; border:1px solid #4A4A4A;63    display:flex; align-items:center; justify-content:center;64  }65  .add-text { font-size:48px; color:#F2F2F2; }66 67  .empty-note {68    text-align:center; color:#9E9E9E; font-size:42px; margin-top:120px;69  }70 71  /* Mini player */72  .mini-player {73    position:absolute; left:0; right:0; bottom:230px; height:220px;74    background:#202020; border-top:1px solid #3A3A3A;75  }76  .mini-progress {77    height:6px; background:#BDBDBD; width:10%;78  }79  .mini-content {80    display:flex; align-items:center; gap:24px; padding:20px 28px;81  }82  .thumb {83    width:160px; height:160px; background:#E0E0E0; border:1px solid #BDBDBD;84    display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px;85  }86  .track-meta { flex:1; min-width:0; }87  .track-title {88    font-size:40px; color:#F0F0F0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;89  }90  .track-sub {91    font-size:34px; color:#B8B8B8; margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;92  }93  .mini-actions { display:flex; align-items:center; gap:28px; }94 95  /* Bottom navigation */96  .bottom-nav {97    position:absolute; left:0; right:0; bottom:0; height:230px;98    background:#161616; border-top:1px solid #333; display:flex; justify-content:space-around; align-items:center;99  }100  .nav-item { display:flex; flex-direction:column; align-items:center; gap:14px; color:#D9D9D9; }101  .nav-item span { font-size:30px; }102  .nav-icon { width:56px; height:56px; display:flex; align-items:center; justify-content:center; }103  .home-active { border-top:4px solid #BDBDBD; width:200px; position:absolute; top:-4px; left:0; }104 105  /* SVG defaults */106  svg { width:36px; height:36px; }107  .large svg { width:48px; height:48px; }108  .stroke { stroke:#EDEDED; stroke-width:2.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }109  .fill { fill:#EDEDED; }110</style>111</head>112<body>113<div id="render-target">114  <div class="topbar">115    <div class="topbar-row">116      <div class="back-btn">117        <svg viewBox="0 0 24 24" class="stroke"><path d="M15 6l-6 6 6 6"/></svg>118      </div>119      <div class="avatar">C</div>120      <div class="title-wrap">121        <div class="title">Cerebra Research</div>122        <div class="subtitle">Public</div>123      </div>124      <div class="spacer"></div>125      <div class="icon-btn">126        <svg viewBox="0 0 24 24" class="stroke">127          <circle cx="11" cy="11" r="7"/>128          <path d="M20 20l-3.5-3.5"/>129        </svg>130      </div>131    </div>132  </div>133 134  <div class="cover">[IMG: Playlist Cover]</div>135 136  <div class="main-title">XYZ</div>137 138  <div class="actions">139    <div class="circle-action large">140      <svg viewBox="0 0 24 24" class="stroke">141        <path d="M12 4v10"/>142        <path d="M8 10l4 4 4-4"/>143        <path d="M5 20h14"/>144      </svg>145    </div>146    <div class="circle-action large">147      <svg viewBox="0 0 24 24" class="stroke">148        <path d="M3 21l5.5-1.5L21 7l-4-4L4.5 15.5z"/>149        <path d="M14 6l4 4"/>150      </svg>151    </div>152    <div class="circle-action large">153      <svg viewBox="0 0 24 24" class="stroke">154        <path d="M4 12v6a2 2 0 0 0 2 2h12"/>155        <path d="M12 16l6-6"/>156        <path d="M14 6h4v4"/>157      </svg>158    </div>159    <div class="circle-action large">160      <svg viewBox="0 0 24 24" class="fill">161        <circle cx="5" cy="12" r="2.2"/>162        <circle cx="12" cy="12" r="2.2"/>163        <circle cx="19" cy="12" r="2.2"/>164      </svg>165    </div>166  </div>167 168  <div class="add-row">169    <div class="add-box">170      <svg viewBox="0 0 24 24" class="stroke">171        <path d="M12 5v14M5 12h14"/>172      </svg>173    </div>174    <div class="add-text">Add a song</div>175  </div>176 177  <div class="empty-note">Nothing saved yet</div>178 179  <div class="mini-player">180    <div class="mini-progress"></div>181    <div class="mini-content">182      <div class="thumb">[IMG: Track Art]</div>183      <div class="track-meta">184        <div class="track-title">Tere Vaaste - Unplugged</div>185        <div class="track-sub">Varun Jain</div>186      </div>187      <div class="mini-actions">188        <div class="icon-btn">189          <svg viewBox="0 0 24 24" class="stroke">190            <path d="M3 18h2a7 7 0 0 1 7 7"/>191            <path d="M3 14h6a7 7 0 0 1 7 7"/>192            <path d="M3 10h10a7 7 0 0 1 7 7"/>193          </svg>194        </div>195        <div class="icon-btn">196          <svg viewBox="0 0 24 24" class="fill">197            <polygon points="8,5 20,12 8,19"></polygon>198          </svg>199        </div>200      </div>201    </div>202  </div>203 204  <div class="bottom-nav">205    <div class="nav-item">206      <div class="nav-icon">207        <svg viewBox="0 0 24 24" class="stroke">208          <path d="M3 11l9-7 9 7"/>209          <path d="M5 10v10h14V10"/>210        </svg>211      </div>212      <span>Home</span>213    </div>214    <div class="nav-item">215      <div class="nav-icon">216        <svg viewBox="0 0 24 24" class="stroke">217          <circle cx="12" cy="12" r="9"/>218          <path d="M12 7l3 5-5 3z"/>219        </svg>220      </div>221      <span>Explore</span>222    </div>223    <div class="nav-item">224      <div class="nav-icon">225        <svg viewBox="0 0 24 24" class="stroke">226          <rect x="4" y="4" width="16" height="16" rx="2"/>227          <path d="M10 8v7a2 2 0 1 0 2-2h2V8z"/>228        </svg>229      </div>230      <span>Library</span>231    </div>232    <div class="nav-item">233      <div class="nav-icon">234        <svg viewBox="0 0 24 24" class="stroke">235          <circle cx="12" cy="12" r="9"/>236          <path d="M12 6v6l4 2"/>237        </svg>238      </div>239      <span>Upgrade</span>240    </div>241  </div>242</div>243</body>244</html>