-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
273 lines (264 loc) · 14.8 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
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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/app.js" defer=""></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital@1&display=swap" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="title">
<h1>Game of Sultans Calculator</h1>
</div>
<div class="subtitle">Wybierz, co chcesz policzyć</div>
</div>
<div class="content">
<div class="tabs">
<ul class="tab">
<li class="tab-el tab-el-active">
<a href="#intimacy" class="tab-link">INTIMACY</a>
</li>
<li class="tab-el">
<a href="#charm" class="tab-link">CHARM</a>
</li>
<li class="tab-el">
<a href="#talent" class="tab-link">TALENT</a>
</li>
</ul>
</div>
<div class="tab-contents">
<div class="tab-content tab-content-active" id="intimacy">
<div class="tab-title">
<h2>INTIMACY CALCULATOR</h2>
<p>FIll all the fields below, please and then click "calculate".</p>
</div>
<div class="tab-grid" id="intimacy-grid">
<div class="box">
<img src="https://gos-new.vercel.app/images/intimacy/01.%20Intimacy%20Chest.png" class="item" alt="intimacy chest">
<h3>Intimacy Chest</h3>
<input class="intimacy-input" type="number" id="intimacy-chest" value="0">
</div>
<div class="box">
<img src="/images/Intimacy/02. Intimacy Pack.png" class="item" alt="intimacy pack">
<h3>Intimacy Pack</h3>
<input class="intimacy-input" type="number" id="intimacy-pack" value="0">
</div>
<div class="box">
<img src="/images/Intimacy/03. Agate Bracelet.png" class="item" alt="agate bracelet">
<h3>Agate Bracelet</h3>
<input class="intimacy-input" type="number" id="agate-bracelet" value="0">
</div>
<div class="box">
<img src="/images/Intimacy/04. Emerald Bracelet.png" class="item" alt="emerald bracelet">
<h3>Emerald Bracelet</h3>
<input class="intimacy-input" type="number" id="emerald-bracelet" value="0">
</div>
<div class="box">
<img src="/images/Intimacy/05. Bracelet Chest.png" class="item" alt="bracelet chest">
<h3>Bracelet Chest</h3>
<input class="intimacy-input" type="number" id=bracelet-chest" value="0">
</div>
<div class="box">
<img src="/images/Intimacy/06. Lazurite Necklace.jpg" class="item" alt="lazurite necklace">
<h3>Lazurite Necklace</h3>
<input class="intimacy-input" type="number" id="lazurite-necklace" value="0">
</div>
<div class="box">
<img src="/images/Intimacy/07. Carmelian Necklace.jpg" class="item" alt="carmelian necklace">
<h3>Carmelian Necklace</h3>
<input class="intimacy-input" type="number" id="carmelian-necklace" value="0">
</div>
<div class="box">
<img src="/images/Intimacy/08. Black Diamond Necklace.jpg" class="item" alt="black diamond necklace">
<h3>Black Diamond Necklace</h3>
<input class="intimacy-input" type="number" id="black-diamond-necklace" value="0">
</div>
<div class="box">
<img src="/images/Intimacy/09. Agate Ring.png" class="item" alt="agate ring">
<h3>Agate Ring</h3>
<input class="intimacy-input" type="number" id="agate-ring" value="0">
</div>
<div class="box">
<img src="/images/Intimacy/10. Emerald RIng.png" class="item" alt="emerald ring">
<h3>Emerald Ring</h3>
<input class="intimacy-input" type="number" id="emerald-ring" value="0">
</div>
<div class="box">
<img src="/images/Intimacy/11.Companions.png" class="item" alt="companions">
<h3>Companions</h3>
<input class="intimacy-input" type="number" id="intimacy-companions" value="0">
</div>
<div class="box">
<img src="/images/Intimacy/12. Amulet.png" class="item" alt="amulet">
<h3>Amulet</h3>
<input class="intimacy-input" type="number" id="intimacy-amulet" value="0">
</div>
<div class="box">
<img src="/images/Intimacy/13. Energy Orbs.png" class="item" alt="energy orbs">
<h3>Energy Orbs</h3>
<input class="intimacy-input" type="number" id="intimacy-energy-orbs" value="0">
</div>
<div class="box">
<img src="/images/Intimacy/14. Fortune.png" class="item" alt="fortune">
<h3>Fortune</h3>
<input class="intimacy-input" type="number" id="intimacy-fortune" value="0">
</div>
<div class="box">
<img src="/images/Intimacy/15. Silver Necklace Chest.jpg" class="item" alt="silver necklace">
<h3>Silver Necklace</h3>
<input class="intimacy-input" type="number" id="silver-necklace-chest" value="0">
</div>
<div class="box">
<img src="/images/Intimacy/16. VIP.png" class="item" alt="VIP">
<h3>VIP</h3>
<input class="intimacy-input" type="number" id-"intimacy-vip" value="0">
</div>
<button type="button" class="grid-button" id="intimacy-button">
<p>CALCULATE</p>
</button>
</div>
</div>
<div class="tab-content" id="charm">
<div class="tab-title">
<h2>CHARM CALCULATOR</h2>
FIll all the fields below, please and then click "calculate".
</div>
<div class="tab-grid" id="charm-grid">
<div class="box">
<img src="images/charm/01. Charm Chest.jpg" class="item" alt="charm chest">
<h3>Charm Chest</h3>
<input class="charm-input" type="number" id="charm-chest" value="0">
</div>
<div class="box">
<img src="/images/charm/02. Charm Pack.jpg" class="item" alt="charm pack">
<h3>Charm Pack</h3>
<input class="charm-input" type="number" id="charm-pack" value="0">
</div>
<div class="box">
<img src="/images/charm/03. Silver Hairpin.jpg" class="item" alt="silver hairpin">
<h3>Silver Hairpin</h3>
<input class="charm-input" type="number" id=silver-haripin" value="0">
</div>
<div class="box">
<img src="/images/charm/04. Gold Hairpin.jpg" class="item" alt="gold hairpin">
<h3>Gold hairpin</h3>
<input class="charm-input" type="number" id="gold-hairpin" value="0">
</div>
<div class="box">
<img src="/images/charm/05. Diamond Haripin.jpg" class="item" alt="diamond hairpin">
<h3>Diamond hairpin</h3>
<input class="charm-input" type="number" id="diamond-hairpin" value="0">
</div>
<div class="box">
<img src="/images/charm/06. Hairpin Chest.jpg" class="item" alt="hairpin chest">
<h3>Hairpin Chest</h3>
<input class="charm-input" type="number" id="hairpin-chest" value="0">
</div>
<div class="box">
<img src="/images/charm/07. Jade Brooch.jpg" class="item" alt="jade brooch">
<h3>Jade Brooch</h3>
<input class="charm-input" type="number" id="jade-brooch" value="0">
</div>
<div class="box">
<img src="/images/charm/08. Gemstone Brooch.jpg" class="item" alt="gemstone brooch">
<h3>Gemstone Brooch</h3>
<input class="charm-input" type="number" id="gemstone-brooch" value="0">
</div>
<div class="box">
<img src="/images/charm/09. Diamond Brooch.jpg" class="item" alt="Diamond brooch">
<h3>Diamond Brooch</h3>
<input class="charm-input" type="number" id="diamond-brooch" value="0">
</div>
<div class="box">
<img src="/images/charm/10. Silver Earring.jpg" class="item" alt="silve earrings">
<h3>Silver Earrings</h3>
<input class="charm-input" type="number" id="silver-earring" value="0">
</div>
<div class="box">
<img src="/images/charm/11. Gold Earring.jpg" class="item" alt="gold earrings">
<h3>Gold Earrings</h3>
<input class="charm-input" type="number" id="gold-earring" value="0">
</div>
<div class="box">
<img src="/images/charm/12. Companions.png" class="item" alt="Companions">
<h3>Companions</h3>
<input class="charm-input" type="number" id="charm-companions" value="0">
</div>
<button type="button" class="grid-button" id="charm-button">
<p>CALCULATE</p>
</button>
</div>
</div>
<div class="tab-content" id="talent">
<div class="tab-title" id="talent">
<h2>Kalkulator talentu</h2>
FIll all the fields below, please and then click "calculate".
</div>
<div class="tab-grid" id="talent-grid">
<div class="box">
<img src="images/talent/01. Book XP Pack.jpg" class="item" alt="book xp pack">
<h3>Book XP Pack</h3>
<input class="talent-input" type="number" id="book-xp-pack" value="0">
</div>
<div class="box">
<img src="images/talent/02. Book XP Chest.jpg" class="item" alt="book xp chest">
<h3>Book XP Chest</h3>
<input class="talent-input" type="number" id="book-xp-chest" value="0">
</div>
<div class="box">
<img src="images/talent/03. Book XP Booster.jpg" class="item" alt="book xp booster">
<h3>Book XP Booster</h3>
<input class="talent-input" type="number" id="book-xp-booster" value="0">
</div>
<div class="box">
<img src="images/talent/04. Orb Box.jpg" class="item" alt="orb box">
<h3>Orb Box</h3>
<input class="talent-input" type="number" id="orb-box" value="0">
</div>
<div class="box">
<img src="images/talent/05. Military Enhance Badge.jpg" class="item" alt="military enhance badge">
<h3>Military Enhance Badge</h3>
<input class="talent-input" type="number" id="military-enhance-badge" value="0">
</div>
<div class="box">
<img src="images/talent/06. Research Enhance Badge.jpg" class="item" alt="research enhance badge">
<h3>Research Enhance Badge</h3>
<input class="talent-input" type="number" id="research-enhance-badge" value="0">
</div>
<div class="box">
<img src="images/talent/07. Politics Enhance Badge.jpg class="item" alt="politics enhance badge">
<h3>Research Enhance Badge</h3>
<input class="talent-input" type="number" id="politics-enhance-badge" value="0">
</div>
<div class="box">
<img src="images/talent/08. Prestige Enhance Badge.jpg class="item" alt=politics enhance badge">
<h3>Prestige Enhance Badge</h3>
<input class="talent-input" type="number" id="prestige-enhance-badge" value="0">
</div>
<div class="box">
<img src="images/talent/09. Almighty Badge.jpg class="item" alt="almighty badge">
<h3>Almighty Badge</h3>
<input class="talent-input" type="number" id="almighty-badge" value="0">
</div>
<div class="box">
<img src="images/talent/10. Best Skill.jpg class="item" alt="best skill">
<h3>Best skill</h3>
<input class="talent-input" type="number" id="best-skill" value="0">
</div>
<div class="box">
<img src="images/talent/11. Viziers.jpg class="item" alt="viziers">
<h3>Viziers<br>Number</h3>
<input class="talent-input" type="number" id="viziers" value="0">
</div>
<button type="button" class="grid-button" id="talent-button">
<p>CALCULATE</p>
</button>
</div>
</div>
</div>
</div>
</body>