Home > Web Front-end > JS Tutorial > body text

Process Flow using html css js

DDD
Release: 2024-10-08 22:19:31
Original
895 people have browsed it

Process Flow using html css js

CODE

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Process Flow</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      height: 100vh;
      background-color: #121212; /* Dark background */
      margin: 0;
      color: #ffffff; /* White text for better visibility */
      font-family: Arial, sans-serif;
    }

    .process-container {
      display: flex;
      align-items: center;
      position: relative;
      width: 100%;
      max-width: 800px;
    }

    .phase {
      flex: 1;
      text-align: center;
      position: relative;
      z-index: 1;
    }

    .phase-line {
      position: absolute;
      top: 50%;
      left:40%;
      width: 130%;
      height: 4px; /* Line thickness */
      background-color: #ccc; /* Light gray line */
      z-index: 0;
    }

    .phase-line.active {
      background-color: #007bff; /* Active blue line */
    }

    .phase-circle {
      width: 30px;
      height: 30px;
      background-color: #fff; /* Default white circle */
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.3s;
      z-index: 1;
      line-height: 30px; /* Center the number vertically */
      font-weight: bold; /* Make the number bold */
      color: #000; /* Black text for better visibility */
    }

    .phase-circle.active {
      background-color: #007bff; /* Active blue circle */
      color: #fff; /* White text when active */
    }

    button {
      padding: 10px 20px;
      font-size: 1.2rem;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      margin: 10px;
      transition: background-color 0.3s;
    }

    button:hover {
      background-color: #0056b3;
    }
    p{
        font-weight: 400;
        font-size: smaller;
    }
  </style>
</head>
<body>

  <div class="process-container">
    <div class="phase">
      <div class="phase-circle active" id="phase1">1</div>
      <div class="phase-line active" id="line1"></div>
      <p>About You</p>
    </div>
    <div class="phase">
      <div class="phase-circle" id="phase2">2</div>
      <div class="phase-line" id="line2"></div>
      <p>About Book</p>
    </div>
    <div class="phase">
      <div class="phase-circle" id="phase3">3</div>
      <div class="phase-line" id="line3"></div>
      <p>Review</p>
    </div>
    <div class="phase">
      <div class="phase-circle" id="phase4">4</div>
      <div class="phase-line" id="line4"></div>
      <p>Buy</p>
    </div>
    <div class="phase">
      <div class="phase-circle" id="phase5">5</div>
      <p>Finish</p>
    </div>
  </div>

  <div>
    <button id="prevButton">Previous</button>
    <button id="nextButton">Next</button>
  </div>

  <script>
    let currentPhase = 1;

    const updatePhase = () => {
      for (let i = 1; i <= 5; i++) {
        const phaseCircle = document.getElementById(`phase${i}`);
        const phaseLine = document.getElementById(`line${i}`);

        if (i < currentPhase) {
          phaseCircle.classList.add('active');
          if (phaseLine) phaseLine.classList.add('active');
        } else if (i === currentPhase) {
          phaseCircle.classList.add('active');
          if (phaseLine) phaseLine.classList.add('active');
        } else {
          phaseCircle.classList.remove('active');
          if (phaseLine) phaseLine.classList.remove('active');
        }
      }
    };

    document.getElementById('nextButton').addEventListener('click', () => {
      if (currentPhase < 5) {
        currentPhase++;
        updatePhase();
      }
    });

    document.getElementById('prevButton').addEventListener('click', () => {
      if (currentPhase > 1) {
        currentPhase--;
        updatePhase();
      }
    });

    updatePhase(); // Initialize the phase display
  </script>

</body>
</html>

Copy after login

The above is the detailed content of Process Flow using html css js. For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!