diff --git a/links/templates/links/mini_apps/image_gallery.html b/links/templates/links/mini_apps/image_gallery.html
index a4d36a0..0842221 100644
--- a/links/templates/links/mini_apps/image_gallery.html
+++ b/links/templates/links/mini_apps/image_gallery.html
@@ -274,6 +274,35 @@
border: 1px solid rgba(255, 255, 255, 0.1);
}
+ .fullscreen-btn {
+ position: absolute;
+ bottom: 30px;
+ right: 90px;
+ width: 50px;
+ height: 50px;
+ background: rgba(0, 0, 0, 0.5);
+ backdrop-filter: blur(10px);
+ border-radius: 25px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ z-index: 12;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ transition: transform 0.3s ease;
+ }
+
+ .fullscreen-btn:hover {
+ transform: scale(1.1);
+ background: rgba(50, 50, 50, 0.7);
+ }
+
+ .fullscreen-btn i {
+ font-size: 20px;
+ color: white;
+ transition: transform 0.3s ease;
+ }
+
.progress-bar {
position: absolute;
bottom: 0;
@@ -352,6 +381,12 @@
bottom: 150px;
}
+ .fullscreen-btn {
+ top: 20px;
+ left: 20px;
+ width: 40px;
+ height: 40px;
+ }
.back-button {
right: 30px;
@@ -367,6 +402,9 @@
+
+
+
@@ -439,7 +477,8 @@
timerDisplay: document.getElementById('timer'),
progressBar: document.querySelector('.progress-bar'),
controlToggle: document.getElementById('controlToggle'),
- controlPanel: document.getElementById('controlPanel')
+ controlPanel: document.getElementById('controlPanel'),
+ fullscreenBtn: document.getElementById('fullscreenBtn')
};
// Initialize application
@@ -450,7 +489,7 @@
dom.intervalInput.addEventListener('change', updateInterval);
dom.nextBtn.addEventListener('click', loadNextImage);
dom.controlToggle.addEventListener('click', toggleControls);
-
+ dom.fullscreenBtn.addEventListener('click', toggleFullscreen);
// Load first image
loadNextImage();
@@ -539,6 +578,42 @@
dom.controlToggle.classList.toggle('active');
}
+ // Toggle fullscreen mode
+ function toggleFullscreen() {
+ if (!document.fullscreenElement && // standard property
+ !document.mozFullScreenElement && // Firefox
+ !document.webkitFullscreenElement && // Chrome, Safari and Opera
+ !document.msFullscreenElement) { // IE/Edge
+
+ // Enter fullscreen
+ const docElem = document.documentElement;
+ if (docElem.requestFullscreen) {
+ docElem.requestFullscreen();
+ } else if (docElem.mozRequestFullScreen) { // Firefox
+ docElem.mozRequestFullScreen();
+ } else if (docElem.webkitRequestFullscreen) { // Chrome, Safari and Opera
+ docElem.webkitRequestFullscreen();
+ } else if (docElem.msRequestFullscreen) { // IE/Edge
+ docElem.msRequestFullscreen();
+ }
+ dom.fullscreenBtn.querySelector('i').classList.remove('fa-expand');
+ dom.fullscreenBtn.querySelector('i').classList.add('fa-compress');
+ } else {
+ // Exit fullscreen
+ if (document.exitFullscreen) {
+ document.exitFullscreen();
+ } else if (document.mozCancelFullScreen) { // Firefox
+ document.mozCancelFullScreen();
+ } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
+ document.webkitExitFullscreen();
+ } else if (document.msExitFullscreen) { // IE/Edge
+ document.msExitFullscreen();
+ }
+ dom.fullscreenBtn.querySelector('i').classList.remove('fa-compress');
+ dom.fullscreenBtn.querySelector('i').classList.add('fa-expand');
+ }
+ }
+
// Get random image ID (between 1000-1084)
function getRandomImageId() {
return Math.floor(Math.random() * 85) + 1000;
@@ -618,5 +693,26 @@
// Initialize app when page loads
window.addEventListener('DOMContentLoaded', initApp);
+
+ // Listen for fullscreen changes to update button icon
+ document.addEventListener('fullscreenchange', updateFullscreenButtonIcon);
+ document.addEventListener('webkitfullscreenchange', updateFullscreenButtonIcon);
+ document.addEventListener('mozfullscreenchange', updateFullscreenButtonIcon);
+ document.addEventListener('MSFullscreenChange', updateFullscreenButtonIcon);
+
+ function updateFullscreenButtonIcon() {
+ if (document.fullscreenElement ||
+ document.webkitFullscreenElement ||
+ document.mozFullScreenElement ||
+ document.msFullscreenElement) {
+ // If in fullscreen
+ dom.fullscreenBtn.querySelector('i').classList.remove('fa-expand');
+ dom.fullscreenBtn.querySelector('i').classList.add('fa-compress');
+ } else {
+ // If not in fullscreen
+ dom.fullscreenBtn.querySelector('i').classList.remove('fa-compress');
+ dom.fullscreenBtn.querySelector('i').classList.add('fa-expand');
+ }
+ }
{% endblock %}