F7 Office: кастомизация брендинга, конфиги coolwsd и Apache
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -0,0 +1,124 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user