Update app.py

app.py

@@ -45,9 +45,10 @@ BASE_STYLE = '''
     --glass-bg: rgba(30, 30, 30, 0.7); --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
     --delete-color: #ff4444; --folder-color: #ffc107; --selection-color: rgba(139, 92, 246, 0.3);
     --note-color: #6a5acd; --share-color: #4caf50; --archive-color: #78909c;
-    --todolist-color: #29b6f6; --shoppinglist-color: #ffa726; --business-color: #fd7e14;
+    --todolist-color: #29b6f6; --shoppinglist-color: #ffa726; --business-color: #fd7e14; --camera-color: #42a5f5;
 }
 @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(255, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 68, 68, 0); } }
 * { margin: 0; padding: 0; box-sizing: border-box; }
 html { scroll-behavior: smooth; }
 body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--background-dark); color: var(--text-dark); line-height: 1.6; -webkit-tap-highlight-color: transparent; }
@@ -126,6 +127,7 @@ label { padding: 0; margin: 0; border: none; background: none; }
 #fab-option-todolist i { color: var(--todolist-color); }
 #fab-option-shoppinglist i { color: var(--shoppinglist-color); }
 #fab-option-business i { color: var(--business-color); }
+#fab-option-camera i { color: var(--camera-color); }
 #create-folder-form { display: none; margin-top: 15px; }
 .shared-link-item { display: flex; justify-content: space-between; align-items: center; padding: 8px; border-bottom: 1px solid #333; }
 .shared-link-item:last-child { border-bottom: none; }
@@ -149,6 +151,22 @@ label { padding: 0; margin: 0; border: none; background: none; }
 .public-list-item .quantity { font-weight: bold; color: var(--secondary); background: #2a2a2a; padding: 2px 8px; border-radius: 6px; }
 .form-group { margin-bottom: 15px; text-align: left; }
 .form-group small { color: var(--text-muted); font-size: 0.8em; margin-top: 4px; display: block; }
+#camera-modal { background: #000; z-index: 2500; }
+.camera-container { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; }
+#camera-view { width: 100%; height: 100%; object-fit: cover; }
+.camera-top-bar { position: absolute; top: 0; left: 0; right: 0; padding: 15px; display: flex; justify-content: space-between; align-items: center; background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent); }
+.camera-top-bar button { background: none; border: none; color: white; font-size: 24px; cursor: pointer; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
+.camera-zoom-slider { position: absolute; top: 80px; right: 10px; writing-mode: vertical-bt; width: 40px; display: none; }
+.camera-zoom-slider input { width: 150px; }
+.camera-controls { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; background: linear-gradient(to top, rgba(0,0,0,0.6), transparent); display: flex; justify-content: space-around; align-items: center; }
+#capture-btn { width: 70px; height: 70px; border-radius: 50%; border: 4px solid white; background-color: rgba(255,255,255,0.3); transition: all 0.2s; }
+#capture-btn.video.recording { background-color: var(--delete-color); border-radius: 15%; animation: pulse 1.5s infinite; }
+.camera-controls button { background: none; border: none; color: white; font-size: 28px; cursor: pointer; width: 70px; text-align: center; }
+#camera-mode-toggle { font-size: 0.8em; font-weight: bold; padding: 5px; border-radius: 10px; background: rgba(0,0,0,0.4); }
+#photo-preview-bar { position: absolute; bottom: 110px; left: 10px; right: 10px; height: 70px; display: flex; gap: 10px; overflow-x: auto; align-items: center; }
+#photo-preview-bar .preview-item { width: 60px; height: 60px; border-radius: 10px; border: 2px solid white; object-fit: cover; flex-shrink: 0; position: relative; }
+#photo-preview-bar .preview-item .remove-preview { position: absolute; top: -5px; right: -5px; background: var(--delete-color); color: white; border-radius: 50%; width: 20px; height: 20px; font-size: 14px; border: none; line-height: 20px; text-align: center; cursor: pointer; }
+.video-timer { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.5); color: white; padding: 5px 10px; border-radius: 8px; font-family: monospace; display: none; }
 '''
 
 PUBLIC_SHARE_PAGE_HTML = '''
@@ -1043,6 +1061,7 @@ TMA_DASHBOARD_HTML_TEMPLATE = '''
     <h4>Добавить в "{{ current_folder.name if current_folder_id != 'root' else 'Главная' }}"</h4>
     <div class="fab-options">
         <label for="file-input" class="fab-option" id="fab-option-upload"><i class="fa-solid fa-upload"></i><span>Файлы</span></label>
