added userprofile button

ChandelAnish · Jun 11, 2024 · 14fccf7 · 14fccf7
1 parent e067f40
commit 14fccf7
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 51 deletions.
diff --git a/client/main-page/labour/index.html b/client/main-page/labour/index.html
@@ -10,6 +10,9 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
         integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
 
+    <!-- fontawesome cdn -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
+
     <!-- my css -->
     <link rel="stylesheet" href="style.css">
 </head>
@@ -39,8 +42,13 @@ <h1>hireHUB</h1>
                     <img src="../../assets/icon-moon.png" class="darklogo" alt="">
                 </div>
 
-            </div>
-            <!-- dark theme checkbox end-->
+                </div>
+                <!-- dark theme checkbox end-->
+
+                <div class="userProfile rounded-5">
+                    <i class="fa-solid fa-circle-user" style="font-size: 40px; color: white;" onclick="userProfile()"></i>
+                </div>
+
         </div>
 
 

diff --git a/client/main-page/labour/script.js b/client/main-page/labour/script.js
@@ -98,4 +98,12 @@ addEventListener("load", async () => {
         darkbtn.checked = false;
         enableLight()
     }
-})
+})
+
+
+//userprofile
+
+const userProfile = () => {
+    const userdetails = JSON.parse(sessionStorage.getItem("userdetails"))
+    console.log(userdetails)
+}
diff --git a/client/main-page/labour/style.css b/client/main-page/labour/style.css
@@ -1,12 +1,10 @@
-body
-{
+body {
     background-color: rgb(243, 243, 243);
 }
 
 
 /* navbar */
-.navbar::before
-{
+.navbar::before {
     content: "";
     background: url(../../assets/nav-background.jpg) no-repeat center/cover rgb(243, 243, 243);
     width: 100%;
@@ -19,116 +17,135 @@ body
     border-bottom-right-radius: 130px;
     opacity: 0.9;
 }
-.navbar
-{
+
+.navbar {
     height: 15rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }
-.heading
-{
+
+.heading {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 75rem;
     padding: 1px;
 }
-.heading h1
-{
+
+.heading h1 {
     position: relative;
     right: 26rem;
     color: white;
     margin: 0;
 }
 
-.navbar nav
-{
+.navbar nav {
     background-color: white;
     width: 75rem;
     height: 5rem;
     padding: 5px;
     margin-top: 3rem;
     border-radius: 10px;
     display: grid;
-    grid-template-columns: repeat(2,23rem) 240px 100px;
+    grid-template-columns: repeat(2, 23rem) 240px 100px;
     align-items: center;
     justify-content: center;
 }
-input,button
-{
+
+input,
+button {
     border: none;
     outline: none;
 }
-.logo
-{
+
+.logo {
     width: 30px;
     margin: 2px;
 }
-.botton
-{
+
+.botton {
     width: 215px;
     height: 45px;
     border-radius: 10px;
     background-color: rgb(40, 185, 81);
     color: white;
 }
-.botton:active
-{
+
+.botton:active {
     background-color: rgb(36, 161, 71);
 }
-#flexSwitchCheckChecked:checked
-{
+
+#flexSwitchCheckChecked:checked {
     background-color: rgb(138, 220, 164);
 }
-#flexSwitchCheckChecked
-{
+
+#flexSwitchCheckChecked {
     width: 55px;
     height: 30px;
 }
-#darkiconbtn
-{
+
+#darkiconbtn {
     display: grid;
     grid-template-columns: 68px 30px 25px;
     align-items: center;
     justify-content: center;
     position: relative;
     left: 25rem;
 }
-.darklogo
-{
+
+.darklogo {
     width: 15px;
     height: 15px;
     margin-right: 10px;
 }
 
+.userProfile {
+    position: relative;
+    left: 31rem;
+    width: 50px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.userProfile:hover {
+    background-color: rgba(255, 255, 255, 0.144);
+    cursor: pointer;
+}
+
+.userProfile:active {
+    transition: all .15s;
+    transform: scale(.9);
+}
+
 /* job cards */
 
 
 
-.jobcard
-{
+.jobcard {
     width: 350px;
     height: 228px;
     border-radius: 10px;
     background-color: white;
     padding: 0px 0px 0px 40px;
     margin-bottom: 60px;
 }
-.time 
-{
+
+.time {
     display: flex;
     margin: 0px 0px 15px 0px;
 }
-.time h3
-{
+
+.time h3 {
     width: 70px;
     color: rgb(104, 104, 104);
     font-size: 15px;
 }
-.time div
-{
+
+.time div {
     width: 7px;
     height: 7px;
     background-color: rgb(104, 104, 104);
@@ -137,35 +154,35 @@ input,button
     top: 6px;
     margin-right: 6px;
 }
-.jobcard .company
-{
+
+.jobcard .company {
     width: 100px;
     color: rgb(104, 104, 104);
     font-size: 15px;
 }
-.jobcard .state
-{
+
+.jobcard .state {
     width: 100px;
     color: rgb(104, 104, 104);
     /* color: rgb(17, 251, 83); */
     font-size: 15px;
     margin: 27px 0px 0px 0px;
 }
-.jobcard .jobtitle
-{
+
+.jobcard .jobtitle {
     color: rgb(106 248 146 / 94%);
     font-weight: bolder;
 }
-.jobcard .joblogo img
-{
+
+.jobcard .joblogo img {
     width: 55px;
     border-radius: 10px;
     position: relative;
     bottom: 26px;
 }
-.jobcontainer
-{
+
+.jobcontainer {
     padding: 85px 88px 0px 157px;
     display: grid;
-    grid-template-columns: repeat(3,auto);
+    grid-template-columns: repeat(3, auto);
 }