CrunchyDL/pages/settings.vue
2024-05-01 01:45:45 +02:00

38 lines
1010 B
Vue

<template>
<div class="h-screen bg-[#111111] flex flex-col p-5 text-white" style="-webkit-app-region: drag">
<div class="flex flex-row items-center justify-center">
<div class="text-2xl">Settings</div>
</div>
<div class="flex flex-row mt-2" style="-webkit-app-region: no-drag">
<button
v-for="(option, index) in options"
@click="activeIndex = index"
class="w-full flex items-center justify-center py-2 border-b-2 transition-all"
:class="activeIndex === index ? 'border-[#ce6104]' : 'border-[#ce620428]'"
>
{{ option }}
</button>
</div>
</div>
</template>
<script lang="ts" setup>
const options = ref(['Main', 'Output', 'Naming', 'Crunchyroll', 'About'])
const activeIndex = ref(0)
</script>
<style>
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
body {
animation: fadein 0.5s;
}
</style>