Skip to content

Commit 2b0c517

Browse files
author
alyzow
authored
VulkanMod website
1 parent 9f45981 commit 2b0c517

6 files changed

Lines changed: 392 additions & 0 deletions

File tree

‎VulkanMod.ico‎

1.79 KB
Binary file not shown.

‎VulkanMod.png‎

7.09 KB
Loading

‎index.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta name="viewport" content="width=deivce-width, initial-scale=1.0">
5+
<link rel="stylesheet" href="style.css">
6+
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v2.1.5/css/unicons.css">
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9+
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css'>
10+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">
11+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
12+
<link rel="icon" type="image/x-icon" href="VulkanMod.ico">
13+
<title>VulkanMod</title>
14+
</head>
15+
<body>
16+
<div id="particles"></div>
17+
<div class="container">
18+
<div class="content">
19+
<img src="VulkanMod.png" class="logo" alt="VulkanMod">
20+
<div class="heading">
21+
<h1>VulkanMod</h1>
22+
</div>
23+
<div class="text">
24+
<p>A <u><a href="https://fabricmc.net/" style="color: white;">fabric</a></u> mod that rewrites Minecraft <u><a href="https://opengl.org/" style="color: white;">OpenGL©️</a></u> renderer to use <u><a href="https://vulkan.org/" style="color: white;">Vulkan©️</a></u> API.</p>
25+
</div>
26+
<div class="button">
27+
<a class="btn" href="https://modrinth.com/mod/vulkanmod"><i class="bi bi-download"></i><span class="btn-text"> Download</span></a>
28+
<a class="btn" href="https://github.com/xCollateral/VulkanMod"><i class="bi bi-github"></i><span class="btn-text"> GitHub</span></a>
29+
<a class="btn" href="https://ko-fi.com/V7V7CHHJV"><i class="bi bi-cup"></i><span class="btn-text"> Donate</span></a>
30+
<a class="btn" href="https://discord.gg/FVXg7AYR2Q"><i class="bi bi-discord"></i><span class="btn-text"> Discord</span></a>
31+
</div>
32+
</div>
33+
</div>
34+
<div id="disclaimer" class="modal">
35+
<div class="content animate__animated animate__fadeInDown">
36+
<span class="close" onclick="disclaimerModal()">&times;</span>
37+
<h4>Disclaimer:</h4>
38+
<ul>
39+
<li>Vulkan and the Vulkan logo are registered trademarks of the Khronos Group Inc.</li>
40+
<li>OpenGL and the OpenGL logo are registered trademarks of the Khronos Group Inc.</li>
41+
<li>Minecraft is the trademark of Microsoft Corporation.</li>
42+
<li>Fabric is the trademark of FabricMC.</li>
43+
</ul>
44+
<div style="display: block; margin-top: 12px"><a class="button" href="javascript:void(0)" onclick="disclaimerModal()">Close</a></div>
45+
</div>
46+
</div>
47+
<div class="footer">
48+
<p>© COPYRIGHT 2022. NOT APPROVED BY OR ASSOCIATED WITH MOJANG. <a href="javascript:void(0)" onclick="disclaimerModal()" style="color: #fff">DISCLAIMER</a></p>
49+
</div>
50+
<script src="./particles.min.js"></script>
51+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
52+
<script>
53+
particlesJS.load('particles', 'particles.json');
54+
55+
var modal = $("#disclaimer");
56+
function disclaimerModal() {
57+
modal.toggle();
58+
}
59+
</script>
60+
</body>
61+
</html>

