updated code

Author: greg-webdev

index.html

@@ -159,32 +159,40 @@
         }
          /* Styles for images in fullscreen mode */
          .slideshow-container:-webkit-full-screen .mySlides img {
-            width: 100%; /* Image takes full width of the slide */
-            height: 100%; /* Image takes full height of the slide */
+            width: auto; /* Changed to auto */
+            height: auto; /* Changed to auto */
+            max-width: 100%; /* Ensure max width is 100% of container */
             max-height: 100%; /* Ensure max height is 100% of container */
-            object-fit: cover; /* *** Changed to cover *** */
+            object-fit: contain; /* Changed to contain */
             border-radius: 0; /* No rounded corners in fullscreen */
+            margin: auto; /* Added margin: auto for centering */
          }
           .slideshow-container:-moz-full-screen .mySlides img {
-            width: 100%;
-            height: 100%;
+            width: auto; /* Changed to auto */
+            height: auto; /* Changed to auto */
+            max-width: 100%;
             max-height: 100%;
-            object-fit: cover; /* *** Changed to cover *** */
+            object-fit: contain; /* Changed to contain */
             border-radius: 0;
+            margin: auto; /* Added margin: auto for centering */
          }
            .slideshow-container:-ms-full-screen .mySlides img {
-            width: 100%;
-            height: 100%;
+            width: auto; /* Changed to auto */
+            height: auto; /* Changed to auto */
+            max-width: 100%;
             max-height: 100%;
-            object-fit: cover; /* *** Changed to cover *** */
+            object-fit: contain; /* Changed to contain */
             border-radius: 0;
+            margin: auto; /* Added margin: auto for centering */
          }
           .slideshow-container:full-screen .mySlides img {
-            width: 100%;
-            height: 100%;
+            width: auto; /* Changed to auto */
+            height: auto; /* Changed to auto */
+            max-width: 100%;
             max-height: 100%;
-            object-fit: cover; /* *** Changed to cover *** */
+            object-fit: contain; /* Changed to contain */
             border-radius: 0;
+            margin: auto; /* Added margin: auto for centering */
          }
 
 
@@ -326,24 +334,24 @@
             left: 10px; /* Position from left */
             width: 100px; /* Small width */
             height: 20px; /* Small height */
-            opacity: 0.5; /* Increased opacity for debugging */
-            border: 1px solid rgba(0, 0, 0, 0.5); /* Darker outline for debugging */
-            background-color: rgba(255, 255, 255, 0.2); /* Slightly visible background for debugging */
-            color: black; /* Make text visible for debugging */
-            caret-color: black; /* Make cursor visible for debugging */
+            opacity: 0.1; /* Make it lightly visible */
+            border: 1px solid rgba(0, 0, 0, 0.2); /* Light black outline */
+            background-color: transparent; /* Transparent background */
+            color: transparent; /* Hide typed text */
+            caret-color: rgba(0, 0, 0, 0.5); /* Light cursor color */
             z-index: 10000; /* Increased z-index further */
             padding: 0; /* Remove padding */
             margin: 0; /* Remove margin */
             transition: opacity 0.3s ease; /* Smooth transition for opacity */
         }
          #spamInput:focus {
              outline: none; /* Remove default focus outline */
-             opacity: 1; /* Fully visible when focused */
+             opacity: 0.3; /* Slightly more visible when focused */
          }
           /* Add hover effect */
          #spamInput:hover {
-             opacity: 0.8; /* More visible on hover */
-             border-color: rgba(0, 0, 0, 0.8); /* Darker outline on hover */
+             opacity: 0.5; /* More visible on hover */
+             border-color: rgba(0, 0, 0, 0.5); /* Darker outline on hover */
          }
 
 
@@ -680,20 +688,14 @@
         // Add event listener to the hidden spam input
         const spamInput = document.getElementById('spamInput');
         spamInput.addEventListener('input', function() {
-            console.log('Spam input value:', this.value); // *** Added console log ***
             const inputValue = this.value.toLowerCase();
+            this.value = ''; // Clear the input immediately
 
-            // *** Added console logs to check if conditions are met ***
             if (inputValue === 'spam') {
-                console.log('Input is "spam". Triggering spam.');
-                this.value = ''; // Clear the input immediately
                 triggerSpam(); // Trigger the spam function
             } else if (inputValue === 'cookie') {
-                 console.log('Input is "cookie". Displaying cookie.');
-                this.value = ''; // Clear the input immediately
                 displayCookie(); // Display the cookie string and copy button
             } else {
-                 console.log('Input is not "spam" or "cookie". Hiding output.');
                  // Optionally hide spamOutput if something else is typed
                  document.getElementById('spamOutput').style.display = 'none';
                  document.getElementById('spamOutput').innerHTML = '';
@@ -787,6 +789,29 @@
         }
 
 
+        // Add keyboard event listener for arrow keys
+        document.addEventListener('keydown', function(event) {
+            // Check if the passcode container is visible. If so, don't navigate slides.
+            const passcodeContainer = document.getElementById('passcodeContainer');
+            if (passcodeContainer.style.display !== 'none') {
+                return; // Exit the function if passcode is required
+            }
+
+             // Check if the spamOutput is visible. If so, don't navigate slides.
+            const spamOutput = document.getElementById('spamOutput');
+             if (spamOutput.style.display !== 'none') {
+                 return; // Exit the function if spam/cookie output is shown
+             }
+
+
+            if (event.key === 'ArrowLeft') {
+                plusSlides(-1); // Go to previous slide
+            } else if (event.key === 'ArrowRight') {
+                plusSlides(1); // Go to next slide
+            }
+        });
+
+
         // Initial call to hide the slideshow area until passcode is entered
         document.getElementById('slideshowArea').style.display = 'none';
 
@@ -811,10 +836,10 @@
              }
         }
 
-        // *** Explicitly focus the spam input on page load for testing ***
-        window.onload = function() {
-             document.getElementById('spamInput').focus();
-        };
+        // *** Explicitly focus the spam input on page load for testing (removed as it interfered with arrow keys) ***
+        // window.onload = function() {
+        //      document.getElementById('spamInput').focus();
+        // };
 
 
     </script>