Embed

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Calculateur de Rentabilité</title>
  
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
  <style>
    :root {
      --moodl-green: #7CB70A;
      --moodl-orange: #FF9A00;
      --text-color: #fff;
      --bg-color: #333;             /* Fond global gris foncé */
      --container-bg: #444;         /* Fond du conteneur */
      --slider-track: #555;         /* Fond de la barre du slider */
      --slider-track-hover: #666;
      --slider-thumb-hover: #689208;
      --result-text-color: #FFD700; /* Couleur de police pour la zone de résultats */
    }
    body {
      font-family: 'Roboto', sans-serif;
      margin: 0;
      padding: 0;
      background: var(--bg-color);
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }
    .container {
      background: var(--container-bg);
      max-width: 1200px; /* Conteneur élargi */
      width: 100%;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
      padding: 30px;
      margin: 20px;
    }
    h1 {
      text-align: center;
      color: var(--text-color);
      margin-bottom: 30px;
    }
    .slider-container {
      margin-bottom: 25px;
    }
    .slider-container label {
      display: block;
      margin-bottom: 10px;
      color: var(--text-color);
      font-size: 1.1em;
      font-weight: 500;
    }
    .range-control {
      display: flex;
      align-items: center;
    }
    .range-control button {
      background: var(--moodl-green);
      border: none;
      color: var(--text-color);
      padding: 5px 10px;
      margin: 0 5px;
      cursor: pointer;
      font-size: 1em;
      border-radius: 5px;
    }
    .range-control input[type="range"] {
      flex: 1;
      -webkit-appearance: none;
      height: 8px;
      background: var(--slider-track);
      outline: none;
      border-radius: 5px;
      transition: background 0.3s;
    }
    .range-control input[type="range"]:hover {
      background: var(--slider-track-hover);
    }
    .range-control input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--moodl-green);
      cursor: pointer;
      border: none;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
      transition: background 0.3s, transform 0.3s;
    }
    .range-control input[type="range"]::-webkit-slider-thumb:hover {
      background: var(--slider-thumb-hover);
      transform: scale(1.1);
    }
    .result {
      text-align: center;
      font-size: 1.2em;
      margin-top: 30px;
      padding: 20px;
      background: #555;
      border-radius: 10px;
      color: var(--result-text-color);
    }
    .highlight {
      color: var(--moodl-green);
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Calculez le rendement de votre investissement</h1>

    
    <div class="slider-container">
      <label for="investment">
        Prix d'achat du Moodl : <span id="investmentValue">95000</span> €
      </label>
      <div class="range-control">
        <button class="decrement" data-target="investment" data-step="1000">–</button>
        <input type="range" id="investment" min="30000" max="250000" step="1000" value="95000" />
        <button class="increment" data-target="investment" data-step="1000">+</button>
      </div>
    </div>

    
    <div class="slider-container">
      <label for="price">
        Prix de location par jour : <span id="priceValue">120</span> €
      </label>
      <div class="range-control">
        <button class="decrement" data-target="price" data-step="1">–</button>
        <input type="range" id="price" min="50" max="600" step="1" value="120" />
        <button class="increment" data-target="price" data-step="1">+</button>
      </div>
    </div>

    
    <div class="slider-container">
      <label for="days">
        Jours d'occupation par mois : <span id="daysValue">15</span>
      </label>
      <div class="range-control">
        <button class="decrement" data-target="days" data-step="1">–</button>
        <input type="range" id="days" min="1" max="31" step="1" value="15" />
        <button class="increment" data-target="days" data-step="1">+</button>
      </div>
    </div>

    
    <div class="slider-container">
      <label for="maintenance">
        Frais de service/entretien journalier : <span id="maintenanceValue">10</span> €
      </label>
      <div class="range-control">
        <button class="decrement" data-target="maintenance" data-step="1">–</button>
        <input type="range" id="maintenance" min="0" max="100" step="1" value="10" />
        <button class="increment" data-target="maintenance" data-step="1">+</button>
      </div>
    </div>

    
    <div class="slider-container">
      <label for="credit">
        Remboursement de crédit mensuel : <span id="creditValue">0</span> €
      </label>
      <div class="range-control">
        <button class="decrement" data-target="credit" data-step="10">–</button>
        <input type="range" id="credit" min="0" max="2000" step="10" value="0" />
        <button class="increment" data-target="credit" data-step="10">+</button>
      </div>
    </div>

    <div class="result">
      Revenu mensuel net : <span class="highlight" id="netRevenue">1 050</span> €<br/>
      Temps de retour sur investissement : <span class="highlight" id="roi">-</span><br/>
      Rendement locatif : <span class="highlight" id="rentalYield">-</span>%
    </div>
  </div>

  <script>
    // Sélection des éléments existants
    const price = document.getElementById('price');
    const days = document.getElementById('days');
    const maintenance = document.getElementById('maintenance');
    const investment = document.getElementById('investment');
    const credit = document.getElementById('credit'); // Nouvel élément pour le crédit

    const priceValue = document.getElementById('priceValue');
    const daysValue = document.getElementById('daysValue');
    const maintenanceValue = document.getElementById('maintenanceValue');
    const investmentValue = document.getElementById('investmentValue');
    const creditValueLabel = document.getElementById('creditValue'); // Label pour le crédit

    const netRevenue = document.getElementById('netRevenue');
    const roi = document.getElementById('roi');
    const rentalYield = document.getElementById('rentalYield');

    function updateValues() {
      const p = parseFloat(price.value);
      const d = parseInt(days.value, 10);
      const m = parseFloat(maintenance.value);
      const inv = parseFloat(investment.value);
      const c = parseFloat(credit.value); // Valeur du remboursement de crédit

      // Mise à jour des affichages
      priceValue.textContent = p;
      daysValue.textContent = d;
      maintenanceValue.textContent = m;
      investmentValue.textContent = inv;
      creditValueLabel.textContent = c;

      // Calcul du revenu mensuel net
      const revenue = p * d;             // Revenu brut mensuel
      const monthlyFees = m * d;         // Frais de service/entretien mensuels
      const net = revenue - monthlyFees - c;  // On soustrait également le remboursement de crédit
      netRevenue.textContent = net.toFixed(0);

      // Temps de retour sur investissement (en mois)
      const totalMonths = net > 0 ? Math.round(inv / net) : 0;
      let displayROI = '-';
      if (totalMonths > 0) {
        const years = Math.floor(totalMonths / 12);
        const months = totalMonths % 12;
        displayROI = (years > 0 ? years + (years > 1 ? ' ans' : ' an') : '') +
                     (years > 0 && months > 0 ? ' et ' : '') +
                     (months > 0 ? months + ' mois' : '');
      }
      roi.textContent = displayROI;

      // Rendement locatif annuel (en %)
      const yieldCalc = (net > 0 && inv > 0) ? ((net * 12) / inv) * 100 : 0;
      rentalYield.textContent = (net > 0 && inv > 0) ? yieldCalc.toFixed(2) : '-';
    }

    // Ajout de l'écoute sur les sliders existants
    [price, days, maintenance, investment, credit].forEach(el => {
      el.addEventListener('input', updateValues);
    });

    // Gestion des boutons +/-
    document.querySelectorAll('.decrement, .increment').forEach(button => {
      button.addEventListener('click', function(){
        const targetId = this.dataset.target;
        const step = parseFloat(this.dataset.step);
        const slider = document.getElementById(targetId);
        let value = parseFloat(slider.value);
        if (this.classList.contains('increment')) {
          value = Math.min(parseFloat(slider.max), value + step);
        } else {
          value = Math.max(parseFloat(slider.min), value - step);
        }
        slider.value = value;
        slider.dispatchEvent(new Event('input'));
      });
    });

    updateValues();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Calcul des Mensualités de Crédit Immobilier</title>
  
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
  <style>
    :root {
      --moodl-green: #7CB70A;
      --moodl-orange: #FF9A00;
      --text-color: #fff;
      --bg-color: #333;
      --container-bg: #444;
      --slider-track: #555;
      --slider-track-hover: #666;
      --slider-thumb-hover: #689208;
      --result-text-color: #FFD700;
    }
    body {
      font-family: 'Roboto', sans-serif;
      margin: 0;
      padding: 0;
      background: var(--bg-color);
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }
    .container {
      background: var(--container-bg);
      max-width: 1200px;
      width: 100%;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
      padding: 30px;
      margin: 20px;
    }
    h1 {
      text-align: center;
      color: var(--text-color);
      margin-bottom: 30px;
    }
    .slider-container {
      margin-bottom: 25px;
    }
    .slider-container label {
      display: block;
      margin-bottom: 10px;
      color: var(--text-color);
      font-size: 1.1em;
      font-weight: 500;
    }
    .range-control {
      display: flex;
      align-items: center;
    }
    .range-control button {
      background: var(--moodl-green);
      border: none;
      color: var(--text-color);
      padding: 5px 10px;
      margin: 0 5px;
      cursor: pointer;
      font-size: 1em;
      border-radius: 5px;
    }
    .range-control input[type="range"] {
      flex: 1;
      -webkit-appearance: none;
      height: 8px;
      background: var(--slider-track);
      outline: none;
      border-radius: 5px;
      transition: background 0.3s;
    }
    .range-control input[type="range"]:hover {
      background: var(--slider-track-hover);
    }
    .range-control input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--moodl-green);
      cursor: pointer;
      border: none;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
      transition: background 0.3s, transform 0.3s;
    }
    .range-control input[type="range"]::-webkit-slider-thumb:hover {
      background: var(--slider-thumb-hover);
      transform: scale(1.1);
    }
    .result {
      text-align: center;
      font-size: 1.2em;
      margin-top: 30px;
      padding: 20px;
      background: #555;
      border-radius: 10px;
      color: var(--result-text-color);
    }
    .highlight {
      color: var(--moodl-green);
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Calculez vos mensualités de crédit immobilier</h1>

    
    <div class="slider-container">
      <label for="loan">
        Montant emprunté : <span id="loanValue">200000</span> €
      </label>
      <div class="range-control">
        <button class="decrement" data-target="loan" data-step="1000">–</button>
        <input type="range" id="loan" min="10000" max="250000" step="1000" value="200000" />
        <button class="increment" data-target="loan" data-step="1000">+</button>
      </div>
    </div>

    
    <div class="slider-container">
      <label for="interest">
        Taux d'intérêt annuel : <span id="interestValue">2.0</span> %
      </label>
      <div class="range-control">
        <button class="decrement" data-target="interest" data-step="0.1">–</button>
        <input type="range" id="interest" min="0.5" max="5.0" step="0.1" value="2.0" />
        <button class="increment" data-target="interest" data-step="0.1">+</button>
      </div>
    </div>

    
    <div class="slider-container">
      <label for="duration">
        Durée du prêt (en années) : <span id="durationValue">20</span> ans
      </label>
      <div class="range-control">
        <button class="decrement" data-target="duration" data-step="1">–</button>
        <input type="range" id="duration" min="5" max="30" step="1" value="20" />
        <button class="increment" data-target="duration" data-step="1">+</button>
      </div>
    </div>

    
    <div class="slider-container">
      <label for="insurance">
        Taux d'assurance : <span id="insuranceValue">0.4</span> %
      </label>
      <div class="range-control">
        <button class="decrement" data-target="insurance" data-step="0.1">–</button>
        <input type="range" id="insurance" min="0" max="1.5" step="0.1" value="0.4" />
        <button class="increment" data-target="insurance" data-step="0.1">+</button>
      </div>
    </div>

    <div class="result">
      Mensualité hors assurance : <span class="highlight" id="monthlyPayment">0</span> €<br/>
      Coût assurance mensuel : <span class="highlight" id="monthlyInsurance">0</span> €<br/>
      Mensualité totale : <span class="highlight" id="totalPayment">0</span> €
    </div>
  </div>

  <script>
    const loan = document.getElementById('loan');
    const interest = document.getElementById('interest');
    const duration = document.getElementById('duration');
    const insurance = document.getElementById('insurance');

    const loanValue = document.getElementById('loanValue');
    const interestValue = document.getElementById('interestValue');
    const durationValue = document.getElementById('durationValue');
    const insuranceValue = document.getElementById('insuranceValue');

    const monthlyPaymentLabel = document.getElementById('monthlyPayment');
    const monthlyInsuranceLabel = document.getElementById('monthlyInsurance');
    const totalPaymentLabel = document.getElementById('totalPayment');

    function updateValues() {
      // Récupération des valeurs
      const principal = parseFloat(loan.value);
      const annualInterest = parseFloat(interest.value);
      const years = parseInt(duration.value, 10);
      const insuranceRate = parseFloat(insurance.value);

      // Mise à jour des affichages des valeurs
      loanValue.textContent = principal.toLocaleString();
      interestValue.textContent = annualInterest.toFixed(1);
      durationValue.textContent = years;
      insuranceValue.textContent = insuranceRate.toFixed(1);

      // Calcul de la mensualité hors assurance avec la formule standard
      const monthlyInterestRate = annualInterest / 100 / 12;
      const numberOfMonths = years * 12;
      let monthlyPayment = 0;
      if (monthlyInterestRate === 0) {
        monthlyPayment = principal / numberOfMonths;
      } else {
        monthlyPayment = principal * monthlyInterestRate * Math.pow(1 + monthlyInterestRate, numberOfMonths) /
                         (Math.pow(1 + monthlyInterestRate, numberOfMonths) - 1);
      }

      // Calcul du coût mensuel de l'assurance (estimation simple)
      const monthlyInsurance = (principal * (insuranceRate / 100)) / 12;

      // Calcul de la mensualité totale
      const totalMonthlyPayment = monthlyPayment + monthlyInsurance;

      // Mise à jour des résultats affichés
      monthlyPaymentLabel.textContent = monthlyPayment.toFixed(2);
      monthlyInsuranceLabel.textContent = monthlyInsurance.toFixed(2);
      totalPaymentLabel.textContent = totalMonthlyPayment.toFixed(2);
    }

    // Mise à jour en temps réel à chaque ajustement des sliders
    [loan, interest, duration, insurance].forEach(el => {
      el.addEventListener('input', updateValues);
    });

    // Gestion des boutons +/- pour ajuster les sliders
    document.querySelectorAll('.decrement, .increment').forEach(button => {
      button.addEventListener('click', function(){
        const targetId = this.dataset.target;
        const step = parseFloat(this.dataset.step);
        const slider = document.getElementById(targetId);
        let value = parseFloat(slider.value);
        if (this.classList.contains('increment')) {
          value = Math.min(parseFloat(slider.max), value + step);
        } else {
          value = Math.max(parseFloat(slider.min), value - step);
        }
        slider.value = value;
        slider.dispatchEvent(new Event('input'));
      });
    });

    updateValues();
  </script>
</body>
</html>