198 lines
6.4 KiB
Vue
198 lines
6.4 KiB
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 = '$ 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
|
|
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 = '$ 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
|
|
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 = '$ 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
|
|
// i = 5
|
|
|
|
// if (i === 30) clearInterval(this.timer)
|
|
if (i === 30) this.terminalContent = ''
|
|
if (i === 30) this.jellyfinClass = downClass
|
|
if (i === 30) i = 0
|
|
}, 700)
|
|
}
|
|
}
|
|
}
|
|
</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 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 h-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>
|