Skip to content

Commit 3b12b52

Browse files
jrgrimshawjrgrimshaw
committed
initial commit
0 parents  commit 3b12b52

17 files changed

+380
-0
lines changed

Diff for: ‎.prettierrc

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"printWidth": 100,
3+
"tabWidth": 2,
4+
"useTabs": false
5+
}

Diff for: ‎assets/audio/rule-britannia.mp3

961 KB
Binary file not shown.

Diff for: ‎assets/css/style.css

+224
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,224 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap");
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
list-style: none;
7+
box-sizing: border-box;
8+
}
9+
10+
body.brp-background {
11+
font-family: "Poppins", sans-serif;
12+
position: absolute;
13+
width: 100vw;
14+
height: 100vh;
15+
background: black;
16+
}
17+
18+
/* Tooltip container */
19+
.brp-tooltip {
20+
position: relative;
21+
display: inline-block;
22+
}
23+
24+
/* Tooltip text */
25+
.brp-tooltip .brp-tooltip-text {
26+
visibility: hidden;
27+
width: 150px;
28+
background-color: black;
29+
color: #fff;
30+
text-align: center;
31+
padding: 5px 0;
32+
border-radius: 6px;
33+
position: absolute;
34+
z-index: 1;
35+
font-size: 14px;
36+
font-weight: 400;
37+
}
38+
39+
.brp-tooltip:hover .brp-tooltip-text {
40+
visibility: visible;
41+
}
42+
43+
.brp-cursor {
44+
position: fixed;
45+
width: 1.5vw;
46+
z-index: 99999999999;
47+
pointer-events: none;
48+
user-select: none;
49+
}
50+
51+
.brp-slideshow {
52+
position: absolute;
53+
top: 0;
54+
left: 0;
55+
width: 100vw;
56+
height: 100vh;
57+
overflow: hidden;
58+
}
59+
60+
.brp-slideshow img {
61+
position: absolute;
62+
width: 100vw;
63+
height: 100vh;
64+
object-fit: cover;
65+
opacity: 0;
66+
-webkit-transition-property: opacity, -webkit-transform;
67+
-webkit-transition-duration: 3s, 10s;
68+
-moz-transition-property: opacity, -moz-transform;
69+
-moz-transition-duration: 3s, 10s;
70+
-ms-transition-property: opacity, -ms-transform;
71+
-ms-transition-duration: 3s, 10s;
72+
-o-transition-property: opacity, -o-transform;
73+
-o-transition-duration: 3s, 10s;
74+
transition-property: opacity, transform;
75+
transition-duration: 3s, 10s;
76+
}
77+
78+
.brp-slideshow img {
79+
-webkit-transform-origin: bottom left;
80+
-moz-transform-origin: bottom left;
81+
-ms-transform-origin: bottom left;
82+
-o-transform-origin: bottom left;
83+
transform-origin: bottom left;
84+
}
85+
86+
.brp-slideshow :nth-child(2n + 1) {
87+
-webkit-transform-origin: top right;
88+
-moz-transform-origin: top right;
89+
-ms-transform-origin: top right;
90+
-o-transform-origin: top right;
91+
transform-origin: top right;
92+
}
93+
94+
.brp-slideshow :nth-child(3n + 1) {
95+
-webkit-transform-origin: top left;
96+
-moz-transform-origin: top left;
97+
-ms-transform-origin: top left;
98+
-o-transform-origin: top left;
99+
transform-origin: top left;
100+
}
101+
102+
.brp-slideshow :nth-child(4n + 1) {
103+
-webkit-transform-origin: bottom right;
104+
-moz-transform-origin: bottom right;
105+
-ms-transform-origin: bottom right;
106+
-o-transform-origin: bottom right;
107+
transform-origin: bottom right;
108+
}
109+
110+
.brp-slideshow .fx:first-child + img ~ img {
111+
z-index: -1;
112+
}
113+
114+
.brp-slideshow .fx {
115+
opacity: 1;
116+
-webkit-transform: scale(1.1);
117+
-moz-transform: scale(1.1);
118+
-ms-transform: scale(1.1);
119+
-o-transform: scale(1.1);
120+
transform: scale(1.1);
121+
}
122+
123+
.brp-overlay {
124+
position: absolute;
125+
top: 50%;
126+
left: 10%;
127+
transform: translateY(-50%);
128+
z-index: 9999;
129+
background: rgba(0, 0, 0, 0.6);
130+
backdrop-filter: blur(8px);
131+
width: 100%;
132+
max-width: 550px;
133+
border-radius: 10px;
134+
padding: 50px;
135+
display: flex;
136+
align-items: center;
137+
flex-direction: column;
138+
color: white;
139+
text-align: center;
140+
}
141+
142+
.brp-logo {
143+
width: 120px;
144+
margin-bottom: 25px;
145+
}
146+
147+
.brp-header {
148+
font-size: 35px;
149+
line-height: 40px;
150+
}
151+
152+
.brp-desc {
153+
font-size: 16px;
154+
line-height: 30px;
155+
text-align: center;
156+
color: #ddd;
157+
}
158+
159+
.brp-discord {
160+
font-size: 18px;
161+
line-height: 30px;
162+
margin-top: 40px;
163+
font-weight: 600;
164+
}
165+
166+
.brp-discord img {
167+
vertical-align: middle;
168+
width: 25px;
169+
margin-right: 5px;
170+
}
171+
172+
.brp-discord span,
173+
.brp-discord a {
174+
vertical-align: middle;
175+
color: #5865f2;
176+
}
177+
178+
.brp-discord span {
179+
margin: 0 5px;
180+
}
181+
182+
.brp-discord .copy-discord-link {
183+
width: 20px;
184+
height: 20px;
185+
margin-left: 5px;
186+
}
187+
188+
.brp-loading {
189+
width: 90%;
190+
display: flex;
191+
align-items: center;
192+
margin: 40px 0;
193+
}
194+
195+
.brp-loading .loading-bar {
196+
width: 100%;
197+
height: 20px;
198+
background: rgba(0, 0, 0, 0.4);
199+
border-radius: 15px;
200+
margin-right: 25px;
201+
padding: 4px;
202+
}
203+
204+
.brp-loading .loading-bar-inner {
205+
transition: 0.2s ease-in-out;
206+
width: 0%;
207+
height: 12px;
208+
border-radius: 10px;
209+
background: white;
210+
}
211+
212+
.brp-loading .loading-amount {
213+
width: 60px;
214+
text-align: center;
215+
}
216+
217+
.brp-audio-icon {
218+
width: 50px;
219+
height: 50px;
220+
position: absolute;
221+
top: 30px;
222+
right: 30px;
223+
z-index: 99999;
224+
}

