mirror of
https://github.com/BeamMP/BeamMP-Website.git
synced 2026-02-16 10:40:51 +00:00
736 lines
35 KiB
HTML
736 lines
35 KiB
HTML
<!doctype html>
|
|
<html lang="en" style="overflow-x: hidden;">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="icon" type="image/ico+xml" href="/favicon.ico" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>BeamMP Website</title>
|
|
</head>
|
|
<body>
|
|
<div id="app"></div>
|
|
<script type="module" src="/src/main.js"></script>
|
|
<noscript>
|
|
<style>
|
|
/* NoScript Styling */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
line-height: 1.6;
|
|
color: #333;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.warning-banner {
|
|
background: linear-gradient(135deg, #f36d24 0%, #e85d1f 100%);
|
|
color: white;
|
|
padding: 1rem;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.warning-banner strong {
|
|
display: block;
|
|
font-size: 1.1rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.header {
|
|
background: white;
|
|
border-bottom: 1px solid #e5e5e5;
|
|
padding: 1rem 0;
|
|
position: sticky;
|
|
top: 94px;
|
|
z-index: 999;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.header-content {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 1rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.logo {
|
|
height: 64px;
|
|
width: auto;
|
|
}
|
|
|
|
.nav {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.nav a {
|
|
color: #333;
|
|
text-decoration: none;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 6px;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.nav a:hover {
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.hero {
|
|
background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url('/landing-1.jpg') center/cover;
|
|
color: white;
|
|
padding: 5rem 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.hero-content {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 3rem;
|
|
font-weight: bold;
|
|
margin-bottom: 1rem;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.hero p {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
color: #e5e5e5;
|
|
}
|
|
|
|
.cta-buttons {
|
|
display: flex;
|
|
gap: 1rem;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 1rem 2rem;
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
font-size: 1.1rem;
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
}
|
|
|
|
.btn:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, #f36d24 0%, #dc2626 100%);
|
|
color: white;
|
|
box-shadow: 0 4px 12px rgba(243, 109, 36, 0.3);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: rgba(255,255,255,0.1);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255,255,255,0.3);
|
|
color: white;
|
|
}
|
|
|
|
.stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 2rem;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.stat {
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 2.5rem;
|
|
font-weight: bold;
|
|
color: #f36d24;
|
|
}
|
|
|
|
.stat-label {
|
|
color: #e5e5e5;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 4rem 1rem;
|
|
}
|
|
|
|
.section {
|
|
padding: 4rem 1rem;
|
|
}
|
|
|
|
.section-alt {
|
|
background: white;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 2.5rem;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.grid-2 {
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
}
|
|
|
|
.grid-4 {
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
}
|
|
|
|
.card {
|
|
background: white;
|
|
border: 1px solid #e5e5e5;
|
|
border-radius: 12px;
|
|
padding: 2rem;
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
}
|
|
|
|
.card:hover {
|
|
border-color: #4470b6;
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.card-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
margin-bottom: 1rem;
|
|
color: #f36d24;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.card-text {
|
|
color: #666;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.footer {
|
|
background: white;
|
|
border-top: 1px solid #e5e5e5;
|
|
padding: 2rem 1rem;
|
|
margin-top: 4rem;
|
|
}
|
|
|
|
.footer-content {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.social-links {
|
|
display: flex;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.social-links a {
|
|
color: #666;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.social-links a:hover {
|
|
color: #4470b6;
|
|
}
|
|
|
|
.footer-info {
|
|
text-align: right;
|
|
color: #666;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.footer-links {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.footer-links a {
|
|
color: #666;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.footer-links a:hover {
|
|
color: #4470b6;
|
|
}
|
|
|
|
.two-column {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 3rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.feature-list {
|
|
list-style: none;
|
|
}
|
|
|
|
.feature-list li {
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.feature-bullet {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
background: rgba(68, 112, 182, 0.2);
|
|
flex-shrink: 0;
|
|
margin-top: 4px;
|
|
position: relative;
|
|
}
|
|
|
|
.feature-bullet::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: #4470b6;
|
|
}
|
|
|
|
.feature-title {
|
|
font-weight: 600;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.screenshot {
|
|
width: 100%;
|
|
border-radius: 12px;
|
|
border: 1px solid #e5e5e5;
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.cta-section {
|
|
background: linear-gradient(135deg, #f36d24 0%, #e85d1f 100%);
|
|
border-radius: 12px;
|
|
padding: 3rem;
|
|
text-align: center;
|
|
color: white;
|
|
margin: 3rem 0;
|
|
}
|
|
|
|
.cta-section h3 {
|
|
font-size: 2rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.cta-section p {
|
|
font-size: 1.1rem;
|
|
margin-bottom: 2rem;
|
|
opacity: 0.95;
|
|
}
|
|
|
|
.btn-white {
|
|
background: white;
|
|
color: #f36d24;
|
|
padding: 1rem 2rem;
|
|
border-radius: 8px;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
display: inline-block;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.btn-white:hover {
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.hero h1 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.hero p {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.two-column {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.footer-content {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
|
|
.footer-info {
|
|
text-align: center;
|
|
}
|
|
|
|
.nav {
|
|
justify-content: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.header-content {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.dropdown {
|
|
position: relative;
|
|
}
|
|
|
|
.dropdown-content {
|
|
display: none;
|
|
position: absolute;
|
|
background-color: #f9f9f9;
|
|
min-width: 155px;
|
|
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
|
text-align: left;
|
|
color: black;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.dropdown:hover .dropdown-content {
|
|
display: block;
|
|
}
|
|
|
|
.dropdown-content > div {
|
|
color: black;
|
|
border-bottom: solid 1px #e5e5e5;
|
|
}
|
|
</style>
|
|
<!-- Warning Banner -->
|
|
<div class="warning-banner">
|
|
<strong>⚠️ JavaScript is Disabled</strong>
|
|
<span>This is a limited version of the BeamMP website. Please enable JavaScript for the full interactive experience.</span>
|
|
</div>
|
|
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="header-content">
|
|
<img src="/src/assets/BeamMP_blk.png" alt="BeamMP Logo" class="logo">
|
|
<nav class="nav">
|
|
<a href="https://forum.beammp.com">Forum</a>
|
|
<a href="https://docs.beammp.com">Docs</a>
|
|
<a href="https://github.com/BeamMP/BeamMP">GitHub</a>
|
|
<a href="https://www.patreon.com/BeamMP">Patreon</a>
|
|
<a href="https://discord.gg/beammp">Discord</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero">
|
|
<div class="hero-content">
|
|
<h1>Multiplayer Mod for <em>BeamNG.drive</em></h1>
|
|
<p>Drive together in the ultimate soft-body physics sandbox</p>
|
|
|
|
<div class="cta-buttons">
|
|
<a href="/installer/BeamMP_Installer.zip" class="btn btn-primary" download>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download-icon lucide-download"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg> Download Now
|
|
</a>
|
|
<a href="https://forum.beammp.com/c/server-list/13" class="btn btn-secondary">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-server-icon lucide-server"><rect width="20" height="8" x="2" y="2" rx="2" ry="2"/><rect width="20" height="8" x="2" y="14" rx="2" ry="2"/><line x1="6" x2="6.01" y1="6" y2="6"/><line x1="6" x2="6.01" y1="18" y2="18"/></svg> Browse Servers
|
|
</a>
|
|
</div>
|
|
|
|
<div class="stats">
|
|
<div class="stat">
|
|
<div class="stat-value">2,000+</div>
|
|
<div class="stat-label">Active Players</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-value">500+</div>
|
|
<div class="stat-label">Public Servers</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-value">2M+</div>
|
|
<div class="stat-label">All Servers</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features Section -->
|
|
<section class="section section-alt">
|
|
<div class="container">
|
|
<h2 class="section-title">Why Choose BeamMP?</h2>
|
|
<div class="grid grid-4">
|
|
<div class="card">
|
|
<div class="card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-server-icon lucide-server"><rect width="20" height="8" x="2" y="2" rx="2" ry="2"/><rect width="20" height="8" x="2" y="14" rx="2" ry="2"/><line x1="6" x2="6.01" y1="6" y2="6"/><line x1="6" x2="6.01" y1="18" y2="18"/></svg></div>
|
|
<h3 class="card-title">Stable Servers</h3>
|
|
<p class="card-text">Rock-solid server performance with minimal lag and maximum uptime for the best multiplayer experience.</p>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-package-icon lucide-package"><path d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"/><path d="M12 22V12"/><polyline points="3.29 7 12 12 20.71 7"/><path d="m7.5 4.27 9 5.15"/></svg></div>
|
|
<h3 class="card-title">BeamNG.drive Required</h3>
|
|
<p class="card-text">Built specifically for BeamNG.drive, leveraging its incredible soft-body physics engine.</p>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap-icon lucide-zap"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/></svg></div>
|
|
<h3 class="card-title">Standalone Client</h3>
|
|
<p class="card-text">Easy-to-use launcher that manages everything for you - just install and play.</p>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe-icon lucide-globe"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg></div>
|
|
<h3 class="card-title">Real-time Sync</h3>
|
|
<p class="card-text">Advanced synchronization technology ensures smooth gameplay with players around the world.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Communities Section -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<h2 class="section-title">Join Vibrant Communities</h2>
|
|
<p style="text-align: center; color: #666; margin-bottom: 3rem; font-size: 1.1rem;">
|
|
From casual cruising to competitive racing, find your perfect server
|
|
</p>
|
|
<div class="grid grid-4">
|
|
<div class="card">
|
|
<div class="card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rocket-icon lucide-rocket"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/></svg></div>
|
|
<h3 class="card-title">Racing</h3>
|
|
<p class="card-text">Compete in high-speed races with custom tracks and competitive leaderboards.</p>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-gamepad2-icon lucide-gamepad-2"><line x1="6" x2="10" y1="11" y2="11"/><line x1="8" x2="8" y1="9" y2="13"/><line x1="15" x2="15.01" y1="12" y2="12"/><line x1="18" x2="18.01" y1="10" y2="10"/><path d="M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z"/></svg></div>
|
|
<h3 class="card-title">Roleplay</h3>
|
|
<p class="card-text">Immerse yourself in realistic roleplay scenarios with dedicated communities.</p>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shield-icon lucide-shield"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/></svg></div>
|
|
<h3 class="card-title">Crash & Derby</h3>
|
|
<p class="card-text">Destruction enthusiasts unite! Experience epic demolition derby events.</p>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe-icon lucide-globe"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg></div>
|
|
<h3 class="card-title">Freeroam</h3>
|
|
<p class="card-text">Explore vast maps with friends in relaxed freeroam servers.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Server Browser Section -->
|
|
<section class="section section-alt">
|
|
<div class="container">
|
|
<div class="two-column">
|
|
<div>
|
|
<h2 style="font-size: 2.5rem; font-weight: bold; margin-bottom: 1.5rem;">Find Your Perfect Server</h2>
|
|
<p style="font-size: 1.1rem; color: #666; margin-bottom: 2rem;">
|
|
Browse hundreds of unique servers with different game modes, maps, and communities. There's something for everyone!
|
|
</p>
|
|
<ul class="feature-list">
|
|
<li>
|
|
<div class="feature-bullet"></div>
|
|
<div>
|
|
<div class="feature-title">Custom Game Modes</div>
|
|
<div class="card-text">From racing leagues to roleplay servers</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="feature-bullet"></div>
|
|
<div>
|
|
<div class="feature-title">Active Moderation</div>
|
|
<div class="card-text">Safe and welcoming communities</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="feature-bullet"></div>
|
|
<div>
|
|
<div class="feature-title">Global Network</div>
|
|
<div class="card-text">Servers worldwide for the best connection</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<a href="https://forum.beammp.com/c/server-list/13" class="btn btn-primary">
|
|
Browse All Servers →
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<img src="/beammpservers.png" alt="BeamMP Server Browser" class="screenshot">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Developer Section -->
|
|
<section class="section">
|
|
<div class="container">
|
|
<h2 class="section-title">Built for Developers</h2>
|
|
<p style="text-align: center; color: #666; margin-bottom: 3rem; font-size: 1.1rem;">
|
|
Powerful tools and extensive documentation to create your own server experiences
|
|
</p>
|
|
<div class="grid grid-4">
|
|
<div class="card">
|
|
<div class="card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-icon lucide-code"><path d="m16 18 6-6-6-6"/><path d="m8 6-6 6 6 6"/></svg></div>
|
|
<h3 class="card-title">Lua Scripting</h3>
|
|
<p class="card-text">Create custom game modes and server-side mods with our powerful Lua API.</p>
|
|
<a href="https://docs.beammp.com/scripting/mod-reference/" style="color: #4470b6; font-weight: 600; text-decoration: none;">Learn More →</a>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open-icon lucide-book-open"><path d="M12 7v14"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg></div>
|
|
<h3 class="card-title">Comprehensive Docs</h3>
|
|
<p class="card-text">Detailed guides and API references to help you get started quickly.</p>
|
|
<a href="https://docs.beammp.com" style="color: #4470b6; font-weight: 600; text-decoration: none;">Learn More →</a>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-wrench-icon lucide-wrench"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.106-3.105c.32-.322.863-.22.983.218a6 6 0 0 1-8.259 7.057l-7.91 7.91a1 1 0 0 1-2.999-3l7.91-7.91a6 6 0 0 1 7.057-8.259c.438.12.54.662.219.984z"/></svg></div>
|
|
<h3 class="card-title">Open Source</h3>
|
|
<p class="card-text">Contribute to the project or learn from our codebase on GitHub.</p>
|
|
<a href="https://github.com/BeamMP" style="color: #4470b6; font-weight: 600; text-decoration: none;">Learn More →</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Hosting CTA -->
|
|
<div class="cta-section">
|
|
<h3>Ready to Host Your Own Server?</h3>
|
|
<p>Check out our trusted hosting partners or download the server software to host it yourself.</p>
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center pt-4">
|
|
<a
|
|
href="https://github.com/BeamMP/BeamMP-Server/releases/latest/download/BeamMP-Server.exe"
|
|
class="btn-white flex items-center justify-center gap-3 bg-neutral-800 hover:bg-neutral-700 dark:bg-neutral-700 dark:hover:bg-neutral-600 text-white border border-neutral-600 dark:border-neutral-600 px-6 py-3 rounded-lg font-semibold transition-all"
|
|
>
|
|
Windows
|
|
<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download-icon lucide-download"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>
|
|
</a>
|
|
<span
|
|
class="dropdown btn-white flex items-center justify-center gap-3 bg-neutral-800 hover:bg-neutral-700 dark:bg-neutral-700 dark:hover:bg-neutral-600 text-white border border-neutral-600 dark:border-neutral-600 px-6 py-3 rounded-lg font-semibold transition-all"
|
|
>
|
|
Linux Builds
|
|
<div class="dropdown-content">
|
|
<div>
|
|
<span style="color: #666; font-size: 0.85rem; padding: 0.5rem 1rem; display: block; font-weight: 600;">x86_64</span>
|
|
</div>
|
|
<div style="padding: 0.5rem 1rem;">
|
|
<a href="https://github.com/BeamMP/BeamMP-Server/releases/latest/download/BeamMP-Server.debian.11.x86_64" style="color: #333; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0;">
|
|
Debian 11
|
|
<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download-icon lucide-download"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>
|
|
</a>
|
|
</div>
|
|
<div style="padding: 0.5rem 1rem;">
|
|
<a href="https://github.com/BeamMP/BeamMP-Server/releases/latest/download/BeamMP-Server.debian.12.x86_64" style="color: #333; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0;">
|
|
Debian 12
|
|
<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download-icon lucide-download"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>
|
|
</a>
|
|
</div>
|
|
<div style="padding: 0.5rem 1rem;">
|
|
<a href="https://github.com/BeamMP/BeamMP-Server/releases/latest/download/BeamMP-Server.ubuntu.22.04.x86_64" style="color: #333; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0;">
|
|
Ubuntu 22.04
|
|
<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download-icon lucide-download"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>
|
|
</a>
|
|
</div>
|
|
<div style="padding: 0.5rem 1rem;">
|
|
<a href="https://github.com/BeamMP/BeamMP-Server/releases/latest/download/BeamMP-Server.ubuntu.24.04.x86_64" style="color: #333; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0;">
|
|
Ubuntu 24.04
|
|
<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download-icon lucide-download"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<span style="color: #666; font-size: 0.85rem; padding: 0.5rem 1rem; display: block; font-weight: 600;">arm64</span>
|
|
</div>
|
|
<div style="padding: 0.5rem 1rem;">
|
|
<a href="https://github.com/BeamMP/BeamMP-Server/releases/latest/download/BeamMP-Server.debian.11.arm64" style="color: #333; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0;">
|
|
Debian 11
|
|
<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download-icon lucide-download"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>
|
|
</a>
|
|
</div>
|
|
<div style="padding: 0.5rem 1rem;">
|
|
<a href="https://github.com/BeamMP/BeamMP-Server/releases/latest/download/BeamMP-Server.debian.12.arm64" style="color: #333; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0;">
|
|
Debian 12
|
|
<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download-icon lucide-download"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>
|
|
</a>
|
|
</div>
|
|
<div style="padding: 0.5rem 1rem;">
|
|
<a href="https://github.com/BeamMP/BeamMP-Server/releases/latest/download/BeamMP-Server.ubuntu.22.04.arm64" style="color: #333; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0;">
|
|
Ubuntu 22.04
|
|
<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download-icon lucide-download"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>
|
|
</a>
|
|
</div>
|
|
<div style="padding: 0.5rem 1rem;">
|
|
<a href="https://github.com/BeamMP/BeamMP-Server/releases/latest/download/BeamMP-Server.ubuntu.24.04.arm64" style="color: #333; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0;">
|
|
Ubuntu 24.04
|
|
<svg xmlns="http://www.w3.org/2000/svg" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download-icon lucide-download"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<span/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="footer-content">
|
|
<div class="social-links">
|
|
<a href="https://github.com/BeamMP" aria-label="GitHub">
|
|
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
|
</a>
|
|
<a href="https://discord.gg/beammp" aria-label="Discord">
|
|
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
|
|
</a>
|
|
<a href="https://www.youtube.com/@beammpofficial" aria-label="YouTube">
|
|
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
|
|
</a>
|
|
<a href="https://x.com/beammpofficial" aria-label="X (Twitter)">
|
|
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/></svg>
|
|
</a>
|
|
<a href="https://www.reddit.com/r/BeamMP" aria-label="Reddit">
|
|
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z"/></svg>
|
|
</a>
|
|
<span style="color: #ccc;">|</span>
|
|
<a href="https://www.patreon.com/BeamMP" style="color: #f96854; font-size: 0.85rem; text-decoration: underline;">
|
|
Support on Patreon
|
|
</a>
|
|
</div>
|
|
|
|
<div class="footer-info">
|
|
<p>© 2019 - 2025 | BeamMP Mod Team All Rights Reserved</p>
|
|
<div class="footer-links">
|
|
<a href="https://forum.beammp.com/topic/95/privacy-policy-v1-0">Privacy Policy</a>
|
|
<span>·</span>
|
|
<a href="https://forum.beammp.com/topic/94/terms-of-use-v1-0">Terms of Use</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</noscript>
|
|
</body>
|
|
</html>
|