Skip to content

Commit db434b3

Browse files
danlexclaude
andcommitted
Add screenshot + fullscreen buttons, based on quality audit
New toolbar buttons on every animation: - 📷 Screenshot: one-click PNG export via canvas.toDataURL() - ⛶ Fullscreen: toggle browser fullscreen mode These were identified as top missing features in the learning system analysis (quality audit of 113 animations). Also saved audit findings to memory for future sessions: - 25 animations missing mouse interaction (backfill needed) - Gallery filter system has tag mismatches - Oversaturated: attractors (16), underrepresented: sacred geometry, chemistry, sound visualization Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent dd1dacf commit db434b3

1 file changed

Lines changed: 40 additions & 0 deletions

File tree

shared-ui.js

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -723,6 +723,21 @@
723723
uploadBtn.title = 'Upload MP3';
724724
toolbar.appendChild(uploadBtn);
725725

726+
// Screenshot button
727+
const screenshotBtn = document.createElement('button');
728+
screenshotBtn.className = 'tool-btn';
729+
screenshotBtn.innerHTML = '&#128247;'; // camera
730+
screenshotBtn.title = 'Save Screenshot';
731+
toolbar.appendChild(screenshotBtn);
732+
733+
// Fullscreen button
734+
const fsBtn = document.createElement('button');
735+
fsBtn.className = 'tool-btn';
736+
fsBtn.innerHTML = '&#9974;'; // expand
737+
fsBtn.title = 'Fullscreen';
738+
fsBtn.style.fontSize = '14px';
739+
toolbar.appendChild(fsBtn);
740+
726741
// Hidden file input
727742
const audioFileInput = document.createElement('input');
728743
audioFileInput.type = 'file';
@@ -828,6 +843,31 @@
828843
copyToClipboard(code, embedBtn);
829844
});
830845

846+
// Screenshot button
847+
screenshotBtn.addEventListener('click', () => {
848+
const canvas = document.querySelector('canvas');
849+
if (!canvas) return;
850+
const link = document.createElement('a');
851+
link.download = `${pageName.toLowerCase().replace(/\s+/g, '-')}.png`;
852+
link.href = canvas.toDataURL('image/png');
853+
link.click();
854+
showToast('Screenshot saved');
855+
});
856+
857+
// Fullscreen button
858+
fsBtn.addEventListener('click', () => {
859+
if (document.fullscreenElement) {
860+
document.exitFullscreen();
861+
fsBtn.innerHTML = '&#9974;';
862+
} else {
863+
document.documentElement.requestFullscreen();
864+
fsBtn.innerHTML = '&#10005;'; // X to exit
865+
}
866+
});
867+
document.addEventListener('fullscreenchange', () => {
868+
if (!document.fullscreenElement) fsBtn.innerHTML = '&#9974;';
869+
});
870+
831871
// ESC to close panels + stop audio
832872
document.addEventListener('keydown', (e) => {
833873
if (e.key === 'Escape') {

0 commit comments

Comments
 (0)