Spaces:
Running
Running
| <html lang="it"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Calcolatore Prezzi Avanzato - Servizi Digitali</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" | |
| rel="stylesheet"> | |
| <style> | |
| :root { | |
| --primary-color: #2563eb; | |
| --primary-hover: #1d4ed8; | |
| --bg-color: #f8fafc; | |
| --text-color: #0f172a; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: var(--bg-color); | |
| color: var(--text-color); | |
| scroll-behavior: smooth; | |
| } | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #cbd5e1; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #94a3b8; | |
| } | |
| .price-card { | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| border: 1px solid #e2e8f0; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .price-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| border-color: #cbd5e1; | |
| } | |
| .price-card.selected { | |
| border-color: var(--primary-color); | |
| box-shadow: 0 0 0 2px var(--primary-color); | |
| background-color: #eff6ff; | |
| transform: scale(1.02); | |
| z-index: 10; | |
| } | |
| .check-icon { | |
| opacity: 0; | |
| transform: scale(0.5); | |
| transition: all 0.3s ease; | |
| position: absolute; | |
| top: 1rem; | |
| right: 1rem; | |
| background-color: var(--primary-color); | |
| color: white; | |
| border-radius: 50%; | |
| width: 24px; | |
| height: 24px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 14px; | |
| } | |
| .price-card.selected .check-icon { | |
| opacity: 1; | |
| transform: scale(1); | |
| } | |
| .custom-input { | |
| background-color: #fff; | |
| border: 1px solid #cbd5e1; | |
| border-radius: 0.5rem; | |
| padding: 0.5rem 1rem; | |
| transition: all 0.2s; | |
| width: 100%; | |
| } | |
| .custom-input:focus { | |
| outline: none; | |
| border-color: var(--primary-color); | |
| box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); | |
| } | |
| input[type=range] { | |
| -webkit-appearance: none; | |
| width: 100%; | |
| background: transparent; | |
| } | |
| input[type=range]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| height: 24px; | |
| width: 24px; | |
| border-radius: 50%; | |
| background: var(--primary-color); | |
| cursor: pointer; | |
| margin-top: -10px; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| transition: transform 0.1s; | |
| } | |
| input[type=range]::-webkit-slider-thumb:hover { | |
| transform: scale(1.1); | |
| } | |
| input[type=range]::-webkit-slider-runnable-track { | |
| width: 100%; | |
| height: 4px; | |
| cursor: pointer; | |
| background: #e2e8f0; | |
| border-radius: 2px; | |
| } | |
| input[type=range]::-moz-range-thumb { | |
| height: 24px; | |
| width: 24px; | |
| border: none; | |
| border-radius: 50%; | |
| background: var(--primary-color); | |
| cursor: pointer; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); | |
| } | |
| input[type=range]::-moz-range-track { | |
| width: 100%; | |
| height: 4px; | |
| cursor: pointer; | |
| background: #e2e8f0; | |
| border-radius: 2px; | |
| } | |
| .feature-list { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .feature-list li { | |
| display: flex; | |
| align-items: flex-start; | |
| margin-bottom: 0.5rem; | |
| font-size: 0.9rem; | |
| line-height: 1.5; | |
| color: #475569; | |
| } | |
| .feature-list li::before { | |
| content: '✓'; | |
| color: var(--primary-color); | |
| font-weight: 700; | |
| margin-right: 0.5rem; | |
| flex-shrink: 0; | |
| font-size: 1rem; | |
| } | |
| .feature-list li.highlight { | |
| font-weight: 600; | |
| color: #1e293b; | |
| } | |
| .price-update-anim { | |
| animation: pulse-green 0.5s ease-in-out; | |
| } | |
| @keyframes pulse-green { | |
| 0% { | |
| color: inherit; | |
| } | |
| 50% { | |
| color: #16a34a; | |
| } | |
| 100% { | |
| color: inherit; | |
| } | |
| } | |
| /* Simulator Styles */ | |
| .simulator-card { | |
| background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); | |
| border-radius: 1.5rem; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .simulator-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 4px; | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899); | |
| } | |
| .stat-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 1rem; | |
| backdrop-filter: blur(10px); | |
| transition: all 0.3s ease; | |
| } | |
| .stat-card:hover { | |
| background: rgba(255, 255, 255, 0.08); | |
| transform: translateY(-2px); | |
| } | |
| .progress-ring { | |
| transform: rotate(-90deg); | |
| } | |
| .progress-ring-circle { | |
| transition: stroke-dashoffset 0.5s ease; | |
| } | |
| .timeline-bar { | |
| height: 8px; | |
| border-radius: 4px; | |
| background: #e2e8f0; | |
| overflow: hidden; | |
| } | |
| .timeline-progress { | |
| height: 100%; | |
| border-radius: 4px; | |
| background: linear-gradient(90deg, #3b82f6, #8b5cf6); | |
| transition: width 0.5s ease; | |
| } | |
| .growth-indicator { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, | |
| 100% { | |
| transform: translateY(0); | |
| } | |
| 50% { | |
| transform: translateY(-10px); | |
| } | |
| } | |
| .pulse-dot { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, | |
| 100% { | |
| transform: scale(1); | |
| opacity: 1; | |
| } | |
| 50% { | |
| transform: scale(1.5); | |
| opacity: 0.5; | |
| } | |
| } | |
| .chart-bar { | |
| transition: height 0.5s ease; | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease forwards; | |
| } | |
| @keyframes fadeIn { | |
| 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-4 { | |
| animation-delay: 0.4s; | |
| } | |
| </style> | |
| </head> | |
| <body class="antialiased selection:bg-blue-100 selection:text-blue-900"> | |
| <!-- Navigation / Branding --> | |
| <nav class="bg-white/80 backdrop-blur-md border-b border-gray-200 sticky top-0 z-50"> | |
| <div class="container mx-auto px-6 py-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold text-lg">D | |
| </div> | |
| <span class="text-xl font-bold text-gray-900 tracking-tight">DigitalGrowth<span class="text-blue-600">Calc</span></span> | |
| </div> | |
| <div class="text-sm font-medium text-gray-500"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" | |
| class="hover:text-blue-600 transition-colors">Built with anycoder</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <header class="bg-gradient-to-b from-white to-blue-50/50 py-16 md:py-24 border-b border-gray-100"> | |
| <div class="container mx-auto px-6 text-center max-w-4xl"> | |
| <span class="inline-block py-1 px-3 rounded-full bg-blue-100 text-blue-700 text-xs font-bold tracking-wide uppercase mb-4">Preventivo 2024</span> | |
| <h1 class="text-4xl md:text-6xl font-extrabold text-gray-900 mb-6 leading-tight tracking-tight"> | |
| Calcolatore di | |
| <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600">Investimento Digitale</span> | |
| </h1> | |
| <p class="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed"> | |
| Configura il tuo piano di crescita su misura. Scegli il pacchetto, stima le performance e ottieni un preventivo | |
| istantaneo. | |
| </p> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 md:px-6 py-12 max-w-7xl"> | |
| <!-- SECTION 1: PACKAGES --> | |
| <section class="mb-20"> | |
| <div class="flex flex-col md:flex-row justify-between items-end mb-10 gap-4"> | |
| <div> | |
| <h2 class="text-3xl font-bold text-gray-900">1. Scegli il tuo Pacchetto Base</h2> | |
| <p class="text-gray-500 mt-2">Seleziona il livello di servizio adatto alle tue esigenze.</p> | |
| </div> | |
| </div> | |
| <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, this)"> | |
| <div class="check-icon">✓</div> | |
| <div class="mb-6"> | |
| <h3 class="text-2xl font-bold text-gray-900">Standard</h3> | |
| <p class="text-gray-500 text-sm mt-1">Per chi inizia la crescita.</p> | |
| </div> | |
| <div class="flex items-baseline mb-8"> | |
| <span class="text-4xl font-extrabold text-gray-900">€2.500</span> | |
| <span class="text-gray-500 ml-2 font-medium">una tantum</span> | |
| </div> | |
| <div class="space-y-4 mb-8"> | |
| <div class="h-px bg-gray-100 w-full"></div> | |
| <ul class="feature-list space-y-3 max-h-[400px] overflow-y-auto pr-2 custom-scrollbar"> | |
| <li class="highlight">Paid Search Competitor</li> | |
| <li class="highlight">Keyword Analysis & Planner</li> | |
| <li><strong>20-</strong> Editing (Copy/Headline)</li> | |
| <li><strong>4-</strong> Video per campagna</li> | |
| <li>Video Editor & Designer Dedicato</li> | |
| <li><strong>2-</strong> Ad Copy & Graphics</li> | |
| <li>Google Ads (Search & Video)</li> | |
| <li>Performance Max Campaign</li> | |
| <li>Configurazione Account & Analytics</li> | |
| <li>Targeting & Reporting</li> | |
| <li>Gestione Conversioni</li> | |
| <li>Creazione Contenuti Email</li> | |
| <li><strong>2-</strong> Landing Pages Sponsor</li> | |
| <li>Widget Integration (Survey & Form)</li> | |
| <li>Contest & Micro Influencer</li> | |
| <li class="mt-4 font-bold text-blue-800 text-sm uppercase tracking-wide">Performance Price Include:</li> | |
| <li>Demand Generation Campaign</li> | |
| <li>Sales & Customer Agent App</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- 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, 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> | |
| <div class="check-icon">✓</div> | |
| <div class="mb-6"> | |
| <h3 class="text-2xl font-bold text-gray-900">Gold</h3> | |
| <p class="text-gray-500 text-sm mt-1">Per accelerare le performance.</p> | |
| </div> | |
| <div class="flex items-baseline mb-8"> | |
| <span class="text-4xl font-extrabold text-gray-900">€3.500</span> | |
| <span class="text-gray-500 ml-2 font-medium">una tantum</span> | |
| </div> | |
| <div class="space-y-4 mb-8"> | |
| <div class="h-px bg-gray-100 w-full"></div> | |
| <ul class="feature-list space-y-3 max-h-[500px] overflow-y-auto pr-2 custom-scrollbar"> | |
| <li class="font-bold text-blue-600">Tutto dello Standard, più:</li> | |
| <li><strong>30-</strong> Editing (Copy/Headline)</li> | |
| <li><strong>10-</strong> Video per campagna</li> | |
| <li><strong>3-</strong> Ad Copy & Graphics</li> | |
| <li>Google Shopping</li> | |
| <li>Integrazione Merchant Center</li> | |
| <li>Customer Match (con CRM)</li> | |
| <li>Email Marketing Aziendale</li> | |
| <li><strong>2-</strong> Multi Landing Pages & A/B Test</li> | |
| <li><strong>1-</strong> Store eCommerce Landing</li> | |
| <li>Plugin Loyalty & Referral</li> | |
| <li>Contest + Professional Influencer</li> | |
| <li>CSR: Web Disclosure & Impact</li> | |
| <li class="mt-4 font-bold text-blue-800 text-sm uppercase tracking-wide">Performance Price Include:</li> | |
| <li>ML Analytics Application</li> | |
| <li>Customer Advanced Data Analytics</li> | |
| <li>Market & Competitive Intelligence</li> | |
| <li class="font-semibold text-gray-800">Advanced Program (1 incluso):</li> | |
| <li>a. Referral Martech App</li> | |
| <li>b. Loyalty Program</li> | |
| <li>c. Social Coalition Loyalty</li> | |
| <li>d. Cause Related Marketing</li> | |
| <li>e. Affiliation Management</li> | |
| <li>f. Influencer Management</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- PLATINUM CARD --> | |
| <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> | |
| <p class="text-gray-500 text-sm mt-1">Soluzione completa di dominio.</p> | |
| </div> | |
| <div class="flex items-baseline mb-8"> | |
| <span class="text-4xl font-extrabold text-gray-900">€5.000</span> | |
| <span class="text-gray-500 ml-2 font-medium">una tantum</span> | |
| </div> | |
| <div class="space-y-4 mb-8"> | |
| <div class="h-px bg-gray-100 w-full"></div> | |
| <ul class="feature-list space-y-3 max-h-[500px] overflow-y-auto pr-2 custom-scrollbar"> | |
| <li class="font-bold text-blue-600">Tutto del Gold, più:</li> | |
| <li><strong>50-</strong> Editing (Copy/Headline)</li> | |
| <li><strong>20-</strong> Video per campagna</li> | |
| <li><strong>5-</strong> Ad Copy & Graphics</li> | |
| <li>Integrazione Piattaforme Multiple</li> | |
| <li>Campagne Asset Affiliati</li> | |
| <li>Tools Campagne Avanzate</li> | |
| <li>Co-Marketing Multichannel</li> | |
| <li><strong>2-</strong> Landing Pages Evento</li> | |
| <li><strong>5-</strong> Multi Landing Pages & A/B Test</li> | |
| <li><strong>2-</strong> Store eCommerce Landing</li> | |
| <li>CSR: Metodo Cultural Impact</li> | |
| <li>CSR: Media Relations</li> | |
| <li>Generative AI App (inclusa)</li> | |
| <li class="font-semibold text-gray-800">Advanced Program (2 inclusi):</li> | |
| <li>a. Referral Martech App</li> | |
| <li>b. Loyalty Program</li> | |
| <li>c. Social Coalition Loyalty</li> | |
| <li>d. Cause Related Marketing</li> | |
| <li>e. Affiliation Management</li> | |
| <li>f. Influencer Management</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SECTION 2: PERFORMANCE CALCULATOR --> | |
| <section class="mb-20"> | |
| <div class="bg-white border border-gray-200 rounded-2xl p-8 md:p-12 shadow-sm"> | |
| <div class="text-center mb-10"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-2">2. Aggiungi Servizi a Performance</h2> | |
| <p class="text-gray-600">Paga solo per i risultati. Definisci tu il valore dei tuoi clienti.</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8 items-start"> | |
| <!-- Inputs Grid --> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="clvInput" class="block text-sm font-semibold text-gray-700 mb-2 uppercase tracking-wide">Customer Lifetime Value (CLV)</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <span class="text-gray-500 sm:text-sm">€</span> | |
| </div> | |
| <input type="number" id="clvInput" placeholder="Es. 300" class="custom-input pl-7" oninput="calculateTotal()"> | |
| </div> | |
| <p class="text-xs text-gray-400 mt-1">Valore medio di un cliente nel tempo</p> | |
| </div> | |
| <div> | |
| <label for="percentageInput" class="block text-sm font-semibold text-gray-700 mb-2 uppercase tracking-wide">Percentuale a Performance</label> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none"> | |
| <span class="text-gray-500 sm:text-sm">%</span> | |
| </div> | |
| <input type="number" id="percentageInput" placeholder="Es. 25" class="custom-input pr-7" oninput="calculateTotal()"> | |
| </div> | |
| <p class="text-xs text-gray-400 mt-1">La tua fee sul valore generato</p> | |
| </div> | |
| </div> | |
| <!-- Cost Per Client Display --> | |
| <div | |
| class="bg-gray-50 rounded-xl p-6 border border-gray-100 flex flex-col justify-center items-center h-full md:h-auto"> | |
| <div class="text-sm font-medium text-gray-500 mb-1">Costo per Nuovo Cliente</div> | |
| <div class="text-4xl font-extrabold text-blue-600" id="costPerClient">€0.00</div> | |
| <div class="text-xs text-gray-400 mt-2">Calcolato come (CLV × %)</div> | |
| </div> | |
| </div> | |
| <div class="mt-10 pt-8 border-t border-gray-100"> | |
| <div class="flex justify-between items-end mb-4"> | |
| <label for="clientsInput" class="block text-sm font-semibold text-gray-700 uppercase tracking-wide">Nuovi Clienti Acquisiti (Simulazione)</label> | |
| <span id="clientsValue" class="text-2xl font-bold text-gray-900 bg-white px-3 py-1 rounded border border-gray-200 shadow-sm">0</span> | |
| </div> | |
| <input type="range" id="clientsInput" min="0" max="500" value="0" step="1" oninput="calculateTotal()"> | |
| <div class="flex justify-between text-xs text-gray-400 mt-2 font-medium"> | |
| <span>0</span> | |
| <span>100</span> | |
| <span>250</span> | |
| <span>500+</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SECTION 3: SUMMARY --> | |
| <section class="mb-20"> | |
| <div class="bg-slate-900 text-white rounded-3xl p-8 md:p-12 shadow-2xl overflow-hidden relative"> | |
| <!-- Decorative background elements --> | |
| <div | |
| class="absolute top-0 right-0 w-64 h-64 bg-blue-600 rounded-full mix-blend-multiply filter blur-3xl opacity-20 -translate-y-1/2 translate-x-1/2"> | |
| </div> | |
| <div | |
| class="absolute bottom-0 left-0 w-64 h-64 bg-indigo-600 rounded-full mix-blend-multiply filter blur-3xl opacity-20 translate-y-1/2 -translate-x-1/2"> | |
| </div> | |
| <h3 class="text-2xl md:text-3xl font-bold mb-8 text-center relative z-10">Riepilogo del Tuo Investimento</h3> | |
| <div | |
| class="grid md:grid-cols-3 gap-8 text-center relative z-10 divide-y md:divide-y-0 md:divide-x divide-slate-700"> | |
| <div class="p-4"> | |
| <div class="text-slate-400 text-sm uppercase tracking-wider mb-2">Pacchetto Base</div> | |
| <div class="text-2xl font-bold text-white" id="selectedPackageDisplay">Nessuno</div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="text-slate-400 text-sm uppercase tracking-wider mb-2">Costo a Performance</div> | |
| <div class="text-2xl font-bold text-blue-400" id="performanceTotal">€0</div> | |
| </div> | |
| <div class="p-4 md:pl-8"> | |
| <div class="text-slate-400 text-sm uppercase tracking-wider mb-2">Investimento Totale Stimato</div> | |
| <div | |
| class="text-4xl md:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-emerald-400" | |
| id="totalCost">€0</div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12 relative z-10"> | |
| <button class="group relative inline-flex items-center justify-center px-8 py-4 text-base font-bold text-white transition-all duration-200 bg-blue-600 rounded-full hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-600 focus:ring-offset-slate-900" onclick="generateQuote()"> | |
| <span class="mr-2">📋</span> | |
| Copia Preventivo Personalizzato | |
| <div class="absolute inset-0 rounded-full ring-2 ring-white/20 group-hover:ring-white/40 transition-all duration-200"></div> | |
| </button> | |
| <p class="text-slate-500 text-sm mt-4">Il preventivo verrà copiato negli appunti per essere incollato su | |
| WhatsApp o Email.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SECTION 4: ROI SIMULATOR --> | |
| <section class="mb-20"> | |
| <div class="simulator-card p-8 md:p-12"> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4"> | |
| <div> | |
| <div class="flex items-center gap-3 mb-2"> | |
| <span class="p-2 bg-white/10 rounded-lg"> | |
| <svg class="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path> | |
| </svg> | |
| </span> | |
| <h2 class="text-3xl font-bold text-white">3. Simulatore ROI & Crescita</h2> | |
| </div> | |
| <p class="text-slate-400">Proiezione dei ritorni sull'investimento e timeline di crescita</p> | |
| </div> | |
| <div class="flex items-center gap-2 bg-white/10 px-4 py-2 rounded-full"> | |
| <span class="pulse-dot w-2 h-2 bg-green-400 rounded-full"></span> | |
| <span class="text-sm text-slate-300">Simulazione in tempo reale</span> | |
| </div> | |
| </div> | |
| <!-- Simulator Inputs --> | |
| <div class="grid md:grid-cols-3 gap-6 mb-10"> | |
| <div class="stat-card p-5"> | |
| <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3">Durata Campagna (Mesi)</label> | |
| <input type="range" id="campaignMonths" min="3" max="24" value="6" class="w-full mb-2" oninput="calculateROI()"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-2xl font-bold text-white" id="monthsValue">6</span> | |
| <span class="text-sm text-slate-400">mesi</span> | |
| </div> | |
| </div> | |
| <div class="stat-card p-5"> | |
| <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3">Tasso Conversione (%)</label> | |
| <input type="range" id="conversionRate" min="1" max="15" value="3" step="0.5" class="w-full mb-2" oninput="calculateROI()"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-2xl font-bold text-white" id="conversionValue">3</span> | |
| <span class="text-sm text-slate-400">%</span> | |
| </div> | |
| </div> | |
| <div class="stat-card p-5"> | |
| <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3">Valore Medio Ordine (€)</label> | |
| <input type="number" id="avgOrderValue" placeholder="Es. 150" value="150" class="custom-input bg-white/5 border-white/10 text-white placeholder-slate-500" oninput="calculateROI()"> | |
| </div> | |
| </div> | |
| <!-- ROI Results Grid --> | |
| <div class="grid md:grid-cols-4 gap-4 mb-10"> | |
| <div class="stat-card p-6 text-center fade-in stagger-1"> | |
| <div class="text-slate-400 text-xs uppercase tracking-wider mb-2">Ritorno Investimento</div> | |
| <div class="text-3xl font-bold text-emerald-400" id="roiPercent">0%</div> | |
| <div class="text-xs text-slate-500 mt-1">ROI totale</div> | |
| </div> | |
| <div class="stat-card p-6 text-center fade-in stagger-2"> | |
| <div class="text-slate-400 text-xs uppercase tracking-wider mb-2">Ricavi Stimati</div> | |
| <div class="text-3xl font-bold text-blue-400" id="projectedRevenue">€0</div> | |
| <div class="text-xs text-slate-500 mt-1">12 mesi</div> | |
| </div> | |
| <div class="stat-card p-6 text-center fade-in stagger-3"> | |
| <div class="text-slate-400 text-xs uppercase tracking-wider mb-2">Break-even</div> | |
| <div class="text-3xl font-bold text-purple-400" id="breakEven">0</div> | |
| <div class="text-xs text-slate-500 mt-1">nuovi clienti</div> | |
| </div> | |
| <div class="stat-card p-6 text-center fade-in stagger-4"> | |
| <div class="text-slate-400 text-xs uppercase tracking-wider mb-2">Cliente Netto</div> | |
| <div class="text-3xl font-bold text-amber-400" id="netPerClient">€0</div> | |
| <div class="text-xs text-slate-500 mt-1">dopo costi</div> | |
| </div> | |
| </div> | |
| <!-- Visual Timeline & Charts --> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <!-- Growth Timeline --> | |
| <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> | |
| </svg> | |
| Timeline Crescita Mensile | |
| </h4> | |
| <div class="space-y-3" id="timelineBars"> | |
| <!-- Bars will be generated by JS --> | |
| </div> | |
| </div> | |
| <!-- Funnel Visualization --> | |
| <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> | |
| </svg> | |
| Funnel Conversione | |
| </h4> | |
| <div class="flex items-center justify-center gap-2"> | |
| <div class="flex-1 text-center"> | |
| <div class="bg-blue-500/20 rounded-t-lg p-4 border border-blue-500/30"> | |
| <div class="text-2xl font-bold text-white" id="impressions">0</div> | |
| <div class="text-xs text-slate-400">Impression</div> | |
| </div> | |
| <div class="bg-blue-500/30 p-3 border-x border-b border-blue-500/30"> | |
| <div class="text-lg font-bold text-blue-300" id="clicks">0</div> | |
| <div class="text-xs text-slate-400">Clic</div> | |
| </div> | |
| <div class="bg-blue-500/40 p-3 border-x border-b border-blue-500/30"> | |
| <div class="text-lg font-bold text-blue-200" id="leads">0</div> | |
| <div class="text-xs text-slate-400">Lead</div> | |
| </div> | |
| <div class="bg-emerald-500/50 rounded-b-lg p-4 border border-emerald-500/30"> | |
| <div class="text-2xl font-bold text-emerald-300" id="customers">0</div> | |
| <div class="text-xs text-slate-400">Clienti</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 text-center text-xs text-slate-500"> | |
| Basato su <span id="totalVisits">0</span> visite mensili stimate | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Summary Comparison --> | |
| <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> | |
| </svg> | |
| Confronto Investimento vs Ritorno | |
| </h4> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-slate-400 text-sm">Investimento Totale</span> | |
| <span class="text-white font-semibold" id="investmentCompare">€0</span> | |
| </div> | |
| <div class="timeline-bar"> | |
| <div class="timeline-progress bg-red-500/50" style="width: 30%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-slate-400 text-sm">Ritorno Stimato (12 mesi)</span> | |
| <span class="text-emerald-400 font-semibold" id="returnCompare">€0</span> | |
| </div> | |
| <div class="timeline-bar"> | |
| <div class="timeline-progress" style="width: 70%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 p-3 bg-emerald-500/10 rounded-lg border border-emerald-500/20 text-center"> | |
| <span class="text-emerald-400 font-semibold">Rapporto Rischio/Ritorno: </span> | |
| <span class="text-white" id="riskReward">1 : 0</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="bg-white border-t border-gray-200 py-8"> | |
| <div class="container mx-auto px-6 text-center text-gray-500 text-sm"> | |
| <p>© 2024 Digital Growth Calculator. All rights reserved.</p> | |
| <div class="mt-2"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" | |
| class="text-blue-600 hover:underline">Built with anycoder</a> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // State management | |
| let selectedPackageName = null; | |
| let packageCost = 0; | |
| let totalPerformanceCost = 0; | |
| // Format Currency Helper | |
| const formatMoney = (amount) => { | |
| return new Intl.NumberFormat('it-IT', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }).format(amount); | |
| }; | |
| const formatMoneyDetailed = (amount) => { | |
| return new Intl.NumberFormat('it-IT', { style: 'currency', currency: 'EUR', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(amount); | |
| }; | |
| // 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 | |
| element.classList.add('selected'); | |
| // Update State | |
| selectedPackageName = name; | |
| packageCost = cost; | |
| // Update UI | |
| document.getElementById('selectedPackageDisplay').textContent = `${name} (${formatMoney(cost)})`; | |
| // Trigger animation on total cost | |
| const totalEl = document.getElementById('totalCost'); | |
| totalEl.classList.remove('price-update-anim'); | |
| void totalEl.offsetWidth; // trigger reflow | |
| totalEl.classList.add('price-update-anim'); | |
| calculateTotal(); | |
| calculateROI(); | |
| } | |
| // Calculate Total (Section 2) | |
| function calculateTotal() { | |
| // Read inputs | |
| const clv = parseFloat(document.getElementById('clvInput').value) || 0; | |
| const percentage = parseFloat(document.getElementById('percentageInput').value) || 0; | |
| const clients = parseInt(document.getElementById('clientsInput').value, 10); | |
| // Update slider display | |
| document.getElementById('clientsValue').textContent = clients; | |
| // Calculate Cost Per Client | |
| const costPerClient = clv * (percentage / 100); | |
| document.getElementById('costPerClient').textContent = formatMoneyDetailed(costPerClient); | |
| // Calculate Total Performance Cost | |
| totalPerformanceCost = clients * costPerClient; | |
| document.getElementById('performanceTotal').textContent = formatMoney(totalPerformanceCost); | |
| // Calculate Grand Total | |
| 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) || 150; | |
| // Get main calculator values | |
| 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; | |
| // Update display values | |
| document.getElementById('monthsValue').textContent = months; | |
| document.getElementById('conversionValue').textContent = conversionRate; | |
| // 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 costPerClientAcquired = clv * (performancePercent / 100); | |
| const performanceCost = clientsAcquired * costPerClientAcquired; | |
| const totalInvestment = packageCost + performanceCost; | |
| // Calculate ROI | |
| let roi = 0; | |
| if (totalInvestment > 0) { | |
| roi = ((totalRevenue - totalInvestment) / totalInvestment) * 100; | |
| } | |
| // Calculate break-even (how many clients needed to cover investment) | |
| const breakEvenClients = costPerClientAcquired > 0 ? Math.ceil(totalInvestment / costPerClientAcquired) : 0; | |
| // Net per client after costs | |
| const netPerClient = clv - costPerClientAcquired; | |
| // Funnel calculations | |
| const totalVisits = Math.round(clients |