Initial commit

HTML/FiveM/.idea/.gitignore

@@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/

HTML/FiveM/.idea/FiveM.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

HTML/FiveM/.idea/discord.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="DiscordProjectSettings">
+    <option name="show" value="PROJECT_FILES" />
+    <option name="description" value="" />
+  </component>
+</project>

HTML/FiveM/.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,31 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myValues">
+        <value>
+          <list size="1">
+            <item index="0" class="java.lang.String" itemvalue="component" />
+          </list>
+        </value>
+      </option>
+      <option name="myCustomValuesEnabled" value="true" />
+    </inspection_tool>
+    <inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myValues">
+        <value>
+          <list size="7">
+            <item index="0" class="java.lang.String" itemvalue="nobr" />
+            <item index="1" class="java.lang.String" itemvalue="noembed" />
+            <item index="2" class="java.lang.String" itemvalue="comment" />
+            <item index="3" class="java.lang.String" itemvalue="noscript" />
+            <item index="4" class="java.lang.String" itemvalue="embed" />
+            <item index="5" class="java.lang.String" itemvalue="script" />
+            <item index="6" class="java.lang.String" itemvalue="seciton" />
+          </list>
+        </value>
+      </option>
+      <option name="myCustomValuesEnabled" value="true" />
+    </inspection_tool>
+  </profile>
+</component>

HTML/FiveM/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/FiveM.iml" filepath="$PROJECT_DIR$/.idea/FiveM.iml" />
+    </modules>
+  </component>
+</project>

HTML/FiveM/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$/../.." vcs="Git" />
+  </component>
+</project>

HTML/FiveM/assets/components/footer/index.html

@@ -0,0 +1,25 @@
+<link rel="stylesheet" type="text/css" href="/assets/components/footer/style.css">
+
+<footer class="footer">
+    <div class="footer_buttons">
+        <input type="button" value="Startseite" id="https://princep.de/">
+        <input type="button" value="Regeln" id="https://princep.de/rules">
+        <input type="button" value="Autos" id="https://princep.de/cars">
+        <input type="button" value="Team" id="https://princep.de/team">
+    </div>
+    <div class="footer_content">
+        <div class="footer_info">
+            <h1>Was ist Princep</h1>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid dolores dolorum earum error facilis, ipsum officiis pariatur quos sequi tenetur. Beatae cupiditate deleniti ea error ex inventore iure, quod veniam!
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium exercitationem ipsam magni necessitatibus nesciunt nihil non voluptas voluptatum! Animi aperiam commodi dignissimos eveniet fugiat optio quis ratione reiciendis sed sunt.
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias architecto, assumenda consequatur enim perferendis quisquam repudiandae! A deleniti eius error itaque laborum libero, nobis perferendis quaerat repellendus repudiandae ut vel!
+            </p>
+        </div>
+        <div class="footer_links">
+            <a href="https://discord.com/invite/6rMgNTa5" target="_blank" rel="noopener noreferrer">Discord</a><br>
+            <a href="https://cfx.re/join/dyklgj" target="_blank" rel="noopener noreferrer">Zum Server verbinden</a><br>
+            <a href="ts3server://princep.de:9987">Teamspeak</a>
+        </div>
+    </div>
+</footer>

HTML/FiveM/assets/components/footer/script.ts

@@ -0,0 +1,6 @@
+const footer_buttons = document.getElementsByClassName("footer_buttons")[0].children as HTMLCollectionOf<HTMLInputElement>;
+for (let button of footer_buttons) {
+    button.onclick = () => {
+        location.href = button.id;
+    }
+}

HTML/FiveM/assets/components/footer/style.css

@@ -0,0 +1,61 @@
+.footer {
+    width: 100%;
+    height: 200px;
+    background-color: var(--darker);
+    color: var(--light);
+    overflow: hidden;
+}
+
+.footer_buttons {
+    width: 100%;
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+}
+
+.footer_buttons input {
+    width: 150px;
+    height: 40px;
+    margin: 5px 20px;
+    color: var(--light);
+    background: none;
+    border: 2px var(--light) solid;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 15px;
+    transition: 200ms;
+}
+
+.footer_buttons input:hover {
+    background: var(--light);
+    color: var(--dark);
+}
+
+.footer_content {
+    width: 100%;
+    height: 140px;
+}
+
+.footer_info {
+    float: left;
+    height: 100%;
+    width: 80%;
+    padding: 10px;
+    overflow: hidden;
+}
+
+.footer_links {
+    float: right;
+    height: 100%;
+    width: 20%;
+}
+
+.footer_links a {
+    text-align: center;
+    text-decoration: none;
+    color: inherit;
+    margin: auto;
+    display: block;
+    cursor: pointer;
+}

HTML/FiveM/assets/components/navbar/index.html

