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>Audio Player Overlay</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #000;15    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16    color: #fff;17  }18 19  /* Fullscreen image placeholder */20  .bg {21    position: absolute;22    inset: 0;23  }24  .bg .img {25    position: absolute;26    inset: 0;27    background: #E0E0E0;28    border: 1px solid #BDBDBD;29    display: flex;30    align-items: center;31    justify-content: center;32    color: #757575;33    font-size: 32px;34    letter-spacing: 0.2px;35    text-align: center;36    padding: 20px;37  }38  .bg .tint {39    position: absolute;40    inset: 0;41    background: radial-gradient(ellipse at 50% 60%, rgba(0,0,0,0.35), rgba(0,0,0,0.55));42    pointer-events: none;43  }44 45  /* Black safe areas top/bottom (as seen in screenshot) */46  .top-safe {47    position: absolute;48    top: 0;49    left: 0;50    width: 100%;51    height: 150px;52    background: #000;53    opacity: 1;54  }55  .bottom-safe {56    position: absolute;57    bottom: 0;58    left: 0;59    width: 100%;60    height: 120px;61    background: #000;62    opacity: 1;63  }64 65  /* Close button */66  .close-btn {67    position: absolute;68    top: 200px;69    left: 40px;70    width: 64px;71    height: 64px;72    display: flex;73    align-items: center;74    justify-content: center;75    cursor: default;76  }77  .close-btn svg { width: 48px; height: 48px; }78 79  /* Title */80  .title {81    position: absolute;82    top: 320px;83    left: 60px;84    width: 960px;85    text-align: center;86    font-size: 48px;87    line-height: 1.3;88    font-weight: 600;89    color: rgba(255,255,255,0.95);90    text-shadow: 0 2px 8px rgba(0,0,0,0.35);91  }92 93  /* Central controls */94  .controls {95    position: absolute;96    top: 1040px;97    left: 0;98    width: 100%;99    display: flex;100    justify-content: center;101    align-items: center;102    gap: 160px;103  }104  .playpause {105    width: 260px;106    height: 260px;107    border-radius: 50%;108    background: rgba(255,255,255,0.6);109    display: flex;110    align-items: center;111    justify-content: center;112    backdrop-filter: blur(2px);113  }114  .skip {115    width: 128px;116    height: 128px;117    border-radius: 50%;118    background: rgba(255,255,255,0.2);119    display: flex;120    flex-direction: column;121    align-items: center;122    justify-content: center;123    border: 1px solid rgba(255,255,255,0.35);124    color: #fff;125    gap: 6px;126  }127  .skip span { font-size: 36px; font-weight: 600; }128  .skip svg { width: 34px; height: 34px; opacity: 0.95; }129  .skip.right svg { transform: scaleX(-1); }130 131  /* Progress bar */132  .progress {133    position: absolute;134    left: 60px;135    right: 60px;136    bottom: 540px;137  }138  .track {139    position: relative;140    height: 16px;141    border-radius: 8px;142    background: rgba(255,255,255,0.35);143  }144  .thumb {145    position: absolute;146    top: 50%;147    left: 0%;148    transform: translate(-30%, -50%);149    width: 44px;150    height: 44px;151    background: #fff;152    border-radius: 50%;153    box-shadow: 0 2px 6px rgba(0,0,0,0.3);154  }155  .times {156    display: flex;157    justify-content: space-between;158    margin-top: 22px;159    font-size: 34px;160    color: rgba(255,255,255,0.85);161  }162 163  /* Music info pill */164  .music-pill {165    position: absolute;166    left: 60px;167    bottom: 340px;168    height: 140px;169    width: 680px;170    border-radius: 80px;171    background: linear-gradient(135deg, #0a81ff, #0a66d6);172    color: #eaf5ff;173    display: flex;174    align-items: center;175    padding: 0 40px;176    gap: 26px;177    box-shadow: 0 10px 20px rgba(0,0,0,0.25);178  }179  .music-pill .texts {180    display: flex;181    flex-direction: column;182    line-height: 1.2;183  }184  .music-pill .label { font-size: 34px; opacity: 0.9; }185  .music-pill .title { font-size: 44px; font-weight: 700; color: #fff; text-align: left; width: auto; top: auto; left: auto; }186 187  /* Right action buttons */188  .actions {189    position: absolute;190    right: 60px;191    bottom: 350px;192    display: flex;193    gap: 30px;194  }195  .action-btn {196    width: 120px;197    height: 120px;198    border-radius: 50%;199    background: rgba(255,255,255,0.18);200    border: 1px solid rgba(255,255,255,0.35);201    display: flex;202    align-items: center;203    justify-content: center;204  }205  .action-btn svg { width: 54px; height: 54px; stroke: #fff; }206 207  /* Home indicator */208  .home-indicator {209    position: absolute;210    bottom: 38px;211    left: 50%;212    transform: translateX(-50%);213    width: 280px;214    height: 12px;215    background: rgba(255,255,255,0.85);216    border-radius: 8px;217  }218</style>219</head>220<body>221<div id="render-target">222  <div class="bg">223    <div class="img">[IMG: Person lying with headphones on bed]</div>224    <div class="tint"></div>225  </div>226 227  <div class="top-safe"></div>228 229  <div class="close-btn" aria-label="Close">230    <svg viewBox="0 0 24 24" fill="none">231      <path d="M2 2L22 22M22 2L2 22" stroke="#FFFFFF" stroke-width="2.4" stroke-linecap="round"/>232    </svg>233  </div>234 235  <div class="title">How can you get a good night's sleep?</div>236 237  <div class="controls">238    <div class="skip left">239      <svg viewBox="0 0 24 24" fill="none">240        <path d="M12 4a8 8 0 1 0 8 8" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>241        <path d="M20 4v6h-6" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>242      </svg>243      <span>15</span>244    </div>245    <div class="playpause" aria-label="Pause">246      <svg viewBox="0 0 60 60" fill="#fff">247        <rect x="12" y="8" width="12" height="44" rx="6"/>248        <rect x="36" y="8" width="12" height="44" rx="6"/>249      </svg>250    </div>251    <div class="skip right">252      <svg viewBox="0 0 24 24" fill="none">253        <path d="M12 4a8 8 0 1 0 8 8" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>254        <path d="M20 4v6h-6" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>255      </svg>256      <span>15</span>257    </div>258  </div>259 260  <div class="progress">261    <div class="track">262      <div class="thumb"></div>263    </div>264    <div class="times">265      <div>00:00</div>266      <div>02:05</div>267    </div>268  </div>269 270  <div class="music-pill">271    <svg width="64" height="64" viewBox="0 0 24 24" fill="none">272      <path d="M3 18l5-8 4 6 3-4 6 6H3z" stroke="#eaf5ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>273      <circle cx="8" cy="9" r="1.5" fill="#eaf5ff"/>274    </svg>275    <div class="texts">276      <div class="label">Background music</div>277      <div class="title">Crystals</div>278    </div>279  </div>280 281  <div class="actions">282    <div class="action-btn" aria-label="Like">283      <svg viewBox="0 0 24 24" fill="none">284        <path d="M12.1 20.3l-1.1-1C6 15 3 12.3 3 9.2A4.2 4.2 0 0 1 7.2 5c1.4 0 2.8.7 3.6 1.9A4.6 4.6 0 0 1 14.4 5 4.2 4.2 0 0 1 18.6 9.2c0 3.1-3 5.8-8 10.1l-1 .9z" stroke="#fff" stroke-width="2" stroke-linejoin="round"/>285      </svg>286    </div>287    <div class="action-btn" aria-label="Share">288      <svg viewBox="0 0 24 24" fill="none" stroke-width="2">289        <circle cx="18" cy="5" r="2.5" stroke="#fff"/>290        <circle cx="6" cy="12" r="2.5" stroke="#fff"/>291        <circle cx="18" cy="19" r="2.5" stroke="#fff"/>292        <path d="M8.3 11l7-4.3M8.3 13l7 4.3" stroke="#fff" stroke-linecap="round"/>293      </svg>294    </div>295  </div>296 297  <div class="bottom-safe"></div>298  <div class="home-indicator"></div>299</div>300</body>301</html>