form

static/css/forms.css

@@ -399,6 +399,12 @@
     font-style: normal;
 }
 
+.file-input-text.file-encrypted {
+    color: #27ae60;
+    font-weight: 500;
+    font-style: normal;
+}
+
 .file-input-wrapper::after {
     content: "📎";
     font-size: 1.1rem;
@@ -406,6 +412,56 @@
     margin-left: 0.5rem;
 }
 
+.file-input-wrapper.file-encrypted::after {
+    content: "🔒";
+    color: #27ae60;
+}
+
+/* Индикатор процесса шифрования */
+.encryption-status {
+    margin-top: 0.5rem;
+    padding: 0.5rem;
+    border-radius: 8px;
+    font-size: 0.9rem;
+    text-align: center;
+    transition: all 0.3s ease;
+}
+
+.encryption-status.encrypting {
+    background: #fff3cd;
+    color: #856404;
+    border: 1px solid #ffeaa7;
+}
+
+.encryption-status.encrypted {
+    background: #d4edda;
+    color: #155724;
+    border: 1px solid #c3e6cb;
+}
+
+.encryption-status.error {
+    background: #f8d7da;
+    color: #721c24;
+    border: 1px solid #f5c6cb;
+}
+
+/* Анимация шифрования */
+.encrypting-spinner {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border: 2px solid #f3f3f3;
+    border-top: 2px solid #856404;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-right: 0.5rem;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
 .file-info {
     margin-top: 0.5rem;
     text-align: left;

static/css/image-optimization.css

@@ -0,0 +1,46 @@
+/* Image optimization styles for S3 images */
+
+/* Lazy loading fallback */
+img[loading="lazy"] {
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+img[loading="lazy"].loaded {
+    opacity: 1;
+}
+
+/* Improve gallery performance */
+.gallery .img {
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    will-change: transform;
+}
+
+/* Responsive images */
+img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+}
+
+/* Placeholder while loading */
+.gallery .img::before {
+    content: "";
+    display: block;
+    background: linear-gradient(90deg, #f0f0f0 25%, transparent 25%, transparent 50%, #f0f0f0 50%, #f0f0f0 75%, transparent 75%, transparent);
+    background-size: 20px 20px;
+    animation: loading 1s linear infinite;
+}
+
+@keyframes loading {
+    0% { background-position: 0 0; }
+    100% { background-position: 20px 0; }
+}
+
+/* Hide placeholder when image loads */
+.gallery .img img {
+    position: relative;
+    z-index: 1;
+}