Pwa_App_Bank/index.html at main · MarcosSoftwareEngineering/Pwa_App_Bank · 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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TechBank 2.0 - Responsivo</title>

    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="./style.css">
</head>
<body>

    <div class="container">
        <!-- Header with user info and action buttons -->
        <header class="app-header">
            <div class="user-info">
                <span id="greeting">Olá, Bem-vindo</span>
                <h1>Marcos Vinicius</h1>
            </div>
            <div class="header-actions">
                <!-- Theme toggle button -->
                <button class="icon-btn" onclick="toggleTheme()">
                    <i class="fas fa-moon" id="theme-icon"></i>
                </button>
                <!-- Notifications button -->
                <button class="icon-btn">
                    <i class="fas fa-bell"></i>
                </button>
            </div>
        </header>

        <!-- Balance card section -->
        <section class="balance-card">
            <div class="balance-header">
                <span>Saldo em conta</span>
                <!-- Toggle balance visibility -->
                <i class="fas fa-eye" id="toggleBalance" style="cursor: pointer;"></i>
            </div>
            <div class="balance-value" id="displayBalance">R$ 0,00</div>
            <div class="card-footer">
                <span><i class="fas fa-arrow-up"></i> Receitas: <strong id="incomeDisplay">R$ 0,00</strong></span>
            </div>
        </section>

        <!-- Quick actions section -->
        <section class="actions-section">
            <h3>O que você precisa?</h3>
            <div class="actions-grid">
                <!-- Pix action -->
                <div class="action-item" onclick="openModal('Pix')">
                    <div class="action-icon"><i class="brands fa-pix"></i></div>
                    <span>Área Pix</span>
                </div>
                <!-- Payment action -->
                <div class="action-item" onclick="openModal('Pagamento')">
                    <div class="action-icon"><i class="fas fa-barcode"></i></div>
                    <span>Pagar</span>
                </div>
                <!-- Loan action -->
                <div class="action-item" onclick="openModal('Empréstimo')">
                    <div class="action-icon"><i class="fas fa-hand-holding-dollar"></i></div>
                    <span>Empréstimo</span>
                </div>
                <!-- Mobile recharge action -->
                <div class="action-item" onclick="openModal('Recarga')">
                    <div class="action-icon"><i class="fas fa-mobile-alt"></i></div>
                    <span>Recarga</span>
                </div>
            </div>
        </section>

        <!-- Transactions section -->
        <section class="transactions-section">
            <h3>
                Últimas movimentações
                <!-- Link to full statement -->
                <a href="#" class="view-all">Ver extrato</a>
            </h3>
            <!-- Transaction list dynamically populated -->
            <ul class="transaction-list" id="transactionList"></ul>
        </section>
    </div>

    <!-- Bottom navigation bar -->
    <nav class="bottom-nav">
        <a href="#" class="nav-item active"><i class="fas fa-home"></i></a>
        <a href="#" class="nav-item"><i class="fas fa-chart-pie"></i></a>
        <a href="#" class="nav-item"><i class="fas fa-wallet"></i></a>
        <a href="#" class="nav-item"><i class="fas fa-user"></i></a>
    </nav>

    <!-- Modal for transactions -->
    <div class="modal-overlay" id="transactionModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="modalTitle">Nova Transação</h3>
                <!-- Close modal button -->
                <button class="close-modal" onclick="closeModal()">&times;</button>
            </div>
            <!-- Transaction description input -->
            <div class="input-group">
                <label id="descLabel">Descrição</label>
                <input type="text" id="descInput" placeholder="Ex: Mercado, Aluguel...">
            </div>
            <!-- Transaction amount input -->
            <div class="input-group">
                <label>Valor (R$)</label>
                <input type="number" id="amountInput" placeholder="0,00">
            </div>
            <!-- Confirm transaction button -->
            <button class="btn-primary" id="confirmBtn" onclick="processTransaction()">Confirmar Transação</button>
        </div>
    </div>

    <!-- Toast notification -->
    <div class="toast" id="toast">
        <i class="fas fa-check-circle"></i>
        <span id="toastMsg">Sucesso!</span>
    </div>

    <!-- JavaScript file -->
    <script src="./index.js"></script>
</body>
</html>