valere/docker-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FAT: demonstation v1 !

Browse Source
This commit is contained in:
prosety
2022-11-26 17:11:08 +01:00
parent 6a5803a353
commit eeb6522a78
10 changed files with 153 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
src/components/demo.vue
View File

@@ -1,46 +1,115 @@
<script>
import { onBeforeUnmount } from 'vue'
import Nextcloud from '~/components/svg/apps/nextcloud.vue'
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: '',
isLaunched: false,
stories: [
{
terminal: ['pegaz up nextcloud', 'Creating nextcloud ... done', '[√] https://cloud.domain.com'],
navigator: ['show', 'nextcloud', 'click', 'nextcloud', 'goto', 'cloud'],
},
{
terminal: ['pegaz up jellyfin', 'Creating jellyfin ... done', '[√] https://jellyfin.domain.com'],
navigator: ['show', 'jellyfin', 'click', 'jellyfin', 'goto', 'jellyfin'],
},
{
terminal: ['pegaz down nextcloud', 'Stopping nextcloud ... done', 'Removing nextcloud ... done'],
navigator: ['goto', 'home', 'hide', 'jellyfin'],
},
],
nextcloudClass: [],
jellyfinClass: [],
backbuttonClass: [],
isDemonstrationEnded: false,
}),
async created() {
const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))
let i = 0
this.timer = await setInterval(() => {
this.terminalContent += this.stories[0].terminal[i]+'\n'
i += 1
if (i == this.stories[0].terminal.length) {
clearInterval(this.timer)
this.isLaunched = true
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))
}
}, 1000)
}
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">
<code 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">
<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>
@@ -51,9 +120,10 @@ import Nextcloud from '~/components/svg/apps/nextcloud.vue'
{{ terminalContent }}<span class="w-2 h-4 bg-white inline-block animate-blink relative" style="margin-bottom: -2px;" ref="terminal" />
</code>
</div>
</code>
<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">
<div class="bg-white inline-block rounded-2xl px-4 py-1 m-4 w-4/6">
</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>
@@ -61,9 +131,16 @@ import Nextcloud from '~/components/svg/apps/nextcloud.vue'
{{ subDomain }}
</span>domain.com
</div>
<div class="bg-white w-full h-full flex justify-center items-center group">
<Nextcloud class="w-20 bg-black bg-opacity-10 inline-block rounded-xl p-4 cursor-pointer scale-0 transition-transform" :class="isLaunched ? 'scale-100' : ''" />
<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>