-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
216 lines (216 loc) · 12.5 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jexactyl.</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/shorthand.min.css" />
<link rel="stylesheet" href="assets/css/jexactyl.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Muli:200,300,400,500,600,700,800,900&display=swap" />
</head>
<body class="bg-black muli">
<nav class="w-100pc flex flex-column md-flex-row md-px-10 py-5 bg-black jfade-down">
<div class="flex justify-between">
<a href="#" class="flex items-center p-2 mr-4 no-underline">
<img class="max-h-l2 w-auto" src="assets/images/logo.png" />
Jexactyl.
</a>
<a data-toggle="toggle-nav" data-target="#nav-items" href="#"
class="flex items-center ml-auto md-hidden blue-lighter opacity-50 hover-opacity-100 ease-300 p-1 m-3">
<i data-feather="menu"></i>
</a>
</div>
<div id="nav-items" class="hidden flex sm-w-100pc flex-column md-flex md-flex-row md-justify-end items-center">
<a href="#home" class="fs-s1 mx-3 py-3 blue no-underline hover-underline">Home</a>
<a href="#features" class="fs-s1 mx-3 py-3 blue no-underline hover-underline">Features</a>
<a href="https://docs.jexactyl.com" class="fs-s1 mx-3 py-3 blue no-underline hover-underline">Documentation</a>
<a href="https://github.com/jexactyl" class="fs-s1 mx-3 py-3 blue no-underline hover-underline">GitHub</a>
</div>
</nav>
<section id="home" class="min-h-75vh flex justify-start items-center jfade">
<div class="mx-5 md-mx-l5">
<div>
<h1 class="white fs-l3 lh-2 md-fs-xl1 md-lh-1 fw-900">Jexactyl.</h1>
<h2 class="white fs-l3 lh-2 md-lh-1">A fast, intuitive and powerful fork of
<a class="white fs-l3 lh-2 md-lh-1" href="https://pterodactyl.io">Pterodactyl®.</a>
</h2>
</div>
</div>
</section>
<section class="flex justify-center items-center jfade-ext-1">
<a class="white fs-l3 lh-2 md-lh-1"><i data-feather="chevron-down"></i></a></h2>
</section>
<section class="p-10 md-p-l5 jfade">
<div class="flex flex-column md-flex-row mx-auto">
<div class="w-100pc md-w-40pc">
<div class="br-8 p-5 m-5">
<div class="flex justify-center items-center bg-blue-lightest-10 blue w-l5 h-l5 br-round mb-5"><i
data-feather="zap" class="w-l5"></i></div>
<h4 class="white fw-600 fs-m3 mb-5">Fast.</h4>
<div class="blue-lightest fw-600 fs-m1 lh-3 opacity-50">
Jexactyl is built with speed and power in mind. A clean, fluent Laravel
backend supports the React user interface with organised API endpoints.
</div>
</div>
</div>
<div class="w-100pc md-w-40pc">
<div class="br-8 p-5 m-5">
<div class="flex justify-center items-center bg-blue-lightest-10 blue w-l5 h-l5 br-round mb-5"><i
data-feather="lock" class="w-l5"></i></div>
<h4 class="white fw-600 fs-m3 mb-5">Advanced.</h4>
<div class="blue-lightest fw-600 fs-m1 opacity-50">
Jexactyl brings multiple features which make everything
easier. A storefront system removes the need for a separate
dashboard.
</div>
</div>
</div>
<div class="w-100pc md-w-40pc">
<div class="br-8 p-5 m-5">
<div class="flex justify-center items-center bg-blue-lightest-10 blue w-l5 h-l5 br-round mb-5"><i
data-feather="upload-cloud" class="w-l5"></i></div>
<h4 class="white fw-600 fs-m3 mb-5">Up-to-date.</h4>
<div class="blue-lightest fw-600 fs-m1 opacity-50">
Jexactyl's dependencies are constantly updated and improved
to improve speed and security. Gone are the days of
outdated and deprecated packages.
</div>
</div>
</div>
</div>
</section>
<section class="p-10 flex flex-wrap jfade">
<div class="p-10 w-50pc bg-cover">
<h2 class="white fs-l3 fw-900 lh-1">Jexactyl Storefront</h2>
<p class="blue-lightest fw-600 fs-m1 opacity-50 my-5 mr-4">
One of the main features of Jexactyl is the powerful yet
elegant store system. Users can be assigned credits which they can
then use to deploy servers on the platform. Costs and payment gateways
can be fully configured by administrators for ease of use.
</p>
</div>
<div class="w-100pc md-w-50pc mt-10">
<h2 class="white fs-l3 fw-900 lh-1 ml-4">Dark UI</h2>
<p class="blue-lightest fw-600 fs-m1 opacity-50 my-5 ml-4">
While Pterodactyl® exposes a beautiful and fluent UI
for users, we've turned it up a notch by tinting the
interface components to make them more visually-appealing.
Using React provides the software with a new and fast SPA
which includes a fast API and as-needed rendering.
</p>
</div>
</section>
<section class="p-10 md-p-l5 jfade">
<div class="br-8 bg-blue-lightest-10 p-5 md-p-l5 flex flex-wrap md-justify-between md-items-center">
<div class="w-100pc md-w-33pc">
<h2 class="white fs-m4 fw-800">Get started with Jexactyl.</h2>
<p class="fw-600 blue-lightest opacity-40">FOSS forever. Just set up on your infrastructure and enjoy!</p>
</div>
<div class="w-100pc md-w-50pc">
<div class="flex my-5">
<a href="https://docs.jexactyl.com">
<button class="button-lg bg-blue blue-lightest fw-300 fs-s3 mr-2"><h3 class="fw-600">Documentation</h3></button>
</a>
<a href="https://paypal.me/jexactyl">
<button class="button-lg bg-blue blue-lightest fw-300 fs-s3 mr-2"><h3 class="fw-600">Donate</h3></button>
</a>
<a href="https://github.com/jexactyl">
<button class="button-lg bg-blue blue-lightest fw-300 fs-s3 mr-2"><h3 class="fw-600">GitHub</h3></button>
</a>
<a href="https://discord.com/invite/qttGR4Z5Pk">
<button class="button-lg bg-blue blue-lightest fw-300 fs-s3 mr-2"><h3 class="fw-600">Discord</h3></button>
</a>
</div>
</div>
</div>
</section>
<footer class="p-5 md-p-l5 bg-blue-lightest-10 jfade">
<div class="flex flex-wrap">
<div class="md-w-25pc mb-10">
<img src="assets/images/logo.png" class="w-l5" alt="">
<div class="white opacity-70 fs-s2 mt-4 md-pr-10">
<p>
We're an organisation built to bring the hosting industry
together with powerful features and customisability.
</p>
<br/>
<p>
A project by <a href="https://heyim.cam">Jex.</a>
</p>
</div>
</div>
<div class="w-100pc md-w-50pc">
<div class="flex justify-around">
<div class="w-50pc md-px-10 mb-10">
<h5 class="white">GitHub</h5>
<ul class="list-none mt-5 fs-s2">
<li class="my-3">
<a href="https://github.com/jexactyl/jexactyl" class="white opacity-70 no-underline hover-underline">
Panel v3
</a>
</li>
<li class="my-3">
<a href="https://github.com/jexactyl/panel" class="white opacity-70 no-underline hover-underline">
Panel v2
</a>
</li>
<li class="my-3">
<a href="https://github.com/jexactyl/documentation" class="white opacity-70 no-underline hover-underline">
Documentation
</a>
</li>
<li class="my-3">
<a href="https://github.com/jexactyl/site" class="white opacity-70 no-underline hover-underline">
Site
</a>
</li>
</ul>
</div>
<div class="w-50pc md-px-10 mb-10">
<h5 class="white">Contact</h5>
<ul class="list-none mt-5 fs-s2">
<li class="my-3">
<a href="mailto:[email protected]" class="white opacity-70 no-underline hover-underline">
Email
</a>
</li>
<li class="my-3">
<a href="https://github.com/cmrxnn" class="white opacity-70 no-underline hover-underline">
GitHub
</a>
</li>
<li class="my-3">
<a href="https://discord.com/invite/qttGR4Z5Pk" class="white opacity-70 no-underline hover-underline">
Discord
</a>
</li>
<li class="my-3">
<a href="https://twitter.com/cmrxnn" class="white opacity-70 no-underline hover-underline">
Twitter
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="w-100pc md-w-25pc">
<div class="flex justify-around my-8">
<a href="https://github.com/jexactyl" class="relative p-5 bg-blue br-round white hover-scale-up-1 ease-400">
<i data-feather="github" class="absolute-center h-4"></i>
</a>
<a href="https://github.com/cmrxnn" class="relative p-5 bg-blue br-round white hover-scale-up-1 ease-400">
<i data-feather="twitter" class="absolute-center h-4"></i>
</a>
<a href="https://discord.com/invite/qttGR4Z5Pk" class="relative p-5 bg-blue br-round white hover-scale-up-1 ease-400">
<i data-feather="message-square" class="absolute-center h-4"></i>
</a>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/[email protected]/dist/smooth-scroll.polyfills.min.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>