olemd/pay2play
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial commit: Pay2Play! satirical music player

Browse source 
Paywalled music player where every feature costs money — pause,
resume, skip, volume, even closing the app. Built with React 18
and Tone.js via CDN, zero build step.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ole-Morten Duesund 2026-03-17 16:54:31 +01:00
commit 96b1ecf7e6
6 changed files with 851 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

29
public/style.css Normal file
View file

@ -0,0 +1,29 @@
/* Pay2Play! — Base */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0d0d1a; font-family: 'IBM Plex Mono', monospace; }
/* Animations */
@keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:.5 } }
@keyframes spin { from { transform:rotate(0) } to { transform:rotate(360deg) } }
@keyframes marquee { 0% { transform:translateX(100%) } 100% { transform:translateX(-100%) } }
@keyframes modalIn { from { opacity:0; transform:scale(0.9) } to { opacity:1; transform:scale(1) } }
@keyframes balFlash { 0% { color:#00ee44 } 20% { color:#e74c3c } 50% { color:#ff6b6b } 100% { color:#00ee44 } }
@keyframes countPulse { 0%,100% { transform:scale(1) } 50% { transform:scale(1.1) } }
@keyframes successPop { 0% { transform:scale(0.5);opacity:0 } 50% { transform:scale(1.2) } 100% { transform:scale(1);opacity:1 } }
/* Range input — larger thumb for touch targets */
input[type=range] { -webkit-appearance:none; appearance:none; height:6px; border-radius:3px; outline:none; }
input[type=range]::-webkit-slider-thumb {
-webkit-appearance:none; width:28px; height:28px; border-radius:50%;
background:#00ee44; cursor:pointer; box-shadow:0 0 8px rgba(0,238,68,0.3);
}
/* Interactive states for all buttons */
button { transition: opacity 0.15s ease, transform 0.1s ease; }
button:hover { opacity: 0.85 !important; }
button:active { transform: scale(0.96) !important; }
:focus-visible { outline: 2px solid #00ee44; outline-offset: 2px; }
/* Queue item hover */
.q-item { transition: background 0.15s ease; }
.q-item:hover { background: rgba(255,255,255,0.04) !important; }