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 @@ </a> </li> <li> - <a href="dashboad.html" + <a href="status.html" class="flex font-normal gap-2 text-indigo-600 rounded-md items-center px-2 py-2 cursor-pointer hover:bg-indigo-600 hover:text-white transition-all"> - <i data-lucide="layout-template"></i> - <span>Template Managment</span> + <i data-lucide="chart-line"></i> + <span>Id Status</span> </a> </li> </ul> 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 @@ </a> </li> <li> - <a href="dashboad.html" + <a href="status.html" class="flex font-normal gap-2 text-indigo-600 rounded-md items-center px-2 py-2 cursor-pointer hover:bg-indigo-600 hover:text-white transition-all"> - <i data-lucide="layout-template"></i> - <span>Template Managment</span> + <i data-lucide="chart-line"></i> + <span>Id Status</span> </a> </li> </ul> 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 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>User:Dashboard</title> + <link rel="preconnect" href="https://fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" + rel="stylesheet"> + <link rel="stylesheet" href="../css/style.css" /> + <link rel="stylesheet" href="../css/landing.css.css" /> + <link rel="stylesheet" href="https://cdn.tailwindcss.com" /> + <link rel="stylesheet" href="../css/aos.min.css" /> + <link rel="stylesheet" href="../css/daisyUI.min.css" /> + <script src="https://cdn.tailwindcss.com"></script> +</head> + +<body> + <div class="body-wrapper w-full"> + <div class="flex"> + <main class="flex-1 my-3 min-h-[calc(100vh-24px)] ml-[270px] mr-4 mb-3 rounded-2xl bg-white py-2"> + <!-- header --> + <header + class="pt-3 pb-4 rounded-t-lg px-4 sticky top-0 z-10 bg-white h-16 flex justify-between items-center border-b-sky-100"> + <nav class="w-full flex items-center justify-between"> + <!-- Centered search input --> + <div class="searchbar relative mx-auto w-[450px]"> + <i data-lucide="search" class="absolute text-xl text-slate-400 top-[12px] left-2"></i> + <input type="text" + class="pr-3 pl-8 py-[10px] w-full border placeholder:text-slate-400 border-gray-300 border-solid rounded-lg focus-visible:outline-1 focus:outline-indigo-600 focus:outline-1" + placeholder="Search Id Card and Employee"> + </div> + <!-- Right-aligned buttons --> + <div class="header_widgets flex items-center gap-3"> + <button type="button" + class="flex items-center justify-center cursor-pointer bg-transparent transition-transform duration-150 p-0 border-none m-0 rounded-lg relative"> + <i data-lucide="bell" class="text-indigo-600 leading-3"></i> + <div class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></div> + </button> + <!-- <div class="flex items-center bg-indigo-100/40 border border-indigo-100/40 border-solid px-4 py-2 rounded-lg gap-1 cursor-pointer hover:bg-indigo-200/50 active:scale-90 transition-transform duration-150" + tabindex="0"> + <span class="text-indigo-600">Login</span> + </div> + <div class="text-indigo-600 flex items-center bg-white border border-indigo-600 border-solid px-4 py-2 rounded-lg gap-1 cursor-pointer hover:bg-indigo-600 hover:text-white active:scale-90 transition-transform duration-150" + tabindex="0"> + <span class="block">Sign up</span> + </div> --> + <button type="button" + class="flex bg-primary-100/40 px-3 py-2 rounded-lg items-center gap-1 cursor-pointer" + popovertarget="popover-1" style="anchor-name:--anchor-1"> + <i data-lucide="user" class="text-indigo-600"></i> + <span class="text-indigo-600">Welcome Krishnen...</span> + <i data-lucide="chevron-down" class="text-indigo-600"></i> + </button> + <ul class="dropdown menu min-w-[228px] mt-1 bg-white rounded-box bg-base-100 shadow-lg" + popover id="popover-1" style="position-anchor:--anchor-1"> + <li><a + class="py-[10px] px-4 hover:bg-indigo-100/50 hover:text-indigo-600 border-bottom-1 border-solid border-indigo-100 text-base">My + Profile</a></li> + <li><a class="py-[10px] px-4 hover:bg-indigo-100/50 hover:text-indigo-600 text-base">Log + Out</a></li> + </ul> + </div> + </nav> + </header> + <!-- header --> + <div class="main-wrap py-4 px-5 2xl:px-10"> + <!-- sidebar --> + <aside class="fixed z-30 w-[265px] left-0 top-0 min-h-screen"> + <div class="logo h-[45px] px-4 py-3 flex justify-start items-start"> + <a href="#"> + <img src="https://static.canva.com/web/images/8439b51bb7a19f6e65ce1064bc37c197.svg" + alt="logo" /> + </a> + </div> + <div class="listing p-4"> + <ul class="flex flex-col gap-[6px]"> + <li> + <a href="dashboad.html" + class="flex font-normal gap-2 text-indigo-600 rounded-md items-center px-2 py-2 cursor-pointer hover:bg-indigo-600 hover:text-white transition-all"> + <i data-lucide="layout-dashboard"></i> + <span>Dashboard</span> + </a> + </li> + <li> + <a href="idCard.html" + class="flex font-normal gap-2 text-indigo-600 rounded-md items-center px-2 py-2 cursor-pointer hover:bg-indigo-600 hover:text-white transition-all"> + <i data-lucide="credit-card"></i> + <span>Id Card Request</span> + </a> + </li> + <li> + <a href="status.html" + class="flex font-normal gap-2 text-indigo-600 rounded-md bg-indigo-600 text-white items-center px-2 py-2 cursor-pointer hover:bg-indigo-600 hover:text-white transition-all"> + <i data-lucide="chart-line"></i> + <span>Id Status</span> + </a> + </li> + </ul> + </div> + </aside> + <!-- sidebar --> + <!-- dashboard page --> + <section class="user__page user_id_page"> + <div class="user__page__header flex items-center gap-2"> + <span class="w-10 h-10 rounded-md grid place-items-center leading-3 icon__box"> + <i data-lucide="chart-line" class="text-white"></i> + </span> + <h1 class="text-2xl font-medium text-slate-950 tracking-wider">Status</h1> + </div> + <div class="mt-6"> + <div class="tabs_section"> + <div class="tabs-container p-0 !shadow-none"> + <div class="tabs w-[350px]"> + <div class="tab active text-base hover:bg-indigo-100/50 transition-all rounded-t-lg cursor-pointer" + onclick="changeTab(0)">ID Card</div> + <div class="tab text-base hover:bg-indigo-100/50 transition-all rounded-t-lg cursor-pointer" + onclick="changeTab(1)">Visiting Card</div> + <div class="indicator"></div> + </div> + <div class="tab-contents py-5"> + <div class="tab-content active"> + <div class="status-timeline"> + <ol class="items-center sm:flex"> + <li class="relative mb-6 sm:mb-0 w-[25%]"> + <div class="flex items-center"> + <div + class="z-10 flex items-center justify-center w-8 h-8 bg-indigo-100 rounded-full ring-0 ring-white dark:bg-blue-900 sm:ring-8 dark:ring-gray-900 shrink-0"> + <svg class="w-2.5 h-2.5 text-blue-800 dark:text-blue-300" + aria-hidden="true" + xmlns="http://www.w3.org/2000/svg" + fill="currentColor" viewBox="0 0 20 20"> + <path + d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" /> + </svg> + </div> + <!-- <div + class="hidden sm:flex w-full bg-indigo-200 h-0.5 dark:bg-gray-700"> + </div> --> + </div> + <div class="mt-3 sm:pe-8"> + <h3 + class="text-lg font-semibold text-gray-900 dark:text-white"> + Submit Request</h3> + <time + class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">Released + on December 2, 2021</time> + <p + class="text-base font-normal text-gray-500 dark:text-gray-400"> + Fill the form with required details.</p> + </div> + </li> + <li class="relative mb-6 sm:mb-0 w-[25%]"> + <div class="flex items-center"> + <div + class="hidden sm:flex w-full bg-indigo-200 h-0.5 dark:bg-gray-700"> + </div> + <div + class="z-10 flex items-center justify-center w-8 h-8 bg-indigo-100 rounded-full ring-0 ring-white dark:bg-blue-900 sm:ring-8 dark:ring-gray-900 shrink-0"> + <svg class="w-2.5 h-2.5 text-blue-800 dark:text-blue-300" + aria-hidden="true" + xmlns="http://www.w3.org/2000/svg" + fill="currentColor" viewBox="0 0 20 20"> + <path + d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" /> + </svg> + </div> + </div> + <div class="mt-3 sm:pe-8"> + <h3 + class="text-lg font-semibold text-gray-900 dark:text-white"> + HR Approval</h3> + <time + class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">Released + on December 23, 2021</time> + <p + class="text-base font-normal text-gray-500 dark:text-gray-400"> + HR team reviews your request.</p> + </div> + </li> + <li class="relative mb-6 sm:mb-0 w-[25%]"> + <div class="flex items-center"> + <div + class="hidden sm:flex w-full bg-indigo-200 h-0.5 dark:bg-gray-700"> + </div> + <div + class="z-10 flex items-center justify-center w-8 h-8 bg-indigo-100 rounded-full ring-0 ring-white dark:bg-blue-900 sm:ring-8 dark:ring-gray-900 shrink-0"> + <svg class="w-2.5 h-2.5 text-blue-800 dark:text-blue-300" + aria-hidden="true" + xmlns="http://www.w3.org/2000/svg" + fill="currentColor" viewBox="0 0 20 20"> + <path + d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" /> + </svg> + </div> + </div> + <div class="mt-3 sm:pe-8"> + <h3 + class="text-lg font-semibold text-gray-900 dark:text-white"> + ID Card Printing</h3> + <time + class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">Released + on January 5, 2022</time> + <p + class="text-base font-normal text-gray-500 dark:text-gray-400"> + Card is printed and prepared.</p> + </div> + </li> + <li class="relative mb-6 sm:mb-0 w-[25%]"> + <div class="flex items-center"> + <div + class="hidden timeline_line sm:flex w-full bg-indigo-200 h-0.5 dark:bg-gray-700"> + </div> + <div + class="z-10 flex items-center justify-center w-8 h-8 bg-indigo-100 rounded-full ring-0 ring-white dark:bg-blue-900 sm:ring-8 dark:ring-gray-900 shrink-0"> + <svg class="w-2.5 h-2.5 text-blue-800 dark:text-blue-300" + aria-hidden="true" + xmlns="http://www.w3.org/2000/svg" + fill="currentColor" viewBox="0 0 20 20"> + <path + d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z" /> + </svg> + </div> + </div> + <div class="mt-3 sm:pe-8"> + <h3 + class="text-lg font-semibold text-gray-900 dark:text-white"> + Ready for Collection</h3> + <time + class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">Released + on January 5, 2022</time> + <p + class="text-base font-normal text-gray-500 dark:text-gray-400"> + Collect from the security office.</p> + </div> + </li> + </ol> + + + </div> + </div> + <div class="tab-content"> + + </div> + </div> + </div> + </div> + </div> + </section> + <!-- dashboard page --> + </div> + </main> + </div> + </div> + <script src="../js/jquery.min.js"></script> + <script src="../js/aos.min.js"></script> + <script src="https://unpkg.com/lucide@latest"></script> + <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> + <script src="../js/daisyUI.min.js"></script> + <script src="../js/script.js"></script> +</body> + +</html> \ No newline at end of file