‎particles.json‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
{
2+
"particles": {
3+
"number": {
4+
"value": 355,
5+
"density": {
6+
"enable": true,
7+
"value_area": 789.1476416322727
8+
}
9+
},
10+
"color": {
11+
"value": "#ffffff"
12+
},
13+
"shape": {
14+
"type": "circle",
15+
"stroke": {
16+
"width": 0,
17+
"color": "#000000"
18+
},
19+
"polygon": {
20+
"nb_sides": 5
21+
},
22+
"image": {
23+
"src": "img/github.svg",
24+
"width": 100,
25+
"height": 100
26+
}
27+
},
28+
"opacity": {
29+
"value": 0.48927153781200905,
30+
"random": false,
31+
"anim": {
32+
"enable": true,
33+
"speed": 0.2,
34+
"opacity_min": 0,
35+
"sync": false
36+
}
37+
},
38+
"size": {
39+
"value": 2,
40+
"random": true,
41+
"anim": {
42+
"enable": true,
43+
"speed": 2,
44+
"size_min": 0,
45+
"sync": false
46+
}
47+
},
48+
"line_linked": {
49+
"enable": false,
50+
"distance": 150,
51+
"color": "#ffffff",
52+
"opacity": 0.4,
53+
"width": 1
54+
},
55+
"move": {
56+
"enable": true,
57+
"speed": 0.2,
58+
"direction": "none",
59+
"random": true,
60+
"straight": false,
61+
"out_mode": "out",
62+
"bounce": false,
63+
"attract": {
64+
"enable": false,
65+
"rotateX": 600,
66+
"rotateY": 1200
67+
}
68+
}
69+
},
70+
"interactivity": {
71+
"detect_on": "canvas",
72+
"events": {
73+
"onhover": {
74+
"enable": true,
75+
"mode": "bubble"
76+
},
77+
"onclick": {
78+
"enable": true,
79+
"mode": "push"
80+
},
81+
"resize": true
82+
},
83+
"modes": {
84+
"grab": {
85+
"distance": 400,
86+
"line_linked": {
87+
"opacity": 1
88+
}
89+
},
90+
"bubble": {
91+
"distance": 83.91608391608392,
92+
"size": 1,
93+
"duration": 3,
94+
"opacity": 1,
95+
"speed": 3
96+
},
97+
"repulse": {
98+
"distance": 200,
99+
"duration": 0.4
100+
},
101+
"push": {
102+
"particles_nb": 4
103+
},
104+
"remove": {
105+
"particles_nb": 2
106+
}
107+
}
108+
},
109+
"retina_detect": true
110+
}

‎particles.min.js‎

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎style.css‎

