BeamMP/BeamMP-Website
1
0
Fork 0
mirror of https://github.com/BeamMP/BeamMP-Website.git synced 2026-04-19 14:41:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

New navbar and updated logos & links

Browse Source
This commit is contained in:
Starystars67
2024-10-22 16:57:42 +01:00
parent f5eedabc71
commit 4d8c30f48c
21 changed files with 1115 additions and 3791 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3880
frontend/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

12
frontend/package.json
View File

@@ -1,7 +1,7 @@
{
"name": "beammp-website-frontend",
"private": true,
"version": "0.0.0",
"version": "2.0.0",
"type": "module",
"scripts": {
"dev": "vite",
@@ -11,20 +11,16 @@
"dependencies": {
"@headlessui/vue": "^1.7.16",
"@heroicons/vue": "^2.0.18",
"@statnett/vue-plotly": "^0.3.2",
"axios": "^1.6.2",
"plotly.js": "^2.27.1",
"plotly.js-dist": "^2.27.1",
"plotly.js-dist-min": "^2.27.1",
"uuid": "^9.0.1",
"vue": "^3.3.8",
"vue-router": "^4.2.5"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.5.0",
"autoprefixer": "^10.4.16",
"postcss": "^8.4.32",
"tailwindcss": "^3.3.6",
"autoprefixer": "^10.4.20",
"postcss": "^8.4.47",
"tailwindcss": "^3.4.14",
"vite": "^5.0.0"
}
}

BIN
frontend/src/assets/BeamMP_blk.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 87 KiB

BIN
frontend/src/assets/BeamMP_wht.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 120 KiB

BIN
frontend/src/assets/beammp-logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 30 KiB

36
frontend/src/assets/partners/pedalhost-logo.svg Executable file
View File

@@ -0,0 +1,36 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1014 261">
<defs>
<style>
.cls-1 {
fill: #cecece;
}
.cls-2 {
fill: #80f;
}
</style>
</defs>
<!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709) -->
<g>
<g id="Layer_1">
<path class="cls-1" d="M559.9,122.9V10.9h105.2c32.5,0,42.3,11,42.3,33.1v46.9c0,21-9.9,32-42.3,32h-105.2ZM681.3,44c0-11-3.3-12.9-16.2-12.9h-79.3v71.5h79.3c12.9,0,16.2-1.9,16.2-11.9v-46.6Z"/>
<rect class="cls-2" x="12.7" y="10.5" width="239.9" height="239.9" rx="19.7" ry="19.7"/>
<polygon class="cls-1" points="120.6 154.2 120.6 154.2 70.2 204.6 52.4 186.8 84.9 154.2 52.4 121.6 70.2 103.8 120.6 154.2 120.6 154.2"/>
<rect class="cls-1" x="137.1" y="178.4" width="75.9" height="23.1"/>
<polygon class="cls-2" points="512.6 134.9 512.6 176.7 434.9 176.7 434.9 134.9 403.7 134.9 403.7 250.5 434.9 250.5 434.9 202.5 512.6 202.5 512.6 250.5 544 250.5 544 134.9 512.6 134.9"/>
<path class="cls-2" d="M819.7,175.9h-65.6c-7.2,0-7.2-2.1-7.2-3.8v-7.8c0-1.8,0-3.8,7.2-3.8h97.8v-25.6h-97.8c-31.8,0-38.4,16.1-38.4,29.6v7.5c0,13.5,6.7,29.6,38.4,29.6h65.6c7,0,7,1.7,7,3.8v15.7c0,2.5,0,3.6-7,3.6h-100.4v25.8h100.4c31.8,0,38.4-16.2,38.4-29.7v-15.3c0-13.5-6.7-29.6-38.4-29.6Z"/>
<polygon class="cls-2" points="858 134.9 858 160.6 914.6 160.6 914.6 250.5 946 250.5 946 160.6 1001.3 160.6 1001.3 134.9 858 134.9"/>
<rect class="cls-1" x="424.6" y="10.5" width="118.6" height="20.1"/>
<rect class="cls-1" x="424.6" y="102.8" width="118.6" height="20.1"/>
<rect class="cls-1" x="424.6" y="56.8" width="109.6" height="20.1"/>
<path class="cls-1" d="M306.1,82.4v40.8h-26.1V10.6h94.5c26.2,0,36.1,11,36.1,27.2v17.4c0,16.1-9.9,27.2-36.1,27.2h-68.4ZM384.6,38.2c0-4.3-2.6-7.4-7.7-7.4h-70.8v31h71c5.1,0,7.5-2.4,7.5-6.6v-17.1Z"/>
<path class="cls-1" d="M801.9,10.6h-19.2l-75,112.5h29.1l19-29.2h72.6l18.6,29.2h29.4l-74.5-112.5ZM768.9,73.8l23.6-36.3,23.1,36.3h-46.7Z"/>
<path class="cls-1" d="M885.9,123.1V10.6h26.4v92.1h89v20.5h-115.4Z"/>
<g>
<polygon class="cls-1" points="660.5 163.5 645.2 163.5 645.2 156.3 613.2 156.3 613.2 163.5 599.1 163.5 599.1 175.4 579.7 175.4 579.7 229.1 679.2 229.1 679.2 175.4 660.5 175.4 660.5 163.5"/>
<path class="cls-2" d="M703.7,154.5c0-.1,0-.3-.1-.4,0,0,0-.1,0-.2-3.4-10.1-13-19-36.5-19h-74.3c-15.8,0-25.3,4-30.9,9.7-5.6,5.7-7.2,13-7.2,19.7v56.7c0,3.2.4,6.6,1.4,9.8,0,.1,0,.3.1.4,0,0,0,0,0,.1,3.4,10.1,13,19,36.6,19h74.3c31.5,0,38.1-16,38.1-29.4v-56.7c0-3.2-.4-6.6-1.4-9.8ZM679.2,229.1h-13.9v-15h-3.1v15h-8.7v-15h-3.1v15h-8.7v-15h-3.1v15h-8.7v-15h-3.1v15h-8.7v-15h-3.1v15h-8.7v-15h-3.1v15h-8.7v-15h-3.1v15h-11.7v-53.7h19.4v-11.9h14.1v-7.2h32.1v7.2h15.3v11.9h18.7v53.7Z"/>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

