in this codes (<?php
// index.php

// Error reporting for debugging (disable in production)
error_reporting(E_ALL);
ini_set('display_errors', 1);

/**
 * Logs messages to a specified log file with a timestamp.
 *
 * @param string $message The message to log.
 */
function logMessage($message) {
    $logFile = 'change_detector.log';
    $timestamp = date('Y-m-d H:i:s');
    file_put_contents($logFile, "[$timestamp] $message\n", FILE_APPEND);
}

/**
 * Retrieves the last check time from the log file.
 *
 * @return string The timestamp of the last check or 'Never' if no checks have been made.
 */
function getLastCheckTime() {
    $logFile = 'change_detector.log';
    if (file_exists($logFile)) {
        $lines = file($logFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
        if (!empty($lines)) {
            $lastLine = end($lines);
            preg_match('/\[(.*?)\]/', $lastLine, $matches);
            if (isset($matches[1])) {
                return $matches[1];
            }
        }
    }
    return 'Never';
}

/**
 * Checks the specified URL for changes by comparing its hash with the previous hash.
 *
 * @param string $url The URL to check for changes.
 * @return array An associative array indicating whether a change was detected and related info.
 */
function checkForChanges($url) {
    // Initialize cURL session
    $ch = curl_init();

    // Set cURL options
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
    curl_setopt($ch, CURLOPT_TIMEOUT, 30); // Set timeout to prevent hanging
    curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) '
        . 'AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36');

    // Execute cURL request and get the response
    $response = curl_exec($ch);

    // Check for cURL errors
    if (curl_errno($ch)) {
        $error = curl_error($ch);
        logMessage("cURL Error: " . $error);
        curl_close($ch);
        return ['error' => 'Error: ' . $error];
    }

    // Get HTTP response code
    $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    if ($httpCode !== 200) {
        $error = "HTTP Error: " . $httpCode;
        logMessage($error);
        curl_close($ch);
        return ['error' => $error];
    }

    // Close cURL session
    curl_close($ch);

    // Generate a hash of the entire page content
    $currentHash = md5($response);

    // Compare with previous hash
    $previousHash = '';
    if (file_exists('previous_hash.txt')) {
        $previousHash = file_get_contents('previous_hash.txt');
    }

    if ($currentHash !== $previousHash) {
        // Save the new hash
        file_put_contents('previous_hash.txt', $currentHash);

        logMessage("Changes detected. New hash: " . $currentHash);

        return [
            'changed' => true,
            'oldHash' => $previousHash,
            'newHash' => $currentHash
        ];
    }

    logMessage("No changes detected");
    return ['changed' => false];
}

// Check if this is an AJAX request for checking changes
if (isset($_GET['action']) && $_GET['action'] === 'check') {
    header('Content-Type: application/json');

    // Define the URL to monitor
    $url = 'https://longevacare.com/the-longeva-concept/';

    // Perform the change check
    $result = checkForChanges($url);
    $lastCheckTime = date('Y-m-d H:i:s');

    if (isset($result['error'])) {
        $response = [
            'status' => 'error',
            'message' => $result['error'],
            'lastCheck' => $lastCheckTime
        ];
    } elseif ($result['changed']) {
        $response = [
            'status' => 'changed',
            'message' => 'Changes detected!',
            'hashInfo' => [
                'oldHash' => substr($result['oldHash'], 0, 8) . '…',
                'newHash' => substr($result['newHash'], 0, 8) . '…'
            ],
            'lastCheck' => $lastCheckTime
        ];
    } else {
        $response = [
            'status' => 'no-change',
            'message' => 'No changes detected.',
            'lastCheck' => $lastCheckTime
        ];
    }

    echo json_encode($response);
    exit;
}

