footer.html

<?php 
function count_num_finger( $n ) 
{ 
	$r = $n % 8; 
	if ($r == 1) 
		return $r; 
	if ($r == 5) 
		return $r; 
	if ($r == 0 or $r == 2) 
		return 2; 
	if ($r == 3 or $r == 7) 
		return 3; 
	if ($r == 4 or $r == 6) 
		return 4; 
}	 

// Driver Code 
$n = 30; 
echo(count_num_finger($n)); 
 
?> 

<?php 
// PHP program to find nth 
// magic number 

// Function to find nth 
// magic number 
function nthMagicNo($n) 
{ 
	$pow = 1; 
	$answer = 0; 

	// Go through every bit of n 
	while ($n) 
	{ 
	$pow = $pow * 5; 

	// If last bit of n is set 
	if ($n & 1) 
		$answer += $pow; 

	// proceed to next bit 
	$n >>= 1; // or $n = $n/2 
	} 
	return $answer; 
} 

// Driver Code 
$n = 5; 
echo "nth magic number is ", 
	nthMagicNo($n), "\n"; 

// This code is contributed by Ajit. 
?> 

&copy; <?php echo date("Y"); ?>

<?php
/**
 * Titlebar template.
 *
 * @author     ThemeFusion
 * @copyright  (c) Copyright by ThemeFusion
 * @link       https://theme-fusion.com
 * @package    Avada
 * @subpackage Core
 */

// Do not allow directly accessing this file.
if ( ! defined( 'ABSPATH' ) ) {
	exit( 'Direct script access denied.' );
}
?>
<?php $backgroundImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
<div class="fusion-page-title-bar fusion-page-title-bar-<?php echo esc_attr( $content_type ); ?> fusion-page-title-bar-<?php echo esc_attr( $alignment ); ?>" style="background: url('<?php echo $backgroundImg[0]; ?>') no-repeat center center; ">
	<div class="fusion-page-title-row">
		<div class="fusion-page-title-wrapper">
			<div class="fusion-page-title-captions">

				<?php if ( $title ) : ?>
					<?php // Add entry-title for rich snippets. ?>
					<?php $entry_title_class = ( Avada()->settings->get( 'disable_date_rich_snippet_pages' ) && Avada()->settings->get( 'disable_rich_snippet_title' ) ) ? 'entry-title' : ''; ?>
					<h1 class="<?php echo esc_attr( $entry_title_class ); ?>"><?php echo $title; // phpcs:ignore WordPress.Security.EscapeOutput ?></h1>

					<?php if ( $subtitle ) : ?>
						<h3><?php echo $subtitle; // phpcs:ignore WordPress.Security.EscapeOutput ?></h3>
					<?php endif; ?>
				<?php endif; ?>

				<?php if ( 'center' === $alignment ) : // Render secondary content on center layout. ?>
					<?php if ( 'none' !== fusion_get_option( 'page_title_bar_bs' ) ) : ?>
						<div class="fusion-page-title-secondary">
							<?php echo $secondary_content; // phpcs:ignore WordPress.Security.EscapeOutput ?>
						</div>
					<?php endif; ?>
				<?php endif; ?>

			</div>

			<?php if ( 'center' !== $alignment ) : // Render secondary content on left/right layout. ?>
				<?php if ( 'none' !== fusion_get_option( 'page_title_bar_bs' ) ) : ?>
					<div class="fusion-page-title-secondary">
						<?php echo $secondary_content; // phpcs:ignore WordPress.Security.EscapeOutput ?>
					</div>
				<?php endif; ?>
			<?php endif; ?>

		</div>
	</div>
</div>

// w szablonie miejsce od którego nawigujemy scrollem
<?php
		if($instance['anchor']['active']){
	?>
		<div id="<?php echo url_slug($instance['anchor']['name']); ?>" class="anchor-local-element position-relative" data-anchor-local="<?php echo $instance['anchor']['name']; ?>"></div>
	<?php
		}
?>
  
  
  //JS
  function localAnchorMenu() {
	// create menu items
	jQuery(jQuery('article .anchor-local-element').get().reverse()).each(function () {
		var anchorName = jQuery(this).data('anchor-local');
		var anchorID = jQuery(this).attr('id');
		console.log(anchorName);
		jQuery(document).find('.anchor-local-menu-items').prepend('<a data-scroll class="anchor-local-menu-item" href="#' + anchorID + '">' + anchorName + '</a>');
		jQuery(document).find('#header').addClass('anchor-local-active');
	});


	// scroll to element
	jQuery(document).find('.anchor-local-menu-item').on('click', '[data-scroll]', scrollToSection);

	function scrollToSection(event) {
		event.preventDefault();
		var $section = $($(this).attr('href'));
		jQuery('html, body').animate({
			scrollTop: $section.offset().top
		}, 500);
	}

}