Lines changed: 212 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,212 @@
1+
body {
2+
width: 100%;
3+
height: 97.7vh;
4+
background-color: #000;
5+
background-image: radial-gradient(circle at top right, rgba(121, 68, 154, 0.13), transparent),
6+
radial-gradient(circle at 20% 80%, rgba(41, 196, 255, 0.13), transparent);
7+
margin: 0;
8+
}
9+
10+
* {
11+
margin: 0;
12+
padding: 0;
13+
}
14+
15+
.container {
16+
display: flex;
17+
align-items: center;
18+
justify-content: center;
19+
min-height: 500px;
20+
}
21+
22+
.content {
23+
text-align: center;
24+
z-index: 5;
25+
}
26+
27+
.heading {
28+
color: white;
29+
text-align: center;
30+
font-family: 'Poppins', sans-serif;
31+
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
32+
-moz-animation: fadein 2s; /* Firefox < 16 */
33+
-ms-animation: fadein 2s; /* Internet Explorer */
34+
-o-animation: fadein 2s; /* Opera < 12.1 */
35+
animation: fadein 2s;
36+
}
37+
38+
.text {
39+
color: white;
40+
padding: 0px 24px;
41+
text-align: center;
42+
font-family: 'Poppins', sans-serif;
43+
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
44+
-moz-animation: fadein 2s; /* Firefox < 16 */
45+
-ms-animation: fadein 2s; /* Internet Explorer */
46+
-o-animation: fadein 2s; /* Opera < 12.1 */
47+
animation: fadein 2s;
48+
}
49+
50+
.logo {
51+
transition-duration: 500ms;
52+
}
53+
54+
.logo:hover {
55+
transform: scale(1.1);
56+
}
57+
58+
.button {
59+
padding: 8px 12px;
60+
margin-top: 12px;
61+
text-align: center;
62+
}
63+
64+
.footer {
65+
position: absolute;
66+
bottom: 0px;
67+
text-align: center;
68+
width: 100%;
69+
font-family: 'Poppins', sans-serif;
70+
color: white;
71+
font-size: 12px;
72+
-webkit-animation: fadein 4s; /* Safari, Chrome and Opera > 12.1 */
73+
-moz-animation: fadein 4s; /* Firefox < 16 */
74+
-ms-animation: fadein 4s; /* Internet Explorer */
75+
-o-animation: fadein 4s; /* Opera < 12.1 */
76+
animation: fadein 4s;
77+
}
78+
79+
#particles {
80+
position: absolute;
81+
width: 100%;
82+
height: 95%;
83+
}
84+
85+
.btn {
86+
padding: 8px 12px 8px;
87+
color: #0D4652;
88+
background-color: #fff;
89+
text-decoration: none;
90+
border: none;
91+
border-radius: 10px;
92+
min-height: 40px;
93+
min-width: 100px;
94+
font-family: 'Poppins', sans-serif;
95+
transition-duration: 0.5s;
96+
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
97+
98+
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
99+
-moz-animation: fadein 2s; /* Firefox < 16 */
100+
-ms-animation: fadein 2s; /* Internet Explorer */
101+
-o-animation: fadein 2s; /* Opera < 12.1 */
102+
animation: fadein 2s;
103+
}
104+
105+
.btn:hover {
106+
background-color: #B5D2D8;
107+
cursor: pointer;
108+
}
109+
110+
.modal {
111+
display: none;
112+
position: fixed;
113+
z-index: 10;
114+
top: 0;
115+
width: 100%;
116+
height: 100%;
117+
overflow: auto;
118+
background-color: rgb(0,0,0);
119+
background-color: rgba(0,0,0,0.4);
120+
}
121+
122+
.modal .content {
123+
background-color: black;
124+
margin: 250px auto;
125+
padding: 20px;
126+
border: 1px solid red;
127+
border-radius: 10px;
128+
max-width: 600px;
129+
text-align: left;
130+
font-family: 'Poppins', sans-serif;
131+
color: #fff;
132+
--animate-duration: 0.5s;
133+
}
134+
135+
.modal .content .button {
136+
padding: 8px 12px 8px;
137+
color: #fff;
138+
background-color: #0D4652;
139+
text-decoration: none;
140+
border: none;
141+
border-radius: 10px;
142+
min-height: 40px;
143+
min-width: 100px;
144+
font-family: 'Poppins', sans-serif;
145+
transition-duration: 0.5s;
146+
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
147+
}
148+
149+
.modal .content .btn:hover {
150+
background-color: #082d35;
151+
}
152+
153+
.modal .content ul,
154+
.modal .content ol {
155+
margin-left: 1em;
156+
text-align: left;
157+
}
158+
159+
.modal .close {
160+
color: #0D4652;
161+
float: right;
162+
font-size: 28px;
163+
font-weight: bold;
164+
margin-top: -10px;
165+
}
166+
167+
.modal .close:hover,
168+
.modal .close:focus {
169+
color: #082d35;
170+
text-decoration: none;
171+
cursor: pointer;
172+
}
173+
174+
@keyframes fadein {
175+
from { opacity: 0; }
176+
to { opacity: 1; }
177+
}
178+
179+
/* Firefox < 16 */
180+
@-moz-keyframes fadein {
181+
from { opacity: 0; }
182+
to { opacity: 1; }
183+
}
184+
185+
/* Safari, Chrome and Opera > 12.1 */
186+
@-webkit-keyframes fadein {
187+
from { opacity: 0; }
188+
to { opacity: 1; }
189+
}
190+
191+
/* Internet Explorer */
192+
@-ms-keyframes fadein {
193+
from { opacity: 0; }
194+
to { opacity: 1; }
195+
}
196+
197+
/* Opera < 12.1 */
198+
@-o-keyframes fadein {
199+
from { opacity: 0; }
200+
to { opacity: 1; }
201+
}
202+
203+
@media (max-width: 575px) {
204+
.btn-text {
205+
display: none;
206+
}
207+
208+
.btn {
209+
margin-left: 4px;
210+
margin-right: 4px;
211+
}
212+
}

0 commit comments

Comments
 (0)