You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
451 lines
19 KiB
451 lines
19 KiB
<?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>
|
|
p.highlight {
|
|
color: #000000;
|
|
text-shadow: 0 0px 3px rgb(247 255 133);
|
|
}
|
|
#calc {
|
|
border: none;
|
|
box-shadow: none;
|
|
padding: 0;
|
|
margin-bottom: 2em;
|
|
}
|
|
#calc .accordion .title.active {
|
|
padding: 0 inherit;
|
|
|
|
}
|
|
#calc .accordion .title h4 {
|
|
display: inline;
|
|
font-size: 3em;
|
|
line-height: 0.1em;
|
|
position: relative;
|
|
top: 3px;
|
|
}
|
|
#calc .accordion .content {
|
|
padding: 2em;
|
|
}
|
|
#calc .accordion .content h5 {
|
|
font-size: 2.4em;
|
|
color: #414141;
|
|
}
|
|
#calc .ui.placeholder.segment {
|
|
margin: 4em 0;
|
|
padding: 1em;
|
|
min-height: 10em;
|
|
}
|
|
#calc .ui.placeholder.segment:first-of-type {
|
|
background-color: #ffffff;
|
|
border: none;
|
|
}
|
|
.tarif {
|
|
position: relative;
|
|
transform: translate(0);
|
|
transform-style: preserve-3d;
|
|
border: none;
|
|
background-color: #ffffff;
|
|
}
|
|
.tarif:before {
|
|
content:"";
|
|
position: absolute;
|
|
inset: -5px;
|
|
transform: translate3d(0,0,-1px);
|
|
background: conic-gradient(from 90deg at 40% -25%, #ffd700, #f79d03, #ee6907, #e6390a, #de0d0d, #d61039, #cf1261, #c71585, #cf1261, #d61039, #de0d0d, #ee6907, #f79d03, #ffd700, #ffd700, #ffd700);
|
|
filter: blur(10px);
|
|
}
|
|
|
|
#calc .ui.placeholder.segment p,
|
|
#calc .ui.placeholder.segment div.ui.list {
|
|
font-size: 1.3em;
|
|
padding: 1em 2em;
|
|
margin: 0;
|
|
}
|
|
#calc .ui.stackable.four.column.grid {
|
|
margin-bottom: 2em;
|
|
}
|
|
#calc .ui.stackable.four.column.grid .column {
|
|
padding: .6em 1.2em;
|
|
}
|
|
|
|
.ui.label.price {
|
|
font-family: "League Gothic";
|
|
font-variant-caps: all-small-caps;
|
|
padding: .0em .3em .1em .3em;
|
|
text-shadow: 0 1px 0 rgb(99 99 99 / 40%);
|
|
|
|
}
|
|
.ui.list .ui.label.price {
|
|
font-size: 2rem;
|
|
line-height: 1rem;
|
|
height: 1.6rem;
|
|
padding: .2rem;
|
|
}
|
|
.ui.list .item {
|
|
/*line-height: 2em;*/
|
|
}
|
|
.ui.grid .ui.label.price {
|
|
font-size: 3.5em;
|
|
line-height: 1em;
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
.ui.list .ui.label.price span.text,
|
|
.ui.list .ui.label.price span.price {
|
|
color: #ffffff;
|
|
}
|
|
.ui.grid .ui.label.price span.text,
|
|
.ui.grid .ui.label.price span.price {
|
|
color: #ffffff;
|
|
}
|
|
|
|
#calc .ui.segment.placeholder .ui.list .item {
|
|
/*padding-bottom: 0;*/
|
|
}
|
|
#calc .ui.stackable.four.column.grid.sticky {
|
|
background-color: rgba(255, 255, 255, .8);
|
|
box-shadow: #ffffff 0 0 4px;
|
|
}
|
|
#calc .ui.stackable.four.column.grid.sticky.fixed {
|
|
margin-top: 46px !important;
|
|
margin-left: 0px;
|
|
}
|
|
.ui.grid .ui.label.price.teal,
|
|
.ui.list .ui.label.price.inverted.teal {
|
|
background-color: #00b5ad;
|
|
}
|
|
.ui.grid .ui.label.price.blue,
|
|
.ui.list .ui.label.price.inverted.blue {
|
|
background-color: #2185d0;
|
|
}
|
|
.ui.grid .ui.label.price.violet,
|
|
.ui.list .ui.label.price.inverted.violet {
|
|
background-color: #6435c9;
|
|
}
|
|
.ui.grid .ui.label.price.purple,
|
|
.ui.list .ui.label.price.inverted.purple {
|
|
background-color: #a333c8;
|
|
}
|
|
#calc .ui.horizontal.wrapping.segments .ui.segment>* {
|
|
position: relative;
|
|
}
|
|
#calc .ui.stackable.four.column.grid .ui.label .detail.price {
|
|
float: right;
|
|
opacity: 1;
|
|
margin-left: 0;
|
|
}
|
|
#calc .ui.toggle.checkbox.nc_opt_vol>* {
|
|
display: inline;
|
|
}
|
|
#calc .ui.shape, #calc .ui.shape > * {
|
|
width: 100%;
|
|
}
|
|
@media only screen and (max-width: 800px) {
|
|
#calc {
|
|
margin: 0 0 2em 0;
|
|
}
|
|
#calc .ui.placeholder.segment p,
|
|
#calc .ui.placeholder.segment div.ui.list {
|
|
font-size: 1.2em;
|
|
padding: .2em .5em;
|
|
margin: 0;
|
|
}
|
|
#calc .accordion .content {
|
|
padding: 1em;
|
|
padding-top: 0;
|
|
}
|
|
#calc .accordion .content h5 {
|
|
margin: 2px 0;
|
|
}
|
|
#calc .ui.stackable.four.column.grid .column {
|
|
padding: 0 1.2em;
|
|
}
|
|
#calc .ui.stackable.four.column.grid .ui.label {
|
|
font-size: 2.5em;
|
|
line-height: .7em;
|
|
}
|
|
#calc .ui.stackable.four.column.grid.sticky.fixed {
|
|
margin-top: 4px;
|
|
margin-left: 0px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="clawd">
|
|
|
|
<?php include "includes/_menus.php"; ?>
|
|
|
|
<!-- Page Contents -->
|
|
<div class="pusher">
|
|
<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>
|
|
|
|
<div class="ui middle aligned stackable container">
|
|
<div class="row">
|
|
<div class="wide column">
|
|
<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>
|
|
<p>Pour l'utiliser, choisissez dans chaque catégorie les spécifications que vous estimez adéquates à votre besoin, et la fourchette de tarif sera mise à jour automatiquement.</p>
|
|
<p>La fourchette de tarif se présente en 4 tranches:</p>
|
|
<div class="ui list items unstackable">
|
|
<div class="item">
|
|
<span class="ui label inverted teal price">
|
|
<span class="text">Minimum</span>
|
|
</span>
|
|
<div class="content">
|
|
C'est le seuil en dessous duquel je ne peux pas accepter.
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<span class="ui label inverted blue price">
|
|
<span class="text">Correct</span>
|
|
</span>
|
|
<div class="content">
|
|
Le tarif que je trouverais adapté pour la même offre chez un autre membre du CHATONS.
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<span class="ui label inverted violet price">
|
|
<span class="text">Généreux</span>
|
|
</span>
|
|
<div class="content">
|
|
Un tarif un peu plus élevé qui incite à soutenir l'engagement.
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<span class="ui label inverted purple price">
|
|
<span class="text">Maximum</span>
|
|
</span>
|
|
<div class="content">
|
|
Il y a une limite à tout et voilà la mienne.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ui container borderless">
|
|
<div class="ui segment container borderless" id="calc">
|
|
|
|
<div class="ui placeholder segment tarif">
|
|
<div class="ui two column stackable left aligned grid">
|
|
<div class="top aligned row">
|
|
<div class="column first">
|
|
<h4 class="ui header">les tarifs sont</h4>
|
|
<ul class="ui list">
|
|
<li class="item">
|
|
mensuels
|
|
</li>
|
|
<li class="item">
|
|
sans engagement
|
|
</li>
|
|
<li class="item">
|
|
non-assujettis à la TVA
|
|
</li>
|
|
<li class="item">
|
|
négociables
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="column second">
|
|
<h4 class="ui header">et incluent</h4>
|
|
<ul class="ui list">
|
|
<li class="item">
|
|
la mise en place de vos options
|
|
</li>
|
|
<li class="item">
|
|
la maintenance des services
|
|
</li>
|
|
<li class="item">
|
|
la sauvegarde régulière des données
|
|
</li>
|
|
<li class="item">
|
|
un interlocuteur unique et humain
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="ui stackable doubling four column grid sticky">
|
|
<div class="column">
|
|
<div class="ui label inverted teal huge price">
|
|
<span class="text">minimum </span>
|
|
<span class="detail price min" id="price_0">0€</span>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui label inverted blue huge price">
|
|
<span class="text">correct </span>
|
|
<span class="detail price cor" id="price_1">0€</span>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui label inverted violet huge price">
|
|
<span class="text">généreux </span>
|
|
<span class="detail price gen" id="price_2">0€</span>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="ui label inverted purple huge price">
|
|
<span class="text">maximum </span>
|
|
<span class="detail price max" id="price_3">0€</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ui fluid styled accordion">
|
|
<div class="title active">
|
|
<i class="dropdown icon"></i>
|
|
<h4>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>
|
|
<p></p>
|
|
|
|
<div class="ui labeled ticked slider grey" id="nextcloud_users_source"></div>
|
|
|
|
<h5><i class="icon privacy"></i>Options</h5>
|
|
<p></p>
|
|
<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></label>:
|
|
</div>
|
|
ajouter
|
|
<div class="ui right labeled input">
|
|
<input id="nc_opt_vol_val" name="nc_opt_vol_val" type="number" placeholder="1" value="1" min="1" max="150" step="1">
|
|
<div class="ui basic label">
|
|
To
|
|
</div>
|
|
</div> d'espace supplémentaire. Entre <span id="teraeurolow">-</span> et <span id="teraeurohigh">-</span> € par To.
|
|
<p></p>
|
|
<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>
|
|
<p></p>
|
|
<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 (<strong>serveur inclus</strong>).</label>
|
|
</div>
|
|
<p></p>
|
|
<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 (<strong>serveur non inclus!</strong>).</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>
|
|
<p></p>
|
|
<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>
|
|
<p></p>
|
|
<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>
|
|
<p></p>
|
|
<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>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<?php include "includes/_footer.php"; ?>
|
|
</div>
|
|
<?php include "includes/_assetsLate.php"; ?>
|
|
<script src="assets/calc.js"></script>
|
|
</body>
|
|
|
|
</html>
|