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.0">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: #0d0d0d; color: #fff;12 }13 14 /* Top bars */15 .status-bar {16 height: 90px; padding: 0 36px; display: flex; align-items: center; justify-content: space-between;17 color: #eaeaea; font-size: 34px; letter-spacing: 1px;18 }19 .status-right { display: flex; align-items: center; gap: 26px; }20 .header {21 height: 120px; padding: 0 36px; display: flex; align-items: center; justify-content: space-between;22 }23 .header-left { display: flex; align-items: center; gap: 28px; }24 .avatar {25 width: 60px; height: 60px; border-radius: 50%; background: #c3542f; display: flex; align-items: center; justify-content: center;26 font-weight: bold;27 }28 .hdr-text { line-height: 1.25; }29 .hdr-title { font-size: 36px; font-weight: 600; }30 .hdr-sub { font-size: 28px; color: #bdbdbd; }31 32 /* Playlist cover */33 .cover-wrap { padding: 30px 90px 0; }34 .cover {35 width: 900px; height: 540px; border-radius: 26px; background: #262626; display: flex; align-items: center; justify-content: center;36 position: relative;37 }38 .cover .img-ph {39 width: 90%; height: 84%; background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;40 display: flex; align-items: center; justify-content: center; border-radius: 16px;41 font-size: 30px;42 }43 .cover svg { position: absolute; width: 140px; height: 140px; opacity: 0.7; }44 45 /* Title and actions */46 .title { text-align: center; font-size: 84px; font-weight: 800; margin-top: 40px; letter-spacing: 2px; }47 .actions { margin-top: 24px; display: flex; justify-content: center; gap: 36px; }48 .action-btn {49 width: 120px; height: 120px; border-radius: 60px; background: #1a1a1a; display: flex; align-items: center; justify-content: center;50 }51 .action-btn svg { width: 56px; height: 56px; }52 53 /* Add a song row */54 .add-row { margin: 42px 90px 16px; display: flex; align-items: center; gap: 30px; }55 .add-square {56 width: 110px; height: 110px; background: #292929; border-radius: 12px; display: flex; align-items: center; justify-content: center;57 }58 .add-label { font-size: 40px; }59 60 .empty-note { text-align: center; color: #9f9f9f; font-size: 34px; margin: 40px 0 20px; }61 62 /* Suggestions */63 .section-title { font-size: 64px; font-weight: 800; margin: 40px 90px 22px; }64 .suggest-list { padding: 0 90px; display: flex; flex-direction: column; gap: 30px; }65 .suggest-item { display: flex; align-items: center; justify-content: space-between; }66 .si-left { display: flex; align-items: center; gap: 28px; }67 .album-ph {68 width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;69 display: flex; align-items: center; justify-content: center; font-size: 26px;70 }71 .si-text .title-text { font-size: 40px; font-weight: 700; }72 .si-text .sub-text { font-size: 30px; color: #bdbdbd; margin-top: 6px; }73 .si-right { display: flex; align-items: center; gap: 24px; }74 .small-ico svg { width: 46px; height: 46px; }75 76 /* Now playing bar */77 .now-playing {78 position: absolute; left: 0; bottom: 260px; width: 100%; height: 160px; background: #171717;79 display: flex; align-items: center; justify-content: space-between; padding: 0 36px;80 box-sizing: border-box;81 }82 .np-left { display: flex; align-items: center; gap: 26px; }83 .np-art {84 width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;85 display: flex; align-items: center; justify-content: center; font-size: 24px;86 }87 .np-text { line-height: 1.2; }88 .np-title { font-size: 38px; font-weight: 700; }89 .np-sub { font-size: 30px; color: #bdbdbd; }90 .np-right { display: flex; align-items: center; gap: 32px; }91 92 /* Bottom navigation */93 .bottom-nav {94 position: absolute; left: 0; bottom: 0; width: 100%; height: 260px; background: #0f0f0f; border-top: 1px solid #222;95 display: flex; align-items: center; justify-content: space-around;96 }97 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 18px; color: #e0e0e0; }98 .nav-item svg { width: 58px; height: 58px; }99 .nav-label { font-size: 28px; }100 101 /* Icons color */102 svg { fill: #ffffff; }103</style>104</head>105<body>106<div id="render-target">107 108 <!-- Status bar -->109 <div class="status-bar">110 <div>1:29</div>111 <div class="status-right">112 <!-- simple mobile signal icon -->113 <svg viewBox="0 0 24 24"><path d="M3 21h2v-2H3v2zm4 0h2v-6H7v6zm4 0h2v-10h-2v10zm4 0h2V7h-2v14zm4 0h2V3h-2v18z"/></svg>114 <!-- wifi -->115 <svg viewBox="0 0 24 24"><path d="M12 20l2-2h-4l2 2zm-7-7l1.5 1.5A9 9 0 0 1 17.5 14L19 13a11 11 0 0 0-14 0zM3 9l1.7 1.7a13 13 0 0 1 14.6 0L21 9a15 15 0 0 0-18 0z"/></svg>116 <!-- battery -->117 <svg viewBox="0 0 24 24"><path d="M2 8v8h16V8H2zm18 3v2h2v-2h-2z"/></svg>118 </div>119 </div>120 121 <!-- Header -->122 <div class="header">123 <div class="header-left">124 <!-- back arrow -->125 <svg viewBox="0 0 24 24" width="42" height="42"><path d="M15 18l-6-6 6-6v12z"/></svg>126 <div class="avatar">C</div>127 <div class="hdr-text">128 <div class="hdr-title">Cerebra Research</div>129 <div class="hdr-sub">Public</div>130 </div>131 </div>132 <!-- search icon -->133 <svg viewBox="0 0 24 24" width="48" height="48"><path d="M15.5 14h-.8l-.3-.3A6 6 0 1 0 6 15a6 6 0 0 0 8.2-5.6l.3.3v.8l5 5-1.5 1.5-5-5zm-5.5 0A4.5 4.5 0 1 1 10 5a4.5 4.5 0 0 1 0 9z"/></svg>134 </div>135 136 <!-- Cover -->137 <div class="cover-wrap">138 <div class="cover">139 <div class="img-ph">[IMG: Playlist Cover]</div>140 <!-- simple playlist play icon -->141 <svg viewBox="0 0 24 24"><path d="M3 6h12v2H3V6zm0 5h12v2H3v-2zm0 5h8v2H3v-2zm14-7l6 4-6 4V9z"/></svg>142 </div>143 </div>144 145 <!-- Title -->146 <div class="title">XYZ</div>147 148 <!-- Action buttons -->149 <div class="actions">150 <div class="action-btn">151 <!-- download -->152 <svg viewBox="0 0 24 24"><path d="M5 19h14v2H5v-2zm7-16h-2v8H6l6 6 6-6h-4V3z"/></svg>153 </div>154 <div class="action-btn">155 <!-- pencil -->156 <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>157 </div>158 <div class="action-btn">159 <!-- share -->160 <svg viewBox="0 0 24 24"><path d="M18 16a3 3 0 0 0-2.53 1.39L8.91 13.7a3.05 3.05 0 0 0 0-3.41l6.56-3.69A3 3 0 1 0 15 5a3 3 0 0 0 .06.59L8.5 9.28a3 3 0 1 0 0 5.44l6.56 3.69A3 3 0 1 0 18 16z"/></svg>161 </div>162 <div class="action-btn">163 <!-- more vertical -->164 <svg viewBox="0 0 24 24"><path d="M12 5a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>165 </div>166 </div>167 168 <!-- Add song -->169 <div class="add-row">170 <div class="add-square">171 <svg viewBox="0 0 24 24" width="64" height="64"><path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2h6z"/></svg>172 </div>173 <div class="add-label">Add a song</div>174 </div>175 176 <div class="empty-note">Nothing saved yet</div>177 178 <!-- Suggestions -->179 <div class="section-title">Suggestions</div>180 <div class="suggest-list">181 <div class="suggest-item">182 <div class="si-left">183 <div class="album-ph">[IMG: Album Art]</div>184 <div class="si-text">185 <div class="title-text">Apna Bana Le (From "Bhediya")</div>186 <div class="sub-text">Arijit Singh & Sachin-Jigar</div>187 </div>188 </div>189 <div class="si-right">190 <div class="small-ico">191 <!-- add to playlist icon -->192 <svg viewBox="0 0 24 24"><path d="M3 6h14v2H3V6zm0 5h14v2H3v-2zm0 5h10v2H3v-2zm16-4v3h3v2h-3v3h-2v-3h-3v-2h3v-3h2z"/></svg>193 </div>194 </div>195 </div>196 197 <div class="suggest-item">198 <div class="si-left">199 <div class="album-ph">[IMG: Album Art]</div>200 <div class="si-text">201 <div class="title-text">Aane Se Uske Aaye Bahar</div>202 <div class="sub-text">Mohammed Rafi</div>203 </div>204 </div>205 <div class="si-right">206 <div class="small-ico">207 <svg viewBox="0 0 24 24"><path d="M3 6h14v2H3V6zm0 5h14v2H3v-2zm0 5h10v2H3v-2zm16-4v3h3v2h-3v3h-2v-3h-3v-2h3v-3h2z"/></svg>208 </div>209 </div>210 </div>211 212 <div class="suggest-item">213 <div class="si-left">214 <div class="album-ph">[IMG: Album Art]</div>215 <div class="si-text">216 <div class="title-text">Tere Vaaste - Unplugged</div>217 <div class="sub-text">Varun Jain</div>218 </div>219 </div>220 <div class="si-right">221 <div class="small-ico">222 <svg viewBox="0 0 24 24"><path d="M3 6h14v2H3V6zm0 5h14v2H3v-2zm0 5h10v2H3v-2zm16-4v3h3v2h-3v3h-2v-3h-3v-2h3v-3h2z"/></svg>223 </div>224 </div>225 </div>226 </div>227 228 <!-- Now playing bar -->229 <div class="now-playing">230 <div class="np-left">231 <div class="np-art">[IMG: Art]</div>232 <div class="np-text">233 <div class="np-title">Tere Vaaste - Unplugged</div>234 <div class="np-sub">Varun Jain</div>235 </div>236 </div>237 <div class="np-right">238 <!-- cast -->239 <svg viewBox="0 0 24 24"><path d="M21 3H3v4h2V5h14v14h-2v-2H3v4h18V3zM2 13v2c2.8 0 5 2.2 5 5h2c0-3.9-3.1-7-7-7zm0-4v2c5.5 0 10 4.5 10 10h2C14 15.3 8.7 10 2 9zm0-4v2c8.2 0 15 6.8 15 15h2C19 11.4 12.6 5 2 5z"/></svg>240 <!-- play -->241 <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7-11-7z"/></svg>242 </div>243 </div>244 245 <!-- Bottom navigation -->246 <div class="bottom-nav">247 <div class="nav-item">248 <svg viewBox="0 0 24 24"><path d="M12 3l9 8h-3v9h-12v-9H3l9-8z"/></svg>249 <div class="nav-label">Home</div>250 </div>251 <div class="nav-item">252 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 3-6 3-3 6-3-6-6-3 6-3 3-6z"/></svg>253 <div class="nav-label">Explore</div>254 </div>255 <div class="nav-item">256 <svg viewBox="0 0 24 24"><path d="M5 4h14v2H5V4zm0 4h14v2H5V8zm0 4h8v2H5v-2zm10 0v6l4-3-4-3z"/></svg>257 <div class="nav-label">Library</div>258 </div>259 <div class="nav-item">260 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .9-4.5 4.4 1.1 6.7L12 17l-5.6 3 1.1-6.7L3 8.9 9 8l3-6z"/></svg>261 <div class="nav-label">Upgrade</div>262 </div>263 </div>264 265</div>266</body>267</html>