@@ -0,0 +1,13 @@
+<link rel="stylesheet" type="text/css" href="/assets/components/navbar/style.css">
+
+<nav class="navigation unselectable">
+    <a href="/" class="navigation_name">PrincepRP</a>
+    <span id="currentSite"></span>
+    <section>
+        <input class="navigation_button" type="button" value="Regeln" id="redirect_rules">
+        <input class="navigation_button" type="button" value="Autos" id="redirect_cars">
+        <input class="navigation_button" type="button" value="Team" id="redirect_team">
+    </section>
+</nav>
+
+<section class="navigation_spacer"></section>

HTML/FiveM/assets/components/navbar/script.ts

@@ -0,0 +1,23 @@
+const title = document.getElementById("currentSite") as HTMLSpanElement;
+const site = fivem.getCurrentSite();
+switch (site) {
+    case "rules":
+        title.innerText = "Regeln";
+        break;
+    case "cars":
+        title.innerText = "Autos";
+        break;
+    case "team":
+        title.innerText = "Team";
+        break;
+    default:
+        title.innerText = "Startseite";
+        break;
+}
+
+const header_buttons = document.getElementsByClassName("navigation_button") as HTMLCollectionOf<HTMLInputElement>;
+for (let button of header_buttons) {
+    button.onclick = () => {
+        location.href = fivem.hostname + button.id.replace("redirect_", "");
+    }
+}

HTML/FiveM/assets/components/navbar/style.css

@@ -0,0 +1,98 @@
+.navigation {
+    width: 100vw;
+    height: 60px;
+    position: fixed;
+    background: var(--gradient);
+    background-size: 800% 800%;
+    -webkit-animation: BackgroundAnimation 100s ease infinite;
+    -moz-animation: BackgroundAnimation 100s ease infinite;
+    animation: BackgroundAnimation 100s ease infinite;
+    z-index: 10;
+}
+
+@-webkit-keyframes BackgroundAnimation {
+    0% {
+        background-position: 0 50%
+    }
+    50% {
+        background-position: 100% 50%
+    }
+    100% {
+        background-position: 0% 50%
+    }
+}
+@-moz-keyframes BackgroundAnimation {
+    0% {
+        background-position: 0 50%
+    }
+    50% {
+        background-position: 100% 50%
+    }
+    100% {
+        background-position: 0 50%
+    }
+}
+@keyframes BackgroundAnimation {
+    0% {
+        background-position: 0 50%
+    }
+    50% {
+        background-position: 100% 50%
+    }
+    100% {
+        background-position: 0 50%
+    }
+}
+
+.navigation_name {
+    position: absolute;
+    top: 50%;
+    left: 10px;
+    transform: translate(0, -50%);
+    color: var(--light);
+    font-size: 20px;
+    text-decoration: none;
+}
+
+.navigation_name:hover {
+    cursor: pointer;
+}
+
+#currentSite {
+    position: absolute;
+    font-size: 30px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: var(--light);
+}
+
+.navigation section {
+    position: absolute;
+    width: max-content;
+    top: 50%;
+    left: 100%;
+    transform: translate(-110%, -50%);
+}
+
+.navigation_button {
+    margin: 5px;
+    width: 100px;
+    height: 30px;
+    background: none;
+    border: 2px solid var(--light);
+    border-radius: 10px;
+    color: var(--light);
+    transition: 200ms;
+}
+
+.navigation_button:hover {
+    background: var(--light);
+    color: var(--dark);
+    cursor: pointer;
+}
+
+.navigation_spacer {
+    width: 100vw;
+    height: 60px;
+}

HTML/FiveM/index.php

