EVOLUTION-NINJA

Edit File: header.php

<!DOCTYPE html>
<html lang="kn">

<title>Civix Works</title>

</head>
<style>
/* Style for the notification icon */
.header-image {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
    object-fit: cover;
}

.desktop-only {
    position: relative;
    cursor: pointer ;
   
}

.nav-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
}

.img-notf {
    width: 30px;
    height: 30px;
    transition: transform 0.3s ease;
}

.img-notf:hover {
    transform: scale(1.1);
}

.notify-number {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #ff4d4f;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    font-weight: bold;
}

/* Notification Modal */
.modal-dialog {
    max-width: 600px;
    margin: 1.75rem auto;
}

.modal-content {
    border-radius: 15px;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    background-color: #f9f9f9;
}

.modal-header {
    background-color:#4B0B0B;
    color: white;
    padding: 15px;
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    font-weight: bold;
    font-size: 18px;
}

.modal-header .close {
    background-color: white;
    color: #4B0B0B;
    font-size: 20px;
    border-radius: 50%;
    padding: 2px 4px;
    margin:0px !important;
}

.modal-header .close:hover {
    background-color: #f1f1f1;
}

.modal-body {
    padding: 20px;
    font-size: 16px;
    color: #555;
}

.notification-body p {
    background-color: #f1f1f1;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 10px;
    color:black;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.notification-body p:hover {
    background-color: #e9ecef;
    cursor: pointer;
}

.modal-footer {
    padding: 10px;
    border-top: none;
    text-align: right;
}

.modal-footer .btn {
    background-color: #4B0B0B;
    color: white;
    border-radius: 20px;
    padding: 5px 20px;
    font-size: 14px;
    border: none;
    transition: background-color 0.3s ease;
}

.modal-footer .btn:hover {
    background-color: #f1f1f1;
    color:#4B0B0B;
    font-weight:bold;
}

.logout-btn {
    background-color: #8A2626;
    color: white;
    border: none;
    padding: 8px 10px;
    font-size: 14px;
    border-radius: 5px;
    display: flex;
    font-weight: 700;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

.logout-btn i {
    margin-left: 10px;
  }

.logout-btn:hover {
    background-color: #521616;
    color: white;
    text-decoration: none;
  }

#google_element {
    display: none !important;
  }

.goog-logo-link {
    display: none !important;
  }

.goog-te-gadget {
    color: transparent !important;
  }

.goog-te-banner-frame {
    display: none !important;
  }

body {
    top: 0px !important;
  }

iframe.goog-te-banner-frame {
    display: none !important;
  }

.goog-te-banner-frame.skiptranslate {
    display: none !important;
  }

.goog-te-overlay {
    display: none !important;
  }

.goog-te-balloon-frame {
    display: none !important;
  }

.skiptranslate {
    display: none !important;
  }

.goog-te-spinner-pos {
    display: none !important;
    color: white !important;
  }

.drp-down {
    font-weight: bold !important;
    border: none;
    font-size: 18px;

}
/* goup  block style  */
  #goup {
    position: fixed;
    top: 85%;
    right: 15px;
    z-index: 1111 !important;
    border-radius: 60%;
    width: 50px;
    height: 50px;
    background-color: white;
    border: 2px solid white;
  }

.gotoup {
    /* font-size: 50px; */
    z-index: 10000;
    position: relative !important;
    width: 100%;

}
  /* goup  block style  end */
  .nav-link {
    display: inline-flex !imporant
;}

@media (min-width:628px) and (max-width:1024px) {
    .heanav {
      flex-direction: column !important;
      align-items: flex-start !important;
    }
    .mobblock {
     width: 100% !important;
    }
  }

/* ----- new styles for mobile ----  */
  @media only screen and (max-width:628px) {
    #goup {
      left: 5px;
    }

.mobblock {
      /* margin-top: 12px; */
      background-color: azure;
      padding: 4px 6px;
    }

.navbar-nav .nav-item {
      width: 100% !important;
      margin-bottom: 1px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
    
    }

.btnmobile {
      position: absolute !important;
      right: 16px !important;
      top: 23px !important;
    }

.logo {
      width: 82% !important;
      height: auto;
      float: left !important;
    }

.languagdrop {
      margin-top: 5px !important;
    }
    .search-container{
      margin-bottom:0px;
    }
    .navbar-nav {
      margin-top:5px !important;
    }
  }
</style>

<body>

<div id="goup">
    
    <img src="<?php echo base_url('public/assets/images/arrows-up.png');?>" alt="Go to top" class="gotoup">
  </div>

<header class=" ">
          <nav class="navbar navbar-expand-md navbar-light heanav">
            
            <a class="navbar-brand d-none d-md-block" href="#">
              <img src="<?php echo base_url('public/assets/images/CIVIX JPG.jpg');?>" alt="Logo" class="logo" >
            </a>
            
            <a class="navbar-brand d-md-none logo-mobile" href="#">
              <img src="<?php echo base_url('public/assets/images/CIVIX JPG.svg');?>" alt="Logo" class="logo">
            </a>

