L-Nafaryus/elnafo
L-Nafaryus/elnafo
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

frontend: fancy animations

Browse Source
This commit is contained in:
L-Nafaryus 2024-04-01 23:48:18 +05:00
parent 76e6d5183f
commit 1470c9d6ad
Signed by: L-Nafaryus
GPG Key ID: 582F8B0866B294A1
6 changed files with 63 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
crates/frontend/index.html
View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elnafo Dev</title>
</head>
<body class="h-full bg-zinc-900 text-zinc-200 font-sans">
<body class="h-full bg-zinc-900 text-zinc-200 font-sans overflow-hidden">
<div id="app" class="flex flex-col h-full"></div>
<script type="module" src="src/main.ts"></script>
</body>

22
crates/frontend/src/assets/style.css
View File

@ -7,3 +7,25 @@
@apply text-green-500 hover:text-green-400;
}
}
@layer utilities {
.bg-roll::before {
background: linear-gradient(90deg, #fb0094, #0000ff, #fb0093);
background-size: 200%;
@apply absolute w-[100%] h-[100%] content-[''] animate-border-roll;
}
.bg-grid {
background:
linear-gradient(180deg, rgba(0, 0, 0, 0) 0px, rgba(113, 113, 122, 1) 0%,
rgba(113, 113, 122, 1) 2px, rgba(0, 0, 0, 0) 0px),
linear-gradient(90deg, rgba(0, 0, 0, 0) 0px, rgba(113, 113, 122, 1) 0%,
rgba(113, 113, 122, 1) 2px, rgba(0, 0, 0, 0) 0px);
background-size: 2em 4em, 6em 2em;
transform: perspective(300px) rotateX(30deg) scale(1);
z-index: -1;
@apply absolute w-[200%] -left-[50%] h-full;
}
}

19
crates/frontend/src/components/NavBar.vue
View File

@ -1,10 +1,13 @@
<template>
<nav class="flex justify-between items-center m-0 pl-3 pr-3 bg-zinc-800 border-b border-b-zinc-500">
<div class="items-center m-0 flex">
<slot name="left"></slot>
</div>
<div class="items-center m-0 flex">
<slot name="right"></slot>
</div>
</nav>
<div class="relative bg-roll h-12">
<nav
class="absolute w-full h-[calc(100%-1px)] flex justify-between items-center m-0 pl-3 pr-3 bg-gradient-to-t from-zinc-800 to-zinc-900">
<div class="items-center m-0 flex">
<slot name="left"></slot>
</div>
<div class="items-center m-0 flex">
<slot name="right"></slot>
</div>
</nav>
</div>
</template>

8
crates/frontend/src/views/Base.vue
View File

@ -87,11 +87,15 @@ async function user_logout() {
</template>
</NavBar>
<main>
<main class="overflow-hidden">
<div>
<div class="bg-grid"></div>
</div>
<slot></slot>
</main>
</div>
<footer class="flex justify-between pb-2 pt-2 pl-5 pr-5 bg-zinc-800 border-t border-t-zinc-500">
<footer
class="flex justify-between pb-2 pt-2 pl-5 pr-5 bg-gradient-to-b from-zinc-800 to-zinc-900 border-t border-t-zinc-500">
<a href="/">Made with glove</a>
<a href="/api/v1">API</a>
</footer>

6
crates/frontend/src/views/user/Preferencies.vue
View File

@ -14,7 +14,7 @@ const preferenciesStore = usePreferenciesStore();
<div class="flex gap-4 mt-4 ml-auto mr-auto content ">
<Router-View />
<div>
<div class="border rounded border-zinc-500 flex-col w-64">
<div class="border rounded border-zinc-500 flex-col w-64 side-nav">
<h1 class="pl-5 pr-5 pt-2 pb-2">User Preferencies</h1>
<RouterLink :to="{ name: 'Preferencies-Profile' }"
:class="{ 'bg-zinc-600': preferenciesStore.current_tab === 0 }"
@ -35,4 +35,8 @@ const preferenciesStore = usePreferenciesStore();
width: 1280px;
max-width: calc(100% - 64px);
}
.side-nav {
transform: perspective(300px) rotateY(-8deg) scaleY(1.05);
}
</style>

19
crates/frontend/tailwind.config.js
View File

@ -2,7 +2,24 @@
export default {
content: ['./index.html', './src/**/*.{vue,ts,js}'],
theme: {
extend: {},
extend: {
keyframes: {
"border-spin": {
"100%": {
transform: "rotate(-360deg)",
}
},
"border-roll": {
"100%": {
"background-position": "200% 0",
}
}
},
animation: {
"border-spin": "border-spin 7s linear infinite",
"border-roll": "border-roll 5s linear infinite"
}
},
},
plugins: [],
}