Commit12082000
This commit is contained in:
parent
b6fe872a80
commit
0962f9325b
30 changed files with 1536 additions and 862 deletions
|
|
@ -1,22 +1,82 @@
|
|||
<!-- page-title.html - Optimierte Version mit Wiederverwendung -->
|
||||
<!-- page-title.html - AMPERION Stromkreis Animation -->
|
||||
<section class="page-title">
|
||||
<!-- Animierter Grid-Hintergrund (nutzt CTA-Klassen) -->
|
||||
<div class="cta__bg page-title__bg" aria-hidden="true">
|
||||
<!-- Grid Pattern -->
|
||||
<div class="cta__grid"></div>
|
||||
<!-- Animierter Stromkreis-Hintergrund -->
|
||||
<div class="circuit-bg" aria-hidden="true">
|
||||
<!-- Hauptstromkreis -->
|
||||
<svg class="circuit-main" viewBox="0 0 1200 400">
|
||||
<!-- Leiterbahnen -->
|
||||
<path class="circuit-path circuit-path-1" d="M0,200 L300,200 L350,150 L600,150 L650,200 L1200,200" />
|
||||
<path class="circuit-path circuit-path-2" d="M100,100 L400,100 L450,150 L750,150 L800,100 L1100,100" />
|
||||
<path class="circuit-path circuit-path-3" d="M200,300 L500,300 L550,250 L850,250 L900,300 L1200,300" />
|
||||
|
||||
<!-- Verbindungspunkte -->
|
||||
<circle class="circuit-node" cx="300" cy="200" r="4"/>
|
||||
<circle class="circuit-node" cx="600" cy="150" r="4"/>
|
||||
<circle class="circuit-node" cx="400" cy="100" r="4"/>
|
||||
<circle class="circuit-node" cx="750" cy="150" r="4"/>
|
||||
<circle class="circuit-node" cx="500" cy="300" r="4"/>
|
||||
<circle class="circuit-node" cx="850" cy="250" r="4"/>
|
||||
|
||||
<!-- Komponenten (Widerstände, Kondensatoren) -->
|
||||
<rect class="circuit-component" x="345" y="145" width="30" height="10" rx="2"/>
|
||||
<rect class="circuit-component" x="745" y="95" width="30" height="10" rx="2"/>
|
||||
<rect class="circuit-component" x="545" y="245" width="30" height="10" rx="2"/>
|
||||
</svg>
|
||||
|
||||
<!-- Energie-Linien (nur wenige für dezenten Effekt) -->
|
||||
<div class="cta__energy-lines">
|
||||
<!-- Nur 2 horizontale Linien -->
|
||||
<div class="energy-line-h energy-line-h1"></div>
|
||||
<div class="energy-line-h energy-line-h3"></div>
|
||||
<!-- Nur 2 vertikale Linien -->
|
||||
<div class="energy-line-v energy-line-v1"></div>
|
||||
<div class="energy-line-v energy-line-v3"></div>
|
||||
<!-- Nur 3 Knoten -->
|
||||
<div class="energy-node energy-node1"></div>
|
||||
<div class="energy-node energy-node3"></div>
|
||||
<div class="energy-node energy-node5"></div>
|
||||
<!-- Energie-Pulse -->
|
||||
<div class="energy-pulse pulse-1"></div>
|
||||
<div class="energy-pulse pulse-2"></div>
|
||||
<div class="energy-pulse pulse-3"></div>
|
||||
|
||||
<!-- Blitz-Effekte -->
|
||||
<svg class="lightning-effect lightning-1" width="100" height="200" viewBox="0 0 100 200">
|
||||
<path d="M50,0 L30,80 L60,80 L40,200" stroke="currentColor" stroke-width="2" fill="none"/>
|
||||
</svg>
|
||||
<svg class="lightning-effect lightning-2" width="100" height="200" viewBox="0 0 100 200">
|
||||
<path d="M50,0 L30,80 L60,80 L40,200" stroke="currentColor" stroke-width="2" fill="none"/>
|
||||
</svg>
|
||||
|
||||
<!-- Voltmeter Animation -->
|
||||
<div class="voltmeter">
|
||||
<svg width="120" height="120" viewBox="0 0 120 120">
|
||||
<circle cx="60" cy="60" r="55" fill="none" stroke="currentColor" stroke-width="2" opacity="0.2"/>
|
||||
<path class="voltmeter-needle" d="M60,60 L60,20" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
|
||||
<circle cx="60" cy="60" r="5" fill="currentColor"/>
|
||||
<!-- Skala -->
|
||||
<text x="60" y="95" text-anchor="middle" font-size="14" fill="currentColor" opacity="0.5">AMPERION</text>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Schaltkreis-Symbole -->
|
||||
<div class="circuit-symbols">
|
||||
<div class="symbol symbol-diode">
|
||||
<svg width="40" height="40" viewBox="0 0 40 40">
|
||||
<path d="M10,20 L30,20 M20,10 L30,20 L20,30 Z" stroke="currentColor" stroke-width="1.5" fill="none"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="symbol symbol-transistor">
|
||||
<svg width="40" height="40" viewBox="0 0 40 40">
|
||||
<circle cx="20" cy="20" r="15" stroke="currentColor" stroke-width="1.5" fill="none"/>
|
||||
<path d="M5,20 L15,20 M25,15 L35,10 M25,25 L35,30" stroke="currentColor" stroke-width="1.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="symbol symbol-capacitor">
|
||||
<svg width="40" height="40" viewBox="0 0 40 40">
|
||||
<path d="M10,20 L18,20 M22,20 L30,20 M18,10 L18,30 M22,10 L22,30" stroke="currentColor" stroke-width="1.5" fill="none"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Elektrisches Feld (Partikel) -->
|
||||
<div class="electric-field">
|
||||
<span class="electron"></span>
|
||||
<span class="electron"></span>
|
||||
<span class="electron"></span>
|
||||
<span class="electron"></span>
|
||||
<span class="electron"></span>
|
||||
<span class="electron"></span>
|
||||
<span class="electron"></span>
|
||||
<span class="electron"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -24,8 +84,8 @@
|
|||
<div class="container1">
|
||||
<div class="row">
|
||||
<div class="col-md-12 text-center">
|
||||
<div class="service-title fade-in">
|
||||
<h1>{{ .Title }}</h1>
|
||||
<div class="service-title">
|
||||
<h1 class="title-electric">{{ .Title }}</h1>
|
||||
</div>
|
||||
{{ with .Params.description }}
|
||||
<p class="page-title-desc">{{ . }}</p>
|
||||
|
|
@ -36,22 +96,447 @@
|
|||
</section>
|
||||
|
||||
<style>
|
||||
/* Page Title spezifische Styles */
|
||||
.page-title{position:relative;padding:80px 0;background:#fff;overflow:hidden;}
|
||||
.container1{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:0 20px;}
|
||||
.service-title h1{color:#046e6e;font-size:clamp(2.5rem,5vw,3.5rem);font-weight:700;margin:0;}
|
||||
.page-title-desc{color:#666;font-size:1.25rem;margin:1rem auto 0;max-width:700px;}
|
||||
.fade-in{animation:fadeInUp 1s ease-out;}
|
||||
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0)}}
|
||||
|
||||
/* Variablen – werden von CTA-CSS verwendet */
|
||||
.page-title{--cta-primary:#046e6e;--cta-accent:#F5A623;}
|
||||
|
||||
|
||||
/* Mobile: noch reduzierter */
|
||||
@media (max-width:768px){
|
||||
.page-title .energy-line-h3,
|
||||
.page-title .energy-line-v3,
|
||||
.page-title .energy-node5{display:none;}
|
||||
/* Page Title Base */
|
||||
.page-title {
|
||||
position: relative;
|
||||
padding: 100px 0 80px;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
.container1 {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* Titel mit elektrischem Effekt */
|
||||
.title-electric {
|
||||
color: #046e6e;
|
||||
font-size: clamp(2.5rem, 5vw, 3.5rem);
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
animation: powerOn 2s ease-out;
|
||||
text-shadow: 0 0 30px rgba(4, 110, 110, 0.1);
|
||||
}
|
||||
|
||||
.title-electric::before {
|
||||
content: attr(data-text);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
animation: electricGlitch 3s ease-in-out infinite;
|
||||
color: #F5A623;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.page-title-desc {
|
||||
color: #666;
|
||||
font-size: 1.25rem;
|
||||
margin: 1rem auto 0;
|
||||
max-width: 700px;
|
||||
animation: fadeInUp 1s ease-out 0.3s both;
|
||||
}
|
||||
|
||||
/* Stromkreis-Animation */
|
||||
.circuit-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.15;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.circuit-main {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.circuit-path {
|
||||
stroke: #046e6e;
|
||||
stroke-width: 2;
|
||||
fill: none;
|
||||
stroke-dasharray: 1000;
|
||||
stroke-dashoffset: 1000;
|
||||
animation: drawCircuit 3s ease-out forwards;
|
||||
}
|
||||
|
||||
.circuit-path-2 {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
.circuit-path-3 {
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.circuit-node {
|
||||
fill: #F5A623;
|
||||
opacity: 0;
|
||||
animation: nodeGlow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.circuit-component {
|
||||
fill: #046e6e;
|
||||
opacity: 0;
|
||||
animation: componentFade 1s ease-out 2s forwards;
|
||||
}
|
||||
|
||||
/* Energie-Pulse */
|
||||
.energy-pulse {
|
||||
position: absolute;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #F5A623;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 20px #F5A623;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.pulse-1 {
|
||||
animation: energyFlow1 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.pulse-2 {
|
||||
animation: energyFlow2 4s ease-in-out infinite 1.3s;
|
||||
}
|
||||
|
||||
.pulse-3 {
|
||||
animation: energyFlow3 4s ease-in-out infinite 2.6s;
|
||||
}
|
||||
|
||||
/* Blitz-Effekte */
|
||||
.lightning-effect {
|
||||
position: absolute;
|
||||
color: #F5A623;
|
||||
opacity: 0;
|
||||
animation: lightningStrike 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.lightning-1 {
|
||||
top: 10%;
|
||||
right: 15%;
|
||||
transform: scale(0.6) rotate(-15deg);
|
||||
}
|
||||
|
||||
.lightning-2 {
|
||||
bottom: 20%;
|
||||
left: 10%;
|
||||
transform: scale(0.4) rotate(25deg);
|
||||
animation-delay: 3s;
|
||||
}
|
||||
|
||||
/* Voltmeter */
|
||||
.voltmeter {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
right: 5%;
|
||||
color: #046e6e;
|
||||
opacity: 0.3;
|
||||
animation: fadeIn 2s ease-out 1s forwards;
|
||||
}
|
||||
|
||||
.voltmeter-needle {
|
||||
transform-origin: 60px 60px;
|
||||
animation: voltmeterSwing 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Schaltkreis-Symbole */
|
||||
.circuit-symbols {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.symbol {
|
||||
position: absolute;
|
||||
color: #046e6e;
|
||||
opacity: 0;
|
||||
animation: symbolFloat 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.symbol-diode {
|
||||
top: 15%;
|
||||
left: 20%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.symbol-transistor {
|
||||
bottom: 25%;
|
||||
right: 25%;
|
||||
animation-delay: 2.5s;
|
||||
}
|
||||
|
||||
.symbol-capacitor {
|
||||
top: 60%;
|
||||
left: 40%;
|
||||
animation-delay: 5s;
|
||||
}
|
||||
|
||||
/* Elektrisches Feld (Elektronen) */
|
||||
.electric-field {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.electron {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: #F5A623;
|
||||
border-radius: 50%;
|
||||
opacity: 0.6;
|
||||
animation: electronFlow 10s linear infinite;
|
||||
}
|
||||
|
||||
.electron:nth-child(1) { top: 20%; animation-delay: 0s; }
|
||||
.electron:nth-child(2) { top: 30%; animation-delay: 1.2s; }
|
||||
.electron:nth-child(3) { top: 40%; animation-delay: 2.4s; }
|
||||
.electron:nth-child(4) { top: 50%; animation-delay: 3.6s; }
|
||||
.electron:nth-child(5) { top: 60%; animation-delay: 4.8s; }
|
||||
.electron:nth-child(6) { top: 70%; animation-delay: 6s; }
|
||||
.electron:nth-child(7) { top: 80%; animation-delay: 7.2s; }
|
||||
.electron:nth-child(8) { top: 35%; animation-delay: 8.4s; }
|
||||
|
||||
/* Animationen */
|
||||
@keyframes powerOn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
filter: blur(4px);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.05);
|
||||
filter: blur(0);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes electricGlitch {
|
||||
0%, 90%, 100% { opacity: 0; }
|
||||
92% { opacity: 0.8; transform: translate(2px, -2px); }
|
||||
94% { opacity: 0.6; transform: translate(-1px, 1px); }
|
||||
96% { opacity: 0.8; transform: translate(1px, 0); }
|
||||
}
|
||||
|
||||
@keyframes drawCircuit {
|
||||
to {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes nodeGlow {
|
||||
0%, 100% { opacity: 0.3; r: 4; }
|
||||
50% { opacity: 1; r: 6; }
|
||||
}
|
||||
|
||||
@keyframes componentFade {
|
||||
to {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes energyFlow1 {
|
||||
0% {
|
||||
left: 0;
|
||||
top: 50%;
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
left: 100%;
|
||||
top: 50%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes energyFlow2 {
|
||||
0% {
|
||||
left: 10%;
|
||||
top: 25%;
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
left: 90%;
|
||||
top: 25%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes energyFlow3 {
|
||||
0% {
|
||||
left: 20%;
|
||||
top: 75%;
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
left: 80%;
|
||||
top: 75%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes lightningStrike {
|
||||
0%, 95%, 100% {
|
||||
opacity: 0;
|
||||
transform: scale(0.6) rotate(-15deg);
|
||||
}
|
||||
96% {
|
||||
opacity: 0.8;
|
||||
transform: scale(1) rotate(-15deg);
|
||||
}
|
||||
97% {
|
||||
opacity: 0.4;
|
||||
transform: scale(0.8) rotate(-15deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes voltmeterSwing {
|
||||
0%, 100% {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes symbolFloat {
|
||||
0%, 100% {
|
||||
opacity: 0.2;
|
||||
transform: translateY(0) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
transform: translateY(-20px) rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes electronFlow {
|
||||
0% {
|
||||
left: -10px;
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
left: 100%;
|
||||
transform: translateX(10px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
to {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.page-title {
|
||||
padding: 80px 0 60px;
|
||||
}
|
||||
|
||||
.circuit-bg {
|
||||
opacity: 0.08;
|
||||
}
|
||||
|
||||
.voltmeter,
|
||||
.lightning-effect,
|
||||
.symbol-transistor {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.title-electric {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.page-title-desc {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark Mode Support */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
||||
.title-electric {
|
||||
text-shadow: 0 0 40px rgba(245, 166, 35, 0.3);
|
||||
}
|
||||
|
||||
.circuit-path {
|
||||
stroke: #F5A623;
|
||||
}
|
||||
|
||||
.circuit-bg {
|
||||
opacity: 0.25;
|
||||
}
|
||||
|
||||
.page-title-desc {
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reduced Motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.title-electric,
|
||||
.circuit-path,
|
||||
.energy-pulse,
|
||||
.electron,
|
||||
.symbol,
|
||||
.voltmeter-needle {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.circuit-path {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
|
||||
.circuit-node,
|
||||
.circuit-component {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue