GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Spotify Playlist UI - Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px; height: 2400px; position: relative; overflow: hidden;9 background: linear-gradient(180deg, #34402e 0%, #1c261a 20%, #121212 60%, #0f0f0f 100%);10 color: #fff;11 }12 /* Status bar */13 .status-bar {14 position: absolute; top: 0; left: 0; width: 100%; height: 100px;15 display: flex; align-items: center; justify-content: space-between;16 padding: 0 32px; color: #fff; font-weight: 600; font-size: 36px;17 opacity: 0.95;18 }19 .status-right { display: flex; align-items: center; gap: 28px; }20 .top-back {21 position: absolute; top: 110px; left: 24px; width: 72px; height: 72px;22 display: flex; align-items: center; justify-content: center;23 }24 .mosaic {25 position: absolute; top: 160px; left: 160px; width: 760px; height: 760px;26 display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0;27 border-radius: 8px; overflow: hidden;28 }29 .album-tile {30 background: #E0E0E0; border: 1px solid #BDBDBD; color: #555;31 display: flex; align-items: center; justify-content: center; text-align: center;32 font-size: 26px; padding: 16px;33 }34 .page-title {35 position: absolute; top: 965px; left: 40px; font-size: 80px; font-weight: 800; letter-spacing: -1px;36 }37 .meta-row {38 position: absolute; top: 1060px; left: 40px; display: flex; align-items: center; gap: 18px;39 color: #cfcfcf; font-size: 32px;40 }41 .owner-dot {42 width: 44px; height: 44px; border-radius: 50%; background: #8a6cff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700;43 }44 .controls-row {45 position: absolute; top: 1140px; left: 32px; right: 32px;46 display: flex; align-items: center; justify-content: space-between;47 }48 .left-actions { display: flex; align-items: center; gap: 28px; }49 .pill {50 background: #2a2a2a; color: #fff; border: 1px solid #3a3a3a;51 padding: 20px 32px; border-radius: 32px; font-size: 32px; font-weight: 700;52 }53 .circle-btn {54 width: 72px; height: 72px; border-radius: 50%; background: #2a2a2a; border: 1px solid #3a3a3a;55 display: flex; align-items: center; justify-content: center;56 }57 .shuffle-group { display: flex; align-items: center; gap: 28px; }58 .play-btn {59 width: 136px; height: 136px; border-radius: 50%; background: #1DB954; box-shadow: 0 6px 16px rgba(0,0,0,0.4);60 display: flex; align-items: center; justify-content: center;61 }62 /* List */63 .list {64 position: absolute; top: 1260px; left: 24px; right: 24px; bottom: 280px; overflow-y: auto;65 }66 .add-row {67 display: flex; align-items: center; gap: 26px; padding: 20px; color: #e7e7e7; font-size: 40px; font-weight: 700;68 }69 .add-square { width: 120px; height: 120px; border-radius: 8px; background: #2a2a2a; border: 1px solid #3a3a3a; display: flex; align-items: center; justify-content: center; }70 .track {71 display: grid; grid-template-columns: 120px 1fr 60px; align-items: center;72 gap: 26px; padding: 22px 18px; border-radius: 10px;73 }74 .thumb {75 width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD; color: #555;76 display: flex; align-items: center; justify-content: center; font-size: 20px; text-align: center; padding: 6px;77 }78 .t-main { display: flex; flex-direction: column; gap: 8px; }79 .title { font-size: 36px; color: #fff; font-weight: 700; }80 .subline { font-size: 28px; color: #bdbdbd; display: flex; align-items: center; gap: 14px; }81 .badge { padding: 6px 12px; background: #2a2a2a; border: 1px solid #3a3a3a; border-radius: 6px; font-size: 22px; color: #cfcfcf; }82 .more-dot { width: 36px; height: 36px; border-radius: 50%; background: #2a2a2a; border: 1px solid #3a3a3a; display: flex; align-items: center; justify-content: center; }83 .now-playing {84 position: absolute; left: 20px; right: 20px; bottom: 210px; height: 140px;85 background: rgba(60,60,60,0.85); border: 1px solid #4a4a4a; border-radius: 22px;86 display: grid; grid-template-columns: 140px 1fr 240px; align-items: center; padding: 16px 22px; gap: 22px;87 backdrop-filter: blur(2px);88 }89 .np-cover { width: 108px; height: 108px; border-radius: 12px; background: #E0E0E0; border: 1px solid #BDBDBD; color: #555; display: flex; align-items: center; justify-content: center; font-size: 22px; padding: 6px; }90 .np-title { font-size: 32px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }91 .np-right { display: flex; align-items: center; justify-content: flex-end; gap: 24px; }92 /* Bottom nav */93 .bottom-nav {94 position: absolute; bottom: 0; left: 0; width: 100%; height: 180px; border-top: 1px solid #272727; background: #0e0e0e;95 display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; text-align: center;96 }97 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #bdbdbd; font-size: 28px; }98 .nav-item.active { color: #fff; }99 /* Simple icon styles */100 svg { fill: currentColor; }101</style>102</head>103<body>104<div id="render-target">105 106 <!-- Status Bar -->107 <div class="status-bar">108 <div>2:29</div>109 <div class="status-right">110 <div style="font-size:24px; display:flex; gap:8px; align-items:center;">111 <span style="border:1px solid #fff; border-radius:6px; padding:2px 6px;">99</span>112 </div>113 <!-- WiFi Icon -->114 <svg width="44" height="44" viewBox="0 0 24 24"><path d="M12 18.5c.9 0 1.5.6 1.5 1.5S12.9 21.5 12 21.5s-1.5-.6-1.5-1.5.6-1.5 1.5-1.5zm-6-6c3.3-3.2 8.7-3.2 12 0l-1.4 1.4c-2.6-2.5-6.6-2.5-9.2 0L6 12.5zm-3.1-3.1C7.7 4.7 16.3 4.7 21.1 9.4l-1.4 1.4c-3.9-3.8-10.6-3.8-14.4 0L2.9 9.4z"/></svg>115 <!-- Battery Icon -->116 <svg width="52" height="44" viewBox="0 0 28 24"><path d="M22 7h2c1.1 0 2 .9 2 2v6c0 1.1-.9 2-2 2h-2v-10zm-2 0H4c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2z"/></svg>117 </div>118 </div>119 120 <!-- Back Arrow -->121 <div class="top-back">122 <svg width="56" height="56" viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>123 </div>124 125 <!-- Album Mosaic -->126 <div class="mosaic">127 <div class="album-tile">[IMG: Kitty Kallen Story Album Cover]</div>128 <div class="album-tile">[IMG: Nat King Cole LOVE Album Cover]</div>129 <div class="album-tile">[IMG: Herb Alpert Whipped Cream Album Cover]</div>130 <div class="album-tile">[IMG: Sinatra Nothing But The Best Album Cover]</div>131 </div>132 133 <!-- Title -->134 <div class="page-title">Jazz Music 3</div>135 136 <!-- Metadata -->137 <div class="meta-row">138 <div class="owner-dot">C</div>139 <div>Cole</div>140 <!-- Globe icon -->141 <svg width="32" height="32" viewBox="0 0 24 24"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm0 2c1.7 0 3.2 4 3.2 8S13.7 18 12 18s-3.2-4-3.2-8S10.3 4 12 4zm-8 8c0-1.3.3-2.6.8-3.7h3.2c-.3 1.2-.4 2.4-.4 3.7s.1 2.5.4 3.7H4.8A8 8 0 014 12zm16 0c0 1.3-.3 2.6-.8 3.7h-3.2c.3-1.2.4-2.4.4-3.7s-.1-2.5-.4-3.7h3.2c.5 1.1.8 2.4.8 3.7z"/></svg>142 <div>16min</div>143 </div>144 145 <!-- Controls -->146 <div class="controls-row">147 <div class="left-actions">148 <div class="pill">Enhance</div>149 <div class="circle-btn">150 <!-- Download icon -->151 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M12 3v10m0 0l4-4m-4 4l-4-4" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 19h16" stroke="#fff" stroke-width="2"/></svg>152 </div>153 <div class="circle-btn">154 <!-- Add user icon -->155 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M12 12a4 4 0 100-8 4 4 0 000 8zm-7 8c0-3.3 3.8-5 7-5s7 1.7 7 5" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/><path d="M20 8v4m-2-2h4" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>156 </div>157 <div class="circle-btn">158 <!-- Kebab menu -->159 <svg width="36" height="36" viewBox="0 0 24 24"><circle cx="12" cy="6" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="18" r="2"/></svg>160 </div>161 </div>162 <div class="shuffle-group">163 <!-- Shuffle icon -->164 <svg width="56" height="56" viewBox="0 0 24 24"><path d="M4 4h4l10 10M14 4h6v6M4 20h4l3.5-3.5M14 20h6v-6" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>165 <div class="play-btn">166 <!-- Pause icon -->167 <svg width="64" height="64" viewBox="0 0 24 24"><path d="M8 5h3v14H8zM13 5h3v14h-3z" fill="#fff"/></svg>168 </div>169 </div>170 </div>171 172 <!-- Track List -->173 <div class="list">174 <div class="add-row">175 <div class="add-square">176 <svg width="56" height="56" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/></svg>177 </div>178 <div>Add to this playlist</div>179 </div>180 181 <div class="track">182 <div class="thumb">[IMG: Harry James Band Photo]</div>183 <div class="t-main">184 <div class="title">It's Been a Long, Long Time (with Harry...)</div>185 <div class="subline">186 <span class="badge">LYRICS</span>187 <span>Kitty Kallen, Harry James</span>188 </div>189 </div>190 <div class="more-dot">191 <svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>192 </div>193 </div>194 195 <div class="track">196 <div class="thumb">[IMG: Nat King Cole LOVE Single]</div>197 <div class="t-main">198 <div class="title">L-O-V-E</div>199 <div class="subline">200 <span class="badge">LYRICS</span>201 <span>Nat King Cole</span>202 </div>203 </div>204 <div class="more-dot">205 <svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>206 </div>207 </div>208 209 <div class="track">210 <div class="thumb">[IMG: Whipped Cream & Other Delights]</div>211 <div class="t-main">212 <div class="title">Ladyfingers</div>213 <div class="subline"><span>Herb Alpert & The Tijuana Brass</span></div>214 </div>215 <div class="more-dot">216 <svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>217 </div>218 </div>219 220 <div class="track">221 <div class="thumb">[IMG: Frank Sinatra Best Of Cover]</div>222 <div class="t-main">223 <div class="title">Theme From New York, New York</div>224 <div class="subline"><span>Frank Sinatra</span></div>225 </div>226 <div class="more-dot">227 <svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>228 </div>229 </div>230 231 <div class="track">232 <div class="thumb">[IMG: Blossom Dearie Album]</div>233 <div class="t-main">234 <div class="title">Lullaby of Birdland</div>235 <div class="subline">236 <span class="badge">LYRICS</span>237 <span>Mel Tormé</span>238 </div>239 </div>240 <div class="more-dot">241 <svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>242 </div>243 </div>244 </div>245 246 <!-- Now Playing Bar -->247 <div class="now-playing">248 <div class="np-cover">[IMG: Kitty Kallen]</div>249 <div class="np-title">Long, Long Time (with Harry Jam...)</div>250 <div class="np-right">251 <!-- Device icon -->252 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M3 6h18v10H3zM7 18h10v2H7z" fill="#fff"/></svg>253 <!-- Heart icon -->254 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M12 20s-6-4.4-8.4-6.8C1.3 11 2 8.5 4.2 7.6 6 6.9 7.9 7.5 9 9c1.1-1.5 3-2.1 4.8-1.4 2.2.9 2.9 3.4 1.6 5.6C18 15.6 12 20 12 20z" fill="#fff"/></svg>255 <!-- Pause icon -->256 <div class="circle-btn" style="width:72px;height:72px;background:#2a2a2a;border-color:#4a4a4a;">257 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M8 5h3v14H8zM13 5h3v14h-3z" fill="#fff"/></svg>258 </div>259 </div>260 </div>261 262 <!-- Bottom Navigation -->263 <div class="bottom-nav">264 <div class="nav-item">265 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2h-5v-6H10v6H5a2 2 0 0 1-2-2v-9z" fill="currentColor"/></svg>266 <div>Home</div>267 </div>268 <div class="nav-item">269 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16zm11 3-6-6" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg>270 <div>Search</div>271 </div>272 <div class="nav-item active">273 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z" fill="currentColor"/></svg>274 <div>Your Library</div>275 </div>276 <div class="nav-item">277 <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 2l7 6-7 6-7-6 7-6zm0 14l7 6H5l7-6z" fill="currentColor"/></svg>278 <div>Premium</div>279 </div>280 </div>281 282</div>283</body>284</html>