- var page_Title = 'User Profile';
- var theme_customizer      = true;
- var counter1              = true;
- var sidebar               = true;
- var slick                 = true;
- var tooltip               = true;
- var header_slider         = true;
- var avatar_change         = true;
- var scrollbar             = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | User Profile
                div(class="col-span-6 sm:col-span-12")
                  ol.breadcrumb.flex
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Users
                    li.breadcrumb-item.active User Profile
          // Container-fluid starts
          .container
            .user-profile
              .grid.grid-cols-12.card-gap
                // user profile first-style start
                div(class="col-span-12")
                  .card.hovercard.text-center.common-user-image
                    .cardheader
                      .user-image
                        .avatar
                          .common-align
                            div
                              img#output(src='../assets/images/dashboard-11/user/12.jpg' alt='Profile Image')
                              input(type='file' accept='image/*' onchange='loadFile(event)')
                              .icon-wrapper#cancelButton
                                i.icofont.icofont-error
                              .icon-wrapper
                                i.icofont.icofont-pencil-alt-5
                            .user-designation
                              a(target='_blank', href='') William C. Jennings
                              .desc Designer
                          .follow
                            div
                              .follow-num.counter(data-target='258690') 0
                              span Follower
                            div
                              .follow-num.counter(data-target='659887') 0
                              span Following
                // user profile first-style end
                div(class="col-span-12")
                  .card.user-bio 
                    .card-body
                      .grid.grid-cols-12.gap-3
                        div(class="col-span-12")
                          .ttl-info.text-start(class="[@media(max-width:576px)]:items-start [@media(max-width:576px)]:pb-[12px]")
                            h6 
                              i.fa-solid.fa-user-tie.pe-2
                              | Bio
                            span.mb-3 Over five years of experience creating visually attractive and user-friendly websites has given me a passion for creating unique and creative websites. skilled in fusing cutting-edge online technologies with beautiful design concepts to create amazing user experiences. robust history in front-end development, UI/UX, and graphic design. highly skilled at solving problems, has a keen eye for detail, and can collaborate with others in a hectic setting.
                        div(class="col-span-3 lg:col-span-4 md:col-span-6 sm:col-span-12")
                          .ttl-info.text-start
                            h6
                              i.fa-solid.fa-envelope.pe-2
                              | Email
                            span william@jourrapide.com
                        div(class="col-span-3 lg:col-span-4 md:col-span-6 sm:col-span-12")
                          .ttl-info.text-start
                            h6
                              i.fa-solid.fa-calendar-days.pe-2
                              | Birthday Date
                            span 02 January 2000
                        div(class="col-span-3 lg:col-span-4 md:col-span-6 sm:col-span-12")
                          .ttl-info.text-start
                            h6
                              i.fa-solid.fa-phone.pe-2
                              | Contact Us
                            span India +91 123-456-7890
                        div(class="col-span-3 lg:col-span-4 md:col-span-6 sm:col-span-12")
                          .ttl-info.text-start.pb-0
                            h6
                              i.fa-solid.fa-location-arrow.pe-2
                              | Location
                            span B69 Libby Street Beverly Hills
                        div(class="col-span-12")
                          .common-flex.justify-center
                            .social-media(data-intro='This is your social details')
                              ul.list-inline
                                li.list-inline-item(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Facebook')
                                  a(href='https://www.facebook.com/' target="_blank")
                                    i.fa-brands.fa-facebook-f
                                li.list-inline-item(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Google+')
                                  a(href='https://accounts.google.com/' target="_blank")
                                    i.fa-brands.fa-google-plus-g
                                li.list-inline-item(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='X (Twitter)')
                                  a(href='https://twitter.com/' target="_blank")
                                    i.fa-brands.fa-x-twitter
                                li.list-inline-item(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Instagram')
                                  a(href='https://www.instagram.com/' target="_blank")
                                    i.fa-brands.fa-instagram
                                li.list-inline-item(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='RSS')
                                  a(href='https://rss.app/' target="_blank")
                                    i.fa-solid.fa-share-nodes
                // user profile menu start
                div(class="col-span-12") 
                  .grid.grid-cols-12.card-gap.scope-bottom-wrapper.user-profile-wrapper.tabs
                    div(class="col-span-3 xxl:col-span-4 xl:col-span-12 box-col-4 user-xl-25")
                      .card 
                        .card-body
                          ul.sidebar-left-icons.nav.tab-links
                            li.nav-item
                              a.tab-link.active(data-tabfilter="1")  
                                  .nav-rounded
                                    .product-icons
                                      i.fa-solid.fa-timeline
                                  .product-tab-content
                                      h6 Recent Activity
                            li.nav-item
                              a.tab-link(data-tabfilter="2")  
                                  .nav-rounded
                                    .product-icons
                                      i.fa-solid.fa-list-check
                                  .product-tab-content
                                      h6 Tasks
                            li.nav-item
                              a.tab-link(data-tabfilter="3")  
                                  .nav-rounded
                                    .product-icons
                                      i.fa-regular.fa-bell
                                  .product-tab-content
                                      h6 Notifications
                            li.nav-item
                              a.tab-link(data-tabfilter="4")  
                                  .nav-rounded
                                    .product-icons
                                      i.fa-solid.fa-gears
                                  .product-tab-content
                                      h6 Settings
                    div(class="col-span-9 xxl:col-span-8 xl:col-span-12 user-xl-75 box-col-8e")
                      .grid.grid-cols-12 
                        div(class="col-span-12") 
                          //- Profile
                          .tab-content
                            .tab-pan.fade.show.active(data-tabcontent="1")
                              .notification
                                .card
                                  .card-header
                                    h5 Recent Activity
                                  .card-body.dark-timeline
                                    ul 
                                      li.flex
                                        .activity-dot-primary
                                        .w-full.ms-3
                                          p.flex.justify-between.mb-2
                                            span.date-content.light-background 12th Feb, 2025 
                                            span Today
                                          h6 Freelance Project Discussion
                                            span.dot-notification
                                          span.c-o-light worked hard with the client to make sure the design reflects their objectives and brand identity.
                                          span.c-o-light Optimised the website for quicker loads by implementing a responsive layout.
                                      li.flex
                                        .activity-dot-warning
                                        .w-full.ms-3
                                          p.flex.justify-between.mb-2
                                            span.date-content.light-background 12th Feb, 2025 
                                            span 02:00 PM
                                          h6 Brand Collaboration
                                            span.dot-notification
                                          span.c-o-light improved the user experience by using a sleek, contemporary style that matches the brand's urban, smart look.
                                          span.c-o-light Multimedia components, including infographic and films, were used to improve user interaction and communicate the campaign's impact.
                                          .recent-images  
                                            ul 
                                              li 
                                                .recent-img-wrap
                                                  img(src="../assets/images/dashboard-2/order/sub-product/4.png", alt="chair")
                                              li 
                                                .recent-img-wrap
                                                  img(src="../assets/images/dashboard-2/order/sub-product/8.png", alt="neckless")
                                              li 
                                                .recent-img-wrap
                                                  img(src="../assets/images/dashboard-2/order/sub-product/11.png", alt="slipper")
                                              li 
                                                .recent-img-wrap
                                                  img(src="../assets/images/dashboard-2/order/sub-product/7.png", alt="earings")
                                              li 
                                                .recent-img-wrap
                                                  img(src="../assets/images/dashboard-2/order/sub-product/3.png", alt="men t-shirt")
                                              li 
                                                .recent-img-wrap
                                                  img(src="../assets/images/dashboard-2/order/sub-product/9.png", alt="men shorts")
                                      li.flex
                                        .activity-dot-primary
                                        .w-full.ms-3
                                          p.flex.justify-between.mb-2
                                            span.date-content.light-background 08th Feb, 2025 
                                            span 5 days ago
                                          h6 Review of Project and Milestones
                                            span.dot-notification
                                          span.c-o-light Having the objective of developing an aesthetically attractive and intuitive e-commerce platform for "Multikart and Fastkart."
                                          span.c-o-light This entails being aware of the target market, the brand's goal, and the particular features that the website must have.
                                      li.flex
                                        .activity-dot-warning
                                        .w-full.ms-3
                                          p.flex.justify-between.mb-2
                                            span.date-content.light-background 05th Feb, 2025 
                                            span 8 days ago
                                          h6 Wireframing Designs
                                            span.dot-notification
                                          span.c-o-light.mb-1 Any type of group project could have a central idea. Transfer information using the theme so that members of your team can comprehend it.
                                          .project-teammate
                                            ul.common-f-start
                                              li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Sarah Wilson')
                                                  img.common-circle(src="../assets/images/dashboard-11/user/11.jpg", alt="user")
                                              li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Richard Taylor')
                                                  img.common-circle(src="../assets/images/dashboard-11/user/9.jpg", alt="user")
                                              li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Manuel Gilmore') 
                                                  .common-circle.bg-lighter-secondary M
                                              li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='Jessica Anderson')
                                                  img.common-circle(src="../assets/images/dashboard-11/user/3.jpg", alt="user")
                                              li(data-bs-toggle='tooltip' data-bs-placement='top' data-tooltip='9+ More')
                                                  .common-circle.bg-lighter-primary 9+
                            //- Tasks
                            .tab-pan.fade(data-tabcontent="2")
                              .card
                                .card-header
                                  h5 Tasks
                                .card-body.projects-wrapper
                                  .grid.grid-cols-12(class="gap-[24px]")
                                    div(class="col-span-4 xxl:col-span-6 md:col-span-12 box-col-6 xl-50")
                                      .progress-project-box
                                        .list-box.title-line-primary
                                            .header-top
                                                span.badge.badge-light-primary Pending
                                                p.mb-0.c-o-light 
                                                  svg.me-2 
                                                    use(href='../assets/svg/icon-sprite.svg#vector-calendar')
                                                  | 06 Nov, 2025
                                            .project-body
                                              .common-f-start
                                                  img.max-w-full(src="../assets/images/project/list/1.png", alt="dashboard")
                                                  div
                                                    h6 CRM Dashboard
                                                    span Create a brand logo design for a mofi admin.
                                              .common-space
                                                p.mb-0.c-o-light Tasks
                                                span 40%
                                              .progress
                                                .progress-bar.bg-primary(style='width: 40%')
                                    div(class="col-span-4 xxl:col-span-6 md:col-span-12 box-col-6 xl-50")
                                      .progress-project-box
                                        .list-box.title-line-success
                                            .header-top
                                                span.badge.badge-light-success Completed
                                                p.mb-0.c-o-light 
                                                  svg.me-2 
                                                    use(href='../assets/svg/icon-sprite.svg#vector-calendar')
                                                  | 10 Mar, 2025
                                                
                                            .project-body
                                              .common-f-start
                                                  img.max-w-full(src="../assets/images/project/list/2.png", alt="application")
                                                  div
                                                    h6 Chat Application
                                                    span Create a chat application for business messaging needs.
                                              .common-space
                                                p.mb-0.c-o-light Tasks
                                                span 100%
                                              .progress
                                                .progress-bar.bg-success(style='width: 100%')
                                    div(class="col-span-4 xxl:col-span-6 md:col-span-12 box-col-6 xl-50")
                                      .progress-project-box
                                        .list-box.title-line-primary
                                            .header-top
                                                span.badge.badge-light-primary Pending
                                                p.mb-0.c-o-light 
                                                  svg.me-2 
                                                    use(href='../assets/svg/icon-sprite.svg#vector-calendar')
                                                  | 08 Nov, 2025
                                            .project-body
                                              .common-f-start
                                                  img.max-w-full(src="../assets/images/project/list/8.png", alt="e-commerce web")
                                                  div
                                                    h6 E-commerce Web
                                                    span E-commerce is focusing on optimizing.
                                              .common-space
                                                p.mb-0.c-o-light Tasks
                                                span 25%
                                              .progress
                                                .progress-bar.bg-primary(style='width: 25%')
                                    div(class="col-span-4 xxl:col-span-6 md:col-span-12 box-col-6 xl-50")
                                      .progress-project-box
                                        .list-box.title-line-success
                                            .header-top
                                                span.badge.badge-light-success Completed
                                                p.mb-0.c-o-light 
                                                  svg.me-2 
                                                    use(href='../assets/svg/icon-sprite.svg#vector-calendar')
                                                  | 03 Sep, 2025
                                            .project-body
                                              .common-f-start
                                                  img.max-w-full(src="../assets/images/project/list/11.png", alt="application")
                                                  div
                                                    h6 Nursery App
                                                    span Correspondence and monitor your child's development.
                                              .common-space
                                                p.mb-0.c-o-light Tasks
                                                span 100%
                                              .progress
                                                .progress-bar.bg-success(style='width: 100%')
                                    div(class="col-span-4 xxl:col-span-6 md:col-span-12 box-col-6 xl-50")
                                      .progress-project-box
                                        .list-box.title-line-warning
                                            .header-top
                                                span.badge.badge-light-warning In Progress
                                                p.mb-0.c-o-light 
                                                  svg.me-2 
                                                    use(href='../assets/svg/icon-sprite.svg#vector-calendar')
                                                  | 28 Nov, 2025
                                            .project-body
                                              .common-f-start
                                                  img.max-w-full(src="../assets/images/project/list/12.png", alt="landing page")
                                                  div
                                                    h6 Fish Mobile App
                                                    span Real-time tracking, and fishing advice.
                                              .common-space
                                                p.mb-0.c-o-light Tasks
                                                span 87%
                                              .progress
                                                .progress-bar.bg-warning(style='width: 87%')
                                    div(class="col-span-4 xxl:col-span-6 md:col-span-12 box-col-6 xl-50")
                                      .progress-project-box
                                        .list-box.title-line-success
                                            .header-top
                                                span.badge.badge-light-success Completed
                                                p.mb-0.c-o-light 
                                                  svg.me-2 
                                                    use(href='../assets/svg/icon-sprite.svg#vector-calendar')
                                                  | 28 Jan, 2025
                                            .project-body
                                              .common-f-start
                                                  img.max-w-full(src="../assets/images/project/list/10.png", alt="application")
                                                  div
                                                    h6 Sales Management 
                                                    span Precise objectives and deliver exceptional performance
                                              .common-space
                                                p.mb-0.c-o-light Tasks
                                                span 100%
                                              .progress
                                                .progress-bar.bg-success(style='width: 100%')
                                    div(class="col-span-4 xxl:col-span-6 md:col-span-12 box-col-6 xl-50")
                                      .progress-project-box
                                        .list-box.title-line-warning
                                            .header-top
                                                span.badge.badge-light-warning In Progress
                                                p.mb-0.c-o-light 
                                                  svg.me-2 
                                                    use(href='../assets/svg/icon-sprite.svg#vector-calendar')
                                                  | 02 Feb, 2025
                                            .project-body
                                              .common-f-start
                                                  img.max-w-full(src="../assets/images/project/list/9.png", alt="landing page")
                                                  div
                                                    h6 NFT Website
                                                    span Explore our NFT marketplace to find digital assets.
                                              .common-space
                                                p.mb-0.c-o-light Tasks
                                                span 75%
                                              .progress
                                                .progress-bar.bg-warning(style='width: 75%')    
                                    div(class="col-span-4 xxl:col-span-6 md:col-span-12 box-col-6 xl-50")
                                      .progress-project-box
                                        .list-box.title-line-success
                                            .header-top
                                                span.badge.badge-light-success Completed
                                                p.mb-0.c-o-light 
                                                  svg.me-2 
                                                    use(href='../assets/svg/icon-sprite.svg#vector-calendar')
                                                  | 27 Oct, 2025
                                            .project-body
                                              .common-f-start
                                                  img.max-w-full(src="../assets/images/project/list/7.png", alt="application")
                                                  div
                                                    h6 Grocery App
                                                    span smooth purchasing journey and effective delivery options.
                                              .common-space
                                                p.mb-0.c-o-light Tasks
                                                span 100%
                                              .progress
                                                .progress-bar.bg-success(style='width: 100%')
                                    div(class="col-span-4 xxl:col-span-6 md:col-span-12 box-col-6 xl-50")
                                      .progress-project-box
                                        .list-box.title-line-primary
                                            .header-top
                                                span.badge.badge-light-primary Pending
                                                p.mb-0.c-o-light 
                                                  svg.me-2 
                                                    use(href='../assets/svg/icon-sprite.svg#vector-calendar')
                                                  | 14 May, 2025
                                            .project-body
                                              .common-f-start
                                                  img.max-w-full(src="../assets/images/project/list/6.png", alt="project")
                                                  div
                                                    h6 Sales Project
                                                    span Create a chat application for business messaging needs.
                                              .common-space
                                                p.mb-0.c-o-light Tasks
                                                span 30%
                                              .progress
                                                .progress-bar.bg-primary(style='width: 30%')
                            //- Notifications
                            .tab-pan.fade(data-tabcontent="3")
                              .card
                                .card-header
                                  h5 Notifications
                                .card-body
                                  .user-notifications
                                    h6 Today 
                                    ul 
                                      li
                                        div(class="[@media(max-width:500px)]:flex-wrap")
                                          img.max-w-full(src="../assets/images/dashboard-11/user/12.jpg", alt="user")
                                          div
                                            p Weekly check-in session arranged
                                              span.ps-2 2h ago
                                            span August 30, 2025 at 10:00 AM has been set aside for the weekly check-in meeting.
                                      li
                                        div(class="[@media(max-width:500px)]:flex-wrap") 
                                          img.max-w-full(src="../assets/images/dashboard-11/user/1.jpg", alt="user")
                                          div
                                            p Finishing the wireframing phase
                                              span.ps-2 5h ago
                                            span High-fidelity mockups will be created by the design team.
                                      li
                                        div(class="[@media(max-width:500px)]:flex-wrap") 
                                          img.max-w-full(src="../assets/images/dashboard-11/user/5.jpg", alt="user")
                                          div
                                            p Customer input received
                                              span.ps-2 10h ago
                                            span Before august 25, 2025, the design team will deliver updated mockups.
                                    h6 Yesterday
                                    ul 
                                      li
                                        div(class="[@media(max-width:500px)]:flex-wrap") 
                                          img.max-w-full(src="../assets/images/dashboard-11/user/2.jpg", alt="user")
                                          div
                                            p Scheduled usability testing
                                              span.ps-2 Yesterday
                                            span We will collect user input and fix any problems found during the testing process.
                                      li
                                        div(class="[@media(max-width:500px)]:flex-wrap") 
                                          img.max-w-full(src="../assets/images/dashboard-11/user/4.jpg", alt="user")
                                          div
                                            p Meeting for the final client review
                                              span.ps-2 Yesterday
                                            span Reviewing the finished website and making any final tweaks before its official debut is the aim of the meeting.
                                    h6 18 Feb
                                    ul
                                      li
                                        div(class="[@media(max-width:500px)]:flex-wrap") 
                                          img.max-w-full(src="../assets/images/dashboard-11/user/7.jpg", alt="user")
                                          div
                                            p Confirmed date of website launch
                                              span.ps-2 18 Feb
                                            span Plans are in place to guarantee a successful and seamless launch.Keep checking back for further information.
                            //- Settings
                            .tab-pan.fade(data-tabcontent="4")
                              .card
                                .card-header
                                  h5 Settings
                                .card-body.setting-wrapper
                                  .grid.grid-cols-12.gap-3
                                    div(class="col-span-3 md:col-span-12")
                                      label.form-label.mb-0 Reminders
                                    div(class="col-span-9 sm:col-span-12")
                                      .form-check.form-switch.form-check-inline
                                        input.form-check-input.switch-primary.check-size(type='checkbox' role='switch' checked='')
                                        p
                                          i(data-feather="info")
                                          | To stay on top of crucial tasks and deadlines, set up alerts and notifications.
                                  .grid.grid-cols-12.gap-3
                                    div(class="col-span-3 md:col-span-12")
                                      label.form-label.mb-0 Select Language
                                    div(class="col-span-9 sm:col-span-12")
                                      select.form-select
                                        option(selected='') Select your language
                                        option(value='1') English
                                        option(value='2') French
                                        option(value='3') Gujarati
                                        option(value='4') Hindi
                                        option(value='5') Japanese
                                        option(value='6') Marathi
                                        option(value='7') Russian
                                  .grid.grid-cols-12.gap-3
                                    div(class="col-span-3 md:col-span-12")
                                      label.form-label.mb-0 Recent Activity 
                                    div(class="col-span-9 md:col-span-12")
                                      .form-check.form-switch.form-check-inline
                                        input.form-check-input.switch-primary.check-size(type='checkbox' role='switch')
                                        p
                                          i(data-feather="info")
                                          | See a history of your most recent platform interactions and actions.
                                  .grid.grid-cols-12.gap-3
                                    div(class="col-span-3 md:col-span-12")
                                      label.form-label.mb-0 Two-factor Authentications
                                    div(class="col-span-9 md:col-span-12")
                                      .form-check.form-switch.form-check-inline
                                        input.form-check-input.switch-primary.check-size(type='checkbox' role='switch' checked='')
                                        p
                                          i(data-feather="info")
                                          | By enabling an extra step of verification during login, you can improve account security.
                                  .grid.grid-cols-12.gap-3
                                    div(class="col-span-3 md:col-span-12")
                                      label.form-label.mb-0 Post Notifications
                                    div(class="col-span-9 md:col-span-12")
                                      .form-check.form-switch.form-check-inline
                                        input.form-check-input.switch-primary.check-size(type='checkbox' role='switch' checked='')
                                        p
                                          i(data-feather="info")
                                          | Control and personalise the platform's alerts for new content and updates.
                                  .grid.grid-cols-12.gap-3
                                    div(class="col-span-3 md:col-span-12")
                                      label.form-label.mb-0 Remove Accounts
                                    div(class="col-span-9 md:col-span-12")
                                      .form-check.form-switch.form-check-inline
                                        input.form-check-input.switch-primary.check-size(type='checkbox' role='switch' checked='')
                                        p
                                          i(data-feather="info")
                                          | Permanently remove your account and all related information from the platform.
                                      .common-flex.mt-3
                                        a.btn.button-light-danger.disabled.text-black(href='#!' role='button') Disable Account
                                        a.btn.btn-danger.text-white(href='#!' role='button') Delete Account

                // user profile menu end
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files