Style update

links/templates/links/mini_apps/image_gallery.html

@@ -89,17 +89,56 @@
     .control-panel {
         position: absolute;
         bottom: 30px;
-        left: 50%;
-        transform: translateX(-50%);
+        right: 80px;
         background: rgba(0, 0, 0, 0.7);
         backdrop-filter: blur(10px);
-        border-radius: 50px;
+        border-radius: 16px;
         padding: 15px 25px;
         display: flex;
         gap: 20px;
         z-index: 10;
         box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
         border: 1px solid rgba(255, 255, 255, 0.1);
+        transition: transform 0.3s ease, opacity 0.3s ease;
+        transform-origin: bottom right;
+    }
+
+    .control-panel.folded {
+        transform: scale(0);
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    .control-toggle {
+        position: absolute;
+        bottom: 30px;
+        right: 30px;
+        width: 50px;
+        height: 50px;
+        background: rgba(0, 0, 0, 0.7);
+        backdrop-filter: blur(10px);
+        border-radius: 25px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        z-index: 11;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        transition: transform 0.3s ease;
+    }
+
+    .control-toggle:hover {
+        transform: scale(1.1);
+    }
+
+    .control-toggle i {
+        font-size: 20px;
+        color: white;
+        transition: transform 0.3s ease;
+    }
+
+    .control-toggle.active i {
+        transform: rotate(45deg);
     }
 
     .control-group {
@@ -258,25 +297,6 @@
         gap: 10px;
     }
 
-    .preview-item {
-        height: 60px;
-        border-radius: 8px;
-        background-size: cover;
-        background-position: center;
-        cursor: pointer;
-        border: 2px solid transparent;
-        transition: all 0.3s ease;
-    }
-
-    .preview-item:hover {
-        transform: translateY(-3px);
-    }
-
-    .preview-item.active {
-        border-color: #ff6b6b;
-        box-shadow: 0 0 15px rgba(255, 107, 107, 0.5);
-    }
-
     .back-button {
         position: absolute;
         top: 30px;
@@ -342,7 +362,10 @@
         <i class="fas fa-arrow-left"></i> {% trans "Back to Mini Apps" %}
     </a>
     <div class="slideshow-container" id="slideshow"></div>
-    <div class="control-panel">
+    <div class="control-toggle" id="controlToggle">
+        <i class="fas fa-cog"></i>
+    </div>
+    <div class="control-panel folded" id="controlPanel">
         <div class="control-group">
             <div class="control-label">{% trans "Animation Effect" %}</div>
             <select id="animationType">
@@ -399,7 +422,8 @@
         loading: document.getElementById('loading'),
         timerDisplay: document.getElementById('timer'),
         progressBar: document.querySelector('.progress-bar'),
-        previewItems: document.querySelectorAll('.preview-item')
+        controlToggle: document.getElementById('controlToggle'),
+        controlPanel: document.getElementById('controlPanel')
     };
 
     // Initialize application
@@ -408,19 +432,8 @@
         dom.animationType.addEventListener('change', updateAnimationType);
         dom.intervalInput.addEventListener('change', updateInterval);
         dom.nextBtn.addEventListener('click', loadNextImage);
+        dom.controlToggle.addEventListener('click', toggleControls);
 
-        // Add animation preview click events
-        dom.previewItems.forEach(item => {
-            item.addEventListener('click', function() {
-                // Remove all active classes
-                dom.previewItems.forEach(i => i.classList.remove('active'));
-                // Add active class to current item
-                this.classList.add('active');
-                // Update animation type
-                config.animationType = this.dataset.animation;
-                dom.animationType.value = config.animationType;
-            });
-        });
 
         // Load first image
         loadNextImage();
@@ -491,6 +504,12 @@
         dom.timerDisplay.textContent = `00:${seconds.toString().padStart(2, '0')}`;
     }
 
+    // Toggle controls panel
+    function toggleControls() {
+        dom.controlPanel.classList.toggle('folded');
+        dom.controlToggle.classList.toggle('active');
+    }
+
     // Get random image ID (between 1000-1084)
     function getRandomImageId() {
         return Math.floor(Math.random() * 85) + 1000;