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

fix: demo animation

Browse Source
This commit is contained in:
valere
2023-03-14 20:30:06 +01:00
parent d465a4aa30
commit a06fb0c617
2 changed files with 62 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/applications-list.vue
View File

@@ -44,11 +44,11 @@ export default {
</script> </script>
<template> <template>
<section> <section class="bg-slate-300 p-8 bg-gradient-to-r from-violet-100 to-indigo-100 rounded-t-xl">
<h2 class="title"> <h2 class="title">
Pre-configured applications Pre-configured applications
</h2> </h2>
<ul class="flex justify-center p-4 m-4 max-w-full flex-wrap"> <ul class="flex justify-center p-2 max-w-full flex-wrap">
<li v-for="app in apps" :key="app" class="m-4"> <li v-for="app in apps" :key="app" class="m-4">
<a <a
:href=" :href="
@@ -57,7 +57,7 @@ export default {
" "
:title="app.name" :title="app.name"
> >
<component :is="app.component" class="app" /> <component :is="app.component" class="app hover:scale-110" />
</a> </a>
</li> </li>
</ul> </ul>

97
components/demo.vue
View File

@@ -7,8 +7,14 @@ export default {
jellyfinClass: [], jellyfinClass: [],
backbuttonClass: [], backbuttonClass: [],
subdomainClass: [], subdomainClass: [],
pointerClass: [],
isDemonstrationEnded: false, isDemonstrationEnded: false,
isPageScrolled: false isPageScrolled: false,
pointer: {
top: '100%',
left: '0%',
opacity: '0'
}
}), }),
created () { created () {
this.nextcloudClass = this.jellyfinClass = [] this.nextcloudClass = this.jellyfinClass = []
@@ -46,8 +52,8 @@ export default {
'rounded-b-xl', 'rounded-b-xl',
'rounded-t-none', 'rounded-t-none',
'bg-gradient-to-r', 'bg-gradient-to-r',
'from-violet-100', 'from-indigo-100',
'to-indigo-100', 'to-violet-100',
'transition-all' 'transition-all'
] ]
const closeClass = [ const closeClass = [
@@ -75,20 +81,27 @@ export default {
await delay(20) await delay(20)
} }
} }
if (i === 1) { this.terminalContent += 'Creating nextcloud ... done\n' } if (i === 1) this.terminalContent += 'Creating nextcloud ... done\n'
if (i === 2) { this.terminalContent += '[√] https://nextcloud.domain.com\n' } if (i === 2) this.terminalContent += '[√] https://nextcloud.domain.com\n'
if (i === 3) { this.nextcloudClass = upClass } if (i === 3) this.nextcloudClass = upClass
if (i === 4) this.pointer = {left: '47%', top: '53%', opacity: '100'}
// open // open
if (i === 5) { this.nextcloudClass.push('animate-openApp') } if (i === 5) this.nextcloudClass.push('animate-openApp')
if (i === 6) { this.nextcloudClass = openClass } if (i === 5) this.pointerClass = ['']
if (i === 6) { this.subDomain = 'cloud.' } if (i === 5) this.pointerClass = ['animate-click']
if (i === 6) { this.subdomainClass = [''] } if (i === 6) this.nextcloudClass = openClass
if (i === 6) { this.subdomainClass = ['animate-click'] } if (i === 6) this.subDomain = 'cloud.'
if (i === 6) this.subdomainClass = ['']
if (i === 6) this.subdomainClass = ['animate-click']
// close // close
if (i === 7) { this.terminalContent = '' } if (i === 7) this.terminalContent = ''
if (i === 9) { this.backbuttonClass = ['animate-click'] } if (i === 8) this.pointer = {left: '10%', top: '3%'}
if (i === 10) { this.nextcloudClass = closeClass } if (i === 9) this.backbuttonClass = ['']
if (i === 10) { this.subDomain = 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 // jellyfin
// up // up
@@ -99,21 +112,27 @@ export default {
await delay(20) await delay(20)
} }
} }
if (i === 12) { this.terminalContent += 'Creating jellyfin ... done\n' } if (i === 12) this.terminalContent += 'Creating jellyfin ... done\n'
if (i === 13) { this.terminalContent += '[√] https://jellyfin.domain.com\n' } if (i === 13) this.terminalContent += '[√] https://jellyfin.domain.com\n'
if (i === 14) { this.jellyfinClass = closeClass } if (i === 14) this.jellyfinClass = closeClass
if (i === 16) this.pointer = {left: '47%', top: '53%', opacity: '100'}
// open // open
if (i === 16) { this.jellyfinClass.push('animate-openApp') } if (i === 16) this.jellyfinClass.push('animate-openApp')
if (i === 16) { this.nextcloudClass = downClass } if (i === 16) this.pointerClass = ['animate-click']
if (i === 17) { this.jellyfinClass = openClass } if (i === 16) this.nextcloudClass = downClass
if (i === 17) { this.subDomain = 'jellyfin.' } if (i === 17) this.jellyfinClass = openClass
if (i === 6) { this.subdomainClass = [''] } if (i === 17) this.subDomain = 'jellyfin.'
if (i === 6) { this.subdomainClass = ['animate-click'] } if (i === 17) this.subdomainClass = ['']
if (i === 17) this.pointer = {left: '10%', top: '3%'}
if (i === 17) this.subdomainClass = ['animate-click']
// close // close
if (i === 20) { this.backbuttonClass = ['animate-click'] } if (i === 19) this.backbuttonClass = ['']
if (i === 21) { this.jellyfinClass = this.nextcloudClass = closeClass } if (i === 19) this.backbuttonClass = ['animate-click']
if (i === 21) { this.subDomain = '' } if (i === 19) this.pointer = {opacity: '0'}
if (i === 21) { this.terminalContent = '' } 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 // nextcloud down
if (i === 23) { if (i === 23) {
@@ -123,18 +142,19 @@ export default {
await delay(20) await delay(20)
} }
} }
if (i === 24) { this.terminalContent += 'Stopping nextcloud ... done\n' } if (i === 24) this.terminalContent += 'Stopping nextcloud ... done\n'
if (i === 25) { this.terminalContent += '[√] Removing nextcloud ... done\n' } if (i === 25) this.terminalContent += '[√] Removing nextcloud ... done\n'
if (i === 26) { this.nextcloudClass = downClass } if (i === 26) this.nextcloudClass = downClass
if (i === 27) { this.isDemonstrationEnded = true } if (i === 27) this.isDemonstrationEnded = true
i += 1 i += 1
// i = 5
// if (i === 30) clearInterval(this.timer) // if (i === 30) clearInterval(this.timer)
if (i === 30) { this.terminalContent = '' } if (i === 30) this.terminalContent = ''
if (i === 30) { this.jellyfinClass = downClass } if (i === 30) this.jellyfinClass = downClass
if (i === 30) { i = 0 } if (i === 30) i = 0
}, 1000) }, 700)
} }
} }
} }
@@ -144,8 +164,9 @@ export default {
<section class="pegaz-section"> <section class="pegaz-section">
<Terminal :terminal-content="terminalContent" /> <Terminal :terminal-content="terminalContent" />
<div <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" 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 <div
class="bg-white flex items-center rounded-2xl pr-4 pl-2 py-1 m-4 w-4/5" class="bg-white flex items-center rounded-2xl pr-4 pl-2 py-1 m-4 w-4/5"
> >
@@ -158,7 +179,7 @@ export default {
{{ subDomain }} </span>domain.com {{ subDomain }} </span>domain.com
</div> </div>
<div <div
class="bg-white w-full h-full flex rounded-b-xl justify-center items-center" class="bg-white w-full h-full flex rounded-b-xl justify-center items-center h-96 max-h-96"
> >
<SvgNextcloud <SvgNextcloud
class="app-demo" class="app-demo"