-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcalculator.html
158 lines (150 loc) · 9.13 KB
/
calculator.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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Genshin Impact Tools - Calculator</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="Genshin Impact Tools - Simple tools for Genshin Impact. - Calculator - Calculate the resources required to reach your character level goal.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=0.25, maximum-scale=5.0">
<link rel="icon" href="./favicon.ico" type="image/x-icon" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/card.css">
<link rel="stylesheet" href="./css/calculator.css">
<audio id="background-audio" loop>
<source src="./audio/1-03 Separated Dream.mp3" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
<button id="mute-button" aria-label="Mute/Unmute background audio">
<i class="fas fa-volume-up" id="volume-icon"></i>
</button>
</head>
<body>
<div class="page">
<div class="container page-container">
<section class="section">
<div class="section-container">
<header class="section-header">
<div class="section-header-container">
<span class="home-link" role="button" tabindex="0"><a href="./index.html" role="button">Home</a> <i class="fas fa-arrow-right"></i></span>
<h1 class="section-header-title">Calculator</h1>
</div>
</header>
<hr class="section-header-separator">
<div id="calculator-content" class="content collapse show">
<article class="content-container">
<p>
Use this calculator to see how much of each resource you need to level your character from
your current level to your end goal.
</p>
<header class="section-header">
<div class="section-header-container">
<span class="section-toggle-collapse" role="button" tabindex="0"><a data-bs-toggle="collapse" href="#calculator-character-select" role="button" aria-expanded="true" aria-controls="calculator-character-select">Collapse</a></span>
<h3 class="section-header-title">Select your characters</h3>
</div>
</header>
<div id="calculator-character-select" class="content collapse show">
<article class="content-container">
<table id="calculator-character-select-table" class="table">
<thead>
<tr>
<th>
<div class="d-block d-lg-flex">
<span class="text-light mb-2 me-2">Show:</span>
<div class="form-check form-check-inline mb-2">
<input class="form-check-input show-toggle" type="checkbox" id="show-pyro" data-type="Pyro" checked />
<label class="form-check-label" for="show-pyro">Pyro</label>
</div>
<div class="form-check form-check-inline mb-2">
<input class="form-check-input show-toggle" type="checkbox" id="show-hydro" data-type="Hydro" checked />
<label class="form-check-label" for="show-hydro">Hydro</label>
</div>
<div class="form-check form-check-inline mb-2">
<input class="form-check-input show-toggle" type="checkbox" id="show-anemo" data-type="Anemo" checked />
<label class="form-check-label" for="show-anemo">Anemo</label>
</div>
<div class="form-check form-check-inline mb-2">
<input class="form-check-input show-toggle" type="checkbox" id="show-electro" data-type="Electro" checked />
<label class="form-check-label" for="show-electro">Electro</label>
</div>
<div class="form-check form-check-inline mb-2">
<input class="form-check-input show-toggle" type="checkbox" id="show-dendro" data-type="Dendro" checked />
<label class="form-check-label" for="show-dendro">Dendro</label>
</div>
<div class="form-check form-check-inline mb-2">
<input class="form-check-input show-toggle" type="checkbox" id="show-cryo" data-type="Cryo" checked />
<label class="form-check-label" for="show-cryo">Cryo</label>
</div>
<div class="form-check form-check-inline mb-2 mb-2">
<input class="form-check-input show-toggle" type="checkbox" id="show-geo" data-type="Geo" checked />
<label class="form-check-label" for="show-geo">Geo</label>
</div>
<!-- <div class="mx-0"></div> -->
<div class="btn-group btn-group-sm mb-2 me-2" role="group" aria-label="Toggle All Buttons">
<button class="btn btn-sm btn-success" type="button" id="select-all">Select All</button>
<button class="btn btn-sm btn-danger" type="button" id="unselect-all">Unselect All</button>
</div>
<button class="btn btn-sm btn-primary mb-2" type="button" id="import">Import</button>
</div>
<div>
<div class="input-group input-group-sm">
<span class="input-group-text" id="search-lbl">Search</span>
<input type="text" id="search" class="form-control" placeholder="Search" data-search-target="#calculator-character-select-table tbody" data-search-item="td > div" aria-label="Search" aria-describedby="search-lbl">
<button class="btn btn-danger" type="button" onclick="$('#search').val('').change();">Clear</button>
</div>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
</article>
</div>
<header class="section-header">
<div class="section-header-container">
<span class="section-toggle-collapse" role="button" tabindex="0"><a data-bs-toggle="collapse" href="#calculator-calculation" role="button" aria-expanded="true" aria-controls="calculator-calculation">Collapse</a></span>
<h3 class="section-header-title">Calculation</h3>
</div>
</header>
<div id="calculator-calculation" class="content collapse show">
<article class="content-container">
<table id="level-up-resource-calculator-table" class="table table-bordered table-striped align-middle bg-light">
<thead>
<tr>
<th scope="col">Character</th>
<th scope="col">Levels</th>
<th scope="col">Requirements</th>
</tr>
</thead>
<tbody>
<tr>
<td>Total</td>
<td colspan="2" class="total-level-requirement-table"></td>
</tr>
</tbody>
</table>
</article>
</div>
</article>
</div>
</div>
</section>
</div>
</div>
<video class="video-background" autoplay muted loop>
<source src="./video/inazuma-logo-genshin-impact-moewalls-com.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="./js/app.js"></script>
<script src="./js/calculator.js"></script>
<script src="./js/bgm-audio.js"></script>
</body>
</html>