GD-ML/AndroidCode

1<!DOCTYPE html>2<html>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; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: linear-gradient(180deg, #5a3f43 0%, #2d2325 25%, #181818 65%, #121212 100%);15    color: #fff;16  }17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    height: 120px;22    width: 100%;23    padding: 0 40px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #ffffffcc;28    font-size: 36px;29  }30  .status-right {31    display: flex;32    gap: 34px;33    align-items: center;34  }35  .icon {36    width: 48px; height: 48px;37  }38  .back-btn {39    position: absolute; left: 30px; top: 140px;40    width: 64px; height: 64px; cursor: pointer;41  }42  .collage {43    position: absolute; left: 140px; top: 180px; width: 820px; height: 560px;44  }45  .album {46    position: absolute;47    width: 340px; height: 520px;48    background: #E0E0E0;49    border: 1px solid #BDBDBD;50    display: flex; align-items: center; justify-content: center;51    color: #757575; font-size: 28px; text-align: center; padding: 10px;52  }53  .album.a1 { left: 0; top: 20px; }54  .album.a2 { left: 260px; top: 0; }55  .album.a3 { left: 520px; top: 40px; }56  .title {57    position: absolute; left: 60px; top: 820px;58    font-size: 84px; font-weight: 800; letter-spacing: 1px;59  }60  .meta-row {61    position: absolute; left: 60px; top: 980px; display: flex; align-items: center; gap: 26px;62    color: #ffffffde; font-size: 36px;63  }64  .avatar {65    width: 52px; height: 52px; border-radius: 26px; background: #b79be6; color: #1e1e1e; display: flex; align-items: center; justify-content: center; font-weight: 700;66  }67  .globe { width: 40px; height: 40px; opacity: 0.8; }68  .controls-row {69    position: absolute; left: 60px; top: 1090px; display: flex; align-items: center; gap: 36px;70  }71  .pill {72    padding: 22px 36px; border: 2px solid #bfbfbf; border-radius: 40px; color: #fff; font-size: 34px; background: transparent;73  }74  .icon-btn {75    width: 70px; height: 70px; border-radius: 35px; background: #2a2a2a; display: flex; align-items: center; justify-content: center;76  }77  .icon-ghost { background: transparent; }78  .add-row {79    position: absolute; left: 60px; top: 1300px; display: flex; align-items: center; gap: 28px; color: #ffffffde;80  }81  .add-square {82    width: 120px; height: 120px; background: #3b3b3b; border-radius: 12px; display: flex; align-items: center; justify-content: center;83  }84  .add-row span { font-size: 44px; }85  .track {86    position: absolute; left: 60px; top: 1460px; right: 60px; color: #ddd;87  }88  .track-head { display: flex; gap: 28px; }89  .cover-sm {90    width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px; text-align: center;91    border-radius: 10px;92  }93  .track-info { flex: 1; }94  .track-title { color: #1ed760; font-size: 40px; line-height: 1.2; margin-top: -6px; }95  .track-sub { color: #aaaaaa; font-size: 32px; margin-top: 8px; }96  .track-desc { color: #b5b5b5; font-size: 30px; margin-top: 16px; line-height: 1.35; max-width: 860px; }97  .track-meta { color: #bdbdbd; font-size: 30px; margin-top: 18px; display: flex; align-items: center; gap: 18px; }98  .progress {99    width: 280px; height: 12px; background: #3a3a3a; border-radius: 6px; overflow: hidden;100  }101  .progress > div { width: 35%; height: 100%; background: #1ed760; opacity: 0.4; }102  .more-vert { width: 60px; height: 60px; }103  .actions {104    position: absolute; left: 60px; top: 1760px; display: flex; align-items: center; gap: 40px;105  }106  .round {107    width: 90px; height: 90px; border-radius: 45px; background: #2a2a2a; display: flex; align-items: center; justify-content: center;108  }109  .pause-fab {110    position: absolute; right: 40px; top: 1660px; width: 140px; height: 140px; border-radius: 70px; background: #1ed760; display: flex; align-items: center; justify-content: center;111  }112  .mini-player {113    position: absolute; left: 30px; right: 30px; top: 1940px; height: 180px; background: #2b2b2b; border-radius: 22px; display: flex; align-items: center; padding: 24px 28px; gap: 24px; color: #ddd;114    box-shadow: 0 8px 20px #00000055 inset;115  }116  .mini-text { flex: 1; }117  .mini-title { font-size: 36px; color: #eaeaea; }118  .mini-sub { font-size: 30px; color: #a7a7a7; margin-top: 6px; }119  .bottom-nav {120    position: absolute; left: 0; bottom: 0; width: 100%; height: 260px; background: #0f0f0f; border-top: 1px solid #2a2a2a;121    display: flex; align-items: center; justify-content: space-around;122  }123  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; color: #9c9c9c; }124  .nav-item.active { color: #ffffff; }125  .nav-icon { width: 64px; height: 64px; }126  .gesture {127    position: absolute; bottom: 270px; left: 50%; transform: translateX(-50%);128    width: 300px; height: 16px; border-radius: 8px; background: #f0f0f022;129  }130</style>131</head>132<body>133<div id="render-target">134 135  <div class="status-bar">136    <div>11:13</div>137    <div class="status-right">138      <div style="font-size:30px;">oyo</div>139      <div style="font-size:30px;">M</div>140      <svg class="icon" viewBox="0 0 24 24" fill="#ffffffcc"><path d="M12 3c4.97 0 9 4.03 9 9h-2c0-3.86-3.14-7-7-7s-7 3.14-7 7H3c0-4.97 4.03-9 9-9zm0 6c1.66 0 3 1.34 3 3h-2a1 1 0 0 0-1-1 1 1 0 0 0-1 1H9c0-1.66 1.34-3 3-3z"/></svg>141      <svg class="icon" viewBox="0 0 24 24" fill="#ffffffcc"><path d="M16 4H8a2 2 0 0 0-2 2v12l6-3 6 3V6a2 2 0 0 0-2-2z"/></svg>142    </div>143  </div>144 145  <svg class="back-btn" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">146    <path d="M15 18l-6-6 6-6"/>147  </svg>148 149  <div class="collage">150    <div class="album a1">[IMG: Jazz Album Art]</div>151    <div class="album a2">[IMG: Classic Jazz Cover]</div>152    <div class="album a3">[IMG: Quartet Cover]</div>153  </div>154 155  <div class="title">JAZZ MUSIC</div>156 157  <div class="meta-row">158    <div class="avatar">C</div>159    <div style="font-weight:700;">Cole</div>160    <svg class="globe" viewBox="0 0 24 24" fill="none" stroke="#ffffffcc" stroke-width="2">161      <circle cx="12" cy="12" r="9"></circle>162      <path d="M3 12h18M12 3a12 12 0 0 0 0 18M12 3a12 12 0 0 1 0 18"></path>163    </svg>164    <div>14min</div>165  </div>166 167  <div class="controls-row">168    <div class="pill">Enhance</div>169    <div class="icon-btn">170      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">171        <circle cx="12" cy="8" r="3"></circle>172        <path d="M5 20a7 7 0 0 1 14 0"></path>173        <path d="M19 7v4M21 9h-4"></path>174      </svg>175    </div>176    <div class="icon-btn icon-ghost">177      <svg class="icon" viewBox="0 0 24 24" fill="#ffffffcc">178        <circle cx="12" cy="5" r="2"></circle>179        <circle cx="12" cy="12" r="2"></circle>180        <circle cx="12" cy="19" r="2"></circle>181      </svg>182    </div>183  </div>184 185  <div class="add-row">186    <div class="add-square">187      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4">188        <path d="M12 5v14M5 12h14"></path>189      </svg>190    </div>191    <span>Add to this playlist</span>192  </div>193 194  <div class="track">195    <div class="track-head">196      <div class="cover-sm">[IMG: Relaxing Silhouette]</div>197      <div class="track-info">198        <div class="track-title">Relaxing Music | Spa Music, Massage, Yoga, Sleep Music, Stress Relief Music, Zen</div>199        <div class="track-sub">The Sleep Zone Podcast</div>200        <div class="track-desc">Close your eyes, take a minimum of six slow deep breaths, and begin focusing on relaxing every inch of your body...</div>201        <div class="track-meta">202          <span>28 Feb · 1 hr 9 mins left</span>203          <div class="progress"><div></div></div>204        </div>205      </div>206      <svg class="more-vert" viewBox="0 0 24 24" fill="#ffffffb0">207        <circle cx="12" cy="5" r="2"></circle>208        <circle cx="12" cy="12" r="2"></circle>209        <circle cx="12" cy="19" r="2"></circle>210      </svg>211    </div>212  </div>213 214  <div class="actions">215    <div class="round">216      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5">217        <path d="M12 5v14M5 12h14"></path>218      </svg>219    </div>220    <div class="round">221      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.5">222        <path d="M12 3v14"></path>223        <path d="M5 14l7 7 7-7"></path>224      </svg>225    </div>226    <div class="round">227      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">228        <circle cx="18" cy="5" r="3"></circle>229        <circle cx="6" cy="12" r="3"></circle>230        <circle cx="18" cy="19" r="3"></circle>231        <path d="M8.6 10.9l6.8-3.8M8.6 13.1l6.8 3.8"></path>232      </svg>233    </div>234    <div class="round">235      <svg class="icon" viewBox="0 0 24 24" fill="#ffffffcc">236        <circle cx="12" cy="5" r="2"></circle>237        <circle cx="12" cy="12" r="2"></circle>238        <circle cx="12" cy="19" r="2"></circle>239      </svg>240    </div>241  </div>242 243  <div class="pause-fab">244    <svg viewBox="0 0 24 24" width="90" height="90" fill="#0f0f0f">245      <rect x="6" y="4" width="4" height="16" rx="1"></rect>246      <rect x="14" y="4" width="4" height="16" rx="1"></rect>247    </svg>248  </div>249 250  <div class="mini-player">251    <div class="cover-sm" style="width:120px;height:120px;">[IMG: Relaxing Silhouette]</div>252    <div class="mini-text">253      <div class="mini-title">Music | Spa Music, Massage, Yoga, Sleep</div>254      <div class="mini-sub">The Sleep Zone Podcast</div>255    </div>256    <svg class="icon" viewBox="0 0 24 24" width="64" height="64" fill="none" stroke="#cfcfcf" stroke-width="2">257      <rect x="3" y="6" width="14" height="12" rx="2"></rect>258      <path d="M20 7v10M20 12l3 2-3 2"></path>259    </svg>260    <svg viewBox="0 0 24 24" width="64" height="64" fill="#cfcfcf">261      <rect x="6" y="4" width="4" height="16" rx="1"></rect>262      <rect x="14" y="4" width="4" height="16" rx="1"></rect>263    </svg>264  </div>265 266  <div class="bottom-nav">267    <div class="nav-item">268      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#9c9c9c" stroke-width="2">269        <path d="M3 10l9-7 9 7"></path>270        <path d="M5 10v9h14v-9"></path>271      </svg>272      <div>Home</div>273    </div>274    <div class="nav-item">275      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#9c9c9c" stroke-width="2">276        <circle cx="11" cy="11" r="7"></circle>277        <path d="M20 20l-4-4"></path>278      </svg>279      <div>Search</div>280    </div>281    <div class="nav-item active">282      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">283        <path d="M6 5h12M6 12h12M6 19h12"></path>284      </svg>285      <div>Your Library</div>286    </div>287    <div class="nav-item">288      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="#9c9c9c" stroke-width="2">289        <circle cx="12" cy="12" r="9"></circle>290        <path d="M7 10c3-2 7-2 10 0M8 14c3-2 7-2 8 0M9 17c3-1 5-1 6 0"></path>291      </svg>292      <div>Premium</div>293    </div>294  </div>295 296  <div class="gesture"></div>297 298</div>299</body>300</html>