Retail_Transaction_System/payment-filter.html at main · Luis-is-coder/Retail_Transaction_System · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!-- Name : Pyae Phyo Maung -->
<!-- Class: DIT/1B/03 -->
<!-- Admin No: 2535128 -->

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Payment Method Filter</title>
    <link rel="stylesheet" href="CSS/styles.css">
</head>

<body>
    <div class="container">
        <header>
            <h1>Payment Method Filter</h1>
            <p>Select a payment method to view top 5 transactions by total amount</p>
        </header>

        <nav class="navbar">
            <a href="index.html">Home</a>
            <a href="retail-data.html">Retail Data</a>
        </nav>

        <main>
            <div id="loading">Loading payment methods...</div>
            <div id="error"></div>

            <div id="payment-methods">
                <h2>Select Payment Method:</h2>
                <div id="methods-container"></div>
            </div>

            <div id="view-toggle" style="display: none; text-align: center; margin: 20px 0;">
                <button id="cardViewBtn" class="btn" style="margin: 5px;">Card View</button>
                <button id="tableViewBtn" class="btn" style="margin: 5px; background-color: #777;">Table View</button>
            </div>

            <div id="results-container"></div>
        </main>

        <footer>
            <p>&copy; 2026 Retail Transaction System - Pyae Phyo Maung (2535128)</p>
        </footer>
    </div>

    <!-- Import web components -->
    <script src="components/transaction-card.js"></script>
    <script src="components/payment-button.js"></script>
    <script src="components/simple-table.js"></script>

    <!-- Import main script as module -->
    <script type="module" src="scripts/payment-filter.js"></script>
</body>

</html>