docker-website/components/demo.vue

<script>
export default {
  data: () => ({
    terminalContent: '',
    subDomain: '',
    nextcloudClass: [],
    jellyfinClass: [],
    backbuttonClass: [],
    subdomainClass: [],
    isDemonstrationEnded: false,
    isPageScrolled: false
  }),
  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-violet-100',
        'to-indigo-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 = '$ pegaz 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 }
        // 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'] }
        // 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 = '' }

        // jellyfin
        // up
        if (i === 11) {
          const cmd = '$ pegaz 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 }
        // 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'] }
        // 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 = '' }

        // nextcloud down
        if (i === 23) {
          const cmd = '$ pegaz down nextcloud\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.isDemonstrationEnded = true }

        i += 1

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

<template>
  <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"
    >
      <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 h-full flex rounded-b-xl justify-center items-center"
      >
        <SvgNextcloud
          class="app-demo"
          :class="nextcloudClass"
          title="nextcloud.domain.com"
        />
        <SvgJellyfin
          class="app-demo"
          :class="jellyfinClass"
          title="jellyfin.domain.com"
        />
      </div>
    </div>
  </section>
</template>