Spaces:
Running
Running
File size: 2,698 Bytes
ff36e71 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | export class PresentationLoader {
constructor() {
this.overlay = null;
}
show() {
if (this.overlay) this.hide();
this.overlay = document.createElement('div');
this.overlay.className = 'pres-loader-overlay';
this.overlay.innerHTML = this._buildHTML();
document.body.appendChild(this.overlay);
// Force reflow then fade in
requestAnimationFrame(() => {
requestAnimationFrame(() => {
this.overlay.classList.add('visible');
});
});
}
hide() {
if (!this.overlay) return;
this.overlay.classList.remove('visible');
const el = this.overlay;
setTimeout(() => el.remove(), 700);
this.overlay = null;
}
_buildHTML() {
const buildSlide = (delay) => `
<div class="pres-slide-group" style="animation-delay: ${delay}s;">
<div class="pres-slide-box" style="animation-delay: ${delay}s;"></div>
<!-- Scattered Parts -->
<div class="pres-part part-title" style="--tx: -150px; --ty: -180px; --rot: -25deg; animation-delay: ${delay}s;"></div>
<div class="pres-part part-image" style="--tx: 180px; --ty: -120px; --rot: 15deg; animation-delay: ${delay}s;"></div>
<div class="pres-part part-line line-1" style="--tx: -180px; --ty: 120px; --rot: 40deg; animation-delay: ${delay}s;"></div>
<div class="pres-part part-line line-2" style="--tx: 160px; --ty: 150px; --rot: -10deg; animation-delay: ${delay}s;"></div>
<div class="pres-part part-line line-3" style="--tx: 60px; --ty: -160px; --rot: 60deg; animation-delay: ${delay}s;"></div>
<div class="pres-part part-circle" style="--tx: -100px; --ty: 160px; --rot: 0deg; animation-delay: ${delay}s;"></div>
<div class="pres-part part-square" style="--tx: 120px; --ty: 140px; --rot: 45deg; animation-delay: ${delay}s;"></div>
</div>
`;
return `
<div class="pres-ambient-glow"></div>
<!-- Top Status Text -->
<div class="pres-status-text-container">
<div class="pres-status-text">Generiere Präsentation...</div>
</div>
<!-- 3D Stage for Slides -->
<div class="pres-stage-3d">
${buildSlide('0')}
${buildSlide('1.5')}
${buildSlide('3.0')}
</div>
<!-- Bottom Status Bar -->
<div class="pres-status-bar">
<div class="pres-phase-dots">
<div class="pres-phase-dot active"></div>
<div class="pres-phase-dot active"></div>
<div class="pres-phase-dot active"></div>
</div>
<div class="pres-phase-label">FOLIEN ERSTELLEN</div>
</div>
`;
}
}
export const presentationLoader = new PresentationLoader();
|