@@ -0,0 +1,148 @@
+<html lang="de">
+<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">
+    <meta property="og:url" content="https://princep.de/">
+    <meta property="og:title" content="PrincepRP - Startseite">
+    <meta property="og:description" content="[GER] PrincepRP | 🎓Beta-Release🎓 | 🔐Soft-Allowlist🔐 | 🎙Ingame Voice🎙 | 👥Multi-Char👥 | 💸Startgeld: 10k💸 |🚗Echte Automarken🚗">
+    <meta property="og:image" content="https://princep.de/assets/img/favicon.png">
+    <link rel="stylesheet" type="text/css" href="styles.css">
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <link rel="icon" href="/assets/img/favicon.png">
+    <script src="js/main.js" defer></script>
+    <script src="js/script.js" defer></script>
+    <title>PrincepRP - Startseite</title>
+</head>
+<body>
+<section component="navbar"></section>
+
+<section id="serverInfo" class="unselectable">
+    <span id="players"></span>
+    <a id="servername" href="https://cfx.re/join/dyklgj" target="_blank" rel="noopener noreferrer"></a>
+    <span id="serverStatus"></span>
+</section>
+
+<section id="whatIsPrincep">
+    <h1>Was ist Princep</h1>
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid dolores dolorum earum error facilis, ipsum officiis pariatur quos sequi tenetur. Beatae cupiditate deleniti ea error ex inventore iure, quod veniam!
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium exercitationem ipsam magni necessitatibus nesciunt nihil non voluptas voluptatum! Animi aperiam commodi dignissimos eveniet fugiat optio quis ratione reiciendis sed sunt.
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias architecto, assumenda consequatur enim perferendis quisquam repudiandae! A deleniti eius error itaque laborum libero, nobis perferendis quaerat repellendus repudiandae ut vel!
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aspernatur, culpa cumque distinctio, eaque harum hic incidunt natus necessitatibus quae quibusdam soluta ut. Alias, odio placeat possimus ratione tenetur voluptas?
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eius laudantium, provident quia repudiandae veniam! Aspernatur, atque dignissimos ea eaque eum excepturi harum natus nobis quibusdam reprehenderit temporibus voluptate voluptates!
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci amet animi atque debitis dicta distinctio illum itaque neque, nulla odio quae qui quo recusandae rerum sapiente tempore voluptas voluptatem?
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquam exercitationem fugit ipsum libero quaerat! Blanditiis cumque earum nulla quis quod, totam vel. Accusantium deleniti illum minima molestias possimus sapiente.
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis consectetur culpa dignissimos eos excepturi hic illum incidunt ipsa nemo, nihil nobis qui recusandae saepe voluptates? Ea officia rem voluptatum.
+    </p>
+</section>
+
+<section id="diashow" class="unselectable">
+    <img class="slides animate" alt="slide-1.jpg" src="assets/img/slide-1.jpg" draggable="false">
+    <img class="slides animate" alt="slide-2.jpg" src="assets/img/slide-2.jpg" draggable="false">
+    <img class="slides animate" alt="slide-3.jpg" src="assets/img/slide-3.jpg" draggable="false">
+    <img class="slides animate" alt="slide-4.jpg" src="assets/img/slide-4.jpg" draggable="false">
+</section>
+
+<section id="jobs" class="unselectable">
+    <div class="jobs">
+        <div>
+            <img src="/assets/img/jobs/police.png" alt="icon">
+            <h1>Polizei</h1>
+            <span>Gehe auf Streife und schütze Zivilisten vor der Kriminalität. Sorge für Gerechtigkeit und verteidige das Gesetz.</span>
+        </div>
+
+        <div>
+            <img src="/assets/img/jobs/medic.png" alt="icon">
+            <h1>Medic</h1>
+            <span>In einer Großstadt passieren viele Unfälle, deshalb ist dieser Job wichtig. Ärztliche Versorgung ist das A und O.</span>
+        </div>
+
+        <div>
+            <img src="/assets/img/jobs/crimelife.png" alt="icon">
+            <h1>Crimelife</h1>
+            <span>Mit illegalen Geschäften lässt sich viel Geld verdienen, doch lass dich nicht von der Polizei erwischen.</span>
+        </div>
+
+        <div>
+            <img src="/assets/img/jobs/legallife.png" alt="icon">
+            <h1>Legallife</h1>
+            <span>Legale Geschäfte sind nicht so profitabel wie illegale, aber du verstöst nicht gegen das Gesetz und hast nichts zu befürchten.</span>
+        </div>
+    </div>
+</section>
+
+<section id="changelogDiscord">
+    <section id="changelog">
+        <h2>Changelog</h2>
+        <br>
+        <ul>
+            <li class="feature">
+                <h1>Beta 0.0.1</h1>
+                <ul class="features">
+                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A delectus dolore excepturi expedita in inventore minus mollitia optio quam quasi quidem recusandae, rem velit? Ab laboriosam laborum modi nobis vero.</li>
+                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A delectus dolore excepturi expedita in inventore minus mollitia optio quam quasi quidem recusandae, rem velit? Ab laboriosam laborum modi nobis vero.</li>
+                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A delectus dolore excepturi expedita in inventore minus mollitia optio quam quasi quidem recusandae, rem velit? Ab laboriosam laborum modi nobis vero.</li>
+                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A delectus dolore excepturi expedita in inventore minus mollitia optio quam quasi quidem recusandae, rem velit? Ab laboriosam laborum modi nobis vero.</li>
+                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A delectus dolore excepturi expedita in inventore minus mollitia optio quam quasi quidem recusandae, rem velit? Ab laboriosam laborum modi nobis vero.</li>
+                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A delectus dolore excepturi expedita in inventore minus mollitia optio quam quasi quidem recusandae, rem velit? Ab laboriosam laborum modi nobis vero.</li>
+                </ul>
+            </li>
+
+            <li class="feature">
+                <h1>Beta 0.0.1</h1>
+                <ul class="features">
+                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A delectus dolore excepturi expedita in inventore minus mollitia optio quam quasi quidem recusandae, rem velit? Ab laboriosam laborum modi nobis vero.</li>
+                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A delectus dolore excepturi expedita in inventore minus mollitia optio quam quasi quidem recusandae, rem velit? Ab laboriosam laborum modi nobis vero.</li>
+                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A delectus dolore excepturi expedita in inventore minus mollitia optio quam quasi quidem recusandae, rem velit? Ab laboriosam laborum modi nobis vero.</li>
+                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A delectus dolore excepturi expedita in inventore minus mollitia optio quam quasi quidem recusandae, rem velit? Ab laboriosam laborum modi nobis vero.</li>
+                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A delectus dolore excepturi expedita in inventore minus mollitia optio quam quasi quidem recusandae, rem velit? Ab laboriosam laborum modi nobis vero.</li>
+                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A delectus dolore excepturi expedita in inventore minus mollitia optio quam quasi quidem recusandae, rem velit? Ab laboriosam laborum modi nobis vero.</li>
+                </ul>
+            </li>
+
+            <li class="feature">
+                <h1>Beta 0.0.1</h1>
+                <ul class="features">
+                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A delectus dolore excepturi expedita in inventore minus mollitia optio quam quasi quidem recusandae, rem velit? Ab laboriosam laborum modi nobis vero.</li>
+                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A delectus dolore excepturi expedita in inventore minus mollitia optio quam quasi quidem recusandae, rem velit? Ab laboriosam laborum modi nobis vero.</li>
+                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A delectus dolore excepturi expedita in inventore minus mollitia optio quam quasi quidem recusandae, rem velit? Ab laboriosam laborum modi nobis vero.</li>
+                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A delectus dolore excepturi expedita in inventore minus mollitia optio quam quasi quidem recusandae, rem velit? Ab laboriosam laborum modi nobis vero.</li>
+                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A delectus dolore excepturi expedita in inventore minus mollitia optio quam quasi quidem recusandae, rem velit? Ab laboriosam laborum modi nobis vero.</li>
+                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A delectus dolore excepturi expedita in inventore minus mollitia optio quam quasi quidem recusandae, rem velit? Ab laboriosam laborum modi nobis vero.</li>
+                </ul>
+            </li>
+
+            <li class="feature">
+                <h1>Beta 0.0.1</h1>
+                <ul class="features">
+                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A delectus dolore excepturi expedita in inventore minus mollitia optio quam quasi quidem recusandae, rem velit? Ab laboriosam laborum modi nobis vero.</li>
+                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A delectus dolore excepturi expedita in inventore minus mollitia optio quam quasi quidem recusandae, rem velit? Ab laboriosam laborum modi nobis vero.</li>
+                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A delectus dolore excepturi expedita in inventore minus mollitia optio quam quasi quidem recusandae, rem velit? Ab laboriosam laborum modi nobis vero.</li>
+                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A delectus dolore excepturi expedita in inventore minus mollitia optio quam quasi quidem recusandae, rem velit? Ab laboriosam laborum modi nobis vero.</li>
+                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A delectus dolore excepturi expedita in inventore minus mollitia optio quam quasi quidem recusandae, rem velit? Ab laboriosam laborum modi nobis vero.</li>
+                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A delectus dolore excepturi expedita in inventore minus mollitia optio quam quasi quidem recusandae, rem velit? Ab laboriosam laborum modi nobis vero.</li>
+                </ul>
+            </li>
+
+            <li class="feature">
+                <h1>Beta 0.0.1</h1>
+                <ul class="features">
+                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A delectus dolore excepturi expedita in inventore minus mollitia optio quam quasi quidem recusandae, rem velit? Ab laboriosam laborum modi nobis vero.</li>
+                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A delectus dolore excepturi expedita in inventore minus mollitia optio quam quasi quidem recusandae, rem velit? Ab laboriosam laborum modi nobis vero.</li>
+                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A delectus dolore excepturi expedita in inventore minus mollitia optio quam quasi quidem recusandae, rem velit? Ab laboriosam laborum modi nobis vero.</li>
+                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A delectus dolore excepturi expedita in inventore minus mollitia optio quam quasi quidem recusandae, rem velit? Ab laboriosam laborum modi nobis vero.</li>
+                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A delectus dolore excepturi expedita in inventore minus mollitia optio quam quasi quidem recusandae, rem velit? Ab laboriosam laborum modi nobis vero.</li>
+                    <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A delectus dolore excepturi expedita in inventore minus mollitia optio quam quasi quidem recusandae, rem velit? Ab laboriosam laborum modi nobis vero.</li>
+                </ul>
+            </li>
+        </ul>
+    </section>
+    <section id="discord">
+        <iframe src="https://discord.com/widget?id=942183216759078963&theme=dark" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>
+    </section>
+</section>
+
+<section component="footer"></section>
+</body>
+</html>

