commit

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>
 
-</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>