42
frontend/src/assets/partners/pedalhost_stacked_dark.svg Executable file
View File

@@ -0,0 +1,42 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1014 261">
<defs>
<style>
.cls-1 {
fill: #cecece;
}
.cls-2 {
fill: #80f;
}
.cls-3 {
fill: #3a3a3a;
}
</style>
</defs>
<!-- Generator: Adobe Illustrator 28.6.0, SVG Export Plug-In . SVG Version: 1.2.0 Build 709) -->
<g>
<g id="Layer_1">
<g>
<path class="cls-3" d="M559.9,122.9V10.9h105.2c32.5,0,42.3,11,42.3,33.1v46.9c0,21-9.9,32-42.3,32h-105.2ZM681.3,44c0-11-3.3-12.9-16.2-12.9h-79.3v71.5h79.3c12.9,0,16.2-1.9,16.2-11.9v-46.6Z"/>
<rect class="cls-2" x="12.7" y="10.5" width="239.9" height="239.9" rx="19.7" ry="19.7"/>
<polygon class="cls-1" points="120.6 154.2 120.6 154.2 70.2 204.6 52.4 186.8 84.9 154.2 52.4 121.6 70.2 103.8 120.6 154.2 120.6 154.2"/>
<rect class="cls-1" x="137.1" y="178.4" width="75.9" height="23.1"/>
<polygon class="cls-2" points="512.6 134.9 512.6 176.7 434.9 176.7 434.9 134.9 403.7 134.9 403.7 250.5 434.9 250.5 434.9 202.5 512.6 202.5 512.6 250.5 544 250.5 544 134.9 512.6 134.9"/>
<path class="cls-2" d="M819.7,175.9h-65.6c-7.2,0-7.2-2.1-7.2-3.8v-7.8c0-1.8,0-3.8,7.2-3.8h97.8v-25.6h-97.8c-31.8,0-38.4,16.1-38.4,29.6v7.5c0,13.5,6.7,29.6,38.4,29.6h65.6c7,0,7,1.7,7,3.8v15.7c0,2.5,0,3.6-7,3.6h-100.4v25.8h100.4c31.8,0,38.4-16.2,38.4-29.7v-15.3c0-13.5-6.7-29.6-38.4-29.6Z"/>
<polygon class="cls-2" points="858 134.9 858 160.6 914.6 160.6 914.6 250.5 946 250.5 946 160.6 1001.3 160.6 1001.3 134.9 858 134.9"/>
<rect class="cls-3" x="424.6" y="10.5" width="118.6" height="20.1"/>
<rect class="cls-3" x="424.6" y="102.8" width="118.6" height="20.1"/>
<rect class="cls-3" x="424.6" y="56.8" width="109.6" height="20.1"/>
<path class="cls-3" d="M306.1,82.4v40.8h-26.1V10.6h94.5c26.2,0,36.1,11,36.1,27.2v17.4c0,16.1-9.9,27.2-36.1,27.2h-68.4ZM384.6,38.2c0-4.3-2.6-7.4-7.7-7.4h-70.8v31h71c5.1,0,7.5-2.4,7.5-6.6v-17.1Z"/>
<path class="cls-3" d="M801.9,10.6h-19.2l-75,112.5h29.1l19-29.2h72.6l18.6,29.2h29.4l-74.5-112.5ZM768.9,73.8l23.6-36.3,23.1,36.3h-46.7Z"/>
<path class="cls-3" d="M885.9,123.1V10.6h26.4v92.1h89v20.5h-115.4Z"/>
<g>
<polygon class="cls-1" points="660.5 163.5 645.2 163.5 645.2 156.3 613.2 156.3 613.2 163.5 599.1 163.5 599.1 175.4 579.7 175.4 579.7 229.1 679.2 229.1 679.2 175.4 660.5 175.4 660.5 163.5"/>
<path class="cls-2" d="M703.7,154.5c0-.1,0-.3-.1-.4,0,0,0-.1,0-.2-3.4-10.1-13-19-36.5-19h-74.3c-15.8,0-25.3,4-30.9,9.7-5.6,5.7-7.2,13-7.2,19.7v56.7c0,3.2.4,6.6,1.4,9.8,0,.1,0,.3.1.4,0,0,0,0,0,.1,3.4,10.1,13,19,36.6,19h74.3c31.5,0,38.1-16,38.1-29.4v-56.7c0-3.2-.4-6.6-1.4-9.8ZM679.2,229.1h-13.9v-15h-3.1v15h-8.7v-15h-3.1v15h-8.7v-15h-3.1v15h-8.7v-15h-3.1v15h-8.7v-15h-3.1v15h-8.7v-15h-3.1v15h-8.7v-15h-3.1v15h-11.7v-53.7h19.4v-11.9h14.1v-7.2h32.1v7.2h15.3v11.9h18.7v53.7Z"/>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

