Initial commit

HTML/AdminPanel/.browserslistrc

@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+#last 1 Chrome version
+#last 1 Firefox version
+#last 2 Edge major versions
+#last 2 Safari major versions
+#last 2 iOS major versions
+#Firefox ESR

HTML/AdminPanel/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

HTML/AdminPanel/.gitignore

@@ -0,0 +1,46 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+# Only exists if Bazel was run
+/bazel-out
+
+# dependencies
+/node_modules
+
+# profiling files
+chrome-profiler-events*.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# misc
+/.angular/cache
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db

HTML/AdminPanel/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}

HTML/AdminPanel/.vscode/launch.json

@@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "pwa-chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}

HTML/AdminPanel/.vscode/tasks.json

@@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}

HTML/AdminPanel/README.md

@@ -0,0 +1,27 @@
+# AdminPanel
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.1.2.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

HTML/AdminPanel/angular.json

@@ -0,0 +1,113 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "AdminPanel": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        },
+        "@schematics/angular:application": {
+          "strict": true
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/admin-panel",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "AdminPanel:build:production"
+            },
+            "development": {
+              "browserTarget": "AdminPanel:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "AdminPanel:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
+              "src/styles.scss"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "AdminPanel"
+}

HTML/AdminPanel/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage/admin-panel'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

HTML/AdminPanel/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "admin-panel",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "~13.1.0",
+    "@angular/cdk": "^13.3.0",
+    "@angular/common": "~13.1.0",
+    "@angular/compiler": "~13.1.0",
+    "@angular/core": "~13.1.0",
+    "@angular/forms": "~13.1.0",
+    "@angular/material": "^13.3.0",
+    "@angular/platform-browser": "~13.1.0",
+    "@angular/platform-browser-dynamic": "~13.1.0",
+    "@angular/router": "~13.1.0",
+    "rxjs": "~7.4.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.11.4"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~13.1.2",
+    "@angular/cli": "~13.1.2",
+    "@angular/compiler-cli": "~13.1.0",
+    "@types/jasmine": "~3.10.0",
+    "@types/node": "^12.11.1",
+    "jasmine-core": "~3.10.0",
+    "karma": "~6.3.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.1.0",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "~1.7.0",
+    "typescript": "~4.5.2"
+  }
+}

HTML/AdminPanel/src/app/app-routing.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

HTML/AdminPanel/src/app/app.component.html

@@ -0,0 +1,58 @@
+<app-navigation></app-navigation>
+
+<div class="sidebar">
+  <div class="sites">
+    <div class="link selected">
+      <mat-icon>dashboard</mat-icon>
+      <span>Dashboard</span>
+    </div>
+
+    <div class="link">
+      <mat-icon>currency_exchange</mat-icon>
+      <span>Exchange</span>
+    </div>
+
+    <div class="link">
+      <mat-icon>account_balance_wallet</mat-icon>
+      <span>Wallet</span>
+    </div>
+
+    <div class="link">
+      <mat-icon>credit_card</mat-icon>
+      <span>Transactions</span>
+    </div>
+
+    <div class="link">
+      <mat-icon>pie_chart</mat-icon>
+      <span>Analytics</span>
+    </div>
+
+    <div class="link">
+      <mat-icon>chat</mat-icon>
+      <span>Messages</span>
+    </div>
+
+    <div class="link">
+      <mat-icon>help_center</mat-icon>
+      <span>Help Center</span>
+    </div>
+
+    <div class="link">
+      <mat-icon>settings</mat-icon>
+      <span>Settings</span>
+    </div>
+  </div>
+
+  <div class="update">
+    <mat-icon>update</mat-icon>
+    <h1>Updates Available</h1>
+    <span>Security Updates <br> General Updates</span>
+    <input type="button" value="Update Now">
+  </div>
+</div>
+
+<main class="content">
+  <div class="overview">
+    <h1>Overview</h1>
+  </div>
+</main>

HTML/AdminPanel/src/app/app.component.scss

