boost panel now includes current track. pink box removal

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>&#9889;</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

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>&#9889;</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