diff --git a/README.md b/README.md
index e01ed85..5490447 100644
--- 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`:
diff --git a/style.css b/style.css
index fb2caf3..3d38e16 100755
--- 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;
- }
}
\ No newline at end of file
diff --git a/template.html b/template.html
index 15b8407..4d49d55 100755
--- a/template.html
+++ b/template.html
@@ -20,7 +20,7 @@
-
+