13
frontend/src/components/Footer.vue
View File

@@ -4,16 +4,16 @@
<div class="grid gap-16 row-gap-10 mb-8 lg:grid-cols-6">
<div class="md:max-w-md lg:col-span-2">
<a href="/" aria-label="Go home" title="Company" class="inline-flex items-center">
<img class="h-8 w-auto" src="../assets/beammp-logo.png" alt="BeamMP Logo" />
<span class="ml-4 text-xl font-bold tracking-wide text-gray-200 uppercase">BeamMP</span>
<img class="h-8 w-auto" src="../assets/BeamMP_wht.png" style="height: 100px;" alt="BeamMP Logo" />
<span class="sr-only ml-4 text-xl font-bold tracking-wide text-gray-200 uppercase">BeamMP</span>
</a>
<div class="mt-4 lg:max-w-sm">
<p class="text-sm text-gray-300">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
BeamMP is a multiplayer mod for the game BeamNG.drive as is in no way affiliated with BeamNG Gmbh.
</p>
<p class="mt-4 text-sm text-gray-300">
<!--<p class="mt-4 text-sm text-gray-300">
Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>
</p>-->
</div>
</div>
<div class="grid grid-cols-2 gap-5 row-gap-8 lg:col-span-4 md:grid-cols-4">
@@ -83,6 +83,9 @@
<li>
<a href="/terms" class="text-gray-300 transition-colors duration-300 hover:text-deep-purple-accent-400">Terms</a>
</li>
<li>
<a href="/terms" class="text-gray-300 transition-colors duration-300 hover:text-deep-purple-accent-400">Branding Resources</a>
</li>
</ul>
</div>
</div>

147
frontend/src/components/NavBar.vue
View File

