From 75ad9920e8c861f7094c02908b1bfaca68d30061 Mon Sep 17 00:00:00 2001
From: krishnenduPanja <krishnendu.panja@finreg-e.com>
Date: Wed, 12 Mar 2025 18:45:55 +0530
Subject: [PATCH] ic card design

---
 idproject/user/idCard.html       | 78 ++++++++++++++++++++++++--------
 idproject/user/visitingCard.html | 47 ++++++++++++++-----
 2 files changed, 95 insertions(+), 30 deletions(-)

diff --git a/idproject/user/idCard.html b/idproject/user/idCard.html
index be2ba6b..77e3b44 100644
--- a/idproject/user/idCard.html
+++ b/idproject/user/idCard.html
@@ -283,15 +283,15 @@
                                         </div>
                                         <div class="tab-content active">
                                             <div class="flex justify-center">
-                                                <!-- <div class=""
-                                                    style="width: 330px; margin: 0 auto; box-shadow: 0 2px 5px rgba(0,0,0,0.2); border-radius: 15px; overflow: hidden; position: relative;">
+                                                <div class=""
+                                                    style="width: 320px; height: 500px; 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: 95px 30px 30px 30px;">
+                                                    <div class="content" style="padding: 85px 30px 30px 30px;">
                                                         <div class="profile_image"
-                                                            style="border: 8px solid #ffffff; border-radius: 50%; height: 140px; width: 140px; margin: 0 auto; overflow: hidden; background-color: #f5f5f5; position: relative; box-shadow: 0px 2px 3px #00000028;">
+                                                            style="border: 8px solid #ffffff; border-radius: 50%; height: 155px; width: 155px; 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="140px" height="140px"
                                                                 style="border-radius: 50%;" />
@@ -304,22 +304,64 @@
                                                                 style="margin-top: 3px; text-align: center; color: #121212; font-style: normal; font-size: 14px;">
                                                                 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; display: flex;"><strong style="width: 95px;" >Employee ID:</strong> <span style="display: flex; justify-content: flex-start; align-items: flex-start; flex: 1; text-align: start;">10068</span></p>
-                                                                <p style="font-size: 12px; color: #121212; display: flex;"><strong style="width: 95px;">Blood Group:</strong> <span style="display: flex; justify-content: flex-start; align-items: flex-start; flex: 1; text-align: start;">B+</span></p>
-                                                                <p style="font-size: 12px; color: #121212; display: flex;"><strong style="width: 95px;">DOB:</strong> <span style="display: flex; justify-content: flex-start; align-items: flex-start; flex: 1; text-align: start;">22/09/1998</span></p>
-                                                                <p style="font-size: 12px; color: #121212; display: flex;"><strong style="width: 95px;">Phone:</strong> <span style="display: flex; justify-content: flex-start; align-items: flex-start; flex: 1; text-align: start;">+000-000-00</span></p>
-                                                               
+                                                        <div class="other_details" style="margin-top: 20px;">
+                                                            <div
+                                                                style="text-align: left; padding: 10px 0px; font-size: 14px; color: #444; display: flex; gap: 12px;">
+                                                                <div style="width: 50%; display: flex; align-items: flex-end; flex-direction: column;">
+                                                                    <p
+                                                                        style="font-size: 12px; color: #121212;">
+                                                                        <strong style="width: 76px;">Employee ID :</strong>
+                                                                    </p>
+                                                                    <p
+                                                                        style="font-size: 12px; color: #121212;">
+                                                                        <strong style="width: 76px;">Phone NUmber :</strong>
+
+                                                                    </p>
+                                                                    <p
+                                                                        style="font-size: 12px; color: #121212;">
+                                                                        <strong style="width: 76px;">Blood
+                                                                            Group :</strong>
+                                                                    </p>
+                                                                    <p
+                                                                        style="font-size: 12px; color: #121212;">
+                                                                        <strong style="width: 76px;">Date Of Birth:</strong>
+                                                                    </p>
+                                                                </div>
+                                                                <div style="width: 50%;">
+                                                                    <p
+                                                                        style="font-size: 12px; color: #121212;">
+                                                                        <span
+                                                                            style="display: flex; justify-content: flex-start;text-align: start;">10068</span>
+                                                                    </p>
+                                                                    <p
+                                                                        style="font-size: 12px; color: #121212;">
+
+                                                                        <span
+                                                                            style="display: flex; justify-content: flex-start;text-align: start;">+8420029198</span>
+                                                                    </p>
+                                                                    <p
+                                                                        style="font-size: 12px; color: #121212;">
+                                                                        <span
+                                                                            style="display: flex; justify-content: flex-start;text-align: start;">B+</span>
+                                                                    </p>
+                                                                    <p
+                                                                        style="font-size: 12px; color: #121212;">
+                                                                        <span
+                                                                            style="display: flex; justify-content: flex-start;text-align: start;">22-09-1998</span>
+                                                                    </p>
+                                                                </div>
                                                             </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
+                                                        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
-                                                    style="width: 330px; height: 500px; margin: 0 auto; box-shadow: 0 2px 5px rgba(0,0,0,0.2); border-radius: 15px; overflow: hidden; position: relative;">
+                                                </div>
+                                                <!-- <div
+                                                    style="width: 320px; height: 500px; 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; bottom: 0px;">
                                                         <img src="../assets/images/Card_bg2.png"
                                                             style="width: 100%;height: 280px;" alt="image" />
@@ -329,7 +371,7 @@
                                                             <h2 class="name"
                                                                 style="font-size: 24px; margin: 25px 0px 20px 0px; color: #121212; text-align: center;">
                                                                 Krishnendu Panja</h2>