@@ -0,0 +1,107 @@
+$background: #f0eff6;
+$selected: #460ccd;
+$text: #929299;
+
+.sidebar {
+  position: fixed;
+  width: 200px;
+  height: calc(100% - 50px);
+  background-color: $background;
+  user-select: none;
+
+  .link {
+    width: 80%;
+    height: 50px;
+    margin: 10px auto;
+    display: flex;
+    color: $text;
+
+    mat-icon {
+      width: 30px;
+      height: 30px;
+      font-size: 30px;
+      margin: 10px;
+    }
+
+    span {
+      align-self: center;
+      justify-self: center;
+    }
+
+    &.selected {
+      background: #fff;
+      color: $selected;
+      border-left: 5px solid $selected;
+    }
+
+    &:hover {
+      cursor: pointer;
+      background: #fff;
+    }
+  }
+
+  .update {
+    top: 100%;
+    left: 5%;
+    transform: translateY(-110%);
+    width: 90%;
+    height: 17%;
+    background-color: #fff;
+    border-radius: 20px;
+    position: absolute;
+
+    mat-icon {
+      margin-top: 5px;
+      width: 100%;
+      height: max-content;
+      line-height: 100%;
+      text-align: center;
+      font-size: 40px;
+    }
+
+    h1 {
+      text-align: center;
+      font-weight: bold;
+      font-size: 17px;
+    }
+
+    span {
+      display: block;
+      width: 100%;
+      text-align: center;
+    }
+
+    input {
+      display: block;
+      margin: 20px auto;
+      width: 80%;
+      height: 30px;
+      background-color: $selected;
+      border: none;
+      border-radius: 8px;
+      color: #fff;
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.content {
+  margin-left: 200px;
+  width: calc(100% - 200px);
+  height: calc(100% - 50px);
+  background-color: $background;
+}
+
+@media screen and (max-width: 750px) {
+  .sidebar {
+    display: none;
+  }
+
+  .content {
+    margin-left: 0;
+    width: 100%;
+  }
+}

HTML/AdminPanel/src/app/app.component.ts

@@ -0,0 +1,29 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent implements OnInit {
+  title = 'AdminPanel';
+
+  ngOnInit(): void {
+    AppComponent.createClickable(".sites");
+  }
+
+  public static createClickable(querySelector: string) {
+    const container = document.querySelector(querySelector) as HTMLDivElement;
+
+    for (let index = 0; index < container.children.length; index++) {
+      const element = container.children[index] as HTMLDivElement;
+
+      element.onclick = () => {
+        for (let i = 0; i < container.children.length; i++)
+          container.children[i].classList.remove("selected");
+
+        element.classList.add("selected");
+      }
+    }
+  }
+}

HTML/AdminPanel/src/app/app.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NavigationComponent } from './navigation/navigation.component';
+import {MatIconModule} from "@angular/material/icon";
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    NavigationComponent
+  ],
+    imports: [
+        BrowserModule,
+        AppRoutingModule,
+        BrowserAnimationsModule,
+        MatIconModule
+    ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

HTML/AdminPanel/src/app/navigation/navigation.component.html

@@ -0,0 +1,22 @@
+<nav>
+  <mat-icon class="expander">menu</mat-icon>
+
+  <img src="assets/images/logo.png" alt="logo" id="logo">
+
+  <div class="search-bar">
+    <mat-icon>search</mat-icon>
+    <input type="text" placeholder="Search">
+  </div>
+
+  <div class="theme">
+    <mat-icon class="dark selected">dark_mode</mat-icon>
+    <mat-icon class="light">light_mode</mat-icon>
+  </div>
+
+  <div class="profile">
+    <img src="assets/images/profile-1.jpg" alt="profile">
+    <span class="name">Leon Hoppe</span>
+    <mat-icon>expand_more</mat-icon>
+  </div>
+</nav>
+<div class="spacer"></div>

HTML/AdminPanel/src/app/navigation/navigation.component.scss

@@ -0,0 +1,154 @@
+$background: #fff;
+$search: #f0eff6;
+$dark: #2c2830;
+$light: #fafeff;
+$icon: #929299;
+
+nav {
+  position: fixed;
+  width: 100%;
+  height: 50px;
+  background-color: $background;
+  padding: 10px;
+  display: flex;
+  overflow: hidden;
+
+  .expander {
+    height: 30px;
+    width: 30px;
+    font-size: 30px;
+    margin-right: 15px;
+    display: none;
+  }
+
+  #logo {
+    height: 30px;
+    width: auto;
+  }
+
+  .search-bar {
+    width: 30%;
+    height: 30px;
+    background-color: $search;
+    border-radius: 5px;
+    margin-left: 10%;
+    position: relative;
+
+    mat-icon {
+      margin: 2px;
+      font-size: 26px;
+      color: $icon;
+    }
+
+    input {
+      position: absolute;
+      width: calc(100% - 30px);
+      height: 100%;
+      left: 30px;
+      top: 0;
+      background: none;
+      border: none;
+      font-size: 15px;
+
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+
+  .theme {
+    width: 50px;
+    height: 25px;
+    background-color: $search;
+    position: absolute;
+    left: 70%;
+    border-radius: 5px;
+    margin-top: 2.5px;
+
+    mat-icon {
+      width: 25px;
+      height: 25px;
+      line-height: 25px;
+      font-size: 15px;
+      text-align: center;
+      display: inline-block;
+      color: $dark;
+      background: none;
+      border-radius: inherit;
+      transition: 200ms;
+
+      &.selected {
+        background-color: $dark;
+        color: $light;
+      }
+
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+
+  .profile {
+    position: absolute;
+    left: 100%;
+    top: 5px;
+    transform: translateX(-110%);
+    width: 170px;
+    height: 40px;
+    display: flex;
+    user-select: none;
+
+    img {
+      width: 30px;
+      height: 30px;
+      margin: 5px;
+      border-radius: 50%;
+    }
+
+    .name {
+      align-self: center;
+      justify-self: center;
+      margin-left: 10px;
+      color: $dark;
+    }
+
+    mat-icon {
+      align-self: center;
+      justify-self: center;
+      margin-left: auto;
+      color: $dark;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  @media screen and (max-width: 750px) {
+    .expander {
+      display: block;
+    }
+
+    .profile {
+      width: 40px;
+
+      .name, mat-icon {
+        display: none;
+      }
+    }
+
+    .theme {
+      left: 85%;
+    }
+
+    .search-bar {
+      width: 50%;
+      margin-left: 5%;
+    }
+  }
+}
+
+.spacer {
+  width: 100%;
+  height: 50px;
+}

HTML/AdminPanel/src/app/navigation/navigation.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+import {AppComponent} from "../app.component";
+
+@Component({
+  selector: 'app-navigation',
+  templateUrl: './navigation.component.html',
+  styleUrls: ['./navigation.component.scss']
+})
+export class NavigationComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+    AppComponent.createClickable(".theme");
+  }
+
+}

HTML/AdminPanel/src/environments/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};

HTML/AdminPanel/src/environments/environment.ts

@@ -0,0 +1,16 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

HTML/AdminPanel/src/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>AdminPanel</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+</head>
+<body class="mat-typography">
+  <app-root></app-root>
+</body>
+</html>

HTML/AdminPanel/src/main.ts

@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));

HTML/AdminPanel/src/polyfills.ts

@@ -0,0 +1,53 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes recent versions of Safari, Chrome (including
+ * Opera), Edge on the desktop, and iOS and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js';  // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */

HTML/AdminPanel/src/styles.scss

@@ -0,0 +1,9 @@
+/* You can add global styles to this file, and also import other style files */
+
+html, body { height: 100%; }
+body { margin: 0; }
+
+* {
+  box-sizing: border-box;
+  font-family: Poppins, "Helvetica Neue", sans-serif;
+}

HTML/AdminPanel/src/test.ts

@@ -0,0 +1,26 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    <T>(id: string): T;
+    keys(): string[];
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+);
+
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

HTML/AdminPanel/tsconfig.app.json

@@ -0,0 +1,15 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}

