je veux un site en $ avec une application quei permet de voir avec des sliding bar combien d'augmentation de profit avec une augmentation de client de fréquence de panier d,achat, a parti de 0 a 500 nouveaux client partir d'iun chiffre d,affaire de 1000$ le site est pouyr mon enrteprise de fidélisation qui s,appelle Fideliss entreprise locale couleurs #038f6e #f5962a #bac932 - Initial Deployment
01e6842 verified | <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Fideliss - Calculateur d'Augmentation de Profit</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#038f6e', | |
| secondary: '#f5962a', | |
| accent: '#bac932', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .slider-thumb::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 50%; | |
| background: #038f6e; | |
| cursor: pointer; | |
| box-shadow: 0 0 5px rgba(0,0,0,0.2); | |
| } | |
| .slider-thumb::-moz-range-thumb { | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 50%; | |
| background: #038f6e; | |
| cursor: pointer; | |
| box-shadow: 0 0 5px rgba(0,0,0,0.2); | |
| } | |
| .profit-card { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); | |
| } | |
| .profit-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); | |
| } | |
| .chart-container { | |
| height: 300px; | |
| position: relative; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Header --> | |
| <header class="bg-primary text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-chart-line text-3xl text-accent"></i> | |
| <h1 class="text-2xl md:text-3xl font-bold">Fideliss</h1> | |
| </div> | |
| <nav class="hidden md:block"> | |
| <ul class="flex space-x-6"> | |
| <li><a href="#" class="hover:text-accent transition">Accueil</a></li> | |
| <li><a href="#" class="hover:text-accent transition">Services</a></li> | |
| <li><a href="#" class="hover:text-accent transition">À propos</a></li> | |
| <li><a href="#" class="hover:text-accent transition">Contact</a></li> | |
| </ul> | |
| </nav> | |
| <button class="md:hidden text-2xl"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="bg-gradient-to-r from-primary to-accent text-white py-16"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Boostez vos profits avec Fideliss</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Notre outil vous montre l'impact de la fidélisation client sur votre chiffre d'affaires</p> | |
| <a href="#calculator" class="bg-secondary hover:bg-opacity-90 text-white font-bold py-3 px-6 rounded-full transition shadow-lg"> | |
| Essayer le calculateur | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Calculator Section --> | |
| <section id="calculator" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-primary">Calculateur d'Augmentation de Profit</h2> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Input Controls --> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-md lg:col-span-1"> | |
| <h3 class="text-xl font-semibold mb-6 text-secondary">Paramètres</h3> | |
| <div class="space-y-8"> | |
| <!-- Chiffre d'affaires initial --> | |
| <div> | |
| <label for="initialRevenue" class="block text-sm font-medium text-gray-700 mb-2">Chiffre d'affaires initial ($)</label> | |
| <input type="number" id="initialRevenue" value="1000" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary"> | |
| </div> | |
| <!-- Nouveaux clients --> | |
| <div> | |
| <label for="newClients" class="block text-sm font-medium text-gray-700 mb-2">Nouveaux clients (0-500)</label> | |
| <input type="range" id="newClients" min="0" max="500" value="100" class="w-full slider-thumb"> | |
| <div class="flex justify-between text-xs text-gray-500 mt-1"> | |
| <span>0</span> | |
| <span id="newClientsValue">100</span> | |
| <span>500</span> | |
| </div> | |
| </div> | |
| <!-- Fréquence d'achat --> | |
| <div> | |
| <label for="purchaseFrequency" class="block text-sm font-medium text-gray-700 mb-2">Fréquence d'achat (% d'augmentation)</label> | |
| <input type="range" id="purchaseFrequency" min="0" max="100" value="10" class="w-full slider-thumb"> | |
| <div class="flex justify-between text-xs text-gray-500 mt-1"> | |
| <span>0%</span> | |
| <span id="purchaseFrequencyValue">10%</span> | |
| <span>100%</span> | |
| </div> | |
| </div> | |
| <!-- Valeur moyenne du panier --> | |
| <div> | |
| <label for="averageCart" class="block text-sm font-medium text-gray-700 mb-2">Valeur moyenne du panier ($)</label> | |
| <input type="number" id="averageCart" value="50" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-primary focus:border-primary"> | |
| </div> | |
| <!-- Marge bénéficiaire --> | |
| <div> | |
| <label for="profitMargin" class="block text-sm font-medium text-gray-700 mb-2">Marge bénéficiaire (%)</label> | |
| <input type="range" id="profitMargin" min="0" max="100" value="25" class="w-full slider-thumb"> | |
| <div class="flex justify-between text-xs text-gray-500 mt-1"> | |
| <span>0%</span> | |
| <span id="profitMarginValue">25%</span> | |
| <span>100%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Results --> | |
| <div class="lg:col-span-2"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> | |
| <!-- CA Initial --> | |
| <div class="profit-card bg-white p-6 rounded-xl border-l-4 border-primary shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="p-3 rounded-full bg-primary bg-opacity-10 text-primary mr-4"> | |
| <i class="fas fa-dollar-sign text-xl"></i> | |
| </div> | |
| <h4 class="font-semibold text-gray-700">CA Initial</h4> | |
| </div> | |
| <p class="text-3xl font-bold text-primary" id="initialRevenueDisplay">$1,000</p> | |
| </div> | |
| <!-- Nouveau CA --> | |
| <div class="profit-card bg-white p-6 rounded-xl border-l-4 border-secondary shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="p-3 rounded-full bg-secondary bg-opacity-10 text-secondary mr-4"> | |
| <i class="fas fa-chart-line text-xl"></i> | |
| </div> | |
| <h4 class="font-semibold text-gray-700">Nouveau CA</h4> | |
| </div> | |
| <p class="text-3xl font-bold text-secondary" id="newRevenueDisplay">$1,500</p> | |
| </div> | |
| <!-- Profit Initial --> | |
| <div class="profit-card bg-white p-6 rounded-xl border-l-4 border-accent shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="p-3 rounded-full bg-accent bg-opacity-10 text-accent mr-4"> | |
| <i class="fas fa-wallet text-xl"></i> | |
| </div> | |
| <h4 class="font-semibold text-gray-700">Profit Initial</h4> | |
| </div> | |
| <p class="text-3xl font-bold text-accent" id="initialProfitDisplay">$250</p> | |
| </div> | |
| <!-- Nouveau Profit --> | |
| <div class="profit-card bg-white p-6 rounded-xl border-l-4 border-primary shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="p-3 rounded-full bg-primary bg-opacity-20 text-primary mr-4"> | |
| <i class="fas fa-piggy-bank text-xl"></i> | |
| </div> | |
| <h4 class="font-semibold text-gray-700">Nouveau Profit</h4> | |
| </div> | |
| <p class="text-3xl font-bold text-primary" id="newProfitDisplay">$375</p> | |
| </div> | |
| </div> | |
| <!-- Graph --> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <h3 class="text-xl font-semibold mb-6 text-primary">Visualisation de l'augmentation</h3> | |
| <div class="chart-container"> | |
| <canvas id="profitChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-primary">Comment Fideliss augmente vos profits</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-xl shadow-md text-center"> | |
| <div class="w-16 h-16 bg-primary bg-opacity-10 text-primary rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-users text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-secondary">Fidélisation client</h3> | |
| <p class="text-gray-600">Augmentez le nombre de clients fidèles qui reviennent régulièrement dans votre établissement.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md text-center"> | |
| <div class="w-16 h-16 bg-secondary bg-opacity-10 text-secondary rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-shopping-cart text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-primary">Fréquence d'achat</h3> | |
| <p class="text-gray-600">Incitez vos clients à acheter plus souvent grâce à des programmes de fidélité attractifs.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md text-center"> | |
| <div class="w-16 h-16 bg-accent bg-opacity-10 text-accent rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-chart-pie text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-secondary">Valeur du panier</h3> | |
| <p class="text-gray-600">Augmentez le montant moyen dépensé par vos clients à chaque visite.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 bg-primary text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Prêt à booster votre entreprise ?</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Contactez-nous dès aujourd'hui pour mettre en place une stratégie de fidélisation sur mesure.</p> | |
| <a href="#" class="bg-white hover:bg-gray-100 text-primary font-bold py-3 px-8 rounded-full transition shadow-lg inline-block"> | |
| Nous contacter | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-chart-line text-accent mr-2"></i> Fideliss | |
| </h3> | |
| <p class="text-gray-400">Votre partenaire en fidélisation client pour augmenter vos profits de manière durable.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-lg mb-4">Liens rapides</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-accent transition">Accueil</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-accent transition">Services</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-accent transition">Calculateur</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-accent transition">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-lg mb-4">Contact</h4> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li class="flex items-center"><i class="fas fa-map-marker-alt mr-2 text-accent"></i> Adresse locale</li> | |
| <li class="flex items-center"><i class="fas fa-phone mr-2 text-accent"></i> +1 234 567 890</li> | |
| <li class="flex items-center"><i class="fas fa-envelope mr-2 text-accent"></i> contact@fideliss.com</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-lg mb-4">Réseaux sociaux</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-accent transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-accent transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-accent transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-700 rounded-full flex items-center justify-center hover:bg-accent transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400"> | |
| <p>© 2023 Fideliss. Tous droits réservés.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Chart.js --> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script> | |
| // DOM Elements | |
| const initialRevenueInput = document.getElementById('initialRevenue'); | |
| const newClientsInput = document.getElementById('newClients'); | |
| const newClientsValue = document.getElementById('newClientsValue'); | |
| const purchaseFrequencyInput = document.getElementById('purchaseFrequency'); | |
| const purchaseFrequencyValue = document.getElementById('purchaseFrequencyValue'); | |
| const averageCartInput = document.getElementById('averageCart'); | |
| const profitMarginInput = document.getElementById('profitMargin'); | |
| const profitMarginValue = document.getElementById('profitMarginValue'); | |
| // Display Elements | |
| const initialRevenueDisplay = document.getElementById('initialRevenueDisplay'); | |
| const newRevenueDisplay = document.getElementById('newRevenueDisplay'); | |
| const initialProfitDisplay = document.getElementById('initialProfitDisplay'); | |
| const newProfitDisplay = document.getElementById('newProfitDisplay'); | |
| // Chart | |
| let profitChart; | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', function() { | |
| updateCalculations(); | |
| setupEventListeners(); | |
| initializeChart(); | |
| }); | |
| function setupEventListeners() { | |
| // Input event listeners | |
| initialRevenueInput.addEventListener('input', updateCalculations); | |
| newClientsInput.addEventListener('input', function() { | |
| newClientsValue.textContent = this.value; | |
| updateCalculations(); | |
| }); | |
| purchaseFrequencyInput.addEventListener('input', function() { | |
| purchaseFrequencyValue.textContent = this.value + '%'; | |
| updateCalculations(); | |
| }); | |
| averageCartInput.addEventListener('input', updateCalculations); | |
| profitMarginInput.addEventListener('input', function() { | |
| profitMarginValue.textContent = this.value + '%'; | |
| updateCalculations(); | |
| }); | |
| } | |
| function updateCalculations() { | |
| // Get input values | |
| const initialRevenue = parseFloat(initialRevenueInput.value) || 0; | |
| const newClients = parseInt(newClientsInput.value) || 0; | |
| const purchaseFrequency = parseInt(purchaseFrequencyInput.value) || 0; | |
| const averageCart = parseFloat(averageCartInput.value) || 0; | |
| const profitMargin = parseInt(profitMarginInput.value) || 0; | |
| // Calculate new revenue | |
| const additionalRevenue = newClients * averageCart * (1 + purchaseFrequency/100); | |
| const newRevenue = initialRevenue + additionalRevenue; | |
| // Calculate profits | |
| const initialProfit = initialRevenue * (profitMargin/100); | |
| const newProfit = newRevenue * (profitMargin/100); | |
| // Update displays | |
| initialRevenueDisplay.textContent = formatCurrency(initialRevenue); | |
| newRevenueDisplay.textContent = formatCurrency(newRevenue); | |
| initialProfitDisplay.textContent = formatCurrency(initialProfit); | |
| newProfitDisplay.textContent = formatCurrency(newProfit); | |
| // Update chart | |
| updateChart(initialRevenue, newRevenue, initialProfit, newProfit); | |
| } | |
| function formatCurrency(amount) { | |
| return '$' + amount.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'); | |
| } | |
| function initializeChart() { | |
| const ctx = document.getElementById('profitChart').getContext('2d'); | |
| profitChart = new Chart(ctx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['CA Initial', 'Nouveau CA', 'Profit Initial', 'Nouveau Profit'], | |
| datasets: [{ | |
| label: 'Montant ($)', | |
| data: [1000, 1500, 250, 375], | |
| backgroundColor: [ | |
| 'rgba(3, 143, 110, 0.7)', | |
| 'rgba(245, 150, 42, 0.7)', | |
| 'rgba(186, 201, 50, 0.7)', | |
| 'rgba(3, 143, 110, 0.7)' | |
| ], | |
| borderColor: [ | |
| 'rgba(3, 143, 110, 1)', | |
| 'rgba(245, 150, 42, 1)', | |
| 'rgba(186, 201, 50, 1)', | |
| 'rgba(3, 143, 110, 1)' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| ticks: { | |
| callback: function(value) { | |
| return '$' + value.toLocaleString(); | |
| } | |
| } | |
| } | |
| }, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| return '$' + context.raw.toLocaleString(); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| } | |
| function updateChart(initialRevenue, newRevenue, initialProfit, newProfit) { | |
| profitChart.data.datasets[0].data = [initialRevenue, newRevenue, initialProfit, newProfit]; | |
| profitChart.update(); | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Zenmarc/fideliss" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |