EVOLUTION-NINJA

Edit File: header.php

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

<title>Smart Finance</title>

</head>
<style>
  /* Style for the notification icon */
  .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: #a90e0e;
    color: white;
    border: none;
    padding: 8px 10px;
    font-size: 14px;
    border-radius: 5px;
    display: flex;
    font-weight: 600;
    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 */

@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: rgba(14, 8, 10, 0.1);
      padding: 4px 6px;
      border-radius: 16px;
      border: 1px solid white
    }

.navbar-nav .nav-item {
      width: 100% !important;
      margin-bottom: 1px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      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;
    }

.admin{
      color:#fcfcfc
    }
  }
</style>

<body>

<div id="goup">
    
    <img src="public/assets/images/arrows-up.png" alt="Go to top" class="gotoup">
  </div>

<header class=" " style="background-image: linear-gradient(to right, #214162 200px,#15283C 80%);">
          <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/logo1.png');?>" alt="Logo" class="logo">
            </a>
            
            <a class="navbar-brand d-md-none logo-mobile" href="#">
              <img src="<?php echo base_url('public/assets/images/logo1.png');?>" 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 mr-5" 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-5">
                    <img src="<?php echo base_url('public/assets/images/man.png');?>" alt="">
                    <span class="admin">
                      <?php echo session()->get('name');?>
                      
                  </div>
                  <div class="desktop-only">
                    <a href="<?php echo base_url('logout'); ?>" class="logout-btn">
                      Logout <i class="fa fa-sign-out" aria-hidden="true"></i>
                    </a>
                  </div>
                </div>
              </div>

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

<div class="nav-item dropdown p-1">

<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>

<div class="fle mt-3"> <img src="<?php echo base_url('public/assets/images/man.png') ?>" alt="">
                    <span class="admin"> Admin &nbsp;</span>
                  </div>

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

</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();
      });