HTML/AdminPanel/tsconfig.json

@@ -0,0 +1,32 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "es2017",
+    "module": "es2020",
+    "lib": [
+      "es2020",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

HTML/AdminPanel/tsconfig.spec.json

@@ -0,0 +1,18 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}

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":";;;;;;;;;AA8BA,MAAM,KAAK;IAAX;QACoB,aAAQ,GAAG,qBAAqB,CAAC;IAkErD,CAAC;IAhEU,MAAM;QACT,IAAI,CAAC,cAAc,EAAE,CAAC;IAC1B,CAAC;IAEa,cAAc;;YACxB,MAAM,UAAU,GAAG,QAAQ,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAC;YAC5D,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBACxC,MAAM,OAAO,GAAG,UAAU,CAAC,CAAC,CAAgB,CAAC;gBAC7C,MAAM,SAAS,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;gBACpD,OAAO,CAAC,SAAS,GAAG,MAAM,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,GAAG,oBAAoB,GAAG,SAAS,GAAG,aAAa,CAAC,CAAC;gBACjH,IAAI;oBACA,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,GAAG,uBAAuB,GAAG,SAAS,GAAG,YAAY,CAAC,CAAC;oBAC9G,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAsB,CAAC;oBAC5E,aAAa,CAAC,IAAI,GAAG,iBAAiB,CAAC;oBACvC,aAAa,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;oBAC3D,OAAO,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC;iBACtC;gBAAA,OAAO,CAAC,EAAE,GAAE;aAChB;QACL,CAAC;KAAA;IAEY,eAAe,CAAC,GAAW;;YACpC,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,GAAG,CAAC,CAAC;YAClC,OAAO,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;QACjC,CAAC;KAAA;IAEM,cAAc;QACjB,OAAO,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;IACpD,CAAC;IAEY,aAAa;;YACtB,OAAO,MAAM,IAAI,CAAC,cAAc,CAAC,qCAAqC,CAAC,CAAC;QAC5E,CAAC;KAAA;IAEY,aAAa;;YACtB,OAAO,MAAM,IAAI,CAAC,cAAc,CAAC,qCAAqC,CAAC,CAAC;QAC5E,CAAC;KAAA;IAEY,qBAAqB;;YAC9B,OAAO,MAAM,IAAI,CAAC,cAAc,CAAC,kCAAkC,CAAC,CAAC;QACzE,CAAC;KAAA;IAEa,cAAc,CAAI,GAAW;;YACvC,OAAO,IAAI,OAAO,CAAI,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE;gBACvC,MAAM,OAAO,GAAG,IAAI,cAAc,EAAE,CAAC;gBACrC,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;gBACzB,OAAO,CAAC,kBAAkB,GAAG,GAAG,EAAE;oBAC9B,IAAI,OAAO,CAAC,MAAM,KAAK,GAAG,EAAE;wBACxB,IAAI;4BACA,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAM,CAAC,CAAC;yBAC9C;wBAAA,OAAO,CAAC,EAAE,GAAE;qBAChB;yBAAK;wBACF,MAAM,CAAC;4BACH,MAAM,EAAE,OAAO,CAAC,MAAM;4BACtB,UAAU,EAAE,OAAO,CAAC,UAAU;yBACjC,CAAC,CAAC;qBACN;gBACL,CAAC,CAAC;gBACF,OAAO,CAAC,OAAO,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC;oBAC3B,MAAM,EAAE,OAAO,CAAC,MAAM;oBACtB,UAAU,EAAE,OAAO,CAAC,UAAU;iBACjC,CAAC,CAAC;gBACH,OAAO,CAAC,IAAI,EAAE,CAAC;YACnB,CAAC,CAAC,CAAC,CAAC;QACR,CAAC;KAAA;CACJ;AAED,MAAM,KAAK,GAAU,IAAI,KAAK,EAAE,CAAC;AACjC,KAAK,CAAC,MAAM,EAAE,CAAC"}

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"
+  ]
+}

