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

fixes
All checks were successful
Deploy App / deploy (push) Successful in 30s
Details

Browse Source
This commit is contained in:
valere
2025-08-29 16:53:14 +02:00
parent 342a7a7e0a
commit 87f0cbb2cd
10 changed files with 130 additions and 464 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
app/components/demo.vue
View File

@@ -16,23 +16,23 @@ export default {
opacity: '0'
}
}),
created () {
created() {
this.nextcloudClass = this.jellyfinClass = []
},
beforeMount () {
beforeMount() {
window.addEventListener('scroll', () => {
if (!this.isPageScrolled) { this.demonstration() }
this.isPageScrolled = true
})
},
beforeUnmount () {
beforeUnmount() {
window.removeEventListener('scroll', () => {
if (!this.isPageScrolled) { this.demonstration() }
this.isPageScrolled = true
})
},
methods: {
demonstration () {
demonstration() {
const upClass = [
'w-20',
'h-20',
@@ -61,7 +61,7 @@ export default {
'm-2'
]
function delay (time) {
function delay(time) {
return new Promise(resolve => setTimeout(resolve, time))
}
@@ -84,7 +84,7 @@ export default {
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'}
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 = ['']
@@ -95,7 +95,7 @@ export default {
if (i === 6) this.subdomainClass = ['animate-click']
// close
if (i === 7) this.terminalContent = ''
if (i === 8) this.pointer = {left: '10%', top: '3%'}
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
@@ -115,7 +115,7 @@ export default {
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'}
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']
@@ -123,16 +123,16 @@ export default {
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.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 === 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'}
if (i === 21) this.pointer = { top: '100%', left: '0' }
// nextcloud down
if (i === 23) {
@@ -167,33 +167,18 @@ export default {
<section class="docker-web-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"
/>
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 class="bg-white w-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>