From 6bc9220bc38416f147c67e929e110820b8af1b18 Mon Sep 17 00:00:00 2001 From: krishnenduPanja Date: Tue, 11 Mar 2025 10:07:13 +0530 Subject: [PATCH] status html push --- idproject/css/style.css | 65 +++++++++ idproject/js/script.js | 27 ++++ idproject/user/dashboad.html | 6 +- idproject/user/idCard.html | 6 +- idproject/user/status.html | 265 +++++++++++++++++++++++++++++++++++ 5 files changed, 363 insertions(+), 6 deletions(-) create mode 100644 idproject/user/status.html diff --git a/idproject/css/style.css b/idproject/css/style.css index 2b8790c..acac10a 100644 --- a/idproject/css/style.css +++ b/idproject/css/style.css @@ -267,4 +267,69 @@ header .searchbar svg { display: block; opacity: 1; transform: translateY(0); +} + +.timeline { + position: relative; + display: flex; + align-items: center; + gap: 60px; + padding: 20px; + background: white; + border-radius: 12px; + box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); +} + +.progress-bar { + position: absolute; + top: 50%; + left: 15%; + width: 0%; + height: 6px; + background: #007bff; + transition: width 0.5s ease-in-out; + transform: translateY(-50%); + z-index: -1; +} + +.timeline-item { + text-align: center; + position: relative; +} + +.icon { + width: 50px; + height: 50px; + background: #ddd; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + transition: 0.3s ease-in-out; +} + +.timeline-item.active .icon { + background: #007bff; + color: white; +} + +p { + margin-top: 10px; + font-size: 14px; +} + +/* Responsive */ +@media (max-width: 768px) { + .timeline { + flex-direction: column; + gap: 30px; + } + + .progress-bar { + width: 6px; + height: 0%; + left: 50%; + transform: translateX(-50%); + } } \ No newline at end of file diff --git a/idproject/js/script.js b/idproject/js/script.js index 8c53f22..d221c34 100644 --- a/idproject/js/script.js +++ b/idproject/js/script.js @@ -71,3 +71,30 @@ function changeTab(index) { indicator.style.transform = `translateX(${index * 100}%)`; } + +const timelineItems = document.querySelectorAll(".timeline-item"); +const progressBar = document.querySelector(".progress-bar"); + +let currentStep = 0; + +function updateTimeline() { + for (let i = 0; i < timelineItems.length; i++) { + if (i <= currentStep) { + timelineItems[i].classList.add("active"); + } else { + timelineItems[i].classList.remove("active"); + } + } + let progressWidth = (currentStep / (timelineItems.length - 1)) * 100; + progressBar.style.width = progressWidth + "%"; +} + +// Simulate progress every 2 seconds +setInterval(() => { + if (currentStep < timelineItems.length - 1) { + currentStep++; + updateTimeline(); + } +}, 2000); + +updateTimeline(); diff --git a/idproject/user/dashboad.html b/idproject/user/dashboad.html index a13ce3c..8f6e8eb 100644 --- a/idproject/user/dashboad.html +++ b/idproject/user/dashboad.html @@ -87,10 +87,10 @@
  • - - - Template Managment + + Id Status
    • diff --git a/idproject/user/idCard.html b/idproject/user/idCard.html index 4830a19..0b5ca4b 100644 --- a/idproject/user/idCard.html +++ b/idproject/user/idCard.html @@ -92,10 +92,10 @@
  • - - - Template Managment + + Id Status
    • diff --git a/idproject/user/status.html b/idproject/user/status.html new file mode 100644 index 0000000..aefcebe --- /dev/null +++ b/idproject/user/status.html @@ -0,0 +1,265 @@ + + + + + + + User:Dashboard + + + + + + + + + + + + +
    +
    +
    + +
    + +
    + +
    + + + + +
    +
    + + + +

    Status

    +
    +
    +
    +
    +
    +
    ID Card
    +
    Visiting Card
    +
    +
    +
    +
    +
    +
      +
    1. +
      +
      + +
      + +
      +
      +

      + Submit Request

      + +

      + Fill the form with required details.

      +
      +
      2. +
    2. +
      + +
      + +
      +
      +
      +

      + HR Approval

      + +

      + HR team reviews your request.

      +
      +
      3. +
    3. +
      + +
      + +
      +
      +
      +

      + ID Card Printing

      + +

      + Card is printed and prepared.

      +
      +
      4. +
    4. +
      + +
      + +
      +
      +
      +

      + Ready for Collection

      + +

      + Collect from the security office.

      +
      +
      5. +
    + + +
    +
    +
    + +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    + + + + + + + + + \ No newline at end of file