-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
183 lines (181 loc) · 8.73 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EXP Bank Calculator</title>
<link rel="stylesheet" href="styles.min.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/bignumber.min.js" defer></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
media="print" onload="this.media='all'">
<noscript>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</noscript>
</head>
<body>
<div class="container">
<h1>EXP Bank Calculator</h1>
<div class="info-button-container">
<button id="technicalInfoBtn" class="info-button" aria-label="More technical information">i</button>
</div>
<div class="calculator">
<div class="input-group">
<input type="number" id="currentGems" placeholder="Current Gems" required aria-label="Current Gems">
<div class="tooltip" role="tooltip" aria-hidden="true">
<div class="icon">i</div>
<div class="tooltiptext">Enter your current number of gems</div>
</div>
</div>
<div class="input-group">
<input type="number" id="goalGems" placeholder="Goal Gems">
<div class="tooltip" role="tooltip" aria-hidden="true">
<div class="icon">i</div>
<div class="tooltiptext">Enter your target number of gems</div>
</div>
</div>
<div class="input-group">
<input type="number" id="additionalGems" placeholder="Additional Gems">
<div class="tooltip" role="tooltip" aria-hidden="true">
<div class="icon">i</div>
<div class="tooltiptext">Enter the amount of additional gems you want to calculate time for</div>
</div>
</div>
<div class="time-input">
<input type="number" id="years" placeholder="Y">
<input type="number" id="months" placeholder="M">
<input type="number" id="days" placeholder="D">
<input type="number" id="hours" placeholder="H">
<input type="number" id="minutes" placeholder="M">
<input type="number" id="seconds" placeholder="S">
<div class="tooltip">
<div class="icon">i</div>
<div class="tooltiptext">Enter the time period for calculation (Years, Months, Days, Hours, Minutes,
Seconds)</div>
</div>
</div>
<div class="future-amount-input">
<input type="date" id="targetDate" placeholder="MM/DD/YYYY">
<input type="time" id="targetTime" placeholder="HH:MM AM/PM">
<button id="clearBtn">Clear</button>
<div class="tooltip">
<div class="icon">i</div>
<div class="tooltiptext">Enter date and time for future calculation (MM/DD/YYYY and AM/PM format)</div>
</div>
</div>
<p>Daily Interest: <span id="dailyInterest">0.25%</span></p>
<button id="calculateBtn">Calculate!</button>
<div id="result">
<div class="result-item">
<span id="timeToReach">It will take ...</span>
<div class="tooltip">
<div class="icon">i</div>
<div class="tooltiptext">Time required to reach your goal</div>
</div>
</div>
<div class="result-item">
<span id="gemsAfterTime">Gems after time: ...</span>
<div class="tooltip">
<div class="icon">i</div>
<div class="tooltiptext">Total gems after the specified time</div>
</div>
</div>
<div class="result-item">
<span id="profit">Profit: ...</span>
<div class="tooltip">
<div class="icon">i</div>
<div class="tooltiptext">Total profit earned</div>
</div>
</div>
<div class="result-item">
<span id="profitPerSecond">Profit per second: ...</span>
<span id="totalGemsPerSecond" class="total-gems">Total gems after second: ...</span>
<div class="tooltip">
<div class="icon">i</div>
<div class="tooltiptext">Profit earned every second</div>
</div>
</div>
<div class="result-item">
<span id="profitPerMinute">Profit per minute: ...</span>
<span id="totalGemsPerMinute" class="total-gems">Total gems after minute: ...</span>
<div class="tooltip">
<div class="icon">i</div>
<div class="tooltiptext">Profit earned every minute</div>
</div>
</div>
<div class="result-item">
<span id="profitPerHour">Profit per hour: ...</span>
<span id="totalGemsPerHour" class="total-gems">Total gems after hour: ...</span>
<div class="tooltip">
<div class="icon">i</div>
<div class="tooltiptext">Profit earned every hour</div>
</div>
</div>
<div class="result-item">
<span id="profitPerDay">Profit per day: ...</span>
<span id="totalGemsPerDay" class="total-gems">Total gems after day: ...</span>
<div class="tooltip">
<div class="icon">i</div>
<div class="tooltiptext">Profit earned every day</div>
</div>
</div>
<div class="result-item">
<span id="profitPerWeek">Profit per week: ...</span>
<span id="totalGemsPerWeek" class="total-gems">Total gems after week: ...</span>
<div class="tooltip">
<div class="icon">i</div>
<div class="tooltiptext">Profit earned every week</div>
</div>
</div>
<div class="result-item">
<span id="profitPerMonth">Profit per month: ...</span>
<span id="totalGemsPerMonth" class="total-gems">Total gems after month: ...</span>
<div class="tooltip">
<div class="icon">i</div>
<div class="tooltiptext">Profit earned every month</div>
</div>
</div>
<div class="result-item">
<span id="profitGrowth">Profit Growth (%): ...</span>
<div class="tooltip">
<div class="icon">i</div>
<div class="tooltiptext">Percentage of profit growth</div>
</div>
</div>
<div class="result-item">
<span id="futureAmount"></span>
<div class="tooltip">
<div class="icon">i</div>
<div class="tooltiptext">Future amount based on the entered date and time</div>
</div>
</div>
</div>
</div>
<div class="leaderboard">
<h2>Leaderboard</h2>
<div class="leaderboard-item">
<p>1. Player1 (EXP)</p>
<p>210M Gems</p>
</div>
<div class="leaderboard-item">
<p>2. Player2 (EXP)</p>
<p>20M Gems</p>
</div>
<div class="leaderboard-item">
<p>3. Player3 (EXP)</p>
<p>10M Gems</p>
</div>
</div>
</div>
<div id="infoPopup" class="info-popup">
<span id="infoText"></span>
</div>
<div id="technicalInfoModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<div id="technicalInfoContent"></div>
</div>
</div>
<script src="script.min.js" defer></script>
</body>
</html>