Hugging Face's logo

Spaces:
emanueledecandia
/
simulator
Running

App Files Community
emanueledecandia commited on
Commit
06da7cf
·
verified ·
1 Parent(s): b909d46

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +583 -19
index.html CHANGED
@@ -1,19 +1,583 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="it">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Calcolatore Prezzi Avanzato - Servizi Digitali</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
11
+ <style>
12
+ :root {
13
+ --primary-color: #2563eb; /* Blue 600 */
14
+ --primary-hover: #1d4ed8; /* Blue 700 */
15
+ --bg-color: #f8fafc;
16
+ --text-color: #0f172a;
17
+ }
18
+
19
+ body {
20
+ font-family: 'Inter', sans-serif;
21
+ background-color: var(--bg-color);
22
+ color: var(--text-color);
23
+ scroll-behavior: smooth;
24
+ }
25
+
26
+ /* Custom Scrollbar */
27
+ ::-webkit-scrollbar {
28
+ width: 8px;
29
+ }
30
+ ::-webkit-scrollbar-track {
31
+ background: #f1f1f1;
32
+ }
33
+ ::-webkit-scrollbar-thumb {
34
+ background: #cbd5e1;
35
+ border-radius: 4px;
36
+ }
37
+ ::-webkit-scrollbar-thumb:hover {
38
+ background: #94a3b8;
39
+ }
40
+
41
+ /* Card Styles */
42
+ .price-card {
43
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
44
+ border: 1px solid #e2e8f0;
45
+ position: relative;
46
+ overflow: hidden;
47
+ }
48
+
49
+ .price-card:hover {
50
+ transform: translateY(-5px);
51
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
52
+ border-color: #cbd5e1;
53
+ }
54
+
55
+ .price-card.selected {
56
+ border-color: var(--primary-color);
57
+ box-shadow: 0 0 0 2px var(--primary-color);
58
+ background-color: #eff6ff; /* Blue 50 */
59
+ transform: scale(1.02);
60
+ z-index: 10;
61
+ }
62
+
63
+ /* Selection Indicator */
64
+ .check-icon {
65
+ opacity: 0;
66
+ transform: scale(0.5);
67
+ transition: all 0.3s ease;
68
+ position: absolute;
69
+ top: 1rem;
70
+ right: 1rem;
71
+ background-color: var(--primary-color);
72
+ color: white;
73
+ border-radius: 50%;
74
+ width: 24px;
75
+ height: 24px;
76
+ display: flex;
77
+ align-items: center;
78
+ justify-content: center;
79
+ font-size: 14px;
80
+ }
81
+
82
+ .price-card.selected .check-icon {
83
+ opacity: 1;
84
+ transform: scale(1);
85
+ }
86
+
87
+ /* Input Styles */
88
+ .custom-input {
89
+ background-color: #fff;
90
+ border: 1px solid #cbd5e1;
91
+ border-radius: 0.5rem;
92
+ padding: 0.5rem 1rem;
93
+ transition: all 0.2s;
94
+ width: 100%;
95
+ }
96
+
97
+ .custom-input:focus {
98
+ outline: none;
99
+ border-color: var(--primary-color);
100
+ box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
101
+ }
102
+
103
+ /* Range Slider Customization */
104
+ input[type=range] {
105
+ -webkit-appearance: none;
106
+ width: 100%;
107
+ background: transparent;
108
+ }
109
+
110
+ input[type=range]::-webkit-slider-thumb {
111
+ -webkit-appearance: none;
112
+ height: 24px;
113
+ width: 24px;
114
+ border-radius: 50%;
115
+ background: var(--primary-color);
116
+ cursor: pointer;
117
+ margin-top: -10px;
118
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
119
+ transition: transform 0.1s;
120
+ }
121
+
122
+ input[type=range]::-webkit-slider-thumb:hover {
123
+ transform: scale(1.1);
124
+ }
125
+
126
+ input[type=range]::-webkit-slider-runnable-track {
127
+ width: 100%;
128
+ height: 4px;
129
+ cursor: pointer;
130
+ background: #e2e8f0;
131
+ border-radius: 2px;
132
+ }
133
+
134
+ /* Firefox Slider */
135
+ input[type=range]::-moz-range-thumb {
136
+ height: 24px;
137
+ width: 24px;
138
+ border: none;
139
+ border-radius: 50%;
140
+ background: var(--primary-color);
141
+ cursor: pointer;
142
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
143
+ }
144
+
145
+ input[type=range]::-moz-range-track {
146
+ width: 100%;
147
+ height: 4px;
148
+ cursor: pointer;
149
+ background: #e2e8f0;
150
+ border-radius: 2px;
151
+ }
152
+
153
+ /* Feature List Styling */
154
+ .feature-list {
155
+ list-style: none;
156
+ padding: 0;
157
+ margin: 0;
158
+ }
159
+
160
+ .feature-list li {
161
+ display: flex;
162
+ align-items: flex-start;
163
+ margin-bottom: 0.5rem;
164
+ font-size: 0.9rem;
165
+ line-height: 1.5;
166
+ color: #475569;
167
+ }
168
+
169
+ .feature-list li::before {
170
+ content: '✓';
171
+ color: var(--primary-color);
172
+ font-weight: 700;
173
+ margin-right: 0.5rem;
174
+ flex-shrink: 0;
175
+ font-size: 1rem;
176
+ }
177
+
178
+ .feature-list li.highlight {
179
+ font-weight: 600;
180
+ color: #1e293b;
181
+ }
182
+
183
+ /* Animation for Total Price Update */
184
+ .price-update-anim {
185
+ animation: pulse-green 0.5s ease-in-out;
186
+ }
187
+
188
+ @keyframes pulse-green {
189
+ 0% { color: inherit; }
190
+ 50% { color: #16a34a; } /* Green 600 */
191
+ 100% { color: inherit; }
192
+ }
193
+ </style>
194
+ </head>
195
+ <body class="antialiased selection:bg-blue-100 selection:text-blue-900">
196
+
197
+ <!-- Navigation / Branding -->
198
+ <nav class="bg-white/80 backdrop-blur-md border-b border-gray-200 sticky top-0 z-50">
199
+ <div class="container mx-auto px-6 py-4 flex justify-between items-center">
200
+ <div class="flex items-center space-x-2">
201
+ <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold text-lg">D</div>
202
+ <span class="text-xl font-bold text-gray-900 tracking-tight">DigitalGrowth<span class="text-blue-600">Calc</span></span>
203
+ </div>
204
+ <div class="text-sm font-medium text-gray-500">
205
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="hover:text-blue-600 transition-colors">Built with anycoder</a>
206
+ </div>
207
+ </div>
208
+ </nav>
209
+
210
+ <header class="bg-gradient-to-b from-white to-blue-50/50 py-16 md:py-24 border-b border-gray-100">
211
+ <div class="container mx-auto px-6 text-center max-w-4xl">
212
+ <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>
213
+ <h1 class="text-4xl md:text-6xl font-extrabold text-gray-900 mb-6 leading-tight tracking-tight">
214
+ Calcolatore di <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600">Investimento Digitale</span>
215
+ </h1>
216
+ <p class="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed">
217
+ Configura il tuo piano di crescita su misura. Scegli il pacchetto, stima le performance e ottieni un preventivo istantaneo.
218
+ </p>
219
+ </div>
220
+ </header>
221
+
222
+ <main class="container mx-auto px-4 md:px-6 py-12 max-w-7xl">
223
+
224
+ <!-- SECTION 1: PACKAGES -->
225
+ <section class="mb-20">
226
+ <div class="flex flex-col md:flex-row justify-between items-end mb-10 gap-4">
227
+ <div>
228
+ <h2 class="text-3xl font-bold text-gray-900">1. Scegli il tuo Pacchetto Base</h2>
229
+ <p class="text-gray-500 mt-2">Seleziona il livello di servizio adatto alle tue esigenze.</p>
230
+ </div>
231
+ </div>
232
+
233
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
234
+
235
+ <!-- STANDARD CARD -->
236
+ <div class="price-card bg-white rounded-2xl p-8 cursor-pointer group" onclick="selectPackage('Standard', 2500)">
237
+ <div class="check-icon">✓</div>
238
+ <div class="mb-6">
239
+ <h3 class="text-2xl font-bold text-gray-900">Standard</h3>
240
+ <p class="text-gray-500 text-sm mt-1">Per chi inizia la crescita.</p>
241
+ </div>
242
+ <div class="flex items-baseline mb-8">
243
+ <span class="text-4xl font-extrabold text-gray-900">€2.500</span>
244
+ <span class="text-gray-500 ml-2 font-medium">una tantum</span>
245
+ </div>
246
+
247
+ <div class="space-y-4 mb-8">
248
+ <div class="h-px bg-gray-100 w-full"></div>
249
+ <ul class="feature-list space-y-3 max-h-[400px] overflow-y-auto pr-2 custom-scrollbar">
250
+ <li class="highlight">Paid Search Competitor</li>
251
+ <li class="highlight">Keyword Analysis & Planner</li>
252
+ <li><strong>20-</strong> Editing (Copy/Headline)</li>
253
+ <li><strong>4-</strong> Video per campagna</li>
254
+ <li>Video Editor & Designer Dedicato</li>
255
+ <li><strong>2-</strong> Ad Copy & Graphics</li>
256
+ <li>Google Ads (Search & Video)</li>
257
+ <li>Performance Max Campaign</li>
258
+ <li>Configurazione Account & Analytics</li>
259
+ <li>Targeting & Reporting</li>
260
+ <li>Gestione Conversioni</li>
261
+ <li>Creazione Contenuti Email</li>
262
+ <li><strong>2-</strong> Landing Pages Sponsor</li>
263
+ <li>Widget Integration (Survey & Form)</li>
264
+ <li>Contest & Micro Influencer</li>
265
+ <li class="mt-4 font-bold text-blue-800 text-sm uppercase tracking-wide">Performance Price Include:</li>
266
+ <li>Demand Generation Campaign</li>
267
+ <li>Sales & Customer Agent App</li>
268
+ </ul>
269
+ </div>
270
+ </div>
271
+
272
+ <!-- GOLD CARD -->
273
+ <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)">
274
+ <div class="absolute -top-4 left-1/2 -translate-x-1/2">
275
+ <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>
276
+ </div>
277
+ <div class="check-icon">✓</div>
278
+ <div class="mb-6">
279
+ <h3 class="text-2xl font-bold text-gray-900">Gold</h3>
280
+ <p class="text-gray-500 text-sm mt-1">Per accelerare le performance.</p>
281
+ </div>
282
+ <div class="flex items-baseline mb-8">
283
+ <span class="text-4xl font-extrabold text-gray-900">€3.500</span>
284
+ <span class="text-gray-500 ml-2 font-medium">una tantum</span>
285
+ </div>
286
+
287
+ <div class="space-y-4 mb-8">
288
+ <div class="h-px bg-gray-100 w-full"></div>
289
+ <ul class="feature-list space-y-3 max-h-[500px] overflow-y-auto pr-2 custom-scrollbar">
290
+ <li class="font-bold text-blue-600">Tutto dello Standard, più:</li>
291
+ <li><strong>30-</strong> Editing (Copy/Headline)</li>
292
+ <li><strong>10-</strong> Video per campagna</li>
293
+ <li><strong>3-</strong> Ad Copy & Graphics</li>
294
+ <li>Google Shopping</li>
295
+ <li>Integrazione Merchant Center</li>
296
+ <li>Customer Match (con CRM)</li>
297
+ <li>Email Marketing Aziendale</li>
298
+ <li><strong>2-</strong> Multi Landing Pages & A/B Test</li>
299
+ <li><strong>1-</strong> Store eCommerce Landing</li>
300
+ <li>Plugin Loyalty & Referral</li>
301
+ <li>Contest + Professional Influencer</li>
302
+ <li>CSR: Web Disclosure & Impact</li>
303
+ <li class="mt-4 font-bold text-blue-800 text-sm uppercase tracking-wide">Performance Price Include:</li>
304
+ <li>ML Analytics Application</li>
305
+ <li>Customer Advanced Data Analytics</li>
306
+ <li>Market & Competitive Intelligence</li>
307
+ <li class="font-semibold text-gray-800">Advanced Program (1 incluso):</li>
308
+ <li>a. Referral Martech App</li>
309
+ <li>b. Loyalty Program</li>
310
+ <li>c. Social Coalition Loyalty</li>
311
+ <li>d. Cause Related Marketing</li>
312
+ <li>e. Affiliation Management</li>
313
+ <li>f. Influencer Management</li>
314
+ </ul>
315
+ </div>
316
+ </div>
317
+
318
+ <!-- PLATINUM CARD -->
319
+ <div class="price-card bg-white rounded-2xl p-8 cursor-pointer group" onclick="selectPackage('Platinum', 5000)">
320
+ <div class="check-icon">✓</div>
321
+ <div class="mb-6">
322
+ <h3 class="text-2xl font-bold text-gray-900">Platinum</h3>
323
+ <p class="text-gray-500 text-sm mt-1">Soluzione completa di dominio.</p>
324
+ </div>
325
+ <div class="flex items-baseline mb-8">
326
+ <span class="text-4xl font-extrabold text-gray-900">€5.000</span>
327
+ <span class="text-gray-500 ml-2 font-medium">una tantum</span>
328
+ </div>
329
+
330
+ <div class="space-y-4 mb-8">
331
+ <div class="h-px bg-gray-100 w-full"></div>
332
+ <ul class="feature-list space-y-3 max-h-[500px] overflow-y-auto pr-2 custom-scrollbar">
333
+ <li class="font-bold text-blue-600">Tutto del Gold, più:</li>
334
+ <li><strong>50-</strong> Editing (Copy/Headline)</li>
335
+ <li><strong>20-</strong> Video per campagna</li>
336
+ <li><strong>5-</strong> Ad Copy & Graphics</li>
337
+ <li>Integrazione Piattaforme Multiple</li>
338
+ <li>Campagne Asset Affiliati</li>
339
+ <li>Tools Campagne Avanzate</li>
340
+ <li>Co-Marketing Multichannel</li>
341
+ <li><strong>2-</strong> Landing Pages Evento</li>
342
+ <li><strong>5-</strong> Multi Landing Pages & A/B Test</li>
343
+ <li><strong>2-</strong> Store eCommerce Landing</li>
344
+ <li>CSR: Metodo Cultural Impact</li>
345
+ <li>CSR: Media Relations</li>
346
+ <li>Generative AI App (inclusa)</li>
347
+ <li class="font-semibold text-gray-800">Advanced Program (2 inclusi):</li>
348
+ <li>a. Referral Martech App</li>
349
+ <li>b. Loyalty Program</li>
350
+ <li>c. Social Coalition Loyalty</li>
351
+ <li>d. Cause Related Marketing</li>
352
+ <li>e. Affiliation Management</li>
353
+ <li>f. Influencer Management</li>
354
+ </ul>
355
+ </div>
356
+ </div>
357
+ </div>
358
+ </section>
359
+
360
+ <!-- SECTION 2: PERFORMANCE CALCULATOR -->
361
+ <section class="mb-20">
362
+ <div class="bg-white border border-gray-200 rounded-2xl p-8 md:p-12 shadow-sm">
363
+ <div class="text-center mb-10">
364
+ <h2 class="text-3xl font-bold text-gray-900 mb-2">2. Aggiungi Servizi a Performance</h2>
365
+ <p class="text-gray-600">Paga solo per i risultati. Definisci tu il valore dei tuoi clienti.</p>
366
+ </div>
367
+
368
+ <div class="grid md:grid-cols-2 gap-8 items-start">
369
+ <!-- Inputs Grid -->
370
+ <div class="grid md:grid-cols-2 gap-6">
371
+ <div>
372
+ <label for="clvInput" class="block text-sm font-semibold text-gray-700 mb-2 uppercase tracking-wide">Customer Lifetime Value (CLV)</label>
373
+ <div class="relative">
374
+ <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
375
+ <span class="text-gray-500 sm:text-sm">€</span>
376
+ </div>
377
+ <input type="number" id="clvInput" placeholder="Es. 300" class="custom-input pl-7" oninput="calculateTotal()">
378
+ </div>
379
+ <p class="text-xs text-gray-400 mt-1">Valore medio di un cliente nel tempo</p>
380
+ </div>
381
+
382
+ <div>
383
+ <label for="percentageInput" class="block text-sm font-semibold text-gray-700 mb-2 uppercase tracking-wide">Percentuale a Performance</label>
384
+ <div class="relative">
385
+ <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
386
+ <span class="text-gray-500 sm:text-sm">%</span>
387
+ </div>
388
+ <input type="number" id="percentageInput" placeholder="Es. 25" class="custom-input pr-7" oninput="calculateTotal()">
389
+ </div>
390
+ <p class="text-xs text-gray-400 mt-1">La tua fee sul valore generato</p>
391
+ </div>
392
+ </div>
393
+
394
+ <!-- Cost Per Client Display -->
395
+ <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">
396
+ <div class="text-sm font-medium text-gray-500 mb-1">Costo per Nuovo Cliente</div>
397
+ <div class="text-4xl font-extrabold text-blue-600" id="costPerClient">€0.00</div>
398
+ <div class="text-xs text-gray-400 mt-2">Calcolato come (CLV × %)</div>
399
+ </div>
400
+ </div>
401
+
402
+ <div class="mt-10 pt-8 border-t border-gray-100">
403
+ <div class="flex justify-between items-end mb-4">
404
+ <label for="clientsInput" class="block text-sm font-semibold text-gray-700 uppercase tracking-wide">Nuovi Clienti Acquisiti (Simulazione)</label>
405
+ <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>
406
+ </div>
407
+ <input type="range" id="clientsInput" min="0" max="500" value="0" step="1" oninput="calculateTotal()">
408
+ <div class="flex justify-between text-xs text-gray-400 mt-2 font-medium">
409
+ <span>0</span>
410
+ <span>100</span>
411
+ <span>250</span>
412
+ <span>500+</span>
413
+ </div>
414
+ </div>
415
+ </div>
416
+ </section>
417
+
418
+ <!-- SECTION 3: SUMMARY -->
419
+ <section class="mb-20">
420
+ <div class="bg-slate-900 text-white rounded-3xl p-8 md:p-12 shadow-2xl overflow-hidden relative">
421
+ <!-- Decorative background elements -->
422
+ <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>
423
+ <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>
424
+
425
+ <h3 class="text-2xl md:text-3xl font-bold mb-8 text-center relative z-10">Riepilogo del Tuo Investimento</h3>
426
+
427
+ <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">
428
+ <div class="p-4">
429
+ <div class="text-slate-400 text-sm uppercase tracking-wider mb-2">Pacchetto Base</div>
430
+ <div class="text-2xl font-bold text-white" id="selectedPackageDisplay">Nessuno</div>
431
+ </div>
432
+ <div class="p-4">
433
+ <div class="text-slate-400 text-sm uppercase tracking-wider mb-2">Costo a Performance</div>
434
+ <div class="text-2xl font-bold text-blue-400" id="performanceTotal">€0</div>
435
+ </div>
436
+ <div class="p-4 md:pl-8">
437
+ <div class="text-slate-400 text-sm uppercase tracking-wider mb-2">Investimento Totale Stimato</div>
438
+ <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>
439
+ </div>
440
+ </div>
441
+
442
+ <div class="text-center mt-12 relative z-10">
443
+ <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()">
444
+ <span class="mr-2">📋</span>
445
+ Copia Preventivo Personalizzato
446
+ <div class="absolute inset-0 rounded-full ring-2 ring-white/20 group-hover:ring-white/40 transition-all duration-200"></div>
447
+ </button>
448
+ <p class="text-slate-500 text-sm mt-4">Il preventivo verrà copiato negli appunti per essere incollato su WhatsApp o Email.</p>
449
+ </div>
450
+ </div>
451
+ </section>
452
+ </main>
453
+
454
+ <footer class="bg-white border-t border-gray-200 py-8">
455
+ <div class="container mx-auto px-6 text-center text-gray-500 text-sm">
456
+ <p>&copy; 2024 Digital Growth Calculator. All rights reserved.</p>
457
+ <div class="mt-2">
458
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-blue-600 hover:underline">Built with anycoder</a>
459
+ </div>
460
+ </div>
461
+ </footer>
462
+
463
+ <script>
464
+ let selectedPackageName = null;
465
+ let packageCost = 0;
466
+
467
+ // Format Currency Helper
468
+ const formatMoney = (amount) => {
469
+ return new Intl.NumberFormat('it-IT', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }).format(amount);
470
+ };
471
+
472
+ const formatMoneyDetailed = (amount) => {
473
+ return new Intl.NumberFormat('it-IT', { style: 'currency', currency: 'EUR', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(amount);
474
+ };
475
+
476
+ function selectPackage(name, cost) {
477
+ // Remove selected class from all cards
478
+ document.querySelectorAll('.price-card').forEach(card => card.classList.remove('selected'));
479
+
480
+ // Add selected class to clicked card
481
+ event.currentTarget.classList.add('selected');
482
+
483
+ // Update State
484
+ selectedPackageName = name;
485
+ packageCost = cost;
486
+
487
+ // Update UI
488
+ document.getElementById('selectedPackageDisplay').textContent = `${name} (${formatMoney(cost)})`;
489
+
490
+ // Trigger animation on total cost
491
+ const totalEl = document.getElementById('totalCost');
492
+ totalEl.classList.remove('price-update-anim');
493
+ void totalEl.offsetWidth; // trigger reflow
494
+ totalEl.classList.add('price-update-anim');
495
+
496
+ calculateTotal();
497
+ }
498
+
499
+ function calculateTotal() {
500
+ // Read inputs
501
+ const clv = parseFloat(document.getElementById('clvInput').value) || 0;
502
+ const percentage = parseFloat(document.getElementById('percentageInput').value) || 0;
503
+ const clients = parseInt(document.getElementById('clientsInput').value, 10);
504
+
505
+ // Update slider display
506
+ document.getElementById('clientsValue').textContent = clients;
507
+
508
+ // Calculate Cost Per Client
509
+ const costPerClient = clv * (percentage / 100);
510
+ document.getElementById('costPerClient').textContent = formatMoneyDetailed(costPerClient);
511
+
512
+ // Calculate Total Performance Cost
513
+ const performanceCost = clients * costPerClient;
514
+ document.getElementById('performanceTotal').textContent = formatMoney(performanceCost);
515
+
516
+ // Calculate Grand Total
517
+ const total = packageCost + performanceCost;
518
+ document.getElementById('totalCost').textContent = formatMoney(total);
519
+ }
520
+
521
+ function generateQuote() {
522
+ if (!selectedPackageName) {
523
+ alert('Per favore, seleziona prima un pacchetto base.');
524
+ // Scroll to top section
525
+ document.querySelector('.grid.md\\:grid-cols-3').scrollIntoView({ behavior: 'smooth' });
526
+ return;
527
+ }
528
+
529
+ const clv = document.getElementById('clvInput').value || 'N/D';
530
+ const percentage = document.getElementById('percentageInput').value || 'N/D';
531
+ const clients = document.getElementById('clientsInput').value;
532
+
533
+ const costPerClient = (parseFloat(clv) || 0) * ((parseFloat(percentage) || 0) / 100);
534
+ const performanceCost = costPerClient * parseInt(clients, 10);
535
+ const total = packageCost + performanceCost;
536
+
537
+ // Construct Quote String
538
+ let quote = `--- PREVENTIVO SERVIZI DIGITALI ---\n\n`;
539
+ quote += `PACCHETTO BASE SELEZIONATO: ${selectedPackageName.toUpperCase()}\n`;
540
+ quote += `• Costo Una Tantum: ${formatMoney(packageCost)}\n\n`;
541
+
542
+ if (performanceCost > 0) {
543
+ quote += `SIMULAZIONE SERVIZI A PERFORMANCE\n`;
544
+ quote += `• CLV Stimato: €${clv}\n`;
545
+ quote += `• Fee a Performance: ${percentage}%\n`;
546
+ quote += `• Costo per Nuovo Cliente: ${formatMoneyDetailed(costPerClient)}\n`;
547
+ quote += `• Nuovi Clienti Acquisiti: ${clients}\n`;
548
+ quote += `• Costo Totale Performance: ${formatMoney(performanceCost)}\n\n`;
549
+ } else {
550
+ quote += `NESSUN COSTO A PERFORMANCE CALCOLATO\n\n`;
551
+ }
552
+
553
+ quote += `--- RIEPILOGO INVESTIMENTO ---\n`;
554
+ quote += `TOTALE PREVISTO: ${formatMoney(total)}\n\n`;
555
+ quote += `Preventivo generato il ${new Date().toLocaleDateString('it-IT', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}.\n`;
556
+ quote += `Calcolato tramite DigitalGrowthCalc.`;
557
+
558
+ // Copy to clipboard
559
+ navigator.clipboard.writeText(quote).then(() => {
560
+ const btn = document.querySelector('button[onclick="generateQuote()"]');
561
+ const originalText = btn.innerHTML;
562
+ btn.innerHTML = '<span class="mr-2">✅</span> Copiato!';
563
+ btn.classList.add('bg-green-600', 'hover:bg-green-700');
564
+ btn.classList.remove('bg-blue-600', 'hover:bg-blue-700');
565
+
566
+ setTimeout(() => {
567
+ btn.innerHTML = originalText;
568
+ btn.classList.remove('bg-green-600', 'hover:bg-green-700');
569
+ btn.classList.add('bg-blue-600', 'hover:bg-blue-700');
570
+ }, 2000);
571
+ }, (err) => {
572
+ console.error('Errore copia: ', err);
573
+ alert('Errore nella copia del preventivo. Riprova.');
574
+ });
575
+ }
576
+
577
+ // Initialize on load
578
+ document.addEventListener('DOMContentLoaded', () => {
579
+ calculateTotal();
580
+ });
581
+ </script>
582
+ </body>
583
+ </html>