+        <div class="fab-option" id="fab-option-camera" onclick="cameraManager.open()"><i class="fa-solid fa-camera"></i><span>Камера</span></div>
         <div class="fab-option" id="fab-option-note" onclick="openNoteModal()"><i class="fa-solid fa-note-sticky"></i><span>Заметку</span></div>
         <div class="fab-option" id="fab-option-folder"><i class="fa-solid fa-folder-plus"></i><span>Папку</span></div>
         <div class="fab-option" id="fab-option-todolist" onclick="openListEditorModal(null, 'todolist')"><i class="fa-solid fa-list-check"></i><span>Список дел</span></div>
@@ -1062,6 +1081,26 @@ TMA_DASHBOARD_HTML_TEMPLATE = '''
     <button class="btn" style="background: #555; width: 100%; margin-top: 10px;" onclick="closeFabModal()">Закрыть</button>
 </div></div>
 
+<div class="modal" id="camera-modal">
+    <div class="camera-container">
+        <video id="camera-view" autoplay playsinline></video>
+        <div class="camera-top-bar">
+            <button id="camera-close-btn"><i class="fa-solid fa-xmark"></i></button>
+            <div class="video-timer" id="video-timer">00:00</div>
+            <button id="upload-captured-btn" style="font-size: 1rem; display: none;"><i class="fa-solid fa-upload"></i> <span id="upload-counter"></span></button>
+        </div>
+        <div class="camera-zoom-slider">
+            <input type="range" id="zoom-slider" min="1" max="10" step="0.1" value="1" orient="vertical">
+        </div>
+        <div id="photo-preview-bar"></div>
+        <div class="camera-controls">
+            <button id="camera-mode-toggle">PHOTO</button>
+            <button id="capture-btn"></button>
+            <button id="switch-camera-btn"><i class="fa-solid fa-rotate"></i></button>
+        </div>
+    </div>
+</div>
+
 <div class="modal" id="note-modal"><div class="modal-content" style="padding: 20px; max-width: 500px; width: 90%;">
     <h4 id="note-modal-title">Новая заметка</h4>
     <input type="hidden" id="note-id-input">
@@ -1485,6 +1524,7 @@ TMA_DASHBOARD_HTML_TEMPLATE = '''
             backButton.show();
             backButton.onClick(() => { haptic.impactOccurred('light'); window.location.href = `{{ url_for('tma_dashboard') }}?folder_id=${parentFolderId}`; });
         } else { window.Telegram.WebApp.BackButton.hide(); }
