root
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>
|