diff --git a/script.js b/script.js
index 8ac66c1..053109e 100644
--- a/script.js
+++ b/script.js
@@ -349,4 +349,57 @@ modalBackdrop.addEventListener('click', (event) => {
if (event.target === modalBackdrop) {
modalBackdrop.style.display = 'none';
}
+});
+
+// --- Zoom Palette Functionality ---
+
+const zoomButton = document.getElementById('zoom-palette');
+const zoomOverlay = document.getElementById('zoom-overlay');
+const zoomedPaletteContent = document.getElementById('zoomed-palette-content');
+
+// --- Event Listener to OPEN the zoom view ---
+zoomButton.addEventListener('click', () => {
+ // Don't do anything if the palette is empty
+ if (selectedPalette.length === 0) {
+ alert("Palette is empty. Add some colors to zoom in!");
+ return;
+ }
+
+ // Get the original container of the colored balloons
+ const originalPaletteColors = document.getElementById('palette-colors');
+
+ // Clear any old content and create a deep clone of the balloons
+ zoomedPaletteContent.innerHTML = '';
+ const clonedContent = originalPaletteColors.cloneNode(true);
+
+ // The clone doesn't need its own ID
+ clonedContent.id = '';
+
+ // Append the cloned balloons to our zoom container
+ zoomedPaletteContent.appendChild(clonedContent);
+
+ // Show the overlay by adding the .is-active class
+ zoomOverlay.classList.add('is-active');
+});
+
+// --- Function to CLOSE the zoom view ---
+function closeZoomView() {
+ zoomOverlay.classList.remove('is-active');
+}
+
+// --- Two ways to CLOSE the view for easy access ---
+
+// 1. Click on the dark background (the overlay itself)
+zoomOverlay.addEventListener('click', (event) => {
+ // Only close if the click is on the overlay, not the content inside
+ if (event.target === zoomOverlay) {
+ closeZoomView();
+ }
+});
+
+// 2. Press the 'Escape' key
+document.addEventListener('keydown', (event) => {
+ if (event.key === 'Escape' && zoomOverlay.classList.contains('is-active')) {
+ closeZoomView();
+ }
});
\ No newline at end of file