Diff for: ‎assets/img/brp-logo.png

216 KB
Loading

Diff for: ‎assets/img/copy.svg

+1
Loading

Diff for: ‎assets/img/cursor.png

2.29 KB
Loading

Diff for: ‎assets/img/discord.png

187 KB
Loading

Diff for: ‎assets/img/ss-image-1.jpg

221 KB
Loading

Diff for: ‎assets/img/ss-image-2.jpg

530 KB
Loading

Diff for: ‎assets/img/ss-image-3.jpg

386 KB
Loading

Diff for: ‎assets/img/ss-image-4.jpg

155 KB
Loading

Diff for: ‎assets/img/ss-image-5.jpg

173 KB
Loading

Diff for: ‎assets/img/volume-2.svg

+1
Loading

Diff for: ‎assets/img/volume-x.svg

+1
Loading

Diff for: ‎assets/js/main.js

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
let audioMuted = false;
2+
3+
function copyDiscordLink() {
4+
navigator.clipboard.writeText("https://discord.gg/KGQF6f3GsA");
5+
}
6+
7+
function muteAudio() {
8+
const btn = document.querySelector(".brp-audio-icon");
9+
const vid = document.querySelector(".brp-music");
10+
11+
vid.volume = audioMuted ? 0.025 : 0;
12+
btn.src = `assets/img/${audioMuted ? "volume-x" : "volume-2"}.svg`;
13+
14+
audioMuted = !audioMuted;
15+
}
16+
17+
function main() {
18+
// Cursor
19+
window.addEventListener("mousemove", (e) => {
20+
const mouse = document.querySelector(".brp-cursor");
21+
mouse.style.top = `${e.pageY}px`;
22+
mouse.style.left = `${e.pageX}px`;
23+
});
24+
25+
// Slideshow
26+
document.querySelector(".brp-slideshow").getElementsByTagName("img")[0].className = "fx";
27+
28+
let images = document.querySelector(".brp-slideshow").getElementsByTagName("img"),
29+
numberOfImages = images.length,
30+
i = 1;
31+
32+
const kenBurns = () => {
33+
if (i == numberOfImages) {
34+
i = 0;
35+
}
36+
images[i].className = "fx";
37+
38+
// we can't remove the class from the previous element or we'd get a bouncing effect so we clean up the one before last
39+
// (there must be a smarter way to do this though)
40+
if (i === 0) {
41+
images[numberOfImages - 2].className = "";
42+
}
43+
if (i === 1) {
44+
images[numberOfImages - 1].className = "";
45+
}
46+
if (i > 1) {
47+
images[i - 2].className = "";
48+
}
49+
i++;
50+
};
51+
52+
window.setInterval(kenBurns, 7000);
53+
54+
// Loader
55+
const loader = document.querySelector(".loading-bar-inner");
56+
const loaderIndicator = document.querySelector(".loading-amount");
57+
58+
window.addEventListener("message", (e) => {
59+
if (e.data.eventName === "loadProgress") {
60+
const loaded = parseInt(e.data.loadFraction * 100);
61+
loader.style.width = `${loaded}%`;
62+
loaderIndicator.innerHTML = `${loaded}%`;
63+
}
64+
});
65+
66+
// Video
67+
const vid = document.querySelector(".brp-music");
68+
vid.volume = 0.025;
69+
}
70+
71+
main();

