commit

.gitignore

@@ -6,6 +6,9 @@
 .cache
 dist
 
+# Continue
+.continue
+
 # Node dependencies
 node_modules
 

app/assets/global.css

@@ -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";
 }

app/components/main_header.vue

@@ -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>
+
+

app/composables/set_colors.ts

@@ -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")
+  }
+])

app/pages/index.vue

@@ -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>
 
+            <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>

package.json

@@ -20,5 +20,8 @@
     "tailwindcss": "^4.1.18",
     "vue": "^3.5.26",
     "vue-router": "^4.6.4"
+  },
+  "devDependencies": {
+    "@iconify-json/lucide": "^1.2.84"
   }
 }

pnpm-lock.yaml

@@ -38,6 +38,10 @@ importers:
       vue-router:
         specifier: ^4.6.4
         version: 4.6.4(vue@3.5.26(typescript@5.9.3))
+    devDependencies:
+      '@iconify-json/lucide':
+        specifier: ^1.2.84
+        version: 1.2.84
 
 packages:
 
@@ -536,6 +540,9 @@ packages:
   '@floating-ui/vue@1.1.9':
     resolution: {integrity: sha512-BfNqNW6KA83Nexspgb9DZuz578R7HT8MZw1CfK9I6Ah4QReNWEJsXWHN+SdmOVLNGmTPDi+fDT535Df5PzMLbQ==}
 
+  '@iconify-json/lucide@1.2.84':
+    resolution: {integrity: sha512-m45MY1aW2swSK6Neb3J2qdZ+BxZ1VTdN7UeoXENwyMACG9bqGHWYJYxWoFzwoSnCfYLyKWTcBhesBgMd5IrUzQ==}
+
   '@iconify/collections@1.0.638':
     resolution: {integrity: sha512-QP163IfZcCxwEghlKGzVZzYS2VZtdBkyc16LbqQ5s92VgL5oZ/9iQKBwLAPZihJxQb2gWtFQir5Fp25Rfs9YFw==}
 
@@ -4806,6 +4813,10 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@iconify-json/lucide@1.2.84':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify/collections@1.0.638':
     dependencies:
       '@iconify/types': 2.0.0