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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zapper Transactions</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        /* CSS Code remains unchanged */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f6fa;
            color: #333;
        }

        .dashboard {
            display: flex;
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .sidebar {
            max-width: 240px;
            background-color: #fff;
            padding: 20px;
            border-right: 1px solid #eee;
        }

        .logo {
            color: #7c5cfc;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 30px;
        }

        .sidebar ul {
            list-style-type: none;
            padding: 0;
        }

        .sidebar li {
            padding: 10px 0;
            cursor: pointer;
            display: flex;
            align-items: center;
        }

        .sidebar li i {
            margin-right: 10px;
            width: 20px;
            text-align: center;
        }

        .main-content {
            flex-grow: 1;
            padding: 20px;
        }

        .transactions {
            background-color: #fff;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .transaction-list {
            display: flex;
            flex-direction: column;
            gap: 10px; /* Space between cards */
        }

        .transaction-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #f9f9f9;
            border-radius: 8px;
            padding: 15px;
            transition: background-color 0.3s;
            border: 1px solid #e0e0e0; /* Adding a border for better separation */
        }

        .transaction-item:hover {
            background-color: #ececec; /* Highlight on hover */
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Shadow effect on hover */
        }

        .transaction-details {
            display: flex;
            align-items: center;
        }

        .transaction-details .date {
            margin-left: auto; /* Align date to the right */
            color: #888;
        }

        .transaction-amount {
            font-weight: bold; /* Highlighting the amount */
            color: #7c5cfc; /* Setting a brand color */
        }

        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
        }

        .page-link {
            background-color: #7c5cfc; /* Button color */
            color: white;
            border: none;
            border-radius: 4px;
            padding: 8px 12px;
            margin: 0 5px; /* Space between pagination buttons */
            cursor: pointer;
            transition: background-color 0.3s; /* Transition for hover effect */
        }

        .page-link:hover {
            background-color: #5a4db2; /* Darker shade on hover */
        }

        .logout {
            margin-top: auto;
            padding: 10px;
            color: #f44336;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="dashboard">
        <aside class="sidebar">
            <div class="logo">Zapper</div>
            <nav>
                <ul>
                   <li><a href="index.html"><i>⬜</i> Dashboard</a></li>
                <li><a href="portfolio-performance.html"><i>📈</i> Portfolio Performance</a></li>
                <li><a href="transactions.html"><i>💼</i> Transactions</a></li>
                <li><a href="/upload.html"><i>📤</i> Upload</a></li> <!-- Новая строка -->
                <li><i>🌾</i> Farm</li>
                <li><i>🌉</i> Bridge</li>
                <li><i>📜</i> History</li>
                <li><i>⚙️</i> Settings</li>
                </ul>
            </nav>
            <div class="logout">Logout</div>
        </aside>
        <main class="main-content">
            <h3>Transactions</h3>
            <div id="transactionsList" class="transaction-list"></div>
            <div id="pagination" class="pagination"></div>
        </main>
    </div>

    <script>
        let currentPage = 1;
        const transactionsPerPage = 15; // Show 15 transactions per page

        async function loadTransactions(page = 1) {
            try {
                const response = await fetch(`getTransaction.php?page=${page}&limit=${transactionsPerPage}`);
                if (!response.ok) throw new Error('Failed to fetch transactions');
                const transactions = await response.json();

                const transactionsList = document.getElementById('transactionsList');
                transactionsList.innerHTML = ''; // Clear existing transactions

                transactions.data.forEach(transaction => {
                    const div = document.createElement('div');
                    div.className = 'transaction-item';
                    div.innerHTML = `
                        <div class="transaction-details">
                            <span>${transaction.user}</span> <span class="date">${transaction.date}</span>
                        </div>
                        <div class="transaction-amount">${transaction.amount}</div>
                    `;
                    transactionsList.appendChild(div);
                });

                setPagination(transactions.totalPages);
            } catch (error) {
                console.error('Error loading transactions:', error);
            }
        }

        function setPagination(totalPages) {
            const pagination = document.getElementById('pagination');
            pagination.innerHTML = ''; // Clear pagination

            for (let i = 1; i <= totalPages; i++) {
                const pageLink = document.createElement('button');
                pageLink.className = 'page-link';
                pageLink.innerText = i;
                pageLink.onclick = () => {
                    currentPage = i;
                    loadTransactions(currentPage);
                };
                pagination.appendChild(pageLink);
            }
        }

        loadTransactions(currentPage);
    </script>
</body>

</html>

<?php
// getTransaction.php

$servername = "fdb1030.awardspace.net";
$username = "4252301_714514419";
$password = "7gkczqm8PR6H";
$dbname = "4252301_714514419";

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

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

$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$limit = isset($_GET['limit']) ? (int)$_GET['limit'] : 15; // Default to 15 transactions

// Determine the start position for the query
$start = ($page - 1) * $limit;

$sql = "SELECT user, amount, date FROM transactions LIMIT $start, $limit";
$result = $conn->query($sql);

$data = array();
$total = $conn->query("SELECT COUNT(*) AS count FROM transactions")->fetch_assoc();
$totalPages = ceil($total['count'] / $limit);

// Fetching transactions data
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
}

// Prepare response
$response = [
    'data' => $data,
    'totalPages' => $totalPages
];

$conn->close();
echo json_encode($response);
?>

улучши визуальное отображение полей