upgraded

web/src/components/Card.vue

@@ -0,0 +1,60 @@
+<template>
+    <div :class="cardClass">
+      <!-- Title -->
+      <div v-if="title" class="font-bold mb-2">{{ title }}</div>
+  
+      <!-- Child cards -->
+      <div :class="containerClass">
+        <slot></slot>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    props: {
+      title: {
+        type: String,
+        default: "",
+      },
+      isHorizontal: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    computed: {
+      cardClass() {
+        return [
+          "bg-gray-50",
+          "border",
+          "border-gray-300",
+          "text-gray-900",
+          "text-sm",
+          "rounded-lg",
+          "focus:ring-blue-500",
+          "focus:border-blue-500",
+          "block",
+          "w-full",
+          "p-2.5",
+          "dark:bg-gray-700",
+          "dark:border-gray-600",
+          "dark:placeholder-gray-400",
+          "dark:text-white",
+          "dark:focus:ring-blue-500",
+          "dark:focus:border-blue-500",
+        ];
+      },
+      containerClass() {
+        return {
+          flex: this.isHorizontal,
+          "flex-col": !this.isHorizontal,
+        };
+      },
+    },
+  };
+  </script>
+  
+  <style>
+  /* Optional: You can add more custom styling here if needed */
+  </style>
+  

web/src/components/ClipBoardTextInput.vue

@@ -1,12 +1,22 @@
 <template>
   <div class="flex items-center space-x-2">
+    <!-- Render the slider if useSlider is true -->
     <input
-      :value="value" 
+      v-if="!useSlider"
+      :value="inputValue"
       :type="inputType"
       :placeholder="placeholderText"
       @input="handleInput"
       @paste="handlePaste"
-      
+      class="flex-1 px-4 py-2 text-lg border border-gray-300 rounded-md focus:outline-none focus:ring focus:border-blue-500"
+    />
+    <input
+      v-else
+      type="range"
+      :value="parseInt(inputValue)"
+      :min="minSliderValue"
+      :max="maxSliderValue"
+      @input="handleSliderInput"
       class="flex-1 px-4 py-2 text-lg border border-gray-300 rounded-md focus:outline-none focus:ring focus:border-blue-500"
     />
     <button
@@ -33,6 +43,7 @@
       :accept="fileAccept"
       @change="handleFileInputChange"
     />
+    
   </div>
 </template>
 
@@ -74,6 +85,10 @@ export default {
     this.inputValue = this.value;
   },
   methods: {
+    handleSliderInput(event) {
+      this.inputValue = event.target.value;
+      this.$emit("input", event.target.value);
+    },
     getPlaceholderText() {
       switch (this.inputType) {
         case "text":