Nexus / templates /tarifs.html
ernestmindres's picture
Update templates/tarifs.html
e1e5b1e verified
<!DOCTYPE html>
<html lang="fr" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="https://i.imgur.com/7Gn3toV.png">
<title>Tarifs - Nexus Pro</title>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0" />
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* Assure une meilleure compatibilité responsive pour la grille */
.pricing-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
/* Variables de Thème - Couleurs Noir Foncé (Mode Sombre par défaut) */
:root, html.dark {
--bg-page: #181818; /* Noir très foncé, pas de bleu marine */
--bg-card: #282828;
--text-main: #EAEAEA;
--text-secondary: #B0B0B0;
--border-color: #404040;
--shadow-color: rgba(0, 0, 0, 0.5);
}
/* Mode Clair */
html.light {
--bg-page: #F5F5F5;
--bg-card: #FFFFFF;
--text-main: #202020;
--text-secondary: #5C5C5C;
--border-color: #E0E0E0;
--shadow-color: rgba(0, 0, 0, 0.1);
}
/* Application des variables */
body {
background-color: var(--bg-page);
color: var(--text-main);
transition: background-color 0.3s, color 0.3s;
}
.bg-gray-900 { background-color: var(--bg-page) !important; }
.text-white { color: var(--text-main) !important; }
.bg-gray-800, .bg-gray-800\/50 {
background-color: var(--bg-card) !important;
box-shadow: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color);
}
.text-gray-400 { color: var(--text-secondary) !important; }
.border-gray-700, .border-gray-800 { border-color: var(--border-color) !important; }
.text-gray-300 { color: var(--text-secondary) !important; } /* Utilisation de la même couleur pour uniformité */
.bg-gray-700 { background-color: #404040 !important; }
.theme-switch {
background: none;
border: none;
cursor: pointer;
color: var(--text-main);
font-size: 24px;
transition: color 0.2s;
padding: 0.5rem; /* Espace autour du bouton */
}
</style>
</head>
<body class="min-h-screen">
<div class="container mx-auto p-4 sm:p-6 lg:p-8 max-w-7xl">
<header class="sticky top-0 z-50 flex flex-col sm:flex-row justify-between items-center py-4 border-b border-blue-500/50 mb-8 bg-gray-900" style="background-color: var(--bg-page); transition: background-color 0.3s;">
<a href="/" class="text-4xl font-extrabold text-blue-500 tracking-wider mb-4 sm:mb-0">
NEXUS
</a>
<nav class="flex items-center space-x-4">
<a href="/documentation" class="px-4 py-2 text-white hover:text-blue-300 transition duration-200 font-medium">
Documentation
</a>
<a href="/a-propos" class="px-4 py-2 text-white hover:text-blue-300 transition duration-200 font-medium">
À Propos
</a>
<button id="theme-toggle" class="theme-switch" aria-label="Basculer le thème">
<span class="material-symbols-rounded">light_mode</span>
</button>
{% if is_logged_in %}
<a href="/dashboard" class="px-4 py-2 bg-blue-600 border border-blue-600 hover:bg-blue-700 font-medium transition duration-200">
Dashboard
</a>
{% else %}
<a href="/connexion" class="px-4 py-2 bg-blue-600 border border-blue-600 hover:bg-blue-700 font-medium transition duration-200">
Connexion
</a>
{% endif %}
</nav>
</header>
<main class="space-y-12">
<section class="text-center p-8 bg-gray-800/50 shadow-lg">
<h1 class="text-5xl font-extrabold text-white mb-4 leading-tight">
Plans de Tarification
</h1>
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
Sécurité robuste et évolutive. Choisissez le plan adapté à votre nombre d'utilisateurs.
</p>
<div class="mt-8 flex justify-center">
<div class="inline-flex bg-gray-700 p-1 rounded-full shadow-inner">
<button id="monthly-btn" class="px-6 py-2 text-sm font-semibold bg-blue-600 text-white shadow-md transition duration-200 rounded-full">
Mensuel
</button>
<button id="annual-btn" class="px-6 py-2 text-sm font-semibold text-gray-300 hover:text-white transition duration-200 rounded-full relative">
Annuel
<span class="ml-2 px-2 py-0.5 bg-yellow-500 text-black text-xs font-bold rounded-full">
ÉCONOMISEZ ~17%
</span>
</button>
</div>
</div>
</section>
<div class="grid pricing-grid gap-8">
<div class="bg-gray-800 p-6 shadow-2xl border-t-4 border-teal-300 flex flex-col">
<h2 class="text-2xl font-bold text-teal-400 mb-2">Développeur</h2>
<p class="text-gray-400 mb-6 text-sm">Tests et prototypes.</p>
<div class="text-4xl font-extrabold text-white mb-8">
0<span class="text-xl text-gray-400 price-unit"> €/mois</span>
</div>
<div class="text-lg font-semibold text-white mb-4 border-b border-gray-700 pb-2">
Jusqu'à 500 Comptes Utilisateurs
</div>
<ul class="space-y-3 flex-grow text-sm">
<li class="flex items-start text-gray-300">
<svg class="w-5 h-5 text-teal-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Authentification Sécurisée (API & URL)
</li>
<li class="flex items-start text-gray-300">
<svg class="w-5 h-5 text-teal-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Logs d'activité de base
</li>
<li class="flex items-start text-gray-300">
<svg class="w-5 h-5 text-teal-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Support par email communautaire
</li>
</ul>
<a href="/inscription" class="mt-8 block text-center px-6 py-3 bg-teal-600 text-white text-lg font-bold shadow-md hover:bg-teal-700 transition duration-300 plan-button" data-plan="developer">
Commencer Gratuitement
</a>
</div>
<div class="bg-gray-800 p-6 shadow-2xl border-t-4 border-yellow-500 flex flex-col">
<h2 class="text-2xl font-bold text-yellow-400 mb-2">Standard</h2>
<p class="text-gray-400 mb-6 text-sm">Premier pas vers la production.</p>
<div class="text-4xl font-extrabold text-white mb-8">
<span class="monthly-price" data-price="5">5</span>
<span class="annual-price hidden" data-price="50">50</span>
<span class="text-xl text-gray-400 price-unit"> €/mois</span>
</div>
<div class="text-lg font-semibold text-white mb-4 border-b border-gray-700 pb-2">
Jusqu'à 1 000 Comptes Utilisateurs
</div>
<ul class="space-y-3 flex-grow text-sm">
<li class="flex items-start text-gray-300">
<svg class="w-5 h-5 text-yellow-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Authentification Sécurisée
</li>
<li class="flex items-start text-gray-300">
<svg class="w-5 h-5 text-yellow-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Logs d'activité avancés
</li>
<li class="flex items-start text-gray-300">
<svg class="w-5 h-5 text-yellow-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Support par email standard (24-48h)
</li>
<li class="flex items-start text-gray-300">
<svg class="w-5 h-5 text-yellow-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Option de dépassement ($/100 comptes)
</li>
</ul>
<a href="/checkout?plan=standard_monthly" class="mt-8 block text-center px-6 py-3 bg-yellow-600 text-white text-lg font-bold shadow-md hover:bg-yellow-700 transition duration-300 plan-button" data-plan="standard">
Choisir Standard
</a>
</div>
<div class="bg-gray-800 p-6 shadow-2xl border-t-4 border-blue-500 flex flex-col relative">
<span class="absolute top-0 right-0 -mt-3 -mr-3 bg-indigo-500 text-white font-bold py-1 px-3 shadow-lg text-xs">POPULAIRE</span>
<h2 class="text-2xl font-bold text-blue-400 mb-2">Professionnel</h2>
<p class="text-gray-400 mb-6 text-sm">Croissance et haute disponibilité.</p>
<div class="text-4xl font-extrabold text-white mb-8">
<span class="monthly-price" data-price="10">10</span>
<span class="annual-price hidden" data-price="100">100</span>
<span class="text-xl text-gray-400 price-unit"> €/mois</span>
</div>
<div class="text-lg font-semibold text-white mb-4 border-b border-gray-700 pb-2">
Jusqu'à 2 000 Comptes Utilisateurs
</div>
<ul class="space-y-3 flex-grow text-sm">
<li class="flex items-start text-gray-300">
<svg class="w-5 h-5 text-blue-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Monitoring et Alertes en Temps Réel
</li>
<li class="flex items-start text-gray-300">
<svg class="w-5 h-5 text-blue-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Logs API Détaillés (Accès à `/api-logs`)
</li>
<li class="flex items-start text-gray-300">
<svg class="w-5 h-5 text-blue-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Support Prioritaire (24h)
</li>
<li class="flex items-start text-gray-300">
<svg class="w-5 h-5 text-blue-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Option de dépassement ($/100 comptes)
</li>
</ul>
<a href="/checkout?plan=professional_monthly" class="mt-8 block text-center px-6 py-3 bg-blue-600 text-white text-lg font-bold shadow-md hover:bg-blue-700 transition duration-300 plan-button" data-plan="professional">
Passer au Plan Pro
</a>
</div>
<div class="bg-gray-800 p-6 shadow-2xl border-t-4 border-red-500 flex flex-col">
<h2 class="text-2xl font-bold text-red-400 mb-2">Entreprise</h2>
<p class="text-gray-400 mb-6 text-sm">Solutions haut de gamme et grandes équipes.</p>
<div class="text-4xl font-extrabold text-white mb-8">
<span class="monthly-price" data-price="Sur Devis">Sur Devis</span>
<span class="annual-price hidden" data-price="Sur Devis">Sur Devis</span>
<span class="text-xl text-gray-400 price-unit"></span>
</div>
<div class="text-lg font-semibold text-white mb-4 border-b border-gray-700 pb-2">
Comptes Utilisateurs Illimités
</div>
<ul class="space-y-3 flex-grow text-sm">
<li class="flex items-start text-gray-300">
<svg class="w-5 h-5 text-red-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Garantie de Niveau de Service (SLA)
</li>
<li class="flex items-start text-gray-300">
<svg class="w-5 h-5 text-red-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Authentification Unique (SSO)
</li>
<li class="flex items-start text-gray-300">
<svg class="w-5 h-5 text-red-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Gestion des Accès Privilégiés
</li>
<li class="flex items-start text-gray-300">
<svg class="w-5 h-5 text-red-500 mr-2 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
Support Dédicacé 24/7
</li>
</ul>
<a href="/contact" class="mt-8 block text-center px-6 py-3 bg-red-600 text-white text-lg font-bold shadow-md hover:bg-red-700 transition duration-300 plan-button" data-plan="enterprise">
Contacter les Ventes
</a>
</div>
</div>
</main>
<footer class="mt-12 pt-6 border-t border-gray-700 text-center text-gray-500 text-sm">
&copy; 2025 Nexus. Tarifs et Plans de Service.
</footer>
</div>
<script>
const monthlyBtn = document.getElementById('monthly-btn');
const annualBtn = document.getElementById('annual-btn');
const monthlyPrices = document.querySelectorAll('.monthly-price');
const annualPrices = document.querySelectorAll('.annual-price');
const priceUnits = document.querySelectorAll('.price-unit');
const planButtons = document.querySelectorAll('.plan-button'); // Nouveaux boutons
// ... (Logique de bascule du mode sombre/clair - inchangée) ...
const themeToggle = document.getElementById('theme-toggle');
const htmlElement = document.documentElement;
const iconElement = themeToggle.querySelector('.material-symbols-rounded');
// Charger le thème depuis le localStorage
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'light') {
htmlElement.classList.remove('dark');
htmlElement.classList.add('light');
iconElement.textContent = 'dark_mode';
} else {
// Dark mode par défaut si rien n'est sauvegardé ou 'dark'
htmlElement.classList.add('dark');
htmlElement.classList.remove('light');
iconElement.textContent = 'light_mode';
}
themeToggle.addEventListener('click', () => {
if (htmlElement.classList.contains('light')) {
htmlElement.classList.remove('light');
htmlElement.classList.add('dark');
localStorage.setItem('theme', 'dark');
iconElement.textContent = 'light_mode';
} else {
htmlElement.classList.add('light');
htmlElement.classList.remove('dark');
localStorage.setItem('theme', 'light');
iconElement.textContent = 'dark_mode';
}
});
// ... (Fin de la logique de bascule du mode sombre/clair) ...
// Fonction pour mettre à jour l'affichage des tarifs et les liens
function updatePricing(isAnnual) {
const period = isAnnual ? '_annual' : '_monthly';
const unit = isAnnual ? ' €/an' : ' €/mois';
// Mise à jour visuelle des boutons Mensuel/Annuel
monthlyBtn.classList.remove('bg-blue-600', 'text-white');
monthlyBtn.classList.add('text-gray-300', 'hover:text-white');
annualBtn.classList.remove('bg-blue-600', 'text-white');
annualBtn.classList.add('text-gray-300', 'hover:text-white');
if (isAnnual) {
annualBtn.classList.add('bg-blue-600', 'text-white');
annualBtn.classList.remove('text-gray-300', 'hover:text-white');
} else {
monthlyBtn.classList.add('bg-blue-600', 'text-white');
monthlyBtn.classList.remove('text-gray-300', 'hover:text-white');
}
// Mise à jour des prix et des unités
monthlyPrices.forEach(el => el.classList.toggle('hidden', isAnnual));
annualPrices.forEach(el => el.classList.toggle('hidden', !isAnnual));
priceUnits.forEach(el => el.textContent = unit);
// Le plan développeur est toujours gratuit, mais l'unité change
document.querySelector('.pricing-grid > div:first-child .price-unit').textContent = unit;
// Le plan entreprise est "Sur Devis" sans unité
document.querySelector('.pricing-grid > div:last-child .price-unit').textContent = '';
// Mise à jour des liens des boutons
planButtons.forEach(button => {
const planType = button.getAttribute('data-plan');
if (planType === 'developer') {
button.setAttribute('href', '/inscription'); // Gratuit, lien inchangé
} else if (planType === 'enterprise') {
button.setAttribute('href', '/contact'); // Sur Devis, lien inchangé
} else {
button.setAttribute('href', `/checkout?plan=${planType}${period}`);
}
});
}
// Événements Tarification
monthlyBtn.addEventListener('click', () => updatePricing(false));
annualBtn.addEventListener('click', () => updatePricing(true));
// Initialisation Tarification au chargement
updatePricing(false);
</script>
<footer class="mt-16 border-t border-gray-700 bg-gray-900" style="background-color: var(--bg-card); border-color: var(--border-color);">
<div class="container mx-auto p-4 sm:p-6 lg:p-8 max-w-7xl">
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 text-sm">
<div class="col-span-2 lg:col-span-1">
<a href="/" class="text-3xl font-extrabold text-blue-500 tracking-wider">NEXUS</a>
<p class="mt-3 text-gray-400">
L'infrastructure API qui propulse votre avenir technologique.
</p>
<div class="mt-4 flex space-x-4">
<a href="#" class="text-gray-400 hover:text-blue-500 transition duration-200">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.014 4.85.07c3.275.146 4.47 1.583 4.61 4.85.056 1.266.07 1.646.07 4.85s-.014 3.584-.07 4.85c-.14 3.267-1.335 4.704-4.61 4.85-1.266.056-1.646.07-4.85.07s-3.584-.014-4.85-.07c-3.275-.146-4.47-1.583-4.61-4.85-.056-1.266-.07-1.646-.07-4.85s.014-3.584.07-4.85c.14-3.267 1.335-4.704 4.61-4.85 1.266-.056 1.646-.07 4.85-.07zM12 0c-3.784 0-4.285.016-5.773.083-4.722.211-6.755 2.24-6.965 6.965C.016 7.715 0 8.216 0 12s.016 4.285.083 5.773c.21 4.721 2.239 6.755 6.965 6.965 1.488.067 1.99.083 5.773.083s4.285-.016 5.773-.083c4.721-.21 6.755-2.239 6.965-6.965.067-1.488.083-1.99.083-5.773s-.016-4.285-.083-5.773c-.21-4.722-2.239-6.755-6.965-6.965C16.285.016 15.784 0 12 0zm0 14.5c-1.381 0-2.5-1.119-2.5-2.5s1.119-2.5 2.5-2.5 2.5 1.119 2.5 2.5-1.119 2.5-2.5 2.5z"/></svg>
</a>
</div>
</div>
<div>
<h3 class="text-lg font-semibold text-white mb-4">Plateforme</h3>
<ul class="space-y-3 text-gray-400">
<li><a href="/tarifs" class="hover:text-blue-500 transition duration-200">Tarifs</a></li>
<li><a href="/documentation" class="hover:text-blue-500 transition duration-200">Documentation</a></li>
<li><a href="/connexion" class="hover:text-blue-500 transition duration-200">Connexion</a></li>
<li><a href="/support" class="hover:text-blue-500 transition duration-200">Support</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold text-white mb-4">Légal</h3>
<ul class="space-y-3 text-gray-400">
<li><a href="/politique-confidentialite" class="hover:text-blue-500 transition duration-200">Politique de Confidentialité</a></li>
<li><a href="/mentions-legales" class="hover:text-blue-500 transition duration-200">Mentions Légales</a></li>
<li><a href="/conditions-utilisation" class="hover:text-blue-500 transition duration-200">Conditions d'Utilisation</a></li>
<li><a href="/a-propos" class="hover:text-blue-500 transition duration-200">À Propos</a></li>
</ul>
</div>
<div class="col-span-2 md:col-span-1">
<h3 class="text-lg font-semibold text-white mb-4">Ressources</h3>
<ul class="space-y-3 text-gray-400">
<li><a href="mailto:support@nexus.com" class="hover:text-blue-500 transition duration-200">Contact Email</a></li>
<li><a href="/dashboard" class="hover:text-blue-500 transition duration-200">Espace Client</a></li>
<li><a href="/api-logs" class="hover:text-blue-500 transition duration-200">Statut API</a></li>
</ul>
</div>
</div>
<div class="mt-10 pt-6 border-t border-gray-800 text-center text-gray-500 text-sm" style="border-color: var(--border-color);">
&copy; 2025 Nexus. Tous droits réservés. Construit pour l'ère des microservices.
</div>
</div>
</footer>
</body>
</html>