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>
This commit is contained in:
parent
ffbe601cee
commit
91bc580877
4 changed files with 112 additions and 2 deletions
|
|
@ -403,7 +403,7 @@ function PayPlay() {
|
|||
`Actions: ${acts} (${acts > 0 ? `$${(spent/acts).toFixed(2)}/action` : "free"})`,
|
||||
`Subscriptions: ${Object.keys(subs).length}`,
|
||||
Object.keys(subs).length > 0 ? Object.keys(subs).map(k => SUBS[k].name).join(", ") : "None (cheapskate)",
|
||||
"", "Try it: donothireus.com/payplay"
|
||||
"", `Try it: ${window.location.href}`
|
||||
];
|
||||
if (navigator.clipboard) {
|
||||
navigator.clipboard.writeText(lines.join("\n")).then(() => flash("Receipt copied! Share your shame.", accent));
|
||||
|
|
|
|||
|
|
@ -8,7 +8,9 @@
|
|||
<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">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta property="og:image" content="og-card.png">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:image" content="og-card.png">
|
||||
<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.">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
|
|
|
|||
BIN
public/og-card.png
Normal file
BIN
public/og-card.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
108
public/og-card.svg
Normal file
108
public/og-card.svg
Normal file
|
|
@ -0,0 +1,108 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630">
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#0d0d1a"/>
|
||||
<stop offset="100%" stop-color="#1a1a3e"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="accent" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0%" stop-color="#00ee44"/>
|
||||
<stop offset="100%" stop-color="#00aa33"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="bar1" x1="0" y1="1" x2="0" y2="0">
|
||||
<stop offset="0%" stop-color="#e74c3c88"/>
|
||||
<stop offset="100%" stop-color="#e74c3c"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="bar2" x1="0" y1="1" x2="0" y2="0">
|
||||
<stop offset="0%" stop-color="#9b59b688"/>
|
||||
<stop offset="100%" stop-color="#9b59b6"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="bar3" x1="0" y1="1" x2="0" y2="0">
|
||||
<stop offset="0%" stop-color="#3498db88"/>
|
||||
<stop offset="100%" stop-color="#3498db"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="bar4" x1="0" y1="1" x2="0" y2="0">
|
||||
<stop offset="0%" stop-color="#f39c1288"/>
|
||||
<stop offset="100%" stop-color="#f39c12"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Background -->
|
||||
<rect width="1200" height="630" fill="url(#bg)"/>
|
||||
|
||||
<!-- Subtle grid pattern -->
|
||||
<g opacity="0.03" stroke="#fff" stroke-width="1">
|
||||
<line x1="0" y1="0" x2="1200" y2="630"/>
|
||||
<line x1="400" y1="0" x2="400" y2="630"/>
|
||||
<line x1="800" y1="0" x2="800" y2="630"/>
|
||||
<line x1="0" y1="210" x2="1200" y2="210"/>
|
||||
<line x1="0" y1="420" x2="1200" y2="420"/>
|
||||
</g>
|
||||
|
||||
<!-- Visualizer bars (left decorative cluster) -->
|
||||
<g transform="translate(80, 130)" opacity="0.7">
|
||||
<rect x="0" y="180" width="18" height="90" rx="4" fill="url(#bar1)"/>
|
||||
<rect x="24" y="120" width="18" height="150" rx="4" fill="url(#bar2)"/>
|
||||
<rect x="48" y="160" width="18" height="110" rx="4" fill="url(#bar3)"/>
|
||||
<rect x="72" y="80" width="18" height="190" rx="4" fill="url(#bar4)"/>
|
||||
<rect x="96" y="140" width="18" height="130" rx="4" fill="url(#bar1)"/>
|
||||
<rect x="120" y="60" width="18" height="210" rx="4" fill="url(#bar2)"/>
|
||||
<rect x="144" y="100" width="18" height="170" rx="4" fill="url(#bar3)"/>
|
||||
<rect x="168" y="150" width="18" height="120" rx="4" fill="url(#bar4)"/>
|
||||
</g>
|
||||
|
||||
<!-- Visualizer bars (right decorative cluster) -->
|
||||
<g transform="translate(930, 130)" opacity="0.7">
|
||||
<rect x="0" y="150" width="18" height="120" rx="4" fill="url(#bar4)"/>
|
||||
<rect x="24" y="100" width="18" height="170" rx="4" fill="url(#bar3)"/>
|
||||
<rect x="48" y="60" width="18" height="210" rx="4" fill="url(#bar2)"/>
|
||||
<rect x="72" y="140" width="18" height="130" rx="4" fill="url(#bar1)"/>
|
||||
<rect x="96" y="80" width="18" height="190" rx="4" fill="url(#bar4)"/>
|
||||
<rect x="120" y="160" width="18" height="110" rx="4" fill="url(#bar3)"/>
|
||||
<rect x="144" y="120" width="18" height="150" rx="4" fill="url(#bar2)"/>
|
||||
<rect x="168" y="180" width="18" height="90" rx="4" fill="url(#bar1)"/>
|
||||
</g>
|
||||
|
||||
<!-- Main title -->
|
||||
<text x="600" y="250" text-anchor="middle" font-family="'Anybody', 'Arial Black', sans-serif" font-weight="900" font-size="96" fill="#fff" letter-spacing="-2">Pay2Play!</text>
|
||||
|
||||
<!-- Subtitle -->
|
||||
<text x="600" y="310" text-anchor="middle" font-family="'IBM Plex Mono', 'Courier New', monospace" font-size="24" fill="#7788aa">The Worst Music Player</text>
|
||||
|
||||
<!-- Feature tags -->
|
||||
<g transform="translate(600, 370)" text-anchor="middle" font-family="'IBM Plex Mono', 'Courier New', monospace" font-size="15" font-weight="600">
|
||||
<g transform="translate(-280, 0)">
|
||||
<rect x="-70" y="-16" width="140" height="32" rx="6" fill="#e74c3c22" stroke="#e74c3c44" stroke-width="1"/>
|
||||
<text fill="#e74c3c">Pause $0.01</text>
|
||||
</g>
|
||||
<g transform="translate(-95, 0)">
|
||||
<rect x="-78" y="-16" width="156" height="32" rx="6" fill="#e67e2222" stroke="#e67e2244" stroke-width="1"/>
|
||||
<text fill="#e67e22">Resume $0.02</text>
|
||||
</g>
|
||||
<g transform="translate(95, 0)">
|
||||
<rect x="-58" y="-16" width="116" height="32" rx="6" fill="#3498db22" stroke="#3498db44" stroke-width="1"/>
|
||||
<text fill="#3498db">Skip $0.05</text>
|
||||
</g>
|
||||
<g transform="translate(280, 0)">
|
||||
<rect x="-78" y="-16" width="156" height="32" rx="6" fill="#f39c1222" stroke="#f39c1244" stroke-width="1"/>
|
||||
<text fill="#f39c12">Volume $0.08</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Tagline -->
|
||||
<text x="600" y="440" text-anchor="middle" font-family="'IBM Plex Mono', 'Courier New', monospace" font-size="18" fill="#556677" font-style="italic">Every feature costs money. Even closing the app.</text>
|
||||
|
||||
<!-- Balance pill -->
|
||||
<g transform="translate(600, 500)">
|
||||
<rect x="-80" y="-18" width="160" height="36" rx="18" fill="#1c1c32"/>
|
||||
<text text-anchor="middle" y="6" font-family="'IBM Plex Mono', 'Courier New', monospace" font-size="16" font-weight="700" fill="url(#accent)">💰 $5.00</text>
|
||||
</g>
|
||||
|
||||
<!-- Bottom branding -->
|
||||
<text x="600" y="580" text-anchor="middle" font-family="'IBM Plex Mono', 'Courier New', monospace" font-size="13" fill="#334455" letter-spacing="3">DONOTHIREUS.COM</text>
|
||||
|
||||
<!-- Corner accent lines -->
|
||||
<line x1="40" y1="40" x2="120" y2="40" stroke="#00ee44" stroke-width="2" opacity="0.4"/>
|
||||
<line x1="40" y1="40" x2="40" y2="120" stroke="#00ee44" stroke-width="2" opacity="0.4"/>
|
||||
<line x1="1160" y1="590" x2="1080" y2="590" stroke="#00ee44" stroke-width="2" opacity="0.4"/>
|
||||
<line x1="1160" y1="590" x2="1160" y2="510" stroke="#00ee44" stroke-width="2" opacity="0.4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.4 KiB |
Loading…
Add table
Add a link
Reference in a new issue