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 - Weekends meditation</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #0f0f0f;15 font-family: Arial, Helvetica, sans-serif;16 color: #fff;17 }18 .status-bar {19 height: 80px;20 padding: 0 32px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #eaeaea;25 font-size: 36px;26 }27 .status-icons {28 display: flex;29 gap: 18px;30 align-items: center;31 }32 .app-bar {33 height: 110px;34 padding: 0 24px;35 display: flex;36 align-items: center;37 justify-content: space-between;38 }39 .app-left, .app-right { display: flex; align-items: center; gap: 28px; }40 .icon-btn { width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center; border-radius: 32px; }41 .content {42 padding: 0 32px;43 }44 .hero {45 margin-top: 8px;46 border-radius: 28px;47 background: linear-gradient(180deg, #2e3b2e 0%, #0f0f0f 60%);48 padding: 24px 24px 40px 24px;49 }50 .banner {51 width: 100%;52 height: 520px;53 background: #E0E0E0;54 border: 1px solid #BDBDBD;55 border-radius: 28px;56 display: flex;57 align-items: center;58 justify-content: center;59 color: #757575;60 font-size: 36px;61 text-align: center;62 }63 .playlist-title {64 font-size: 64px;65 font-weight: 700;66 margin: 28px 8px 10px 8px;67 }68 .meta {69 display: flex;70 align-items: center;71 gap: 18px;72 color: #cfcfcf;73 margin: 0 8px 28px 8px;74 font-size: 34px;75 }76 .chip-row {77 display: flex;78 gap: 24px;79 margin: 6px 8px 32px 8px;80 }81 .btn {82 height: 110px;83 padding: 0 48px;84 border-radius: 60px;85 display: inline-flex;86 align-items: center;87 gap: 22px;88 font-size: 40px;89 font-weight: 600;90 border: 1px solid #2a2a2a;91 }92 .btn-primary { background: #fff; color: #000; }93 .btn-secondary { background: #262626; color: #fff; }94 .sort-row {95 display: flex;96 align-items: center;97 gap: 18px;98 padding: 28px 8px;99 border-top: 1px solid #232323;100 border-bottom: 1px solid #232323;101 color: #e0e0e0;102 font-size: 36px;103 }104 .list {105 padding: 10px 0 0 0;106 }107 .item {108 display: grid;109 grid-template-columns: 40px 360px 1fr 60px;110 gap: 22px;111 align-items: start;112 padding: 26px 8px;113 }114 .drag {115 width: 40px; height: 160px; display: flex; align-items: center; justify-content: center; opacity: .7;116 }117 .thumb-wrap { position: relative; width: 360px; height: 202px; border-radius: 22px; overflow: hidden; }118 .thumb {119 width: 100%; height: 100%;120 background: #E0E0E0;121 border: 1px solid #BDBDBD;122 display: flex; align-items: center; justify-content: center;123 color: #757575; font-size: 28px; text-align: center;124 }125 .duration {126 position: absolute; right: 12px; bottom: 12px;127 background: rgba(0,0,0,.85);128 color: #fff; font-size: 28px; padding: 6px 12px; border-radius: 10px;129 }130 .progress {131 position: absolute; left: 0; bottom: 0; height: 10px; background: #ff0000; width: 160px;132 border-top-right-radius: 4px;133 }134 .details { color: #fff; }135 .title {136 font-size: 36px; font-weight: 600; line-height: 1.25; margin-top: -2px;137 }138 .sub {139 margin-top: 10px; color: #bdbdbd; font-size: 30px;140 }141 .kebab { display: flex; align-items: start; justify-content: center; padding-top: 6px; }142 /* Bottom navigation */143 .bottom-nav {144 position: absolute; left: 0; right: 0; bottom: 0;145 height: 180px; border-top: 1px solid #202020; background: #141414;146 display: grid; grid-template-columns: repeat(5, 1fr);147 align-items: center; justify-items: center;148 color: #e5e5e5; font-size: 26px;149 }150 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; }151 .create {152 width: 108px; height: 108px; background: #2a2a2a; border-radius: 54px; display: flex; align-items: center; justify-content: center;153 }154 .home-indicator {155 position: absolute; bottom: 190px; left: 50%; transform: translateX(-50%);156 width: 320px; height: 12px; background: #e6e6e6; border-radius: 8px; opacity: .85;157 }158 /* Small helpers */159 .dot { width: 6px; height: 6px; border-radius: 50%; background: #cfcfcf; display: inline-block; margin: 0 10px; }160</style>161</head>162<body>163<div id="render-target">164 165 <!-- Status bar -->166 <div class="status-bar">167 <div>10:13</div>168 <div class="status-icons">169 <!-- simple tiny icons -->170 <svg width="34" height="34" viewBox="0 0 24 24" fill="#eaeaea"><path d="M7 22h10v-2H7v2zm-1-4h12V6l-3-3H9L6 6v12zM9 5h6v1H9V5z"/></svg>171 <svg width="34" height="34" viewBox="0 0 24 24" fill="#eaeaea"><path d="M20 8H4V6h16v2zm0 5H4v-2h16v2zm0 5H4v-2h16v2z"/></svg>172 <svg width="34" height="34" viewBox="0 0 24 24" fill="#eaeaea"><path d="M17 7H7V5h10v2zm0 4H7V9h10v2zm0 4H7v-2h10v2z"/></svg>173 <svg width="34" height="34" viewBox="0 0 24 24" fill="#eaeaea"><path d="M20 6h-3l-2-2H9L7 6H4v14h16V6z"/></svg>174 </div>175 </div>176 177 <!-- App bar -->178 <div class="app-bar">179 <div class="app-left">180 <div class="icon-btn">181 <svg width="46" height="46" viewBox="0 0 24 24" fill="#ffffff"><path d="M15.5 5l-7 7 7 7 1.5-1.5L11 12l6-6-1.5-1z"/></svg>182 </div>183 </div>184 <div class="app-right">185 <!-- Cast -->186 <div class="icon-btn">187 <svg width="48" height="48" viewBox="0 0 24 24" fill="#ffffff"><path d="M21 3H3v4h2V5h14v12h-6v2h8V3zM1 17v2h2c0-1.1-.9-2-2-2zm0-4v2c2.8 0 5 2.2 5 5h2c0-3.9-3.1-7-7-7zm0-4v2c5 0 9 4 9 9h2c0-6.1-4.9-11-11-11z"/></svg>188 </div>189 <!-- Search -->190 <div class="icon-btn">191 <svg width="48" height="48" viewBox="0 0 24 24" fill="#ffffff"><path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 10.9.9l.3.3v.8L20 21l1-1-5.5-6zm-6 0A4.5 4.5 0 1114 9.5 4.5 4.5 0 019.5 14z"/></svg>192 </div>193 <!-- More -->194 <div class="icon-btn">195 <svg width="44" height="44" viewBox="0 0 24 24" fill="#ffffff"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>196 </div>197 </div>198 </div>199 200 <div class="content">201 <div class="hero">202 <div class="banner">[IMG: Playlist banner - Homestay in Himalayas, yoga & meditation]</div>203 204 <div class="playlist-title">Weekends meditation</div>205 206 <div class="meta">207 <span>2 videos</span>208 <span class="dot"></span>209 <svg width="34" height="34" viewBox="0 0 24 24" fill="#cfcfcf" style="margin-top:2px;"><path d="M12 17a2 2 0 002-2H10a2 2 0 002 2zm6-6V9a6 6 0 10-12 0v2L4 13v6h16v-6l-2-2zM8 9a4 4 0 018 0v2H8V9z"/></svg>210 <span>Private</span>211 </div>212 213 <div class="chip-row">214 <div class="btn btn-primary">215 <svg width="48" height="48" viewBox="0 0 24 24" fill="#000"><path d="M8 5v14l11-7z"/></svg>216 <span>Play all</span>217 </div>218 <div class="btn btn-secondary">219 <svg width="48" height="48" viewBox="0 0 24 24" fill="#fff"><path d="M16 3v2H6.5A3.5 3.5 0 003 8.5V10h2V8.5C5 7.1 6.1 6 7.5 6H16v2l4-3-4-3zM8 21v-2h9.5c1.4 0 2.5-1.1 2.5-2.5V14h-2v2.5c0 1.4-1.1 2.5-2.5 2.5H8v-2l-4 3 4 3z"/></svg>220 <span>Shuffle</span>221 </div>222 </div>223 </div>224 225 <div class="sort-row">226 <svg width="40" height="40" viewBox="0 0 24 24" fill="#e0e0e0"><path d="M3 18h6v-2H3v2zm0-5h12v-2H3v2zm0-7v2h18V6H3z"/></svg>227 <span>Sort</span>228 </div>229 230 <div class="list">231 <!-- Item 1 -->232 <div class="item">233 <div class="drag">234 <svg width="26" height="26" viewBox="0 0 24 24" fill="#8a8a8a"><path d="M3 9h2v2H3V9zm0 4h2v2H3v-2zm4-4h2v2H7V9zm0 4h2v2H7v-2z"/></svg>235 </div>236 <div class="thumb-wrap">237 <div class="thumb">[IMG: Thumbnail - Homestay in Himalayas]</div>238 <div class="progress"></div>239 <div class="duration">17:44</div>240 </div>241 <div class="details">242 <div class="title">Homestay In Himalayas Rishikesh - Yog & Meditation</div>243 <div class="sub">Travel With OTA EXPERT</div>244 <div class="sub">129K views • 10 months ago</div>245 </div>246 <div class="kebab">247 <svg width="40" height="40" viewBox="0 0 24 24" fill="#e0e0e0"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>248 </div>249 </div>250 251 <!-- Item 2 -->252 <div class="item">253 <div class="drag">254 <svg width="26" height="26" viewBox="0 0 24 24" fill="#8a8a8a"><path d="M3 9h2v2H3V9zm0 4h2v2H3v-2zm4-4h2v2H7V9zm0 4h2v2H7v-2z"/></svg>255 </div>256 <div class="thumb-wrap">257 <div class="thumb">[IMG: Thumbnail - Kasar, Uttarakhand]</div>258 <div class="duration">12:10</div>259 </div>260 <div class="details">261 <div class="title">Is this the Best Place to Meditate in India? | Part 2/2</div>262 <div class="sub">Ethereal</div>263 <div class="sub">79K views • 3 years ago</div>264 </div>265 <div class="kebab">266 <svg width="40" height="40" viewBox="0 0 24 24" fill="#e0e0e0"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>267 </div>268 </div>269 </div>270 </div>271 272 <!-- Home indicator -->273 <div class="home-indicator"></div>274 275 <!-- Bottom navigation -->276 <div class="bottom-nav">277 <div class="nav-item">278 <svg width="44" height="44" viewBox="0 0 24 24" fill="#e5e5e5"><path d="M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3l9-8z"/></svg>279 <div>Home</div>280 </div>281 <div class="nav-item">282 <svg width="44" height="44" viewBox="0 0 24 24" fill="#e5e5e5"><path d="M10 20v-6H6v6H4V4h2v8h4V4h2v16h-2zm10 0h-6V4h6l-3 4 3 4-3 4 3 4z"/></svg>283 <div>Shorts</div>284 </div>285 <div class="nav-item">286 <div class="create">287 <svg width="40" height="40" viewBox="0 0 24 24" fill="#ffffff"><path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2h6z"/></svg>288 </div>289 </div>290 <div class="nav-item">291 <svg width="44" height="44" viewBox="0 0 24 24" fill="#e5e5e5"><path d="M10 16V8l6 4-6 4zM4 6h16v12H4z" /></svg>292 <div>Subscriptions</div>293 </div>294 <div class="nav-item">295 <svg width="44" height="44" viewBox="0 0 24 24" fill="#e5e5e5"><path d="M4 6h16v2H4V6zm0 5h10v2H4v-2zm0 5h16v2H4v-2z"/></svg>296 <div>Library</div>297 </div>298 </div>299 300</div>301</body>302</html>