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

41
app/components/backup-restore.vue
View File

@@ -1,3 +1,26 @@
<template>
<h2 class="title"> Backup & restore </h2>
<section class="docker-web-section">
<Terminal :terminal-content="terminalContent" />
<div class="flex flex-col items-center md:w-3/4 lg:w-1/2 h-20 relative rounded-b-xl transition-all">
<div class="flex transition-all justify-center duration-1000" :class="startApps">
<SvgGitea :class="penpotClass" class="app--backup" />
<SvgDrone :class="giteaClass" class="app--backup hidden md:block" />
<SvgPlausible :class="plausibleClass" class="app--backup" />
</div>
<div :class="endApps">
<div class="app" :class="folderClass">
<SvgFolder class="text-yellow-400" />
<div class="-mt-7 text-sm text-center"> tar.gz </div>
</div>
<SvgStorj class="hidden" :class="storjClass" />
</div>
<div class="flex mt-10 w-14 absolute" :class="progressBarClass"> <span
class="h-2 w-full absolute bg-black rounded-full opacity-10" /> <span
class="h-2 absolute rounded-full bg-green-400 transition-all duration-1000" :class="progressClass" /> </div>
</div>
</section>
</template>
<script>
export default {
data: () => ({
@@ -134,3 +157,21 @@ export default {
}
}
</script>
<style>
code {
display: block;
/* pour gérer le scroll */
overflow-x: auto;
/* scroll horizontal si nécessaire */
scrollbar-width: none;
/* Firefox */
-ms-overflow-style: none;
/* IE et Edge */
}
code::-webkit-scrollbar {
display: none;
/* Chrome, Safari */
}
</style>

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>

20
app/components/hero-buttons.vue
View File

@@ -2,7 +2,7 @@
const isClicked = ref(false)
const copyToClipBoard = () => {
navigator.clipboard
.writeText('curl -sL get.docker-web.com | sudo bash')
.writeText('curl -sL dockerweb.valere.dev | sudo bash')
.then(() => {
isClicked.value = true
setTimeout(() => {
@@ -14,22 +14,14 @@ const copyToClipBoard = () => {
<template>
<section class="py-4 sm:flex justify-center items-center">
<a
href="https://github.com/docker-web/docker-web"
target="_blank"
class="py-4 px-6 h-14 leading-6 flex justify-center bg-indigo-600 text-white text-lg capitalize font-semibold mb-4 sm:mb-0 rounded-xl shadow-md hover:bg-indigo-500 focus:outline-none focus:ring-4 hover:ring-indigo-200 focus:ring-indigo-300 focus:ring-opacity-100 transition-all"
>
<a href="https://github.com/docker-web/docker-web" target="_blank"
class="py-4 px-6 h-14 leading-6 flex justify-center bg-indigo-600 text-white text-lg capitalize font-semibold mb-4 sm:mb-0 rounded-xl shadow-md hover:bg-indigo-500 focus:outline-none focus:ring-4 hover:ring-indigo-200 focus:ring-indigo-300 focus:ring-opacity-100 transition-all">
get started
</a>
<div
class="font-mono bg-neutral-900 text-neutral-50 rounded-xl flex justify-between items-center pl-3 pr-4 py-4 sm:ml-4 border border-transparent text-base shadow-primary-700 relative"
>
<span class="select-all"> curl -L get.docker-web.com | sudo bash </span>
<SvgClipboard
class="ml-3 cursor-pointer"
:class="{ 'animate-ping': isClicked }"
@click="copyToClipBoard"
/>
class="font-mono bg-neutral-900 text-neutral-50 rounded-xl flex justify-between items-center pl-3 pr-4 py-4 sm:ml-4 border border-transparent text-base shadow-primary-700 relative">
<span class="select-all"> curl -L dockerweb.valere.dev | sudo bash </span>
<SvgClipboard class="ml-3 cursor-pointer" :class="{ 'animate-ping': isClicked }" @click="copyToClipBoard" />
</div>
</section>
</template>

2
app/components/hero-title.vue
View File

@@ -1,6 +1,6 @@
<template>
<section>
<div class="flex justify-center -ml-24 animate-slide">
<div class="flex justify-center -ml-24 animate-slide h-52">
<div class="py-4 mr-14 animate-fadeout opacity-0">
<div class="bg-gray-400 h-px w-16 my-16 block" />
<div class="bg-gray-400 h-px w-16 my-16 translate-x-3 block" />

17
app/components/scroll-down-button.vue Normal file
View File

@@ -0,0 +1,17 @@
<template>
<section class="py-4 sm:flex justify-center items-center">
<button @click="scrollDown"
class="p-6 h-14 leading-3 flex justify-center bg-green-500 text-white text-lg capitalize font-semibold mb-4 sm:mb-0 rounded-full shadow-md hover:bg-green-400 focus:outline-none focus:ring-4 hover:ring-indigo-200 focus:ring-indigo-300 focus:ring-opacity-100 transition-all">
↓
</button>
</section>
</template>
<script setup>
function scrollDown() {
window.scrollBy({
top: window.innerHeight, // une hauteur d’écran
behavior: 'smooth' // animation fluide
})
}
</script>

42
app/components/svg/docker-web.vue
View File

@@ -1,31 +1,21 @@
<template>
<svg width="111.83958mm" height="111.83958mm" viewBox="0 0 111.83957 111.83957" version="1.1" id="svg1"
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)" sodipodi:docname="logo.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" transform="translate(-49.080209,-92.580211)">
<g id="g2" transform="matrix(5.5108247,0,0,5.5108247,118.69148,125.59682)" style="display:inline;fill:#ffffff">
<g style="display:inline;fill:#0062f8;fill-opacity:0.446602"
transform="matrix(0.61412638,0,0,0.61412638,-46.767414,1.3479387)" id="g1236-3-3-2">
<circle
style="display:inline;fill:#0062f8;fill-opacity:0.446602;stroke:none;stroke-width:302.362;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:161.197;stroke-opacity:1"
id="path1180-2-6-6-9" cx="72.107216" cy="4.5725055" r="9.6730785" />
<circle
style="display:inline;fill:#0062f8;fill-opacity:0.446602;stroke:none;stroke-width:428.643;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:161.197;stroke-opacity:1"
id="path1180-9-7-7-1" cx="72.107216" cy="4.5725055" r="13.713011" />
<circle
style="display:inline;fill:#0062f8;fill-opacity:0.446602;stroke:none;stroke-width:516.481;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:161.197;stroke-opacity:1"
id="path1180-1-5-5-27" cx="72.107216" cy="4.5725055" r="16.523087" />
</g>
<path inkscape:connector-curvature="0" style="display:inline;fill:#ffffff;stroke-width:0.433462"
id="path881-7-5-5-0"
d="m 3.9199448,3.7220977 c -0.0282,-0.02295 -0.29172,-0.221932 -0.84699,-0.221932 -0.13871,0 -0.28565,0.013 -0.4378,0.0377 -0.10749,-0.738187 -0.71564,-1.097959 -0.74382,-1.113996 l -0.14954,-0.08669 -0.0984,0.142176 c -0.12298,0.190471 -0.21255,0.400537 -0.26484,0.621149 -0.0997,0.421326 -0.039,0.816643 0.17468,1.155612 -0.25834,0.143476 -0.67013003,0.181186 -0.75596003,0.182051 H -6.0544552 c -0.17908,7.09e-4 -0.32415,0.145584 -0.3251,0.324667 0.12299,0.569402 0.12059,0.553034 0.31955,1.075789 0.23623,0.619849 0.58734,1.076285 1.04421,1.356736 0.51191,0.31426 1.34546,0.494146 2.28694,0.494146 0.4404,0 0.87993,-0.03991 1.27004,-0.115302 0.61422,-0.118332 1.17252,-0.321625 1.65843,-0.602942 0.42468,-0.246154 0.80673,-0.559405 1.13134,-0.927608 0.54269,-0.615519 0.68368,-0.724924 1.08704,-1.222306 0.0325,0.0015 0.0641,0.002 0.0958,0.002 0.59428,0 0.96012,-0.238404 1.16168,-0.437793 0.2189,-0.216731 0.29692,-0.432597 0.30516,-0.456436 l 0.0421,-0.124838 z"
sodipodi:nodetypes="cscccccccccccsccccscccc" />
<svg class="MuiBox-root css-15p9n5u" fill="#ffffff" data-darkreader-inline-fill="" version="1.1"
viewBox="0 0 195 194.57" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<g transform="translate(16.659 8.322)">
<g transform="matrix(5.8877 0 0 5.8877 -343.49 62.039)" fill="#0062f8" fill-opacity=".4466">
<circle cx="72.107" cy="4.5725" r="9.6731" />
<circle cx="72.107" cy="4.5725" r="13.713" />
<circle cx="72.107" cy="4.5725" r="16.523" />
</g>
<g fill="#fff">
<path
style="font-weight:bold;font-size:3.06667px;font-family:Comfortaa;-inkscape-font-specification:'Comfortaa Bold';letter-spacing:0px;display:inline;fill:#ffffff;stroke-width:1.51181"
d="m -6.3933452,1.1512817 h 0.55254 l 0.38633,1.624676 0.38333,-1.624676 h 0.55553 l 0.38334,1.624676 0.38633,-1.624676 h 0.54804 l -0.52708,2.235614 h -0.66484 l -0.4058,-1.699546 -0.4013,1.699546 h -0.66485 z m 5.11361,1.392579 v 0.152735 h -1.25332 q 0.0195,0.188672 0.13626,0.283008 0.1168,0.09434 0.32643,0.09434 0.16921,0 0.3459,-0.04941 0.17819,-0.05091 0.36537,-0.152735 v 0.413282 q -0.19017,0.07187 -0.38034,0.107813 -0.19017,0.03743 -0.38034,0.03743 -0.45521,0 -0.70827,-0.2306 -0.25156,-0.232096 -0.25156,-0.64987 0,-0.410287 0.24707,-0.645378 0.24857,-0.235092 0.68281,-0.235092 0.39532,0 0.6319,0.238086 0.23809,0.238087 0.23809,0.636394 z m -0.55104,-0.17819 q 0,-0.152735 -0.0898,-0.245573 -0.0883,-0.09434 -0.23209,-0.09434 -0.15573,0 -0.25306,0.08835 -0.0973,0.08685 -0.12129,0.251563 z m 1.84928,0.675326 q 0.17221,0 0.26205,-0.125781 0.0913,-0.125782 0.0913,-0.365365 0,-0.239584 -0.0913,-0.365365 -0.0898,-0.125782 -0.26205,-0.125782 -0.1722,0 -0.26503,0.127279 -0.0914,0.125782 -0.0914,0.363868 0,0.238086 0.0914,0.365365 0.0928,0.125781 0.26503,0.125781 z m -0.35638,-1.085613 q 0.11081,-0.146745 0.24558,-0.215625 0.13476,-0.07038 0.30996,-0.07038 0.30996,0 0.50910997,0.24707 0.19916,0.245574 0.19916,0.6334 0,0.387826 -0.19916,0.634896 -0.19914997,0.245573 -0.50910997,0.245573 -0.1752,0 -0.30996,-0.06888 -0.13477,-0.07038 -0.24558,-0.217122 v 0.242578 h -0.53606 v -2.32995 h 0.53606 z"
id="text2-6-9" aria-label="Web" />
d="m81.055 55.167a26.753 26.753 0 0 0-26.758 26.758 26.753 26.753 0 0 0 0.35578 4.3254h52.804a26.753 26.753 0 0 0 0.35578-4.3254 26.753 26.753 0 0 0-26.758-26.758z"
stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="2.3" stroke-width="355.55"
style="paint-order:fill markers stroke" />
<path
d="m142.46 84.801c-0.27036-0.22002-2.7968-2.1277-8.1202-2.1277-1.3298 0-2.7386 0.12463-4.1972 0.36143-1.0305-7.0771-6.8609-10.526-7.1311-10.68l-1.4337-0.8311-0.94337 1.3631c-1.179 1.8261-2.0377 3.84-2.539 5.955-0.95583 4.0393-0.3739 7.8292 1.6747 11.079-2.4767 1.3755-6.4246 1.737-7.2475 1.7453h-65.688c-1.7169 0.0068-3.1077 1.3957-3.1168 3.1126 1.1791 5.4589 1.1561 5.302 3.0636 10.314 2.2648 5.9426 5.6309 10.318 10.011 13.007 4.9077 3.0128 12.899 4.7374 21.925 4.7374 4.2222 0 8.436-0.38262 12.176-1.1054 5.8886-1.1345 11.241-3.0834 15.9-5.7805 4.0714-2.3599 7.7342-5.3631 10.846-8.8931 5.2028-5.901 6.5545-6.9499 10.422-11.718 0.31158 0.01438 0.61453 0.01917 0.91844 0.01917 5.6974 0 9.2048-2.2856 11.137-4.1972 2.0986-2.0778 2.8466-4.1473 2.9256-4.3759l0.40362-1.1968z"
stroke-width="4.1556" />
</g>
</g>
</svg>

17
app/pages/index.vue
View File

@@ -2,19 +2,16 @@
<div class="mx-6">
<header class="h-screen flex flex-col justify-center">
<nav class="fixed right-0 top-0 p-2 z-50">
<a
title="Go to docker-web GitHub repo"
href="https://github.com/docker-web/docker-web"
target="_blank"
>
<a title="Go to docker-web GitHub repo" href="https://github.com/docker-web/docker-web" target="_blank">
<SvgGithub class="bg-white rounded-full shadow-lg hover:scale-105" />
</a>
</nav>
<HeroTitle client:visible />
<HeroButtons client:visible />
<ScrollDownButton client:visible />
</header>
<main class="-mt-20">
<Demo />
<main class="">
<Demo class="mt-20" />
<Disclaimer />
<!-- <Create /> -->
<BackupRestore />
@@ -27,15 +24,19 @@
.docker-web-section {
@apply flex flex-col md:flex-row items-center justify-center mb-28;
}
.title {
@apply text-3xl text-center mb-10 uppercase text-transparent bg-clip-text bg-gradient-to-r from-violet-900 to-blue-500;
@apply text-3xl text-center mb-10 uppercase text-transparent bg-clip-text bg-gradient-to-r from-violet-900 to-blue-500;
}
.app {
@apply bg-black bg-opacity-10 w-20 h-20 p-4 flex-wrap cursor-pointer inline-block rounded-xl transition-all;
}
.app--demo {
@apply bg-black bg-opacity-10 w-20 h-20 p-4 flex-wrap cursor-pointer inline-block transition-all;
}
.app--backup {
@apply bg-black bg-opacity-10 w-20 h-20 p-4 flex-wrap cursor-pointer inline-block transition-all;
}