forked from iWalkingCat/abx
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
159 lines (147 loc) · 6.63 KB
/
index.html
File metadata and controls
159 lines (147 loc) · 6.63 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<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=Inter:wght@400;500;700&display=swap" rel="stylesheet">
<title>ABX Loan Calculator</title>
</head>
<body>
<script></script>
<header>
<div><h1>ABX Loan Calculator</h1></div>
</header>
<main>
<div class="address-fetch-window">
<div class="address-fetch-title">
<h2>Fetch Loan Data</h2>
</div>
<div class="address-input-section">
<p>Enter wallet address to fetch existing loan data:</p>
<div class="address-input-container">
<input type="text" id="addressInput" placeholder="Enter wallet address..." class="address-input-form" style="border: 1px solid rgb(190, 190, 190);">
<button id="fetchButton" class="fetch-button">Fetch Data</button>
</div>
<div id="fetchStatus" class="fetch-status"></div>
</div>
</div>
<div class="collateral-rate-window">
<div class="collateral-rate-title">
<h2>Collateral Ratio</h2>
</div>
<div class="collateral-in-alph">
<p>Collateral in ALPH</p>
<input type="number" id="collateralAlphInput" inputmode="decimal" class="collateral-input-form" style="border: 1px solid rgb(190, 190, 190);">
</div>
<div class="borrow-in-abd">
<p>Borrow ABD</p>
<input type="number" id="borrowAbdInput" inputmode="decimal" class="collateral-input-form" style="border: 1px solid rgb(190, 190, 190);">
</div>
<div class="arrow1 arrow">↓</div>
<div class="arrow2 arrow">↓</div>
<div class="collateral-in-usd">
<p>Collateral in USD</p>
<p id="collateralUsdOutput">0$</p>
</div>
<div class="borrow-in-usd">
<p>Borrow in USD</p>
<p id="borrowUsdOutput">0$</p>
</div>
<div class="arrow3 arrow">↓</div>
<div class="arrow4 arrow">↓</div>
<div class="cr-formula">
<math>
<mrow>
<mi>CR</mi>
<mo>=</mo>
<mo>(</mo>
<mfrac>
<mi>CollateralUSD</mi>
<mi>BorrowUSD</mi>
</mfrac>
<mo>)</mo>
<mo>×</mo>
<mn>100 </mn>
</mrow>
</math>
</div>
<div class="arrow5 arrow">↓</div>
<div class="cr-result" id="crResultColor">
<p>Collateral Ratio</p>
<p id="collateralRateOutput">0.00%</p>
<p id="conclusion" class="conclusion">Loan Status: 0 (CR = 0%)</p>
</div>
<div class="liquidation-price">
<p id="liquidationPriceParagraph">🧮 Liquidation price: <span id="liquidationPrice">0.00$</span></p>
</div>
<div class="liquidation-loss">
<p>📉 Estimated losses: <span id="lossALPH">0</span> ALPH</p>
</div>
<div class="alph-price">
<p>Current ALPH price: <span id="alphPriceOutput">[Loading...]</span></p>
</div>
</div>
<div class="interest-payment-window">
<div class="interest-payment-title">
<h2>Interest Payment</h2>
</div>
<div class="interest-payment-select">
<p class="interestRateSelect">
<label for="interestRateSelect">💸 Interest Rate</label>
<select id="interestRateSelect" style="border: 1px solid rgb(190, 190, 190);">
<option value="1">1%</option>
<option value="3">3%</option>
<option value="5">5%</option>
<option value="10">10%</option>
<option value="15">15%</option>
<option value="20">20%</option>
<option value="25">25%</option>
<option value="30">30%</option>
</select>
</p>
</div>
<div class="interest-payment-info">
<p>Loan interest is calculated based on borrowed ABDs and deducted from the collateral in ALPH every 6 hours.</p>
</div>
<div class="interest-payment-calc">
<p class="table-name">Loan cost per</p>
<table>
<tr>
<td class="time">6hours:</td>
<td class="ALPH"><span id="hoursALPHOutput">0</span> ℵ</td>
<td class="USD"><span id="hoursUSDOutput">0</span> $</td>
</tr>
<tr>
<td class="time">Day:</td>
<td class="ALPH"><span id="dayALPHOutput">0</span> ℵ</td>
<td class="USD"><span id="dayUSDOutput">0</span> $</td>
</tr>
<tr>
<td class="time">Week:</td>
<td class="ALPH"><span id="weekALPHOutput">0</span> ℵ</td>
<td class="USD"><span id="weekUSDOutput">0</span> $</td>
</tr>
<tr>
<td class="time">Month:</td>
<td class="ALPH"><span id="monthALPHOutput">0</span> ℵ</td>
<td class="USD"><span id="monthUSDOutput">0</span> $</td>
</tr>
<tr>
<td class="time">Year:</td>
<td class="ALPH"><span id="yearALPHOutput">0</span> ℵ</td>
<td class="USD"><span id="yearUSDOutput">0</span> $</td>
</tr>
</table>
</div>
</div>
</main>
<footer>
<p>Created by <a href="https://x.com/iWalkingCat" target="_blank">TheWalkingCat</a></p>
<p>Support (ALPH): 169Au4ZhjtujRWPn4PoLXs2qVYWZ8tdnDBXHGUMaLf783</p>
</footer>
<script type="module" src="./javascript/script.js"></script>
</body>
</html>