GD-ML/AndroidCode

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 Options Modal</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Inter", Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #0d0f12;15    border-radius: 0;16    box-shadow: none;17  }18 19  /* Background / underlying content hints */20  .top-status {21    position: absolute;22    top: 24px;23    left: 36px;24    right: 36px;25    height: 48px;26    color: #ffffff;27    display: flex;28    align-items: center;29    justify-content: space-between;30    opacity: 0.95;31    font-size: 38px;32    letter-spacing: 0.5px;33  }34  .status-icons { display: flex; gap: 28px; align-items: center; }35  .status-dot {36    width: 18px; height: 18px; background: #fff; border-radius: 50%;37  }38 39  /* Dimmed cards behind modal */40  .bg-card {41    position: absolute;42    width: 920px;43    height: 540px;44    left: 80px;45    top: 220px;46    background: #1f2227;47    border-radius: 28px;48    opacity: 0.5;49    box-shadow: 0 40px 80px rgba(0,0,0,0.55);50  }51  .bg-card.small {52    top: 420px;53    width: 720px;54    height: 380px;55    left: 180px;56    opacity: 0.7;57  }58 59  /* Back chevron (underlay) */60  .back-btn {61    position: absolute;62    top: 160px;63    left: 36px;64    width: 56px;65    height: 56px;66    display: flex;67    align-items: center;68    justify-content: center;69    opacity: 0.7;70  }71  .back-btn svg { width: 40px; height: 40px; stroke: #9aa0a6; stroke-width: 4; fill: none; }72 73  /* Vertical ellipsis (underlay) */74  .ellipsis {75    position: absolute;76    top: 180px;77    right: 48px;78    width: 16px;79    height: 60px;80    display: flex;81    flex-direction: column;82    justify-content: space-between;83    opacity: 0.4;84  }85  .ellipsis span {86    width: 12px; height: 12px; background: #9aa0a6; border-radius: 50%;87  }88 89  /* Overlay scrim */90  .scrim {91    position: absolute;92    inset: 0;93    background: radial-gradient(ellipse at center, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.75) 60%, rgba(0,0,0,0.9) 100%);94  }95 96  /* Main modal */97  .modal {98    position: absolute;99    left: 40px;100    right: 40px;101    top: 520px;102    background: #2a2d33;103    border-radius: 28px;104    box-shadow: 0 28px 80px rgba(0,0,0,0.65);105    padding: 40px 36px 220px;106    color: #e9ecef;107  }108 109  .cover {110    width: 520px;111    height: 520px;112    margin: -160px auto 16px;113    background: #E0E0E0;114    border: 1px solid #BDBDBD;115    border-radius: 24px;116    display: flex;117    align-items: center;118    justify-content: center;119    color: #757575;120    box-shadow: 0 16px 36px rgba(0,0,0,0.6);121    font-size: 32px;122    font-weight: 600;123  }124  .title {125    text-align: center;126    font-size: 52px;127    font-weight: 700;128    margin-top: 28px;129    letter-spacing: 0.3px;130    color: #f2f4f7;131  }132  .subtitle {133    text-align: center;134    font-size: 34px;135    color: #aeb4bc;136    margin-top: 10px;137  }138 139  .options {140    margin-top: 36px;141    display: flex;142    flex-direction: column;143    gap: 34px;144  }145  .option {146    display: flex;147    align-items: center;148    gap: 32px;149    padding: 10px 4px;150  }151  .option svg {152    width: 44px; height: 44px;153    stroke: #d1d5db; stroke-width: 3; fill: none;154  }155  .option .text { font-size: 40px; color: #e9ecef; }156  .option.muted .text { color: #d8dde3; }157  .option.play svg { stroke: none; fill: #22c9a1; }158  .option.play .text { color: #22c9a1; }159 160  /* Cancel bar */161  .cancel-bar {162    position: absolute;163    left: 40px;164    right: 40px;165    bottom: 240px;166    height: 140px;167    background: #2a2d33;168    border-radius: 28px;169    box-shadow: 0 20px 48px rgba(0,0,0,0.6);170    display: flex;171    align-items: center;172    justify-content: center;173    color: #e9ecef;174    font-size: 44px;175    font-weight: 600;176  }177 178  /* Bottom navigation (underlay preview) */179  .bottom-nav {180    position: absolute;181    left: 0;182    right: 0;183    bottom: 120px;184    height: 120px;185    display: flex;186    justify-content: space-around;187    align-items: center;188    color: #9aa0a6;189    font-size: 32px;190    opacity: 0.6;191  }192  .bottom-nav .active { color: #e9ecef; }193  .bottom-nav svg { width: 36px; height: 36px; stroke: currentColor; stroke-width: 3; fill: none; display: block; margin: 0 auto 8px; }194 195  /* Gesture Home bar */196  .home-handle {197    position: absolute;198    bottom: 40px;199    left: 50%;200    transform: translateX(-50%);201    width: 320px; height: 14px;202    background: #e0e3e7;203    border-radius: 16px;204    opacity: 0.85;205  }206</style>207</head>208<body>209<div id="render-target">210 211  <!-- Status bar (simplified) -->212  <div class="top-status">213    <div>12:23</div>214    <div class="status-icons">215      <div class="status-dot" title="signal"></div>216      <div class="status-dot" title="mail"></div>217      <div class="status-dot" title="youtube"></div>218      <div class="status-dot" title="settings"></div>219      <div class="status-dot" title="wifi"></div>220      <div class="status-dot" title="battery"></div>221    </div>222  </div>223 224  <!-- Underlay hints -->225  <div class="bg-card"></div>226  <div class="bg-card small"></div>227  <div class="back-btn">228    <svg viewBox="0 0 40 40"><path d="M26 6 L10 20 L26 34"/></svg>229  </div>230  <div class="ellipsis">231    <span></span><span></span><span></span>232  </div>233 234  <!-- Overlay scrim -->235  <div class="scrim"></div>236 237  <!-- Main modal -->238  <div class="modal">239    <div class="cover">[IMG: Playlist cover with musical note]</div>240    <div class="title">Chill List</div>241    <div class="subtitle">Just Updated</div>242 243    <div class="options">244      <div class="option play">245        <svg viewBox="0 0 44 44"><path d="M10 6 L36 22 L10 38 Z"/></svg>246        <div class="text">Play Now</div>247      </div>248 249      <div class="option">250        <svg viewBox="0 0 44 44"><path d="M10 10 L34 34"/><path d="M34 10 L10 34"/></svg>251        <div class="text">Remove from Library</div>252      </div>253 254      <div class="option">255        <svg viewBox="0 0 44 44">256          <path d="M12 8 C18 8 22 10 22 16 L22 34" />257          <circle cx="30" cy="30" r="4" />258          <path d="M30 20 L30 40" />259          <path d="M22 34 L14 34" />260        </svg>261        <div class="text">Add to Playlist</div>262      </div>263 264      <div class="option">265        <svg viewBox="0 0 44 44">266          <path d="M10 14 H30" />267          <path d="M10 22 H26" />268          <path d="M10 30 H22" />269          <path d="M34 18 V26" />270          <path d="M30 22 H38" />271        </svg>272        <div class="text">Add to Queue</div>273      </div>274 275      <div class="option">276        <svg viewBox="0 0 44 44">277          <path d="M22 28 a10 10 0 0 1 10 -10" />278          <path d="M22 32 a14 14 0 0 1 14 -14" />279          <circle cx="22" cy="34" r="2" />280        </svg>281        <div class="text">Playlist Radio</div>282      </div>283 284      <div class="option">285        <svg viewBox="0 0 44 44">286          <path d="M22 8 V28" />287          <path d="M16 22 L22 28 L28 22" />288          <path d="M12 34 H32" />289        </svg>290        <div class="text">Download</div>291      </div>292 293      <div class="option">294        <svg viewBox="0 0 44 44">295          <path d="M22 10 V28" />296          <path d="M16 16 L22 10 L28 16" />297          <path d="M12 30 H32 V36 H12 Z" />298        </svg>299        <div class="text">Share</div>300      </div>301 302      <div class="option">303        <svg viewBox="0 0 44 44">304          <path d="M12 30 L32 10" />305          <path d="M30 8 L36 14" />306          <path d="M10 32 H18 V36 H10 Z" />307        </svg>308        <div class="text">Edit Playlist</div>309      </div>310 311      <div class="option">312        <svg viewBox="0 0 44 44">313          <path d="M22 10 L30 34 H14 Z" />314          <path d="M18 24 H26" />315        </svg>316        <div class="text">Rename Playlist</div>317      </div>318 319      <div class="option">320        <svg viewBox="0 0 44 44">321          <path d="M14 14 H30 V12 H26 V10 H18 V12 H14 Z" />322          <path d="M14 14 V34 H30 V14 Z" />323        </svg>324        <div class="text">Delete Playlist</div>325      </div>326    </div>327  </div>328 329  <!-- Cancel bar -->330  <div class="cancel-bar">Cancel</div>331 332  <!-- Bottom navigation (underlay preview) -->333  <div class="bottom-nav">334    <div>335      <svg viewBox="0 0 36 36"><path d="M6 18 L18 6 L30 18 V30 H22 V22 H14 V30 H6 Z"/></svg>336      Home337    </div>338    <div>339      <svg viewBox="0 0 36 36"><circle cx="16" cy="16" r="10"/><path d="M26 26 L32 32"/></svg>340      Search341    </div>342    <div>343      <svg viewBox="0 0 36 36"><path d="M8 12 H28"/><path d="M8 18 H24"/><path d="M8 24 H20"/></svg>344      For You345    </div>346    <div class="active">347      <svg viewBox="0 0 36 36"><path d="M8 10 H28 V28 H8 Z"/><path d="M8 18 H28"/></svg>348      My Library349    </div>350    <div>351      <svg viewBox="0 0 36 36"><path d="M10 26 H26"/><path d="M18 10 L26 18 L10 18 Z"/></svg>352      Pro353    </div>354  </div>355 356  <!-- Home gesture handle -->357  <div class="home-handle"></div>358</div>359</body>360</html>