better ui

app/pages/index.vue

@@ -3,22 +3,39 @@
   const video = ref(0);
   const url = ref("");
   const in_url = ref("");
+  const output_name = ref("");
 
   function get_yt_vid() {
     url.value = in_url.value
-    video.value = 1
+    if (in_url.value !== "") video.value = 1
+    else video.value = 0
   }
 
+  function start_conversion() {
+    return fetch("/convert", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          url: url.value,
+          name: output_name.value,
+        })
+      }).then(r => {
+        if(r.status == 401) navigateTo("/login")
+      })
+    }
+
 </script>
 
 <template>
     <MainHeader/>
-    <div class="justify-center flex flex-col mt-4 mb-4 w-full">
+    <div class="justify-center flex flex-col max-sm:mt-5 max-md:mt-7 max-lg:mt-10 lg:mt-15 mb-4 w-full">
         <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 geist-mono mt-3 mb-3 max-md:w-3/4 w-2/3 2xl:w-1/2" 
+            class="self-center geist-mono mt-5 mb-5 max-sm:6/7 max-md:w-4/5 max-lg:w-4/5 lg:w-2/3 max-w-300" 
             :ui="{ base: 'rounded-2xl h-15 text-toned', trailing: 'p-0' }"
             placeholder="Search for a YouTube video..."
             v-model="in_url" >
@@ -35,14 +52,14 @@
           <LazyYoutube :src="url" />
       </div>
 
-      <UFormField id="videoUrl" class="w-full mt-3 mb-4" label="Video URL:" >
+      <!---<UFormField id="videoUrl" class="w-full mt-3 mb-4" label="Video URL:" >
           <UInput type="text" :value="url" class="w-full" />
-      </UFormField>
+      </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" />
+          <UInput type="text" v-model="output_name" 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" loading-auto @click="start_conversion()">Convert to MP3</UButton>
       </div>
     </div>
 
@@ -63,7 +80,7 @@
     var(--color-red-500)
   );
   background-size: 400% 100%;
-  animation: rgb 10s linear infinite;
+  animation: rgb 15s linear infinite;
 
   -webkit-background-clip: text;
   background-clip: text;