@@ -1,11 +1,10 @@
<template>
<Disclosure as="nav" class="bg-gray-800" v-slot="{ open }">
<Disclosure as="nav" class="bg-white dark:bg-beammp-gray shadow" v-slot="{ open }">
<div class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8">
<div class="relative flex h-16 items-center justify-between">
<div class="relative flex h-16 justify-between">
<div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
<!-- Mobile menu button-->
<DisclosureButton
class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
<!-- Mobile menu button -->
<DisclosureButton class="relative inline-flex items-center justify-center rounded-md p-2 text-zinc-400 hover:bg-zinc-100 hover:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-beammp-orange">
<span class="absolute -inset-0.5" />
<span class="sr-only">Open main menu</span>
<Bars3Icon v-if="!open" class="block h-6 w-6" aria-hidden="true" />
@@ -14,84 +13,83 @@
</div>
<div class="flex flex-1 items-center justify-center sm:items-stretch sm:justify-start">
<div class="flex flex-shrink-0 items-center">
<a href="/"><img class="h-8 w-auto" src="../assets/beammp-logo.png" alt="BeamMP Logo" /></a>
<a href="/">
<span class="sr-only">BeamMP</span>
<img class="w-auto block dark:hidden" src="../assets/BeamMP_blk.png" alt="BeamMP" style="height: 80px;"/>
<img class="w-auto dark:block hidden" src="../assets/BeamMP_wht.png" alt="BeamMP" style="height: 80px;"/>
</a>
</div>
<div class="hidden sm:ml-6 sm:block">
<div class="flex space-x-4">
<a v-for="item in navigation" :key="item.name" :href="item.href"
:class="[item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white', 'rounded-md px-3 py-2 text-sm font-medium']"
:aria-current="item.current ? 'page' : undefined">{{ item.name }}</a>
</div>
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
<!-- Current: "border-beammp-orange text-zinc-900", Default: "border-transparent text-zinc-500 hover:border-zinc-300 hover:text-zinc-700" -->
<a
v-for="(item, index) in updatedNavItems"
:key="index"
:href="item.href"
:class="['inline-flex items-center border-b-2 px-1 pt-1 text-sm font-medium',
item.active
? 'border-beammp-orange text-beammp-orange'
: 'border-transparent text-zinc-500 dark:text-zinc-300 hover:border-zinc-300 hover:text-zinc-700 dark:hover:text-zinc-100']"
>
{{ item.name }}
</a>
</div>
</div>
<div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
<!-- Theme Toggle -->
<ThemeToggle />
<!-- Mode Switcher Dropdown -->
<div class="flex items-center border-l border-slate-200 ml-6 pl-6 dark:border-slate-800">
<label class="sr-only" id="headlessui-listbox-label-:Rpkcr6:" data-headlessui-state="">Theme</label>
<button type="button" id="headlessui-listbox-button-:R19kcr6:" aria-haspopup="true" aria-expanded="false" data-headlessui-state="" aria-labelledby="headlessui-listbox-label-:Rpkcr6: headlessui-listbox-button-:R19kcr6:" class="">
<span class="dark:hidden">
<svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
<path d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" class="stroke-slate-400 dark:stroke-slate-500"></path>
<path
d="M12 4v1M17.66 6.344l-.828.828M20.005 12.004h-1M17.66 17.664l-.828-.828M12 20.01V19M6.34 17.664l.835-.836M3.995 12.004h1.01M6 6l.835.836"
class="stroke-slate-400 dark:stroke-slate-500"></path>
</svg>
</span>
<span class="hidden dark:inline">
<svg viewBox="0 0 24 24" fill="none" class="w-6 h-6">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M17.715 15.15A6.5 6.5 0 0 1 9 6.035C6.106 6.922 4 9.645 4 12.867c0 3.94 3.153 7.136 7.042 7.136 3.101 0 5.734-2.032 6.673-4.853Z"
class="fill-transparent"></path>
<path
d="m17.715 15.15.95.316a1 1 0 0 0-1.445-1.185l.495.869ZM9 6.035l.846.534a1 1 0 0 0-1.14-1.49L9 6.035Zm8.221 8.246a5.47 5.47 0 0 1-2.72.718v2a7.47 7.47 0 0 0 3.71-.98l-.99-1.738Zm-2.72.718A5.5 5.5 0 0 1 9 9.5H7a7.5 7.5 0 0 0 7.5 7.5v-2ZM9 9.5c0-1.079.31-2.082.845-2.93L8.153 5.5A7.47 7.47 0 0 0 7 9.5h2Zm-4 3.368C5 10.089 6.815 7.75 9.292 6.99L8.706 5.08C5.397 6.094 3 9.201 3 12.867h2Zm6.042 6.136C7.718 19.003 5 16.268 5 12.867H3c0 4.48 3.588 8.136 8.042 8.136v-2Zm5.725-4.17c-.81 2.433-3.074 4.17-5.725 4.17v2c3.552 0 6.553-2.327 7.622-5.537l-1.897-.632Z"
class="fill-slate-400 dark:fill-slate-500"></path>
<path fill-rule="evenodd" clip-rule="evenodd"
d="M17 3a1 1 0 0 1 1 1 2 2 0 0 0 2 2 1 1 0 1 1 0 2 2 2 0 0 0-2 2 1 1 0 1 1-2 0 2 2 0 0 0-2-2 1 1 0 1 1 0-2 2 2 0 0 0 2-2 1 1 0 0 1 1-1Z"
class="fill-slate-400 dark:fill-slate-500"></path>
</svg>
</span>
</button>
</div>
<!--<div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
<button type="button" class="relative rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
<!-- Notifications dropdown -->
<!--<button type="button" class="relative rounded-full bg-white p-1 text-zinc-400 hover:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-beammp-orange focus:ring-offset-2">
<span class="absolute -inset-1.5" />
<span class="sr-only">View notifications</span>
<BellIcon class="h-6 w-6" aria-hidden="true" />
</button>-->
<!-- Profile dropdown - From the Forum Accounts System -->
<!--<Menu as="div" class="relative ml-3">
<!-- Profile dropdown -->
<Menu as="div" class="relative ml-3">
<div>
<MenuButton class="relative flex rounded-full bg-gray-800 text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
<MenuButton class="relative flex rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-beammp-orange focus:ring-offset-2">
<span class="absolute -inset-1.5" />
<span class="sr-only">Open user menu</span>
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
</MenuButton>
</div>
<transition enter-active-class="transition ease-out duration-100" enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
<transition enter-active-class="transition ease-out duration-200" enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
<MenuItems class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<MenuItem v-slot="{ active }">
<a href="#" :class="[active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700']">Your Profile</a>
<a href="#" :class="[active ? 'bg-zinc-100' : '', 'block px-4 py-2 text-sm text-zinc-700']">Your Profile</a>
</MenuItem>
<MenuItem v-slot="{ active }">
<a href="#" :class="[active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700']">Settings</a>
<a href="#" :class="[active ? 'bg-zinc-100' : '', 'block px-4 py-2 text-sm text-zinc-700']">Settings</a>
</MenuItem>
<MenuItem v-slot="{ active }">
<a href="#" :class="[active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700']">Sign out</a>
<a href="#" :class="[active ? 'bg-zinc-100' : '', 'block px-4 py-2 text-sm text-zinc-700']">Sign out</a>
</MenuItem>
</MenuItems>
</transition>
</Menu>-->
<!--</div>-->
</Menu>
</div>
</div>
</div>
<DisclosurePanel class="sm:hidden">
<div class="space-y-1 px-2 pb-3 pt-2">
<DisclosureButton v-for="item in navigation" :key="item.name" as="a" :href="item.href"
:class="[item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white', 'block rounded-md px-3 py-2 text-base font-medium']"
:aria-current="item.current ? 'page' : undefined">{{ item.name }}</DisclosureButton>
<div class="space-y-1 pb-4 pt-2">
<!-- Current: "bg-beammp-orange border-beammp-orange text-beammp-orange", Default: "border-transparent text-zinc-500 hover:bg-zinc-50 hover:border-zinc-300 hover:text-zinc-700" -->
<DisclosureButton
v-for="(item, index) in updatedNavItems"
:key="index"
as="a"
:href="item.href"
:class="['block border-l-4 py-2 pl-3 pr-4 text-base font-medium',
item.active
? 'border-beammp-orange text-beammp-orange'
: 'border-transparent text-zinc-500 hover:border-zinc-300 hover:bg-zinc-50 hover:text-zinc-700 dark:hover:text-zinc-300',
item.hover
? 'hover:border-beammp-orange hover:bg-beammp-orange hover:text-zinc-700'
: '']"
>
{{ item.name }}
</DisclosureButton>
</div>
</DisclosurePanel>
</Disclosure>
@@ -99,6 +97,30 @@
<script>
export default {
computed: {
updatedNavItems() {
// Check the current path and set 'active' accordingly
return this.navItems.map(item => ({
...item,
active: this.$route.path === item.href
}));
}
},
data() {
return {
navItems: [
{ name: 'Forum', href: 'https://forum.beammp.com/', active: false },
{ name: 'Docs', href: 'https://docs.beammp.com/', active: false },
{ name: 'Stats', href: '/stats', active: false },
{ name: 'Servers', href: '/servers', active: false },
{ name: 'Hosting', href: '/hosting', active: false },
{ name: 'Events', href: 'https://forum.beammp.com/c/important/events/25', active: false },
{ name: 'Store', href: 'https://store.beammp.com/', active: false },
{ name: 'GitHub', href: 'https://github.com/BeamMP', active: false },
{ name: 'Patreon', href: 'https://patreon.com/BeamMP', active: false },
]
};
},
methods: {
setTheme(theme) {
if (theme === 'light') {
@@ -114,20 +136,7 @@ export default {
</script>
<script setup>
import ThemeToggle from './common/ThemeToggle.vue';
import { Disclosure, DisclosureButton, DisclosurePanel, Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
import { Bars3Icon, BellIcon, XMarkIcon } from '@heroicons/vue/24/outline'
const navigation = [
{ name: 'Forum', href: 'https://forum.beammp.com/', current: false },
{ name: 'Docs', href: 'https://docs.beammp.com/', current: false },
{ name: 'Stats', href: '/stats', current: false },
{ name: 'Servers', href: '/servers', current: false },
{ name: 'Hosting', href: '/hosting', current: false },
{ name: 'Events', href: 'https://forum.beammp.com/c/important/events/25', current: false },
{ name: 'Store', href: 'https://store.beammp.com/', current: false },
{ name: 'GitHub', href: 'https://github.com/BeamMP', current: false },
{ name: 'Patreon', href: 'https://patreon.com/BeamMP', current: false },
]
var isOpen = false
</script>

64
frontend/src/components/common/AnimatedNumber.vue Normal file
View File

@@ -0,0 +1,64 @@
<template>
<div>{{ formattedNumber }}</div>
</template>
<script>
export default {
props: {
number: {
type: Number,
default: 0
}
},
data() {
return {
displayNumber: 0,
interval: null
};
},
computed: {
formattedNumber() {
return this.displayNumber.toLocaleString();
}
},
mounted() {
// Trigger the counting logic on initial mount
this.startCounting();
},
watch: {
number() {
// Restart counting logic if `number` prop changes
this.startCounting();
}
},
methods: {
startCounting() {
clearInterval(this.interval);
if (this.number === this.displayNumber) {
return;
}
this.interval = setInterval(() => {
if (this.displayNumber !== this.number) {
let change = (this.number - this.displayNumber) / 10;
change = change >= 0 ? Math.ceil(change) : Math.floor(change);
this.displayNumber += change;
}
// Stop the interval when the number matches
if (this.displayNumber === this.number) {
clearInterval(this.interval);
}
}, 20);
}
},
beforeDestroy() {
clearInterval(this.interval);
}
};
</script>
<style scoped>
/* Add any scoped styles here */
</style>

58
frontend/src/components/common/ThemeToggle.vue Normal file
View File

@@ -0,0 +1,58 @@
<template>
<div class="ml-4 flow-root lg:ml-6">
<button type="button" @click="toggleTheme" class="group -m-2 flex items-center p-2">
<SunIcon class="h-6 w-6 flex-shrink-0 text-zinc-400 group-hover:text-zinc-500 block dark:hidden" aria-hidden="true" />
<MoonIcon class="h-6 w-6 flex-shrink-0 text-zinc-400 group-hover:text-zinc-500 dark:block hidden" aria-hidden="true" />
<span class="sr-only ml-2 text-sm font-medium text-zinc-700 group-hover:text-zinc-800">{{ isDark ? 'Light Mode' : 'Dark Mode' }}</span>
</button>
</div>
</template>
<script setup>
import { SunIcon, MoonIcon } from '@heroicons/vue/24/outline'
</script>
<script>
export default {
data() {
return {
isDark: false,
};
},
created() {
// Check for initial theme preference in localStorage (fallback)
const preferredTheme = localStorage.getItem('theme');
if (preferredTheme) {
this.isDark = preferredTheme === 'dark';
} else {
// Check for system preference using window.matchMedia
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
if (prefersDark.matches) {
this.isDark = true;
}
// Add event listener for preference changes (optional)
prefersDark.addEventListener('change', (e) => {
this.isDark = e.matches;
this.toggleTheme();
});
}
this.updateTheme()
},
methods: {
toggleTheme() {
this.isDark = !this.isDark;
// Update document body class
document.body.classList.toggle('dark');
// Persist preference in localStorage
localStorage.setItem('theme', this.isDark ? 'dark' : 'light');
},
updateTheme() {
if (this.isDark)
document.body.classList.toggle('dark');
console.log(`Theme: ${this.isDark}`)
}
},
};
</script>

1
frontend/src/components/home/Communities.vue
View File

@@ -7,7 +7,6 @@
<a href="https://discord.2fast.racing/"><img class="col-span-2 max-h-12 w-full object-contain lg:col-span-1" src="@/assets/communities/2fast-logo.png" alt="2FastRacing" width="158" height="48" /></a>
<a href="https://discord.beamcruise.com"><img class="col-span-2 max-h-12 w-full object-contain lg:col-span-1" src="@/assets/communities/beamcruise-logo.png" alt="Beam\\Cruise" width="158" height="48" /></a>
<a href="https://discord.gg/b9G3fXKqpg"><img class="col-span-2 max-h-12 w-full object-contain lg:col-span-1" src="@/assets/communities/nuclear-logo.png" alt="CnR" width="158" height="48" /></a>
<img class="col-span-2 col-start-2 max-h-12 w-full object-contain sm:col-start-auto lg:col-span-1" src="@/assets/beammp-logo.png" alt="Community E" width="158" height="48" />
</div>
</div>
</div>

5
frontend/src/components/home/Partners.vue
View File

@@ -2,8 +2,8 @@
<div class="bg-white py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<h2 class="text-center text-lg font-semibold leading-8 text-gray-900">Proudly partnered with trusted hosting companies</h2>
<div v-for="partner in partners" :key="partner.id" class="mx-auto mt-10 grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-10 sm:max-w-xl sm:grid-cols-6 sm:gap-x-10 lg:mx-0 lg:max-w-none lg:grid-cols-5">
<a :href="partner.link"><img class="col-span-2 max-h-12 w-full object-contain lg:col-span-1" :src="partner.logo" :alt="partner.alt" width="158" height="48" /></a>
<div class="mx-auto mt-10 grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-10 sm:max-w-xl sm:grid-cols-6 sm:gap-x-10 lg:mx-0 lg:max-w-none lg:grid-cols-5">
<a v-for="partner in partners" :key="partner.id" :href="partner.link"><img class="col-span-2 max-h-12 w-full object-contain lg:col-span-1" :src="partner.logo" :alt="partner.alt" width="158" height="48" /></a>
</div>
</div>
</div>
@@ -12,5 +12,6 @@
<script setup>
const partners = [
{ id: 1, logo: 'src/assets/partners/horizon_hosting-logo.png', alt: 'Horizon Hosting', link: 'https://billing.horizonnetworks.uk/store/beammp-server-hosting' },
{ id: 2, logo: 'src/assets/partners/pedalhost-logo.svg', alt: 'PedalHost', link: 'https://pedal.host/' },
]
</script>

14
frontend/src/components/home/Stats.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="bg-white dark:bg-slate-800 py-24 sm:py-32">
<div class="bg-beammp-white dark:bg-beammp-gray py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<dl class="grid grid-cols-1 gap-x-8 gap-y-16 text-center lg:grid-cols-4">
<div v-for="stat in stats" :key="stat.id" class="mx-auto flex max-w-xs flex-col gap-y-4">
<a :href="stat.link"><dt class="text-base leading-7 text-gray-600 dark:text-white">{{ stat.name }}</dt></a>
<dd class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl dark:text-slate-400">{{ stat.value }}</dd>
<dd class="order-first text-3xl font-semibold tracking-tight text-beammp-orange sm:text-5xl dark:text-beammp-orange"><AnimatedNumber :number="stat.value"></AnimatedNumber></dd>
</div>
</dl>
</div>
@@ -12,10 +12,12 @@
</template>
<script setup>
import AnimatedNumber from '@/components/common/AnimatedNumber.vue'
const stats = [
{ id: 1, name: 'Players Online', value: '1500', link: '/stats' },
{ id: 2, name: 'Public Servers', value: '1200', link: '/stats' },
{ id: 3, name: 'Users', value: '+760,000', link: 'https://forum.beammp.com' },
{ id: 4, name: 'Discord Members', value: '+190,000', link: 'https://discord.com/servers/beammp-601558901657305098' },
{ id: 1, name: 'Players Online', value: 1500, link: '/stats' },
{ id: 2, name: 'Public Servers', value: 1200, link: '/stats' },
{ id: 3, name: 'Users', value: 760000, link: 'https://forum.beammp.com' },
{ id: 4, name: 'Discord Members', value: 190000, link: 'https://discord.com/servers/beammp-601558901657305098' },
]
</script>

4
frontend/src/components/servers/ExpandedRowDetails.vue
View File

@@ -2,10 +2,10 @@
<div class="expanded-row-details">
<h1 style="padding-left:10px;display:flex;">
<template v-if="rowData.raw.official">
<img src="/src/assets/beammp-logo.png" alt="" style="height: 23px; padding-right: 10px;"> [Official Server]
<img src="../assets/beammp-logo.png" alt="" style="height: 23px; padding-right: 10px;"> [Official Server]
</template>
<template v-else>
<img src="/src/assets/beammp-logo.png" alt="" style="height: 23px; padding-right: 10px;">
<img src="../assets/beammp-logo.png" alt="" style="height: 23px; padding-right: 10px;">
</template>
<span v-for="(value, name) in rowData.name" :style="value.f">{{ value.s }}</span>
</h1>

10
frontend/src/components/servers/Table.vue
View File

@@ -32,6 +32,13 @@
</td>
</tr>
</template>
<template v-if="data == []">
<tr>
<td>
No Servers Found.
</td>
</tr>
</template>
</tbody>
</table>
</div>
@@ -59,6 +66,9 @@ export default {
selectedRow: null,
};
},
mounted() {
console.log(this.props)
},
methods: {
selectRow(id) {
if (this.selectedRow === id) {

2
frontend/src/views/Servers.vue
View File

@@ -3,7 +3,7 @@
</script>
<template>
<div id="app" class="p-8">
<div id="app" class="">
<Table :columns="columns" :data="tableData" />
</div>
</template>

7
frontend/src/views/Stats.vue
View File

@@ -4,7 +4,7 @@
<!-- Timeseries Graph -->
<div v-if="dataLoaded">
<Plotly :data="graphData" :layout="graphLayout" />
<!--<Plotly :data="graphData" :layout="graphLayout" />-->
</div>
<!-- Metrics -->
@@ -17,12 +17,12 @@
</template>
<script>
import Plotly from '@/components/stats/Plotly.vue'
/*import Plotly from '@/components/stats/Plotly.vue'*/
import axios from 'axios'
export default {
components: {
Plotly,
//Plotly,
},
data() {
return {
@@ -101,6 +101,7 @@ export default {
axios
.get(`https://backend.beammp.com/stats-info?period=${this.timePeriod}`)
.then(res => {
console.log(res)
const data = [];
var Labels = [];
var Players = [];

24
frontend/tailwind.config.js
View File

@@ -4,8 +4,30 @@ export default {
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
darkMode: 'selector',
theme: {
extend: {},
extend: {
colors: {
'beammp-orange': {
DEFAULT: '#F36D24', // Base color
},
'beammp-white': {
DEFAULT: '#FFFFFF', // Base color
},
'beammp-black': {
DEFAULT: '#000000', // Base color
},
'beammp-gray': {
DEFAULT: '#333333', // Base color
},
'beammp-green': {
DEFAULT: '#1D9749', // Base color
},
'beammp-blue': {
DEFAULT: '#4470B6', // Base color
},
},
},
},
plugins: [],
}