125 lines
4.0 KiB
HTML
125 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Просмотр экрана загрузки — F7 Office</title>
|
||
<link rel="stylesheet" href="branding.css">
|
||
<style>
|
||
/* Фон и центрирование как в реальном приложении */
|
||
body {
|
||
margin: 0;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: var(--co-body-bg, #f5f5f5);
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||
}
|
||
/* Контейнер экрана загрузки (как leaflet-progress-layer) */
|
||
.leaflet-progress-layer {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
text-align: center;
|
||
padding: 24px;
|
||
width: 150px;
|
||
}
|
||
.leaflet-progress-label {
|
||
margin: 6px 0;
|
||
font-size: 13px;
|
||
color: var(--co-color-main-text, #212121);
|
||
}
|
||
.leaflet-progress-label.brand-label {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #0082c9;
|
||
}
|
||
/* Подсказка внизу */
|
||
.preview-hint {
|
||
position: fixed;
|
||
bottom: 16px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
font-size: 12px;
|
||
color: var(--co-color-text-lighter, #636363);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="preview-root"></div>
|
||
<p class="preview-hint">Искусственный просмотр экрана загрузки · Закройте вкладку для выхода</p>
|
||
|
||
<script src="branding.js"></script>
|
||
<script>
|
||
(function() {
|
||
var productName = typeof brandProductName !== "undefined"
|
||
? brandProductName
|
||
: "F7 Office";
|
||
|
||
var container = document.createElement("div");
|
||
container.className = "leaflet-progress-layer";
|
||
|
||
var spinner = document.createElement("div");
|
||
spinner.className = "leaflet-progress-spinner";
|
||
var spinnerCanvas = document.createElement("canvas");
|
||
spinnerCanvas.className = "leaflet-progress-spinner-canvas";
|
||
spinner.appendChild(spinnerCanvas);
|
||
|
||
var brandLabel = document.createElement("div");
|
||
brandLabel.className = "leaflet-progress-label brand-label";
|
||
brandLabel.textContent = productName;
|
||
|
||
var label = document.createElement("div");
|
||
label.className = "leaflet-progress-label";
|
||
label.textContent = "Подключение…";
|
||
|
||
var progress = document.createElement("div");
|
||
progress.className = "leaflet-progress";
|
||
var bar = document.createElement("span");
|
||
var barValue = document.createElement("span");
|
||
barValue.textContent = "0%";
|
||
bar.appendChild(barValue);
|
||
progress.appendChild(bar);
|
||
|
||
container.appendChild(spinner);
|
||
container.appendChild(brandLabel);
|
||
container.appendChild(label);
|
||
container.appendChild(progress);
|
||
|
||
document.getElementById("preview-root").appendChild(container);
|
||
|
||
/* Простая анимация спиннера на canvas (как в LOUtil.startSpinner) */
|
||
var canvas = spinnerCanvas;
|
||
canvas.width = 50;
|
||
canvas.height = 50;
|
||
var ctx = canvas.getContext("2d");
|
||
var angle = 0;
|
||
function drawSpinner() {
|
||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
ctx.save();
|
||
ctx.translate(25, 25);
|
||
ctx.rotate((angle * Math.PI) / 180);
|
||
ctx.translate(-25, -25);
|
||
ctx.beginPath();
|
||
ctx.arc(25, 25, 21, 0, Math.PI * 1.3);
|
||
ctx.lineWidth = 8;
|
||
ctx.strokeStyle = "#999";
|
||
ctx.stroke();
|
||
ctx.restore();
|
||
angle += 30;
|
||
}
|
||
var interval = setInterval(drawSpinner, 30);
|
||
|
||
/* Опционально: анимация прогресс-бара */
|
||
var pct = 0;
|
||
var progressInterval = setInterval(function() {
|
||
pct = (pct + 2) % 95;
|
||
bar.style.width = pct + "%";
|
||
barValue.textContent = pct + "%";
|
||
}, 200);
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|