// If not an AJAX request, render the main page
$lastCheckTime = getLastCheckTime();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Change Detector</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
    <style>
        /* Reset and basic styles */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, #ece9e6, #ffffff);
            color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }
        /* Container styling */
        .container {
            background-color: #ffffffdd;
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 40px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            max-width: 800px;
            width: 100%;
            text-align: center;
            position: relative;
        }
        h1 {
            margin-bottom: 20px;
            font-size: 32px;
            color: #2c3e50;
        }
        /* Status message styling */
        .status {
            font-size: 24px;
            font-weight: 600;
            margin: 20px 0;
            padding: 15px 20px;
            border-radius: 10px;
            transition: background-color 0.3s, color 0.3s;
            display: inline-block;
        }
        .status.no-change {
            background-color: #2ecc71;
            color: #ffffff;
        }
        .status.changed {
            background-color: #e74c3c;
            color: #ffffff;
        }
        .status.error {
            background-color: #f39c12;
            color: #ffffff;
        }
        /* Last check time styling */
        .last-check {
            font-size: 14px;
            color: #7f8c8d;
            margin-bottom: 30px;
        }
        /* Hash information styling */
        .hash-info {
            background-color: #f1f2f6;
            border: 1px solid #dcdde1;
            padding: 20px;
            border-radius: 10px;
            font-family: monospace;
            margin-top: 20px;
            text-align: left;
            display: none;
        }
        .hash-info.visible {
            display: block;
        }
        /* Button styling */
        .btn {
            padding: 12px 30px;
            font-size: 16px;
            color: #ffffff;
            background-color: #3498db;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.2s;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            margin-top: 10px;
        }
        .btn:hover {
            background-color: #2980b9;
            transform: translateY(-2px);
        }
        /* Loader styling */
        .loader {
            border: 6px solid #f3f3f3;
            border-top: 6px solid #3498db;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            display: none;
            margin: 20px auto;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        /* Responsive design */
        @media (max-width: 768px) {
            .container {
                padding: 30px 20px;
            }
            h1 {
                font-size: 28px;
            }
            .status {
                font-size: 20px;
            }
            .btn {
                padding: 10px 20px;
                font-size: 14px;
            }
        }
        @media (max-width: 480px) {
            .container {
                padding: 20px 15px;
            }
            h1 {
                font-size: 24px;
            }
            .status {
                font-size: 18px;
            }
            .btn {
                padding: 8px 16px;
                font-size: 12px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Page Change Detector</h1>
        <div id="statusContainer" class="status no-change">
            Initializing...
        </div>
        <div class="last-check">
            Last checked: <span id="lastCheck">Never</span>
        </div>
        <button class="btn" id="checkNowBtn">Check Now</button>
        <div class="loader" id="loader"></div>

        <div class="hash-info" id="hashInfoContainer">
            <h2>Hash Information:</h2>
            <p><strong>Old Hash:</strong> <span id="oldHash">-</span></p>
            <p><strong>New Hash:</strong> <span id="newHash">-</span></p>
        </div>

        <!-- Audio Alarm -->
        <audio id="alarmAudio" loop>
            <source src="alarm_1.mp3" type="audio/mpeg">
            Your browser does not support the audio element.
        </audio>
    </div>

    <script>
        // Elements
        const statusContainer = document.getElementById('statusContainer');
        const lastCheckSpan = document.getElementById('lastCheck');
        const checkNowBtn = document.getElementById('checkNowBtn');
        const loader = document.getElementById('loader');
        const hashInfoContainer = document.getElementById('hashInfoContainer');
        const oldHashSpan = document.getElementById('oldHash');
        const newHashSpan = document.getElementById('newHash');
        const alarmAudio = document.getElementById('alarmAudio');

        let autoCheckInterval = null;
        let alarmTimeout = null;
        let isAlarmPlaying = false;

        /**
         * Performs an AJAX request to check for page changes.
         */
        function performCheck() {
            loader.style.display = 'block';
            fetch('index.php?action=check')
                .then(response => response.json())
                .then(data => {
                    loader.style.display = 'none';
                    lastCheckSpan.textContent = data.lastCheck;

                    if (data.status === 'error') {
                        updateStatus('Error: ' + data.message, 'error');
                        hideHashInfo();
                    } else if (data.status === 'changed') {
                        updateStatus(data.message, 'changed');
                        displayHashInfo(data.hashInfo.oldHash, data.hashInfo.newHash);
                        triggerAlarm();
                    } else if (data.status === 'no-change') {
                        updateStatus(data.message, 'no-change');
                        hideHashInfo();
                    }
                })
                .catch(error => {
                    loader.style.display = 'none';
                    updateStatus('Error: ' + error.message, 'error');
                });
        }

        /**
         * Updates the status message and its styling.
         *
         * @param {string} message - The message to display.
         * @param {string} statusClass - The CSS class for styling.
         */
        function updateStatus(message, statusClass) {
            statusContainer.textContent = message;
            statusContainer.className = 'status ' + statusClass;
        }

        /**
         * Displays the hash information when changes are detected.
         *
         * @param {string} oldHash - The previous hash value.
         * @param {string} newHash - The current hash value.
         */
        function displayHashInfo(oldHash, newHash) {
            oldHashSpan.textContent = oldHash;
            newHashSpan.textContent = newHash;
            hashInfoContainer.classList.add('visible');
        }

        /**
         * Hides the hash information section.
         */
        function hideHashInfo() {
            hashInfoContainer.classList.remove('visible');
            oldHashSpan.textContent = '-';
            newHashSpan.textContent = '-';
        }

        /**
         * Triggers the alarm by playing the audio and stops auto-checking for 5 minutes.
         */
        function triggerAlarm() {
            if (!isAlarmPlaying) {
                alarmAudio.currentTime = 0;
                alarmAudio.play().catch(error => {
                    console.error("Audio playback failed:", error);
                });
                isAlarmPlaying = true;

                // Stop the alarm after 5 minutes (300,000 milliseconds)
                alarmTimeout = setTimeout(stopAlarm, 300000);
            }

            // Stop auto-checking for 5 minutes
            stopAutoCheck();
            // Resume auto-checking after 5 minutes
            setTimeout(startAutoCheck, 300000);
        }

        /**
         * Stops the alarm audio.
         */
        function stopAlarm() {
            alarmAudio.pause();
            alarmAudio.currentTime = 0;
            isAlarmPlaying = false;
            console.log('Alarm stopped after 5 minutes.');
        }

        /**
         * Starts the automatic checking interval.
         */
        function startAutoCheck() {
            // Immediately perform a check
            performCheck();
            // Set interval for every 10 seconds
            autoCheckInterval = setInterval(performCheck, 10000);
            console.log('Auto-checking started.');
        }

        /**
         * Stops the automatic checking interval.
         */
        function stopAutoCheck() {
            if (autoCheckInterval) {
                clearInterval(autoCheckInterval);
                autoCheckInterval = null;
                console.log('Auto-checking stopped.');
            }
        }

        // Event listener for "Check Now" button
        checkNowBtn.addEventListener('click', () => {
            performCheck();
        });

        // Initialize auto-checking on page load
        window.addEventListener('DOMContentLoaded', () => {
            startAutoCheck();
        });
    </script>
</body>
</html>) i want to upadate and working well and add more featueres on it to mkae it flexible and make it accept work in background when wroking on moible version and othesr things and type full codes