Krish_panja123./GeeksId-Project-Html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

status-design push

Browse Source
This commit is contained in:
krishnenduPanja 2025-03-11 20:29:31 +05:30
parent 6bc9220bc3
commit d9e77a4f9d
11 changed files with 311 additions and 275 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
idproject/.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}

BIN
idproject/assets/images/Card_bg1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
idproject/assets/images/Card_bg2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

77
idproject/css/style.css
View File

@ -207,7 +207,7 @@ header .searchbar svg {
content: '';
position: absolute;
height: 4px;
background-color: var(--color-indigo-600);
background-color: var(--color-primary-600);
border-radius: 1px;
width: 100%;
bottom: -2.5px;
@ -238,13 +238,13 @@ header .searchbar svg {
}
.user_id_page .tab:hover {
color: var(--color-indigo-600);
background-color: var(--color-indigo-100/60);
color: var(--color-primary-600);
background-color: var(--color-primary-100/60);
}
.user_id_page .tab.active {
color: var(--color-indigo-600);
background-color: var(--color-indigo-100/60);
color: var(--color-primary-600);
background-color: var(--color-primary-100/60);
}
.user_id_page .indicator {
@ -252,7 +252,7 @@ header .searchbar svg {
bottom: -2px;
height: 3px;
width: 50%;
background-color: var(--color-indigo-600);
background-color: var(--color-primary-600);
transition: transform 0.3s ease-in-out;
}
@ -269,67 +269,18 @@ header .searchbar svg {
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);
.timeline_list .timeline.active .icon {
background-color: var(--color-primary-600);
border-color: var(--color-primary-600);
}
.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;
.timeline_list .timeline.active .icon svg {
color: white;
}
p {
margin-top: 10px;
font-size: 14px;
.timeline_list .timeline.active .line {
background-color: var(--color-primary-600);
}
/* Responsive */
@media (max-width: 768px) {
.timeline {
flex-direction: column;
gap: 30px;
}
.progress-bar {
width: 6px;
height: 0%;
left: 50%;
transform: translateX(-50%);
}
.timeline_list .timeline .data p {
max-width: 700px;
}

72
idproject/index.html
View File

@ -25,12 +25,12 @@
</div>
<div class="flex gap-2 items-center mt-4 md:mt-0">
<a href="user/dashboad.html"
class="cursor-pointer duration-200 transition-all flex items-center justify-center gap-1 px-5 py-[10px] border border-solid border-indigo-500 hover:border-indigo-500 bg-indigo-500 text-white rounded-md shadow-lg hover:bg-indigo-600 active:bg-indigo-600"
class="cursor-pointer duration-200 transition-all flex items-center justify-center gap-1 px-5 py-[10px] border border-solid border-primary-500 hover:border-primary-500 bg-primary-500 text-white rounded-md shadow-lg hover:bg-primary-600 active:bg-primary-600"
(click)="login()">
Login with Microsoft
</a>
<a href="user/dashboad.html"
class="cursor-pointer duration-200 transition-all flex items-center justify-center gap-1 px-5 py-[10px] border border-solid border-indigo-500 hover:border-indigo-500 bg-indigo-500 text-white rounded-md shadow-lg hover:bg-indigo-600 active:bg-indigo-600"
class="cursor-pointer duration-200 transition-all flex items-center justify-center gap-1 px-5 py-[10px] border border-solid border-primary-500 hover:border-primary-500 bg-primary-500 text-white rounded-md shadow-lg hover:bg-primary-600 active:bg-primary-600"
(click)="logout()">
logout
</a>
@ -39,7 +39,7 @@
</div>
</header>
<section class="banner bg-indigo-100 md:h-[490px] h-auto">
<section class="banner bg-primary-100 md:h-[490px] h-auto">
<div class="container">
<div class="content_section flex flex-col md:flex-row items-center gap-5">
<div class="flex-1" data-aos="fade-right" data-aos-duration="1200">
@ -56,7 +56,7 @@
Elementum consectetur at aliquet turpis ultricies felis egestas aliquam porta. Amet vitae.
</p>
<a href="#"
class="inline-block mt-4 px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-lg hover:bg-indigo-700 transition"
class="inline-block mt-4 px-6 py-3 bg-primary-600 text-white font-semibold rounded-lg shadow-lg hover:bg-primary-700 transition"
data-aos="zoom-in" data-aos-duration="1000">
Get Started
</a>
@ -85,7 +85,7 @@
</p>
</div>
<a href="#"
class="inline-block mt-6 md:mt-0 px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-lg hover:bg-indigo-700 transition"
class="inline-block mt-6 md:mt-0 px-6 py-3 bg-primary-600 text-white font-semibold rounded-lg shadow-lg hover:bg-primary-700 transition"
data-aos="fade-left" data-aos-duration="1000">
Learn More
</a>
@ -100,7 +100,7 @@
<p class="text-gray-500 mt-2">
Imperdiet turpis ut quis quis scelerisque ullamcorper eu tellus.
</p>
<a href="#" class="text-indigo-600 font-semibold mt-4 inline-block">
<a href="#" class="text-primary-600 font-semibold mt-4 inline-block">
Learn More →
</a>
</div>
@ -115,7 +115,7 @@
<p class="text-gray-500 mt-2">
Imperdiet turpis ut quis quis scelerisque ullamcorper eu tellus.
</p>
<a href="#" class="text-indigo-600 font-semibold mt-4 inline-block">
<a href="#" class="text-primary-600 font-semibold mt-4 inline-block">
Learn More →
</a>
</div>
@ -130,7 +130,7 @@
<p class="text-gray-500 mt-2">
Imperdiet turpis ut quis quis scelerisque ullamcorper eu tellus.
</p>
<a href="#" class="text-indigo-600 font-semibold mt-4 inline-block">
<a href="#" class="text-primary-600 font-semibold mt-4 inline-block">
Learn More →
</a>
</div>
@ -139,7 +139,7 @@
</div>
</section>
<section class="bg-indigo-100/35 py-24">
<section class="bg-primary-100/35 py-24">
<div class="container">
<div class="mx-auto grid grid-cols-1 md:grid-cols-[1fr_500px] gap-12 items-center">
<!-- Left Side Content -->
@ -161,8 +161,8 @@
<!-- Feature 1 -->
<div class="flex items-start space-x-6" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100">
<div class="bg-white p-4 rounded-lg">
<span class="text-indigo-600 text-2xl">
<i stroke-width="1.2" data-lucide="thumbs-up" class="text-indigo-500"></i>
<span class="text-primary-600 text-2xl">
<i stroke-width="1.2" data-lucide="thumbs-up" class="text-primary-500"></i>
</span>
</div>
<div>
@ -179,8 +179,8 @@
<!-- Feature 2 -->
<div class="flex items-start space-x-6" data-aos="fade-up" data-aos-duration="800" data-aos-delay="200">
<div class="bg-white p-4 rounded-lg">
<span class="text-indigo-600 text-2xl">
<i stroke-width="1.2" data-lucide="thumbs-up" text-indigo-500></i>
<span class="text-primary-600 text-2xl">
<i stroke-width="1.2" data-lucide="thumbs-up" text-primary-500></i>
</span>
</div>
<div>
@ -197,8 +197,8 @@
<!-- Feature 3 -->
<div class="flex items-start space-x-6" data-aos="fade-up" data-aos-duration="800" data-aos-delay="300">
<div class="bg-white p-4 rounded-lg">
<span class="text-indigo-600 text-2xl">
<i stroke-width="1.2" data-lucide="thumbs-up" text-indigo-500></i>
<span class="text-primary-600 text-2xl">
<i stroke-width="1.2" data-lucide="thumbs-up" text-primary-500></i>
</span>
</div>
<div>
@ -215,10 +215,10 @@
</div>
<!-- Right Side Image Section -->
<div class="relative whychooseBg bg-indigo-200 rounded-lg" data-aos="zoom-in" data-aos-duration="1200">
<div class="relative whychooseBg bg-primary-200 rounded-lg" data-aos="zoom-in" data-aos-duration="1200">
<div
class="absolute top-6 left-6 bg-white p-3 rounded-full cursor-pointer transition hover:scale-105 shadow-md flex items-center">
<span class="text-indigo-600 text-lg font-semibold">▶</span>
<span class="text-primary-600 text-lg font-semibold">▶</span>
<span class="ml-2 text-gray-900 font-semibold">Our Process</span>
</div>
<img src="assets/images/women-2.png" width="460" height="525" alt="Our Process"
@ -242,75 +242,75 @@
</p>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-16 mx-auto">
<!-- Card 1 -->
<div class="bg-indigo-100/30 p-6 rounded-xl transition" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100">
<div class="bg-primary-100/30 p-6 rounded-xl transition" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100">
<div class="bg-white p-4 rounded-md w-14 h-14 flex items-center justify-center">
<i stroke-width="2" data-lucide="id-card" class="text-indigo-600"></i>
<i stroke-width="2" data-lucide="id-card" class="text-primary-600"></i>
</div>
<h3 class="mt-4 text-lg font-semibold text-gray-900 text-start">Employee ID Issuance</h3>
<p class="text-gray-600 mt-2 text-start">
Employees can request ID cards with approval workflows and customizable templates.
</p>
<a href="#" class="text-indigo-600 text-start font-medium mt-4 w-fit block">Learn More →</a>
<a href="#" class="text-primary-600 text-start font-medium mt-4 w-fit block">Learn More →</a>
</div>
<!-- Card 2 -->
<div class="bg-indigo-100/30 p-6 rounded-xl transition" data-aos="fade-up" data-aos-duration="800" data-aos-delay="200">
<div class="bg-primary-100/30 p-6 rounded-xl transition" data-aos="fade-up" data-aos-duration="800" data-aos-delay="200">
<div class="bg-white p-4 rounded-md w-14 h-14 flex items-center justify-center">
<i stroke-width="2" data-lucide="scan-qr-code" class="text-indigo-600"></i>
<i stroke-width="2" data-lucide="scan-qr-code" class="text-primary-600"></i>
</div>
<h3 class="mt-4 text-lg font-semibold text-gray-900 text-start">Visitor Pass Management</h3>
<p class="text-gray-600 mt-2 text-start">
Visitors can register for temporary passes with QR code/barcode authentication.
</p>
<a href="#" class="text-indigo-600 text-start font-medium mt-4 w-fit block">Learn More →</a>
<a href="#" class="text-primary-600 text-start font-medium mt-4 w-fit block">Learn More →</a>
</div>
<!-- Card 3 -->
<div class="bg-indigo-100/30 p-6 rounded-xl transition" data-aos="fade-up" data-aos-duration="800" data-aos-delay="300">
<div class="bg-primary-100/30 p-6 rounded-xl transition" data-aos="fade-up" data-aos-duration="800" data-aos-delay="300">
<div class="bg-white p-4 rounded-md w-14 h-14 flex items-center justify-center">
<i stroke-width="2" data-lucide="lock" class="text-indigo-600"></i>
<i stroke-width="2" data-lucide="lock" class="text-primary-600"></i>
</div>
<h3 class="mt-4 text-lg font-semibold text-gray-900 text-start">Security & Compliance</h3>
<p class="text-gray-600 mt-2 text-start">
Maintain logs of issued cards, visitor check-ins, and expired IDs for security audits.
</p>
<a href="#" class="text-indigo-600 text-start font-medium mt-4 w-fit block">Learn More →</a>
<a href="#" class="text-primary-600 text-start font-medium mt-4 w-fit block">Learn More →</a>
</div>
<!-- Card 4 -->
<div class="bg-indigo-100/30 p-6 rounded-xl transition" data-aos="fade-up" data-aos-duration="800" data-aos-delay="400">
<div class="bg-primary-100/30 p-6 rounded-xl transition" data-aos="fade-up" data-aos-duration="800" data-aos-delay="400">
<div class="bg-white p-4 rounded-md w-14 h-14 flex items-center justify-center">
<i stroke-width="2" data-lucide="clock" class="text-indigo-600"></i>
<i stroke-width="2" data-lucide="clock" class="text-primary-600"></i>
</div>
<h3 class="mt-4 text-lg font-semibold text-gray-900 text-start">Real-time Visitor Tracking</h3>
<p class="text-gray-600 mt-2 text-start">
Track visitor check-ins and check-outs with automated logs and live monitoring.
</p>
<a href="#" class="text-indigo-600 text-start font-medium mt-4 w-fit block">Learn More →</a>
<a href="#" class="text-primary-600 text-start font-medium mt-4 w-fit block">Learn More →</a>
</div>
<!-- Card 5 -->
<div class="bg-indigo-100/30 p-6 rounded-xl transition" data-aos="fade-up" data-aos-duration="800" data-aos-delay="500">
<div class="bg-primary-100/30 p-6 rounded-xl transition" data-aos="fade-up" data-aos-duration="800" data-aos-delay="500">
<div class="bg-white p-4 rounded-md w-14 h-14 flex items-center justify-center">
<i stroke-width="2" data-lucide="refresh-cw" class="text-indigo-600"></i>
<i stroke-width="2" data-lucide="refresh-cw" class="text-primary-600"></i>
</div>
<h3 class="mt-4 text-lg font-semibold text-gray-900 text-start">Automated Renewals</h3>
<p class="text-gray-600 mt-2 text-start">
Set reminders and auto-renew ID cards for employees and frequent visitors.
</p>
<a href="#" class="text-indigo-600 text-start font-medium mt-4 w-fit block">Learn More →</a>
<a href="#" class="text-primary-600 text-start font-medium mt-4 w-fit block">Learn More →</a>
</div>
<!-- Card 6 -->
<div class="bg-indigo-100/30 p-6 rounded-xl transition" data-aos="fade-up" data-aos-duration="800" data-aos-delay="600">
<div class="bg-primary-100/30 p-6 rounded-xl transition" data-aos="fade-up" data-aos-duration="800" data-aos-delay="600">
<div class="bg-white p-4 rounded-md w-14 h-14 flex items-center justify-center">
<i stroke-width="2" data-lucide="folder-cog" class="text-indigo-600"></i>
<i stroke-width="2" data-lucide="folder-cog" class="text-primary-600"></i>
</div>
<h3 class="mt-4 text-lg font-semibold text-gray-900 text-start">Customizable Templates</h3>
<p class="text-gray-600 mt-2 text-start">
Create and modify ID card templates with company branding and security features.
</p>
<a href="#" class="text-indigo-600 text-start font-medium mt-4 w-fit block">Learn More →</a>
<a href="#" class="text-primary-600 text-start font-medium mt-4 w-fit block">Learn More →</a>
</div>
</div>
</div>
@ -328,7 +328,7 @@
<input type="email" placeholder="Enter your email"
class="px-4 py-3 rounded-lg w-full md:w-64 bg-white text-gray-700 focus:outline-none">
<button
class="px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-lg hover:bg-indigo-700 transition">
class="px-6 py-3 bg-primary-600 text-white font-semibold rounded-lg shadow-lg hover:bg-primary-700 transition">
Subscribe
</button>
</div>

2
idproject/js/daisyUI.min.js vendored
View File

File diff suppressed because one or more lines are too long

27
idproject/js/script.js
View File

@ -71,30 +71,3 @@ 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();

36
idproject/user/dashboad.html
View File

@ -29,33 +29,33 @@
<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"
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-primary-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>
<i data-lucide="bell" class="text-primary-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"
<!-- <div class="flex items-center bg-primary-100/40 border border-primary-100/40 border-solid px-4 py-2 rounded-lg gap-1 cursor-pointer hover:bg-primary-200/50 active:scale-90 transition-transform duration-150"
tabindex="0">
<span class="text-indigo-600">Login</span>
<span class="text-primary-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"
<div class="text-primary-600 flex items-center bg-white border border-primary-600 border-solid px-4 py-2 rounded-lg gap-1 cursor-pointer hover:bg-primary-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>
<i data-lucide="user" class="text-primary-600"></i>
<span class="text-primary-600">Welcome Krishnen...</span>
<i data-lucide="chevron-down" class="text-primary-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>
<li><a class="py-[10px] px-4 hover:bg-primary-100/50 hover:text-primary-600 border-bottom-1 border-solid border-primary-100 text-base">My Profile</a></li>
<li><a class="py-[10px] px-4 hover:bg-primary-100/50 hover:text-primary-600 text-base">Log Out</a></li>
</ul>
</div>
</nav>
@ -74,21 +74,21 @@
<ul class="flex flex-col gap-[6px]">
<li>
<a href="dashboad.html"
class="flex gap-2 font-normal text-white rounded-md items-center px-2 py-2 cursor-pointer bg-indigo-600 hover:bg-indigo-600 hover:text-white transition-all">
class="flex gap-2 font-normal text-white rounded-md items-center px-2 py-2 cursor-pointer bg-primary-600 hover:bg-primary-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">
class="flex font-normal gap-2 text-primary-600 rounded-md items-center px-2 py-2 cursor-pointer hover:bg-primary-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 items-center px-2 py-2 cursor-pointer hover:bg-indigo-600 hover:text-white transition-all">
class="flex font-normal gap-2 text-primary-600 rounded-md items-center px-2 py-2 cursor-pointer hover:bg-primary-600 hover:text-white transition-all">
<i data-lucide="chart-line"></i>
<span>Id Status</span>
</a>
@ -153,23 +153,23 @@
<thead>
<tr>
<th
class="px-4 py-3 bg-indigo-100/50 text-left text-base font-medium text-slate-900">
class="px-4 py-3 bg-primary-100/50 text-left text-base font-medium text-slate-900">
Employee Id
</th>
<th
class="px-4 py-3 bg-indigo-100/50 text-left text-base font-medium text-slate-900">
class="px-4 py-3 bg-primary-100/50 text-left text-base font-medium text-slate-900">
Name
</th>
<th
class="px-4 py-3 bg-indigo-100/50 text-left text-base font-medium text-slate-900">
class="px-4 py-3 bg-primary-100/50 text-left text-base font-medium text-slate-900">
Photo
</th>
<th
class="px-4 py-3 bg-indigo-100/50 text-left text-base font-medium text-slate-900">
class="px-4 py-3 bg-primary-100/50 text-left text-base font-medium text-slate-900">
Department
</th>
<th
class="px-4 py-3 bg-indigo-100/50 text-left text-base font-medium text-slate-900">
class="px-4 py-3 bg-primary-100/50 text-left text-base font-medium text-slate-900">
Designation
</th>
</tr>

11
idproject/user/example.html Normal file
View File

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>

121
idproject/user/idCard.html
View File

@ -29,37 +29,37 @@
<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"
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-primary-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>
<i data-lucide="bell" class="text-primary-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"
<!-- <div class="flex items-center bg-primary-100/40 border border-primary-100/40 border-solid px-4 py-2 rounded-lg gap-1 cursor-pointer hover:bg-primary-200/50 active:scale-90 transition-transform duration-150"
tabindex="0">
<span class="text-indigo-600">Login</span>
<span class="text-primary-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"
<div class="text-primary-600 flex items-center bg-white border border-primary-600 border-solid px-4 py-2 rounded-lg gap-1 cursor-pointer hover:bg-primary-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>
<i data-lucide="user" class="text-primary-600"></i>
<span class="text-primary-600">Welcome Krishnen...</span>
<i data-lucide="chevron-down" class="text-primary-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
class="py-[10px] px-4 hover:bg-primary-100/50 hover:text-primary-600 border-bottom-1 border-solid border-primary-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
<li><a class="py-[10px] px-4 hover:bg-primary-100/50 hover:text-primary-600 text-base">Log
Out</a></li>
</ul>
</div>
@ -79,21 +79,21 @@
<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">
class="flex font-normal gap-2 text-primary-600 rounded-md items-center px-2 py-2 cursor-pointer hover:bg-primary-600 hover:text-white transition-all">
<i data-lucide="layout-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li>
<a routerLink="/page/employee-managment"
class="flex font-normal gap-2 text-indigo-600 bg-indigo-600 text-white rounded-md items-center px-2 py-2 cursor-pointer hover:bg-indigo-600 hover:text-white transition-all">
class="flex font-normal gap-2 text-primary-600 bg-primary-600 text-white rounded-md items-center px-2 py-2 cursor-pointer hover:bg-primary-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 items-center px-2 py-2 cursor-pointer hover:bg-indigo-600 hover:text-white transition-all">
class="flex font-normal gap-2 text-primary-600 rounded-md items-center px-2 py-2 cursor-pointer hover:bg-primary-600 hover:text-white transition-all">
<i data-lucide="chart-line"></i>
<span>Id Status</span>
</a>
@ -124,28 +124,28 @@
<label for="firstName" class="font-medium text-slate-950">First
Name</label>
<input type="text" id="firstName"
class="w-full border border-solid border-gray-300 rounded-lg py-2 px-3 focus:border-indigo-600 focus:outline-none active:outline-none"
class="w-full border border-solid border-gray-300 rounded-lg py-2 px-3 focus:border-primary-600 focus:outline-none active:outline-none"
placeholder="Enter Your First Name">
</div>
<div class="flex flex-col gap-2">
<label for="lastName" class="font-medium text-slate-950">Last
Name</label>
<input type="text" id="lastName"
class="w-full border border-solid border-gray-300 rounded-lg py-2 px-3 focus:border-indigo-600 focus:outline-none active:outline-none"
class="w-full border border-solid border-gray-300 rounded-lg py-2 px-3 focus:border-primary-600 focus:outline-none active:outline-none"
placeholder="Enter Your Last Name">
</div>
<div class="flex flex-col gap-2">
<label for="lastName" class="font-medium text-slate-950">Email
Address</label>
<input type="email" id="lastName"
class="w-full border border-solid border-gray-300 rounded-lg py-2 px-3 focus:border-indigo-600 focus:outline-none active:outline-none"
class="w-full border border-solid border-gray-300 rounded-lg py-2 px-3 focus:border-primary-600 focus:outline-none active:outline-none"
placeholder="Enter Your Email Address">
</div>
<div class="flex flex-col gap-2">
<label for="lastName" class="font-medium text-slate-950">Phone
Number</label>
<input type="tel" id="lastName"
class="w-full border border-solid border-gray-300 rounded-lg py-2 px-3 focus:border-indigo-600 focus:outline-none active:outline-none"
class="w-full border border-solid border-gray-300 rounded-lg py-2 px-3 focus:border-primary-600 focus:outline-none active:outline-none"
placeholder="Enter Your Phone Number">
</div>
</div>
@ -163,27 +163,27 @@
<label for="employeeId" class="font-medium text-slate-950">Employee
ID</label>
<input type="text" id="employeeId"
class="w-full border border-solid border-gray-300 rounded-lg py-2 px-3 focus:border-indigo-600 focus:outline-none active:outline-none"
class="w-full border border-solid border-gray-300 rounded-lg py-2 px-3 focus:border-primary-600 focus:outline-none active:outline-none"
placeholder="Enter Your Employee ID">
</div>
<div class="flex flex-col gap-2">
<label for="designation"
class="font-medium text-slate-950">Designation</label>
<input type="text" id="designation"
class="w-full border border-solid border-gray-300 rounded-lg py-2 px-3 focus:border-indigo-600 focus:outline-none active:outline-none"
class="w-full border border-solid border-gray-300 rounded-lg py-2 px-3 focus:border-primary-600 focus:outline-none active:outline-none"
placeholder="Enter Your Designation">
</div>
<div class="flex flex-col gap-2">
<label for="lastName" class="font-medium text-slate-950">Joining
Date</label>
<input type="date" id="lastName"
class="w-full border border-solid border-gray-300 rounded-lg py-2 px-3 focus:border-indigo-600 focus:outline-none active:outline-none">
class="w-full border border-solid border-gray-300 rounded-lg py-2 px-3 focus:border-primary-600 focus:outline-none active:outline-none">
</div>
<div class="flex flex-col gap-2">
<label for="lastName"
class="font-medium text-slate-950">Department</label>
<select id="department" name="department"
class="w-full border border-solid border-gray-300 h-[42px] rounded-lg py-2 px-3 focus:border-indigo-600 focus:outline-none active:outline-none">
class="w-full border border-solid border-gray-300 h-[42px] rounded-lg py-2 px-3 focus:border-primary-600 focus:outline-none active:outline-none">
<option disabled selected hidden>Select Department</option>
<option value="IT">Information Technology</option>
<option value="HR">Human Resources</option>
@ -207,14 +207,14 @@
<label for="employeeId" class="font-medium text-slate-950">Emergency
Contact</label>
<input type="tel" id="employeeId"
class="w-full border border-solid border-gray-300 rounded-lg py-2 px-3 focus:border-indigo-600 focus:outline-none active:outline-none"
class="w-full border border-solid border-gray-300 rounded-lg py-2 px-3 focus:border-primary-600 focus:outline-none active:outline-none"
placeholder="Enter Your Emergency Contact">
</div>
<div class="flex flex-col gap-2">
<label for="remarks" class="font-medium text-slate-950">Remarks
(Optional)</label>
<textarea rows="6" id="remarks"
class="w-full border border-solid border-gray-300 rounded-lg py-2 px-3 focus:border-indigo-600 focus:outline-none"
class="w-full border border-solid border-gray-300 rounded-lg py-2 px-3 focus:border-primary-600 focus:outline-none"
placeholder="Remarks (Optional)"></textarea>
</div>
</div>
@ -224,29 +224,29 @@
<button type="submit"
class="border border-solid border-red-500 text-red-500 bg-transparent rounded-lg py-2 px-4 hover:bg-red-100/70 transition-all">Cancel</button>
<button type="submit"
class="bg-indigo-600 text-white rounded-lg py-2 px-4 hover:bg-indigo-700 transition-all">Submit
class="bg-primary-600 text-white rounded-lg py-2 px-4 hover:bg-primary-700 transition-all">Submit
Request</button>
</div>
</form>
<div class="tabs_section">
<div class="tabs-container pt-3 pb-4 px-5">
<div class="tabs">
<div class="tab active text-base hover:bg-indigo-100/50 transition-all rounded-t-lg cursor-pointer"
<div class="tab active text-base hover:bg-primary-100/50 transition-all rounded-t-lg cursor-pointer"
onclick="changeTab(0)">Guidlines</div>
<div class="tab text-base hover:bg-indigo-100/50 transition-all rounded-t-lg cursor-pointer"
<div class="tab text-base hover:bg-primary-100/50 transition-all rounded-t-lg cursor-pointer"
onclick="changeTab(1)">Preview</div>
<div class="indicator"></div>
</div>
<div class="tab-contents py-5">
<div class="tab-content active">
<div class="tab-content">
<div class="steps flex flex-col">
<div class="steps-head mb-1 flex gap-1 align-items-center">
<i data-lucide="info" class="text-indigo-600"></i>
<span class="text-indigo-600 font-medium">Photo Requirements</span>
<i data-lucide="info" class="text-primary-600"></i>
<span class="text-primary-600 font-medium">Photo Requirements</span>
</div>
<div class="steps_lits">
<ul
class="flex flex-col ml-[11px] pl-2 py-1 gap-2 border-l-2 border-solid border-indigo-200">
class="flex flex-col ml-[11px] pl-2 py-1 gap-2 border-l-2 border-solid border-primary-200">
<li>Recent passport-size photograph</li>
<li>White background</li>
<li>Professional attire</li>
@ -255,24 +255,24 @@
</ul>
</div>
<div class="steps-head my-1 flex gap-1 align-items-center">
<i data-lucide="clock" class="text-indigo-600"></i>
<span class="text-indigo-600 font-medium">Processing Time</span>
<i data-lucide="clock" class="text-primary-600"></i>
<span class="text-primary-600 font-medium">Processing Time</span>
</div>
<div class="steps_lits">
<ul
class="flex flex-col ml-[11px] pl-2 py-1 gap-2 border-l-2 border-solid border-indigo-200">
class="flex flex-col ml-[11px] pl-2 py-1 gap-2 border-l-2 border-solid border-primary-200">
<li>ID card requests typically take 2-3 business days to
process. You will receive an email notification once your
request is approved.</li>
</ul>
</div>
<div class="steps-head flex my-1 gap-1 align-items-center">
<i data-lucide="triangle-alert" class="text-indigo-600"></i>
<span class="text-indigo-600 font-medium">Important Notes</span>
<i data-lucide="triangle-alert" class="text-primary-600"></i>
<span class="text-primary-600 font-medium">Important Notes</span>
</div>
<div class="steps_lits">
<ul
class="flex flex-col ml-[11px] pl-2 py-1 gap-2 border-l-2 border-solid border-indigo-200">
class="flex flex-col ml-[11px] pl-2 py-1 gap-2 border-l-2 border-solid border-primary-200">
<li>Ensure all information is accurate</li>
<li>First-time ID cards are issued free of charge</li>
<li>Replacement for lost cards incurs a fee</li>
@ -281,10 +281,10 @@
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-content active">
<div class="flex justify-center">
<div
style="width: 320px; height: 500px; background: var(--color-indigo-500); border-radius: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); text-align: center; padding: 20px; font-family: Arial, sans-serif; color: #141516; margin: 0 auto;">
<!-- <div
style="width: 320px; height: 500px; background: var(--color-primary-500); border-radius: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); text-align: center; padding: 20px; font-family: Arial, sans-serif; color: #141516; margin: 0 auto;">
<div
style="border-radius: 50%; width: 100px; height: 100px; overflow: hidden; margin: 0 auto; border: 3px solid white;">
<img src="https://femina.wwmindia.com/content/2021/sep/women-thumb1632797644.jpg" alt="Profile Picture"
@ -308,6 +308,42 @@
<p style="margin-top: 10px; font-size: 12px; opacity: 0.8;">Valid Until:
Dec 2026</p>
</div> -->
<div class=""
style="width: 360px; margin: 0 auto; box-shadow: 0 2px 5px rgba(0,0,0,0.2); border-radius: 15px; overflow: hidden; position: relative;">
<div style="position: absolute; top: -25px;">
<img src="../assets/images/Card_bg1.png" style="width: 100%;"
alt="image" />
</div>
<div class="content" style="padding: 105px 30px 30px 30px;">
<div class="profile_image"
style="border: 8px solid #ffffff; border-radius: 10px; height: 120px; width: 120px; margin: 0 auto; overflow: hidden; background-color: #f5f5f5; position: relative; box-shadow: 0px 2px 3px #00000028;">
<img src="../assets/images/women.png" alt="image"
width="120px" height="120px"
style="border-radius: 14px;" />
</div>
<div class="details">
<h2 class="name"
style="font-size: 20px; margin: 25px 0px 0px; color: #121212; text-align: center;">
Krishnendu Panja</h2>
<p
style="margin-top: 3px; text-align: center; color: #121212; font-style: italic; opacity: 0.8; font-size: 12px;">
UI/UX Designer</p>
</div>
<div class="other_details" style="margin-top: 25px;">
<div style="text-align: left; padding: 10px 0px; font-size: 14px; color: #444; display: flex; flex-direction: column; justify-content: center; width: 260px; margin: 0 auto;">
<p style="font-size: 12px; color: #121212; opacity: 0.8; display: flex;"><strong style="width: 110px;" >Employee Number:</strong> <span style="display: flex; justify-content: end; align-items: end; flex: 1; text-align: end;">10068</span></p>
<p style="font-size: 12px; color: #121212; opacity: 0.8; display: flex;"><strong style="width: 110px;">Department:</strong> <span style="display: flex; justify-content: end; align-items: end; flex: 1; text-align: end;">Research & Development</span></p>
<p style="font-size: 12px; color: #121212; opacity: 0.8; display: flex;"><strong style="width: 110px;">DOB:</strong> <span style="display: flex; justify-content: end; align-items: end; flex: 1; text-align: end;">22/09/1998</span></p>
<p style="font-size: 12px; color: #121212; opacity: 0.8; display: flex;"><strong style="width: 110px;">Email:</strong> <span style="display: flex; justify-content: end; align-items: end; flex: 1; text-align: end;">krishnendu.panja@sentientgeeks.com</span></p>
<p style="font-size: 12px; color: #121212; opacity: 0.8; display: flex;"><strong style="width: 110px;">Phone:</strong> <span style="display: flex; justify-content: end; align-items: end; flex: 1; text-align: end;">+000-000-00</span></p>
<p style="font-size: 12px; color: #121212; opacity: 0.8; display: flex;"><strong style="width: 110px;">Joining Date:</strong> <span style="display: flex; justify-content: end; align-items: end; flex: 1; text-align: end;">12/09/2021</span></p>
</div>
</div>
</div>
<div style="padding: 7.5px 0; text-align: center; background-color: #c5cae954;">
<p style="font-size: 12px; color: #121212; opacity: 0.8; color: #3949AB;">Powered By GeeksId</p>
</div>
</div>
</div>
</div>
@ -315,11 +351,12 @@
</div>
</div>
</div>
</section>
<!-- dashboard page -->
</div>
</main>
</section>
<!-- dashboard page -->
</div>
</main>
</div>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/aos.min.js"></script>

237
idproject/user/status.html
View File

@ -29,37 +29,37 @@
<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"
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-primary-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>
<i data-lucide="bell" class="text-primary-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"
<!-- <div class="flex items-center bg-primary-100/40 border border-primary-100/40 border-solid px-4 py-2 rounded-lg gap-1 cursor-pointer hover:bg-primary-200/50 active:scale-90 transition-transform duration-150"
tabindex="0">
<span class="text-indigo-600">Login</span>
<span class="text-primary-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"
<div class="text-primary-600 flex items-center bg-white border border-primary-600 border-solid px-4 py-2 rounded-lg gap-1 cursor-pointer hover:bg-primary-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>
<i data-lucide="user" class="text-primary-600"></i>
<span class="text-primary-600">Welcome Krishnen...</span>
<i data-lucide="chevron-down" class="text-primary-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
class="py-[10px] px-4 hover:bg-primary-100/50 hover:text-primary-600 border-bottom-1 border-solid border-primary-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
<li><a class="py-[10px] px-4 hover:bg-primary-100/50 hover:text-primary-600 text-base">Log
Out</a></li>
</ul>
</div>
@ -79,21 +79,21 @@
<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">
class="flex font-normal gap-2 text-primary-600 rounded-md items-center px-2 py-2 cursor-pointer hover:bg-primary-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">
class="flex font-normal gap-2 text-primary-600 rounded-md items-center px-2 py-2 cursor-pointer hover:bg-primary-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">
class="flex font-normal gap-2 text-primary-600 rounded-md bg-primary-600 text-white items-center px-2 py-2 cursor-pointer hover:bg-primary-600 hover:text-white transition-all">
<i data-lucide="chart-line"></i>
<span>Id Status</span>
</a>
@ -114,135 +114,196 @@
<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"
<div class="tab active text-base hover:bg-primary-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"
<div class="tab text-base hover:bg-primary-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">
<ul class="timeline_list">
<li class="flex timeline active gap-3">
<div class="flex flex-col">
<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>
class="icon w-8 h-8 rounded-full bg-primary-200/60 border border-primary-200 border-solid grid place-items-center">
<i data-lucide="user-round-check"
class="w-4 h-4 text-white"></i>
</div>
<div
class="hidden my-1 line sm:flex bg-primary-200 ml-[14px] w-[2px] h-[120px] dark:bg-primary-200">
</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">
<div class="data">
<h3
class="text-lg font-semibold text-gray-900 dark:text-white">
class="text-lg font-semibold text-gray-900 mb-2 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>
class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">December 2, 2021</time>
<p
class="text-base font-normal text-gray-500 dark:text-gray-400">
Fill the form with required details.</p>
Begin the process by submitting a request for an ID card. Fill out the required form with accurate details, including your full name, department, employee ID (if applicable), and any necessary supporting documents. Ensure all information is correct to avoid delays in processing.</p>
</div>
</li>
<li class="relative mb-6 sm:mb-0 w-[25%]">
<div class="flex items-center">
<li class="flex timeline active gap-3">
<div class="flex flex-col">
<div
class="hidden sm:flex w-full bg-indigo-200 h-0.5 dark:bg-gray-700">
class="icon w-8 h-8 rounded-full bg-primary-200/60 border border-primary-200 border-solid grid place-items-center">
<i data-lucide="hourglass"
class="w-4 h-4 text-primary-700"></i>
</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>
class="hidden my-1 line sm:flex bg-primary-200 ml-[14px] w-[2px] h-[120px] dark:bg-primary-200">
</div>
</div>
<div class="mt-3 sm:pe-8">
<div class="data">
<h3
class="text-lg font-semibold text-gray-900 dark:text-white">
class="text-lg font-semibold text-gray-900 mb-2 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>
class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">December 2, 2021</time>
<p
class="text-base font-normal text-gray-500 dark:text-gray-400">
HR team reviews your request.</p>
The HR team will review your request to verify the details provided. They will check for completeness, confirm your eligibility, and validate the submitted documents. If any discrepancies are found, you may be contacted for clarification or additional information.</p>
</div>
</li>
<li class="relative mb-6 sm:mb-0 w-[25%]">
<div class="flex items-center">
<li class="flex timeline active gap-3">
<div class="flex flex-col">
<div
class="hidden sm:flex w-full bg-indigo-200 h-0.5 dark:bg-gray-700">
class="icon w-8 h-8 rounded-full bg-primary-200/60 border border-primary-200 border-solid grid place-items-center">
<i data-lucide="printer"
class="w-4 h-4 text-primary-700"></i>
</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>
class="hidden my-1 line sm:flex bg-primary-200 ml-[14px] w-[2px] h-[120px] dark:bg-primary-200">
</div>
</div>
<div class="mt-3 sm:pe-8">
<div class="data">
<h3
class="text-lg font-semibold text-gray-900 dark:text-white">
class="text-lg font-semibold text-gray-900 mb-2 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>
class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">December 2, 2021</time>
<p
class="text-base font-normal text-gray-500 dark:text-gray-400">
Card is printed and prepared.</p>
Once your request is approved, the ID card is sent for printing. The printing process includes embedding security features such as barcodes, QR codes, or RFID chips (if applicable). The printed card is then quality-checked to ensure accuracy and durability before final issuance.</p>
</div>
</li>
<li class="relative mb-6 sm:mb-0 w-[25%]">
<div class="flex items-center">
<li class="flex active timeline gap-3">
<div class="flex flex-col">
<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>
class="icon w-8 h-8 rounded-full bg-primary-200/60 border border-primary-200 border-solid grid place-items-center">
<i data-lucide="check"
class="w-4 h-4 text-primary-700"></i>
</div>
</div>
<div class="mt-3 sm:pe-8">
<div class="data">
<h3
class="text-lg font-semibold text-gray-900 dark:text-white">
class="text-lg font-semibold text-gray-900 mb-2 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>
class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">December 2, 2021</time>
<p
class="text-base font-normal text-gray-500 dark:text-gray-400">
Collect from the security office.</p>
Your ID card is now ready for pickup. You will receive a notification with collection details, including the location and any required identification documents to present. Visit the security office or designated distribution point to collect your card and confirm receipt.</p>
</div>
<!-- <div class="hidden my-1 sm:flex bg-primary-200 ml-[14px] w-[2px] h-[120px] dark:bg-primary-200"></div> -->
</li>
</ol>
</ul>
</div>
</div>
<div class="tab-content">
<div class="status-timeline">
<ul class="timeline_list">
<li class="flex timeline active gap-3">
<div class="flex flex-col">
<div
class="icon w-8 h-8 rounded-full bg-primary-200/60 border border-primary-200 border-solid grid place-items-center">
<i data-lucide="user-round-check"
class="w-4 h-4 text-white"></i>
</div>
<div
class="hidden my-1 line sm:flex bg-primary-200 ml-[14px] w-[2px] h-[120px] dark:bg-primary-200">
</div>
</div>
<div class="data">
<h3
class="text-lg font-semibold text-gray-900 mb-2 dark:text-white">
Submit Request</h3>
<time
class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">December 2, 2021</time>
<p
class="text-base font-normal text-gray-500 dark:text-gray-400">
Begin the process by submitting a request for an ID card. Fill out the required form with accurate details, including your full name, department, employee ID (if applicable), and any necessary supporting documents. Ensure all information is correct to avoid delays in processing.</p>
</div>
</li>
<li class="flex timeline active gap-3">
<div class="flex flex-col">
<div
class="icon w-8 h-8 rounded-full bg-primary-200/60 border border-primary-200 border-solid grid place-items-center">
<i data-lucide="hourglass"
class="w-4 h-4 text-primary-700"></i>
</div>
<div
class="hidden my-1 line sm:flex bg-primary-200 ml-[14px] w-[2px] h-[120px] dark:bg-primary-200">
</div>
</div>
<div class="data">
<h3
class="text-lg font-semibold text-gray-900 mb-2 dark:text-white">
HR Approval</h3>
<time
class="block mb-2 text-sm font-normal leading-none text-gray-400 dark:text-gray-500">December 2, 2021</time>
<p
class="text-base font-normal text-gray-500 dark:text-gray-400">
The HR team will review your request to verify the details provided. They will check for completeness, confirm your eligibility, and validate the submitted documents. If any discrepancies are found, you may be contacted for clarification or additional information.</p>
</div>
</li>
<li class="flex timeline gap-3">
<div class="flex flex-col">
<div
class="icon w-8 h-8 rounded-full bg-primary-200/60 border border-primary-200 border-solid grid place-items-center">
<i data-lucide="printer"
class="w-4 h-4 text-primary-700"></i>
</div>
<div
class="hidden my-1 line sm:flex bg-primary-200 ml-[14px] w-[2px] h-[120px] dark:bg-primary-200">
</div>
</div>
<div class="data">
<h3
class="text-lg font-semibold text-gray-900 mb-2 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">December 2, 2021</time>
<p
class="text-base font-normal text-gray-500 dark:text-gray-400">
Once your request is approved, the ID card is sent for printing. The printing process includes embedding security features such as barcodes, QR codes, or RFID chips (if applicable). The printed card is then quality-checked to ensure accuracy and durability before final issuance.</p>
</div>
</li>
<li class="flex timeline gap-3">
<div class="flex flex-col">
<div
class="icon w-8 h-8 rounded-full bg-primary-200/60 border border-primary-200 border-solid grid place-items-center">
<i data-lucide="check"
class="w-4 h-4 text-primary-700"></i>
</div>
</div>
<div class="data">
<h3
class="text-lg font-semibold text-gray-900 mb-2 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">December 2, 2021</time>
<p
class="text-base font-normal text-gray-500 dark:text-gray-400">
Your ID card is now ready for pickup. You will receive a notification with collection details, including the location and any required identification documents to present. Visit the security office or designated distribution point to collect your card and confirm receipt.</p>
</div>
<!-- <div class="hidden my-1 sm:flex bg-primary-200 ml-[14px] w-[2px] h-[120px] dark:bg-primary-200"></div> -->
</li>
</ul>
</div>
</div>
</div>
</div>