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>
This commit is contained in:
parent
d08d886956
commit
5ba61db478
6 changed files with 46 additions and 5 deletions
|
|
@ -1,108 +0,0 @@
|
|||
<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>
|
||||
|
Before Width: | Height: | Size: 5.4 KiB |
Loading…
Add table
Add a link
Reference in a new issue