HTML/FiveM/js/assets/components/footer/script.js

@@ -0,0 +1,7 @@
+const footer_buttons = document.getElementsByClassName("footer_buttons")[0].children;
+for (let button of footer_buttons) {
+    button.onclick = () => {
+        location.href = button.id;
+    };
+}
+//# sourceMappingURL=script.js.map

HTML/FiveM/js/assets/components/footer/script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"script.js","sourceRoot":"","sources":["../../../../assets/components/footer/script.ts"],"names":[],"mappings":"AAAA,MAAM,cAAc,GAAG,QAAQ,CAAC,sBAAsB,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,QAA8C,CAAC;AAC3H,KAAK,IAAI,MAAM,IAAI,cAAc,EAAE;IAC/B,MAAM,CAAC,OAAO,GAAG,GAAG,EAAE;QAClB,QAAQ,CAAC,IAAI,GAAG,MAAM,CAAC,EAAE,CAAC;IAC9B,CAAC,CAAA;CACJ"}

HTML/FiveM/js/assets/components/navbar/script.js

@@ -0,0 +1,23 @@
+const title = document.getElementById("currentSite");
+const site = fivem.getCurrentSite();
+switch (site) {
+    case "rules":
+        title.innerText = "Regeln";
+        break;
+    case "cars":
+        title.innerText = "Autos";
+        break;
+    case "team":
+        title.innerText = "Team";
+        break;
+    default:
+        title.innerText = "Startseite";
+        break;
+}
+const header_buttons = document.getElementsByClassName("navigation_button");
+for (let button of header_buttons) {
+    button.onclick = () => {
+        location.href = fivem.hostname + button.id.replace("redirect_", "");
+    };
+}
+//# sourceMappingURL=script.js.map

