jemanden, der mir eine kleine Sache erledigt (HTML, JS, CSS)

Servus,

ich gebe euch mal einen kleinen Ausschnitt aus dem Gespr�ch:

Quote:

hallo , ich habe eine frage, es geht um diese seite: [Only registered and activated users can see links. Click Here To Register...] um diesen balken da unten wie im bild, ich muss das etwas umprogrammieren, so dass ich css anwenden kann bei dem slider, der soll farbig anders aussehen und der USB Stecker das Bild muss fl�ssiger ablaufen. also folgendes:

Ich w�rde das Ding hier bitte umprogrammieren lassen, oder was ich schon habe, einfach umprogrammieren. Die Funktion ist eigentlich drin und funktioniert super, nur das Design kann ich irgendwie nicht genau einstellen. Der Schieberegler (das Ding zum regulieren - also dr�cken) muss etwas gr��er sein, in blauer Farbe (#36a9e1), die Linie sollte in wei� bleiben (das muss auf allen Ger�ten gleich aussehen), auf der mobilen Ansicht m�chte ich gerne, dass diese 3 Buttons (in blau und die Tage, Stunden, Minuten), dass sie auch nebeneinander sind und die Schriftarten zu den Buttons (sind halt keine Buttons, aber ich nenne sie jetzt so) sollten auch unter den Buttons sein.

1. der �bergang der Schieberegler im USB-Anschluss muss flie�ender sein, nicht wie jetzt in Abschnitten (wenn man den Controller bewegt), sondern in einem sch�nen �bergang
2. die Farbe des Punktes zum Bewegen des Schiebers muss #36a9e1 und etwas gr��er sein
3. der Strich f�r den Schieberegler muss die Farbe wei� haben
4. die 3 blauen Punkte m�ssen auch in der mobilen Ansicht nebeneinander liegen

Bei Fragen oder Problemen k�nnt ihr euch bei mir melden.

[Only registered and activated users can see links. Click Here To Register...]

ENGLISH VERSION:

Spoiler

Actually code, form AI generated, edited 2-3 times, but its not the code, what i want:

Spoiler

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preisrechner mit Schieberegler</title>
<style>
  body {
    background-color: grey;
  }

  #slider-container {
    text-align: center;
    padding: 20px;
  }
  #price {
    font-size: 24px;
    font-weight: bold;
    margin-top: 10px;
  }
  #duration {
    font-size: 18px;
  }
  
  #priceSlider.active, #priceSlider.hover {
    color: red;
  } 
</style>
</head>
<body>
<div id="slider-container">
  <img id="image" src="" alt="Bild">
  <input type="range" id="priceSlider" min="0" max="100" step="1">
  <div id="price">Preis: 0 €</div>
  <div id="duration">Dauer: 0 Tage 0 Stunden 0 Minuten</div>
</div>
<script>
  const pricePerHour = 2;
  const maxDayPrice = 5;
  const maxDayDuration = 3;
  const maxTotalPrice = 15;
  const images = ['image1.png', 'image2.png', 'image3.png', 'image4.png', 'image5.png', 'image6.png'];
  const priceSlider = document.getElementById('priceSlider');
  const priceDisplay = document.getElementById('price');
  const durationDisplay = document.getElementById('duration');
  const image = document.getElementById('image');

  priceSlider.addEventListener('input', updatePriceAndDuration);

  function updatePriceAndDuration() {
    const selectedValue = parseInt(priceSlider.value);
    const hours = Math.floor(selectedValue);
    const days = Math.floor(hours / 24);
    const remainingHours = hours % 24;
    const minutes = (selectedValue - hours) * 60;

    let price;
    if (days >= maxDayDuration) {
      price = maxTotalPrice;
    } else if (hours >= maxDayDuration * 24) {
      price = maxDayPrice;
    } else {
      price = (hours * pricePerHour) + ((days < maxDayDuration) ? (maxDayDuration - days) * maxDayPrice : 0);
    }

    priceDisplay.textContent = `Preis: ${price} €`;
    durationDisplay.textContent = `Dauer: ${days} Tage ${remainingHours} Stunden ${minutes} Minuten`;
    updateImage(selectedValue);
  }

  function updateImage(selectedValue) {
    const imageIndex = Math.floor(selectedValue / 20); // 20% pro Bild
    image.src = images[imageIndex];
  }

  updatePriceAndDuration(); // Initialisierung
</script>
</body>
</html>

The images should be changed by changing the controller, these are the images:

Spoiler