<?php
header('X-Frame-Options: ALLOWALL'); // OR SAMEORIGIN if you want only your domain to embed it

// Allow cross-origin requests (CORS)
header('Access-Control-Allow-Origin: *'); // Allow any domain to fetch the content
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type');

// Set content type
header('Content-Type: text/html');

// Function to get the real user IP
function getUserIP() {
    $keys = ['HTTP_CF_CONNECTING_IP', 'HTTP_X_FORWARDED_FOR', 'HTTP_CLIENT_IP', 'REMOTE_ADDR'];
    foreach ($keys as $key) {
        if (!empty($_SERVER[$key])) {
            $ip_list = explode(',', $_SERVER[$key]);
            return trim($ip_list[0]); // First valid IP
        }
    }
    return 'Unknown';
}

// Get user's IP
$user_ip = getUserIP();
?>

<!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">
    <title>Stephie Luv</title> 

    <!-- Meta Information -->
    <meta name="author" content="Stephie Luv">
    <meta name="referrer" content="no-referrer">
    <meta name="msapplication-TileColor" content="#fff">
    <meta name="theme-color" content="#fff"> 
    
    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="Stephie Luv 💋" />
    <meta property="og:image" content="https://stephieluv.com/link/avatar.png" />
    <meta property="og:url" content="https://stephieluv.com/link" /> 
    
    <!-- Twitter Card Meta Tags -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Stephie Luv 💋" />
    <meta name="twitter:image" content="https://stephieluv.com/link/avatar.png" /> 
    
    <!-- Favicon and Icons -->
    <link rel="icon" type="image/png" href="favicon/favicon-96x96.png" sizes="96x96" />
    <link rel="icon" type="image/svg+xml" href="favicon/favicon.svg" />
    <link rel="shortcut icon" href="favicon/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png" />
    <meta name="apple-mobile-web-app-title" content="Stephie" />
    <link rel="manifest" href="favicon/site.webmanifest" />
</head>
<body>

    <div id="location"></div>

    <script>
        var userIP = "<?php echo $user_ip; ?>"; // Get IP from PHP

        // Fetch location info using ipapi.co with CORS Anywhere
        fetch(`https://api.allorigins.win/raw?url=https://ipapi.co/${userIP}/json/`)
        .then(response => response.json())
        .then(jsonData => {
            // console.log(jsonData); // Log location data
            
            // Display location
            document.getElementById("location").textContent = 
                `${jsonData.country_name} ${jsonData.city}`;
        })
        .catch(error => console.log("Error fetching location: ", error));
    </script>

</body>
</html>
