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

55 lines
2.6 KiB
HTML
Raw Normal View History

Initial commit: Pay2Play! satirical music player 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>
2026-03-17 16:54:31 +01:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>Pay2Play! — The Worst Music Player</title>
<meta name="description" content="Every feature costs money. Every button is a paywall. Welcome to Pay2Play!.">
<meta property="og:title" content="Pay2Play! — The Worst Music Player">
<meta property="og:description" content="A music player where pause costs $0.01, resume is a separate charge, and you only get 3 seconds free.">
<meta property="og:type" content="website">
Use absolute URLs for OG/Twitter image meta tags Social crawlers need fully qualified URLs to fetch the image from their servers. Relative paths only work in some clients. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-18 09:02:51 +01:00
<meta property="og:image" content="https://donothireus.com/pay2play/og-card.png">
Add OG image card and fix share receipt URL Add 1200x630 Open Graph card with visualizer bars and feature price tags. Use summary_large_image for Twitter. Share receipt now uses window.location.href instead of hardcoded URL. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-18 08:55:07 +01:00
<meta name="twitter:card" content="summary_large_image">
Use absolute URLs for OG/Twitter image meta tags Social crawlers need fully qualified URLs to fetch the image from their servers. Relative paths only work in some clients. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-18 09:02:51 +01:00
<meta name="twitter:image" content="https://donothireus.com/pay2play/og-card.png">
Initial commit: Pay2Play! satirical music player 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>
2026-03-17 16:54:31 +01:00
<meta name="twitter:title" content="Pay2Play! — The Worst Music Player">
<meta name="twitter:description" content="Every feature costs money. Even closing the app shows an unskippable ad.">
Add new paywalled features, polish, and favicon New subscriptions: Like ($0.25, does nothing), HD Audio (removes low-pass filter from synth), Recently Played (shows current song), Cancellation Processing ($4.99 to unsubscribe). Polish: welcome banner fades out smoothly, exit ad plays an annoying jingle via Tone.js, 64kbps Suffering Quality badge shown when HD Audio not purchased, favicon added. Moved og-card.svg source to tools/ (not needed in public/). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-18 09:06:36 +01:00
<link rel="icon" href="favicon.ico">
Initial commit: Pay2Play! satirical music player 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>
2026-03-17 16:54:31 +01:00
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Anybody:wght@400;700;900&family=IBM+Plex+Mono:wght@400;600&display=swap" rel="stylesheet">
Add Plausible event tracking and Last-Modified cache busting Track feature clicks, subscriptions, micro-transactions, top-ups, share receipt, and close app as Plausible custom events. Cache-bust style.css and app.js using Last-Modified headers from HEAD requests — no build step needed, caches break on file change. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-18 09:16:20 +01:00
<link rel="stylesheet" id="app-css" href="style.css">
Fix Plausible proxy paths to match Caddy snippet The (implausibly) Caddy snippet matches /js/script.js and /api/event at the root — the snippet name is not a URL prefix. Remove the erroneous /implausibly/ path prefix from both the script src and the event endpoint. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-18 12:02:33 +01:00
<!-- Privacy-friendly analytics by Plausible -->
<script async src="/js/script.js"></script>
Add Plausible analytics proxied via /implausibly/ Script and API calls route through /implausibly/ reverse proxy to avoid ad blockers while keeping analytics privacy-friendly. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-18 09:09:39 +01:00
<script>
window.plausible=window.plausible||function(){(plausible.q=plausible.q||[]).push(arguments)},plausible.init=plausible.init||function(i){plausible.o=i||{}};
Fix Plausible proxy setup to use standard script with init endpoint Use /implausibly/js/script.js with plausible.init({ endpoint }) instead of pa-* variant. Caddy snippet rewrites script.js to the site-specific script on the backend. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-18 09:46:47 +01:00
plausible.init({
Fix Plausible proxy paths to match Caddy snippet The (implausibly) Caddy snippet matches /js/script.js and /api/event at the root — the snippet name is not a URL prefix. Remove the erroneous /implausibly/ path prefix from both the script src and the event endpoint. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-18 12:02:33 +01:00
endpoint: "/api/event"
Fix Plausible proxy setup to use standard script with init endpoint Use /implausibly/js/script.js with plausible.init({ endpoint }) instead of pa-* variant. Caddy snippet rewrites script.js to the site-specific script on the backend. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-18 09:46:47 +01:00
})
Add Plausible analytics proxied via /implausibly/ Script and API calls route through /implausibly/ reverse proxy to avoid ad blockers while keeping analytics privacy-friendly. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-18 09:09:39 +01:00
</script>
Initial commit: Pay2Play! satirical music player 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>
2026-03-17 16:54:31 +01:00
</head>
<body>
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.49/Tone.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.9/babel.min.js"></script>
Add Plausible event tracking and Last-Modified cache busting Track feature clicks, subscriptions, micro-transactions, top-ups, share receipt, and close app as Plausible custom events. Cache-bust style.css and app.js using Last-Modified headers from HEAD requests — no build step needed, caches break on file change. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-18 09:16:20 +01:00
<script>
// Cache-bust local assets using their Last-Modified header
(async () => {
const bust = async (url) => {
try {
const r = await fetch(url, { method: "HEAD" });
const lm = r.headers.get("Last-Modified");
return lm ? url + "?v=" + new Date(lm).getTime() : url;
} catch(e) { return url; }
};
document.getElementById("app-css").href = await bust("style.css");
const s = document.createElement("script");
s.type = "text/babel";
s.src = await bust("app.js");
s.setAttribute("data-type", "module");
document.body.appendChild(s);
Babel.transformScriptTags();
})();
</script>
Initial commit: Pay2Play! satirical music player 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>
2026-03-17 16:54:31 +01:00
</body>
</html>
Reference in a new issue Copy permalink