Replace sidebar donation dropdown with support modal
This commit is contained in:
Broque Thomas
parent
18b2766b01
commit
41edb31e07
3 changed files with 211 additions and 114 deletions
|
|
@ -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()">×</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);
|
||||
}
|
||||
|
||||
.donation-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 14px 6px 14px;
|
||||
}
|
||||
|
||||
.donation-title {
|
||||
font-family: 'SF Pro Text', -apple-system, sans-serif;
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
.support-button {
|
||||
background: transparent;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.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;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.donation-addresses {
|
||||
padding: 4px 8px 0 8px;
|
||||
}
|
||||
|
||||
.donation-item {
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 4px 12px;
|
||||
margin: 0 0 2px 0;
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.donation-item:hover {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.donation-name {
|
||||
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;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.donation-address,
|
||||
.donation-link {
|
||||
font-family: 'SF Mono', 'Fira Code', monospace;
|
||||
font-size: 8px;
|
||||
/* 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: center;
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.support-modal-overlay.hidden {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.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: color 0.2s;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.donation-link {
|
||||
.support-modal-close-btn:hover {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.support-modal-logo {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.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-style: italic;
|
||||
color: rgba(var(--accent-rgb), 0.5);
|
||||
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: 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;
|
||||
}
|
||||
|
||||
.support-link-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.support-link-kofi {
|
||||
background: rgba(255, 95, 95, 0.12);
|
||||
color: #ff5f5f;
|
||||
border-color: rgba(255, 95, 95, 0.2);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
.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…
Reference in a new issue