Upload folder using huggingface_hub

index.html

@@ -183,9 +183,17 @@
     }
 
     @keyframes pulse-green {
-      0% { color: inherit; }
-      50% { color: #16a34a; }
-      100% { color: inherit; }
+      0% {
+        color: inherit;
+      }
+
+      50% {
+        color: #16a34a;
+      }
+
+      100% {
+        color: inherit;
+      }
     }
 
     /* Simulator Styles */
@@ -246,8 +254,15 @@
     }
 
     @keyframes float {
-      0%, 100% { transform: translateY(0); }
-      50% { transform: translateY(-10px); }
+
+      0%,
+      100% {
+        transform: translateY(0);
+      }
+
+      50% {
+        transform: translateY(-10px);
+      }
     }
 
     .pulse-dot {
@@ -255,8 +270,17 @@
     }
 
     @keyframes pulse {
-      0%, 100% { transform: scale(1); opacity: 1; }
-      50% { transform: scale(1.5); opacity: 0.5; }
+
+      0%,
+      100% {
+        transform: scale(1);
+        opacity: 1;
+      }
+
+      50% {
+        transform: scale(1.5);
+        opacity: 0.5;
+      }
     }
 
     .chart-bar {
@@ -268,14 +292,32 @@
     }
 
     @keyframes fadeIn {
-      from { opacity: 0; transform: translateY(20px); }
-      to { opacity: 1; transform: translateY(0); }
+      from {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    .stagger-1 {
+      animation-delay: 0.1s;
+    }
+
+    .stagger-2 {
+      animation-delay: 0.2s;
+    }
+
+    .stagger-3 {
+      animation-delay: 0.3s;
     }
 
-    .stagger-1 { animation-delay: 0.1s; }
-    .stagger-2 { animation-delay: 0.2s; }
-    .stagger-3 { animation-delay: 0.3s; }
-    .stagger-4 { animation-delay: 0.4s; }
+    .stagger-4 {
+      animation-delay: 0.4s;
+    }
   </style>
 </head>
 
@@ -324,7 +366,7 @@
       <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
 
         <!-- STANDARD CARD -->
-        <div class="price-card bg-white rounded-2xl p-8 cursor-pointer group" onclick="selectPackage('Standard', 2500)">
+        <div class="price-card bg-white rounded-2xl p-8 cursor-pointer group" onclick="selectPackage('Standard', 2500, this)">
           <div class="check-icon">✓</div>
           <div class="mb-6">
             <h3 class="text-2xl font-bold text-gray-900">Standard</h3>
@@ -363,7 +405,7 @@
         <!-- GOLD CARD -->
         <div
           class="price-card bg-white rounded-2xl p-8 cursor-pointer relative border-blue-600 ring-1 ring-blue-600 group"
-          onclick="selectPackage('Gold', 3500)">
+          onclick="selectPackage('Gold', 3500, this)">
           <div class="absolute -top-4 left-1/2 -translate-x-1/2">
             <span class="bg-blue-600 text-white px-5 py-1.5 rounded-full text-sm font-bold tracking-wide shadow-lg shadow-blue-600/30">Consigliato</span>
           </div>
@@ -409,7 +451,7 @@
         </div>
 
         <!-- PLATINUM CARD -->
-        <div class="price-card bg-white rounded-2xl p-8 cursor-pointer group" onclick="selectPackage('Platinum', 5000)">
+        <div class="price-card bg-white rounded-2xl p-8 cursor-pointer group" onclick="selectPackage('Platinum', 5000, this)">
           <div class="check-icon">✓</div>
           <div class="mb-6">
             <h3 class="text-2xl font-bold text-gray-900">Platinum</h3>
@@ -632,7 +674,9 @@
           <div class="stat-card p-6">
             <h4 class="text-white font-semibold mb-6 flex items-center gap-2">
               <svg class="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z">
+                </path>
               </svg>
               Timeline Crescita Mensile
             </h4>
@@ -645,7 +689,9 @@
           <div class="stat-card p-6">
             <h4 class="text-white font-semibold mb-6 flex items-center gap-2">
               <svg class="w-5 h-5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"></path>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z">
+                </path>
               </svg>
               Funnel Conversione
             </h4>
@@ -679,7 +725,9 @@
         <div class="mt-8 p-6 bg-white/5 rounded-xl border border-white/10">
           <h4 class="text-white font-semibold mb-4 flex items-center gap-2">
             <svg class="w-5 h-5 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z">
+              </path>
             </svg>
             Confronto Investimento vs Ritorno
           </h4>
@@ -724,8 +772,10 @@
   </footer>
 
   <script>
+    // State management
     let selectedPackageName = null;
     let packageCost = 0;
+    let totalPerformanceCost = 0;
 
     // Format Currency Helper
     const formatMoney = (amount) => {
@@ -736,12 +786,13 @@
         return new Intl.NumberFormat('it-IT', { style: 'currency', currency: 'EUR', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(amount);
     };
 
-    function selectPackage(name, cost) {
+    // Package Selection
+    function selectPackage(name, cost, element) {
         // Remove selected class from all cards
         document.querySelectorAll('.price-card').forEach(card => card.classList.remove('selected'));
         
         // Add selected class to clicked card
-        event.currentTarget.classList.add('selected');
+        element.classList.add('selected');
         
         // Update State
         selectedPackageName = name;
@@ -760,6 +811,7 @@
         calculateROI();
     }
 
+    // Calculate Total (Section 2)
     function calculateTotal() {
         // Read inputs
         const clv = parseFloat(document.getElementById('clvInput').value) || 0;
@@ -774,25 +826,26 @@
         document.getElementById('costPerClient').textContent = formatMoneyDetailed(costPerClient);
 
         // Calculate Total Performance Cost
-        const performanceCost = clients * costPerClient;
-        document.getElementById('performanceTotal').textContent = formatMoney(performanceCost);
+        totalPerformanceCost = clients * costPerClient;
+        document.getElementById('performanceTotal').textContent = formatMoney(totalPerformanceCost);
 
         // Calculate Grand Total
-        const total = packageCost + performanceCost;
+        const total = packageCost + totalPerformanceCost;
         document.getElementById('totalCost').textContent = formatMoney(total);
 
         // Update ROI calculator
         calculateROI();
     }
 
+    // Calculate ROI (Section 3)
     function calculateROI() {
         // Get simulator inputs
         const months = parseInt(document.getElementById('campaignMonths').value, 10);
         const conversionRate = parseFloat(document.getElementById('conversionRate').value);
-        const avgOrderValue = parseFloat(document.getElementById('avgOrderValue').value) || 0;
+        const avgOrderValue = parseFloat(document.getElementById('avgOrderValue').value) || 150;
 
         // Get main calculator values
-        const clv = parseFloat(document.getElementById('clvInput').value) || 150;
+        const clv = parseFloat(document.getElementById('clvInput').value) || 300;
         const performancePercent = parseFloat(document.getElementById('percentageInput').value) || 25;
         const clientsAcquired = parseInt(document.getElementById('clientsInput').value, 10) || 10;
 
@@ -800,35 +853,28 @@
         document.getElementById('monthsValue').textContent = months;
         document.getElementById('conversionValue').textContent = conversionRate;
 
-        // Calculate projected revenue (monthly clients * CLV * months)
+        // Calculate monthly revenue (CLV * monthly acquired clients)
         const monthlyRevenue = clientsAcquired * clv;
+        
+        // Total projected revenue for the campaign period
         const totalRevenue = monthlyRevenue * months;
 
         // Calculate investment
-        const performanceCost = clientsAcquired * (clv * (performancePercent / 100));
+        const costPerClientAcquired = clv * (performancePercent / 100);
+        const performanceCost = clientsAcquired * costPerClientAcquired;
         const totalInvestment = packageCost + performanceCost;
 
         // Calculate ROI
-        const roi = totalInvestment > 0 ? ((totalRevenue - totalInvestment) / totalInvestment) * 100 : 0;
+        let roi = 0;
+        if (totalInvestment > 0) {
+            roi = ((totalRevenue - totalInvestment) / totalInvestment) * 100;
+        }
         
         // Calculate break-even (how many clients needed to cover investment)
-        const costPerClientAcquired = clv * (performancePercent / 100);
         const breakEvenClients = costPerClientAcquired > 0 ? Math.ceil(totalInvestment / costPerClientAcquired) : 0;
 
         // Net per client after costs
         const netPerClient = clv - costPerClientAcquired;
 
         // Funnel calculations
-        const totalVisits = Math.round(clientsAcquired * (100 / conversionRate));
-        const impressions = Math.round(totalVisits * 10);
-        const clicks = Math.round(impressions * 0.05); // 5% CTR
-        const leads = Math.round(clicks * 0.15); // 15% lead rate
-
-        // Update UI
-        document.getElementById('roiPercent').textContent = `${roi.toFixed(0)}%`;
-        document.getElementById('projectedRevenue').textContent = formatMoney(totalRevenue);
-        document.getElementById('breakEven').textContent = breakEvenClients;
-        document.getElementById('netPerClient').textContent = formatMoney(netPerClient);
-
-        // Update funnel
-        document
+        const totalVisits = Math.round(clients