docker-website/src/components/demo.vue

<script>
  import { onBeforeUnmount, openBlock } from 'vue'
  import Nextcloud from '~/components/svg/apps/nextcloud.vue'
  import Jellyfin from '~/components/svg/apps/jellyfin.vue'
  import Backbutton from '~/components/svg/backbutton.vue'
  import Rewind from '~/components/svg/rewind.vue'

  export default {
    components: { Nextcloud },
    data: () => ({
      terminalContent: '',
      subDomain: '',
      nextcloudClass: [],
      jellyfinClass: [],
      backbuttonClass: [],
      isDemonstrationEnded: false,
    }),
    methods: {
      demonstration() {
        const upClass = ['w-20', 'p-4', 'opacity-100', 'animate-upApp', 'rounded-xl']
        const downClass = ['opacity-0', 'w-0', 'p-0']
        const openClass = ['w-full', 'h-full', 'p-20', 'rounded-t-none', 'bg-gradient-to-r', 'from-violet-100', 'to-indigo-100']
        const closeClass = ['w-20', 'p-4', 'opacity-100', 'animate-upApp', 'rounded-xl', '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) {
            let cmd = '$ pegaz up nextcloud\n'
            for (let 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://cloud.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 = 'nextcloud.'
          //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) {
            let cmd = '$ pegaz up jellyfin\n'
            for (let 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.'
          //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) {
            let cmd = '$ pegaz down nextcloud\n'
            for (let 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

          if (i == 30) clearInterval(this.timer)
          i += 1
        }, 1000)
      }
    },
    async created() {
      let isPageScrolled = false
      this.nextcloudClass = this.jellyfinClass = []
      document.onscroll = (event) => {
        if (!isPageScrolled) this.demonstration()
        isPageScrolled = true
      }
    },
  }
</script>

<template>
  <section class="flex flex-col md:flex-row items-center justify-center mb-28">
    <div class="bg-slate-900 flex-row rounded-xl w-4/5 md:w-96 h-56 md:z-10 -mb-8 md:-mb-0 max-w-full md:min-w-max" :class="{'blur-sm': isDemonstrationEnded}">
      <div class="p-3 flex justify-between w-20">
        <div class="bg-green-400 h-4 w-4 r-1 rounded-full"></div>
        <div class="bg-yellow-300 h-4 w-4 r-1 rounded-full"></div>
        <div class="bg-red-600 h-4 w-4 r-1 rounded-full"></div>
      </div>
      <div class="flex h-4/5">
        <code class="w-full text-white font-mono p-4 pt-0 mr-0 overflow-scroll whitespace-pre">
          {{ terminalContent }}<span class="w-2 h-4 bg-white inline-block animate-blink relative" style="margin-bottom: -2px;" ref="terminal" />
        </code>
      </div>
    </div>
    <div class="bg-slate-400 flex flex-col items-center rounded-2xl w-full md:w-2/4 md:min-w-fit h-80 md:-ml-8 md:z-0" :class="{'blur-sm': isDemonstrationEnded}">
      <div class="bg-white flex items-center rounded-2xl px-4 py-1 m-4 w-4/6">
        <Backbutton :class="backbuttonClass" />
        <span class="text-gray-400">
          https://
        </span>
        <span class="text-indigo-700 font-semibold">
          {{ subDomain }}
        </span>domain.com
      </div>
      <div class="bg-white w-full h-full flex justify-center items-center">
        <Nextcloud class="bg-black bg-opacity-10 inline-block cursor-pointer transition-all" :class="nextcloudClass" title="nextcloud.domain.com" />
        <Jellyfin class="bg-black bg-opacity-10 inline-block cursor-pointer transition-all" :class="jellyfinClass" title="jellyfin.domain.com" />
      </div>
    </div>
    <div
      @click="demonstration"
      v-if="isDemonstrationEnded"
      class="bg-indigo-500 rounded-full p-20 absolute cursor-pointer focus:p-18 shadow-2xl">
      <Rewind class="text-white" />
    </div>
  </section>
</template>