From 9c54c89fcfd33cb70845bbba3aa71fdaa4b1d445 Mon Sep 17 00:00:00 2001
From: edbrz9 <ed@brz9.devd>
Date: Fri, 30 Dec 2022 19:28:33 +0100
Subject: [PATCH] fix css and js for success animation

---
 proj/y2t/assets/css/style.css | 34 ++++++++++++++++++++++++++++++++++
 proj/y2t/assets/js/main.js    |  2 +-
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/proj/y2t/assets/css/style.css b/proj/y2t/assets/css/style.css
index b5ebef7..60b498f 100644
--- a/proj/y2t/assets/css/style.css
+++ b/proj/y2t/assets/css/style.css
@@ -135,4 +135,38 @@ section#output {
 section#output div.y2t-output {
     margin-top: 40px;
     margin-bottom: 40px;
+}
+
+div.y2t-output {
+    position: relative;
+}
+
+div.copied {
+    position: absolute;
+    background-color: var(--success);
+    color: white;
+    font-size: 1.2rem;
+    padding: 10px;
+    right: -15px;
+    top: -10px;
+    transform: rotate(10deg);
+}
+
+.success {
+  animation: fade-in 3s forwards;
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  30% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
 }
\ No newline at end of file
diff --git a/proj/y2t/assets/js/main.js b/proj/y2t/assets/js/main.js
index 9be94d2..8dbd5b0 100644
--- a/proj/y2t/assets/js/main.js
+++ b/proj/y2t/assets/js/main.js
@@ -31,7 +31,7 @@ Vue.component('copbox',{
       successOk(){
         this.isSuccess = true;
         this.$refs.element.addEventListener('animationend', () => {
-          this.isFaded = false;
+          this.isSuccess = false;
         });
       }
     }