From a06fb0c617aec3c1d85e1e17df309bf55fd0c321 Mon Sep 17 00:00:00 2001
From: valere <dev@valerebron.com>
Date: Tue, 14 Mar 2023 20:30:06 +0100
Subject: [PATCH] fix: demo animation

---
 components/applications-list.vue |  6 +-
 components/demo.vue              | 97 +++++++++++++++++++-------------
 2 files changed, 62 insertions(+), 41 deletions(-)

diff --git a/components/applications-list.vue b/components/applications-list.vue
index 1cc8c57..61c5762 100644
--- a/components/applications-list.vue
+++ b/components/applications-list.vue
@@ -44,11 +44,11 @@ export default {
 </script>
 
 <template>
-  <section>
+  <section class="bg-slate-300 p-8 bg-gradient-to-r from-violet-100 to-indigo-100 rounded-t-xl">
     <h2 class="title">
       Pre-configured applications
     </h2>
-    <ul class="flex justify-center p-4 m-4 max-w-full flex-wrap">
+    <ul class="flex justify-center p-2 max-w-full flex-wrap">
       <li v-for="app in apps" :key="app" class="m-4">
         <a
           :href="
@@ -57,7 +57,7 @@ export default {
           "
           :title="app.name"
         >
-          <component :is="app.component" class="app" />
+          <component :is="app.component" class="app hover:scale-110" />
         </a>
       </li>
     </ul>
diff --git a/components/demo.vue b/components/demo.vue
index 314cd06..fa66aa1 100644
--- a/components/demo.vue
+++ b/components/demo.vue
@@ -7,8 +7,14 @@ export default {
     jellyfinClass: [],
     backbuttonClass: [],
     subdomainClass: [],
+    pointerClass: [],
     isDemonstrationEnded: false,
-    isPageScrolled: false
+    isPageScrolled: false,
+    pointer: {
+      top: '100%',
+      left: '0%',
+      opacity: '0'
+    }
   }),
   created () {
     this.nextcloudClass = this.jellyfinClass = []
@@ -46,8 +52,8 @@ export default {
         'rounded-b-xl',
         'rounded-t-none',
         'bg-gradient-to-r',
-        'from-violet-100',
-        'to-indigo-100',
+        'from-indigo-100',
+        'to-violet-100',
         'transition-all'
       ]
       const closeClass = [
@@ -75,20 +81,27 @@ export default {
             await delay(20)
           }
         }
-        if (i === 1) { this.terminalContent += 'Creating nextcloud ... done\n' }
-        if (i === 2) { this.terminalContent += '[√] https://nextcloud.domain.com\n' }
-        if (i === 3) { this.nextcloudClass = upClass }
+        if (i === 1) this.terminalContent += 'Creating nextcloud ... done\n'
+        if (i === 2) this.terminalContent += '[√] https://nextcloud.domain.com\n'
+        if (i === 3) this.nextcloudClass = upClass
+        if (i === 4) this.pointer = {left: '47%', top: '53%', opacity: '100'}
         // open
-        if (i === 5) { this.nextcloudClass.push('animate-openApp') }
-        if (i === 6) { this.nextcloudClass = openClass }
-        if (i === 6) { this.subDomain = 'cloud.' }
-        if (i === 6) { this.subdomainClass = [''] }
-        if (i === 6) { this.subdomainClass = ['animate-click'] }
+        if (i === 5) this.nextcloudClass.push('animate-openApp')
+        if (i === 5) this.pointerClass = ['']
+        if (i === 5) this.pointerClass = ['animate-click']
+        if (i === 6) this.nextcloudClass = openClass
+        if (i === 6) this.subDomain = 'cloud.'
+        if (i === 6) this.subdomainClass = ['']
+        if (i === 6) this.subdomainClass = ['animate-click']
         // close
-        if (i === 7) { this.terminalContent = '' }
-        if (i === 9) { this.backbuttonClass = ['animate-click'] }
-        if (i === 10) { this.nextcloudClass = closeClass }
-        if (i === 10) { this.subDomain = this.backbuttonClass = '' }
+        if (i === 7) this.terminalContent = ''
+        if (i === 8) this.pointer = {left: '10%', top: '3%'}
+        if (i === 9) this.backbuttonClass = ['']
+        if (i === 9) this.backbuttonClass = ['animate-click']
+        if (i === 10) this.nextcloudClass = closeClass
+        if (i === 10) this.subDomain = this.backbuttonClass = ''
+        if (i === 11) this.pointer.opacity = '0'
+        if (i === 12) this.pointer.top = '50%'
 
         // jellyfin
         // up
@@ -99,21 +112,27 @@ export default {
             await delay(20)
           }
         }
-        if (i === 12) { this.terminalContent += 'Creating jellyfin ... done\n' }
-        if (i === 13) { this.terminalContent += '[√] https://jellyfin.domain.com\n' }
-        if (i === 14) { this.jellyfinClass = closeClass }
+        if (i === 12) this.terminalContent += 'Creating jellyfin ... done\n'
+        if (i === 13) this.terminalContent += '[√] https://jellyfin.domain.com\n'
+        if (i === 14) this.jellyfinClass = closeClass
+        if (i === 16) this.pointer = {left: '47%', top: '53%', opacity: '100'}
         // open
-        if (i === 16) { this.jellyfinClass.push('animate-openApp') }
-        if (i === 16) { this.nextcloudClass = downClass }
-        if (i === 17) { this.jellyfinClass = openClass }
-        if (i === 17) { this.subDomain = 'jellyfin.' }
-        if (i === 6) { this.subdomainClass = [''] }
-        if (i === 6) { this.subdomainClass = ['animate-click'] }
+        if (i === 16) this.jellyfinClass.push('animate-openApp')
+        if (i === 16) this.pointerClass = ['animate-click']
+        if (i === 16) this.nextcloudClass = downClass
+        if (i === 17) this.jellyfinClass = openClass
+        if (i === 17) this.subDomain = 'jellyfin.'
+        if (i === 17) this.subdomainClass = ['']
+        if (i === 17) this.pointer = {left: '10%', top: '3%'}
+        if (i === 17) this.subdomainClass = ['animate-click']
         // close
-        if (i === 20) { this.backbuttonClass = ['animate-click'] }
-        if (i === 21) { this.jellyfinClass = this.nextcloudClass = closeClass }
-        if (i === 21) { this.subDomain = '' }
-        if (i === 21) { this.terminalContent = '' }
+        if (i === 19) this.backbuttonClass = ['']
+        if (i === 19) this.backbuttonClass = ['animate-click']
+        if (i === 19) this.pointer = {opacity: '0'}
+        if (i === 20) this.jellyfinClass = this.nextcloudClass = closeClass
+        if (i === 20) this.subDomain = ''
+        if (i === 20) this.terminalContent = ''
+        if (i === 21) this.pointer = {top: '100%', left: '0'}
 
         // nextcloud down
         if (i === 23) {
@@ -123,18 +142,19 @@ export default {
             await delay(20)
           }
         }
-        if (i === 24) { this.terminalContent += 'Stopping nextcloud ... done\n' }
-        if (i === 25) { this.terminalContent += '[√] Removing nextcloud ... done\n' }
-        if (i === 26) { this.nextcloudClass = downClass }
-        if (i === 27) { this.isDemonstrationEnded = true }
+        if (i === 24) this.terminalContent += 'Stopping nextcloud ... done\n'
+        if (i === 25) this.terminalContent += '[√] Removing nextcloud ... done\n'
+        if (i === 26) this.nextcloudClass = downClass
+        if (i === 27) this.isDemonstrationEnded = true
 
         i += 1
+        // i = 5
 
         // if (i === 30) clearInterval(this.timer)
-        if (i === 30) { this.terminalContent = '' }
-        if (i === 30) { this.jellyfinClass = downClass }
-        if (i === 30) { i = 0 }
-      }, 1000)
+        if (i === 30) this.terminalContent = ''
+        if (i === 30) this.jellyfinClass = downClass
+        if (i === 30) i = 0
+      }, 700)
     }
   }
 }
@@ -144,8 +164,9 @@ export default {
   <section class="pegaz-section">
     <Terminal :terminal-content="terminalContent" />
     <div
-      class="bg-slate-400 flex flex-col items-center relative rounded-2xl w-full m-0 md:min-w-fit max-w-2xl h-80 max-h-80 md:-ml-8 md:z-0"
+      class="bg-slate-400 flex flex-col items-center relative rounded-2xl w-full m-0 md:min-w-fit max-w-2xl md:-ml-8 md:z-0 overflow-hidden"
     >
+      <div class="absolute block bg-black bg-opacity-10 rounded-full h-10 w-10 transition-all duration-700 ease-out" :class="pointerClass" :style="{left: pointer.left, top: pointer.top, opacity: pointer.opacity}"></div> 
       <div
         class="bg-white flex items-center rounded-2xl pr-4 pl-2 py-1 m-4 w-4/5"
       >
@@ -158,7 +179,7 @@ export default {
           {{ subDomain }} </span>domain.com
       </div>
       <div
-        class="bg-white w-full h-full flex rounded-b-xl justify-center items-center"
+        class="bg-white w-full h-full flex rounded-b-xl justify-center items-center h-96 max-h-96"
       >
         <SvgNextcloud
           class="app-demo"