Diff for: ‎fxmanifest.lua

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
fx_version 'cerulean'
2+
game 'gta5'
3+
4+
description 'The world\'s greatest loading screen'
5+
version '1.0'
6+
author 'JG Scripts'
7+
8+
files {'*.html', 'assets/**/*.*', 'assets/**/**/*.*'}
9+
10+
loadscreen 'index.html'
11+
12+
lua54 'yes'

Diff for: ‎index.html

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Britannia Roleplay</title>
8+
<link rel="stylesheet" href="assets/css/style.css" />
9+
</head>
10+
<body class="brp-background">
11+
<img src="assets/img/cursor.png" class="brp-cursor" />
12+
<img src="assets/img/volume-x.svg" class="brp-audio-icon" onclick="muteAudio()" />
13+
14+
<audio class="brp-music" loop autoplay>
15+
<source src="assets/audio/rule-britannia.mp3" type="audio/mp3" />
16+
</audio>
17+
18+
<div class="brp-slideshow">
19+
<img src="assets/img/ss-image-1.jpg" />
20+
<img src="assets/img/ss-image-2.jpg" />
21+
<img src="assets/img/ss-image-3.jpg" />
22+
<img src="assets/img/ss-image-4.jpg" />
23+
<img src="assets/img/ss-image-5.jpg" />
24+
</div>
25+
26+
<div class="brp-overlay">
27+
<img src="assets/img/brp-logo.png" alt="Britannia Roleplay" class="brp-logo" />
28+
29+
<h1 class="brp-header">Britannia Roleplay</h1>
30+
31+
<div class="brp-loading">
32+
<div class="loading-bar">
33+
<div class="loading-bar-inner"></div>
34+
</div>
35+
<div class="loading-amount">0%</div>
36+
</div>
37+
38+
<p class="brp-desc">
39+
BRP was created after years of the founder(s) spending their time playing servers that were
40+
Unrealistic, poorly run, abusive admins, unfair punishments and simply BORING amongst many
41+
other things. We decided to join together and make the perfect server for all where everyone
42+
is striving for good quality roleplay at all times. We achieve this by having a friendly and
43+
supporting community, A helpful and unbiased staff team and constant updates to keep the
44+
server fully packed with the latest and most interesting things for all.
45+
</p>
46+
47+
<div class="brp-discord">
48+
<img src="assets/img/discord.png" alt="Discord" /><span>Discord</span>
49+
<a href="https://discord.gg/KGQF6f3GsA">discord.gg/KGQF6f3GsA</a>
50+
51+
<div class="brp-tooltip">
52+
<img
53+
src="assets/img/copy.svg"
54+
alt="Copy link"
55+
class="copy-discord-link"
56+
onClick="copyDiscordLink()"
57+
/>
58+
<span class="brp-tooltip-text">Copy discord Link</span>
59+
</div>
60+
</div>
61+
</div>
62+
63+
<script src="assets/js/main.js" defer></script>
64+
</body>
65+
</html>

0 commit comments

Comments
 (0)