HTML/FiveM/js/assets/components/navbar/script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"script.js","sourceRoot":"","sources":["../../../../assets/components/navbar/script.ts"],"names":[],"mappings":"AAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,cAAc,CAAC,aAAa,CAAoB,CAAC;AACxE,MAAM,IAAI,GAAG,KAAK,CAAC,cAAc,EAAE,CAAC;AACpC,QAAQ,IAAI,EAAE;IACV,KAAK,OAAO;QACR,KAAK,CAAC,SAAS,GAAG,QAAQ,CAAC;QAC3B,MAAM;IACV,KAAK,MAAM;QACP,KAAK,CAAC,SAAS,GAAG,OAAO,CAAC;QAC1B,MAAM;IACV,KAAK,MAAM;QACP,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;QACzB,MAAM;IACV;QACI,KAAK,CAAC,SAAS,GAAG,YAAY,CAAC;QAC/B,MAAM;CACb;AAED,MAAM,cAAc,GAAG,QAAQ,CAAC,sBAAsB,CAAC,mBAAmB,CAAuC,CAAC;AAClH,KAAK,IAAI,MAAM,IAAI,cAAc,EAAE;IAC/B,MAAM,CAAC,OAAO,GAAG,GAAG,EAAE;QAClB,QAAQ,CAAC,IAAI,GAAG,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAC,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;IACxE,CAAC,CAAA;CACJ"}

HTML/FiveM/js/main.js

@@ -0,0 +1,89 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+class FiveM {
+    constructor() {
+        this.hostname = "https://princep.de/";
+    }
+    onInit() {
+        this.loadComponents();
+    }
+    loadComponents() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const components = document.querySelectorAll('[component]');
+            for (let i = 0; i < components.length; i++) {
+                const element = components[i];
+                const component = element.getAttribute("component");
+                element.innerHTML = yield this.sendHttpRequest(this.hostname + "assets/components/" + component + "/index.html");
+                try {
+                    const script = yield this.sendHttpRequest(this.hostname + "js/assets/components/" + component + "/script.js");
+                    const scriptElement = document.createElement("script");
+                    scriptElement.type = "text/javascript";
+                    scriptElement.appendChild(document.createTextNode(script));
+                    element.appendChild(scriptElement);
+                }
+                catch (e) { }
+            }
+        });
+    }
+    sendHttpRequest(url) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const response = yield fetch(url);
+            return yield response.text();
+        });
+    }
+    getCurrentSite() {
+        return location.href.replace(this.hostname, "");
+    }
+    getPlayerInfo() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.getJsonFromUrl("https://api.princep.de/players.json");
+        });
+    }
+    getServerInfo() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.getJsonFromUrl("https://api.princep.de/dynamic.json");
+        });
+    }
+    getExtendedServerInfo() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return yield this.getJsonFromUrl("https://api.princep.de/info.json");
+        });
+    }
+    getJsonFromUrl(url) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise(((resolve, reject) => {
+                const request = new XMLHttpRequest();
+                request.open("GET", url);
+                request.onreadystatechange = () => {
+                    if (request.status === 200) {
+                        try {
+                            resolve(JSON.parse(request.response));
+                        }
+                        catch (e) { }
+                    }
+                    else {
+                        reject({
+                            status: request.status,
+                            statusText: request.statusText
+                        });
+                    }
+                };
+                request.onerror = () => reject({
+                    status: request.status,
+                    statusText: request.statusText
+                });
+                request.send();
+            }));
+        });
+    }
+}
+const fivem = new FiveM();
+fivem.onInit();
+//# sourceMappingURL=main.js.map

