Добавлен лоадер обработки после сканирования (спиннер + 'Обработка видео...')
This commit is contained in:
1 parent
64e6e6f30f
commit
3b2448a360
3 files changed
+51
No files matched your search
@@ -370,3 +370,40 @@
|
|||||||
.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); } }
|
||||||
@@ -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();
|
||||||
|
|||||||
@@ -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();
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in new issue
Block a user