<?php
// Your existing code here ...

// Assuming you have a database connection
$servername = "localhost";
$username = "coinlyca_cash";
$password = "AHmed2468#$";
$dbname = "coinlyca_cash";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Fetch user details from offerwall_history table
$sql = "SELECT user_id, offerwall, amount FROM offerwall_history";
$result = $conn->query($sql);

// Close the database connection
$conn->close();
?>

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

<head>
    <!-- Your existing head content here -->
    <!-- Additional CSS for the animation and box styling -->
    <style>
        /* Add this style for the animation */
        .animation-container {
            position: fixed;
            top: 70px; /* Adjust this value based on your top bar height */
            left: 0;
            width: 100%;
            height: 50px;
            display: flex;
            overflow: hidden;
            z-index: 9999; /* Ensure it's above other elements */
        }

        .user-box {
            display: inline-block;
            margin-right: 10px;
            padding: 10px;
            background-color: #9400D3;
            color: #fff;
            border-radius: 5px;
            font-size: 8px;
            box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
        }

        @keyframes flowAnimation {
            from {
                transform: translateX(100%);
            }

            to {
                transform: translateX(-100%);
            }
        }
    </style>
</head>

<body data-topbar="dark" data-layout="horizontal" data-layout-mode="dark" cz-shortcut-listen="true" style="background-color: #2A3042;">

    <!-- Begin page -->
    <div id="layout-wrapper">

        <!-- Your existing HTML content here -->

        <header id="page-topbar">
            <div class="navbar-header">
                <div class="d-flex">
                    <!-- Your existing top bar content here -->
<div style="background-color: #1A1E29; height: 50px; z-index: 10000;">
    <!-- Top bar content -->
</div>
<!-- Animation Container -->
<div class="animation-container" id="animationContainer" style="position: relative; margin-top: 10px; background-color: rgba(0, 0, 0, 0.7); padding: 10px; border-radius: 8px; color: #ffffff; z-index: 9999;">
    <?php
    // Display user details from the offerwall_history table
    if ($result !== false && $result->num_rows > 0) {
        while ($row = $result->fetch_assoc()) {
            // Format amount to have up to 3 decimal places and append " USD"
            $formattedAmount = number_format($row['amount'], 3) . ' USD';
            echo 'User <span style="color: #ffcc00;">' . $row['user_id'] . '</span> earned <span style="color: #00ff00;">' . $formattedAmount . '</span> from <span style="color: #3399ff;">' . $row['offerwall'] . '</span><br>';
        }
    } else {
        echo 'No data available';
    }
    ?>
                    </div>
                    <!-- End Animation Container -->

                    <!-- Your existing header content here -->
                </div>
            </div>
        </header>

        <!-- Your existing body content here -->

        <!-- Script for the animation -->
        <script>
            const animationContainer = document.getElementById('animationContainer');

            function displayAnimation() {
                // Apply animation to the entire container
                animationContainer.style.animation = 'flowAnimation 15s linear infinite';
            }

            displayAnimation();
        </script>

    </div>
    <!-- end layout-wrapper -->
</body>

</html>