docker-website/app/components/demo.vue

<script>
export default {
  data: () => ({
    terminalContent: '',
    subDomain: '',
    nextcloudClass: [],
    jellyfinClass: [],
    backbuttonClass: [],
    subdomainClass: [],
    pointerClass: [],
    isDemonstrationEnded: false,
    isPageScrolled: false,
    pointer: {
      top: '100%',
      left: '0%',
      opacity: '0'
    }
  }),
  created() {
    this.nextcloudClass = this.jellyfinClass = []
  },
  beforeMount() {
    window.addEventListener('scroll', () => {
      if (!this.isPageScrolled) { this.demonstration() }
      this.isPageScrolled = true
    })
  },
  beforeUnmount() {
    window.removeEventListener('scroll', () => {
      if (!this.isPageScrolled) { this.demonstration() }
      this.isPageScrolled = true
    })
  },
  methods: {
    demonstration() {
      const upClass = [
        'w-20',
        'h-20',
        'p-4',
        'opacity-100',
        'animate-upApp',
        'rounded-xl',
        'bg-black',
        'bg-opacity-10',
        'transition-all'
      ]
      const downClass = ['opacity-0', 'w-0', 'p-0', 'transition-all']
      const openClass = [
        'w-full',
        'h-full',
        'p-20',
        'rounded-b-xl',
        'rounded-t-none',
        'bg-gradient-to-r',
        'from-indigo-100',
        'to-violet-100',
        'transition-all'
      ]
      const closeClass = [
        ...upClass,
        'm-2'
      ]

      function delay(time) {
        return new Promise(resolve => setTimeout(resolve, time))
      }

      this.isDemonstrationEnded = false
      this.terminalContent = ''
      this.nextcloudClass = this.jellyfinClass = downClass

      let i = 0

      this.timer = setInterval(async () => {
        // nextcloud
        // up
        if (i === 0) {
          const cmd = '$ docker-web up nextcloud\n'
          for (const y in cmd) {
            this.terminalContent += cmd[y]
            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 === 4) this.pointer = { left: '47%', top: '53%', opacity: '100' }
        // open
        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 === 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
        if (i === 11) {
          const cmd = '$ docker-web up jellyfin\n'
          for (const y in cmd) {
            this.terminalContent += cmd[y]
            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 === 16) this.pointer = { left: '47%', top: '53%', opacity: '100' }
        // open
        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 === 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) {
          const cmd = '$ docker-web down\n'
          for (const y in cmd) {
            this.terminalContent += cmd[y]
            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.terminalContent += 'Stopping jellyfin ... done\n'
        if (i === 28) this.terminalContent += '[√] Removing jellyfin ... done\n'
        if (i === 29) this.jellyfinClass = downClass
        if (i === 30) this.isDemonstrationEnded = true

        i += 1
        // i = 5

        // if (i === 30) clearInterval(this.timer)
        if (i === 33) this.terminalContent = ''
        if (i === 33) this.jellyfinClass = downClass
        if (i === 33) i = 0
      }, 700)
    }
  }
}
</script>

<template>
  <section class="docker-web-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 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">
        <SvgBackbutton class="mr-3 p-1 bg-slate-300 rounded-full" :class="backbuttonClass" />
        <span class="text-gray-400"> https:// </span>
        <span class="text-indigo-700 font-bold" :class="subdomainClass">
          {{ subDomain }} </span>domain.com
      </div>
      <div class="bg-white w-full flex rounded-b-xl justify-center items-center h-96 max-h-96">
        <SvgNextcloud class="app-demo" :class="nextcloudClass" title="nextcloud.domain.com" />
        <SvgJellyfin class="app-demo" :class="jellyfinClass" title="jellyfin.domain.com" />
      </div>
    </div>
  </section>
</template>