Front2/carrinho.html at dev · MLKP1/Front2 · 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
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pizza Stars - Carrinho</title>
    <link rel="stylesheet" href="css/carrinho.css">
</head>
<body>
    <header id="header">
        <div class="logo-container">
            <img src="assets/images/logo.svg" alt="Logotipo Pizzaria" class="logo-img">
            <div class="logo">Pizza Stars</div>
        </div>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="Cardapio.html">Cardápio</a></li>
                <li id="btn-login"><a href="pages/login/entrar.html" class="nav-btn login-btn">Logar</a></li>
                <li id="btn-cadastro"><a href="pages/usuarios/cadastro.html" class="nav-btn cadastro-btn">Cadastro</a></li>
                <li><a href="carrinho.html" style="font-weight: bold;">Carrinho</a></li>
                <li><a href="pages/usuarios/Perfil.html">Perfil</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <h2 class="section-title">Carrinho de Compras</h2>
        <div id="cart-items"></div>
        <p id="cart-empty" style="display: none; text-align: center; color: var(--secondary-color);">Seu carrinho está vazio.</p>
        <p id="cart-total">Total: R$ 0.00</p>
        <button id="clear-cart-btn">Limpar Carrinho</button>
        <button id="checkout-btn">Concluir Pagamento</button>

        <div id="payment-modal" class="modal">
            <div class="modal-content">
                <span class="close-btn">&times;</span>
                <h3>Concluir Pagamento</h3>
                <p>Use o QR Code abaixo para realizar o pagamento via Pix.</p>
                <div id="pix-qr-code">
                    <img src="assets/images/qrcode.png" alt="QR Code para pagamento via Pix">
                </div>
                <!-- botão adicionado para confirmar pagamento -->
                <button id="confirm-payment-btn">Confirmar Pagamento</button>
            </div>
        </div>
    </main>

    <footer class="footer-hidden">
        <div class="footer-content">
            <div class="footer-section">
                <h3>Pizza Stars</h3>
                <p>Tradição italiana autêntica desde 2010. Sabor, qualidade e paixão em cada fatia!</p>
            </div>
            <div class="footer-section">
                <h4>Contato</h4>
                <p>📞 (11) 1234-5678</p>
                <p>✉️ contato@pizzastars.shop</p>
                <p>📍 Rua das Pizzas, 123 - Centro</p>
            </div>
            <div class="footer-section">
                <h4>Horário de Funcionamento</h4>
                <p>Segunda a Quinta: 18h - 00h</p>
                <p>Sexta e Sábado: 18h - 01h</p>
                <p>Domingo: 18h - 23h</p>
            </div>
        </div>
        <div class="footer-bottom">
            <p>Pizza Stars &copy; 2025</p>
        </div>
    </footer>

    <script src="js/carrinho.js"></script>
    <script src="js/footer.js"></script>
    <script>
        const logged = localStorage.getItem('token')
        if (logged) {
            const loginBtn = document.querySelector('#btn-login')
            const cadastroBtn = document.querySelector('#btn-cadastro')
            loginBtn.remove()
            cadastroBtn.remove()
        }
    </script>
</body>
</html>