-                                                                <p style="font-size: 12px; color: #121212; display: flex; justify-content: center;"><strong style="width: 115px;">Joining Date:</strong> <span style="display: flex; justify-content: flex-start;text-align: start;">12/09/2021</span></p>
+                                                                <p style="font-size: 12px; color: #121212; display: flex; justify-content: center;"><strong style="width: 76px;">Joining Date:</strong> <span style="display: flex; justify-content: flex-start;text-align: start;">12/09/2021</span></p>
                                                                 <p style="font-size: 12px; color: #121212; display: flex; justify-content: center;"><strong style="width: 115px;">Emergency Contact:</strong> <span style="display: flex; justify-content: flex-start;text-align: start;">+8204256789</span></p>
                                                                  
                                                             <p
@@ -351,7 +393,7 @@
                                                             <p style="text-align: center; color: white; margin-top: 2px; font-size: 12px; font-weight: 400;">Signature</p>
                                                         </div>
                                                     </div>
-                                                </div>
+                                                </div> -->
                                             </div>
                                         </div>
                                     </div>
diff --git a/idproject/user/visitingCard.html b/idproject/user/visitingCard.html
index fdc384f..9628988 100644
--- a/idproject/user/visitingCard.html
+++ b/idproject/user/visitingCard.html
@@ -283,7 +283,7 @@
                                         </div>
                                         <div class="tab-content active">
                                             <div class="flex justify-center">
-                                                <div class=""
+                                                <!-- <div class=""
                                                     style="width: 550px; height: 300px; 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; right: -15px;">
                                                         <img src="../assets/images/visitingbg-1.png"
@@ -316,8 +316,8 @@
                                                                         style="background-color: #005bab; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;">
                                                                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>
                                                                     </span>
-                                                                    <span
-                                                                        style="line-height: 1.1; flex: 1;">https://sentientgeeks.com/</span>
+                                                                    <a href="https://sentientgeeks.com/"
+                                                                        style="line-height: 1.1; flex: 1; color: #1a1919;">https://sentientgeeks.com/</a>
                                                                 </p>
                                                                 <p
                                                                     style="margin-bottom: 6px; display: flex; max-width: 230px; align-items: center; gap: 7px;">
@@ -325,8 +325,8 @@
                                                                         style="background-color: #007dc5; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;">
                                                                         <svg data-v-14c8c335="" xmlns="http://www.w3.org/2000/svg" width="16" height="26" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail lucide-icon customizable"><rect width="20" height="16" x="2" y="4" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg>
                                                                         </span>
-                                                                    <span
-                                                                        style="line-height: 1.1; flex: 1; width: 190px;">krishnendu@sentientgeeks.com</span>
+                                                                    <a href="mailto:krishnendu@sentientgeeks.com"
+                                                                        style="line-height: 1.1; flex: 1; width: 190px; color: #1a1919;">krishnendu@sentientgeeks.com</a>
                                                                 </p>
                                                                 <p
                                                                     style="margin-bottom: 6px; display: flex; max-width: 230px; align-items: center; gap: 7px;">
@@ -344,22 +344,45 @@
                                                             </div>
                                                         </div>
                                                     </div>
-                                                </div>
-                                                <!-- <div class=""
+                                                </div> -->
+                                                <div
                                                     style="width: 550px; height: 300px; 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; right: -15px;">
-                                                        <img src="../assets/images/visitingbg-2.png" style="width: 400px; height: 310px;"
-                                                            alt="image" />
+                                                        <img src="../assets/images/visitingbg-2.png"
+                                                            style="width: 400px; height: 310px;" alt="image" />
                                                     </div>
                                                     <div class="content" style="padding: 30px 60px 30px 40px;">
                                                         <div class="details" style="padding: 50px 0;">
-                                                            <img src="../assets/images/v-logo.png" width="150" alt="image" />
+                                                            <img src="../assets/images/v-logo.png" width="150"
+                                                                alt="image" />
                                                         </div>
                                                     </div>
                                                     <div class="footer" style="padding: 0px 40px 40px 40px;">
-                                                        <a href="https://sentientgeeks.com" style="border-bottom: 1px solid #303F9F; padding-bottom: 2px; color: #3F51B5;">https://sentientgeeks.com</a>
+                                                        <p
+                                                            style="margin-bottom: 6px; display: flex; max-width: 230px; align-items: center; gap: 7px;">
+                                                            <span
+                                                                style="background-color: #005bab; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;">
+                                                                <span
+                                                                    style="background-color: #007dc5; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;">
+                                                                    <svg data-v-14c8c335=""
+                                                                        xmlns="http://www.w3.org/2000/svg" width="16"
+                                                                        height="16" viewBox="0 0 24 24" fill="none"
+                                                                        stroke="#ffffff" stroke-width="2"
+                                                                        stroke-linecap="round" stroke-linejoin="round"
+                                                                        class="lucide lucide-mail lucide-icon customizable">
+                                                                        <rect width="20" height="16" x="2" y="4" rx="2">
+                                                                        </rect>
+                                                                        <path
+                                                                            d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7">
+                                                                        </path>
+                                                                    </svg>
+                                                                </span>
+                                                            </span>
+                                                            <a href="mailtosales@sentientgeeks.com"
+                                                                style="line-height: 1.1; flex: 1; color: #1a1919;">sales@sentientgeeks.com</a>
+                                                        </p>
                                                     </div>
-                                                </div> -->
+                                                </div>
                                             </div>
                                         </div>
                                     </div>