suricata/yt2mp3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

commit

Browse Source
This commit is contained in:
suricata
2026-01-11 17:42:29 +00:00
parent b7f9c29d6b
commit 85647d2836
7 changed files with 210 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
app/assets/global.css
View File

@@ -2,10 +2,33 @@
@import "@nuxt/ui";
:root {
--font-sans: "Space Grotesk", sans-serif;
/*--font-sans: "Space Grotesk", sans-serif;*/
--font-sans : "Geist";
/* Main UI color, for now*/
--ui-primary: var(--color-blue-600);
--ui-bg-accented: oklch(54.6% 0.245 262.881 / 20%);
--ui-bg-elevated: oklch(54.6% 0.245 262.881 / 40%);
}
.geist {
font-family: "Geist";
}
.geist-mono {
font-family: "Geist Mono";
}
.light {
--ui-bg: var(--color-neutral-200);
}
.dark {
--ui-bg: var(--color-black);
}
.inter {
font-family: "Inter";
}

32
app/components/main_header.vue Normal file
View File

@@ -0,0 +1,32 @@
<script setup lang="ts">
const props = defineProps({
ui_colors: {
type: Array,
required: true
},
title: {
type: String,
required: false,
default: "Home"
}
})
</script>
<template>
<UHeader :toggle="false" class="bg-zinc-950 mb-4">
<template #title>
<h2 class="font-bold">{{props.title}}</h2>
</template>
<template #right>
<UColorModeButton />
<UDropdownMenu :items="props.ui_colors">
<UButton icon="lucide:palette" variant="ghost" color="neutral" />
</UDropdownMenu>
</template>
</UHeader>
</template>

27
app/composables/set_colors.ts Normal file
View File

@@ -0,0 +1,27 @@
export function set_color(color: string) {
}
export const ui_colors_dropdown = ref([
{
label: "Blue",
class: "",
onselect: () => set_color("blue")
},
{
label: "Red",
onselect: () => set_color("red")
},
{
label: "Green",
onselect: () => set_color("green")
},
{
label: "Pink",
onselect: () => set_color("pink")
},
{
label: "Purple",
onselect: () => set_color("purple")
}
])

149
app/pages/index.vue
View File

@@ -1,47 +1,118 @@
<script setup lang="ts">
function set_color(color: string) {
}
const ui_colors_dropdown = ref([
{
label: "Blue",
class: "",
onselect: () => set_color("blue")
},
{
label: "Red",
onselect: () => set_color("red")
},
{
label: "Green",
onselect: () => set_color("green")
},
{
label: "Pink",
onselect: () => set_color("pink")
},
{
label: "Purple",
onselect: () => set_color("purple")
}
])
</script>
<template>
<UHeader title="">
<template #right>
<UColorModeButton />
<UDropdownMenu :items="ui_colors_dropdown">
<UButton icon="lucide:palette" variant="ghost" color="neutral" />
</UDropdownMenu>
</template>
</UHeader>
<div class="justify-center flex flex-col">
<h1 class="inter text-8xl font-bold text-center">Youtube to MP3</h1>
<UInput class="self-center" size="xl"></UInput>
<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>
</template>
<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>