|
@@ -1,4 +1,5 @@
|
|
|
<script>
|
|
<script>
|
|
|
|
|
+ import coinImg from '$lib/assets/tooeasy_coin.png';
|
|
|
export let holder = 'Gabriel Dias';
|
|
export let holder = 'Gabriel Dias';
|
|
|
export let number = '1234 5678 9012 3456';
|
|
export let number = '1234 5678 9012 3456';
|
|
|
export let expiry = '12/28';
|
|
export let expiry = '12/28';
|
|
@@ -30,34 +31,10 @@
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
{:else if variant === 'coin'}
|
|
{:else if variant === 'coin'}
|
|
|
- <div class="coin-container" aria-label="EasyCoin coin">
|
|
|
|
|
|
|
+ <div class="coin-container" aria-label="TooEasy coin">
|
|
|
<div class="coin-shadow"></div>
|
|
<div class="coin-shadow"></div>
|
|
|
<div class="coin">
|
|
<div class="coin">
|
|
|
- <div class="coin-face front">
|
|
|
|
|
- <div class="coin-gloss"></div>
|
|
|
|
|
- <div class="coin-icon" aria-hidden="true">
|
|
|
|
|
- <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
|
- <defs>
|
|
|
|
|
- <linearGradient id="leafGrad" x1="0" x2="1" y1="0" y2="1">
|
|
|
|
|
- <stop offset="0%" stop-color="#FFF2B2"/>
|
|
|
|
|
- <stop offset="100%" stop-color="#FFD873"/>
|
|
|
|
|
- </linearGradient>
|
|
|
|
|
- </defs>
|
|
|
|
|
- <path d="M52 12C36 16 22 24 14 38c-4 7-5 14-5 14s7-1 14-5C37 39 45 25 49 10l3 2z" fill="url(#leafGrad)" opacity="0.95"/>
|
|
|
|
|
- <path d="M18 46c10-7 18-17 24-32" stroke="#FFD873" stroke-width="3" stroke-linecap="round"/>
|
|
|
|
|
- </svg>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="coin-brand">{brand || 'EasyCoin'}</div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="coin-face back">
|
|
|
|
|
- <div class="coin-icon" aria-hidden="true">
|
|
|
|
|
- <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
|
- <path d="M20 54c8-8 12-18 12-30M32 24c6-8 14-14 22-18" stroke="#FFD873" stroke-width="4" stroke-linecap="round"/>
|
|
|
|
|
- <circle cx="20" cy="54" r="3" fill="#FFEAA2"/>
|
|
|
|
|
- <circle cx="32" cy="24" r="3" fill="#FFEAA2"/>
|
|
|
|
|
- </svg>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ <img src={coinImg} alt="TooEasy coin" class="coin-img" />
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
{/if}
|
|
{/if}
|
|
@@ -214,87 +191,22 @@
|
|
|
height: 100%;
|
|
height: 100%;
|
|
|
position: relative;
|
|
position: relative;
|
|
|
transform-style: preserve-3d;
|
|
transform-style: preserve-3d;
|
|
|
- animation: coin-sway 6.5s ease-in-out infinite;
|
|
|
|
|
- filter: drop-shadow(0 20px 40px rgba(0, 211, 160, 0.25));
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .coin-shadow {
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- bottom: -14px;
|
|
|
|
|
- left: 50%;
|
|
|
|
|
- transform: translateX(-50%);
|
|
|
|
|
- width: 60%;
|
|
|
|
|
- height: 24px;
|
|
|
|
|
- background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,0.35), rgba(0,0,0,0) 70%);
|
|
|
|
|
- filter: blur(8px);
|
|
|
|
|
- opacity: 0.35;
|
|
|
|
|
- pointer-events: none;
|
|
|
|
|
- animation: shadow-drift 6.5s ease-in-out infinite;
|
|
|
|
|
|
|
+ animation: coin-sway 9.5s ease-in-out infinite;
|
|
|
|
|
+ filter: drop-shadow(0 20px 40px rgba(255, 213, 4, 0.875));
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .coin-face {
|
|
|
|
|
|
|
+ .coin-img {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
inset: 0;
|
|
inset: 0;
|
|
|
- border-radius: 50%;
|
|
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ object-fit: contain;
|
|
|
backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
|
- display: flex;
|
|
|
|
|
- align-items: center;
|
|
|
|
|
- justify-content: center;
|
|
|
|
|
- box-shadow:
|
|
|
|
|
- inset 0 10px 30px rgba(255, 255, 255, 0.15),
|
|
|
|
|
- inset 0 -20px 40px rgba(0, 0, 0, 0.25),
|
|
|
|
|
- 0 10px 30px rgba(0, 211, 160, 0.25);
|
|
|
|
|
- background: radial-gradient(100% 100% at 30% 30%, #00D3A0 0%, #009D77 50%, #006B54 100%);
|
|
|
|
|
- border: 6px solid rgba(255, 255, 255, 0.15);
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .coin-face.back {
|
|
|
|
|
- transform: rotateY(180deg);
|
|
|
|
|
- background: radial-gradient(100% 100% at 30% 30%, #00D3A0 0%, #009D77 50%, #006B54 100%);
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .coin::before {
|
|
|
|
|
- content: '';
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- inset: 8px;
|
|
|
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
|
- background: repeating-conic-gradient(
|
|
|
|
|
- from 0deg,
|
|
|
|
|
- rgba(255, 255, 255, 0.25) 0deg 10deg,
|
|
|
|
|
- rgba(255, 255, 255, 0.05) 10deg 20deg
|
|
|
|
|
- );
|
|
|
|
|
- filter: blur(0.3px) saturate(0.9);
|
|
|
|
|
- opacity: 0.25;
|
|
|
|
|
pointer-events: none;
|
|
pointer-events: none;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- .coin-gloss {
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- inset: 0;
|
|
|
|
|
- border-radius: 50%;
|
|
|
|
|
- background: radial-gradient(60% 60% at 30% 20%, rgba(255,255,255,0.35), transparent 60%);
|
|
|
|
|
- mix-blend-mode: screen;
|
|
|
|
|
- animation: gloss-move 3.5s ease-in-out infinite;
|
|
|
|
|
- }
|
|
|
|
|
|
|
|
|
|
- .coin-brand {
|
|
|
|
|
- position: absolute;
|
|
|
|
|
- bottom: 18px;
|
|
|
|
|
- width: 100%;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
- font-weight: 800;
|
|
|
|
|
- letter-spacing: 1px;
|
|
|
|
|
- color: rgba(10, 15, 20, 0.9);
|
|
|
|
|
- text-shadow: 0 1px 0 rgba(255,255,255,0.4);
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .coin-icon {
|
|
|
|
|
- width: 56%;
|
|
|
|
|
- height: 56%;
|
|
|
|
|
- display: grid;
|
|
|
|
|
- place-items: center;
|
|
|
|
|
- filter: drop-shadow(0 6px 12px rgba(0,0,0,0.25));
|
|
|
|
|
- }
|
|
|
|
|
|
|
|
|
|
@keyframes coin-rotate {
|
|
@keyframes coin-rotate {
|
|
|
0% {
|
|
0% {
|