user Html structure push
This commit is contained in:
krishnenduPanja
parent
bff451aa50
commit
95dd0c39a1
BIN
idproject/assets/images/Brochure-Minimalist-View-3.jpg
Normal file
BIN
idproject/assets/images/Brochure-Minimalist-View-3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
BIN
idproject/assets/images/Hero-Shape-Background.png
Normal file
BIN
idproject/assets/images/Hero-Shape-Background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
BIN
idproject/assets/images/Shape-Background-3.png
Normal file
BIN
idproject/assets/images/Shape-Background-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
19
idproject/assets/images/circle.svg
Normal file
19
idproject/assets/images/circle.svg
Normal file
@ -0,0 +1,19 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 153 187" style="enable-background:new 0 0 153 187;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{opacity:0.2;fill:#FFFFFF;}
|
||||
</style>
|
||||
<g>
|
||||
<title>3</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="Mask-_x2B_-Mask-Mask" transform="translate(14.000000, 0.000000)">
|
||||
<g id="Mask">
|
||||
</g>
|
||||
<g id="Mask_1_">
|
||||
<path class="st0" d="M138,141.2c-3.6,0.5-7.3,0.8-11,0.8c-29.6,0-55.4-16.5-68.6-40.9c-6-11-9.4-23.7-9.4-37.1 c0-26.5,13.2-49.9,33.4-64H138v129.5"/>
|
||||
</g>
|
||||
<g id="Mask_2_">
|
||||
<path class="st0" d="M138,141.2V187H-15c0.2-43.3,31.9-79.1,73.4-85.9c4.6-0.8,9.3-1.1,14.1-1.1c26.1,0,49.5,11.4,65.5,29.5"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 783 B |
1
idproject/assets/images/logo.svg
Normal file
1
idproject/assets/images/logo.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="30" viewBox="0 0 80 30"><defs><radialGradient id="_2002046508__a" cx="0" cy="0" r="1" gradientTransform="matrix(.21 -.67353 .2545 .07935 .512 1.109)"><stop stop-color="#6420FF"/><stop offset="1" stop-color="#6420FF" stop-opacity="0"/></radialGradient><radialGradient id="_2002046508__b" cx="0" cy="0" r="1" gradientTransform="matrix(.584 .16215 -.3771 1.3582 .024 .666)"><stop offset=".25" stop-color="#00C4CC"/><stop offset="1" stop-color="#00C4CC" stop-opacity="0"/></radialGradient><radialGradient id="_2002046508__c" cx="0" cy="0" r="1" gradientTransform="matrix(.29425 -.739 .3555 .14155 .427 1)"><stop stop-color="#6420FF"/><stop offset="1" stop-color="#6420FF" stop-opacity="0"/></radialGradient><radialGradient id="_2002046508__d" cx="0" cy="0" r="1" gradientTransform="matrix(.3915 -.59869 .4743 .31016 .028 1)"><stop stop-color="#6420FF"/><stop offset="1" stop-color="#6420FF" stop-opacity="0"/></radialGradient><radialGradient id="_2002046508__e" cx="0" cy="0" r="1" gradientTransform="rotate(34.593 -.1 .2) scale(1.03255 2.80688)"><stop stop-color="#00C4CC"/><stop offset="1" stop-color="#00C4CC" stop-opacity="0"/></radialGradient><pattern id="_2002046508__f" width="1" height="1" patternContentUnits="objectBoundingBox"><path fill="#7D2AE7" d="M0 0h1v1H0z"/><path fill="url(#_2002046508__a)" d="M0 0h1v1H0z"/><path fill="url(#_2002046508__b)" d="M0 0h1v1H0z"/><path fill="url(#_2002046508__c)" d="M0 0h1v1H0z"/><path fill="url(#_2002046508__d)" d="M0 0h1v1H0z"/><path fill="url(#_2002046508__e)" d="M0 0h1v1H0z"/></pattern></defs><path fill="url(#_2002046508__f)" d="M79.444 18.096c-.136 0-.26.088-.324.272-.82 2.34-1.928 3.732-2.84 3.732-.524 0-.736-.584-.736-1.5 0-2.292 1.372-7.152 2.064-9.368.08-.268.132-.508.132-.712 0-.644-.352-.96-1.224-.96-.94 0-1.952.368-2.936 2.092-.34-1.52-1.368-2.184-2.804-2.184-1.66 0-3.264 1.068-4.584 2.8-1.32 1.732-2.872 2.3-4.04 2.02.84-2.056 1.152-3.592 1.152-4.732 0-1.788-.884-2.868-2.312-2.868-2.172 0-3.424 2.072-3.424 4.252 0 1.684.764 3.416 2.444 4.256-1.408 3.184-3.464 6.064-4.244 6.064-1.008 0-1.304-4.932-1.248-8.46.036-2.024.204-2.128.204-2.74 0-.352-.228-.592-1.144-.592-2.136 0-2.796 1.808-2.896 3.884a10.233 10.233 0 0 1-.368 2.332c-.892 3.184-2.732 5.6-3.932 5.6-.556 0-.708-.556-.708-1.284 0-2.292 1.284-5.156 1.284-7.6 0-1.796-.788-2.932-2.272-2.932-1.748 0-4.06 2.08-6.248 5.976.72-2.984 1.016-5.872-1.116-5.872A2.886 2.886 0 0 0 36 9.916a.752.752 0 0 0-.432.728c.204 3.176-2.56 11.312-5.18 11.312-.476 0-.708-.516-.708-1.348 0-2.296 1.368-7.144 2.056-9.364.088-.288.136-.536.136-.752 0-.608-.376-.92-1.228-.92-.936 0-1.952.356-2.932 2.08-.344-1.52-1.372-2.184-2.808-2.184-2.356 0-4.988 2.492-6.144 5.74-1.548 4.336-4.668 8.524-8.868 8.524-3.812 0-5.824-3.172-5.824-8.184C4.068 8.312 9.38 2.4 13.32 2.4c1.884 0 2.784 1.2 2.784 3.04 0 2.228-1.244 3.264-1.244 4.112 0 .26.216.516.644.516 1.712 0 3.728-2.012 3.728-4.756S17.004.56 13.064.56C6.552.56 0 7.112 0 15.508c0 6.68 3.296 10.708 8.996 10.708 3.888 0 7.284-3.024 9.116-6.552.208 2.924 1.536 4.452 3.56 4.452 1.8 0 3.256-1.072 4.368-2.956.428 1.972 1.564 2.936 3.04 2.936 1.692 0 3.108-1.072 4.456-3.064-.02 1.564.336 3.036 1.692 3.036.64 0 1.404-.148 1.54-.708 1.428-5.904 4.956-10.724 6.036-10.724.32 0 .408.308.408.672 0 1.604-1.132 4.892-1.132 6.992 0 2.268.964 3.768 2.956 3.768 2.208 0 4.452-2.704 5.948-6.656.468 3.692 1.48 6.672 3.064 6.672 1.944 0 5.396-4.092 7.488-8.424.82.104 2.052.076 3.236-.76-.504 1.276-.8 2.672-.8 4.068 0 4.02 1.92 5.148 3.572 5.148 1.796 0 3.252-1.072 4.368-2.956.368 1.7 1.308 2.932 3.036 2.932 2.704 0 5.052-2.764 5.052-5.032 0-.6-.256-.964-.556-.964zM23.32 21.888c-1.092 0-1.52-1.1-1.52-2.74 0-2.848 1.948-7.604 4.008-7.604.9 0 1.24 1.06 1.24 2.356 0 2.892-1.852 7.988-3.728 7.988zm37.404-8.5c-.652-.776-.888-1.832-.888-2.772 0-1.16.424-2.14.932-2.14s.664.5.664 1.196c0 1.164-.416 2.864-.708 3.716zm8.468 8.5c-1.092 0-1.52-1.264-1.52-2.74 0-2.748 1.948-7.604 4.024-7.604.9 0 1.22 1.052 1.22 2.356 0 2.892-1.82 7.988-3.724 7.988z"/></svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
BIN
idproject/assets/images/qr.png
Normal file
BIN
idproject/assets/images/qr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
BIN
idproject/assets/images/women-2.png
Normal file
BIN
idproject/assets/images/women-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
BIN
idproject/assets/images/women.png
Normal file
BIN
idproject/assets/images/women.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 280 KiB |
BIN
idproject/assets/images/women2.png
Normal file
BIN
idproject/assets/images/women2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
1
idproject/css/aos.min.css
vendored
Normal file
1
idproject/css/aos.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
7
idproject/css/daisyUI.min.css
vendored
Normal file
7
idproject/css/daisyUI.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
6
idproject/css/landing.css
Normal file
6
idproject/css/landing.css
Normal file
@ -0,0 +1,6 @@
|
||||
.banner {
|
||||
background-image: url(../assets/images/Hero-Shape-Background.png);
|
||||
background-position: center left;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
270
idproject/css/style.css
Normal file
270
idproject/css/style.css
Normal file
@ -0,0 +1,270 @@
|
||||
:root {
|
||||
--bg-gradient-danger: linear-gradient(to right, #ffbf96, #fe7096);
|
||||
--bg-gradient-info: linear-gradient(to right, #90caf9, #047edf 99%);
|
||||
--bg-gradient-success: linear-gradient(to right, #84d9d2, #07cdae);
|
||||
--primary-color: #3f51b5;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background-color: #fcfcfc;
|
||||
color: #111;
|
||||
line-height: 1.2;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1270px !important;
|
||||
padding: 0rem 15px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (max-width: 1535px) {
|
||||
.container {
|
||||
max-width: 1170px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1199px) {
|
||||
.container {
|
||||
max-width: 970px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.container {
|
||||
max-width: 750px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.container {
|
||||
max-width: 600px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.container {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.banner {
|
||||
background-image: url(../assets/images/Hero-Shape-Background.png);
|
||||
background-position: center left;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.whychooseBg {
|
||||
background-image: url(../assets/images/Shape-Background-3.png);
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
table.geeksId_table {
|
||||
border-spacing: 0 12px;
|
||||
border-collapse: separate;
|
||||
}
|
||||
|
||||
table.geeksId_table tbody tr {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(197 202 233 / var(--tw-border-opacity, 1));
|
||||
box-shadow: 0 1px 6px rgba(197, 202, 233, 0.5019607843);
|
||||
margin-bottom: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.geeksId_table tbody>tr>td,
|
||||
.geeksId_table,
|
||||
.geeksId_table thead>tr>th {
|
||||
border: none;
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: 0.625rem;
|
||||
border-bottom-left-radius: 0.625rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-right-radius: 0.625rem;
|
||||
border-bottom-right-radius: 0.625rem;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* user page */
|
||||
main {
|
||||
box-shadow: 0px 0px 5px 0px #0000003a;
|
||||
}
|
||||
|
||||
.body-wrapper {
|
||||
background: rgb(196, 201, 224);
|
||||
background: linear-gradient(180deg,
|
||||
rgb(228, 228, 243) 29%,
|
||||
rgb(177, 185, 221) 100%);
|
||||
}
|
||||
|
||||
header {
|
||||
border-bottom: 1px solid #d1d5db;
|
||||
}
|
||||
|
||||
header .header_widgets {
|
||||
grid-column: end;
|
||||
}
|
||||
|
||||
header .searchbar {
|
||||
grid-column: searchbar;
|
||||
}
|
||||
|
||||
header .searchbar svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.card-img-absolute {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* dashboard */
|
||||
.user__page .icon__box {
|
||||
background: -webkit-gradient(linear, left top, right top, from(#5d70eb), to(#3949AB)) !important;
|
||||
background: linear-gradient(to right, #5d70eb, #3949AB) !important;
|
||||
webkit-box-shadow: 0px 3px 8.3px 0.7px #3948ab44;
|
||||
box-shadow: 0px 3px 8.3px 0.7px #3948ab44;
|
||||
}
|
||||
|
||||
.bg-gradient-danger {
|
||||
background: var(--bg-gradient-danger);
|
||||
}
|
||||
|
||||
.bg-gradient-info {
|
||||
background: var(--bg-gradient-info);
|
||||
}
|
||||
|
||||
.bg-gradient-success {
|
||||
background: var(--bg-gradient-success);
|
||||
}
|
||||
|
||||
.user__page .card {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Id Card */
|
||||
.id_card_form .heading {
|
||||
border-bottom: 1px solid #d1d5db;
|
||||
}
|
||||
|
||||
.id_card_form .heading h2::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 4px;
|
||||
background-color: var(--color-indigo-600);
|
||||
border-radius: 1px;
|
||||
width: 100%;
|
||||
bottom: -2.5px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.user_id_page .tabs-container {
|
||||
width: 100%;
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.user_id_page .tabs {
|
||||
display: flex;
|
||||
position: relative;
|
||||
border-bottom: 2px solid #ddd;
|
||||
}
|
||||
|
||||
.user_id_page .tab {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 12px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
transition: color 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.user_id_page .tab:hover {
|
||||
color: var(--color-indigo-600);
|
||||
background-color: var(--color-indigo-100/60);
|
||||
}
|
||||
|
||||
.user_id_page .tab.active {
|
||||
color: var(--color-indigo-600);
|
||||
background-color: var(--color-indigo-100/60);
|
||||
}
|
||||
|
||||
.user_id_page .indicator {
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
height: 3px;
|
||||
width: 50%;
|
||||
background-color: var(--color-indigo-600);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.user_id_page .tab-content {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.user_id_page .tab-content.active {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
357
idproject/index.html
Normal file
357
idproject/index.html
Normal file
@ -0,0 +1,357 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Geeks ID</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" />
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="py-4 bg-white">
|
||||
<div class="container">
|
||||
<div class="flex flex-col md:flex-row items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<img src="assets/images/logo.svg" alt="logo" />
|
||||
</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"
|
||||
(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"
|
||||
(click)="logout()">
|
||||
logout
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="banner bg-indigo-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">
|
||||
<p class="text-pink-400 uppercase font-semibold tracking-widest" data-aos="fade-up" data-aos-duration="800">
|
||||
ID and Visiting Services
|
||||
</p>
|
||||
<h1 class="text-5xl font-extrabold text-gray-900 mt-4" data-aos="fade-up" data-aos-duration="1000">
|
||||
Show Up, Stand Out!
|
||||
</h1>
|
||||
<h2 class="text-xl font-extrabold text-gray-900 mt-4" data-aos="fade-up" data-aos-duration="1100">
|
||||
Show Up, Stand Out!
|
||||
</h2>
|
||||
<p class="text-gray-900 mt-6" data-aos="fade-up" data-aos-duration="1200">
|
||||
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"
|
||||
data-aos="zoom-in" data-aos-duration="1000">
|
||||
Get Started
|
||||
</a>
|
||||
</div>
|
||||
<div class="image_container relative top-0 md:top-[58px] w-full md:w-[385px] mx-auto md:mx-0"
|
||||
data-aos="fade-left" data-aos-duration="1200">
|
||||
<img src="assets/images/women.png" alt="hero" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-24 px-8 bg-gray-50">
|
||||
<div class="container">
|
||||
<div class="flex flex-col md:flex-row items-center justify-between">
|
||||
<div class="text-left mb-12" data-aos="fade-right" data-aos-duration="1000">
|
||||
<h4 class="text-pink-500 uppercase font-semibold tracking-widest">
|
||||
About Us
|
||||
</h4>
|
||||
<h2 class="text-4xl font-extrabold text-gray-900 mt-2">
|
||||
Your Trusted Partner for <br />
|
||||
Superior Printing Services
|
||||
</h2>
|
||||
<p class="text-gray-500 mt-4">
|
||||
Imperdiet turpis ut quis quis scelerisque ullamcorper eu tellus.
|
||||
</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"
|
||||
data-aos="fade-left" data-aos-duration="1000">
|
||||
Learn More
|
||||
</a>
|
||||
</div>
|
||||
<div class="grid md:grid-cols-3 gap-8 mt-7">
|
||||
<!-- High-Quality Printing -->
|
||||
<div class="bg-white rounded-lg shadow-md" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100">
|
||||
<img src="assets/images/Brochure-Minimalist-View-3.jpg" alt="High-Quality Printing"
|
||||
class="rounded-bl-none h-[260px] w-full rounded-br-none rounded-tr-lg rounded-tl-lg" />
|
||||
<div class="content py-8 px-4">
|
||||
<h3 class="text-xl font-bold text-gray-900">High-Quality Printing</h3>
|
||||
<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">
|
||||
Learn More →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Customization Options -->
|
||||
<div class="bg-white rounded-lg shadow-md" data-aos="fade-up" data-aos-duration="800" data-aos-delay="200">
|
||||
<img src="assets/images/Brochure-Minimalist-View-3.jpg" alt="Customization Options"
|
||||
class="rounded-bl-none h-[260px] w-full rounded-br-none rounded-tr-lg rounded-tl-lg" />
|
||||
<div class="content py-8 px-4">
|
||||
<h3 class="text-xl font-bold text-gray-900">Customization Options</h3>
|
||||
<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">
|
||||
Learn More →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Turnaround Time -->
|
||||
<div class="bg-white rounded-lg shadow-md" data-aos="fade-up" data-aos-duration="800" data-aos-delay="300">
|
||||
<img src="assets/images/Brochure-Minimalist-View-3.jpg" alt="Quick Turnaround Time"
|
||||
class="rounded-bl-none h-[260px] w-full rounded-br-none rounded-tr-lg rounded-tl-lg" />
|
||||
<div class="content py-8 px-4">
|
||||
<h3 class="text-xl font-bold text-gray-900">Quick Turnaround Time</h3>
|
||||
<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">
|
||||
Learn More →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="bg-indigo-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 -->
|
||||
<div data-aos="fade-right" data-aos-duration="1000">
|
||||
<h4 class="text-pink-500 uppercase font-semibold tracking-widest">
|
||||
Why Choose Us
|
||||
</h4>
|
||||
<h2 class="text-4xl font-extrabold text-gray-900 mt-2">
|
||||
Experience Excellence <br />
|
||||
Service
|
||||
</h2>
|
||||
<p class="text-gray-500 mt-4">
|
||||
Netus feugiat vitae enim enim in viverra. Id at sagittis cras pretium
|
||||
dictum nec netus. Ante dolor quis convallis.
|
||||
</p>
|
||||
|
||||
<!-- Features List -->
|
||||
<div class="mt-16 space-y-12">
|
||||
<!-- 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>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-gray-900">
|
||||
Uncompromising Quality
|
||||
</h3>
|
||||
<p class="text-gray-500 mt-2">
|
||||
Netus feugiat vitae enim enim in viverra. Id at sagittis cras
|
||||
pretium dictum nec netus. Ante dolor quis convallis.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-gray-900">
|
||||
Extensive Range of Services
|
||||
</h3>
|
||||
<p class="text-gray-500 mt-2">
|
||||
Netus feugiat vitae enim enim in viverra. Id at sagittis cras
|
||||
pretium dictum nec netus. Ante dolor quis convallis.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-xl font-bold text-gray-900">
|
||||
Personalized Approach
|
||||
</h3>
|
||||
<p class="text-gray-500 mt-2">
|
||||
Netus feugiat vitae enim enim in viverra. Id at sagittis cras
|
||||
pretium dictum nec netus. Ante dolor quis convallis.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Side Image Section -->
|
||||
<div class="relative whychooseBg bg-indigo-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="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"
|
||||
class="rounded-lg mx-auto w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="text-center py-24">
|
||||
<div class="container">
|
||||
<h4 class="font-semibold text-pink-500 tracking-widest" data-aos="fade-up" data-aos-duration="800">
|
||||
OUR SERVICES
|
||||
</h4>
|
||||
<h3 class="text-4xl font-bold text-gray-900 mt-2" data-aos="fade-up" data-aos-duration="900">
|
||||
Efficient ID Card Issuance
|
||||
</h3>
|
||||
<p class="text-gray-600 mt-4 max-w-2xl mx-auto" data-aos="fade-up" data-aos-duration="1000">
|
||||
A seamless platform for managing employee ID cards and visitor passes with real-time tracking,
|
||||
role-based access, and security compliance.
|
||||
</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-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>
|
||||
</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>
|
||||
</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-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>
|
||||
</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>
|
||||
</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-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>
|
||||
</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>
|
||||
</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-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>
|
||||
</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>
|
||||
</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-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>
|
||||
</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>
|
||||
</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-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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="w-full bg-[#212131] py-14 flex">
|
||||
<div class="container mx-auto">
|
||||
<div
|
||||
class="w-full flex flex-wrap md:flex-nowrap items-center justify-between text-center md:text-left gap-6">
|
||||
<h2 class="text-white xl:text-3xl md:text-2xl text-xl font-bold w-full md:w-auto" data-aos="fade-up" data-aos-duration="1000">
|
||||
Join Our Newsletter to <br class="hidden md:block"> Keep Up To Date With Us!
|
||||
</h2>
|
||||
<div
|
||||
class="flex flex-wrap md:flex-nowrap items-center justify-center md:justify-end w-full md:w-auto gap-3" data-aos="zoom-in" data-aos-duration="1000">
|
||||
<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">
|
||||
Subscribe
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="bg-[#14141F] py-8">
|
||||
<div class="container">
|
||||
<div class="flex flex-col md:flex-row items-center justify-between">
|
||||
<img src="assets/images/logo.svg" alt="logo" />
|
||||
<p class="text-white/60">
|
||||
© 2025 Geeks ID. All Rights Reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="js/aos.min.js"></script>
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
|
||||
<script src="js/script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
1
idproject/js/aos.min.js
vendored
Normal file
1
idproject/js/aos.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
8
idproject/js/daisyUI.min.js
vendored
Normal file
8
idproject/js/daisyUI.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2
idproject/js/jquery.min.js
vendored
Normal file
2
idproject/js/jquery.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
73
idproject/js/script.js
Normal file
73
idproject/js/script.js
Normal file
@ -0,0 +1,73 @@
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: {
|
||||
100: "#C5CAE9", // Lightest shade
|
||||
200: "#9FA8DA", // Lighter shade
|
||||
300: "#7986CB", // Mid-light shade
|
||||
400: "#3F51B5", // Base color (your original color)
|
||||
500: "#3949AB", // Slightly darker shade
|
||||
600: "#303F9F", // Dark shade
|
||||
700: "#283593", // Very dark shade
|
||||
800: "#1A237E", // Near-black shade
|
||||
900: "#0D1B57", // Darkest shade (near black)
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
lucide.createIcons();
|
||||
AOS.init({
|
||||
once: true, // animations will occur only once on page load
|
||||
});
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const ctx = document.getElementById("myBarChart").getContext("2d");
|
||||
|
||||
new Chart(ctx, {
|
||||
type: "bar",
|
||||
data: {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
|
||||
datasets: [
|
||||
{
|
||||
label: "Dataset 1",
|
||||
data: [12, 19, 3, 5, 8, 3, 7, 11, 5, 8, 13, 15],
|
||||
backgroundColor: "rgba(54, 162, 235, 0.6)", // Blue
|
||||
borderColor: "rgba(54, 162, 235, 1)",
|
||||
borderWidth: 1,
|
||||
},
|
||||
{
|
||||
label: "Dataset 2",
|
||||
data: [7, 11, 5, 8, 13, 15, 12, 19, 3, 5, 8, 3],
|
||||
backgroundColor: "rgba(255, 99, 132, 0.6)", // Red
|
||||
borderColor: "rgba(255, 99, 132, 1)",
|
||||
borderWidth: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false, // Must be false to allow height changes
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
function changeTab(index) {
|
||||
let tabs = document.querySelectorAll('.tab');
|
||||
let contents = document.querySelectorAll('.tab-content');
|
||||
let indicator = document.querySelector('.indicator');
|
||||
|
||||
tabs.forEach((tab, i) => {
|
||||
tab.classList.toggle('active', i === index);
|
||||
contents[i].classList.toggle('active', i === index);
|
||||
});
|
||||
|
||||
indicator.style.transform = `translateX(${index * 100}%)`;
|
||||
}
|
||||
255
idproject/user/dashboad.html
Normal file
255
idproject/user/dashboad.html
Normal file
@ -0,0 +1,255 @@
|
||||
<!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 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">
|
||||
<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="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-template"></i>
|
||||
<span>Template Managment</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- sidebar -->
|
||||
<!-- dashboard page -->
|
||||
<section class="user__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="layout-dashboard" class="text-white"></i>
|
||||
</span>
|
||||
<h1 class="text-2xl font-medium text-slate-950 tracking-wider">Dashboard</h1>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 mt-8">
|
||||
<div class="card py-7 px-4 relative bg-gradient-danger rounded-md">
|
||||
<div class="card-body">
|
||||
<img src="../assets/images/circle.svg" class="card-img-absolute" />
|
||||
<div class="flex w-full items-center gap-3 justify-between mb-7">
|
||||
<h2 class="text-white text-2xl">Total Id cards</h2>
|
||||
<i data-lucide="id-card" class="text-white"></i>
|
||||
</div>
|
||||
<h3 class="text-white text-balance font-normal text-base">1500</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card py-6 px-4 relative bg-gradient-info rounded-md">
|
||||
<div class="card-body">
|
||||
<img src="../assets/images/circle.svg" class="card-img-absolute" />
|
||||
<div class="flex w-full items-center gap-3 justify-between mb-7">
|
||||
<h2 class="text-white text-2xl">Total Business cards</h2>
|
||||
<i data-lucide="rectangle-ellipsis" class="text-white"></i>
|
||||
</div>
|
||||
<h3 class="text-white text-balance font-normal text-base">160</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card py-6 px-4 relative bg-gradient-success rounded-md">
|
||||
<div class="card-body">
|
||||
<img src="../assets/images/circle.svg" class="card-img-absolute" />
|
||||
<div class="flex w-full items-center gap-3 justify-between mb-7">
|
||||
<h2 class="text-white text-2xl">Total active</h2>
|
||||
<i data-lucide="users" class="text-white"></i>
|
||||
</div>
|
||||
<h3 class="text-white text-balance font-normal text-base">125</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="mt-12">
|
||||
<div class="h-[450px]">
|
||||
<h2 class="text-xl text-slate-950 font-medium tracking-wider mb-1">Financial Analytics</h2>
|
||||
<canvas id="myBarChart" class="w-full"></canvas>
|
||||
</div>
|
||||
</section>
|
||||
<section class="mt-16">
|
||||
<div class="employees_list">
|
||||
<h2 class="text-xl text-slate-950 font-medium tracking-wider mb-2">Employee Lists</h2>
|
||||
<div class="overflow-x-auto px-1">
|
||||
<table class="w-full geeksId_table table-auto">
|
||||
<!-- Table Head -->
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
class="px-4 py-3 bg-indigo-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">
|
||||
Name
|
||||
</th>
|
||||
<th
|
||||
class="px-4 py-3 bg-indigo-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">
|
||||
Department
|
||||
</th>
|
||||
<th
|
||||
class="px-4 py-3 bg-indigo-100/50 text-left text-base font-medium text-slate-900">
|
||||
Designation
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- Row 1 -->
|
||||
<tr class="hover:bg-gray-100/50">
|
||||
<td class="px-4 py-3 text-slate-900">101</td>
|
||||
<td class="px-4 py-3 text-slate-900">Alice Johnson</td>
|
||||
<td class="px-4 py-3 text-slate-900">
|
||||
<img class="w-14 h-12 rounded-md object-cover"
|
||||
src="https://images.unsplash.com/photo-1499856871958-5b9627545d1a?q=80&w=2020&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
alt="Employee Photo" />
|
||||
</td>
|
||||
<td class="px-4 py-3 text-slate-900">Human Resources</td>
|
||||
<td class="px-4 py-3 text-slate-900">HR Manager</td>
|
||||
</tr>
|
||||
<!-- Row 2 -->
|
||||
<tr class="hover:bg-gray-100/50">
|
||||
<td class="px-4 py-3 text-slate-900">102</td>
|
||||
<td class="px-4 py-3 text-slate-900">Michael Smith</td>
|
||||
<td class="px-4 py-3 text-slate-900">
|
||||
<img class="w-14 h-12 rounded-md object-cover"
|
||||
src="https://images.unsplash.com/photo-1499856871958-5b9627545d1a?q=80&w=2020&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
alt="Employee Photo" />
|
||||
</td>
|
||||
<td class="px-4 py-3 text-slate-900">Finance</td>
|
||||
<td class="px-4 py-3 text-slate-900">Financial Analyst</td>
|
||||
</tr>
|
||||
<!-- Row 3 -->
|
||||
<tr class="hover:bg-gray-100/50">
|
||||
<td class="px-4 py-3 text-slate-900">103</td>
|
||||
<td class="px-4 py-3 text-slate-900">Sophia Lee</td>
|
||||
<td class="px-4 py-3 text-slate-900">
|
||||
<img class="w-14 h-12 rounded-md object-cover"
|
||||
src="https://images.unsplash.com/photo-1499856871958-5b9627545d1a?q=80&w=2020&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
alt="Employee Photo" />
|
||||
</td>
|
||||
<td class="px-4 py-3 text-slate-900">Marketing</td>
|
||||
<td class="px-4 py-3 text-slate-900">Marketing Specialist</td>
|
||||
</tr>
|
||||
<!-- Row 4 -->
|
||||
<tr class="hover:bg-gray-100/50">
|
||||
<td class="px-4 py-3 text-slate-900">104</td>
|
||||
<td class="px-4 py-3 text-slate-900">David Brown</td>
|
||||
<td class="px-4 py-3 text-slate-900">
|
||||
<img class="w-14 h-12 rounded-md object-cover"
|
||||
src="https://images.unsplash.com/photo-1499856871958-5b9627545d1a?q=80&w=2020&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
alt="Employee Photo" />
|
||||
</td>
|
||||
<td class="px-4 py-3 text-slate-900">Engineering</td>
|
||||
<td class="px-4 py-3 text-slate-900">Software Engineer</td>
|
||||
</tr>
|
||||
<!-- Row 5 -->
|
||||
<tr class="hover:bg-gray-100/50">
|
||||
<td class="px-4 py-3 text-slate-900">105</td>
|
||||
<td class="px-4 py-3 text-slate-900">Emma Davis</td>
|
||||
<td class="px-4 py-3 text-slate-900">
|
||||
<img class="w-14 h-12 rounded-md object-cover"
|
||||
src="https://images.unsplash.com/photo-1499856871958-5b9627545d1a?q=80&w=2020&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
alt="Employee Photo" />
|
||||
</td>
|
||||
<td class="px-4 py-3 text-slate-900">Sales</td>
|
||||
<td class="px-4 py-3 text-slate-900">Sales Executive</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</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>
|
||||
332
idproject/user/idCard.html
Normal file
332
idproject/user/idCard.html
Normal file
@ -0,0 +1,332 @@
|
||||
<!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 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">
|
||||
<i data-lucide="credit-card"></i>
|
||||
<span>Id Card Request</span>
|
||||
</a>
|
||||
</li>
|
||||
<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-template"></i>
|
||||
<span>Template Managment</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="credit-card" class="text-white"></i>
|
||||
</span>
|
||||
<h1 class="text-2xl font-medium text-slate-950 tracking-wider">Id Card Request</h1>
|
||||
</div>
|
||||
<div class="user__page_form id_card_form grid grid-cols-[1fr_480px] 2xl:gap-6 gap-4 mt-6">
|
||||
<form>
|
||||
<div class="personal_information">
|
||||
<div class="heading relative mb-5">
|
||||
<h2
|
||||
class="text-xl w-fit pb-3 relative text-slate-950 font-medium tracking-wider">
|
||||
Personal Imformation</h2>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="grid grid-cols-2 2xl:gap-5 gap-3">
|
||||
<div class="flex flex-col gap-2">
|
||||
<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"
|
||||
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"
|
||||
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"
|
||||
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"
|
||||
placeholder="Enter Your Phone Number">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="personal_information mt-8">
|
||||
<div class="heading relative mb-5">
|
||||
<h2
|
||||
class="text-xl w-fit pb-3 relative text-slate-950 font-medium tracking-wider">
|
||||
Employment Details</h2>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="grid grid-cols-2 2xl:gap-5 gap-3">
|
||||
<div class="flex flex-col gap-2">
|
||||
<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"
|
||||
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"
|
||||
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">
|
||||
</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">
|
||||
<option disabled selected hidden>Select Department</option>
|
||||
<option value="IT">Information Technology</option>
|
||||
<option value="HR">Human Resources</option>
|
||||
<option value="Finance">Finance</option>
|
||||
<option value="Marketing">Marketing</option>
|
||||
<option value="Engineering">Engineering</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="personal_information mt-8">
|
||||
<div class="heading relative mb-5">
|
||||
<h2
|
||||
class="text-xl w-fit pb-3 relative text-slate-950 font-medium tracking-wider">
|
||||
Additional Information</h2>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="grid grid-cols-1 2xl:gap-5 gap-3">
|
||||
<div class="flex flex-col gap-2">
|
||||
<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"
|
||||
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"
|
||||
placeholder="Remarks (Optional)"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="personal_information flex justify-end gap-3 mt-8">
|
||||
<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
|
||||
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"
|
||||
onclick="changeTab(0)">Guidlines</div>
|
||||
<div class="tab text-base hover:bg-indigo-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="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>
|
||||
</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">
|
||||
<li>Recent passport-size photograph</li>
|
||||
<li>White background</li>
|
||||
<li>Professional attire</li>
|
||||
<li>Neutral facial expression</li>
|
||||
<li>No accessories (sunglasses, hats)</li>
|
||||
</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>
|
||||
</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">
|
||||
<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>
|
||||
</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">
|
||||
<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>
|
||||
<li>ID cards must be collected in person</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<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="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"
|
||||
style="width: 100%; height: 100%; object-fit: cover;">
|
||||
</div>
|
||||
|
||||
<h2 style="margin: 15px 0 5px; font-size: 22px;">Ritika Sharma</h2>
|
||||
<p style="margin: 5px 0; font-size: 16px;">Software Engineer</p>
|
||||
<p style="margin: 2px 0; font-size: 14px;">Employee ID: 123456789</p>
|
||||
<hr
|
||||
style="border: 0; height: 1px; background: rgba(32, 31, 31, 0.658); margin: 15px 0;">
|
||||
|
||||
<p style="margin: 5px 0; font-size: 14px;">Sentientgeeks Pvt.Ltd</p>
|
||||
<p style="margin: 5px 0; font-size: 14px;">Email: ritika.hcl@example.com</p>
|
||||
<p style="margin: 5px 0; font-size: 14px;">Phone: 8420029158</p>
|
||||
|
||||
<div style="margin-top: 15px; margin: 0 auto;">
|
||||
<img src="../assets/images/qr.png" width="90" height="85" alt="QR Code"
|
||||
style="border-radius: 3px; margin: 0 auto;">
|
||||
</div>
|
||||
|
||||
<p style="margin-top: 10px; font-size: 12px; opacity: 0.8;">Valid Until:
|
||||
Dec 2026</p>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
Loading…
x
Reference in New Issue
Block a user