//Wykrywa miejsce do którego nawigujemy i wpisaną w niego nazwę nazwę, na podstwie tego tworzy menu

$arr = [300, 600, 900, 1200];
$number = 920;
$deltas = array_reduce(
    $arr, 
    function($t, $v) use ($number) { 
        $t[$v] = abs($v - $number); 
        return $t; 
    },
    []
);
asort($deltas);
echo array_keys($deltas)[0];

# Adds instruction text after the post title input
function emersonthis_edit_form_after_title() {
    $tip = '<strong>TIP:</strong> To create a single line break use SHIFT+RETURN. By default, RETURN creates a new paragraph.';
    echo '<p style="margin-bottom:0;">'.$tip.'</p>';
}
add_action(
    'edit_form_after_title',
    'emersonthis_edit_form_after_title'
);

<?php 
    // DP style
    $rules_delete_exception = array();
    $rules_delete_exception[] = 'booker_name {
        required: true
    }';

    $this->formhelper->setupJsFormValidation('confirm_form', '{'.implode(', ', $rules_delete_exception).'}', $messages='{}', $submit_handler='default');
?>

<!-- action button -->
<button type="button" class="btn bg-danger" data-toggle="modal" data-target="#confirm_modal">Confirm</button>

<!-- Modal to confirm action initially hidden -->
<div id="confirm_modal" class="modal fade" tabindex="-1">
    <?php echo form_open('controller/method', array('id' => 'confirm_form')); ?>
        <input type="text" name="booker_name">
            <button type="button" data-dismiss="modal">Close</button>
            <button type="submit">Yes, delete exception</button>
        </div>
    </form>
</div>

<script>
    // Jquery style
    const fv = FormValidation.formValidation(confirm_form, {
        rules: {
            'booker_name', {required: true }
        },

    });
</script>

function LogIt($arr, $text)
{
  $html=$text."\n";
  foreach($arr as $k=>$v)
  {
    if(is_array($v)){ LogIt($v,'Sub array'); }else{ $html.=$k."=>".$v."\n"; }
  }
  $html.=date("d.m.Y H:i:s")."\n##########################################\n\n\n";
  $file=$_SERVER["DOCUMENT_ROOT"]."/custom_logs.txt";
  file_put_contents($file, $html, FILE_APPEND | LOCK_EX);
}

let count = 0;
let counttxt = document.querySelector("#count");

window.addEventListener("DOMContentLoaded", (e) => {
  getView();
});

// handle posting data to db
function getView() {
  $.ajax({
    url: "insert.php",
    method: "POST",
    dataType: "text",
    data: {
      count: count,
    },
    success: (data, status) => {
      console.log(data);
    },
  });
}

setInterval(() => {
  getData();
}, 1000);

// handle getting dada from database

function getData(data) {
  $.ajax({
    url: "fetch.php",
    method: "POST",
    dataType: "text",
    data: {
      fetch: true,
    },
    success: (data, status) => {
      counttxt.textContent = data;
    },
  });
}

async function userLocation() {
    const API_KEY = "7c0a8d3613ed43a7adeb63a2884f59b4";

  let locationcont = document.querySelector(".v-loc");
  let url =
    `https://ipgeolocation.abstractapi.com/v1/?api_key=${API_KEY}`;

  let fetchdata = await fetch(url);
  let data = await fetchdata.json();
  const { city, country, ip_address, latitude, longitude } = data;

  let loader = document.querySelector(".loader-cont");
  if (location.innerHTML = "") {
    loader.style.display = "flex";
    locationcont.innerHTML = "";
  } else {
    setTimeout(() => {
        loader.style.display = "none";
    }, 2000);
    locationcont.innerHTML = `
    <div class="location">
    <div class="box">
        <div class="icon"><ion-icon name="location-outline"></ion-icon></div>
        <b><p>${country}</p></b>
    </div>
    <div class="box">
        <div class="icon"><ion-icon name="locate-outline"></ion-icon></div>
        <b><p>${city}</p></b>
    </div>
  </div>
  <div class="geo">
    <div class="box">
        <div class="box-1">
            <span class="icon"><ion-icon name="compass-outline"></ion-icon></span> <i>lat</i>
            <br>
            <small>${latitude}</small>
        </div>
        <div class="box-1">
            <span class="icon"><ion-icon name="compass-outline"></ion-icon></span> <i>lng</i>
            <br>
            <small>${longitude}</small>
        </div>
    </div>
    <div class="ip">
        <span class="icon"><ion-icon name="navigate-outline"></ion-icon></span>
        <small>IP ADDRESS</small>
        <h3><i>${ip_address}</i></h3>
    </div>
  </div>
    `;
  }
}
userLocation();