HTML/FiveM/js/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","sourceRoot":"","sources":["../main.ts"],"names":[],"mappings":"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"}

HTML/FiveM/js/script.js

@@ -0,0 +1,44 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+let slideCount = 0;
+const simpleSlides = function () {
+    let i;
+    const slides = document.querySelectorAll(".slides");
+    for (i = 0; i < slides.length; i++) {
+        slides[i].setAttribute("style", "display:none");
+    }
+    slideCount++;
+    if (slideCount > slides.length) {
+        slideCount = 1;
+    }
+    slides[slideCount - 1].setAttribute("style", "display:block");
+    setTimeout(simpleSlides, 8000);
+};
+const init = () => __awaiter(this, void 0, void 0, function* () {
+    const players = document.getElementById("players");
+    const serverName = document.getElementById("servername");
+    const status = document.getElementById("serverStatus");
+    try {
+        const serverInfo = yield fivem.getServerInfo();
+        players.innerText = `Spieler: ${serverInfo.clients} / ${serverInfo.sv_maxclients}`;
+        serverName.innerText = serverInfo.hostname;
+        status.innerHTML = "Serverstatus: <span style='color: var(--green)'>Online</span>";
+        localStorage.setItem("hostname", serverInfo.hostname);
+    }
+    catch (e) {
+        players.innerText = "Spieler: 0 / 0";
+        serverName.innerText = localStorage.getItem("hostname") === null ? "[GER] PrincepRP | 🎓Beta-Release🎓 | 🔐Soft-Allowlist🔐 | 🎙Ingame Voice🎙 | 👥Multi-Char👥 | 💸Startgeld: 10k💸 |🚗Echte Automarken🚗" : localStorage.getItem("hostname");
+        status.innerHTML = "Serverstatus: <span style='color: var(--red)'>Offline</span>";
+    }
+});
+init();
+simpleSlides();
+setInterval(init, 30000);
+//# sourceMappingURL=script.js.map

HTML/FiveM/js/script.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"script.js","sourceRoot":"","sources":["../script.ts"],"names":[],"mappings":";;;;;;;;;AAAA,IAAI,UAAU,GAAG,CAAC,CAAC;AACnB,MAAM,YAAY,GAAG;IACjB,IAAI,CAAC,CAAC;IACN,MAAM,MAAM,GAAG,QAAQ,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;IACpD,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QAChC,MAAM,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,EAAC,cAAc,CAAC,CAAC;KAClD;IACD,UAAU,EAAE,CAAC;IACb,IAAI,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE;QAAE,UAAU,GAAG,CAAC,CAAC;KAAE;IACnD,MAAM,CAAC,UAAU,GAAC,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,EAAC,eAAe,CAAC,CAAC;IAC3D,UAAU,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;AACnC,CAAC,CAAA;AAED,MAAM,IAAI,GAAG,GAAS,EAAE;IACpB,MAAM,OAAO,GAAG,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAoB,CAAC;IACtE,MAAM,UAAU,GAAG,QAAQ,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC;IACzD,MAAM,MAAM,GAAG,QAAQ,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;IACvD,IAAI;QACA,MAAM,UAAU,GAAG,MAAM,KAAK,CAAC,aAAa,EAAE,CAAC;QAE/C,OAAO,CAAC,SAAS,GAAG,YAAY,UAAU,CAAC,OAAO,MAAM,UAAU,CAAC,aAAa,EAAE,CAAC;QAEnF,UAAU,CAAC,SAAS,GAAG,UAAU,CAAC,QAAQ,CAAC;QAE3C,MAAM,CAAC,SAAS,GAAG,+DAA+D,CAAA;QAElF,YAAY,CAAC,OAAO,CAAC,UAAU,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;KACzD;IAAC,OAAO,CAAC,EAAE;QACR,OAAO,CAAC,SAAS,GAAG,gBAAgB,CAAC;QACrC,UAAU,CAAC,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,wIAAwI,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;QAC/O,MAAM,CAAC,SAAS,GAAG,8DAA8D,CAAA;KACpF;AACL,CAAC,CAAA,CAAA;AACD,IAAI,EAAE,CAAC;AACP,YAAY,EAAE,CAAC;AACf,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC"}

