Добавлен лоадер обработки после сканирования (спиннер + 'Обработка видео...')

This commit is contained in:
apuc committed 2026-09-18 11:59:56 +03:00
1 parent 64e6e6f30f
commit 3b2448a360
3 files changed
+52 -1

No files matched your search

+38 -1
View File
@@ -369,4 +369,41 @@
.med-metrics-table td:first-child { font-weight: 600; color: #555; } .med-metrics-table td:first-child { font-weight: 600; color: #555; }
.med-summary-box, .med-warnings-box, .med-advice-box { padding: 12px 14px; font-size: 15px; } .med-summary-box, .med-warnings-box, .med-advice-box { padding: 12px 14px; font-size: 15px; }
.med-progress-text { font-size: 13px; } .med-progress-text { font-size: 13px; }
} }
/* Лоадер обработки (после сканирования) */
.med-scan-loader {
display: none;
position: fixed;
inset: 0;
z-index: 1000;
background: rgba(0, 0, 0, 0.7);
align-items: center;
justify-content: center;
}
.med-scan-loader.open {
display: flex;
}
.med-scan-loader-content {
text-align: center;
color: #fff;
}
.med-scan-loader-spinner {
width: 48px;
height: 48px;
border: 4px solid rgba(255,255,255,0.3);
border-top-color: #fff;
border-radius: 50%;
animation: med-spin 0.8s linear infinite;
margin: 0 auto 20px;
}
.med-scan-loader-text {
font-size: 20px;
font-weight: 600;
margin-bottom: 8px;
}
.med-scan-loader-sub {
font-size: 14px;
opacity: 0.8;
}
@keyframes med-spin { to { transform: rotate(360deg); } }
+5
View File
@@ -123,6 +123,7 @@
} }
setProgress(100, 'Готово!'); setProgress(100, 'Готово!');
document.getElementById('scanLoader').classList.remove('open');
setTimeout(function () { setTimeout(function () {
progressContainer.style.display = 'none'; progressContainer.style.display = 'none';
renderResult(data); renderResult(data);
@@ -151,6 +152,7 @@
} }
function showError(msg, videoUrl) { function showError(msg, videoUrl) {
document.getElementById('scanLoader').classList.remove('open');
progressContainer.style.display = 'none'; progressContainer.style.display = 'none';
resultCard.style.display = 'block'; resultCard.style.display = 'block';
var html = '<div class="med-error-box"><strong>Ошибка:</strong> ' + escapeHtml(msg) + '</div>'; var html = '<div class="med-error-box"><strong>Ошибка:</strong> ' + escapeHtml(msg) + '</div>';
@@ -164,6 +166,7 @@
} }
function renderResult(data) { function renderResult(data) {
document.getElementById('scanLoader').classList.remove('open');
resultCard.style.display = 'block'; resultCard.style.display = 'block';
var html = ''; var html = '';
@@ -329,6 +332,8 @@
stopCamera(); stopCamera();
scanActive = false; scanActive = false;
scanBtn.disabled = false; scanBtn.disabled = false;
// Показываем лоадер обработки
document.getElementById('scanLoader').classList.add('open');
sendVideo(blob, 'scan.' + ext); sendVideo(blob, 'scan.' + ext);
}; };
mediaRecorder.start(); mediaRecorder.start();
+9
View File
@@ -309,6 +309,15 @@ function med_diag_shortcode( $atts ) {
<button class="med-scan-cancel" id="scanCancelBtn">✖ Отмена</button> <button class="med-scan-cancel" id="scanCancelBtn">✖ Отмена</button>
<div class="med-scan-hint">Поместите лицо в овал целиком: лоб, глаза и подбородок — с запасом. Если голова не помещается — отодвиньте телефон</div> <div class="med-scan-hint">Поместите лицо в овал целиком: лоб, глаза и подбородок — с запасом. Если голова не помещается — отодвиньте телефон</div>
</div> </div>
<!-- Лоадер обработки -->
<div class="med-scan-loader" id="scanLoader">
<div class="med-scan-loader-content">
<div class="med-scan-loader-spinner"></div>
<div class="med-scan-loader-text">Обработка видео...</div>
<div class="med-scan-loader-sub">Идёт анализ, это займёт несколько секунд</div>
</div>
</div>
<?php <?php
return ob_get_clean(); return ob_get_clean();
} }