added notifications

DjangoWeb/main/static/main/index.css

@@ -15,6 +15,41 @@ body{
     left:0;
 }
 
+#toast_container{
+    position:fixed;
+    bottom:30px;
+    right:30px;
+    overflow: hidden;
+    /* height:70%;
+    display: flex;
+    flex-direction: column-reverse; */
+
+}
+.toast{
+    min-width:200px;
+    min-height:100px;
+    background-color: #fff;
+    margin:20px 0;  
+    border-radius: 10px;
+    box-shadow: 1px 1px 20px -10px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    transform: translateX(100%);
+    animation: right-to-left 0.5s forwards linear;
+}
+@keyframes right-to-left {
+    100%{
+        transform: translateX(0%);
+    }
+}
+.toast>i{
+    margin-inline: 20px;
+    background-color: #a9ff00;
+    padding:0.5rem;
+    border-radius: 50px;
+}
+
 #main_container{
     background-color: #ffffff4d;
     box-shadow: 1px 1px 20px -10px #000;
@@ -120,3 +155,5 @@ input[type='button']:hover{
         cursor: pointer;
     }
 }
+
+

DjangoWeb/main/static/main/index.js

@@ -15,7 +15,10 @@ function createColorCard(colorname,color){
     card.dataset.color=color;
     card.innerHTML=`
         <div class="card-color" style='background:${color}'>
-            <i class="fa-solid fa-copy card-copy-btn" onclick="copyToClipboard(this.closest('.card').dataset.color)"></i>
+            <i class="fa-solid fa-copy card-copy-btn"
+             onclick="copyToClipboard(this.closest('.card').dataset.color);addNotification('Copied !','success');"
+
+             ></i>
             <i class="fa-solid fa-heart card-like-btn"></i>
         </div>
         <div class="card-title">${colorname}</div>
@@ -62,4 +65,29 @@ function copyToClipboard(value){
 function detectOnSubmit(e){
     if(e.key==='Enter' || e.keyCode===13)
         generateColor()
-}
+}
+
+
+function addNotification(msg,type){
+    // <div class="toast">
+    //     <i class="fa-solid fa-check"></i>
+    //     <span>copied!</span>
+    // </div>
+
+    var toast = document.createElement("div");
+    toast.className = 'toast';
+    if(type=="success"){
+        toast.innerHTML=`<i class="fa-solid fa-check"></i>`;
+    }
+    else if(type=="error"){
+        toast.innerHTML=`<i class="fa-solid fa-cross"></i>`;
+    }
+    toast.innerHTML+=`<span>${msg}</span>`;
+    toast_container.append(toast);
+
+    setTimeout(()=>{
+        toast.remove();
+    },1000*2);
+}
+
+// addNotification('msg','success');

DjangoWeb/main/templates/main/index.html

@@ -20,6 +20,8 @@
 
         <section id="colors_section"></section>
     </div>
+    <div id="toast_container">
+    </div>
 </body>
 
 <script src="{% static 'main/index.js' %}"></script>