boost panel now includes current track. pink box removal
This commit is contained in:
cottongin
parent
3cd42426c6
commit
8e9835a61d
158
index.html
158
index.html
@ -259,6 +259,7 @@
|
||||
}
|
||||
|
||||
/* Damage on cassette housing */
|
||||
/* Removed by popular demand.
|
||||
.cassette::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@ -271,6 +272,7 @@
|
||||
border-radius: 3px;
|
||||
pointer-events: none;
|
||||
}
|
||||
*/
|
||||
|
||||
.cassette::after {
|
||||
content: '';
|
||||
@ -950,6 +952,94 @@
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Current track section - shown when audio is playing */
|
||||
.alby-track-section {
|
||||
margin-top: 15px;
|
||||
display: none; /* Hidden by default, shown via JS when audio playing */
|
||||
}
|
||||
|
||||
.alby-track-section.visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Track display box - styled like address box with CRT look */
|
||||
.alby-track-box {
|
||||
background: linear-gradient(180deg, #0a1a0a 0%, #050f05 100%);
|
||||
border: 3px solid #000;
|
||||
padding: 12px;
|
||||
margin-bottom: 10px;
|
||||
box-shadow:
|
||||
inset 0 0 20px rgba(0,0,0,0.9),
|
||||
inset 0 0 5px rgba(255, 170, 0, 0.1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Scanlines effect on track box */
|
||||
.alby-track-box::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(0,0,0,0.4) 1px, rgba(0,0,0,0.4) 2px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Track name text - amber like lightning address */
|
||||
.alby-track-name {
|
||||
color: #cc8800;
|
||||
font-size: 13px;
|
||||
text-shadow: 0 0 8px rgba(255, 170, 0, 0.5);
|
||||
word-break: break-word;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Checkbox label container */
|
||||
.alby-checkbox-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
/* Custom checkbox styling to match retro theme */
|
||||
.alby-checkbox-label input[type="checkbox"] {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: linear-gradient(180deg, #0a1a0a 0%, #050f05 100%);
|
||||
border: 3px solid #000;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
/* Checkbox checked state - green checkmark */
|
||||
.alby-checkbox-label input[type="checkbox"]:checked::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 1px;
|
||||
width: 6px;
|
||||
height: 10px;
|
||||
border: solid #00ff00;
|
||||
border-width: 0 3px 3px 0;
|
||||
transform: rotate(45deg);
|
||||
box-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
|
||||
}
|
||||
|
||||
/* Checkbox text - green CRT style */
|
||||
.alby-checkbox-text {
|
||||
color: #00ff00;
|
||||
font-size: 12px;
|
||||
text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* Main boost button - amber Lightning theme */
|
||||
.alby-boost-btn {
|
||||
width: 100%;
|
||||
@ -1092,6 +1182,18 @@
|
||||
<textarea class="alby-textarea" id="albyMemo" maxlength="400" placeholder="Your message..."></textarea>
|
||||
<div class="alby-char-count"><span id="albyCharCount">0</span>/400</div>
|
||||
|
||||
<!-- Current track info section (visible when audio playing) -->
|
||||
<div class="alby-track-section" id="albyTrackSection">
|
||||
<div class="alby-label">CURRENT TRACK</div>
|
||||
<div class="alby-track-box">
|
||||
<div class="alby-track-name" id="albyTrackName">TRACK 1 - PINK FLIGHT ATTENDANT</div>
|
||||
</div>
|
||||
<label class="alby-checkbox-label">
|
||||
<input type="checkbox" id="albyIncludeTrack" checked>
|
||||
<span class="alby-checkbox-text">Include current track?</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Boost button - triggers simple-boost payment -->
|
||||
<button class="alby-boost-btn" id="albyBoostBtn">
|
||||
<span>⚡</span>
|
||||
@ -1819,10 +1921,14 @@
|
||||
const albyDisplayAmount = document.getElementById('albyDisplayAmount');
|
||||
const albyCharCount = document.getElementById('albyCharCount');
|
||||
const albySimpleBoost = document.getElementById('albySimpleBoost');
|
||||
const albyTrackSection = document.getElementById('albyTrackSection');
|
||||
const albyTrackName = document.getElementById('albyTrackName');
|
||||
const albyIncludeTrack = document.getElementById('albyIncludeTrack');
|
||||
|
||||
/**
|
||||
* Toggle the Alby Lightning panel open/closed
|
||||
* Also handles the backdrop overlay visibility
|
||||
* Shows current track info when audio is loaded (playing or paused, not stopped)
|
||||
*/
|
||||
function toggleAlbyPanel() {
|
||||
const isActive = albyPanel.classList.contains('active');
|
||||
@ -1834,8 +1940,39 @@
|
||||
// Open panel
|
||||
albyPanel.classList.add('active');
|
||||
albyOverlay.classList.add('active');
|
||||
|
||||
// Check if audio is loaded (has duration and currentTime > 0, meaning not at start/stopped)
|
||||
// Show track section if audio has been played or is playing
|
||||
const audioIsLoaded = audio.src && (audio.currentTime > 0 || !audio.paused);
|
||||
|
||||
if (audioIsLoaded) {
|
||||
// Show track section and populate with current track name
|
||||
albyTrackSection.classList.add('visible');
|
||||
albyTrackName.textContent = playlist[currentTrack].name;
|
||||
albyIncludeTrack.checked = true;
|
||||
} else {
|
||||
// Hide track section if no audio loaded/played
|
||||
albyTrackSection.classList.remove('visible');
|
||||
albyIncludeTrack.checked = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Build the final memo including track info if checkbox is checked
|
||||
* Returns the complete memo string to be sent with the boost
|
||||
*/
|
||||
function buildFinalMemo() {
|
||||
let finalMemo = albyMemo.value;
|
||||
|
||||
// Append track info if checkbox is checked and track section is visible
|
||||
if (albyIncludeTrack.checked && albyTrackSection.classList.contains('visible')) {
|
||||
const trackInfo = ` | Now Playing: ${playlist[currentTrack].name}`;
|
||||
finalMemo = finalMemo + trackInfo;
|
||||
}
|
||||
|
||||
return finalMemo;
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the simple-boost component attributes and display amount
|
||||
@ -1843,11 +1980,11 @@
|
||||
*/
|
||||
function updateAlbyBoostButton() {
|
||||
const amount = parseFloat(albyAmount.value).toFixed(1);
|
||||
const memo = albyMemo.value;
|
||||
const finalMemo = buildFinalMemo();
|
||||
|
||||
// Update simple-boost component attributes
|
||||
albySimpleBoost.setAttribute('amount', amount);
|
||||
albySimpleBoost.setAttribute('memo', memo);
|
||||
albySimpleBoost.setAttribute('memo', finalMemo);
|
||||
|
||||
// Update displayed amount on our custom button
|
||||
albyDisplayAmount.textContent = parseFloat(amount).toFixed(2);
|
||||
@ -1902,8 +2039,22 @@
|
||||
updateAlbyBoostButton();
|
||||
});
|
||||
|
||||
// Include track checkbox change handler
|
||||
albyIncludeTrack.addEventListener('change', () => {
|
||||
updateAlbyBoostButton();
|
||||
});
|
||||
|
||||
// Boost button click - trigger the simple-boost component
|
||||
albyBoostBtn.addEventListener('click', () => {
|
||||
// Build final memo and validate length
|
||||
const finalMemo = buildFinalMemo();
|
||||
|
||||
// Check if total memo exceeds 400 characters
|
||||
if (finalMemo.length > 400) {
|
||||
alert(`Memo too long! Your message with track info is ${finalMemo.length} characters. Maximum is 400.\n\nPlease shorten your message or uncheck "Include current track?"`);
|
||||
return; // Don't send the boost
|
||||
}
|
||||
|
||||
// Ensure latest form values are synced to simple-boost before triggering
|
||||
updateAlbyBoostButton();
|
||||
// Click the inner button div inside the shadow DOM
|
||||
@ -1918,6 +2069,9 @@
|
||||
// Reset form to default values
|
||||
albyAmount.value = '1.0';
|
||||
albyMemo.value = '';
|
||||
// Reset track checkbox (will be re-evaluated when panel reopens)
|
||||
albyIncludeTrack.checked = true;
|
||||
albyTrackSection.classList.remove('visible');
|
||||
updateAlbyCharCount();
|
||||
updateAlbyBoostButton();
|
||||
// Close the modal after successful boost
|
||||
|
||||
156
no-damage.html
156
no-damage.html
@ -937,6 +937,94 @@
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Current track section - shown when audio is playing */
|
||||
.alby-track-section {
|
||||
margin-top: 15px;
|
||||
display: none; /* Hidden by default, shown via JS when audio playing */
|
||||
}
|
||||
|
||||
.alby-track-section.visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Track display box - styled like address box with CRT look */
|
||||
.alby-track-box {
|
||||
background: linear-gradient(180deg, #0a1a0a 0%, #050f05 100%);
|
||||
border: 3px solid #000;
|
||||
padding: 12px;
|
||||
margin-bottom: 10px;
|
||||
box-shadow:
|
||||
inset 0 0 20px rgba(0,0,0,0.9),
|
||||
inset 0 0 5px rgba(255, 170, 0, 0.1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Scanlines effect on track box */
|
||||
.alby-track-box::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(0,0,0,0.4) 1px, rgba(0,0,0,0.4) 2px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Track name text - amber like lightning address */
|
||||
.alby-track-name {
|
||||
color: #cc8800;
|
||||
font-size: 13px;
|
||||
text-shadow: 0 0 8px rgba(255, 170, 0, 0.5);
|
||||
word-break: break-word;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Checkbox label container */
|
||||
.alby-checkbox-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
/* Custom checkbox styling to match retro theme */
|
||||
.alby-checkbox-label input[type="checkbox"] {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: linear-gradient(180deg, #0a1a0a 0%, #050f05 100%);
|
||||
border: 3px solid #000;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
/* Checkbox checked state - green checkmark */
|
||||
.alby-checkbox-label input[type="checkbox"]:checked::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
top: 1px;
|
||||
width: 6px;
|
||||
height: 10px;
|
||||
border: solid #00ff00;
|
||||
border-width: 0 3px 3px 0;
|
||||
transform: rotate(45deg);
|
||||
box-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
|
||||
}
|
||||
|
||||
/* Checkbox text - green CRT style */
|
||||
.alby-checkbox-text {
|
||||
color: #00ff00;
|
||||
font-size: 12px;
|
||||
text-shadow: 0 0 5px rgba(0, 255, 0, 0.5);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* Main boost button - amber Lightning theme */
|
||||
.alby-boost-btn {
|
||||
width: 100%;
|
||||
@ -1079,6 +1167,18 @@
|
||||
<textarea class="alby-textarea" id="albyMemo" maxlength="400" placeholder="Your message..."></textarea>
|
||||
<div class="alby-char-count"><span id="albyCharCount">0</span>/400</div>
|
||||
|
||||
<!-- Current track info section (visible when audio playing) -->
|
||||
<div class="alby-track-section" id="albyTrackSection">
|
||||
<div class="alby-label">CURRENT TRACK</div>
|
||||
<div class="alby-track-box">
|
||||
<div class="alby-track-name" id="albyTrackName">TRACK 1 - PINK FLIGHT ATTENDANT</div>
|
||||
</div>
|
||||
<label class="alby-checkbox-label">
|
||||
<input type="checkbox" id="albyIncludeTrack" checked>
|
||||
<span class="alby-checkbox-text">Include current track?</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Boost button - triggers simple-boost payment -->
|
||||
<button class="alby-boost-btn" id="albyBoostBtn">
|
||||
<span>⚡</span>
|
||||
@ -1806,10 +1906,14 @@
|
||||
const albyDisplayAmount = document.getElementById('albyDisplayAmount');
|
||||
const albyCharCount = document.getElementById('albyCharCount');
|
||||
const albySimpleBoost = document.getElementById('albySimpleBoost');
|
||||
const albyTrackSection = document.getElementById('albyTrackSection');
|
||||
const albyTrackName = document.getElementById('albyTrackName');
|
||||
const albyIncludeTrack = document.getElementById('albyIncludeTrack');
|
||||
|
||||
/**
|
||||
* Toggle the Alby Lightning panel open/closed
|
||||
* Also handles the backdrop overlay visibility
|
||||
* Shows current track info when audio is loaded (playing or paused, not stopped)
|
||||
*/
|
||||
function toggleAlbyPanel() {
|
||||
const isActive = albyPanel.classList.contains('active');
|
||||
@ -1821,8 +1925,39 @@
|
||||
// Open panel
|
||||
albyPanel.classList.add('active');
|
||||
albyOverlay.classList.add('active');
|
||||
|
||||
// Check if audio is loaded (has duration and currentTime > 0, meaning not at start/stopped)
|
||||
// Show track section if audio has been played or is playing
|
||||
const audioIsLoaded = audio.src && (audio.currentTime > 0 || !audio.paused);
|
||||
|
||||
if (audioIsLoaded) {
|
||||
// Show track section and populate with current track name
|
||||
albyTrackSection.classList.add('visible');
|
||||
albyTrackName.textContent = playlist[currentTrack].name;
|
||||
albyIncludeTrack.checked = true;
|
||||
} else {
|
||||
// Hide track section if no audio loaded/played
|
||||
albyTrackSection.classList.remove('visible');
|
||||
albyIncludeTrack.checked = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Build the final memo including track info if checkbox is checked
|
||||
* Returns the complete memo string to be sent with the boost
|
||||
*/
|
||||
function buildFinalMemo() {
|
||||
let finalMemo = albyMemo.value;
|
||||
|
||||
// Append track info if checkbox is checked and track section is visible
|
||||
if (albyIncludeTrack.checked && albyTrackSection.classList.contains('visible')) {
|
||||
const trackInfo = ` | Now Playing: ${playlist[currentTrack].name}`;
|
||||
finalMemo = finalMemo + trackInfo;
|
||||
}
|
||||
|
||||
return finalMemo;
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the simple-boost component attributes and display amount
|
||||
@ -1830,11 +1965,11 @@
|
||||
*/
|
||||
function updateAlbyBoostButton() {
|
||||
const amount = parseFloat(albyAmount.value).toFixed(1);
|
||||
const memo = albyMemo.value;
|
||||
const finalMemo = buildFinalMemo();
|
||||
|
||||
// Update simple-boost component attributes
|
||||
albySimpleBoost.setAttribute('amount', amount);
|
||||
albySimpleBoost.setAttribute('memo', memo);
|
||||
albySimpleBoost.setAttribute('memo', finalMemo);
|
||||
|
||||
// Update displayed amount on our custom button
|
||||
albyDisplayAmount.textContent = parseFloat(amount).toFixed(2);
|
||||
@ -1889,8 +2024,22 @@
|
||||
updateAlbyBoostButton();
|
||||
});
|
||||
|
||||
// Include track checkbox change handler
|
||||
albyIncludeTrack.addEventListener('change', () => {
|
||||
updateAlbyBoostButton();
|
||||
});
|
||||
|
||||
// Boost button click - trigger the simple-boost component
|
||||
albyBoostBtn.addEventListener('click', () => {
|
||||
// Build final memo and validate length
|
||||
const finalMemo = buildFinalMemo();
|
||||
|
||||
// Check if total memo exceeds 400 characters
|
||||
if (finalMemo.length > 400) {
|
||||
alert(`Memo too long! Your message with track info is ${finalMemo.length} characters. Maximum is 400.\n\nPlease shorten your message or uncheck "Include current track?"`);
|
||||
return; // Don't send the boost
|
||||
}
|
||||
|
||||
// Ensure latest form values are synced to simple-boost before triggering
|
||||
updateAlbyBoostButton();
|
||||
// Click the inner button div inside the shadow DOM
|
||||
@ -1905,6 +2054,9 @@
|
||||
// Reset form to default values
|
||||
albyAmount.value = '1.0';
|
||||
albyMemo.value = '';
|
||||
// Reset track checkbox (will be re-evaluated when panel reopens)
|
||||
albyIncludeTrack.checked = true;
|
||||
albyTrackSection.classList.remove('visible');
|
||||
updateAlbyCharCount();
|
||||
updateAlbyBoostButton();
|
||||
// Close the modal after successful boost
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user