<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zapper Dashboard</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;
        }

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .search-bar {
            flex-grow: 1;
            margin-right: 20px;
        }

        .search-bar input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .currency-selector, .user-profile {
            display: flex;
            align-items: center;
        }

        .currency-selector img, .user-profile img {
            width: 24px;
            height: 24px;
            margin-right: 5px;
        }

        .overview {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .overview-item {
            background-color: #fff;
            border-radius: 8px;
            padding: 15px;
            flex: 1;
            margin-right: 15px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .overview-item:last-child {
            margin-right: 0;
        }

        .overview-item h3 {
            margin: 0 0 10px 0;
            font-size: 14px;
            color: #888;
        }

        .overview-item .value {
            font-size: 24px;
            font-weight: bold;
        }

        .overview-item .change {
            font-size: 14px;
        }

        .change.positive { color: #4caf50; }
        .change.negative { color: #f44336; }

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

        .chart-header, .assets-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .button {
            background-color: #7c5cfc;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
        }

        .assets-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
        }

        .asset-item {
            background-color: #f9f9f9;
            border-radius: 8px;
            padding: 15px;
        }

        .asset-icon {
            width: 32px;
            height: 32px;
            margin-right: 10px;
        }

        .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-avatar {
            width: 32px;
            height: 32px;
            margin-right: 10px;
        }

        .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><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">
            <header class="header">
                <div class="search-bar">
                    <input type="text" placeholder="Search token, wallet">
                </div>
                <div class="currency-selector">
                    <img src="us-flag.png" alt="USD"> USD
                </div>
                <div class="user-profile">
                    <img src="user-avatar.png" alt="User">
                </div>
            </header>
            <section class="overview">
                <div class="overview-item">
                    <h3>Net Worth</h3>
                    <div class="value">$1365.67</div>
                    <div class="change positive">+5.24%</div>
                </div>
                <div class="overview-item">
                    <h3>Income</h3>
                    <div class="value">$244.67</div>
                    <div class="change positive">+4.36%</div>
                </div>
                <div class="overview-item">
                    <h3>Expenses</h3>
                    <div class="value">$68.67</div>
                    <div class="change negative">-4.36%</div>
                </div>
            </section>
            <section class="chart-container">
                <div class="chart-header">
                    <h3>Portfolio Performance</h3>
                    <select>
                        <option>Monthly</option>
                        <option>Yearly</option>
                    </select>
                </div>
                <canvas id="portfolioChart"></canvas>
            </section>
            <section class="chart-container">
                <div class="chart-header">
                    <h3>Weekly Performance</h3>
                    <select>
                        <option>This Week</option>
                        <option>Last Week</option>
                    </select>
                </div>
                <canvas id="weeklyChart"></canvas>
            </section>
            <section class="assets-container">
                <div class="assets-header">
                    <h3>All Assets</h3>
                    <button class="button">View All</button>
                </div>
                <div class="assets-list" id="assetsList"></div>
            </section>
             <div class="transactions">
                <h3>Transactions</h3>
                <div id="transactionsList" class="transaction-list"></div>
                <div id="pagination" class="pagination"></div>
            </div>
        </main>
    </div>

    <script>
        async function loadWeeklyData() {
            try {
                const response = await fetch('getWeeklyData.php');
                if (!response.ok) throw new Error('Network response was not ok');
                const data = await response.json();

                const labels = data.map(item => item.day);
                const values = data.map(item => item.value);

                const ctx = document.getElementById('weeklyChart').getContext('2d');
                new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Weekly Value',
                            data: values,
                            backgroundColor: '#4caf50',
                            borderColor: '#4caf50',
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: {
                                    callback: function(value) {
                                        return '$' + value;
                                    }
                                }
                            }
                        }
                    }
                });
            } catch (error) {
                console.error('Error loading weekly data:', error);
            }
        }

        loadWeeklyData();

        async function loadPortfolioData() {
            try {
                const response = await fetch('getPortfolioData.php');
                if (!response.ok) throw new Error('Network response was not ok');
                const data = await response.json();

                const labels = data.map(item => item.month);
                const values = data.map(item => item.value);

                const ctx = document.getElementById('portfolioChart').getContext('2d');
                new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                            label: 'Portfolio Value',
                            data: values,
                            backgroundColor: 'rgba(124, 92, 252, 0.2)',
                            borderColor: '#7c5cfc',
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        scales: {
                            y: {
                                beginAtZero: true,
                                ticks: {
                                    callback: function(value) {
                                        return '$' + value;
                                    }
                                }
                            }
                        }
                    }
                });
            } catch (error) {
                console.error('Error loading portfolio data:', error);
            }
        }

        loadPortfolioData();

        const assets = [
            { name: 'Ethereum', amount: '0.5 ETH', value: '$985.00', change: '+6.39%' },
            { name: 'Bitcoin', amount: '0.02 BTC', value: '$155.00', change: '-1.58%' },
            { name: 'Dogecoin', amount: '1000 DOGE', value: '$65.00', change: '+0.12%' },
            { name: 'Litecoin', amount: '0.5 LTC', value: '$85.00', change: '-0.25%' },
            { name: 'Doggy Inu', amount: '1M DOGI', value: '$36.12', change: '+1.24%' },
            { name: 'Eskimo Inu', amount: '2M EINU', value: '$12.00', change: '+0.76%' }
        ];

        const assetsList = document.getElementById('assetsList');
        assets.forEach(asset => {
            const div = document.createElement('div');
            div.className = 'asset-item';
            div.innerHTML = `
                <div><img src="https://cryptologos.cc/logos/${asset.name.toLowerCase()}-${asset.name.toLowerCase()}-logo.png" alt="${asset.name}" class="asset-icon">${asset.name}</div>
                <div>${asset.amount}</div>
                <div>${asset.value}</div>
                <div class="change ${asset.change.startsWith('+') ? 'positive' : 'negative'}">${asset.change}</div>
            `;
            assetsList.appendChild(div);
        });
   // Function to fetch and display transactions
     let currentPage = 1;
const transactionsPerPage = 5;

async function loadTransactions(page = 1) {
    try {
        const response = await fetch(`getTransactions.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>

Напиши адаптивный дезайн сайта, включи логирование ошибок