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 85647d2836
commit c3a861d849
6 changed files with 77 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/assets/global.css
View File

@@ -24,10 +24,20 @@
}
.light .pop {
--ui-bg: var(--color-zinc-50);
}
.dark {
--ui-bg: var(--color-black);
}
/* aqui é descendência -- aplica a todos os subelementos de .dark que tenha .pop */
.dark .pop {
--ui-bg: var(--color-zinc-900);
}
.inter {
font-family: "Inter";

2
app/components/main_header.vue
View File

@@ -16,7 +16,7 @@ const props = defineProps({
</script>
<template>
<UHeader :toggle="false" class="bg-zinc-950 mb-4">
<UHeader :toggle="false" class="pop mb-4">
<template #title>
<h2 class="font-bold">{{props.title}}</h2>
</template>

19
app/pages/index.vue
View File

@@ -1,16 +1,17 @@
<script setup lang="ts">
const video = ref(1);
</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>
<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 w-1/3 geist-mono mt-3 mb-3"
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..." >
<template #trailing>
@@ -20,18 +21,10 @@
</div>
</div>
<div class="w-full max-w-md mx-auto mt-8 p-6 bg-zinc-950 rounded-xl">
<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">
<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>
<LazyYoutube src="https://www.youtube.com/watch?v=-B48W6H2YHE&list=RD-B48W6H2YHE&start_radio=1" />
</div>
<UFormField id="videoUrl" class="w-full mt-3 mb-4" label="Video URL:" >
@@ -41,7 +34,7 @@
<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>
<UButton class="mt-4 rounded-md px-6 py-3 text-white">Convert to MP3</UButton>
</div>
</div>

14
nuxt.config.ts
View File

@@ -3,9 +3,23 @@ import tailwindcss from "@tailwindcss/vite"
export default defineNuxtConfig({
compatibilityDate: '2025-07-15',
devtools: { enabled: true },
<<<<<<< HEAD
modules: [ "@nuxt/ui", "@nuxt/image", "@nuxt/fonts", "@nuxtjs/color-mode"],
=======
modules: [
"@nuxt/ui",
"@nuxt/image",
"@nuxt/fonts",
"@nuxtjs/color-mode",
"nuxt-lazytube"
],
>>>>>>> fd526e9 (commit)
css: [ "@/assets/global.css" ],
vite: {
plugins: [ tailwindcss() ]
}
<<<<<<< HEAD
})
=======
})
>>>>>>> fd526e9 (commit)

4
package.json
View File

@@ -17,6 +17,10 @@
"@nuxtjs/color-mode": "^4.0.0",
"@tailwindcss/vite": "^4.1.18",
"nuxt": "^4.2.2",
<<<<<<< HEAD
=======
"nuxt-lazytube": "0.2.5",
>>>>>>> fd526e9 (commit)
"tailwindcss": "^4.1.18",
"vue": "^3.5.26",
"vue-router": "^4.6.4"

30
pnpm-lock.yaml generated
View File

@@ -29,6 +29,12 @@ importers:
nuxt:
specifier: ^4.2.2
version: 4.2.2(@parcel/watcher@2.5.1)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(ioredis@5.9.1)(lightningcss@1.30.2)(magicast@0.5.1)(rollup@4.55.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.1(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2))(yaml@2.8.2)
<<<<<<< HEAD
=======
nuxt-lazytube:
specifier: 0.2.5
version: 0.2.5
>>>>>>> fd526e9 (commit)
tailwindcss:
specifier: ^4.1.18
version: 4.1.18
@@ -3229,6 +3235,12 @@ packages:
nth-check@2.1.1:
resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
<<<<<<< HEAD
=======
nuxt-lazytube@0.2.5:
resolution: {integrity: sha512-SaAMosZh0otF/zOfeng0lzUd5M10gkC2rwppGDISjno8z1C+mEymwjE8SVbnnsipAxkTy9Qm8umd+GuhFNo/hw==}
>>>>>>> fd526e9 (commit)
nuxt@4.2.2:
resolution: {integrity: sha512-n6oYFikgLEb70J4+K19jAzfx4exZcRSRX7yZn09P5qlf2Z59VNOBqNmaZO5ObzvyGUZ308SZfL629/Q2v2FVjw==}
engines: {node: ^20.19.0 || >=22.12.0}
@@ -4316,6 +4328,12 @@ packages:
webpack-virtual-modules@0.6.2:
resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
<<<<<<< HEAD
=======
whatwg-fetch@3.6.20:
resolution: {integrity: sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg==}
>>>>>>> fd526e9 (commit)
whatwg-url@5.0.0:
resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
@@ -7839,6 +7857,13 @@ snapshots:
dependencies:
boolbase: 1.0.0
<<<<<<< HEAD
=======
nuxt-lazytube@0.2.5:
dependencies:
whatwg-fetch: 3.6.20
>>>>>>> fd526e9 (commit)
nuxt@4.2.2(@parcel/watcher@2.5.1)(@vue/compiler-sfc@3.5.26)(cac@6.7.14)(db0@0.3.4)(ioredis@5.9.1)(lightningcss@1.30.2)(magicast@0.5.1)(rollup@4.55.1)(terser@5.44.1)(typescript@5.9.3)(vite@7.3.1(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1)(yaml@2.8.2))(yaml@2.8.2):
dependencies:
'@dxup/nuxt': 0.2.2(magicast@0.5.1)
@@ -9123,6 +9148,11 @@ snapshots:
webpack-virtual-modules@0.6.2: {}
<<<<<<< HEAD
=======
whatwg-fetch@3.6.20: {}
>>>>>>> fd526e9 (commit)
whatwg-url@5.0.0:
dependencies:
tr46: 0.0.3