Replace sidebar donation dropdown with support modal

pull/253/head
Broque Thomas 2 months ago
parent 18b2766b01
commit 41edb31e07

@ -190,27 +190,9 @@
</div>
</div>
<!-- Crypto Donation Section -->
<div class="crypto-donation">
<div class="donation-header">
<span class="donation-title">Support Development</span>
<button class="toggle-button" id="donation-toggle">Show</button>
</div>
<div class="donation-addresses hidden" id="donation-addresses">
<div class="donation-item" onclick="openKofi()">
<span class="donation-name">Ko-fi</span>
<span class="donation-link">Click to open</span>
</div>
<div class="donation-item" onclick="copyAddress('3JVWrRSkozAQSmw5DXYVxYKsM9bndPTqdS', 'Bitcoin')">
<span class="donation-name">Bitcoin</span>
<span class="donation-address">3JVWrR...dPTqdS</span>
</div>
<div class="donation-item"
onclick="copyAddress('0x343fC48c2cd1C6332b0df9a58F86e6520a026AC5', 'Ethereum')">
<span class="donation-name">Ethereum</span>
<span class="donation-address">0x343f...026AC5</span>
</div>
</div>
<!-- Support Button -->
<div class="support-section">
<button class="support-button" onclick="showSupportModal()">Support SoulSync</button>
</div>
<!-- Version Section -->
@ -4115,6 +4097,35 @@
</div>
<!-- Support Modal -->
<div class="support-modal-overlay hidden" id="support-modal-overlay" onclick="closeSupportModal()">
<div class="support-modal" onclick="event.stopPropagation()">
<button class="support-modal-close-btn" onclick="closeSupportModal()">&times;</button>
<div class="support-modal-logo">
<img src="/static/favicon.png" alt="SoulSync" class="support-modal-logo-img">
<h2 class="support-modal-title">SoulSync</h2>
</div>
<p class="support-modal-message">
I built this app because I wanted it, not to make money. SoulSync is and always will be free.
If it's saved you time or you just want to show some love, any support is genuinely appreciated.
</p>
<div class="support-modal-links">
<a href="https://ko-fi.com/boulderbadgedad" target="_blank" rel="noopener" class="support-link support-link-kofi">
<svg class="support-link-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M23.881 8.948c-.773-4.085-4.859-4.593-4.859-4.593H.723c-.604 0-.679.798-.679.798s-.082 7.324-.022 11.822c.164 2.424 2.586 2.672 2.586 2.672s8.267-.023 11.966-.049c2.438-.426 2.683-2.566 2.658-3.734 4.352.24 7.422-2.831 6.649-6.916zm-11.062 3.511c-1.246 1.453-4.011 3.976-4.011 3.976s-.121.119-.31.023c-.076-.057-.108-.09-.108-.09-.443-.441-3.368-3.049-4.034-3.954-.709-.965-1.041-2.7-.091-3.71.951-1.01 3.005-1.086 4.363.407 0 0 1.565-1.782 3.468-.963 1.904.82 1.832 3.011.723 4.311zm6.173.478c-.928.116-1.682.028-1.682.028V7.284h1.77s1.971.551 1.971 2.638c0 1.913-.985 2.667-2.059 3.015z"/></svg>
<span>Ko-fi</span>
</a>
<button class="support-link support-link-btc" onclick="copyAddress('3JVWrRSkozAQSmw5DXYVxYKsM9bndPTqdS', 'Bitcoin')">
<svg class="support-link-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M23.638 14.904c-1.602 6.43-8.113 10.34-14.542 8.736C2.67 22.05-1.244 15.525.362 9.105 1.962 2.67 8.475-1.243 14.9.358c6.43 1.605 10.342 8.115 8.738 14.546zm-6.35-4.613c.24-1.59-.974-2.45-2.64-3.03l.54-2.153-1.315-.33-.525 2.107c-.345-.087-.7-.169-1.053-.25l.53-2.12-1.32-.33-.54 2.16c-.285-.065-.565-.13-.84-.2l-1.815-.45-.35 1.407s.975.225.955.238c.535.136.63.494.615.78l-.617 2.48c.037.01.085.025.138.047l-.14-.036-.865 3.47c-.067.165-.235.413-.615.32.015.02-.96-.24-.96-.24l-.655 1.515 1.71.426c.32.08.63.163.94.24l-.55 2.19 1.32.33.54-2.17c.36.1.705.19 1.05.273l-.535 2.16 1.32.33.55-2.19c2.24.427 3.93.257 4.64-1.774.57-1.637-.03-2.58-1.217-3.196.854-.193 1.5-.753 1.67-1.907zm-3 4.22c-.404 1.64-3.157.75-4.05.53l.72-2.9c.896.225 3.757.67 3.33 2.37zm.41-4.24c-.37 1.49-2.662.735-3.405.548l.654-2.64c.744.186 3.137.537 2.75 2.084z"/></svg>
<span>Bitcoin</span>
</button>
<button class="support-link support-link-eth" onclick="copyAddress('0x343fC48c2cd1C6332b0df9a58F86e6520a026AC5', 'Ethereum')">
<svg class="support-link-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M11.944 17.97L4.58 13.62 11.943 24l7.37-10.38-7.372 4.35h.003zM12.056 0L4.69 12.223l7.365 4.354 7.365-4.35L12.056 0z"/></svg>
<span>Ethereum</span>
</button>
</div>
</div>
</div>
<!-- Version Info Modal -->
<div class="version-modal-overlay hidden" id="version-modal-overlay" onclick="closeVersionModal()">
<div class="version-modal" onclick="event.stopPropagation()">

