-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
115 lines (100 loc) · 3.9 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bubble tea</title>
<link href="https://fonts.googleapis.com/css2?family=REM:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styl.css">
</head>
<body>
<h1 class="text-center">Stwórz swój własny doskonały napój<br> za pomocą konfiguratora <u>Bubble tea</u></h1>
<section id="lewy">
<!-- Rodzaj herbaty, oraz rabat -->
<div id="rodzaj_herbaty">
<button onclick="pokaz_chowaj_div_pod_button('trojkat_rodzaj_herbaty', 'rodzaj_div')">
Rodzaj herbaty
<span id="trojkat_rodzaj_herbaty" class="kwadracik"></span>
</button>
<div class="box_border" id="rodzaj_div">
<a data-rodzaj="czarna">Czarna</a>
<a data-rodzaj="zielona">Zielona</a>
<a data-rodzaj="biala">Oolong</a>
</div>
</div>
<div class="box_kubek_moj">
<input type="checkbox" class="styled-checkbox" id="moj_kubek" value="1">
<label for="moj_kubek">
<b>Mam własny kubek</b>
<br>
<center>
(<u>10% rabatu</u>)
</center>
</label>
</div>
</section>
<section id="glowny">
<!-- Kubek -->
<img src="kubek-brazowy.png">
</section>
<section id="prawy">
<!-- Rozmiar itp -->
<button onclick="pokaz_chowaj_div_pod_button('trojkat_rozmiar', 'rozmiar_div')">
Rozmiar
<span id="trojkat_rozmiar" class="kwadracik closed"></span>
</button>
<div class="box_border hidden" id="rozmiar_div">
<a data-rodzaj="czarna">Zwykły kubek</a>
<a data-rodzaj="zielona">Powiększony kubek</a>
</div>
<!-- Baza bubble tea -->
<button onclick="pokaz_chowaj_div_pod_button('trojkat_baza', 'baza_div')">
Baza
<span id="trojkat_baza" class="kwadracik closed"></span>
</button>
<div class="box_border hidden" id="baza_div">
<a data-rodzaj="czarna">Zwykły kubek</a>
<a data-rodzaj="zielona">Powiększony kubek</a>
<a data-rodzaj="biala">Biała</a>
</div>
<!-- Syrop bubble tea -->
<button onclick="pokaz_chowaj_div_pod_button('trojkat_syrop', 'syrop_div')">
Syrop
<span id="trojkat_syrop" class="kwadracik closed"></span>
</button>
<div class="box_border hidden" id="syrop_div">
<a data-rodzaj="czarna">Melon</a>
<a data-rodzaj="zielona">Zielone jabłko</a>
<a data-rodzaj="biala">Ananas</a>
<a data-rodzaj="biala">Jagoda</a>
<a data-rodzaj="biala">Wiśnia</a>
<a data-rodzaj="biala">Biała brzoskwinia</a>
</div>
<!-- Dodatek bubble tea -->
<button onclick="pokaz_chowaj_div_pod_button('trojkat_dodatek', 'dodatek_div')">
Dodatek
<span id="trojkat_dodatek" class="kwadracik closed"></span>
</button>
<div class="box_border hidden" id="dodatek_div">
<a>Tapioka</a>
<a>Kulki boba</a>
<a>Żelki</a>
</div>
<div class="box_border hidden" id="dodatek_kulki_boba_div">
<a>Mango</a>
<a>Marakuja</a>
<a>Truskawka</a>
<a>Kiwi</a>
<a>Wiśnia</a>
</div>
<div class="box_border hidden" id="dodatek_zelki_div">
<a>Zielone jabłko</a>
<a>Winogrona</a>
<a>Liczi</a>
</div>
</section>
<section id="cena_section">
<div id="cena_calosc"> 16 zł </div>
</section>
<script src="js/index.js"></script>
</body>
</html>