+        cameraManager.init();
     });
     function closeListEditorModal() { document.getElementById('list-editor-modal').style.display = 'none'; }
     async function openListEditorModal(listId = null, listType) {
@@ -1585,6 +1625,259 @@ TMA_DASHBOARD_HTML_TEMPLATE = '''
         if (result.status === 'success') { haptic.notificationOccurred('success'); window.location.reload(); }
         else { haptic.notificationOccurred('error'); Telegram.WebApp.showAlert(result.message || 'Ошибка сохранения.'); }
     }
+    const cameraManager = {
+        modal: null, video: null, stream: null, facingMode: 'environment',
+        capturedBlobs: [], mode: 'photo', isRecording: false,
+        recorder: null, recordedChunks: [], timerInterval: null,
+        
+        init() {
+            this.modal = document.getElementById('camera-modal');
+            this.video = document.getElementById('camera-view');
+            document.getElementById('camera-close-btn').addEventListener('click', () => this.close());
+            document.getElementById('switch-camera-btn').addEventListener('click', () => this.switchCamera());
+            document.getElementById('capture-btn').addEventListener('click', () => this.capture());
+            document.getElementById('camera-mode-toggle').addEventListener('click', () => this.toggleMode());
+            document.getElementById('upload-captured-btn').addEventListener('click', () => this.uploadCaptured());
+            document.getElementById('zoom-slider').addEventListener('input', (e) => this.setZoom(e.target.value));
+        },
+        
+        async open() {
+            closeFabModal();
+            haptic.impactOccurred('medium');
+            this.modal.style.display = 'flex';
+            if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+                Telegram.WebApp.showAlert('Камера не поддерживается на этом устройстве.');
+                return;
+            }
+            await this.startCamera();
+        },
+        
+        close() {
+            haptic.impactOccurred('light');
+            this.stopCamera();
+            this.modal.style.display = 'none';
+            this.capturedBlobs = [];
+            this.updatePreview();
+        },
+        
+        async startCamera() {
+            this.stopCamera();
+            const constraints = {
+                video: {
+                    facingMode: this.facingMode,
+                    width: { ideal: 4096 },
+                    height: { ideal: 2160 }
+                },
+                audio: (this.mode === 'video')
+            };
+            try {
+                this.stream = await navigator.mediaDevices.getUserMedia(constraints);
+                this.video.srcObject = this.stream;
+                this.video.play();
+                setTimeout(() => this.setupZoom(), 500);
+            } catch (err) {
+                Telegram.WebApp.showAlert(`Ошибка доступа к камере: ${err.name}`);
+                this.close();
+            }
+        },
+        
+        stopCamera() {
+            if (this.stream) {
+                this.stream.getTracks().forEach(track => track.stop());
+                this.stream = null;
+            }
+            if (this.isRecording) {
+                this.stopRecording();
+            }
+        },
+        
+        switchCamera() {
+            haptic.impactOccurred('light');
+            this.facingMode = (this.facingMode === 'user') ? 'environment' : 'user';
+            this.startCamera();
+        },
+        
+        setupZoom() {
+            const zoomSliderContainer = document.querySelector('.camera-zoom-slider');
+            const zoomSlider = document.getElementById('zoom-slider');
+            if (this.stream) {
+                const track = this.stream.getVideoTracks()[0];
+                const capabilities = track.getCapabilities();
+                if (capabilities.zoom) {
+                    zoomSlider.min = capabilities.zoom.min;
+                    zoomSlider.max = capabilities.zoom.max;
+                    zoomSlider.step = capabilities.zoom.step;
+                    zoomSlider.value = track.getSettings().zoom || capabilities.zoom.min;
+                    zoomSliderContainer.style.display = 'block';
+                } else {
+                    zoomSliderContainer.style.display = 'none';
+                }
+            }
+        },
+        
+        setZoom(value) {
+            if (this.stream) {
+                const track = this.stream.getVideoTracks()[0];
+                track.applyConstraints({ advanced: [{ zoom: value }] });
+            }
+        },
+        
+        toggleMode() {
+            this.mode = (this.mode === 'photo') ? 'video' : 'photo';
+            document.getElementById('camera-mode-toggle').textContent = this.mode.toUpperCase();
+            document.getElementById('capture-btn').classList.toggle('video', this.mode === 'video');
+            this.startCamera(); // Restart with/without audio
+        },
+        
+        capture() {
+            haptic.impactOccurred('heavy');
+            if (this.mode === 'photo') {
+                this.takePhoto();
+            } else {
+                this.toggleRecording();
+            }
+        },
+        
+        takePhoto() {
+            const canvas = document.createElement('canvas');
+            canvas.width = this.video.videoWidth;
+            canvas.height = this.video.videoHeight;
+            const ctx = canvas.getContext('2d');
+            ctx.drawImage(this.video, 0, 0, canvas.width, canvas.height);
+            canvas.toBlob(blob => {
+                this.capturedBlobs.push({blob: blob, type: 'image/jpeg'});
+                this.updatePreview();
+            }, 'image/jpeg', 0.95);
+        },
+        
+        toggleRecording() {
+            if (this.isRecording) {
+                this.stopRecording();
+            } else {
+                this.startRecording();
+            }
+        },
+        
+        startRecording() {
+            if (!this.stream) return;
+            this.isRecording = true;
+            this.recordedChunks = [];
+            this.recorder = new MediaRecorder(this.stream);
+            this.recorder.ondataavailable = e => this.recordedChunks.push(e.data);
+            this.recorder.onstop = () => {
+                const blob = new Blob(this.recordedChunks, { type: 'video/webm' });
+                this.capturedBlobs.push({blob: blob, type: 'video/webm'});
+                this.updatePreview();
+            };
+            this.recorder.start();
+            document.getElementById('capture-btn').classList.add('recording');
+            this.startTimer();
+        },
+
+        stopRecording() {
+            if (this.recorder && this.isRecording) {
+                this.recorder.stop();
+                this.isRecording = false;
+                document.getElementById('capture-btn').classList.remove('recording');
+                this.stopTimer();
+            }
+        },
+        
+        startTimer() {
+            const timerEl = document.getElementById('video-timer');
+            timerEl.style.display = 'block';
+            let seconds = 0;
+            this.timerInterval = setInterval(() => {
+                seconds++;
+                const mins = Math.floor(seconds / 60).toString().padStart(2, '0');
+                const secs = (seconds % 60).toString().padStart(2, '0');
+                timerEl.textContent = `${mins}:${secs}`;
+            }, 1000);
+        },
+
+        stopTimer() {
+            clearInterval(this.timerInterval);
+            document.getElementById('video-timer').style.display = 'none';
+            document.getElementById('video-timer').textContent = '00:00';
+        },
+
+        updatePreview() {
+            const previewBar = document.getElementById('photo-preview-bar');
+            const uploadBtn = document.getElementById('upload-captured-btn');
+            const uploadCounter = document.getElementById('upload-counter');
+            previewBar.innerHTML = '';
+            this.capturedBlobs.forEach((item, index) => {
+                const previewItem = document.createElement('div');
+                previewItem.style.position = 'relative';
+                const url = URL.createObjectURL(item.blob);
+                let el;
+                if (item.type.startsWith('image')) {
+                    el = document.createElement('img');
+                } else {
+                    el = document.createElement('video');
+                    el.muted = true;
+                }
+                el.src = url;
+                el.className = 'preview-item';
+                
+                const removeBtn = document.createElement('button');
+                removeBtn.innerHTML = '&times;';
+                removeBtn.className = 'remove-preview';
+                removeBtn.onclick = (e) => {
+                    e.stopPropagation();
+                    this.capturedBlobs.splice(index, 1);
+                    this.updatePreview();
+                };
+                
+                previewItem.appendChild(el);
+                previewItem.appendChild(removeBtn);
+                previewBar.appendChild(previewItem);
+            });
+            
+            if (this.capturedBlobs.length > 0) {
+                uploadBtn.style.display = 'inline-block';
+                uploadCounter.textContent = this.capturedBlobs.length;
+            } else {
+                uploadBtn.style.display = 'none';
+            }
+        },
+
+        uploadCaptured() {
+            if (this.capturedBlobs.length === 0) return;
+            haptic.notificationOccurred('success');
+            const formData = new FormData();
+            formData.append('current_folder_id', '{{ current_folder_id }}');
+            this.capturedBlobs.forEach((item, index) => {
+                const extension = item.type.startsWith('image') ? '.jpg' : '.webm';
+                const filename = `capture_${Date.now()}_${index}${extension}`;
+                formData.append('files', item.blob, filename);
+            });
+            
+            this.close();
+            
+            const progressContainer = document.getElementById('progress-container');
+            const progressBar = document.getElementById('progress-bar');
+            progressContainer.style.display = 'block';
+            progressBar.style.width = '0%';
+            
+            const xhr = new XMLHttpRequest();
+            xhr.upload.addEventListener('progress', e => {
+                if (e.lengthComputable) {
+                    progressBar.style.width = Math.round((e.loaded / e.total) * 100) + '%';
+                }
+            });
+            xhr.addEventListener('load', () => {
+                haptic.notificationOccurred('success');
+                window.location.reload();
+            });
+            xhr.addEventListener('error', () => {
+                haptic.notificationOccurred('error');
+                Telegram.WebApp.showAlert('Ошибка загрузки.');
+            });
+            xhr.open('POST', '{{ url_for("tma_dashboard") }}', true);
+            xhr.send(formData);
+        }
+    };
 </script></body></html>
 '''