Files
website/tarifs.php
2026-02-04 11:55:51 +01:00

841 lines
31 KiB
PHP

<?php
require_once "includes/_config.php";
$currentPage = $pages["tarifs"];
?><!DOCTYPE html>
<html lang="fr">
<head>
<?php include "includes/_meta.php"; ?>
<meta name="description" content="clawd.fr Solutions d'hébergement Nextcloud à prix libre" />
<link rel="canonical" href="https://clawd.fr/tarifs" />
<title>clawd.fr - Service d'hébergement Nextcloud à prix libre</title>
<?php include "includes/_assets.php"; ?>
<style>
/* === VARIABLES ET RESET === */
:root {
--primary-dark: #1b1c1d;
--primary-blue: #274c77;
--accent-blue: #2185d0;
--light-bg: #f8f9fa;
--border-color: #d4d4d5;
--text-dark: #414141;
--text-muted: rgba(0, 0, 0, 0.6);
}
.pusher {
overflow: visible !important;
}
/* Overflow hidden uniquement quand la sidebar est visible */
.pusher.dimmed {
overflow: hidden !important;
}
.sticky-wrapper {
position: relative;
overflow: visible;
min-height: 100vh;
}
/* === INTRODUCTION === */
.intro-section {
/*background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);*/
padding: 2em 0;
margin-bottom: 2em;
border-radius: 8px;
}
.intro-section p {
font-size: 1.05em;
line-height: 1.7;
color: var(--text-dark);
margin-bottom: 1em;
}
/* === LÉGENDE DES TRANCHES === */
.price-legend {
background: white;
border-radius: 8px;
padding: 1.5em;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
margin-bottom: 2em;
}
.price-legend h3 {
color: var(--primary-dark);
font-size: 1.9em;
margin-bottom: 0.3em;
font-weight: 600;
}
.price-legend .legend-item {
display: flex;
align-items: center;
padding: 0.7em 0;
border-bottom: 1px solid #f0f0f0;
}
.price-legend .legend-item:last-child {
border-bottom: none;
}
.legend-badge {
display: inline-block;
padding: 0.4em 0.8em;
border-radius: 4px;
font-size: 0.9em;
font-weight: 600;
min-width: 90px;
text-align: center;
margin-right: 1em;
color: white;
}
.legend-badge.teal { background-color: #00b5ad; }
.legend-badge.blue { background-color: #2185d0; }
.legend-badge.violet { background-color: #6435c9; }
.legend-badge.purple { background-color: #a333c8; }
.legend-description {
flex: 1;
color: var(--text-muted);
font-size: 0.95em;
}
/* === FORMULES D'EXEMPLES === */
.examples-section {
background: white;
border-radius: 8px;
padding: 1.5em;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
margin-bottom: 2em;
}
.examples-section h3 {
color: var(--primary-dark);
font-size: 1.6em;
margin-bottom: 0.3em;
font-weight: 600;
}
.examples-section .sub-header {
color: var(--text-muted);
font-size: 0.95em;
margin-bottom: 1.5em;
}
.example-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 0.8em;
}
.example-card {
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
border: 2px solid transparent;
border-radius: 8px;
padding: 0.8em 1em;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
/* Icônes en arrière-plan avec couleurs douces */
.example-card::before {
content: '';
position: absolute;
right: -10px;
top: 50%;
transform: translateY(-50%);
font-family: 'Icons';
font-size: 4em;
opacity: 0.08;
color: var(--accent-blue);
z-index: 0;
}
.example-card[data-formula="solo"]::before {
content: '\f007'; /* user icon */
color: #00b5ad;
}
.example-card[data-formula="team"]::before {
content: '\f0c0'; /* users icon */
color: #2185d0;
}
.example-card[data-formula="company"]::before {
content: '\f1ad'; /* building icon */
color: #6435c9;
}
.example-card[data-formula="industry"]::before {
content: '\f275'; /* industry icon */
color: #6435c9;
}
.example-card[data-formula="storage"]::before {
content: '\f1c0'; /* database icon */
color: #a333c8;
}
.example-card[data-formula="developer"]::before {
content: '\f121'; /* code icon */
color: #21ba45;
}
.example-card[data-formula="devteam"]::before {
content: '\f233'; /* server icon */
color: #21ba45;
}
.example-card:hover {
border-color: var(--accent-blue);
box-shadow: 0 4px 12px rgba(33, 133, 208, 0.15);
transform: translateY(-2px);
}
.example-card .icon {
display: none; /* Masquer l'icône inline */
}
.example-card .title {
color: var(--primary-dark);
font-weight: 600;
font-size: 1em;
margin-bottom: 0.3em;
position: relative;
z-index: 1;
}
.example-card .description {
color: var(--text-muted);
font-size: 0.85em;
line-height: 1.3;
position: relative;
z-index: 1;
}
/* === BLOC INFORMATIONS TARIFS === */
.tarif-info {
background: linear-gradient(135deg, var(--primary-dark) 0%, #2c2d2e 100%);
border-radius: 8px;
padding: 2em;
margin-bottom: 2em;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.tarif-info h4 {
color: #ffffff;
font-size: 2em;
margin-bottom: 0.3em;
font-weight: 600;
}
.tarif-info .info-columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2em;
}
.tarif-info ul {
list-style: none;
padding: 0;
margin: 0;
}
.tarif-info li {
color: #e0e0e0;
padding: .2em 1.5em;
/*padding-left: 1.5em;*/
position: relative;
font-size: 1.1em;
}
.tarif-info li:before {
content: "✓";
position: absolute;
left: 0;
color: #21ba45;
font-weight: bold;
}
/* === CALCULATEUR === */
#calc {
border: none;
box-shadow: none;
padding: 0;
margin-bottom: 2em;
}
/* === FIX MENU PRINCIPAL === */
/* Le menu fixed doit être au-dessus du wrapper */
.fixed.menu {
z-index: 101 !important;
}
/* S'assurer que le menu reste caché par défaut */
.fixed.menu {
opacity: 0;
visibility: hidden;
}
/* Quand Semantic UI l'affiche avec transition */
.fixed.menu.visible,
.fixed.menu.transition.visible {
opacity: 1 !important;
visibility: visible !important;
}
/* === CONTEXT POUR STICKY === */
.sticky-context {
position: relative;
}
/* === AFFICHAGE DES PRIX STICKY === */
.price-display {
background: white;
border-radius: 8px;
padding: .1em;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
margin-bottom: 2em;
transition: all 0.3s ease;
position: sticky;
top: 44px;
z-index: 99;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.price-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1em;
}
.price-item {
text-align: center;
padding: 1em;
border-radius: 6px;
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
border: 2px solid transparent;
transition: all 0.3s ease;
}
.price-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.price-item.teal { border-color: #00b5ad; }
.price-item.blue { border-color: #2185d0; }
.price-item.violet { border-color: #6435c9; }
.price-item.purple { border-color: #a333c8; }
.price-label {
font-family: var(--headingfont);
font-size: 1.85em;
text-transform: uppercase;
font-weight: 600;
letter-spacing: .5px;
margin-bottom: 0.5em;
opacity: 0.7;
}
.price-item.teal .price-label { color: #00b5ad; }
.price-item.blue .price-label { color: #2185d0; }
.price-item.violet .price-label { color: #6435c9; }
.price-item.purple .price-label { color: #a333c8; }
.price-value {
font-size: 2.2em;
font-weight: 700;
color: var(--primary-dark);
font-family: "League Gothic", sans-serif;
letter-spacing: 1px;
}
/* === ACCORDÉON === */
.ui.accordion {
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.ui.accordion .title {
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
border-bottom: 1px solid var(--border-color);
padding: 0.8em 1.5em !important; /* Réduit de 1.2em */
transition: all 0.3s ease;
}
.ui.accordion .title:hover {
background: linear-gradient(135deg, #e8e9ea 0%, #f8f9fa 100%);
}
.ui.accordion .title.active {
background: linear-gradient(135deg, var(--accent-blue) 0%, #1e70bf 100%) !important;
}
.ui.accordion .title h4 {
display: inline;
font-size: 2.1em;
line-height: 0.9;
color: var(--primary-dark);
font-weight: 600;
margin: 0;
}
.ui.accordion .title.active h4 {
color: white !important;
}
.ui.accordion .title .dropdown.icon {
color: var(--primary-dark);
}
.ui.accordion .title.active .dropdown.icon {
color: white !important;
}
.ui.accordion .content {
padding: 2em;
background: #fafbfc;
}
.ui.accordion .content h5 {
font-size: 1.8em;
color: var(--primary-dark);
margin-bottom: 0.3em;
font-weight: 600;
}
.ui.accordion .content h5 i.icon {
color: var(--accent-blue);
margin-right: 0.5em;
}
.ui.accordion .content p {
color: var(--text-muted);
font-size: 0.95em;
line-height: 1.6;
margin-bottom: 1em;
}
/* === SLIDERS === */
.ui.slider {
margin: 1.5em 0 2em 0;
}
/* === CHECKBOXES === */
.ui.toggle.checkbox {
margin: 1em 0;
}
.ui.toggle.checkbox label {
font-size: 1em;
color: var(--text-dark);
}
/* === RÉCAPITULATIF === */
#summary-container {
background: white;
border-radius: 8px;
padding: 1.5em;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
margin-top: 2em;
}
#summary-container h3 {
color: var(--primary-dark);
font-size: 1.9em;
margin-bottom: 0.3em;
font-weight: 600;
}
#summary-content .item {
margin-bottom: 1.5em;
}
/* === RESPONSIVE === */
@media only screen and (max-width: 800px) {
.intro-section {
padding: 1.5em 1em;
}
.intro-section p {
font-size: 1em;
}
.price-legend,
.examples-section {
padding: 1em;
}
.example-grid {
grid-template-columns: 1fr;
gap: 0.6em;
}
.tarif-info {
padding: 1.5em;
}
.tarif-info .info-columns {
grid-template-columns: 1fr;
gap: 1.5em;
}
.price-display {
padding: 1em;
position: sticky;
top: 0;
}
.price-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.8em;
}
.price-value {
font-size: 1.8em;
}
.ui.accordion .title {
padding: 0.7em 1em !important; /* Réduit de 1em */
}
.ui.accordion .title h4 {
font-size: 1.5em; /* Augmenté de 1.3em */
}
.ui.accordion .content {
padding: 1em;
}
.ui.accordion .content h5 {
font-size: 1.3em; /* Augmenté de 1.1em */
}
#summary-container {
padding: 1em;
}
.action-buttons {
grid-template-columns: 1fr;
}
/* S'assurer que le menu fixed ne s'affiche JAMAIS sur mobile */
.fixed.menu,
.fixed.menu.visible,
.fixed.menu.transition {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
}
@media only screen and (min-width: 801px) {
#summary-container {
/*position: sticky;*/
top: 140px;
z-index: 99;
}
}
</style>
</head>
<body class="clawd">
<?php include "includes/_menus.php"; ?>
<!-- Page Contents -->
<div class="pusher">
<div class="sticky-wrapper">
<div class="ui inverted vertical masthead center aligned segment">
<?php include "includes/_mainmenu.php"; ?>
<div class="ui text container">
<h1 class="ui header clawdlogo">CLAWD.FR</h1>
<h2>HÉBERGEUR ENGAGÉ</h2>
</div>
</div>
<div class="ui container borderless center aligned">
<h1>TARIFS</h1>
</div>
<!-- Introduction -->
<div class="ui container">
<div class="intro-section">
<p>Tarif libre ne veut pas dire gratuit, mais estimer la valeur d'un service n'est pas une mince affaire. Pour vous aider dans le choix du tarif de votre offre, voici un calculateur qui vous permettra à la fois de sélectionner vos options et de connaître la fourchette habituelle dans laquelle vous pourrez vous positionner.</p>
<p>Ce calculateur est là pour vous assister dans vos choix et vous donner une idée des tarifs habituels. La fourchette donnée n'est pas définitive ni contractuelle, tout est négociable et peut être revu ensemble à tout moment.</p>
</div>
<!-- Légende des tranches -->
<div class="price-legend">
<h3><i class="info circle icon"></i>Comprendre les tranches de tarifs</h3>
<div class="legend-item">
<span class="legend-badge teal">Minimum</span>
<span class="legend-description">Le seuil en dessous duquel je ne peux pas accepter</span>
</div>
<div class="legend-item">
<span class="legend-badge blue">Correct</span>
<span class="legend-description">Le tarif que je trouverais adapté pour la même offre chez un autre membre du CHATONS</span>
</div>
<div class="legend-item">
<span class="legend-badge violet">Généreux</span>
<span class="legend-description">Un tarif un peu plus élevé qui incite à soutenir l'engagement</span>
</div>
<div class="legend-item">
<span class="legend-badge purple">Maximum</span>
<span class="legend-description">Il y a une limite à tout et voilà la mienne</span>
</div>
</div>
<!-- Bloc informations -->
<div class="tarif-info">
<div class="info-columns">
<div>
<h4>Les tarifs sont</h4>
<ul>
<li>mensuels</li>
<li>sans engagement</li>
<li>non-assujettis à la TVA</li>
<li>négociables</li>
</ul>
</div>
<div>
<h4>Et incluent</h4>
<ul>
<li>la mise en place de vos options</li>
<li>la maintenance des services</li>
<li>la sauvegarde régulière des données</li>
<li>un interlocuteur unique et humain</li>
</ul>
</div>
</div>
</div>
<!-- Formules d'exemples -->
<div class="examples-section">
<h3><i class="lightbulb icon"></i>Formules d'exemples</h3>
<p class="sub-header">Chargez rapidement une configuration type pour vous donner une idée</p>
<div class="example-grid">
<div class="example-card example-formula" data-formula="solo">
<div class="icon"><i class="user icon"></i></div>
<div class="title">Utilisateur solo</div>
<div class="description">Nextcloud 50Go, 1 utilisateur<br> Mail 1 boîte de 20Go +catchall</div>
</div>
<div class="example-card example-formula" data-formula="team">
<div class="icon"><i class="users icon"></i></div>
<div class="title">Association</div>
<div class="description">Nextcloud 150Go, 5 utilisateurs<br>Mail 5 boîtes de 5Go</div>
</div>
<div class="example-card example-formula" data-formula="company">
<div class="icon"><i class="building icon"></i></div>
<div class="title">Entreprise</div>
<div class="description">Nextcloud Privé 2To<br> Web 50Go/3 sites<br> Mail 20 boîtes de 5Go</div>
</div>
<div class="example-card example-formula" data-formula="company">
<div class="icon"><i class="industry icon"></i></div>
<div class="title">Industrie</div>
<div class="description">Nextcloud Privé 5To<br> Web 250Go/5 sites<br> Mail 100 boîtes de 5Go</div>
</div>
<div class="example-card example-formula" data-formula="storage">
<div class="icon"><i class="cloud icon"></i></div>
<div class="title">Stockage massif</div>
<div class="description">Nextcloud Privé Dédié 10To</div>
</div>
<div class="example-card example-formula" data-formula="developer">
<div class="icon"><i class="laptop icon"></i></div>
<div class="title">Développeur solo</div>
<div class="description">VPS 50Go 2 vCPU 4Go RAM</div>
</div>
<div class="example-card example-formula" data-formula="devteam">
<div class="icon"><i class="server icon"></i></div>
<div class="title">Équipe de développement</div>
<div class="description">VPS 250Go 8 vCPU 16Go RAM +IPv4</div>
</div>
</div>
</div>
</div>
<!-- Calculateur -->
<div class="ui container">
<div id="calc">
<!-- Affichage des prix -->
<div class="price-display">
<div class="price-grid">
<div class="price-item teal">
<div class="price-label">Minimum</div>
<div class="price-value" id="price_0">0€</div>
</div>
<div class="price-item blue">
<div class="price-label">Correct</div>
<div class="price-value" id="price_1">0€</div>
</div>
<div class="price-item violet">
<div class="price-label">Généreux</div>
<div class="price-value" id="price_2">0€</div>
</div>
<div class="price-item purple">
<div class="price-label">Maximum</div>
<div class="price-value" id="price_3">0€</div>
</div>
</div>
</div>
<!-- Accordéon des services -->
<div class="ui fluid styled accordion">
<div class="title active">
<i class="dropdown icon"></i>
<h4>Hébergement Nextcloud</h4>
</div>
<div class="content active">
<h5><i class="icon hdd"></i> Stockage: <span id="nextcloud_stockage_display">0</span>&nbsp;Go</h5>
<p>Volume de stockage à répartir entre vos comptes et dossiers partagés.</p>
<div class="ui labeled ticked slider grey" id="nextcloud_stockage_source"></div>
<div class="ui shape" id="ncusers">
<div class="sides">
<div class="ui side">
<h5><i class="icon users"></i>Comptes et groupes illimités <i class="icon infinity"></i></h5>
<p>+ Personnalisation et installation d'applications à volonté.</p>
</div>
<div class="ui side active">
<h5><i class="icon users"></i>Comptes et groupes utilisateurs: <span id="nextcloud_users_display">0</span></h5>
<p>Les dossiers partagés sont à compter comme un compte supplémentaire.</p>
</div>
</div>
</div>
<div class="ui labeled ticked slider grey" id="nextcloud_users_source"></div>
<h5><i class="icon privacy"></i>Options</h5>
<div class="ui toggle checkbox nc_opt_vol">
<input type="checkbox" name="nc_opt_vol" id="nc_opt_vol">
<label for="nc_opt_vol"><strong>Gros volume</strong>: ajouter
<input id="nc_opt_vol_val" name="nc_opt_vol_val" type="number" placeholder="1" value="1" min="1" max="150" step="1" style="width: 60px; text-align: center;">
To d'espace supplémentaire. Entre <span id="teraeurolow">-</span> et <span id="teraeurohigh">-</span> € par To.</label>
</div>
<div class="ui toggle checkbox nc_opt_lxc">
<input type="checkbox" name="nc_opt_lxc" id="nc_opt_lxc">
<label for="nc_opt_lxc"><strong>Privé</strong>: votre propre instance Nextcloud privée, administrable et configurable.</label>
</div>
<div class="ui toggle checkbox nc_opt_decicated">
<input type="checkbox" name="nc_opt_decicated" id="nc_opt_decicated">
<label for="nc_opt_decicated"><strong>Dédié</strong>: sur un serveur dédié à votre structure (serveur inclus).</label>
</div>
<div class="ui toggle checkbox nc_opt_onprem">
<input type="checkbox" name="nc_opt_onprem" id="nc_opt_onprem">
<label for="nc_opt_onprem"><strong>Sur site</strong>: sur un serveur dédié à votre structure, dans vos locaux (serveur non inclus!).</label>
</div>
</div>
<div class="title">
<i class="dropdown icon"></i>
<h4>Hébergement web</h4>
</div>
<div class="content">
<h5><i class="icon hdd"></i>Stockage: <span id="wh_stockage_display">0</span>&nbsp;Go</h5>
<p>Volume de stockage à répartir entre vos différents sites. Il s'agit d'un quota souple: la limite "dure" étant de 2 fois le quota souple.</p>
<div class="ui labeled ticked slider grey" id="wh_stockage_source"></div>
<h5><i class="icon door open"></i>Sites: <span id="wh_sites_display">0</span></h5>
<p>Un site comprend une adresse en HTTPS, une base de données (limitée à 500Mo) et jusqu'à 3 comptes FTP.</p>
<div class="ui labeled ticked slider grey" id="wh_sites_source"></div>
<h5><i class="icon coffee"></i>Options</h5>
<div class="ui toggle checkbox wh_opt_preinstall">
<input type="checkbox" name="wh_opt_preinstall" id="wh_opt_preinstall">
<label for="wh_opt_preinstall"><strong>Clé-en-main</strong>: Wordpress ou un autre outil de construction de site, pré-installé et configuré pour vous.</label>
</div>
</div>
<div class="title">
<i class="dropdown icon"></i>
<h4>Hébergement mail</h4>
</div>
<div class="content">
<h5><i class="icon hdd"></i> Stockage: <span id="mail_stockage_display">0</span>&nbsp;Go</h5>
<p>Volume de stockage à répartir entre vos différentes boîtes mail.</p>
<div class="ui labeled ticked slider grey" id="mail_stockage_source"></div>
<h5><i class="icon inbox"></i>Boîtes mail: <span id="mail_users_display">0</span></h5>
<p>Le nombre de boîtes mail dont vous avez besoin.</p>
<div class="ui labeled ticked slider grey" id="mail_users_source"></div>
<h5><i class="icon at"></i>Options</h5>
<div class="ui toggle checkbox mail_opt_catchall">
<input type="checkbox" name="mail_opt_catchall" id="mail_opt_catchall">
<label for="mail_opt_catchall"><strong>Catch-all</strong>: envoyer et recevoir de n'importe quelle adresse@votredomaine depuis une seule et même boîte mail.</label>
</div>
</div>
<div class="title">
<i class="dropdown icon"></i>
<h4>Hébergement VPS</h4>
</div>
<div class="content">
<h5><i class="icon hdd"></i> HDD: <span id="vps_stockage_display">0</span>&nbsp;Go</h5>
<p>Volume de stockage attaché à votre VPS.</p>
<div class="ui labeled ticked slider grey" id="vps_stockage_source"></div>
<h5><i class="icon microchip"></i> vCPU: <span id="vps_cpu_display">0</span></h5>
<p>Nombre de cœurs pour le processeur de votre VPS.</p>
<div class="ui labeled ticked slider grey" id="vps_cpu_source"></div>
<h5><i class="icon memory"></i> RAM: <span id="vps_ram_display">0</span>&nbsp;Go</h5>
<p>Volume de mémoire vive.</p>
<div class="ui labeled ticked slider grey" id="vps_ram_source"></div>
<h5><i class="icon ethernet"></i>Options</h5>
<div class="ui toggle checkbox vps_opt_ip4">
<input type="checkbox" name="vps_opt_ip4" id="vps_opt_ip4">
<label for="vps_opt_ip4"><strong>IPv4</strong>: Une adresse IPv4 publique dédiée (plus sur demande).</label>
</div>
</div>
</div>
<!-- Récapitulatif -->
<div id="summary-container" style="display: none;">
<h3><i class="list icon"></i>Récapitulatif de votre sélection</h3>
<div id="summary-content"></div>
<div class="action-buttons">
<button id="copy-url-btn" class="ui button action-btn">
<i class="linkify icon"></i>
Copier le lien
</button>
<button id="order-btn" class="ui button action-btn primary">
<i class="envelope icon"></i>
Commander
</button>
</div>
<div id="copy-notification" style="display: none;">
<i class="check icon"></i>
Lien copié dans le presse-papier !
</div>
</div>
</div>
</div>
</div>
<?php include "includes/_footer.php"; ?>
</div>
<?php include "includes/_assetsLate.php"; ?>
<script src="assets/calc.js"></script>
</body>
</html>