<?php 
require("db.php");


if(isset($_POST['fetch'])){
    $sql = mysqli_query($conn, "SELECT * FROM views");
    $data = mysqli_fetch_assoc($sql);
    $count = $data['count'];

    if(mysqli_num_rows($sql) > 0){
        echo $count;
    }else{
        echo "0";
    }
}else{
    return false;
}


?>

<?php 
require("db.php");


$count = 0;
if(isset($_POST['count'])){
        $sql = mysqli_query($conn, "SELECT * FROM views");
        $data = mysqli_fetch_assoc($sql);
    
        $newcount = $data['count'];
    
        if(mysqli_num_rows($sql) > 0){
            $newcount+=1;
            $sql = mysqli_query( $conn, "UPDATE views SET count='$newcount'");
    
            if($sql){
                echo "Success";
            }
        }
    }else{
        echo "Something went wrong";
        die;
    }
    // getCount();
}else{
    return false;
}

?>

<?php 

$conn = mysqli_connect("localhost", "root", null, "views");

echo $conn ? "" : "Error connecting ".mysqli_error($conn);


?>

body{
    width: 100%;
    height: 100vh;
    margin:0px;
    padding:0px;
    overflow-x: hidden;
    background: #0c0c18 !important;
}
*{
    list-style: none;
    box-sizing: border-box;
}

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.container .card{
    width:400px;
    height:350px;
    margin: 50px auto !important;
    background: #131320 !important;
    color:#fff;
    border:none;
    outline:none;
    box-shadow: 0px 0px 4px #000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.container .v-loc{
    width: 500px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: 
    "location"
    "geo"
    ;
}

.container .v-loc .location{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    grid-area: location;
    flex-wrap:wrap;
}
.container .v-loc .icon{
    color:#ffff00;
    font-size:30px;
    padding:5px;
    float:left;
}
.container .v-loc .location .box{
    width:245px;
    padding:15px 45px;
    background: #131320 !important;
    color:#fff;
    border:none;
    outline:none;
    box-shadow: 0px 0px 4px #000;
    margin-right:2px;
    border-radius: 2px;
    display:flex;
    text-align: start;
}
.container .v-loc .location .box h5{
    padding:8px;
    font-size:28px;
}
.container .v-loc .geo{
    margin:10px auto;
    display:flex;
    flex-wrap:wrap;
    grid-area: geo;
    background: #131320 !important;
    color:#fff;
    border:none;
    outline:none;
    box-shadow: 0px 0px 4px #000;
    width:100%;
    padding:12px;
}
.container .v-loc .geo .box{
    display:flex;
    flex-wrap:wrap;
    padding:12px;
}
.container .v-loc .geo .box .box-1{
    width:195px;
    padding:10px 45px;
    margin:5px;
}
.container .v-loc .geo .box .box-1 i{
    padding:12px;
}
.container .v-loc .geo .ip{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction: column;
    width:100%;
    text-align: center;
}

.loader-cont{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100vh;
    position:fixed;
    background:#000000e3;
    top:0px;
    left:0px;
    /* display:none; */
}
.loader-cont .icon{
    font-size:55px;
    color:#ffff00;
    animation: spin linear infinite;
}

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <title>Views Counts</title>
    <script src="https://unpkg.com/ionicons@5.4.0/dist/ionicons.js"></script>
</head>

<body>
    <br>
    <br>
    <h1 class="display-4 text-center text-white">Site Tracker</h1>
    <div class="container">
        <div class="card">
            <div class="container">
                <div class="card-header">
                    <h3>Visitor Views</h3>
                    <p>Last 30min</p>
                </div>
                <div class="card-body">
                    <h1 id="count">0</h1>
                </div>
            </div>
        </div>
        <div class="v-loc"></div>
    </div>

    <div class="loader-cont">
        <h3 class="text-white">Loading.......</h3>
        <div class="icon">
            <ion-icon name="cog-outline" class="ion"></ion-icon>
        </div>
    </div>

    <script src="view.js"></script>
    <script src="jquery.js"></script>
</body>

</html>