astosic/AMPERION_Webpage
1
0
Fork 0
forked from markus/AMPERION_Webpage
Code Pull requests Activity

12082025-1105

Browse source
This commit is contained in:
astosic 2025-08-12 11:05:32 +02:00
parent 23aa8074ac
commit b6fe872a80
3 changed files with 40 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

40
layouts/_default/about.html
View file

@ -19,20 +19,44 @@
</div>
<!-- VIDEO (rechts, ohne abgerundete Ecken) -->
<div class="col-lg-5 order-1 order-lg-2" data-aos="fade-in" data-aos-delay="600">
<div class="col-lg-5 order-1 order-lg-2" data-aos="fade-in" data-aos-delay="200">
<div class="intro-media ratio ratio-16x9 shadow-sm overflow-hidden">
<video class="intro-video"
autoplay
<video id="aboutVideo"
class="intro-video"
muted
loop
playsinline
preload="metadata"
preload="none"
poster='{{ "images/brand_poster.jpg" | relURL }}'>
<source src='{{ "images/Imagevideo_Short.mp4" | relURL }}' type="video/mp4">
Ihr Browser unterstützt eingebettete Videos nicht.
<!-- Quellen werden per JS gesetzt -->
</video>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
const vid = document.getElementById("aboutVideo");
if (!vid) return;
const srcWebm = '{{ "images/Imagevideo_Short.webm" | relURL }}';
const srcMp4 = '{{ "images/Imagevideo_Short.mp4" | relURL }}';
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
vid.innerHTML = `
<source src="${srcWebm}" type="video/webm">
<source src="${srcMp4}" type="video/mp4">
`;
vid.play().catch(() => {});
observer.disconnect();
}
});
}, { rootMargin: "200px" });
observer.observe(vid);
});
</script>
</div>
</div>
</section>
@ -116,8 +140,8 @@
{{ $step := 100 }}
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $step }}">
<img src="/icons/stamp.svg" alt="Staatlich geprüft" class="service-icon mb-3" style="filter: invert(57%) sepia(94%) saturate(602%) hue-rotate(359deg) brightness(101%) contrast(103%);">
<h3 class="service-card-title">Staatlich geprüft & konzessioniert</h3>
<img src="/icons/stamp.svg" alt="Staatlich geprüft" class="service-icon mb-3" style="filter: invert(74%) sepia(39%) saturate(2198%) hue-rotate(344deg) brightness(101%) contrast(92%);">
<h3 class="service-card-title">Staatlich geprüft & konessioniert</h3>
<p class="service-card-description">
<strong>Ingenieurbüro und Elektrotechnikbetrieb –</strong> Planung und Prüfung mit Qualität &amp; Sicherheit.
</p>