/
index.html
196 lines (192 loc) · 7.13 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hashrate Checker</title>
<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=Montserrat:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<link rel="stylesheet" href="./style/navbar.css" />
<link rel="stylesheet" href="./style/footer.css" />
<link rel="stylesheet" href="./style/style.css" />
<script
src="https://kit.fontawesome.com/2eaa823958.js"
crossorigin="anonymous"
></script>
</head>
<body>
<!-- NAVBAR -->
<a class="skip-nav-link" href="#main-content">skip navigation</a>
<div class="nav">
<nav>
<ul>
<div class="mobile-hamburger-top">
<a href="./index.html" id="logo-link">
<img src="./assets/logo.svg" id="logo" alt="logo" class="" />
</a>
<i class="fas fa-bars" id="hamburger"></i>
</div>
<li class="li_home animate__animated animate__faster">
<a href="index.html">Home</a>
</li>
<li class="li_miner animate__animated animate__faster">
<a href="miner.html">Miner</a>
</li>
<li class="li_getstarted animate__animated animate__faster">
<a href="#">Get Started</a>
</li>
<li class="li_updates animate__animated animate__faster">
<a href="#">Updates</a>
</li>
</ul>
</nav>
</div>
<!-- heading area -->
<div class="main-wrapper">
<div class="wrapper">
<main id="main-content">
<h1 class="animate__animated animate__pulse">
Don't Pay for Hive. Manage Your Rigs for Free.
</h1>
<h2>Select your pool and enter your miner address below.</h2>
<form action="" class="form">
<div class="select-pool">
<div class="radio-1">
<input type="radio" id="ethermine" name="pool" />
<label for="ethermine">Ethermine</label>
</div>
<div class="radio-2">
<input type="radio" id="flexpool" name="pool" />
<label for="flexpool">Flexpool</label>
</div>
</div>
<div class="invalid-input invalid-pool"></div>
<div class="address-container">
<div class="search-bar-container">
<input
type="text"
id="miner-address"
name="miner-address"
placeholder="miner address (0x...)"
/>
<input type="submit" value="Go" name="submit" />
</div>
<div class="invalid-input invalid-address"></div>
</div>
</form>
</main>
<!-- Extra information 3 columns, 1 row -->
<section id="extra-info">
<div class="col-container">
<div class="col col-1" title="Bitcoin">
BTC: <span id="btc-price"></span>
</div>
<div class="col col-2" title="Ethereum">
ETH: <span id="eth-price"></span>
</div>
<div class="col col-3" title="Solana">
SOL: <span id="sol-price"></span>
</div>
</div>
<div>
<div class="progress">
<div class="progress-bar-custom" style="--bg: #ff9b6a"></div>
</div>
</div>
</section>
<section id="get-started">
<div class="get-started-container">
<h3>Don't know where to start?</h3>
<h4>
Click <a href="#">get started</a>. We'll guide you through it.
</h4>
</div>
</section>
<section id="faq">
<div class="faq-container">
<h2>FAQ</h2>
<details class="question-border-top question-1">
<summary>What can this site do that my pool can't?</summary>
You are able to add and monitor multiple addresses/rigs and
monitor them all in one place. With a pool, you are only allowed
to monitor one Ethereum address at a time, and this will save you
time in the long run.
</details>
<details class="question-border-top question-2">
<summary>What coins do you support?</summary>
Currently, only Ethereum is supported, but support for other coins
is rolling out shortly.
</details>
<details class="question-border-top question-3">
<summary>What pools do you support?</summary>
Currently, only Ethermine and Flexpool are supported, but support
for Nanopool and 2miners is being rolled out shortly.
</details>
<details class="question-border-top question-4">
<summary>How do I add multiple addresses?</summary>
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Perspiciatis minus obcaecati maiores nostrum illo sequi ex
explicabo a reprehenderit. Officiis, modi unde ipsa doloribus
ipsum adipisci! Aspernatur laboriosam repudiandae voluptatem!
</details>
</div>
</section>
</div>
</div>
<footer>
<div class="footer-wrapper">
<div class="top-footer">
<div class="left">
<p>IT'S FREE.</p>
<h3><span id="tvt"></span>It's Hive, But Better.</h3>
<button id="try-now-btn">Try Now</button>
</div>
<div class="middle">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="miner.html">Miner</a></li>
<li><a href="#">Get Started</a></li>
<li><a href="#">Updates</a></li>
</ul>
</div>
<div class="right socials">
<div class="twitter">
<a
href="https://twitter.com/"
class="fab fa-twitter fa-lg"
target="_blank"
></a>
</div>
<div class="linkedin">
<a
href="https://linkedin.com/in/chrisdaid"
class="fab fa-linkedin-in fa-lg"
target="_blank"
></a>
</div>
<div class="github">
<a
href="https://github.com/chrisdaid/rigmanager"
class="fab fa-github fa-lg"
target="_blank"
></a>
</div>
</div>
</div>
<div class="bottom-footer">Crafted with 💛 by Christopher Dai</div>
</div>
</footer>
<script src="form.js"></script>
<script src="cryptoprices.js"></script>
<script src="navbar.js"></script>
</body>
</html>