HTML/HoverEffect/.idea/.gitignore

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

HTML/HoverEffect/.idea/HoverEffect.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/HoverEffect/.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/HoverEffect/.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/HoverEffect.iml" filepath="$PROJECT_DIR$/.idea/HoverEffect.iml" />
+    </modules>
+  </component>
+</project>

HTML/HoverEffect/index.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>HoverEffect</title>
+
+    <style>
+        section {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100vw;
+            height: 100vh;
+            font-family: Arial, sans-serif;
+        }
+
+        div {
+            position: relative;
+            box-sizing: border-box;
+            border: 1px grey solid;
+            width: 300px;
+            height: 200px;
+            transition: 100ms;
+            user-select: none;
+        }
+
+        img {
+            position: absolute;
+            height: 50%;
+            width: auto;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background-color: white;
+            transition: 500ms ease-in-out;
+        }
+
+        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);
+        }
+
+        span {
+            position: absolute;
+            width: 80%;
+            height: 40%;
+            opacity: 0;
+            top: 80%;
+            left: 50%;
+            transform: translate(-50%, -50%) scale(0, 0);
+            transition: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
+            font-size: 11px;
+        }
+
+        div:hover {
+            border-color: red;
+            transform: scale(1.5);
+        }
+
+        div:hover img {
+            top: 0;
+        }
+
+        div:hover h1 {
+            top: 30%;
+        }
+
+        div:hover span {
+            opacity: 100;
+            transform: translate(-50%, -50%) scale(1, 1);
+        }
+    </style>
+</head>
+<body>
+<section>
+    <div>
+        <img src="https://cdn-icons-png.flaticon.com/512/65/65732.png" alt="icon">
+        <h1>Title</h1>
+        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias corporis fuga fugiat ipsam neque optio velit. Adipisci animi at corporis cumque, dolores, itaque labore laudantium modi mollitia, nostrum quia sapiente.</span>
+    </div>
+</section>
+</body>
+</html>