@ -5,7 +5,6 @@ let currentPage = 'dashboard';
let currentTrack = null;
let isPlaying = false;
let mediaPlayerExpanded = false;
let donationAddressesVisible = false;
let searchResults = [];
let currentStream = {
status: 'stopped',
@ -1271,7 +1270,6 @@ function initApp() {
initializeNavigation();
initializeMobileNavigation();
initializeMediaPlayer();
initializeDonationWidget();
initializeSyncPage();
initializeWatchlist();
initializeDownloadManagerToggle();
@ -2596,32 +2594,17 @@ function canPlayAudioFormat(extension) {
}
// ===============================
// DONATION WIDGET
// SUPPORT MODAL
// ===============================
function initializeDonationWidget() {
const toggleButton = document.getElementById('donation-toggle');
toggleButton.addEventListener('click', toggleDonationAddresses);
function showSupportModal() {
const overlay = document.getElementById('support-modal-overlay');
if (overlay) overlay.classList.remove('hidden');
}
function toggleDonationAddresses() {
const addresses = document.getElementById('donation-addresses');
const toggleButton = document.getElementById('donation-toggle');
donationAddressesVisible = !donationAddressesVisible;
if (donationAddressesVisible) {
addresses.classList.remove('hidden');
toggleButton.textContent = 'Hide';
} else {
addresses.classList.add('hidden');
toggleButton.textContent = 'Show';
}
}
function openKofi() {
window.open('https://ko-fi.com/boulderbadgedad', '_blank');
console.log('Opening Ko-fi link');
function closeSupportModal() {
const overlay = document.getElementById('support-modal-overlay');
if (overlay) overlay.classList.add('hidden');
}
async function copyAddress(address, cryptoName) {
@ -12966,7 +12949,8 @@ window.closeMatchingModal = closeMatchingModal;
window.selectArtist = selectArtist;
window.selectAlbum = selectAlbum;
window.navigateToPage = navigateToPage;
window.openKofi = openKofi;
window.showSupportModal = showSupportModal;
window.closeSupportModal = closeSupportModal;
window.copyAddress = copyAddress;
window.retryLastSearch = retryLastSearch;
window.showVersionInfo = showVersionInfo;

@ -749,88 +749,190 @@ body {
}
/* Crypto Donation Section */
.crypto-donation {
background: transparent;
border-top: 1px solid rgba(255, 255, 255, 0.04);
/* Support Button */
.support-section {
display: flex;
align-items: center;
justify-content: center;
margin: 4px 14px;
padding: 12px 6px;
padding: 8px 0;
border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.support-button {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.3);
font-family: 'SF Pro Text', -apple-system, sans-serif;
font-size: 9px;
font-weight: 500;
letter-spacing: 0.5px;
padding: 5px 16px;
border-radius: 20px;
cursor: pointer;
transition: all 0.3s ease;
}
.donation-header {
.support-button:hover {
color: rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.15);
}
/* Support Modal */
.support-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(12px);
z-index: 9999;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 14px 6px 14px;
justify-content: center;
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
.donation-title {
font-family: 'SF Pro Text', -apple-system, sans-serif;
font-size: 9px;
font-weight: 600;
color: rgba(255, 255, 255, 0.3);
letter-spacing: 1px;
text-transform: uppercase;
.support-modal-overlay.hidden {
opacity: 0;
pointer-events: none;
}
.toggle-button {
width: 40px;
height: 18px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
color: rgba(255, 255, 255, 0.5);
font-size: 8px;
font-weight: 500;
.support-modal {
background: linear-gradient(165deg, #1e1e1e 0%, #161616 100%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.08);
width: 420px;
max-width: 90vw;
padding: 40px 36px;
text-align: center;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
transform: scale(1);
transition: transform 0.3s ease-in-out;
position: relative;
}
.support-modal-overlay.hidden .support-modal {
transform: scale(0.9);
}
.support-modal-close-btn {
position: absolute;
top: 14px;
right: 18px;
background: none;
border: none;
color: rgba(255, 255, 255, 0.3);
font-size: 20px;
cursor: pointer;
transition: all 0.2s ease;
transition: color 0.2s;
line-height: 1;
}
.toggle-button:hover {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.8);
.support-modal-close-btn:hover {
color: rgba(255, 255, 255, 0.7);
}
.donation-addresses {
padding: 4px 8px 0 8px;
.support-modal-logo {
margin-bottom: 20px;
}
.donation-item {
height: 30px;
.support-modal-logo-img {
width: 56px;
height: 56px;
border-radius: 14px;
margin-bottom: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.support-modal-title {
font-family: 'SF Pro Display', -apple-system, sans-serif;
font-size: 22px;
font-weight: 700;
background: linear-gradient(90deg, #ffffff 0%, rgb(var(--accent-light-rgb)) 60%, rgb(var(--accent-rgb)) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: -0.5px;
margin: 0;
}
.support-modal-message {
font-family: 'SF Pro Text', -apple-system, sans-serif;
font-size: 13px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.5);
margin: 0 0 28px 0;
max-width: 340px;
margin-left: auto;
margin-right: auto;
}
.support-modal-links {
display: flex;
flex-direction: column;
gap: 10px;
}
.support-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 12px;
margin: 0 0 2px 0;
border-radius: 8px;
border: 1px solid transparent;
justify-content: center;
gap: 10px;
padding: 12px 20px;
border-radius: 10px;
font-family: 'SF Pro Text', -apple-system, sans-serif;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
border: 1px solid transparent;
}
.donation-item:hover {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
.support-link-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.donation-name {
font-family: 'SF Pro Text', -apple-system, sans-serif;
font-size: 9px;
font-weight: 500;
color: rgba(255, 255, 255, 0.6);
.support-link-kofi {
background: rgba(255, 95, 95, 0.12);
color: #ff5f5f;
border-color: rgba(255, 95, 95, 0.2);
}
.donation-address,
.donation-link {
font-family: 'SF Mono', 'Fira Code', monospace;
font-size: 8px;
color: rgba(255, 255, 255, 0.3);
.support-link-kofi:hover {
background: rgba(255, 95, 95, 0.2);
border-color: rgba(255, 95, 95, 0.35);
box-shadow: 0 4px 20px rgba(255, 95, 95, 0.15);
}
.donation-link {
font-family: 'SF Pro Text', -apple-system, sans-serif;
font-style: italic;
color: rgba(var(--accent-rgb), 0.5);
.support-link-btc {
background: rgba(247, 147, 26, 0.1);
color: #f7931a;
border-color: rgba(247, 147, 26, 0.18);
}
.support-link-btc:hover {
background: rgba(247, 147, 26, 0.18);
border-color: rgba(247, 147, 26, 0.3);
box-shadow: 0 4px 20px rgba(247, 147, 26, 0.12);
}
.support-link-eth {
background: rgba(98, 126, 234, 0.1);
color: #627eea;
border-color: rgba(98, 126, 234, 0.18);
}
.support-link-eth:hover {
background: rgba(98, 126, 234, 0.18);
border-color: rgba(98, 126, 234, 0.3);
box-shadow: 0 4px 20px rgba(98, 126, 234, 0.12);
}
/* Version Section */

Loading…
Cancel
Save