i want the bar showing on all campaings, with 1-100% in the middle, and hoover effect, so it opens a small pop up with data on how many percent of the leads in the list is contacted, is this possible? do i need to fix some data in my input for this? - Follow Up Deployment

index.html

@@ -170,7 +170,17 @@
                 <div class="card rounded-lg p-6 mb-6">
                     <div class="flex justify-between items-center mb-4">
                         <h3 class="text-xl font-semibold">Kampagne 1</h3>
-                        <span class="px-3 py-1 rounded-full bg-blue-900/30 text-blue-400 text-sm">Active</span>
+                        <div class="flex items-center space-x-4">
+                            <div class="relative w-32">
+                                <div class="h-2 bg-gray-700 rounded-full">
+                                    <div class="h-2 bg-blue-500 rounded-full" style="width: 75%"></div>
+                                </div>
+                                <div class="absolute -top-8 left-0 px-2 py-1 bg-gray-800 rounded text-xs opacity-0 hovered-element:opacity-100 transition-opacity">
+                                    Contacted: 450/600 (75%)
+                                </div>
+                            </div>
+                            <span class="px-3 py-1 rounded-full bg-blue-900/30 text-blue-400 text-sm">Active</span>
+                        </div>
                     </div>
                     
                     <div class="overflow-x-auto">
@@ -227,7 +237,17 @@
                 <div class="card rounded-lg p-6">
                     <div class="flex justify-between items-center mb-4">
                         <h3 class="text-xl font-semibold">Kampagne 2</h3>
-                        <span class="px-3 py-1 rounded-full bg-green-900/30 text-green-400 text-sm">Completed</span>
+                        <div class="flex items-center space-x-4">
+                            <div class="relative w-32">
+                                <div class="h-2 bg-gray-700 rounded-full">
+                                    <div class="h-2 bg-green-500 rounded-full" style="width: 100%"></div>
+                                </div>
+                                <div class="absolute -top-8 left-0 px-2 py-1 bg-gray-800 rounded text-xs opacity-0 hovered-element:opacity-100 transition-opacity">
+                                    Contacted: 600/600 (100%)
+                                </div>
+                            </div>
+                            <span class="px-3 py-1 rounded-full bg-green-900/30 text-green-400 text-sm">Completed</span>
+                        </div>
                     </div>
                     
                     <div class="overflow-x-auto">

prompts.txt

@@ -26,3 +26,6 @@ A,Google,Emnelinje 1,100,12%,6%,5,3,120000,50000
 B,Google,Emnelinje 2,100,15%,8%,6,4,150000,70000
 A,Website,Emnelinje 1,50,8%,4%,2,1,50000,20000
 B,Website,Emnelinje 2,50,10%,5%,3,2,60000,25000
+
+create a % bar showing how far the campaign is, when hovering over it, it should show number of contacted leads and how many are yet to be contacted
+i want the bar showing on all campaings, with 1-100% in the middle, and hoover effect, so it opens a small pop up with data on how many percent of the leads in the list is contacted, is this possible? do i need to fix some data in my input for this?