HTML/FiveM/main.ts

@@ -0,0 +1,101 @@
+interface Component {
+    onInit();
+}
+
+interface Player {
+    endpoint: string;
+    id: number;
+    identifiers: string[];
+    name: string;
+    ping: number;
+}
+
+interface ServerInfo {
+    clients: number;
+    gametype: string;
+    hostname: string;
+    iv: string;
+    mapname: string;
+    sv_maxclients: string;
+}
+
+interface ExtendedInfo {
+    enhancedHostSupport: boolean;
+    icon: string;
+    resources: string[];
+    server: string;
+    vars: any;
+    version: number;
+}
+
+class FiveM {
+    public readonly hostname = "https://princep.de/";
+
+    public onInit() {
+        this.loadComponents();
+    }
+
+    private async loadComponents() {
+        const components = document.querySelectorAll('[component]');
+        for (let i = 0; i < components.length; i++) {
+            const element = components[i] as HTMLElement;
+            const component = element.getAttribute("component");
+            element.innerHTML = await this.sendHttpRequest(this.hostname + "assets/components/" + component + "/index.html");
+            try {
+                const script = await this.sendHttpRequest(this.hostname + "js/assets/components/" + component + "/script.js");
+                const scriptElement = document.createElement("script") as HTMLScriptElement;
+                scriptElement.type = "text/javascript";
+                scriptElement.appendChild(document.createTextNode(script));
+                element.appendChild(scriptElement);
+            }catch (e) {}
+        }
+    }
+
+    public async sendHttpRequest(url: string): Promise<string> {
+        const response = await fetch(url);
+        return await response.text();
+    }
+
+    public getCurrentSite(): string {
+        return location.href.replace(this.hostname, "");
+    }
+
+    public async getPlayerInfo(): Promise<Player[]> {
+        return await this.getJsonFromUrl("https://api.princep.de/players.json");
+    }
+
+    public async getServerInfo(): Promise<ServerInfo> {
+        return await this.getJsonFromUrl("https://api.princep.de/dynamic.json");
+    }
+
+    public async getExtendedServerInfo(): Promise<ExtendedInfo> {
+        return await this.getJsonFromUrl("https://api.princep.de/info.json");
+    }
+
+    private async getJsonFromUrl<T>(url: string): Promise<T> {
+        return new Promise<T>(((resolve, reject) => {
+            const request = new XMLHttpRequest();
+            request.open("GET", url);
+            request.onreadystatechange = () => {
+                if (request.status === 200) {
+                    try {
+                        resolve(JSON.parse(request.response) as T);
+                    }catch (e) {}
+                }else {
+                    reject({
+                        status: request.status,
+                        statusText: request.statusText
+                    });
+                }
+            };
+            request.onerror = () => reject({
+                status: request.status,
+                statusText: request.statusText
+            });
+            request.send();
+        }));
+    }
+}
+
+const fivem: FiveM = new FiveM();
+fivem.onInit();

HTML/FiveM/script.ts

@@ -0,0 +1,36 @@
+let slideCount = 0;
+const simpleSlides = function () {
+    let i;
+    const slides = document.querySelectorAll(".slides");
+    for (i = 0; i < slides.length; i++) {
+        slides[i].setAttribute("style","display:none");
+    }
+    slideCount++;
+    if (slideCount > slides.length) { slideCount = 1; }
+    slides[slideCount-1].setAttribute("style","display:block");
+    setTimeout(simpleSlides, 8000);
+}
+
+const init = async () => {
+    const players = document.getElementById("players") as HTMLSpanElement;
+    const serverName = document.getElementById("servername");
+    const status = document.getElementById("serverStatus");
+    try {
+        const serverInfo = await fivem.getServerInfo();
+
+        players.innerText = `Spieler: ${serverInfo.clients} / ${serverInfo.sv_maxclients}`;
+
+        serverName.innerText = serverInfo.hostname;
+
+        status.innerHTML = "Serverstatus: <span style='color: var(--green)'>Online</span>"
+
+        localStorage.setItem("hostname", serverInfo.hostname);
+    } catch (e) {
+        players.innerText = "Spieler: 0 / 0";
+        serverName.innerText = localStorage.getItem("hostname") === null ? "[GER] PrincepRP | 🎓Beta-Release🎓 | 🔐Soft-Allowlist🔐 | 🎙Ingame Voice🎙 | 👥Multi-Char👥 | 💸Startgeld: 10k💸 |🚗Echte Automarken🚗" : localStorage.getItem("hostname");
+        status.innerHTML = "Serverstatus: <span style='color: var(--red)'>Offline</span>"
+    }
+}
+init();
+simpleSlides();
+setInterval(init, 30000);

HTML/FiveM/style.css

