faster-marketplace-local/page-2baace17c21c4268b3f719eccd4799ac
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Publish page: buy-coffee - components/test.hbs

Browse Source
This commit is contained in:
Faster Marketplace
2026-01-20 14:48:17 +00:00
parent 8901cc9fab
commit 2f1d6843e6
1 changed files with 279 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

279
components/test.hbs Normal file
View File

@@ -0,0 +1,279 @@
<style>
.container {
width: 300px;
height: 280px;
position: absolute;
top: calc(50% - 140px);
left: calc(50% - 150px);
}
.coffee-header {
width: 100%;
height: 80px;
position: absolute;
top: 0;
left: 0;
background-color: #ddcfcc;
border-radius: 10px;
}
.coffee-header__buttons {
width: 25px;
height: 25px;
position: absolute;
top: 25px;
background-color: #282323;
border-radius: 50%;
}
.coffee-header__buttons::after {
content: "";
width: 8px;
height: 8px;
position: absolute;
bottom: -8px;
left: calc(50% - 4px);
background-color: #615e5e;
}
.coffee-header__button-one {
left: 15px;
}
.coffee-header__button-two {
left: 50px;
}
.coffee-header__display {
width: 50px;
height: 50px;
position: absolute;
top: calc(50% - 25px);
left: calc(50% - 25px);
border-radius: 50%;
background-color: #9acfc5;
border: 5px solid #43beae;
box-sizing: border-box;
}
.coffee-header__details {
width: 8px;
height: 20px;
position: absolute;
top: 10px;
right: 10px;
background-color: #9b9091;
box-shadow: -12px 0 0 #9b9091, -24px 0 0 #9b9091;
}
.coffee-medium {
width: 90%;
height: 160px;
position: absolute;
top: 80px;
left: calc(50% - 45%);
background-color: #bcb0af;
}
.coffee-medium:before {
content: "";
width: 90%;
height: 100px;
background-color: #776f6e;
position: absolute;
bottom: 0;
left: calc(50% - 45%);
border-radius: 20px 20px 0 0;
}
.coffe-medium__exit {
width: 60px;
height: 20px;
position: absolute;
top: 0;
left: calc(50% - 30px);
background-color: #231f20;
}
.coffe-medium__exit::before {
content: "";
width: 50px;
height: 20px;
border-radius: 0 0 50% 50%;
position: absolute;
bottom: -20px;
left: calc(50% - 25px);
background-color: #231f20;
}
.coffe-medium__exit::after {
content: "";
width: 10px;
height: 10px;
position: absolute;
bottom: -30px;
left: calc(50% - 5px);
background-color: #231f20;
}
.coffee-medium__arm {
width: 70px;
height: 20px;
position: absolute;
top: 15px;
right: 25px;
background-color: #231f20;
}
.coffee-medium__arm::before {
content: "";
width: 15px;
height: 5px;
position: absolute;
top: 7px;
left: -15px;
background-color: #9e9495;
}
.coffee-medium__cup {
width: 80px;
height: 47px;
position: absolute;
bottom: 0;
left: calc(50% - 40px);
background-color: #FFF;
border-radius: 0 0 70px 70px / 0 0 110px 110px;
}
.coffee-medium__cup::after {
content: "";
width: 20px;
height: 20px;
position: absolute;
top: 6px;
right: -13px;
border: 5px solid #FFF;
border-radius: 50%;
}
@keyframes liquid {
0% {
height: 0px;
opacity: 1;
}
5% {
height: 0px;
opacity: 1;
}
20% {
height: 62px;
opacity: 1;
}
95% {
height: 62px;
opacity: 1;
}
100% {
height: 62px;
opacity: 0;
}
}
.coffee-medium__liquid {
width: 6px;
height: 63px;
opacity: 0;
position: absolute;
top: 50px;
left: calc(50% - 3px);
background-color: #74372b;
animation: liquid 4s 4s linear infinite;
}
.coffee-medium__smoke {
width: 8px;
height: 20px;
position: absolute;
border-radius: 5px;
background-color: #b3aeae;
}
@keyframes smokeOne {
0% {
bottom: 20px;
opacity: 0;
}
40% {
bottom: 50px;
opacity: .5;
}
80% {
bottom: 80px;
opacity: .3;
}
100% {
bottom: 80px;
opacity: 0;
}
}
@keyframes smokeTwo {
0% {
bottom: 40px;
opacity: 0;
}
40% {
bottom: 70px;
opacity: .5;
}
80% {
bottom: 80px;
opacity: .3;
}
100% {
bottom: 80px;
opacity: 0;
}
}
.coffee-medium__smoke-one {
opacity: 0;
bottom: 50px;
left: 102px;
animation: smokeOne 3s 4s linear infinite;
}
.coffee-medium__smoke-two {
opacity: 0;
bottom: 70px;
left: 118px;
animation: smokeTwo 3s 5s linear infinite;
}
.coffee-medium__smoke-three {
opacity: 0;
bottom: 65px;
right: 118px;
animation: smokeTwo 3s 6s linear infinite;
}
.coffee-medium__smoke-for {
opacity: 0;
bottom: 50px;
right: 102px;
animation: smokeOne 3s 5s linear infinite;
}
.coffee-footer {
width: 95%;
height: 15px;
position: absolute;
bottom: 25px;
left: calc(50% - 47.5%);
background-color: #41bdad;
border-radius: 10px;
}
.coffee-footer::after {
content: "";
width: 106%;
height: 26px;
position: absolute;
bottom: -25px;
left: -8px;
background-color: #000;
}
</style>
<div class="container" data-hbs-id="zd3kpp6">
<div class="coffee-header" data-hbs-id="cx5odlx">
<div class="coffee-header__buttons coffee-header__button-one" data-hbs-id="g7fh5f3"></div>
<div class="coffee-header__buttons coffee-header__button-two" data-hbs-id="2qxl8rh"></div>
<div class="coffee-header__display" data-hbs-id="g2mx73g"></div>
<div class="coffee-header__details" data-hbs-id="ltwkuyt"></div>
</div>
<div class="coffee-medium" data-hbs-id="vh08y8d">
<div class="coffe-medium__exit" data-hbs-id="5d8qngh"></div>
<div class="coffee-medium__arm" data-hbs-id="bpsz1y5"></div>
<div class="coffee-medium__liquid" data-hbs-id="tmhjz2a"></div>
<div class="coffee-medium__smoke coffee-medium__smoke-one" data-hbs-id="2zr18ht"></div>
<div class="coffee-medium__smoke coffee-medium__smoke-two" data-hbs-id="5fga4xs"></div>
<div class="coffee-medium__smoke coffee-medium__smoke-three" data-hbs-id="fgbbfmq"></div>
<div class="coffee-medium__smoke coffee-medium__smoke-for" data-hbs-id="pnl4p0m"></div>
<div class="coffee-medium__cup" data-hbs-id="li18a1b"></div>
</div>
<div class="coffee-footer" data-hbs-id="f78lrpj"></div>
</div>