e-commerce-app/index.html at main · rafaschenkel/e-commerce-app · 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
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <link
            rel="stylesheet"
            href="./src/assets/style/style.css"
        />
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
            integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer"
        />
        <title>Moda Shop</title>
    </head>

    <body class="bg-slate-300">
        <header class="bg-slate-950 sticky top-0 z-10 shadow-xl shadow-slate-400">
            <div class="max-w-6xl mx-auto flex justify-between items-center py-5">
                <a
                    class="text-slate-50 text-3xl font-bold"
                    href="./"
                    >Moda Shop</a
                >
                <nav class="flex items-center gap-5">
                    <button
                        id="minhas-compras"
                        type="button"
                        class="text-slate-50 text-xl font-bold border-b-2 border-transparent transition ease-linear duration-300 hover:border-b-2 hover:border-slate-300"
                    >
                        <i class="fa-regular fa-user mr-2"></i>Minhas compras
                    </button>
                    <button
                        id="abrir-carrinho"
                        type="button"
                        class="text-slate-50 text-xl font-bold border-b-2 border-transparent transition ease-linear duration-300 hover:border-b-2 hover:border-slate-300"
                    >
                        <i class="fa-solid fa-cart-shopping mr-2"></i>Meu Carrinho
                    </button>
                </nav>
            </div>
        </header>
        <main class="max-w-6xl mx-auto mb-5">
            <section
                id="meu-carrinho"
                class="border-l-4 border-slate-600 flex flex-col justify-between fixed right-[-384px] top-0 w-96 h-[100vh] bg-slate-950 z-10 text-slate-50 p-4 duration-300 linear"
            >
                <div
                    id="cabecalho-carrinho"
                    class="flex w-full justify-between mb-5 self-start"
                >
                    <p class="font-bold text-xl">
                        <i class="fa-solid fa-cart-shopping mr-2"></i>Meu carrinho
                    </p>
                    <button id="fechar-carrinho">
                        <i class="fa-regular fa-xl fa-circle-xmark"></i>
                    </button>
                </div>
                <ul
                    id="produtos-carrinho"
                    class="flex flex-col gap-3 mb-2 h-4/5 overflow-y-auto"
                ></ul>

                <div class="flex flex-col">
                    <div
                        class="flex justify-center gap-3 bg-slate-200 text-green-600 p-2 rounded-lg"
                    >
                        <p class="text-xl font-bold italic">Total:</p>
                        <p class="text-xl font-bold italic">$ <span id="total-carrinho">0</span></p>
                    </div>
                    <button
                        id="carrinho-comprar"
                        class="bg-slate-700 text-slate-50 text-lg font-bold px-2 rounded-lg transition ease-in-out delay-150 hover:bg-green-600 duration-300 mt-5 p-2"
                    >
                        Comprar
                    </button>
                </div>
            </section>
            <h2 class="text-2xl mt-3 text-center font-bold">Produtos</h2>
            <div class="opcoes-produtos flex justify-center gap-5 mx-auto mt-1 mb-3">
                <div>
                    <input
                        type="radio"
                        name="filtro"
                        id="input-todos"
                        checked
                        class="hidden peer"
                    />
                    <label
                        class="transition duration-300 bg-slate-700 text-slate-50 px-3 py-1 rounded-lg peer-checked:bg-slate-950 select-none cursor-pointer"
                        for="input-todos"
                        >Todos</label
                    >
                </div>
                <div>
                    <input
                        type="radio"
                        name="filtro"
                        id="input-feminino"
                        class="hidden peer"
                    />
                    <label
                        class="transition duration-300 bg-slate-700 text-slate-50 px-3 py-1 rounded-lg peer-checked:bg-slate-950 select-none cursor-pointer"
                        for="input-feminino"
                        >Feminino</label
                    >
                </div>
                <div>
                    <input
                        type="radio"
                        name="filtro"
                        id="input-masculino"
                        class="hidden peer"
                    />
                    <label
                        class="transition duration-300 bg-slate-700 text-slate-50 px-3 py-1 rounded-lg peer-checked:bg-slate-950 select-none cursor-pointer"
                        for="input-masculino"
                        >Masculinos</label
                    >
                </div>
            </div>
            <ul
                id="container-produtos"
                class="flex justify-center max-w-6xl mx-auto gap-5 flex-wrap"
            ></ul>
        </main>
        <script
            type="module"
            src="./main.js"
        ></script>
    </body>
</html>