浏览代码

ADD the new icon

gdias 3 月之前
父节点
当前提交
57b8909fce
共有 3 个文件被更改,包括 12 次插入97 次删除
  1. 二进制
      src/lib/assets/tooeasy_coin.png
  2. 3 0
      src/lib/assets/tooeasy_coin.png:Zone.Identifier
  3. 9 97
      src/lib/components/Card3D.svelte

二进制
src/lib/assets/tooeasy_coin.png


+ 3 - 0
src/lib/assets/tooeasy_coin.png:Zone.Identifier

@@ -0,0 +1,3 @@
+[ZoneTransfer]
+ZoneId=3
+HostUrl=https://www.remove.bg/

+ 9 - 97
src/lib/components/Card3D.svelte

@@ -1,4 +1,5 @@
 <script>
+  import coinImg from '$lib/assets/tooeasy_coin.png';
   export let holder = 'Gabriel Dias';
   export let number = '1234 5678 9012 3456';
   export let expiry = '12/28';
@@ -30,34 +31,10 @@
     </div>
   </div>
 {: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">
-      <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>
 {/if}
@@ -214,87 +191,22 @@
     height: 100%;
     position: relative;
     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;
     inset: 0;
-    border-radius: 50%;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
     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%;
-    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;
   }
 
-  .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 {
     0% {