-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathorder.html
153 lines (146 loc) · 7.23 KB
/
order.html
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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body>
<nav class="flex items-center justify-between flex-wrap bg-red-500 p-6">
<div class="flex items-center flex-shrink-0 text-white mr-6">
<img class="w-12 mr-4" src="https://img.freepik.com/darmowe-wektory/ladny-fajny-kawalek-pizzy-w-okularach-kreskowka-wektor-ikona-ilustracja-jedzenie-wakacje-ikona-na-bialym-tle_138676-4808.jpg?w=740&t=st=1673334735~exp=1673335335~hmac=db3233a99b88cdf54462adbab5a85c764cffdbedf10c39390bc5651d861ac672" alt="">
<span class="font-semibold text-xl tracking-tight">Pizzeria u Władka</span>
</div>
<div class="block lg:hidden">
<button class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
</button>
</div>
<div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
<div class="text-sm lg:flex-grow">
<a href="index.html" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
Menu
</a>
<a href="order.html" class="block mt-4 lg:inline-block lg:mt-0 text-white hover:text-white mr-4">
zamów teraz
</a>
<a href="about.html" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white">
O nas
</a>
</div>
</div>
</nav>
<section class="bg-white dark:bg-gray-900">
<div class="grid max-w-screen-xl px-4 py-8 mx-auto lg:gap-8 xl:gap-0 lg:py-16 lg:grid-cols-12">
<div class="mr-auto place-self-center lg:col-span-7">
<h1 class="max-w-2xl mb-4 text-4xl font-extrabold tracking-tight leading-none md:text-5xl xl:text-6xl dark:text-white">Zamów naszą zaskakująco dobrą pizze :-)</h1>
<p class="max-w-2xl mb-6 font-light text-gray-500 lg:mb-8 md:text-lg lg:text-xl dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed neque vitae dolor porttitor ultricies. In ac vestibulum augue, a aliquet mauris. Quisque orci metus, dignissim vitae efficitur vitae, eleifend fringilla quam. Mauris gravida libero quis nibh ultricies, ac eleifend orci fringilla. Proin sit amet erat viverra, laoreet ante nec, eleifend diam.</p>
</div>
<div class="hidden lg:mt-0 lg:col-span-5 lg:flex">
<img src="http://t1.gstatic.com/licensed-image?q=tbn:ANd9GcSnCn9k-c100ccJnb6N8Odb8Ge-6iisByej4f6xu-rSmo4tKAxxcWz_AOgH8f1THy55" alt="mockup">
</div>
</div>
</section>
<section class="w-[70%] mx-auto my-6">
<form class="bg-white p-6 rounded-lg shadow-md">
<h2 class="text-lg mb-4">Zamów naszą pizze</h2>
<div class="mb-4">
<label class="block text-gray-700 font-medium mb-2" for="name">
imie i nazwisko
</label>
<input
class="border border-gray-400 p-2 w-full"
type="text"
id="name"
name="name"
required
>
</div>
<div class="mb-4">
<label class="block text-gray-700 font-medium mb-2" for="phone">
Numer telefonu
</label>
<input
class="border border-gray-400 p-2 w-full"
type="tel"
id="phone"
name="phone"
required
>
</div>
<div class="mb-4">
<label class="block text-gray-700 font-medium mb-2" for="size">
rozmiar pizzy
</label>
<select
class="border border-gray-400 p-2 w-full"
id="size"
name="size"
required
>
<option value="">-- Wybierz rozmiar --</option>
<option value="small">Mała</option>
<option value="medium">Średnia</option>
<option value="large">Bydle</option>
</select>
</div>
<div class="mb-4">
<label class="block text-gray-700 font-medium mb-2">dodatki</label>
<div class="flex flex-wrap -mx-2">
<div class="w-1/2 px-2 mb-4">
<label class="inline-flex items-center">
<input type="checkbox" class="form-checkbox" name="toppings" value="pepperoni">
<span class="ml-2">Pepperoni</span>
</label>
</div>
<div class="w-1/2 px-2 mb-4">
<label class="inline-flex items-center">
<input type="checkbox" class="form-checkbox" name="toppings" value="sausage">
<span class="ml-2">kukurydza</span>
</label>
</div>
<div class="w-1/2 px-2 mb-4">
<label class="inline-flex items-center">
<input type="checkbox" class="form-checkbox" name="toppings" value="mushrooms">
<span class="ml-2">Pieczarki</span>
</label>
</div>
<div class="w-1/2 px-2 mb-4">
<label class="inline-flex items-center">
<input type="checkbox" class="form-checkbox" name="toppings" value="mushrooms">
<span class="ml-2">ananas</span>
</label>
</div>
<div class="w-1/2 px-2 mb-4">
<label class="inline-flex items-center">
<input type="checkbox" class="form-checkbox" name="toppings" value="mushrooms">
<span class="ml-2">rukola</span>
</label>
</div>
<div class="w-1/2 px-2 mb-4">
<label class="inline-flex items-center">
<input type="checkbox" class="form-checkbox" name="toppings" value="mushrooms">
<span class="ml-2">sos pomidorowy</span>
</label>
</div>
</div>
<button class="bg-red-500 rounded py-2 px-4 text-white">
Zamawiam
</button>
</form>
</section>
<footer class="p-5 bg-red-500 text-white mt-8">
Zapraszamy do wizyty aleja wolności 5/30 warszawa <a href="github.com/antonisea" class="text-blue-300">Antoni Seba</a>
</footer>
<script>
const form = document.querySelector('form');
form.addEventListener('submit', event => {
event.preventDefault();
Swal.fire("Dziękujemy za zamówienie naszej pizzy", "", "success")
});
</script>
</body>
</html>