118 lines
3.0 KiB
Vue
118 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<MainHeader :ui_colors="ui_colors_dropdown"/>
|
|
<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 text-5xl md:text-7xl rgb-text">Youtube to MP3</h1>
|
|
|
|
<div class="w-full flex self-center justify-center">
|
|
<UInput
|
|
class="self-center w-1/3 geist-mono mt-3 mb-3"
|
|
:ui="{ base: 'rounded-2xl h-15 text-toned', trailing: 'p-0' }"
|
|
placeholder="Search for a YouTube video..." >
|
|
<template #trailing>
|
|
<UButton class="self-end rounded-r-2xl h-15 px-3" icon="lucide:search" />
|
|
</template>
|
|
</UInput>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full max-w-md mx-auto mt-8 p-6 bg-zinc-950 rounded-xl">
|
|
|
|
<div class="video-container">
|
|
<iframe
|
|
class="w-full"
|
|
height="315"
|
|
src="https://www.youtube.com/embed/vkNHMqQqCtk?si=Jnd3Vx17iDKw-v3f"
|
|
title="YouTube video player" frameborder="0"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
referrerpolicy="strict-origin-when-cross-origin"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
|
|
<UFormField id="videoUrl" class="w-full mt-3 mb-4" label="Video URL:" >
|
|
<UInput type="text" value="https://www.youtube.com/watch?v=dQw4w9WgXcQ" 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> |