JUSN/Webklar
1
0 Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

Kundenportal: realistische MacBook- und iPhone-Rahmen aus KNSONWS/homepage (device-mockups)

Browse Source 
DeviceFrames.tsx und device-frames.css unverändert übernommen (Commit ae123f0).
DesktopFenster/HandyRahmen nutzen sie jetzt; Anordnung wie in der Vorlage
(iPhone über der rechten unteren Ecke), Screenshots füllen die Bildschirmfläche.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
rootandClaude Opus 5.5 committed 2026-10-01 18:30:10 +00:00
1 parent 6e8ba2cddb
commit e0e81b65a8
6 files changed
+1203 -112
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/home/kundenportal.css
+16 -12
View File
@@ -161,24 +161,25 @@
/* Geräte: Desktop-Fenster mit überlappendem Handy-Rahmen unten rechts */
.kp-geraete {
/* Breite so, dass die Geräte nie höher werden als die Bühne (Seitenverhältnis 100 : 95) */
width: min(100%, calc((var(--kp-buehne-h) - 8px) / 0.95));
aspect-ratio: 100 / 95;
width: min(100%, calc((var(--kp-buehne-h) - 8px) / 0.9));
aspect-ratio: 1 / 0.9;
justify-self: end;
position: relative;
/* Bezugsgröße (cqw) für die Verschiebung des Handys im letzten Schritt */
container-type: inline-size;
}
/* Anordnung wie in der Vorlage: iPhone über der rechten unteren Ecke des MacBooks */
.kp-fenster {
position: absolute;
left: 0;
top: 0;
width: 94%;
width: 99cqw;
}
.kp-handy {
position: absolute;
right: 0;
bottom: 0;
width: 30%;
left: 71.8cqw;
top: 29.7cqw;
width: 28.2cqw;
}
/* Ebenen, die per Überblendung wechseln (nur die aktive ist sichtbar) */
@@ -197,7 +198,9 @@
.kp-lage img {
display: block;
width: 100%;
height: auto;
height: 100%;
object-fit: cover;
object-position: top;
}
/* Schritt 6 "Als App": Fenster blendet aus, das Handy rückt in die Mitte und wird größer.
@@ -207,11 +210,11 @@
pointer-events: none;
}
.kp-buehne[data-app="ja"] .kp-handy {
transform: translate(-35cqw, -16.75cqw) scale(1.5);
transform: translate(-35.9cqw, -14.2cqw) scale(1.5);
}
/* Der lange Screenshot: gleiche Breite wie der Schirm, 67,66 % seiner Höhe wandern aus dem Bild
((5219 - 1688) / 5219). Die Verschiebung hängt am Scrollfortschritt (--kp-q), kein eigener Scrollbereich. */
/* Der lange Screenshot: gleiche Breite wie der Schirm, 68,81 % seiner Höhe wandern aus dem Bild
(sichtbar sind 839 von 2690 px im iPhone-Inhalt). Die Verschiebung hängt am Scrollfortschritt (--kp-q), kein eigener Scrollbereich. */
.kp-lang {
position: absolute;
top: 0;
@@ -222,6 +225,7 @@
display: block;
width: 100%;
height: auto;
object-fit: initial;
}
@media (prefers-reduced-motion: no-preference) {
@@ -233,7 +237,7 @@
transition: transform var(--dur-enter) var(--ease);
}
.kp-buehne .kp-lang {
transform: translateY(calc(var(--kp-q, 0) * -67.66%));
transform: translateY(calc(var(--kp-q, 0) * -68.81%));
}
/* die große Ebene nur im letzten Schritt auf die Grafikkarte legen */
.kp-buehne[data-app="ja"] .kp-lang {
@@ -276,7 +280,7 @@
transform: translateY(0);
}
100% {
transform: translateY(-67.66%);
transform: translateY(-68.81%);
}
}