From 734e44df50885fd861b550a864764c7d65ae6c9c Mon Sep 17 00:00:00 2001
From: shivv <shivpratikhande2017@gmail.com>
Date: Tue, 1 Oct 2024 09:34:55 +0530
Subject: [PATCH] working

---
 src/App.vue                | 40 ++++++++++++++++++++++++++++++++++++++
 src/components/Stepper.vue |  6 +-----
 2 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b0b81f07..a587b728 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -38,6 +38,11 @@
               />
             </transition>
           </div>
+          <transition name="fade">
+            <div v-if="showCongratulations" class="floating-message">
+              Congratulations 🎉, you’ve successfully chosen a license. 
+            </div>
+          </transition>
         </div>
       </div>
       <help-section @change="openChooserModal" />
@@ -82,6 +87,8 @@ export default {
       showLicense: false,
       shouldShake: false,
       windowWidth: window.innerWidth,
+      showCongratulations: false,  // State to control visibility of the message
+
     };
   },
   computed: {
@@ -140,6 +147,7 @@ export default {
       this.showLicense = 0;
       this.setAttributionType('short');
     },
+
     /**
      * When the user clicks `Done`, we scroll to the 'Mark your work' section ('LicenseUseCard')
      * and shake it. Shaking animation is triggered by adding 'shake' class to the section, and removing it
@@ -150,6 +158,13 @@ export default {
       const scrollDuration = this.isBelowTabletWidth ? 3000 : 800;
       const shakeDuration = 3000 + scrollDuration;
       const comp = this;
+
+      this.showCongratulations = true;
+
+      setTimeout(() => {
+        this.showCongratulations = false;
+      }, 2000);
+
       setTimeout(() => {
         comp.shouldShake = true;
       }, scrollDuration - 400);
@@ -220,6 +235,31 @@ export default {
 footer.main-footer {
   margin-top: 2rem;
 }
+//changes
+
+.floating-message {
+  background-color: #f5f5f5;
+  color: #333333;
+  padding: 15px;
+  border-radius: 5px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  font-size: 16px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1000;
+
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.5s;
+}
+
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
 @media only screen and (min-width: 769px) {
   #site-container {
     padding-top: 2rem;
diff --git a/src/components/Stepper.vue b/src/components/Stepper.vue
index 41b0666c..36b72d85 100644
--- a/src/components/Stepper.vue
+++ b/src/components/Stepper.vue
@@ -1,9 +1,5 @@
 <template>
-  <div>
-    <!-- <div v-if="isCompleted" class="completion-message">
-        {{ completionMessage }}
-    </div> -->
-    
+  <div> 
     <div :class="{ 'disabled': isCompleted }" class="stepper__container">
       <div v-for="(step, idx) in visibleSteps()" :key="idx" :ref="`step-${idx}`" :class="[
         'step-container',