119 lines
2.8 KiB
Vue
119 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
|
|
const video = ref(0);
|
|
const url = ref("");
|
|
const in_url = ref("");
|
|
|
|
function get_yt_vid() {
|
|
url.value = in_url.value
|
|
video.value = 1
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<MainHeader/>
|
|
<div class="justify-center flex flex-col mt-4 mb-4 w-full">
|
|
<h1 class="inter font-bold text-center mt-3 mb-3 text-white white-glow max-sm:text-5xl sm:text-6xl md:text-7xl xl:text-8xl rgb-text">Youtube to MP3</h1>
|
|
|
|
<div class="w-full flex self-center justify-center">
|
|
<UInput
|
|
class="self-center geist-mono mt-3 mb-3 max-md:w-3/4 w-2/3 2xl:w-1/2"
|
|
:ui="{ base: 'rounded-2xl h-15 text-toned', trailing: 'p-0' }"
|
|
placeholder="Search for a YouTube video..."
|
|
v-model="in_url" >
|
|
<template #trailing>
|
|
<UButton class="self-end rounded-r-2xl h-15 px-3" icon="lucide:search" @click="get_yt_vid" />
|
|
</template>
|
|
</UInput>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="w-full max-w-md mx-auto mt-8 p-6 light:bg-zinc-50 dark:bg-zinc-950 rounded-xl" v-if="video">
|
|
|
|
<div class="video-container">
|
|
<LazyYoutube :src="url" />
|
|
</div>
|
|
|
|
<UFormField id="videoUrl" class="w-full mt-3 mb-4" label="Video URL:" >
|
|
<UInput type="text" :value="url" class="w-full" />
|
|
</UFormField>
|
|
<UFormField id="outputFile" class="w-full mt-4 mb-3" label="Output File Name:">
|
|
<UInput type="text" value="my_audio.mp3" class="w-full" />
|
|
</UFormField>
|
|
<div class="text-center">
|
|
<UButton class="mt-4 rounded-md px-6 py-3 text-white">Convert to MP3</UButton>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
<style>
|
|
|
|
.rgb-text {
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--color-red-500),
|
|
var(--color-yellow-500),
|
|
var(--color-lime-500),
|
|
var(--color-cyan-500),
|
|
var(--color-blue-500),
|
|
var(--color-pink-500),
|
|
var(--color-red-500)
|
|
);
|
|
background-size: 400% 100%;
|
|
animation: rgb 10s linear infinite;
|
|
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
|
|
/* optional glow */
|
|
/*filter: drop-shadow(0 0 10px rgba(255,255,255,.4));*/
|
|
}
|
|
|
|
@keyframes rgb {
|
|
to {
|
|
background-position: 400% 0;
|
|
}
|
|
}
|
|
|
|
.white-glow {
|
|
filter: drop-shadow(0 0 10px rgba(255,255,255,.2));
|
|
}
|
|
|
|
/*.rgb-input {
|
|
position: relative;
|
|
padding: 2px;
|
|
background: #111;
|
|
color: white;
|
|
border: none;
|
|
outline: none;
|
|
z-index: 0;
|
|
@apply: rounded-lg;
|
|
}
|
|
|
|
.rgb-input::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 2px;
|
|
border-radius: inherit;
|
|
background: linear-gradient(
|
|
90deg,
|
|
red,
|
|
yellow,
|
|
lime,
|
|
cyan,
|
|
blue,
|
|
magenta,
|
|
red
|
|
);
|
|
background-size: 400%;
|
|
animation: rgb 8s linear infinite;
|
|
filter: blur(2px);
|
|
z-index: -1;
|
|
@apply: rounded-lg;
|
|
}*/
|
|
|
|
</style> |