BasicsOfWebAppsProject/cart.html at main · Adamad7/BasicsOfWebAppsProject · 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
<!DOCTYPE html>
<html lang="pl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pstrągarnia</title>

    <link rel="icon" href="favicon.ico">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="CSS/style.css">
    <link rel="stylesheet" href="CSS/cart.css">

    <script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
    <script src="JS/cart.js"></script>
</head>

<body>
    <nav>
        <a href="index.html">Strona główna</a>
        <a href="shop.html">Sklep</a>
        <a href="blog.html">Blog</a>
        <div class="dropdown">
            <button class="dropbtn">Niezbędnik
                <i class="fa fa-caret-down"></i>
            </button>
            <div class="dropdown-content">
                <a href="fishing_grounds.html">Łowiska</a>
                <a href="calendar.html">Kalendarz</a>
            </div>
        </div>
        <a href="newsletter.html">Newsletter</a>
        <a href="sources.html">Źródła</a>
        <a href="cart.html">
            <div id="cart_value"><i class="fas fa-shopping-cart"></i> (0zł)</div>
        </a>
    </nav>

    <main>
        <h2 class="cart_title">Koszyk</h2>

        <div id="cart_content"></div>

        <form action="javascript:sendDelivery()">
            <div id="delivery_info">
                <table>
                    <thead>
                        <tr>
                            <th colspan="2">Dane wysyłki</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><label for="first_name">Imię:</label></td>
                            <td><input type="text" id="first_name" name="first_name" required
                                    pattern="^([A-ZĄĆĘŁŃÓŚŹŻ][a-ząćęłńóśźż]+( [A-ZĄĆĘŁŃÓŚŹŻ][a-ząćęłńóśźż]+)?)$"></td>
                        </tr>
                        <tr>
                            <td><label for="last_name">Nazwisko:</label></td>
                            <td><input type="text" id="last_name" name="last_name" required
                                    pattern="^([A-ZĄĆĘŁŃÓŚŹŻ][a-ząćęłńóśźż]+(-[A-ZĄĆĘŁŃÓŚŹŻ][a-ząćęłńóśźż]+)?)$"></td>
                        </tr>
                        <tr>
                            <td><label for="postal">Kod pocztowy:</label></td>
                            <td><input type="text" id="postal" name="postal" required pattern="^[0-9]{2}-[0-9]{3}$">
                            </td>
                        </tr>
                        <tr>
                            <td><label for="locality">Miejscowość:</label></td>
                            <td><input type="text" id="locality" name="locality" required
                                    pattern="^[A-ZĄĆĘŁŃÓŚŹŻ][a-ząćęłńóśźż\- ]{1,50}$"></td>
                        </tr>
                        <tr>
                            <td><label for="address">Numer domu:</label></td>
                            <td><input type="text" id="address" name="address" required
                                    pattern="^[0-9]{1,6}[a-zA-Z]{0,2}$">
                            </td>
                        </tr>
                        <tr>
                            <td><label for="email">Adres e-mail:</label></td>
                            <td><input type="email" id="email" name="email" required
                                    pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"></td>
                        </tr>
                        <tr>
                            <td><label for="phone">Numer telefonu:</label></td>
                            <td><input type="tel" id="phone" name="phone" required
                                    pattern="^[0-9]{3}[\- ]?[0-9]{3}[\- ]?[0-9]{3}$"></td>
                        </tr>
                        <tr>
                            <td><label for="payment">Metoda płatności:</label></td>
                            <td><select id="payment" name="payment" required>
                                    <option label="Wybierz płatność"></option>
                                    <option value="credit_card">Karta kredytowa</option>
                                    <option value="debit_card">Karta debetowa</option>
                                    <option value="paypal">PayPal</option>
                                    <option value="blik">BLIK</option>
                                    <option value="transfer">Przelew</option>
                                    <option value="cash">Gotówka przy odbiorze</option>
                                </select></td>
                        </tr>
                        <tr>
                            <td><label for="delivery_method">Metoda dostawy:</label></td>
                            <td><select id="delivery_method" name="delivery_method" required>
                                    <option label="Wybierz dostawę"></option>
                                    <option value="dhl">Kurier DHL</option>
                                    <option value="dpd">Kurier DPD</option>
                                    <option value="pocztex">Kurier Pocztex</option>
                                    <option value="inpost">Paczkomat InPost</option>
                                </select></td>
                        </tr>
                    </tbody>
                </table>

            </div>
            <input id="submit_delivery" type="submit" value="Zamów">
        </form>
    </main>

    <footer>
        Autor strony: Adam Mazur
    </footer>
</body>

</html>