<button class="navbar-toggler btnmobile" type="button" data-toggle="collapse" data-target="#navbarNav"
              aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>

<div class="collapse navbar-collapse mobblock" id="navbarNav">
              <div class="d-flex w-100 align-items-center mt-3">

<div class="right-side ml-auto">
              <div class="desktop-only ml-3">
                    <a href="<?php echo base_url('Dashboard');?>">
                      <img src="<?php echo base_url('public/assets/images/dashboard.png');?>" alt="Header Image"
                        class="header-image">
                    </a>
              </div>

<div class="desktop-only ml-3">
                    <div class="dropdown">
                 <select id="language_selector" class="form-control drp-down" onchange="translateLanguage()">
                        <option value="kn">Language</option>
                        <option value="en">English</option>
                        <option value="kn">Kannada</option>
                      </select>
                    </div>

// This targets the Google Translate dropdown if it exists
    var googleCombo = document.querySelector(".goog-te-combo");

if (googleCombo) {
      googleCombo.value = selectedLang;
      googleCombo.dispatchEvent(new Event("change"));
    } else {
      alert("Language switched to: " + (selectedLang === 'en' ? 'English' : 'Kannada'));
    }
  }
</script>

</div>
                </div>
                
                 
         <div class="desktop-only mr-3" data-toggle="modal" data-target="#myModal">
    <a class="nav-link" href="#">
        <img src="<?php echo base_url('public/assets/images/notifiaction.png'); ?>" alt="notification img"
             class="img-notf"><span class="notify-number" id="notification">0</span>
    </a>
</div>

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Notification</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body notification-body" id="notificationBody">
          
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="desktop-only mr-3 dropdown">
    <a 
        class="nav-item nav-link dropdown-toggle" 
        href="#" 
        id="profileDropdown" 
        role="button" 
        data-bs-toggle="dropdown" 
        aria-expanded="false"
    >
        <img src="<?php echo base_url('public/assets/images/man.png'); ?>" alt="Profile Image" style="width: 40px; height: 40px; border-radius: 50%; object-fit: cover;">
        <span class="admin">
            <?php echo session()->get('username'); ?>
        </span>
    </a>
    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="profileDropdown">
      
        <li>
            <a class="dropdown-item" href="<?php echo base_url('change-password');?>">Change Password</a>
        </li>
    </ul>
</div>

<a href="<?php echo base_url('logout'); ?>" class="logout-btn">
                  Logout <i class="fa fa-sign-out" aria-hidden="true"></i>
                </a>
              </div>

<div class="navbar-nav d-md-none">

<div class="nav-item dropdown">
                    
                <a class="nav-item nav-link" href="<?php echo base_url('Dashboard');?>">
                  <img src="<?php echo base_url('public/assets/images/dashboard.png');?>" alt="Header Image"
                    class="header-image">
                </a>

<div class="mobnoti" data-toggle="modal" data-target="#myModal"> 
                    <a class="nav-link" href="#">
                      <img src=<?php echo base_url('public/assets/images/notifiaction.png');?> alt=""
                      class="img-notf"><span class="notify-number">0</span>
                    </a>
                  </div>

<a 
        class="nav-item nav-link dropdown-toggle" 
        href="#" 
        id="profileDropdown" 
        role="button" 
        data-bs-toggle="dropdown" 
        aria-expanded="false"
    >
        <img src="<?php echo base_url('public/assets/images/man.png'); ?>" alt="Profile Image" style="width: 40px; height: 40px; border-radius: 50%; object-fit: cover;">
        <span class="admin">
            <?php echo session()->get('username'); ?>
        </span>
    </a>
    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="profileDropdown">
      
        <li>
            <a class="dropdown-item" href="<?php echo base_url('change-password');?>">Change Password</a>
        </li>
    </ul>

</div>
              </div>

</div>

</nav>
        </header>

</div>
    </div>
  </div>
  <script src="https://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"></script>
  <script>
    function loadGoogleTranslate() {
      new google.translate.TranslateElement({
        pageLanguage: 'en'
      }, 'google_element');
    }

function translateLanguage() {
      var language = document.getElementById("language_selector").value;
      var googleTranslate = document.querySelector(".goog-te-combo");

if (googleTranslate) {
        googleTranslate.value = language;
        googleTranslate.dispatchEvent(new Event("change"));
      }

if (language === 'en') {
        location.reload();
      }
    }
  </script>
<div id="google_element" style="display:none;"></div>
  
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      let goupbutton = document.getElementById("goup");

// Initially hide the button
      goupbutton.style.display = "none";

goupbutton.addEventListener("click", function () {
        window.scrollTo({
          top: 0,
          behavior: 'smooth'
        });
      });
    });
  </script>
  
  
  
  
  
  
  
  
  
  
<script>
$(document).ready(function () {
    fetchNotifications();
    
    $('#notification').on('click', function () {
        markNotificationsAsRead();
    });