HTML/IframeCommunication/.idea/.gitignore

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

HTML/IframeCommunication/.idea/IframeCommunication.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/IframeCommunication/.idea/dictionaries

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectDictionaryState">
+    <dictionary name="leon" />
+  </component>
+</project>

HTML/IframeCommunication/.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/IframeCommunication/.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/IframeCommunication.iml" filepath="$PROJECT_DIR$/.idea/IframeCommunication.iml" />
+    </modules>
+  </component>
+</project>

HTML/IframeCommunication/.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/IframeCommunication/iframe.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Inner IFrame</title>
+</head>
+<body>
+
+<h1>Hello World</h1>
+<p></p>
+
+<script>
+    window.addEventListener('message', (event) => {
+        const element = document.querySelector("p");
+        element.innerText = JSON.stringify(event.data);
+    }, false);
+
+    parent.postMessage("Fick die hänne", '*');
+</script>
+
+</body>
+</html>

HTML/IframeCommunication/index.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Iframe Communication</title>
+</head>
+<body>
+
+<iframe name="frame" width="1000" height="1000"></iframe>
+
+<script>
+    window.open("iframe.html", "frame");
+
+    const windowProperties = {
+        title: "Test Window",
+        headerMessage: "Header Message",
+        icon: "image.png",
+        resizable: true,
+        size: {width: 500, height: 600},
+        minSize: {width: 500, height: 600},
+        position: {x: 50, y: 200},
+        htmlWindowRef: undefined,
+        htmlContentRef: undefined,
+        windowRef: undefined,
+        headerActions: [],
+        windowType: undefined,
+        dialog: {open: false},
+    };
+
+    window.onload = () => {
+        const frame = document.querySelector("iframe");
+        frame.contentWindow.postMessage(windowProperties, location.origin); // Iframe Origin
+    };
+
+    window.addEventListener('message', (event) => {
+        console.log(event);
+    }, false);
+</script>
+
+</body>
+</html>

HTML/LoginScreen/.idea/.gitignore

@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
+# Editor-based HTTP Client requests
+/httpRequests/

HTML/LoginScreen/.idea/LoginScreen.iml

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

HTML/LoginScreen/.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/LoginScreen/.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/LoginScreen.iml" filepath="$PROJECT_DIR$/.idea/LoginScreen.iml" />
+    </modules>
+  </component>
+</project>

HTML/LoginScreen/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Login Screen</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <script>
+        function onClick() {
+            const email = document.getElementById("Email").value;
+            const password = document.getElementById("Password").value;
+            if (email === "leon@ladenbau-hoppe.de" && password === "1234567890") {
+                window.alert("Successfully logged in!")
+            }else {
+                window.alert("Username or Password incorrect!")
+            }
+        }
+    </script>
+
+    <div class="login">
+        <h1>Login</h1>
+        <input type="email" placeholder="Email" id="Email"> <br>
+        <input type="password" placeholder="Password" id="Password"> <br>
+        <button onclick="onClick()">Login</button>
+    </div>
+</body>
+</html>

HTML/LoginScreen/style.css

@@ -0,0 +1,42 @@
+body {
+    background-color: gray;
+}
+
+.login {
+    background-color: darkgray;
+    width: 500px;
+    height: 400px;
+    top: 50%;
+    left: 50%;
+    position: absolute;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    padding: 50px;
+}
+
+.login input {
+    margin: 10px auto;
+    width: 400px;
+    height: 50px;
+    background: none;
+    border-color: aquamarine;
+    border-radius: 25px;
+    text-align: center;
+    color: snow;
+}
+
+.login h1 {
+    font-size: 50px;
+    font-family: "Cooper Black";
+    color: green;
+    user-select: none;
+}
+
+.login button {
+    width: 100px;
+    height: 50px;
+    background-color: aqua;
+    margin: 50px auto;
+    user-select: none;
+    cursor: pointer;
+}

HTML/PdfViewer/.idea/.gitignore

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

HTML/PdfViewer/.idea/PdfViewer.iml

@@ -0,0 +1,13 @@
+<?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" />
+    <orderEntry type="library" name="pdf.js" level="application" />
+  </component>
+</module>