This commit is contained in:
Flatlogic Bot 2026-03-27 23:50:49 +00:00
parent 390f2b5058
commit ba54146f4e
2 changed files with 59 additions and 57 deletions

View File

@ -281,7 +281,9 @@ textarea::placeholder {
.recliner-glow, .recliner-glow,
.recliner-floor, .recliner-floor,
.recliner-seat-pad, .recliner-seat-pad,
.recliner-back-inner { .recliner-back-inner,
.recliner-head-pad,
.recliner-arm-top {
position: absolute; position: absolute;
} }
@ -312,45 +314,20 @@ textarea::placeholder {
.recliner-block { .recliner-block {
position: absolute; position: absolute;
background: linear-gradient(180deg, #2a323d 0%, #171c22 100%); background: linear-gradient(145deg, #353d4a 0%, #1f252d 100%);
border: 1px solid rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 34px rgba(0, 0, 0, 0.22); box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.1), 0 15px 30px rgba(0, 0, 0, 0.4);
transform-style: preserve-3d; transform-style: preserve-3d;
} }
.recliner-block::before,
.recliner-block::after {
content: "";
position: absolute;
pointer-events: none;
}
.recliner-block::before {
left: 10px;
right: 0;
bottom: 100%;
height: 18px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.05));
clip-path: polygon(0 100%, 100% 100%, calc(100% - 10px) 0, 10px 0);
opacity: 0.9;
}
.recliner-block::after {
top: 8px;
left: 100%;
bottom: 0;
width: 18px;
background: linear-gradient(180deg, rgba(10, 12, 15, 0.44), rgba(255, 255, 255, 0.04));
clip-path: polygon(0 0, 100% 10px, 100% 100%, 0 calc(100% - 8px));
}
.recliner-plinth { .recliner-plinth {
left: 138px; left: 138px;
bottom: 52px; bottom: 52px;
width: 126px; width: 126px;
height: 28px; height: 28px;
border-radius: 18px; border-radius: 12px;
transform: translateZ(10px); transform: translateZ(10px);
background: #171c22;
} }
.recliner-column { .recliner-column {
@ -358,8 +335,9 @@ textarea::placeholder {
bottom: 80px; bottom: 80px;
width: 38px; width: 38px;
height: 72px; height: 72px;
border-radius: 18px; border-radius: 8px;
transform: translateZ(22px); transform: translateZ(22px);
background: #1d232b;
} }
.recliner-base { .recliner-base {
@ -367,7 +345,7 @@ textarea::placeholder {
bottom: 106px; bottom: 106px;
width: 110px; width: 110px;
height: 52px; height: 52px;
border-radius: 28px 28px 20px 20px; border-radius: 20px;
transform: translateZ(40px); transform: translateZ(40px);
} }
@ -376,19 +354,18 @@ textarea::placeholder {
bottom: 152px; bottom: 152px;
width: 142px; width: 142px;
height: 82px; height: 82px;
border-radius: 28px 26px 18px 18px; border-radius: 20px;
transform: translateZ(62px); transform: translateZ(62px);
} }
.recliner-seat-pad { .recliner-seat-pad {
left: 158px; left: 150px;
bottom: 166px; bottom: 158px;
width: 112px; width: 130px;
height: 46px; height: 70px;
border-radius: 20px 18px 16px 16px; border-radius: 16px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03)); background: linear-gradient(135deg, #4a5460 0%, #2a323d 100%);
border: 1px solid rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
transform: translateZ(78px); transform: translateZ(78px);
} }
@ -397,7 +374,7 @@ textarea::placeholder {
bottom: 160px; bottom: 160px;
width: 28px; width: 28px;
height: 102px; height: 102px;
border-radius: 18px; border-radius: 12px;
transform: translateZ(64px); transform: translateZ(64px);
} }
@ -408,25 +385,35 @@ textarea::placeholder {
transform: translateZ(34px); transform: translateZ(34px);
} }
.recliner-arm-top {
left: 126px;
bottom: 240px;
width: 24px;
height: 16px;
border-radius: 8px;
background: #4a5460;
transform: translateZ(80px);
}
.recliner-back { .recliner-back {
left: 114px; left: 114px;
bottom: 194px; bottom: 194px;
width: 92px; width: 92px;
height: 142px; height: 142px;
border-radius: 30px; border-radius: 24px;
transform-origin: right bottom; transform-origin: right bottom;
transform: translateZ(66px) rotate(calc(-6deg + (var(--angle) * 0.38deg) + (var(--back-angle) * 1deg))); transform: translateZ(66px) rotate(calc(-6deg + (var(--angle) * 0.38deg) + (var(--back-angle) * 1deg)));
background: linear-gradient(145deg, #3d4652 0%, #252b34 100%);
} }
.recliner-back-inner { .recliner-back-inner {
left: 130px; left: 122px;
bottom: 210px; bottom: 202px;
width: 60px; width: 76px;
height: 104px; height: 126px;
border-radius: 20px; border-radius: 16px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03)); background: linear-gradient(135deg, #515d6a 0%, #353d4a 100%);
border: 1px solid rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
transform-origin: right bottom; transform-origin: right bottom;
transform: translateZ(82px) rotate(calc(-6deg + (var(--angle) * 0.38deg) + (var(--back-angle) * 1deg))); transform: translateZ(82px) rotate(calc(-6deg + (var(--angle) * 0.38deg) + (var(--back-angle) * 1deg)));
} }
@ -436,19 +423,31 @@ textarea::placeholder {
bottom: 308px; bottom: 308px;
width: 74px; width: 74px;
height: 38px; height: 38px;
border-radius: 22px; border-radius: 16px;
transform-origin: right bottom; transform-origin: right bottom;
transform: translateZ(86px) rotate(calc(-10deg + (var(--angle) * 0.14deg) + (var(--head-angle) * 1deg))); transform: translateZ(86px) rotate(calc(-10deg + (var(--angle) * 0.14deg) + (var(--head-angle) * 1deg)));
} }
.recliner-head-pad {
left: 128px;
bottom: 312px;
width: 66px;
height: 30px;
border-radius: 12px;
background: linear-gradient(135deg, #515d6a 0%, #353d4a 100%);
transform-origin: right bottom;
transform: translateZ(98px) rotate(calc(-10deg + (var(--angle) * 0.14deg) + (var(--head-angle) * 1deg)));
}
.recliner-leg { .recliner-leg {
left: 284px; left: 284px;
bottom: 166px; bottom: 166px;
width: 58px; width: 58px;
height: 118px; height: 118px;
border-radius: 20px; border-radius: 16px;
transform-origin: left center; transform-origin: left center;
transform: translateZ(46px) rotate(calc(10deg + (var(--angle) * 0.34deg) + (var(--leg-angle) * 1deg))); transform: translateZ(46px) rotate(calc(10deg + (var(--angle) * 0.34deg) + (var(--leg-angle) * 1deg)));
background: linear-gradient(145deg, #3d4652 0%, #252b34 100%);
} }
.recliner-footpad { .recliner-footpad {
@ -456,9 +455,10 @@ textarea::placeholder {
bottom: 208px; bottom: 208px;
width: 42px; width: 42px;
height: 58px; height: 58px;
border-radius: 18px; border-radius: 12px;
transform-origin: left center; transform-origin: left center;
transform: translateZ(30px) rotate(calc(10deg + (var(--angle) * 0.2deg) + (var(--leg-angle) * 1deg))); transform: translateZ(30px) rotate(calc(10deg + (var(--angle) * 0.2deg) + (var(--leg-angle) * 1deg)));
background: linear-gradient(135deg, #515d6a 0%, #353d4a 100%);
} }
.recliner-figure.is-vibrating .recliner-glow { .recliner-figure.is-vibrating .recliner-glow {
@ -746,4 +746,4 @@ footer {
top: 52px; top: 52px;
padding: 10px 12px; padding: 10px 12px;
} }
} }

View File

@ -163,9 +163,11 @@ if (isset($_GET['saved']) && ctype_digit((string) $_GET['saved'])) {
<div class="recliner-seat-pad"></div> <div class="recliner-seat-pad"></div>
<div class="recliner-arm recliner-block"></div> <div class="recliner-arm recliner-block"></div>
<div class="recliner-arm recliner-arm-secondary recliner-block"></div> <div class="recliner-arm recliner-arm-secondary recliner-block"></div>
<div class="recliner-arm-top"></div>
<div class="recliner-back recliner-block" id="part-back"></div> <div class="recliner-back recliner-block" id="part-back"></div>
<div class="recliner-back-inner" id="part-back-inner"></div> <div class="recliner-back-inner" id="part-back-inner"></div>
<div class="recliner-head recliner-block" id="part-head"></div> <div class="recliner-head recliner-block" id="part-head"></div>
<div class="recliner-head-pad" id="part-head-pad"></div>
<div class="recliner-leg recliner-block" id="part-leg"></div> <div class="recliner-leg recliner-block" id="part-leg"></div>
<div class="recliner-footpad recliner-block" id="part-footpad"></div> <div class="recliner-footpad recliner-block" id="part-footpad"></div>
</div> </div>
@ -358,4 +360,4 @@ if (isset($_GET['saved']) && ctype_digit((string) $_GET['saved'])) {
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous" defer></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous" defer></script>
<script src="/assets/js/main.js?v=<?= e($assetVersion) ?>" defer></script> <script src="/assets/js/main.js?v=<?= e($assetVersion) ?>" defer></script>
</body> </body>
</html> </html>