| <!DOCTYPE html> |
| <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-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; |
| } |
| |
| |
| .custom-scrollbar::-webkit-scrollbar { |
| width: 6px; |
| } |
| |
| .custom-scrollbar::-webkit-scrollbar-track { |
| background: transparent; |
| } |
| |
| .custom-scrollbar::-webkit-scrollbar-thumb { |
| background: #e2e8f0; |
| border-radius: 10px; |
| } |
| </style> |
| </head> |
|
|
| <body class="antialiased selection:bg-blue-100 selection:text-blue-900"> |
|
|
| |
| <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 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"> |
|
|
| |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <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 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"> |
| |
| <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> |
|
|
| |
| <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 class="mb-20"> |
| <div class="bg-slate-900 text-white rounded-3xl p-8 md:p-12 shadow-2xl overflow-hidden relative"> |
| |
| <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 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> |
|
|
| |
| <div class="grid md:grid-cols-4 gap-4 mb-10"> |
| |
| |
| <div class="stat-card p-5"> |
| <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3">Spesa Advertising (€)</label> |
| <input type="range" id="adSpend" min="0" max="50000" step="500" value="10000" class="w-full mb-2 accent-blue-500" oninput="calculateROI()"> |
| <div class="flex justify-between items-center"> |
| <span class="text-2xl font-bold text-white" id="adSpendValue">10.000</span> |
| <span class="text-sm text-slate-400">€ budget</span> |
| </div> |
| </div> |
|
|
| |
| <div class="stat-card p-5"> |
| <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3">CPM (€)</label> |
| <input type="range" id="cpmInput" min="1" max="50" step="0.5" value="2" class="w-full mb-2 accent-purple-500" oninput="calculateROI()"> |
| <div class="flex justify-between items-center"> |
| <span class="text-2xl font-bold text-white" id="cpmValue">2.00</span> |
| <span class="text-sm text-slate-400">Costo x 1k</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="0.1" max="15" value="3" step="0.1" class="w-full mb-2 accent-emerald-500" oninput="calculateROI()"> |
| <div class="flex justify-between items-center"> |
| <span class="text-2xl font-bold text-white" id="conversionValue">3.0</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> |
|
|
| |
| <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> |
|
|
| |
| <div class="grid md:grid-cols-2 gap-8"> |
| |
| <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"> |
| |
| </div> |
| </div> |
|
|
| |
| <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-50 |
