876 lines
32 KiB
PHP
876 lines
32 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;
|
||
margin-top: 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.2em;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.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 WEB <br>INDÉPENDANT ET HUMAIN</h2>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="ui container borderless center aligned">
|
||
<h1>TARIFS</h1>
|
||
</div>
|
||
|
||
<!-- Introduction -->
|
||
<div class="ui container">
|
||
<div class="intro-section">
|
||
<p>
|
||
Les services proposés reposent sur un principe simple :
|
||
le prix est libre et basé sur la confiance.
|
||
</p>
|
||
|
||
<p>
|
||
Vous choisissez le montant que vous souhaitez payer,
|
||
en fonction de votre usage, de vos moyens
|
||
et de la valeur que vous accordez au service rendu.
|
||
</p>
|
||
|
||
<p>
|
||
De mon côté, je m’engage à être aussi transparent que possible
|
||
sur les coûts réels de l’infrastructure,
|
||
le temps de travail nécessaire
|
||
et ce qui est inclus dans chaque service,
|
||
afin de vous permettre de faire un choix éclairé.
|
||
</p>
|
||
|
||
<p>
|
||
Le prix libre permet d’adapter la contribution de chacun
|
||
à la réalité de son usage et de sa structure,
|
||
sans imposer de grille tarifaire rigide ou déconnectée des besoins réels.
|
||
</p>
|
||
|
||
<p>
|
||
Il favorise également une relation plus saine :
|
||
plutôt qu’un empilement d’options ou de frais cachés,
|
||
le service repose sur la clarté,
|
||
la discussion
|
||
et la confiance mutuelle.
|
||
</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>
|
||
|
||
</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> 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_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_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_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> 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> 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> 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> 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>
|
||
|
||
<!-- 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>
|
||
|
||
<!-- 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>
|