This is a custom code placeholder.
Switch to Preview or publish the page
to see how your code works.
Double-click to edit
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.egreen{
background-color:#1b7c3e;
transition: 0.2s all ease-in-out;
}
.ewhite{
transition: 0.2s all ease-in-out;
}
button:hover{
background-color:#359d5a;
}
.ewhite:hover{
background-color: #dcffd5;
}
input, textarea{
background-color: #f4f4f4;
}
h2{
font-size: 2em;
font-weight: lighter;
text-align: center;
color: white;
}
.text-egreen{
color:#1b7c3e;
}
.testwidth{
width: calc( 100% - 9em );
}
.supertext {
font-size: 6em;
line-height: 0.9em;
}
.img-leaf{
filter: brightness(1.1);
}
.greenbullets li{
margin: 0;
padding: 0px 0 25px 63px;
list-style: none;
background-image: url(https://i.ibb.co/7yxDWMt/leaf-green-small.png);
background-repeat: no-repeat;
background-position: left 10px;
background-size: 24px;
}
</style>
<style>
.container {
width: 80%;
margin: 2em auto;
}
hr {
color: coral;
}
h1 {
font-size: 2em;
font-family: "Trebuchet MS", Helvetica, sans-serif
}
h3 {
margin: auto;
font-size: 1.2em;
color: dimgrey;
float: left;
margin-right: 0.3em;
}
h5 {
text-align: center
}
p {
clear: both;
}
label > i {
float: right;
margin: 0.3em;
font-size: large;
transition: all 0.1s linear;
}
input:checked + label > i {
transform: rotate(-180deg);
}
label + p {
line-height: 0%;
color: darkslategray;
transform: rotateX(90deg);
/*transition: all 0.3s linear;*/
}
input:checked + label + p {
transform: rotateX(0);
line-height: 100%;
line-height: auto;
}
.bodybg{
background-color: #f5f5f5;
}
.greenhighlight{
color: #85ff00;
}
.material-icons{
display: none;
}
.labelmap{
margin-top: -10px;
}
.toulousemap{
margin: 5px 0 0 0 !important;
}
body{
background-image: linear-gradient(#ffffff, #ffffff);
background-color: #000000;
}
.bg01{background-image: url('https://i.ibb.co/56Cj26s/bg05.png');}
.linearme{
background: rgb(245,245,245);
background: linear-gradient(0deg, rgba(245,245,245,1) 0%, rgba(255,255,255,1) 100%);
}
.bg-brands{
/*background-image: url(https://i.ibb.co/89rdqp0/e85-logos-lighter.png);*/
background-image: url(https://i.ibb.co/7jtpkZb/bgbrands-lightest.png);
}
</style>
<style>
.upgrade-browser{ display:none;}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.upgrade-browser{ display:block;}
.allbrowsers{ display:none;}
}
<!--[if IE]>
.upgrade-browser{ display:block;}
<![endif]-->
</style>
<!--[if IE]>
<div class="warning">sickass warning</div>
<![endif]-->
<div class="upgrade-browser text-center text-black w-[500px] m-auto mt-32">
<div class="text-center ">
<h3 class="text-center font-bold text-4xl text-white w-full ">Attention!</h3>
<p class="pt-8 pb-8">
Veuillez utiliser un autre navigateur</p>
<br>
<div class="grid grid-cols-3 space-x-4">
<a href="https://www.google.com/chrome/" class="col-span-1">
<img class="w-12 inline-block" src="https://www.svgrepo.com/show/176749/google-chrome-logo.svg" alt="">
</a>
<a href="https://www.mozilla.org/en-US/firefox/new/" class="col-span-1">
<img class="w-12 inline-block" src="https://www.svgrepo.com/show/354994/firefox.svg" alt="">
</a>
<a href="https://www.microsoft.com/en-us/edge" class="col-span-1">
<img class="w-12 inline-block" src="https://www.svgrepo.com/show/354067/microsoft-edge.svg" alt="">
</a>
</div>
</div>
</div>
<div class="bodybg max-w-7xl m-auto allbrowsers linearme bg-brands">
<div class="bghero max-w-7xl m-auto bg-cover">
<style>.bghero{background-image: url('https://i.ibb.co/vhyHzYw/stock-04-green.png');}</style>
<!-- <img src="https://i.ibb.co/Z1FX7zk/Artboard-1-4x.png" class="m-auto pt-10 px-8"> -->
<img src="https://i.ibb.co/CPVqxnd/brp-physical-blue-lightgrey-FR.png" class="m-auto pt-10 px-8">
<section class="relative z-10 contact-form" id="econom">
<img src="https://i.ibb.co/7rgXB2M/e85withleaf.png" alt="" class="px-8 pt-16 mx-auto mt-8 block">
<h1 class="text-center text-white font-bold pb-16 font-8xl mt-12 p-4">Économisez <span class="greenhighlight">jusqu’à 68%</span> par litre!?</h1>
<!-- <form action="https://bcaca.br-performance.com/api/contactrequests" method="POST" id="userform" class="p-16 max-w-2xl m-auto grid gap-y-2 rounded-md shadow-md bg-white"> -->
<form action="" method="POST" id="userform" class="px-8 md:px-16 py-8 md:p-16 max-w-2xl m-auto grid gap-y-2 sm:rounded-md shadow-md bg-white">
<div id="feedbacksuccess" class="text-center hidden">
<h3 class="text-center font-bold text-4xl text-egreen w-full ">Merci beaucoup!</h3>
<p class="pt-8 pb-8">On a bien reçu votre message.
<br>
Nous allons vous répondre le plus vite que possible.</p>
<br>
</div>
<div class="grid grid-cols-2 gap-2">
<input id="firstname" name="firstname" type="text" placeholder="Prénom" class="p-2 text-sm" required>
<input id="lastname" name="lastname" type="text" placeholder="Nom" class="p-2 text-sm" required>
</div>
<input name="email" id="email" placeholder="Email" type="email" class="p-2 w-full" required />
<input name="phone" placeholder="Numéro téléphone" type="text" id="phone" class="p-2 w-full" required />
<select name="center" id="center" class="p-2 text-sm" required>
<option value="" selected>Choissisez votre centre BRP</option>
<option value="amiens">Amiens</option>
<option value="bordeaux">Bordeaux</option>
<option value="bayonne">Bayonne</option>
<option value="lyon">Lyon</option>
<option value="marseille">Marseille</option>
<option value="montpellier">Montpellier</option>
<option value="mulhouse">Mulhouse</option>
<option value="nice">Nice</option>
<option value="paris">Paris</option>
<option value="toulouse">Toulouse</option>
<option value="belgium">Niort</option>
</select>
<input type="text" name="carinfo" id="carinfo" placeholder="Informations de la voiture" class="p-2 text-sm">
<textarea type="text" name="message" id="message" placeholder="Votre message" class="p-2 text-sm" required></textarea>
<button type="submit" class="p-4 egreen text-white rounded-md font-bold">Continuer</button>
<div class="bg-green-500 p-8 w-full mt-16 hidden " id="feedback"></div>
</form>
</section>
<div class="hidden results bg-black text-white absolute p-8 z-50">
<h2>Form Data</h2>
<pre></pre>
</div>
<section class="bg-white -mt-16 pt-16 relative bg-brands">
<div class="bg-white max-w-2xl m-auto rounded-md bg01 bg-cover ">
<!--
<p class="text-xl text-center">
. <br> L’E85 est un carburant qui contient entre 65% et 85% de bioethanol selon la saison.
</p>
</div> -->
<div class="p-16 bg-white max-w-2xl m-auto rounded-md bg01 bg-cover mb-16">
<h2 class="text-egreen font-bold mb-8">Qu'est ce que l'E85?</h2>
<ul class="greenbullets">
<li>L’E85 est un carburant qui contient <strong> entre 65% et 85% de bioethanol</strong> selon la saison.
<li>La conversion E85 par BR-Performance permet à votre véhicule de rouler à <strong> 100% au Bioethanol (E85).</strong></li>
</li>
</ul>
</div>
<!-- <img class="w-full rounded-t-md" src="https://i.ibb.co/KVRBBRh/stock-06.png" alt=""> -->
<div class="p-16 -mt-32">
<h2 class="text-egreen font-bold mb-8">Pourquoi l'E85?</h2>
<ul class="greenbullets">
<li>Trouvez une station facilement. Saviez-vous qu’il y a <strong class="text-egreen underline"> <a target="_blank" href="https://www.prix-carburants.gouv.fr/">3831 stations en France</a></strong> dans lesquelles vous pouvez trouver du carburant E85?</li>
<li><strong>Moins d'émissions de carbone. </strong> L'éthanol est une source d'énergie majoritairement renouvelable qui limite la consommation d'énergie fossile.
</li>
<li><strong>Économisez jusqu’à 68% par litre! </strong>Vous payez 0.8/.0.9€ par litre d’E85 contre 2.0/2.1€ par litre pour du SP95-E10.</li>
</ul>
</div>
</div>
</section>
</div>
<div class="p-8 md:p-16 max-w-2xl m-auto grid gap-y-2 sm:rounded-md sm:mt-8 shadow-md bg-white egreen ">
<form action="">
<h2>Calculez vos économies ici</h2>
<img src="https://i.ibb.co/FDdg4m0/e85-calculatrice.png" class="text-center m-auto my-8 w-64" alt="">
<div>
<label class="text-white text-sm" for="consumption">Consommation / 100km</label><br>
<div class="flex text-white font-bold text-xl ">
<input class="mr-4 testwidth valuefields" type="range" id="consumption" name="volume" min="0.5" max="30" step="0.10"
oninput="this.nextElementSibling.value = this.value">
<output id="out_consumption">10</output>
L
</div>
</div>
<div>
<label class="text-white text-sm" for="kilometers">Kilométrage annuel</label><br>
<div class="flex text-white font-bold text-xl ">
<input class="mr-4 testwidth valuefields" type="range" id="kilometers" name="volume" min="10" max="100" step="5"
oninput="this.nextElementSibling.value = this.value">
<output id="out_kilometers">30</output>
.000 Km
</div>
</div>
<div>
<label class="text-white text-sm" for="price_sp95">Prix SP95/SP98</label><br>
<div class="flex text-white font-bold text-xl ">
<input class="mr-4 testwidth valuefields" type="range" id="price_sp95" name="volume" min="0" max="5" step="0.001"
oninput="this.nextElementSibling.value = this.value">
<output id="out_price_sp95">2.1</output>€
</div>
</div>
<div>
<label class="text-white text-sm" for="price_e85">Prix E85</label><br>
<div class="flex text-white font-bold text-xl ">
<input class="mr-4 testwidth valuefields" type="range" id="price_e85" name="volume" min="0.5" max="5.0" step="0.001"
oninput="this.nextElementSibling.value = this.value">
<output id="out_price_e85">0.8</output> €
</div>
</div>
<a class="mt-8 uppercase p-4 bg-white rounded-md cursor-pointer font-bold text-center shadow-md text-egreen block ewhite calculer" onclick="calculer()">
<span id="loadercalc">calculer</span>
<div id="loadershow" class="loader">Loading...</div>
</a>
</form>
<div class="results">
<div class="grid grid-cols-1 md:grid-cols-3 text-white">
<!-- <div>
<label class="block w-full text-center opacity-50 text-sm" >Kilométrage</label>
<div class="block w-full text-center text-bold text-xl">
<span class="calc_km">20</span><span>.000Km</span>
</div>
</div> -->
<div>
<label class="block w-full text-center opacity-50 text-sm mt-2 md:mt-0" >SP95/SP98</label>
<div class="block w-full text-center text-bold text-xl">
<span>€ </span><span class="calc_sp95">1485.5</span>
</div>
</div>
<div>
<label class="block w-full text-center opacity-50 text-sm mt-2 md:mt-0" >E85</label>
<div class="block w-full text-center text-bold text-xl">
<span>€ </span><span class="calc_e85">664.8</span>
</div>
</div>
<div>
<label class="block w-full text-center opacity-50 text-sm mt-2 md:mt-0" >Retour sur investissement</label>
<div class="block w-full text-center text-bold text-xl">
<span class="calc_roi">664.8</span><span>Km</span>
</div>
</div>
</div>
<hr class="text-white my-8">
<div class="grid grid-cols-4 md:grid-cols-3">
<div class="hidden md:block">
<img src="https://i.ibb.co/k3LQ8MN/leaf-green-bigger.png" alt="" class="img-leaf">
</div>
<div class="col-span-4 md:col-span-2 text-center">
<div>
<span class="uppercase font-bold text-xl text-white opacity-50">Avantage annuel</span>
</div>
<span id="pulseme" class="supertext font-bold text-white pulse inline-flex">
<span>€</span><span class="calc_adv">764.5</span>
</span>
</div>
</div>
</div>
</div>
<div class="max-w-2xl p-10 m-auto bg-white sm:mt-10 p-2 sm:p-8 md:p-16 sm:rounded-md mb-8 shadow-md">
<h2 class="text-egreen font-bold text-3xl mb-8">FAQ</h2>
<a class="accordion w-full flex justify-between">
<span>Est ce que ma voiture peut être convertie à l’E85?</span>
<i class="material-icons material-icons01">keyboard_arrow_down</i><i class="material-icons material-icons02 hidden">keyboard_arrow_up</i>
</a>
<div class="panel">
<p>Les conversions à l’E85 sont compatibles uniquement sur des véhicules essence.
Dans tous centres BR-Performance français, nos spécialistes formés peuvent optimiser le logiciel du moteur pour adapter les valeurs du logiciel d'origine du constructeur telles que le rapport A/F, la quantité d'injection, le démarrage à froid, etc. De ce fait, votre véhicule sera parfaitement compatible avec le carburant E85. <br><br>
L'équipe d’ingénieurs de BR-Performance a plus de 10 ans d'expérience dans la conversion E85. La fiabilité est notre objectif principal. C’est pourquoi nous proposons la conversion E85 (avec ou sans augmentation de puissance) sur certains véhicules.</p>
</div>
<hr>
<a class="accordion w-full flex justify-between">
<span>En combien de temps la conversion sera-t-elle rentabilisée ?</span>
<i class="material-icons material-icons01">keyboard_arrow_down</i><i class="material-icons material-icons02 hidden">keyboard_arrow_up</i>
</a>
<div class="panel">
<p>Cela dépend du nombre de kilomètres que vous effectuez par an. Par exemple, un véhicule qui fait 10.000 km/an aura rentabilisé la conversion à l'E85 en moins d’une année.</p>
</div>
<hr>
<a class="accordion w-full flex justify-between">
<span>Est ce que la conversion E85 est sans danger pour mon véhicule ?</span>
<i class="material-icons material-icons01">keyboard_arrow_down</i><i class="material-icons material-icons02 hidden">keyboard_arrow_up</i>
</a>
<div class="panel">
<p>BR-Performance a plus de 10 ans d'expérience dans la conversion E85. La fiabilité étant notre objectif principal. BR-Performance garantit le bon fonctionnement du logiciel moteur pendant 5 ans.</p>
</div>
<hr>
<a class="accordion w-full flex justify-between">
<span>Est ce que je risque d’avoir des problèmes de démarrage à froid ?</span>
<i class="material-icons material-icons01">keyboard_arrow_down</i><i class="material-icons material-icons02 hidden">keyboard_arrow_up</i>
</a>
<div class="panel">
<p>L’expertise de nos ingénieurs nous permet de maîtriser les démarrages par faible température. Néanmoins lorsque les températures passent en dessous de 0°, il est tout de même recommandé de rajouter une faible proportion de SP9x dans le réservoir (environ 20 à 30%).</p>
</div>
<hr>
<a class="accordion w-full flex justify-between">
<span>Est ce que mon véhicule va davantage consommer ?</span>
<i class="material-icons material-icons01">keyboard_arrow_down</i><i class="material-icons material-icons02 hidden">keyboard_arrow_up</i>
</a>
<div class="panel">
<p>Un véhicule converti à l’E85 aura tendance à consommer environ 15 à 20% de carburant en plus. Néanmoins le tarif nettement inférieur au Sans Plomb rend la conversion à l'E85 toujours très attractive.</p>
</div>
<hr>
<a class="accordion w-full flex justify-between">
<span>Puis-je revenir au logiciel d’origine ?</span>
<i class="material-icons material-icons01">keyboard_arrow_down</i><i class="material-icons material-icons02 hidden">keyboard_arrow_up</i>
</a>
<div class="panel">
<p>Oui, nous pouvons remettre le logiciel moteur d’origine gratuitement. Cela fait partie de nos garanties.</p>
</div>
<hr>
<a class="accordion w-full flex justify-between">
<span>Quelles sont les précautions à prendre avant de faire convertir mon véhicule à l’E85 ?</span>
<i class="material-icons material-icons01">keyboard_arrow_down</i><i class="material-icons material-icons02 hidden">keyboard_arrow_up</i>
</a>
<div class="panel">
<p>Idéalement, le véhicule doit avoir des bougies neuves et d'origine constructeur et filtre à essence neuf avant intervention, ou qui datent de moins de 30.000 km. Le véhicule ne doit pas avoir plus de 150 000 km et doit être correctement entretenu.</p>
</div>
</div>
<div class="bg-white max-w-2xl m-auto sm:mt-8 sm:rounded-md bg01 bg-cover relative z-10 shadow-md">
<div class="p-16">
<h2 class="text-egreen font-bold mb-8">Combien ça coûte?</h2>
<p class="text-xl text-center mb-12">
Nos conversions commencent <strong> à 590€</strong>. Nous sommes transparents sur la façon dont nous effectuons nos conversions E85 car nos équipes ont plus de 10 ans d’expérience dans ce domaine:
</p>
<ul class="greenbullets">
<li>Réception du véhicule client.</li>
<li>Nous faisons un diagnostic de votre véhicule afin de voir les éventuels défauts. Nous vérifions la bonne santé du véhicule en effectuant un diagnostic de votre véhicule.
</li>
<li>Passage au banc de puissance pour contrôler la puissance initiale du véhicule et valider la bonne santé du moteur.</li>
<li>Extraction du logiciel moteur (aussi appelé cartographie) et envoi à nos ingénieurs pour modification en fonction des paramètres enregistrés (diagnostic + passage au banc)</li>
<li>Réception du logiciel modifié et injection dans la cartographie du véhicule</li>
<li>Remplissage du réservoir à l’E85</li>
<li>Essai et acquisitions de données sur route.</li>
<li>Vérification des données enregistrées après essai</li>
<li>Modification du logiciel moteur (si nécessaire) et nouvel essai sur route</li>
</ul>
</div>
</div>
<div class="w-full bgnewgrey -mt-32 pt-32 bgjailed pb-16 shadowinnertop overflow-hidden">
<div class="distribution-map w-full mt-16 -mt-48 relative cover">
<!-- This was broken for a while because image hosts are annoying, so now it's a data uri. Sorry :( -->
<!-- <img src="https://svgshare.com/i/fk8.svg" alt="" class="dropshadow2" /> -->
<img src="https://i.ibb.co/yB738k5/map-lichtjes.png" alt="" class="" />
<!--In the original application, these points are injected with Javascript, but ideally, they'd be injected with a haml loop. Because I'm hardcoding content, I'm presenting this as prerendered HTML-->
<button class="map-point Amiens " style="top:15%;left:54%">
<label class="labelmap hidden sm:block" for="">
<a target="_blank" href="https://www.br-performance.fr/brp-amiens/">Amiens</a>
</label>
</button>
<button class="map-point mulhouse" style="top: 41%;left: 86%;">
<label class="labelmap hidden sm:block" for="">
<a target="_blank" href="https://www.br-performance.fr/brp-mulhouse/">Mulhouse</a>
</label>
</button>
<button class="map-point paris" style="top: 28%;left: 55%;">
<label class="labelmap hidden sm:block" for="">
<a target="_blank" href="https://www.br-performance.fr/brp-paris/">Paris</a>
</label>
</button>
<button class="map-point" style="top: 58%;left: 76%;">
<label class="labelmap hidden sm:block" for="">
<a target="_blank" href="https://www.br-performance.fr/brp-lyon/">Lyon</a>
</label>
</button>
<button class="map-point nice" style="top:79%;left:90%;">
<label class="labelmap hidden sm:block" for="">
<a target="_blank" href="https://www.br-performance.fr/brp-nice/">Nice</a>
</label>
</button>
<button class="map-point marseille" style="top: 83%;left: 73%;">
<label class="labelmap hidden sm:block" for="">
<a target="_blank" href="https://www.br-performance.fr/brp-marseille/">Marseille</a>
</label>
</button>
<button class="map-point Montpellier" style="top: 86%;left: 56%;">
<label class="labelmap hidden sm:block" for="">
<a target="_blank" href="https://www.br-performance.fr/brp-montpellier/">Montpellier</a>
</label>
</button>
<button class="map-point Toulouse " style="top: 86%;left: 40%;">
<label class="labelmap hidden sm:block toulousemap" for="">
<a target="_blank" href="https://www.br-performance.fr/brp-toulouse/">Toulouse</a>
</label>
</button>
<button class="map-point bayonne" style="top: 80%;left: 29%;">
<label class="labelmap hidden sm:block" for="">
<a target="_blank" href="https://www.br-performance.fr/brp-bayonne/">Bayonne</a>
</label>
</button>
<button class="map-point Bordeaux" style="top: 64%;left: 34%;">
<label class="labelmap hidden sm:block" for="">
<a target="_blank" href="https://www.br-performance.fr/brp-bordeaux/">Bordeaux</a>
</label>
</button>
</button>
<button class="map-point Niort" style="top: 54%;left: 34%;">
<label class="labelmap hidden sm:block" for="">
<a target="_blank" href="https://www.br-performance.fr/brp-niort/">Niort</a>
</label>
</button>
</div>
<a href="#econom" class="cursor-pointer">
<img class="m-auto block" src="https://www.svgrepo.com/show/355345/up.svg" class="block center pointer">
</a>
</div>
</div><!-- end container -->
<script>
//formdata to JSON
function handleFormSubmit(event) {
event.preventDefault();
const data = new FormData(event.target);
const formJSON = Object.fromEntries(data.entries());
// for multi-selects, we need special handling
// formJSON.snacks = data.getAll('snacks');
const results = document.querySelector('.results pre');
results.innerText = JSON.stringify(formJSON, null, 2);
var postthis = JSON.stringify(formJSON, null, 2);
var url = "https://bcaca.br-performance.com/api/contactrequests";
var xhr = new XMLHttpRequest();
xhr.open("POST", url);
xhr.setRequestHeader("Accept", "application/json");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
console.log(xhr.status);
console.log(xhr.responseText);
$('#feedbacksuccess').show();
alert('Merci beaucoup! On a bien reçu votre message.');
// $('#feedback').html(xhr.responseText);
} else if (xhr.readyState != 4) {
$('#feedbackfail').show();
}
};
xhr.send(postthis);
}
const form = document.querySelector('.contact-form');
form.addEventListener('submit', handleFormSubmit);
</script>
<script>
// $('.material-icons02').hide();
// var acc = document.getElementsByClassName("accordion");
// var paneel = document.getElementsByClassName("panel");
// var i;
// for (i = 0; i < acc.length; i++) {
// acc[i].addEventListener("click", function()
// { this.classList.toggle("active");
// var panel = this.nextElementSibling;
// if (panel.style.maxHeight) {
// panel.style.maxHeight = null;
// $(this).find('.material-icons01').show();
// $(this).find('.material-icons02').hide();
// } else {
// $(".panel").css({"maxHeight":"0"});
// panel.style.maxHeight = panel.scrollHeight + "px";
// // var siblingtest = $(this);
// // console.log('siblingtest =' + siblingtest);
// $(this).find('.material-icons01').hide();
// $(this).find('.material-icons02').show();
// }
// });
// }
</script>
<style type="text/css">
.accordion{
text-align: left;
font-weight: bold;
padding: 1em 0;
font-size: 1.1em;
cursor: pointer;
}
.panel p{
padding-bottom:1em;
}
</style>
<style>
input[type=range]{
filter: brightness(9.5) hue-rotate(290deg);
}
</style>
<style>
.description {
max-width: 600px;
margin: 0 auto;
color: rgba(229, 229, 229, 0.7);
}
.distribution-map, .content {
position: relative;
box-sizing: border-box;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.centered-y {
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
.distribution-map {
position: relative;
width: 100%;
padding: 20px;
box-sizing: border-box;
margin: 0 auto;
/*background-color: darkgrey;*/
}
.distribution-map > img {
width: 100%;
position: relative;
margin: 0;
padding: 0;
}
.distribution-map .map-point {
cursor: pointer;
outline: none;
z-index: 0;
position: absolute;
border-radius: 8px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
transform: translate(-50%, -50%);
-moz-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
-o-transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
-webkit-transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out, z-index 0.25s ease-in-out;
-webkit-transition-delay: 0.25s, 0.25s, 0.25s, 0.25s;
transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
background: #1b7c3e;
/*border: 5px solid #7fcff7;*/
}
.distribution-map .map-point .content {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
transition: opacity 0.25s ease-in-out;
width: 100%;
height: 100%;
left: 50%;
transform: translateX(-50%);
overflow: overlay;
}
.distribution-map .map-point:active, .distribution-map .map-point:focus {
/* margin: 0;
padding: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
width: 300px;
height: 220px;
padding: 20px;
color: #e5e5e5;
z-index: 1;
transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;*/
}
.distribution-map .map-point:active .content, .distribution-map .map-point:focus .content {
/* filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
-moz-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-o-transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-webkit-transition: opacity 0.25s ease-in-out, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
-webkit-transition-delay: 0.25s, 0s, 0s;
transition: opacity 0.25s ease-in-out 0.25s, height 0.25s ease-in-out, overflow 0.25s ease-in-out;
overflow: hidden;*/
}
.distribution-map .map-point:active .content a:hover, .distribution-map .map-point:active .content a:active, .distribution-map .map-point:focus .content a:hover, .distribution-map .map-point:focus .content a:active {
/*color: #afe1fa;*/
}
.distribution-map{
max-width: 500px;
}
.distribution-map .map-point{
width: 15px;
height: 15px;
}
.map-point{
display: block;
cursor: default !important;
}
.map-point:hover{
/*filter: brightness(1.5);*/
}
.map-point > label{
position: absolute;
margin-top: -15px;
margin-left: 20px;
color: black;
}
.dropshadow2{
/*filter: drop-shadow(2px 4px 6px black);*/
}
.bgjailed{
background-image: url("https://i.ibb.co/NCZnZxw/mapbg-jailed4-100-min.jpg");
background-size: contain;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.bgnewgrey{
background-color: #eceeee;
}
.shadowinnertop{
-webkit-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.05);
box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.05);
}
/* .content{
padding: 100px;
}*/
</style>
<style>
/*loader*/
.loader,
.loader:after {
border-radius: 50%;
width: 10em;
height: 10em;
}
.loader {
margin: 0 auto;
font-size: 3px;
position: relative;
text-indent: -9999em;
border-top: 1.8em solid rgba(255, 255, 255, 0.2);
border-right: 1.8em solid rgba(255, 255, 255, 0.2);
border-bottom: 1.8em solid rgba(255, 255, 255, 0.2);
border-left: 1.8em solid #1b7c3e;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
<style>
/*pulse*/
.pulse{
animation: pulsare 0.5s 1 ease-out;
}
@keyframes pulsare {
0% {
transform: scale(1);
color: #51fe1f;
}
50% {
transform: scale(0.9);
color: white;
}
70% {
transform: scale(1.2);
color: #51fe1f;
}
100% {
transform: scale(1);
color: white;
}
}
</style>
<script>
//map point city name
// $(".map-point").focus(function(){
// $(this).find( ".labelmap" ).css( "display", "none" );
// });
// $(".map-point").focusout(function(){
// // $(this).find( "label" ).css( "display", "block" );
// setTimeout(function() {
// $('.labelmap').css( "display", "block" );
// $('.labelmap').css( "margin-left", "25px" );
// }, 500);
// ;});
// $(this).find( "label" ).css( "display", "block" );
</script>
<script>
// Initial fuel prices, consumption, mileage
const e85ConversionCost = 590; // Cost of E85 conversion
let sp95_cost = 0; // Total Cost of sp95 fuel per year
let e85_cost = 0; // Total cost of e85 fuel per year
let roi = 0; // Return on investment break even kilometers
let fuelCostPerKm = new Array(); // Fuel cost per km
fuelCostPerKm["sp95"] = 0;
fuelCostPerKm["e85"] = 0;
let yourAdvantage = 0;
let consumption = 6500;
let kilometers = 30000;
let fuelPrices = new Array();
fuelPrices["sp95"] = 2108;
fuelPrices["e85"] = 864;
$(document).ready(setValues());
$(".valuefields").change(function () {
consumption = $("#consumption").val()*1000;
kilometers = $("#kilometers").val()*1000;
fuelPrices["sp95"] = $("#price_sp95").val()*1000;
fuelPrices["e85"] = $("#price_e85").val()*1000;
calcValues();
// setValues();
});
function setValues() {
// Set fuel prices
$("#out_price_sp95").val(fuelPrices["sp95"]/1000);
$("#price_sp95").val(fuelPrices["sp95"]/1000);
$("#out_price_e85").val(fuelPrices["e85"]/1000);
$("#price_e85").val(fuelPrices["e85"]/1000);
// Set consumption
$("#out_consumption").val(consumption/1000);
$("#consumption").val(consumption/1000);
// Set kilometers
$("#out_kilometers").val(kilometers/1000);
$("#kilometers").val(kilometers/1000);
$(".calc_km").text(kilometers/1000);
// Set fuel costs for kilometers selected (per year)
$(".calc_sp95").text(sp95_cost.toFixed(2));
$(".calc_e85").text(e85_cost.toFixed(2));
// Set advantage
$(".calc_adv").text(yourAdvantage.toFixed(0));
// Set Roi (Return On Investment) in kilometers
$(".calc_roi").text(roi.toFixed());
}
function calcValues() {
fuelCostPerKm["sp95"] = Math.round(( consumption * fuelPrices["sp95"] ) / 100);
fuelCostPerKm["e85"] = Math.round((( consumption * 1.15 ) * fuelPrices["e85"] ) / 100);
sp95_cost = (kilometers * fuelCostPerKm["sp95"])/1000000;
e85_cost = (kilometers * fuelCostPerKm["e85"])/1000000;
// Your advantage over
yourAdvantage = sp95_cost - e85_cost;
roi = e85ConversionCost / ( (fuelCostPerKm["sp95"]/1000000) - (fuelCostPerKm["e85"]/1000000) );
console.log( e85ConversionCost + ' / (' + fuelCostPerKm["sp95"]/1000000 + ' - ' + fuelCostPerKm["e85"]/1000000 + ') = ' + roi )
}
$("#loadershow").hide();
// $("#loadercalc").hide();
function calculer() {
$("#loadercalc").hide();
$("#loadershow").show();
$("#pulseme").removeClass("pulse");
setTimeout(function() {
$("#loadercalc").show();
$("#loadershow").hide();
calcValues();
setValues();
$("#pulseme").addClass("pulse");
}, 600);
}
</script>