GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Playlist Screen Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: linear-gradient(180deg, #222 0%, #1a1a1a 30%, #101010 100%);11 color: #fff;12 }13 .status-bar {14 position: absolute; top: 0; left: 0; width: 100%; height: 110px;15 display: flex; align-items: center; justify-content: space-between;16 padding: 0 36px; color: #fff; font-weight: 600; font-size: 36px;17 opacity: 0.95;18 }19 .status-icons { display: flex; align-items: center; gap: 26px; }20 .icon { width: 42px; height: 42px; fill: #fff; }21 .content { position: relative; padding: 120px 44px 240px; }22 .header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }23 .header-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.06); border-radius: 36px; }24 .cover {25 width: 800px; height: 800px; margin: 0 auto 36px;26 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575;27 display: flex; align-items: center; justify-content: center; font-size: 36px;28 }29 .title { text-align: center; font-size: 64px; font-weight: 800; margin-top: 8px; }30 .sub-row { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 12px 0 40px; }31 .avatar-sm { width: 48px; height: 48px; border-radius: 50%; background: #546E7A; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #e0e0e0; }32 .username { color: #ffb74d; font-size: 34px; font-weight: 700; }33 .actions { display: flex; justify-content: space-around; margin: 24px 0 36px; text-align: center; }34 .action { width: 200px; }35 .action .icon { width: 56px; height: 56px; }36 .action label { display: block; margin-top: 12px; color: #d0d0d0; font-size: 30px; }37 .play-actions { display: flex; gap: 32px; justify-content: center; margin: 24px 0 40px; }38 .pill {39 flex: 0 0 430px; height: 120px; border-radius: 60px; background: #2b2b2b;40 display: flex; align-items: center; justify-content: center; gap: 18px;41 font-size: 36px; font-weight: 700; color: #fff;42 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);43 }44 .pill .icon { width: 48px; height: 48px; fill: #ffb74d; }45 .separator { height: 2px; background: #2a2a2a; margin: 28px 0; }46 .track-item {47 display: flex; align-items: center; gap: 22px; padding: 24px 12px;48 }49 .track-thumb {50 width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD;51 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px;52 }53 .track-num { color: #ffb74d; font-weight: 800; font-size: 36px; margin-right: 10px; }54 .track-text { flex: 1; }55 .track-title { font-size: 40px; font-weight: 700; }56 .track-sub { font-size: 32px; color: #bdbdbd; margin-top: 6px; }57 .track-actions { display: flex; align-items: center; gap: 26px; }58 .heart { width: 46px; height: 46px; fill: none; stroke: #ddd; stroke-width: 4px; }59 .dots { width: 10px; height: 46px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }60 .dots span { width: 10px; height: 10px; background: #d0d0d0; border-radius: 50%; display: block; }61 .profile-card { display: flex; align-items: center; gap: 24px; padding: 26px 12px; }62 .avatar-lg { width: 120px; height: 120px; border-radius: 60px; background: #607D8B; color: #fff; font-weight: 800; font-size: 56px; display: flex; align-items: center; justify-content: center; }63 .profile-text .name { font-size: 40px; font-weight: 700; }64 .profile-text .subs { font-size: 30px; color: #ffb74d; margin-top: 6px; }65 .tag { display: inline-block; padding: 16px 24px; background: #2b2b2b; border-radius: 16px; font-weight: 800; letter-spacing: 1px; margin: 18px 0 30px; }66 .ad-carousel {67 background: #1b1b1b; border-top: 1px solid #2a2a2a; border-bottom: 1px solid #2a2a2a;68 padding: 20px; display: flex; align-items: center; gap: 16px;69 }70 .ad-img {71 width: 160px; height: 140px; background: #E0E0E0; border: 1px solid #BDBDBD;72 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px; border-radius: 8px;73 }74 .ad-spacer { flex: 1; }75 .ad-play { width: 72px; height: 72px; border-radius: 36px; background: #2b2b2b; display: flex; align-items: center; justify-content: center; }76 .bottom-nav {77 position: absolute; bottom: 0; left: 0; width: 100%; height: 240px; background: #141414;78 border-top: 1px solid #2a2a2a; display: flex; flex-direction: column; justify-content: space-between;79 }80 .nav-row { display: flex; justify-content: space-around; align-items: center; height: 180px; padding: 0 24px; }81 .nav-item { width: 180px; text-align: center; color: #dcdcdc; }82 .nav-item .icon { width: 54px; height: 54px; margin: 0 auto 10px; }83 .nav-item label { font-size: 26px; }84 .active label { color: #ffb74d; font-weight: 700; }85 .library-badge {86 width: 64px; height: 64px; border-radius: 32px; border: 4px solid #ffb74d; color: #ffb74d; display: inline-flex; align-items: center; justify-content: center; font-weight: 800;87 }88 .home-indicator {89 height: 8px; width: 320px; background: #fff; border-radius: 8px; margin: 0 auto 20px; opacity: 0.9;90 }91</style>92</head>93<body>94<div id="render-target">95 96 <!-- Status bar -->97 <div class="status-bar">98 <div>12:16</div>99 <div class="status-icons">100 <!-- Minimal mail icon -->101 <svg class="icon" viewBox="0 0 24 24"><path d="M2 5h20v14H2z" fill="none" stroke="#fff" stroke-width="2"/><path d="M2 6l10 7 10-7" fill="none" stroke="#fff" stroke-width="2"/></svg>102 <!-- Network icon -->103 <svg class="icon" viewBox="0 0 24 24"><path d="M4 16h2v2H4zM9 12h2v6H9zM14 9h2v9h-2zM19 5h2v13h-2z" fill="#fff"/></svg>104 <!-- Video icon -->105 <svg class="icon" viewBox="0 0 24 24"><rect x="3" y="6" width="14" height="12" rx="2" fill="#fff"/><polygon points="18,9 23,12 18,15" fill="#fff"/></svg>106 <!-- Settings dot -->107 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"/><circle cx="12" cy="12" r="2" fill="#fff"/></svg>108 <!-- Wi-Fi -->109 <svg class="icon" viewBox="0 0 24 24"><path d="M2 8c10-7 20 0 20 0M6 12c6-4 12 0 12 0M10 16c2-1 4 0 4 0" fill="none" stroke="#fff" stroke-width="2"/><circle cx="12" cy="19" r="1.5" fill="#fff"/></svg>110 <!-- Battery -->111 <svg class="icon" viewBox="0 0 26 24"><rect x="3" y="6" width="18" height="12" rx="2" fill="none" stroke="#fff" stroke-width="2"/><rect x="22" y="10" width="3" height="4" fill="#fff"/></svg>112 </div>113 </div>114 115 <div class="content">116 <!-- Header controls -->117 <div class="header-row">118 <div class="header-btn">119 <svg class="icon" viewBox="0 0 24 24"><path d="M15 4L7 12l8 8" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>120 </div>121 <div class="header-btn">122 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="none" stroke="#fff" stroke-width="2"/><rect x="11" y="7" width="2" height="6" fill="#fff"/><circle cx="12" cy="16" r="1.5" fill="#fff"/></svg>123 </div>124 </div>125 126 <!-- Album cover -->127 <div class="cover">[IMG: Concert Photo]</div>128 129 <!-- Title and username -->130 <div class="title">My Lo-fi</div>131 <div class="sub-row">132 <div class="avatar-sm">C</div>133 <div class="username">dbwscratch.test.id8</div>134 </div>135 136 <!-- Action row -->137 <div class="actions">138 <div class="action">139 <svg class="icon" viewBox="0 0 24 24"><path d="M3 4h18v12H7l-4 4z" fill="none" stroke="#fff" stroke-width="2"/></svg>140 <label>Comments</label>141 </div>142 <div class="action">143 <svg class="icon" viewBox="0 0 24 24"><path d="M12 3v10M7 8l5 5 5-5" fill="none" stroke="#fff" stroke-width="2"/><rect x="4" y="16" width="16" height="4" rx="2" fill="#fff"/></svg>144 <label>Download</label>145 </div>146 <div class="action">147 <svg class="icon" viewBox="0 0 24 24"><path d="M3 12l8-3v6l-8-3zM13 8l8-3v14l-8-3z" fill="#fff"/></svg>148 <label>Share</label>149 </div>150 <div class="action">151 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5" fill="none" stroke="#fff" stroke-width="2"/><path d="M12 1v4M12 19v4M1 12h4M19 12h4M4.2 4.2l2.8 2.8M17 17l2.8 2.8M19.8 4.2L17 7M7 17l-2.8 2.8" stroke="#fff" stroke-width="2"/></svg>152 <label>Edit</label>153 </div>154 </div>155 156 <!-- Play / Shuffle -->157 <div class="play-actions">158 <div class="pill">159 <svg class="icon" viewBox="0 0 24 24"><polygon points="6,4 20,12 6,20" fill="#ffb74d"/></svg>160 <span>Play Playlist</span>161 </div>162 <div class="pill">163 <svg class="icon" viewBox="0 0 24 24"><path d="M3 6h6l4 5h8M3 18h6l4-5h8" fill="none" stroke="#ffb74d" stroke-width="2"/><path d="M19 5v4M19 15v4" fill="none" stroke="#ffb74d" stroke-width="2"/></svg>164 <span>Shuffle</span>165 </div>166 </div>167 168 <div class="separator"></div>169 170 <!-- Track list item -->171 <div class="track-item">172 <span class="track-num">1.</span>173 <div class="track-thumb">[IMG: Album Art]</div>174 <div class="track-text">175 <div class="track-title">GOLd</div>176 <div class="track-sub">Ryan</div>177 </div>178 <div class="track-actions">179 <svg class="heart" viewBox="0 0 24 24"><path d="M12 21s-8-5.5-8-11a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 5.5-8 11-8 11z"/></svg>180 <div class="dots"><span></span><span></span><span></span></div>181 </div>182 </div>183 184 <div class="separator"></div>185 186 <!-- Profile card -->187 <div class="profile-card">188 <div class="avatar-lg">C</div>189 <div class="profile-text">190 <div class="name">dbwscratch.test.id8</div>191 <div class="subs">0 Followers</div>192 </div>193 </div>194 195 <div class="tag">#OTHER</div>196 197 <!-- Ad carousel -->198 <div class="ad-carousel">199 <div class="ad-img">[IMG: Myntra Logo Ad]</div>200 <div class="ad-img">[IMG: Shoe Ad]</div>201 <div class="ad-img">[IMG: Shoe Ad]</div>202 <div class="ad-img">[IMG: Shoe Ad]</div>203 <div class="ad-img">[IMG: Shoe Ad]</div>204 <div class="ad-img">[IMG: Shoe Ad]</div>205 <div class="ad-spacer"></div>206 <div class="ad-play">207 <svg class="icon" viewBox="0 0 24 24"><polygon points="8,5 19,12 8,19" fill="#fff"/></svg>208 </div>209 <div class="dots" style="margin-left:16px;"><span></span><span></span><span></span></div>210 </div>211 212 </div>213 214 <!-- Bottom navigation -->215 <div class="bottom-nav">216 <div class="nav-row">217 <div class="nav-item">218 <svg class="icon" viewBox="0 0 24 24"><path d="M12 2c-2 3-3 4-3 6a5 5 0 0 0 10 0c0-2-1-3-3-6-1 2-2 3-4 0z" fill="#fff"/></svg>219 <label>Discover</label>220 </div>221 <div class="nav-item">222 <svg class="icon" viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="2" fill="#fff"/><rect x="4" y="11" width="16" height="2" fill="#fff"/><rect x="4" y="17" width="12" height="2" fill="#fff"/></svg>223 <label>Playlists</label>224 </div>225 <div class="nav-item">226 <svg class="icon" viewBox="0 0 24 24"><circle cx="10" cy="10" r="6" fill="none" stroke="#fff" stroke-width="2"/><path d="M15 15l6 6" fill="none" stroke="#fff" stroke-width="2"/></svg>227 <label>Search</label>228 </div>229 <div class="nav-item">230 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4" fill="#fff"/><path d="M4 22c2-5 14-5 16 0" fill="none" stroke="#fff" stroke-width="2"/></svg>231 <label>Feed</label>232 </div>233 <div class="nav-item active">234 <div class="library-badge">C</div>235 <label>My Library</label>236 </div>237 </div>238 <div class="home-indicator"></div>239 </div>240 241</div>242</body>243</html>