Simulation interactive du tableau de bord Ferrari avec HTML, CSS et JavaScript

Ce projet simule un tableau de bord de Ferrari en utilisatn HTML pour la structure, CSS pour le style et JavaScript pour l'interactivité. L'interface comprend un compteur de vitesse, un compte-tours, une jauge de carburant et des contrôles pour simuler la conduiet. Voici le code source modifié pour réduire la similarité tout en conservant la fonctionnalité.

Structure HTML

<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simulation Ferrari</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="tableau-bord">
    <div class="compteur-vitesse">
      <div class="aiguille"></div>
      <div class="valeur-vitesse">0 km/h</div>
    </div>
    <div class="commandes">
      <button class="bouton" id="bouton-demarrer">Démarrer</button>
      <button class="bouton" id="bouton-arreter" disabled>Arrêter</button>
      <button class="bouton" id="bouton-accelerer">Accélérer</button>
      <button class="bouton" id="bouton-freiner">Freiner</button>
    </div>
    <div class="compte-tours">
      <div class="cadran-compte-tours"></div>
    </div>
    <div class="jauge-carburant">
      <div class="niveau-carburant"></div>
      <div class="valeur-carburant">100%</div>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

Feuille de style CSS

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #000;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}

.tableau-bord {
  background-color: #f20;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  width: 80%;
  max-width: 600px;
  text-align: center;
}

.compteur-vitesse, .compte-tours, .jauge-carburant {
  margin: 20px 0;
  position: relative;
  height: 150px;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: #333;
}

.aiguille, .cadran-compte-tours {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: bottom;
  transform: translateX(-50%) rotate(0deg);
  transition: transform 0.2s ease-in-out;
}

.aiguille {
  width: 5px;
  height: 75px;
  background-color: #fff;
}

.cadran-compte-tours {
  width: 100px;
  height: 100px;
  background: conic-gradient(#333 0deg, #333 45deg, #f20 45deg, #f20 90deg, #333 90deg, #333 135deg, #f20 135deg, #f20 180deg, #333 180deg, #333 225deg, #f20 225deg, #f20 270deg, #333 270deg, #333 315deg, #f20 315deg, #f20 360deg);
  border-radius: 50%;
}

.valeur-vitesse, .valeur-carburant {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
}

.jauge-carburant .niveau-carburant {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f20;
  border-radius: 10px 10px 0 0;
  transform: scaleY(100%);
  transition: transform 0.2s ease-in-out;
}

.bouton {
  display: block;
  width: 80%;
  margin: 10px auto;
  padding: 10px;
  font-size: 16px;
  color: #fff;
  background-color: #333;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.bouton:hover {
  background-color: #555;
}

.bouton:disabled {
  background-color: #666;
  cursor: not-allowed;
}

Logique JavaScript

document.addEventListener('DOMContentLoaded', () => {
  let vitesse = 0;
  let carburant = 100;
  const aiguille = document.querySelector('.aiguille');
  const elementVitesse = document.querySelector('.valeur-vitesse');
  const niveauCarburant = document.querySelector('.niveau-carburant');
  const elementCarburant = document.querySelector('.valeur-carburant');
  const boutonDemarrer = document.getElementById('bouton-demarrer');
  const boutonArreter = document.getElementById('bouton-arreter');
  const boutonAccelerer = document.getElementById('bouton-accelerer');
  const boutonFreiner = document.getElementById('bouton-freiner');
  const vitesseMax = 200;
  const consommationParKm = 0.5;

  function mettreAJourAffichage() {
    elementVitesse.textContent = `${vitesse.toFixed(0)} km/h`;
    elementCarburant.textContent = `${carburant.toFixed(0)}%`;
    aiguille.style.transform = `translateX(-50%) rotate(${vitesse / vitesseMax * 90 + 90}deg)`;
    niveauCarburant.style.transform = `scaleY(${carburant / 100})`;
  }

  boutonDemarrer.addEventListener('click', () => {
    boutonDemarrer.disabled = true;
    boutonArreter.disabled = false;
    boutonAccelerer.disabled = false;
    boutonFreiner.disabled = false;
  });

  boutonArreter.addEventListener('click', () => {
    vitesse = 0;
    carburant = 100;
    boutonDemarrer.disabled = false;
    boutonArreter.disabled = true;
    boutonAccelerer.disabled = true;
    boutonFreiner.disabled = true;
    mettreAJourAffichage();
  });

  boutonAccelerer.addEventListener('click', () => {
    if (vitesse < vitesseMax) {
      vitesse += 10;
      carburant -= consommationParKm * 10 / vitesseMax;
      if (carburant < 0) carburant = 0;
      mettreAJourAffichage();
    }
  });

  boutonFreiner.addEventListener('click', () => {
    if (vitesse > 0) {
      vitesse -= 10;
      if (vitesse < 0) vitesse = 0;
      mettreAJourAffichage();
    }
  });

  mettreAJourAffichage();
});

Étiquettes: HTML CSS JavaScript simulation Interface utilisateur

Publié le 18 juillet à 00h46

Étiquettes Populaires

©2026 L'Atelier Monstre