@@ -0,0 +1,209 @@
+#serverInfo {
+    position: relative;
+    height: 30px;
+    margin-bottom: 5px;
+}
+
+#serverInfo span {
+    font-size: 15px;
+    color: var(--light);
+}
+
+#players {
+    position: absolute;
+    top: 50%;
+    left: 5px;
+    transform: translate(0, -50%);
+    width: max-content;
+}
+
+#servername {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: max-content;
+    text-decoration: none;
+    cursor: pointer;
+    color: var(--light);
+}
+
+#serverStatus {
+    position: absolute;
+    top: 50%;
+    left: calc(100% - 20px);
+    transform: translate(-100%, -50%);
+    width: max-content;
+}
+
+#whatIsPrincep {
+    height: max-content;
+    padding: 20px 50px 20px 20px;
+    color: var(--light);
+}
+
+#diashow {
+    height: 1000px;
+    padding: 5px;
+}
+
+.slides {
+    display: none;
+    height: 100%;
+    width: auto;
+    margin: auto;
+}
+
+.animate {
+    position: relative;
+    animation: diashowAnimation 16s;
+}
+
+@keyframes diashowAnimation {
+    0% {
+        left: -500px;
+        opacity: 0;
+    }
+    5% {
+        left: 0;
+        opacity: 1;
+    }
+    45% {
+        left: 0;
+        opacity: 1;
+    }
+    50% {
+        left: 500px;
+        opacity: 0;
+        display: none;
+    }
+    100% {
+        left: 500px;
+        opacity: 0;
+        display: none;
+    }
+}
+
+#jobs {
+    margin-top: 50px;
+    position: relative;
+    height: 500px;
+    color: var(--light);
+}
+
+#jobs h2 {
+    width: 100%;
+    text-align: center;
+}
+
+.jobs {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.jobs div {
+    position: relative;
+    box-sizing: border-box;
+    border: 1px grey solid;
+    width: 300px;
+    height: 200px;
+    transition: 100ms;
+    user-select: none;
+    margin: auto;
+    overflow: visible;
+}
+
+.jobs img {
+    position: absolute;
+    height: 25%;
+    width: auto;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    transition: 500ms ease-in-out;
+    background: var(--dark);
+}
+
+.jobs h1 {
+    position: absolute;
+    text-align: center;
+    text-transform: uppercase;
+    top: 75%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    transition: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    font-size: 20px;
+}
+
+.jobs span {
+    position: absolute;
+    width: 80%;
+    height: max-content;
+    opacity: 0;
+    top: 70%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0, 0);
+    transition: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    font-size: 11px;
+    overflow: hidden;
+}
+
+.jobs div:hover {
+    border-color: var(--red);
+    transform: scale(1.5);
+}
+
+.jobs div:hover img {
+    top: 0;
+}
+
+.jobs div:hover h1 {
+    top: 30%;
+}
+
+.jobs div:hover span {
+    opacity: 100;
+    transform: translate(-50%, -50%) scale(1, 1);
+}
+
+#changelogDiscord {
+    height: 800px;
+    overflow: hidden;
+}
+
+#changelog {
+    float: left;
+    height: 100%;
+    width: calc(100% - 500px);
+    padding: 20px;
+    color: var(--light);
+    overflow-y: scroll;
+}
+
+#changelog h2 {
+    text-decoration: underline;
+}
+
+.feature {
+    margin-bottom: 20px;
+}
+
+.features li {
+    margin-bottom: 5px;
+}
+
+#discord {
+    width: 500px;
+    float: right;
+}
+
+#discord iframe {
+    width: 100%;
+    height: 100%;
+}

HTML/FiveM/styles.css

@@ -0,0 +1,58 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400&display=swap');
+
+:root {
+    --light-blue: #42B1B8;
+    --blue: #045CB4;
+    --dark-blue: #001845;
+    --light-green: #52B788;
+    --red: #f53d3d;
+    --green: #32db64;
+
+    --darker: #161a1c;
+    --dark: #212529;
+    --dark-grey: #495057;
+    --grey: #ADB5BD;
+    --light-grey: #DEE2E6;
+    --light: #F8F9FA;
+
+    --gradient: linear-gradient(263deg, var(--blue), var(--dark-blue), var(--light-blue), var(--light-green), var(--dark) , var(--blue), var(--dark-blue));
+}
+
+* {
+    margin: 0;
+    font-family: 'Montserrat', sans-serif;
+    overflow-x: hidden;
+    box-sizing: border-box;
+}
+
+body {
+    background-color: var(--dark);
+}
+
+.unselectable {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+/* width */
+::-webkit-scrollbar {
+    width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+    background: none;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+    background: var(--dark-grey);
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+    background: var(--grey);
+}

HTML/FiveM/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es6",
+    "sourceMap": true,
+    "outDir": "js",
+  },
+  "exclude": [
+    "node_modules"
+  ]
+}