23ec5d5f32
All checks were successful
Build and Deploy / build (push) Successful in 46s
- Add shop-mode.html and project-mode.html for separate calculation modes - Refactor index.html as a landing page for mode selection - Add Dockerfile with optimized nginx config and healthcheck - Add .dockerignore for cleaner Docker builds - Add deploy.sh for Helm/Kubernetes deployment automation - Add helm-chart/ with values.yaml, Chart.yaml, templates, and documentation - Update README.md with full instructions, features, and CI/CD examples
566 lines
24 KiB
HTML
566 lines
24 KiB
HTML
<!doctype html>
|
||
<html lang="it">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Calcolatore Prezzi - Selezione Modalità</title>
|
||
|
||
<!-- Tailwind CSS -->
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
||
<!-- Font Awesome per icone -->
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
||
/>
|
||
|
||
<!-- Google Fonts -->
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
|
||
<style>
|
||
body {
|
||
font-family: "Inter", sans-serif;
|
||
}
|
||
|
||
/* Animazioni personalizzate */
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@keyframes float {
|
||
0%,
|
||
100% {
|
||
transform: translateY(0px);
|
||
}
|
||
50% {
|
||
transform: translateY(-20px);
|
||
}
|
||
}
|
||
|
||
@keyframes gradient {
|
||
0% {
|
||
background-position: 0% 50%;
|
||
}
|
||
50% {
|
||
background-position: 100% 50%;
|
||
}
|
||
100% {
|
||
background-position: 0% 50%;
|
||
}
|
||
}
|
||
|
||
.animate-fade-in {
|
||
animation: fadeIn 0.8s ease-out;
|
||
}
|
||
|
||
.animate-float {
|
||
animation: float 3s ease-in-out infinite;
|
||
}
|
||
|
||
.gradient-animate {
|
||
background: linear-gradient(
|
||
-45deg,
|
||
#667eea,
|
||
#764ba2,
|
||
#f093fb,
|
||
#4facfe
|
||
);
|
||
background-size: 400% 400%;
|
||
animation: gradient 15s ease infinite;
|
||
}
|
||
|
||
/* Effetto glass morphism */
|
||
.glass {
|
||
background: rgba(255, 255, 255, 0.15);
|
||
backdrop-filter: blur(20px);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
|
||
}
|
||
|
||
.glass-white {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(10px);
|
||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||
}
|
||
|
||
/* Card hover effects */
|
||
.mode-card {
|
||
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||
}
|
||
|
||
.mode-card:hover {
|
||
transform: translateY(-10px) scale(1.02);
|
||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.mode-card::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
border-radius: 1.5rem;
|
||
padding: 2px;
|
||
background: linear-gradient(
|
||
45deg,
|
||
transparent,
|
||
rgba(255, 255, 255, 0.3),
|
||
transparent
|
||
);
|
||
-webkit-mask:
|
||
linear-gradient(#fff 0 0) content-box,
|
||
linear-gradient(#fff 0 0);
|
||
-webkit-mask-composite: xor;
|
||
mask-composite: exclude;
|
||
opacity: 0;
|
||
transition: opacity 0.4s ease;
|
||
}
|
||
|
||
.mode-card:hover::before {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* Custom scrollbar */
|
||
::-webkit-scrollbar {
|
||
width: 10px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
|
||
border-radius: 10px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body
|
||
class="gradient-animate min-h-screen flex items-center justify-center p-4"
|
||
>
|
||
<div class="container mx-auto max-w-7xl">
|
||
<!-- Header Section -->
|
||
<div class="text-center mb-12 animate-fade-in">
|
||
<div class="inline-block mb-6 animate-float">
|
||
<div class="glass p-6 rounded-full">
|
||
<i class="fas fa-calculator text-6xl text-white"></i>
|
||
</div>
|
||
</div>
|
||
<h1
|
||
class="text-5xl md:text-7xl font-black text-white mb-4 drop-shadow-2xl"
|
||
>
|
||
Calcolatore Prezzi
|
||
</h1>
|
||
<p class="text-xl md:text-2xl text-white/90 font-medium mb-2">
|
||
Sistema Professionale per Preventivi
|
||
</p>
|
||
<p class="text-lg text-white/75 max-w-2xl mx-auto">
|
||
Scegli la modalità di calcolo più adatta alle tue esigenze
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Mode Selection Cards -->
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
|
||
<!-- Modalità Progetto -->
|
||
<a
|
||
href="project-mode.html"
|
||
class="mode-card relative glass-white rounded-3xl p-8 cursor-pointer group overflow-hidden"
|
||
>
|
||
<!-- Gradient overlay on hover -->
|
||
<div
|
||
class="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-purple-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-3xl"
|
||
></div>
|
||
|
||
<div class="relative z-10">
|
||
<!-- Icon -->
|
||
<div class="mb-6 flex items-center justify-center">
|
||
<div
|
||
class="bg-gradient-to-br from-blue-500 to-purple-600 p-6 rounded-2xl transform group-hover:scale-110 transition-transform duration-300"
|
||
>
|
||
<i
|
||
class="fas fa-project-diagram text-5xl text-white"
|
||
></i>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Title -->
|
||
<h2
|
||
class="text-3xl font-bold text-gray-800 mb-4 text-center"
|
||
>
|
||
Modalità Progetto
|
||
</h2>
|
||
|
||
<!-- Badge -->
|
||
<div class="flex justify-center mb-4">
|
||
<span
|
||
class="bg-blue-100 text-blue-800 text-xs font-semibold px-3 py-1 rounded-full"
|
||
>
|
||
Ore • Team • Milestone
|
||
</span>
|
||
</div>
|
||
|
||
<!-- Description -->
|
||
<p
|
||
class="text-gray-600 text-center mb-6 leading-relaxed"
|
||
>
|
||
Ideale per progetti software con calcolo basato su
|
||
ore di lavoro, team members e milestone. Include
|
||
gestione completa dei regimi fiscali italiani.
|
||
</p>
|
||
|
||
<!-- Features List -->
|
||
<div class="space-y-3 mb-6">
|
||
<div class="flex items-center gap-3 text-gray-700">
|
||
<i
|
||
class="fas fa-check-circle text-green-500"
|
||
></i>
|
||
<span class="text-sm"
|
||
>Gestione Team con tariffe
|
||
personalizzate</span
|
||
>
|
||
</div>
|
||
<div class="flex items-center gap-3 text-gray-700">
|
||
<i
|
||
class="fas fa-check-circle text-green-500"
|
||
></i>
|
||
<span class="text-sm"
|
||
>Milestone e assegnazione task</span
|
||
>
|
||
</div>
|
||
<div class="flex items-center gap-3 text-gray-700">
|
||
<i
|
||
class="fas fa-check-circle text-green-500"
|
||
></i>
|
||
<span class="text-sm"
|
||
>Calcolo fiscale completo (IRPEF, IRES,
|
||
IRAP, INPS)</span
|
||
>
|
||
</div>
|
||
<div class="flex items-center gap-3 text-gray-700">
|
||
<i
|
||
class="fas fa-check-circle text-green-500"
|
||
></i>
|
||
<span class="text-sm"
|
||
>PDF Cliente e Interno separati</span
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Regimi Fiscali -->
|
||
<div class="bg-blue-50 rounded-xl p-4 mb-6">
|
||
<p class="text-xs font-semibold text-blue-800 mb-2">
|
||
REGIMI FISCALI SUPPORTATI:
|
||
</p>
|
||
<div class="flex flex-wrap gap-2">
|
||
<span
|
||
class="text-xs bg-white text-blue-700 px-2 py-1 rounded"
|
||
>Forfettario</span
|
||
>
|
||
<span
|
||
class="text-xs bg-white text-blue-700 px-2 py-1 rounded"
|
||
>Ordinario</span
|
||
>
|
||
<span
|
||
class="text-xs bg-white text-blue-700 px-2 py-1 rounded"
|
||
>SRL/SRLS</span
|
||
>
|
||
<span
|
||
class="text-xs bg-white text-blue-700 px-2 py-1 rounded"
|
||
>Occasionale</span
|
||
>
|
||
<span
|
||
class="text-xs bg-white text-blue-700 px-2 py-1 rounded"
|
||
>Minimi</span
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CTA Button -->
|
||
<div class="flex justify-center">
|
||
<div
|
||
class="bg-gradient-to-r from-blue-600 to-purple-600 text-white font-bold py-3 px-8 rounded-xl group-hover:shadow-2xl transition-shadow duration-300 flex items-center gap-2"
|
||
>
|
||
<span>Inizia</span>
|
||
<i
|
||
class="fas fa-arrow-right group-hover:translate-x-2 transition-transform duration-300"
|
||
></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- Modalità Negozio -->
|
||
<a
|
||
href="shop-mode.html"
|
||
class="mode-card relative glass-white rounded-3xl p-8 cursor-pointer group overflow-hidden"
|
||
>
|
||
<!-- Gradient overlay on hover -->
|
||
<div
|
||
class="absolute inset-0 bg-gradient-to-br from-emerald-500/20 to-teal-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-3xl"
|
||
></div>
|
||
|
||
<div class="relative z-10">
|
||
<!-- Icon -->
|
||
<div class="mb-6 flex items-center justify-center">
|
||
<div
|
||
class="bg-gradient-to-br from-emerald-500 to-teal-600 p-6 rounded-2xl transform group-hover:scale-110 transition-transform duration-300"
|
||
>
|
||
<i class="fas fa-store text-5xl text-white"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Title -->
|
||
<h2
|
||
class="text-3xl font-bold text-gray-800 mb-4 text-center"
|
||
>
|
||
Modalità Negozio
|
||
</h2>
|
||
|
||
<!-- Badge -->
|
||
<div class="flex justify-center mb-4">
|
||
<span
|
||
class="bg-emerald-100 text-emerald-800 text-xs font-semibold px-3 py-1 rounded-full"
|
||
>
|
||
Articoli • Quantità • Catalogo
|
||
</span>
|
||
</div>
|
||
|
||
<!-- Description -->
|
||
<p
|
||
class="text-gray-600 text-center mb-6 leading-relaxed"
|
||
>
|
||
Perfetto per vendita di prodotti, licenze software o
|
||
servizi a catalogo. Calcolo semplice basato su
|
||
articoli e quantità, come un e-commerce.
|
||
</p>
|
||
|
||
<!-- Features List -->
|
||
<div class="space-y-3 mb-6">
|
||
<div class="flex items-center gap-3 text-gray-700">
|
||
<i
|
||
class="fas fa-check-circle text-green-500"
|
||
></i>
|
||
<span class="text-sm"
|
||
>Catalogo articoli con codici SKU</span
|
||
>
|
||
</div>
|
||
<div class="flex items-center gap-3 text-gray-700">
|
||
<i
|
||
class="fas fa-check-circle text-green-500"
|
||
></i>
|
||
<span class="text-sm"
|
||
>Prezzi unitari e quantità</span
|
||
>
|
||
</div>
|
||
<div class="flex items-center gap-3 text-gray-700">
|
||
<i
|
||
class="fas fa-check-circle text-green-500"
|
||
></i>
|
||
<span class="text-sm"
|
||
>Sconti personalizzabili per articolo</span
|
||
>
|
||
</div>
|
||
<div class="flex items-center gap-3 text-gray-700">
|
||
<i
|
||
class="fas fa-check-circle text-green-500"
|
||
></i>
|
||
<span class="text-sm"
|
||
>Gestione spese di spedizione e IVA</span
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- IVA Options -->
|
||
<div class="bg-emerald-50 rounded-xl p-4 mb-6">
|
||
<p
|
||
class="text-xs font-semibold text-emerald-800 mb-2"
|
||
>
|
||
OPZIONI IVA:
|
||
</p>
|
||
<div class="flex flex-wrap gap-2">
|
||
<span
|
||
class="text-xs bg-white text-emerald-700 px-2 py-1 rounded"
|
||
>Esente (0%)</span
|
||
>
|
||
<span
|
||
class="text-xs bg-white text-emerald-700 px-2 py-1 rounded"
|
||
>Ridotta (4%)</span
|
||
>
|
||
<span
|
||
class="text-xs bg-white text-emerald-700 px-2 py-1 rounded"
|
||
>Ridotta (10%)</span
|
||
>
|
||
<span
|
||
class="text-xs bg-white text-emerald-700 px-2 py-1 rounded"
|
||
>Ordinaria (22%)</span
|
||
>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CTA Button -->
|
||
<div class="flex justify-center">
|
||
<div
|
||
class="bg-gradient-to-r from-emerald-600 to-teal-600 text-white font-bold py-3 px-8 rounded-xl group-hover:shadow-2xl transition-shadow duration-300 flex items-center gap-2"
|
||
>
|
||
<span>Inizia</span>
|
||
<i
|
||
class="fas fa-arrow-right group-hover:translate-x-2 transition-transform duration-300"
|
||
></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
|
||
<!-- Comparison Table -->
|
||
<div
|
||
class="glass-white rounded-3xl p-8 mb-12 animate-fade-in"
|
||
style="animation-delay: 0.2s"
|
||
>
|
||
<h3 class="text-2xl font-bold text-gray-800 mb-6 text-center">
|
||
<i class="fas fa-balance-scale text-purple-600 mr-2"></i>
|
||
Confronto Modalità
|
||
</h3>
|
||
|
||
<div class="overflow-x-auto">
|
||
<table class="w-full">
|
||
<thead>
|
||
<tr class="border-b-2 border-gray-200">
|
||
<th
|
||
class="text-left py-4 px-4 text-gray-700 font-semibold"
|
||
>
|
||
Caratteristica
|
||
</th>
|
||
<th
|
||
class="text-center py-4 px-4 text-blue-700 font-semibold"
|
||
>
|
||
<i class="fas fa-project-diagram mr-1"></i>
|
||
Progetto
|
||
</th>
|
||
<th
|
||
class="text-center py-4 px-4 text-emerald-700 font-semibold"
|
||
>
|
||
<i class="fas fa-store mr-1"></i>
|
||
Negozio
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="border-b border-gray-100">
|
||
<td class="py-3 px-4 text-gray-700">
|
||
Logica di calcolo
|
||
</td>
|
||
<td class="py-3 px-4 text-center text-sm">
|
||
Ore × Tariffe + Milestone
|
||
</td>
|
||
<td class="py-3 px-4 text-center text-sm">
|
||
Articoli × Quantità
|
||
</td>
|
||
</tr>
|
||
<tr class="border-b border-gray-100 bg-gray-50">
|
||
<td class="py-3 px-4 text-gray-700">
|
||
Gestione team
|
||
</td>
|
||
<td class="py-3 px-4 text-center">
|
||
<i class="fas fa-check text-green-500"></i>
|
||
</td>
|
||
<td class="py-3 px-4 text-center">
|
||
<i class="fas fa-times text-gray-300"></i>
|
||
</td>
|
||
</tr>
|
||
<tr class="border-b border-gray-100">
|
||
<td class="py-3 px-4 text-gray-700">
|
||
Codici SKU
|
||
</td>
|
||
<td class="py-3 px-4 text-center">
|
||
<i class="fas fa-times text-gray-300"></i>
|
||
</td>
|
||
<td class="py-3 px-4 text-center">
|
||
<i class="fas fa-check text-green-500"></i>
|
||
</td>
|
||
</tr>
|
||
<tr class="border-b border-gray-100 bg-gray-50">
|
||
<td class="py-3 px-4 text-gray-700">
|
||
Calcolo fiscale completo
|
||
</td>
|
||
<td class="py-3 px-4 text-center">
|
||
<i class="fas fa-check text-green-500"></i>
|
||
</td>
|
||
<td class="py-3 px-4 text-center text-sm">
|
||
Solo IVA
|
||
</td>
|
||
</tr>
|
||
<tr class="border-b border-gray-100">
|
||
<td class="py-3 px-4 text-gray-700">
|
||
PDF generati
|
||
</td>
|
||
<td class="py-3 px-4 text-center text-sm">
|
||
2 (Cliente + Interno)
|
||
</td>
|
||
<td class="py-3 px-4 text-center text-sm">
|
||
1 (Preventivo)
|
||
</td>
|
||
</tr>
|
||
<tr class="bg-gray-50">
|
||
<td class="py-3 px-4 text-gray-700">
|
||
Ideale per
|
||
</td>
|
||
<td class="py-3 px-4 text-center text-sm">
|
||
Progetti software
|
||
</td>
|
||
<td class="py-3 px-4 text-center text-sm">
|
||
Vendita prodotti
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Info Footer -->
|
||
<div
|
||
class="glass rounded-2xl p-6 text-center text-white animate-fade-in"
|
||
style="animation-delay: 0.4s"
|
||
>
|
||
<div
|
||
class="flex flex-col md:flex-row items-center justify-center gap-6 mb-4"
|
||
>
|
||
<div class="flex items-center gap-2">
|
||
<i class="fas fa-save text-yellow-300"></i>
|
||
<span class="text-sm">Salvataggio automatico</span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<i class="fas fa-file-pdf text-red-300"></i>
|
||
<span class="text-sm">Generazione PDF</span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<i class="fas fa-mobile-alt text-blue-300"></i>
|
||
<span class="text-sm">Responsive design</span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<i class="fas fa-lock text-green-300"></i>
|
||
<span class="text-sm"
|
||
>100% locale - Privacy garantita</span
|
||
>
|
||
</div>
|
||
</div>
|
||
<p class="text-sm text-white/80">
|
||
Tutti i dati sono salvati solo sul tuo browser. Nessuna
|
||
informazione viene inviata a server esterni.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|