поправлен предосмотр

2025-11-21 13:02:44 +08:00
parent 0fdfb09fa0
commit 32bd29efd5
3 changed files with 170 additions and 136 deletions
--- a/README.md
+++ b/README.md
@@ -12,10 +12,7 @@ cd /home/romkazvo/www/cgi-bin
 ```
 ### Компиляция CGI 
 ```bash
-gcc -o index.cgi index.c
-gcc -o style.cgi style.c
-gcc -o status.cgi status.c
-chmod +x *.cgi
+sudo sh build.sh
 ```
 ### Конфигурация Nginx
 Файл конфигурации `/etc/nginx/sites-available/trashbox`:<br>
--- a/style.css
+++ b/style.css
@@ -351,6 +351,7 @@ li:hover {
    height: 100%;
    background-color: rgba(0,0,0,0.8);
    backdrop-filter: blur(5px);
+    overflow: auto;
 }

 .preview-content {
@@ -358,9 +359,6 @@ li:hover {
    margin: 2% auto;
    padding: 0;
    border-radius: 8px;
-    width: 90%;
-    height: 90%;
-    max-width: 1200px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
@@ -368,39 +366,6 @@ li:hover {
    transition: all 0.3s ease;
 }

-/* Размеры для разных типов контента */
-.preview-content.image-type {
-    max-width: 90%;
-    max-height: 90%;
-    width: auto;
-    height: auto;
-}
-
-.preview-content.text-type {
-    max-width: 800px;
-    max-height: 80%;
-}
-
-.preview-content.audio-type {
-    max-width: 500px;
-    max-height: 300px;
-}
-
-.preview-content.video-type {
-    max-width: 90%;
-    max-height: 90%;
-}
-
-.preview-content.pdf-type {
-    max-width: 90%;
-    max-height: 90%;
-}
-
-.preview-content.default-type {
-    max-width: 90%;
-    max-height: 90%;
-}
-
 .preview-header {
    display: flex;
    justify-content: space-between;
@@ -453,39 +418,54 @@ li:hover {
    background: var(--bg-primary);
 }

+/* Стили для контейнера изображения */
+.preview-image-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-grow: 1;
+    padding: 10px;
+    background: var(--bg-primary);
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+}
+
+.preview-image {
+    max-width: 100%;
+    max-height: 100%;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+    border-radius: 8px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
+    display: block;
+}
+
+/* Улучшаем скроллинг для очень больших изображений */
+.preview-modal::-webkit-scrollbar {
+    width: 8px;
+}
+
+.preview-modal::-webkit-scrollbar-track {
+    background: rgba(255,255,255,0.1);
+}
+
+.preview-modal::-webkit-scrollbar-thumb {
+    background: rgba(255,255,255,0.3);
+    border-radius: 4px;
+}
+
+.preview-modal::-webkit-scrollbar-thumb:hover {
+    background: rgba(255,255,255,0.5);
+}
+
 /* Адаптивность */
@media (max-width: 768px) {
    .preview-content {
-        width: 95%;
-        height: 95%;
        margin: 2.5% auto;
    }
    
-    .preview-content.image-type {
-        max-width: 95%;
-        max-height: 95%;
-    }
-    
-    .preview-content.text-type {
-        max-width: 95%;
-        max-height: 80%;
-    }
-    
-    .preview-content.audio-type {
-        max-width: 95%;
-        max-height: 300px;
-    }
-    
-    .preview-content.video-type {
-        max-width: 95%;
-        max-height: 95%;
-    }
-    
-    .preview-content.pdf-type {
-        max-width: 95%;
-        max-height: 95%;
-    }
-    
    .preview-header {
        padding: 0.75rem;
    }
@@ -493,6 +473,10 @@ li:hover {
    .preview-title {
        font-size: 0.9rem;
    }
+    
+    .preview-image-container {
+        padding: 5px;
+    }
 }

@media (max-width: 480px) {
@@ -560,27 +544,15 @@ li:hover {
        font-size: 0.8rem;
    }
    .preview-content {
-        width: 98%;
-        height: 98%;
        margin: 1% auto;
        border-radius: 4px;
    }
-    
-    .preview-content.image-type,
-    .preview-content.video-type,
-    .preview-content.pdf-type {
-        max-width: 98%;
-        max-height: 98%;
+    .preview-image-container {
+        padding: 2px;
    }
-    
-    .preview-content.text-type {
-        max-width: 98%;
-        max-height: 80%;
-    }
-    
-    .preview-content.audio-type {
-        max-width: 98%;
-        max-height: 250px;
+    .preview-image {
+        border-radius: 4px;
+        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    }
 }

@@ -609,8 +581,4 @@ li:hover {
    .file-link {
        width: 100%;
    }
-    
-    .preview-content.audio-type {
-        max-height: 200px;
-    }
 }
--- a/template.html
+++ b/template.html
@@ -20,7 +20,7 @@
    <meta name="twitter:description" content="Моя личная помоечка" />
    <meta name="twitter:image" content="https://home.mashup.su/og.png" />
    <meta name="description" content="Моя личная помоечка" />
-    <meta name="keywords" content="файлы, обмен, скачать, загрузить" />
+    <meta name="keywords" content="RomkaZVO, mashup, mashup su, файлы, обмен, скачать, загрузить" />
    
    <script>
        function getCookie(name) {
@@ -58,7 +58,7 @@
    <div class="footer-content">
        <span>Навайбкодил с любовью ❤️</span>
        <a href="https://romkazvo.ru" target="_blank" class="footer-link">RomkaZVO</a><br>
-        Сделано при помощи BusyBox httpd и nginx для SSL<br>
+        Сделано при помощи BusyBox httpd и Nginx для SSL<br>
        Боже, храни Китай партия за DeepSeek
    </div>
    
@@ -80,7 +80,6 @@

    <button class="scroll-top" onclick="scrollToTop()">↑</button>

-    <!-- Модальное окно предпросмотра -->
    <div id="previewModal" class="preview-modal">
        <div class="preview-content" id="previewContent">
            <div class="preview-header">
@@ -123,18 +122,15 @@
            document.cookie = `theme=${newTheme}; expires=${date.toUTCString()}; path=/`;
        }

-        // Функции для предпросмотра файлов
        function openPreview(fileUrl) {
            const modal = document.getElementById('previewModal');
            const frame = document.getElementById('previewFrame');
            const content = document.getElementById('previewContent');
            const title = document.getElementById('previewTitle');
            
-            // Получаем имя файла из URL
            const fileName = fileUrl.split('/').pop();
            title.textContent = `Предпросмотр: ${fileName}`;
            
-            // Определяем тип файла для адаптивного масштабирования
            const fileExt = fileName.split('.').pop().toLowerCase();
            const imageTypes = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'bmp', 'svg', 'ico'];
            const textTypes = ['txt', 'md', 'html', 'htm', 'css', 'js', 'json', 'xml', 'csv'];
@@ -142,81 +138,154 @@
            const videoTypes = ['mp4', 'webm', 'ogv', 'mov', 'avi', 'mkv'];
            const isPDF = fileExt === 'pdf';
            
-            // Устанавливаем размеры в зависимости от типа файла
+            frame.style.display = 'block';
+            frame.src = '';
+            
+            let imgContainer = document.getElementById('previewImageContainer');
+            if (!imgContainer) {
+                imgContainer = document.createElement('div');
+                imgContainer.id = 'previewImageContainer';
+                imgContainer.className = 'preview-image-container';
+                content.appendChild(imgContainer);
+            }
+            imgContainer.style.display = 'none';
+            imgContainer.innerHTML = '';
+            
            if (imageTypes.includes(fileExt)) {
-                // Для изображений - автоматический размер
-                content.style.width = 'auto';
-                content.style.height = 'auto';
-                content.style.maxWidth = '90vw';
-                content.style.maxHeight = '90vh';
-            } else if (textTypes.includes(fileExt)) {
-                // Для текстовых файлов - компактное окно
-                content.style.width = '80vw';
-                content.style.height = '70vh';
-                content.style.maxWidth = '800px';
-                content.style.maxHeight = '600px';
-            } else if (audioTypes.includes(fileExt)) {
-                // Для аудио - маленькое окно
-                content.style.width = '500px';
-                content.style.height = '300px';
-                content.style.maxWidth = '90vw';
-                content.style.maxHeight = '400px';
-            } else if (videoTypes.includes(fileExt)) {
-                // Для видео - большое окно
-                content.style.width = '90vw';
-                content.style.height = '80vh';
-                content.style.maxWidth = '1200px';
-                content.style.maxHeight = '800px';
-            } else if (isPDF) {
-                // Для PDF - большое окно
+                frame.style.display = 'none';
+                imgContainer.style.display = 'flex';
+                
+                const img = document.createElement('img');
+                img.src = fileUrl;
+                img.alt = fileName;
+                img.className = 'preview-image';
+                
+                img.onload = function() {
+                    adjustModalForImage(this);
+                };
+                
+                img.onerror = function() {
+                    console.error('Failed to load image:', fileUrl);
+                    frame.style.display = 'block';
+                    imgContainer.style.display = 'none';
+                    frame.src = fileUrl;
+                };
+                
+                imgContainer.appendChild(img);
+                
                content.style.width = '90vw';
                content.style.height = '90vh';
-                content.style.maxWidth = '1200px';
-                content.style.maxHeight = '900px';
-                frame.classList.add('pdf');
+                content.style.maxWidth = 'none';
+                content.style.maxHeight = 'none';
+                
            } else {
-                // По умолчанию - средний размер
-                content.style.width = '80vw';
-                content.style.height = '80vh';
-                content.style.maxWidth = '1000px';
-                content.style.maxHeight = '800px';
+                frame.style.display = 'block';
+                imgContainer.style.display = 'none';
+                
+                if (textTypes.includes(fileExt)) {
+                    content.style.width = '80vw';
+                    content.style.height = '70vh';
+                    content.style.maxWidth = '800px';
+                    content.style.maxHeight = '600px';
+                } else if (audioTypes.includes(fileExt)) {
+                    content.style.width = '500px';
+                    content.style.height = '300px';
+                    content.style.maxWidth = '90vw';
+                    content.style.maxHeight = '400px';
+                } else if (videoTypes.includes(fileExt)) {
+                    content.style.width = '90vw';
+                    content.style.height = '80vh';
+                    content.style.maxWidth = '1200px';
+                    content.style.maxHeight = '800px';
+                } else if (isPDF) {
+                    content.style.width = '90vw';
+                    content.style.height = '90vh';
+                    content.style.maxWidth = '1200px';
+                    content.style.maxHeight = '900px';
+                    frame.classList.add('pdf');
+                } else {
+                    content.style.width = '80vw';
+                    content.style.height = '80vh';
+                    content.style.maxWidth = '1000px';
+                    content.style.maxHeight = '800px';
+                }
+                
+                frame.src = fileUrl;
            }
            
-            // Просто открываем файл напрямую в iframe
-            frame.src = fileUrl;
-            
-            // Показываем модальное окно
            modal.style.display = 'block';
            document.body.style.overflow = 'hidden';
        }
        
+
+        function adjustModalForImage(img) {
+            const content = document.getElementById('previewContent');
+            const maxWidth = window.innerWidth * 0.95; 
+            const maxHeight = window.innerHeight * 0.95; 
+            
+            const imgWidth = img.naturalWidth;
+            const imgHeight = img.naturalHeight;
+            
+            console.log(`Image size: ${imgWidth}x${imgHeight}, Screen limits: ${maxWidth}x${maxHeight}`);
+            
+            let scale = 1;
+            
+            if (imgWidth > maxWidth) {
+                scale = Math.min(scale, maxWidth / imgWidth);
+            }
+            if (imgHeight > maxHeight) {
+                scale = Math.min(scale, maxHeight / imgHeight);
+            }
+            
+            const displayWidth = imgWidth * scale;
+            const displayHeight = imgHeight * scale;
+            
+            console.log(`Display size: ${displayWidth}x${displayHeight}, Scale: ${scale}`);
+            
+            content.style.width = (displayWidth + 20) + 'px';
+            content.style.height = (displayHeight + 80) + 'px'; 
+            
+            content.style.margin = 'auto';
+            content.style.position = 'absolute';
+            content.style.left = '50%';
+            content.style.top = '50%';
+            content.style.transform = 'translate(-50%, -50%)';
+        }
+        
        function closePreview() {
            const modal = document.getElementById('previewModal');
            const frame = document.getElementById('previewFrame');
            const content = document.getElementById('previewContent');
            
-            // Скрываем модальное окно и сбрасываем iframe
            modal.style.display = 'none';
            frame.src = '';
            frame.classList.remove('pdf');
            
-            // Сбрасываем стили
            content.style.width = '';
            content.style.height = '';
            content.style.maxWidth = '';
            content.style.maxHeight = '';
+            content.style.margin = '';
+            content.style.position = '';
+            content.style.left = '';
+            content.style.top = '';
+            content.style.transform = '';
+            
+            const imgContainer = document.getElementById('previewImageContainer');
+            if (imgContainer) {
+                imgContainer.style.display = 'none';
+                imgContainer.innerHTML = '';
+            }
            
            document.body.style.overflow = 'auto';
        }
        
-        // Закрытие модального окна по клику вне контента
        document.getElementById('previewModal').addEventListener('click', function(e) {
            if (e.target === this) {
                closePreview();
            }
        });
        
-        // Закрытие по ESC
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closePreview();