GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<title>Playlist UI Mock</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; position:relative; overflow:hidden;11 background:#0c0c0f; color:#fff;12 }13 .status-bar { height:72px; padding:12px 24px; color:#bbb; font-size:28px; display:flex; align-items:center; justify-content:space-between; }14 .status-right { display:flex; gap:18px; align-items:center; }15 .topbar { height:120px; padding:0 24px; display:flex; align-items:center; justify-content:space-between; }16 .left-group { display:flex; align-items:center; gap:24px; }17 .avatar { width:56px; height:56px; border-radius:50%; background:#cf6b3f; display:flex; align-items:center; justify-content:center; font-weight:bold; }18 .title-wrap { display:flex; flex-direction:column; }19 .title-wrap .title { font-size:40px; font-weight:600; }20 .title-wrap .subtitle { font-size:26px; color:#bdbdbd; margin-top:6px; }21 .album-art {22 width:820px; height:820px; margin:20px auto 0; border-radius:24px;23 background:#E0E0E0; border:1px solid #BDBDBD;24 display:flex; align-items:center; justify-content:center; color:#757575; font-size:32px; text-align:center;25 }26 .playlist-name { text-align:center; font-size:72px; font-weight:800; margin:36px 0 18px; letter-spacing:1px; }27 .actions { display:flex; justify-content:center; align-items:center; gap:44px; margin-bottom:36px; }28 .icon-btn { width:126px; height:126px; border-radius:50%; background:#18181c; display:flex; align-items:center; justify-content:center; }29 .icon-btn svg { width:56px; height:56px; color:#e5e5e5; }30 .icon-btn.play { width:168px; height:168px; background:#ffffff; }31 .icon-btn.play svg { color:#000; width:70px; height:70px; }32 .section { padding:0 32px; }33 .list-item { display:flex; align-items:center; gap:24px; padding:18px 0; }34 .thumb {35 width:120px; height:120px; border-radius:12px;36 background:#E0E0E0; border:1px solid #BDBDBD;37 display:flex; align-items:center; justify-content:center; color:#757575; font-size:22px; text-align:center;38 }39 .list-text { flex:1; }40 .list-title { font-size:36px; font-weight:600; }41 .list-sub { font-size:26px; color:#bdbdbd; margin-top:6px; }42 .more-btn { width:72px; height:72px; display:flex; align-items:center; justify-content:center; }43 .suggest-header { font-size:54px; font-weight:800; margin:36px 0 8px; }44 .suggest-item { display:flex; align-items:center; gap:24px; padding:22px 0; border-bottom:1px solid #121219; }45 .suggest-item .add { width:84px; height:84px; display:flex; align-items:center; justify-content:center; color:#e5e5e5; }46 /* Mini player */47 .mini-player {48 position:absolute; left:0; right:0; bottom:220px;49 background:#222327; border-top:1px solid #2e2f35; height:180px;50 display:flex; align-items:center; gap:24px; padding:0 24px;51 }52 .mini-player .thumb { width:120px; height:120px; border-radius:8px; }53 .mini-player .meta { flex:1; }54 .mini-player .meta .t { font-size:34px; font-weight:600; }55 .mini-player .meta .s { font-size:26px; color:#cfcfcf; margin-top:6px; }56 .mini-player .controls { display:flex; align-items:center; gap:24px; }57 .mini-player .controls .btn { width:84px; height:84px; border-radius:50%; background:#33343a; display:flex; align-items:center; justify-content:center; }58 /* Bottom nav */59 .bottom-nav {60 position:absolute; left:0; bottom:0; width:100%; height:200px; background:#121217; border-top:1px solid #1e1f24;61 display:flex; align-items:center; justify-content:space-around; padding-bottom:24px;62 }63 .nav-item { display:flex; flex-direction:column; align-items:center; gap:10px; color:#bdbdbd; }64 .nav-item.active { color:#ffffff; }65 .nav-item svg { width:48px; height:48px; }66 .gesture { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); width:180px; height:10px; background:#e6e6e6; border-radius:8px; opacity:0.9; }67</style>68</head>69<body>70<div id="render-target">71 <!-- Status bar -->72 <div class="status-bar">73 <div>1:30</div>74 <div class="status-right">75 <!-- Simple signal and battery icons -->76 <svg viewBox="0 0 24 24"><rect x="2" y="8" width="4" height="8" fill="#9e9e9e"/><rect x="8" y="6" width="4" height="10" fill="#9e9e9e"/><rect x="14" y="4" width="4" height="12" fill="#9e9e9e"/></svg>77 <svg viewBox="0 0 24 24"><rect x="1" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#9e9e9e" stroke-width="2"/><rect x="3" y="8" width="14" height="8" fill="#9e9e9e"/></svg>78 </div>79 </div>80 81 <!-- Top bar -->82 <div class="topbar">83 <div class="left-group">84 <div class="icon-btn" style="width:64px;height:64px;background:transparent;">85 <svg viewBox="0 0 24 24">86 <path d="M10 6L4 12l6 6" stroke="currentColor" stroke-width="2" fill="none"/>87 <path d="M4 12h16" stroke="currentColor" stroke-width="2" fill="none"/>88 </svg>89 </div>90 <div class="avatar">C</div>91 <div class="title-wrap">92 <div class="title">Cerebra Research</div>93 <div class="subtitle">Public</div>94 </div>95 </div>96 <div class="icon-btn" style="width:64px;height:64px;background:transparent;">97 <svg viewBox="0 0 24 24">98 <circle cx="10" cy="10" r="6" stroke="currentColor" stroke-width="2" fill="none"/>99 <path d="M21 21l-5-5" stroke="currentColor" stroke-width="2" fill="none"/>100 </svg>101 </div>102 </div>103 104 <!-- Album art -->105 <div class="album-art">[IMG: Album Art - Apna Bana Le]</div>106 107 <!-- Playlist title -->108 <div class="playlist-name">XYZ</div>109 110 <!-- Action buttons -->111 <div class="actions">112 <div class="icon-btn">113 <svg viewBox="0 0 24 24">114 <path d="M12 4v9" stroke="currentColor" stroke-width="2" fill="none"/>115 <path d="M8 9l4 4 4-4" stroke="currentColor" stroke-width="2" fill="none"/>116 <path d="M4 20h16" stroke="currentColor" stroke-width="2" fill="none"/>117 </svg>118 </div>119 <div class="icon-btn">120 <svg viewBox="0 0 24 24">121 <path d="M4 20l6-2 8-8-4-4-8 8-2 6z" stroke="currentColor" stroke-width="2" fill="none"/>122 <path d="M14 6l4 4" stroke="currentColor" stroke-width="2" fill="none"/>123 </svg>124 </div>125 <div class="icon-btn play">126 <svg viewBox="0 0 24 24">127 <path d="M8 5l11 7-11 7V5z" fill="currentColor"/>128 </svg>129 </div>130 <div class="icon-btn">131 <svg viewBox="0 0 24 24">132 <path d="M4 12h8" stroke="currentColor" stroke-width="2" fill="none"/>133 <path d="M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" fill="none"/>134 </svg>135 </div>136 <div class="icon-btn">137 <svg viewBox="0 0 24 24">138 <circle cx="12" cy="5" r="2" fill="currentColor"/>139 <circle cx="12" cy="12" r="2" fill="currentColor"/>140 <circle cx="12" cy="19" r="2" fill="currentColor"/>141 </svg>142 </div>143 </div>144 145 <!-- Content list -->146 <div class="section">147 <div class="list-item">148 <div class="thumb" style="background:#333; color:#fff;">+</div>149 <div class="list-text">150 <div class="list-title">Add a song</div>151 </div>152 </div>153 154 <div class="list-item">155 <div class="thumb">[IMG: Apna Bana Le]</div>156 <div class="list-text">157 <div class="list-title">Apna Bana Le (From "Bhediya")</div>158 <div class="list-sub">Arijit Singh & Sachin-Jigar</div>159 </div>160 <div class="more-btn">161 <svg viewBox="0 0 24 24">162 <circle cx="12" cy="6" r="2" fill="currentColor"/>163 <circle cx="12" cy="12" r="2" fill="currentColor"/>164 <circle cx="12" cy="18" r="2" fill="currentColor"/>165 </svg>166 </div>167 </div>168 169 <div class="suggest-header">Suggestions</div>170 171 <div class="suggest-item">172 <div class="thumb">[IMG: Aane Se Uske Aaye Bahar]</div>173 <div class="list-text">174 <div class="list-title">Aane Se Uske Aaye Bahar</div>175 <div class="list-sub">Mohammed Rafi</div>176 </div>177 <div class="add">178 <svg viewBox="0 0 24 24">179 <path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2" fill="none"/>180 </svg>181 </div>182 </div>183 184 <div class="suggest-item">185 <div class="thumb">[IMG: Imagine (Ultimate Mix)]</div>186 <div class="list-text">187 <div class="list-title">Imagine (Ultimate Mix)</div>188 <div class="list-sub">John Lennon</div>189 </div>190 <div class="add">191 <svg viewBox="0 0 24 24">192 <path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2" fill="none"/>193 </svg>194 </div>195 </div>196 </div>197 198 <!-- Mini player -->199 <div class="mini-player">200 <div class="thumb">[IMG: Tere Vaaste - Unplugged]</div>201 <div class="meta">202 <div class="t">Tere Vaaste - Unplugged</div>203 <div class="s">Varun Jain</div>204 </div>205 <div class="controls">206 <div class="btn">207 <svg viewBox="0 0 24 24">208 <rect x="3" y="5" width="14" height="10" rx="2" ry="2" fill="none" stroke="currentColor" stroke-width="2"/>209 <path d="M3 19c4 0 7 3 7 3" stroke="currentColor" stroke-width="2" fill="none"/>210 <path d="M3 16c3 0 5 2 5 2" stroke="currentColor" stroke-width="2" fill="none"/>211 <path d="M3 13c2 0 3 1 3 1" stroke="currentColor" stroke-width="2" fill="none"/>212 </svg>213 </div>214 <div class="btn" style="background:#fff;">215 <svg viewBox="0 0 24 24">216 <path d="M8 5l11 7-11 7V5z" fill="#000"/>217 </svg>218 </div>219 </div>220 </div>221 222 <!-- Bottom navigation -->223 <div class="bottom-nav">224 <div class="nav-item">225 <svg viewBox="0 0 24 24">226 <path d="M3 11l9-7 9 7v9H3v-9z" stroke="currentColor" stroke-width="2" fill="none"/>227 <path d="M9 20v-6h6v6" stroke="currentColor" stroke-width="2" fill="none"/>228 </svg>229 <div>Home</div>230 </div>231 <div class="nav-item">232 <svg viewBox="0 0 24 24">233 <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2" fill="none"/>234 <path d="M12 7l3 5-5 3 2-8z" fill="currentColor"/>235 </svg>236 <div>Explore</div>237 </div>238 <div class="nav-item active">239 <svg viewBox="0 0 24 24">240 <path d="M9 4v10a3 3 0 1 0 2-2" stroke="currentColor" stroke-width="2" fill="none"/>241 <circle cx="7" cy="17" r="3" stroke="currentColor" stroke-width="2" fill="none"/>242 </svg>243 <div>Library</div>244 </div>245 <div class="nav-item">246 <svg viewBox="0 0 24 24">247 <path d="M12 2l1.5 4.5L18 8l-4.5 1.5L12 14l-1.5-4.5L6 8l4.5-1.5L12 2z" stroke="currentColor" stroke-width="2" fill="none"/>248 </svg>249 <div>Upgrade</div>250 </div>251 </div>252 <div class="gesture"></div>253</div>254</body>255</html>