DerGrumpf/garde-studios.de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Init

Browse Source
This commit is contained in:
DerGrumpf
2025-05-16 01:22:20 +02:00
parent 27189d8a22
commit ee9f04bf46
11 changed files with 778 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
html/css/catppuccin.css Normal file
View File

@@ -0,0 +1,145 @@
[data-theme="latte"] {
--theme-rosewater: #dc8a78;
--theme-flamingo: #dd7878;
--theme-pink: #ea76cb;
--theme-mauve: #8839ef;
--theme-red: #d20f39;
--theme-maroon: #e64553;
--theme-peach: #fe640b;
--theme-yellow: #df8e1d;
--theme-green: #40a02b;
--theme-teal: #179299;
--theme-sky: #04a5e5;
--theme-sapphire: #209fb5;
--theme-blue: #1e66f5;
--theme-lavender: #7287fd;
--theme-text: #4c4f69;
--theme-subtext1: #5c5f77;
--theme-subtext0: #6c6f85;
--theme-overlay2: #7c7f93;
--theme-overlay1: #8c8fa1;
--theme-overlay0: #9ca0b0;
--theme-surface2: #acb0be;
--theme-surface1: #bcc0cc;
--theme-surface0: #ccd0da;
--theme-base: #eff1f5;
--theme-mantle: #e6e9ef;
--theme-crust: #dce0e8;
}
[data-theme="frappe"] {
--theme-rosewater: #f2d5cf;
--theme-flamingo: #eebebe;
--theme-pink: #f4b8e4;
--theme-mauve: #ca9ee6;
--theme-red: #e78284;
--theme-maroon: #ea999c;
--theme-peach: #ef9f76;
--theme-yellow: #e5c890;
--theme-green: #a6d189;
--theme-teal: #81c8be;
--theme-sky: #99d1db;
--theme-sapphire: #85c1dc;
--theme-blue: #8caaee;
--theme-lavender: #babbf1;
--theme-text: #c6d0f5;
--theme-subtext1: #b5bfe2;
--theme-subtext0: #a5adce;
--theme-overlay2: #949cbb;
--theme-overlay1: #838ba7;
--theme-overlay0: #737994;
--theme-surface2: #626880;
--theme-surface1: #51576d;
--theme-surface0: #414559;
--theme-base: #303446;
--theme-mantle: #292c3c;
--theme-crust: #232634;
}
[data-theme="macchiato"] {
--theme-rosewater: #f4dbd6;
--theme-flamingo: #f0c6c6;
--theme-pink: #f5bde6;
--theme-mauve: #c6a0f6;
--theme-red: #ed8796;
--theme-maroon: #ee99a0;
--theme-peach: #f5a97f;
--theme-yellow: #eed49f;
--theme-green: #a6da95;
--theme-teal: #8bd5ca;
--theme-sky: #91d7e3;
--theme-sapphire: #7dc4e4;
--theme-blue: #8aadf4;
--theme-lavender: #b7bdf8;
--theme-text: #cad3f5;
--theme-subtext1: #b8c0e0;
--theme-subtext0: #a5adcb;
--theme-overlay2: #939ab7;
--theme-overlay1: #8087a2;
--theme-overlay0: #6e738d;
--theme-surface2: #5b6078;
--theme-surface1: #494d64;
--theme-surface0: #363a4f;
--theme-base: #24273a;
--theme-mantle: #1e2030;
--theme-crust: #181926;
}
[data-theme="mocha"] {
--theme-rosewater: #f5e0dc;
--theme-flamingo: #f2cdcd;
--theme-pink: #f5c2e7;
--theme-mauve: #cba6f7;
--theme-red: #f38ba8;
--theme-maroon: #eba0ac;
--theme-peach: #fab387;
--theme-yellow: #f9e2af;
--theme-green: #a6e3a1;
--theme-teal: #94e2d5;
--theme-sky: #89dceb;
--theme-sapphire: #74c7ec;
--theme-blue: #89b4fa;
--theme-lavender: #b4befe;
--theme-text: #cdd6f4;
--theme-subtext1: #bac2de;
--theme-subtext0: #a6adc8;
--theme-overlay2: #9399b2;
--theme-overlay1: #7f849c;
--theme-overlay0: #6c7086;
--theme-surface2: #585b70;
--theme-surface1: #45475a;
--theme-surface0: #313244;
--theme-base: #1e1e2e;
--theme-mantle: #181825;
--theme-crust: #11111b;
}
/* Color indicators for each theme */
[data-theme-color="latte"] { background: var(--theme-red); }
[data-theme-color="frappe"] { background: var(--theme-yellow); }
[data-theme-color="macchiato"] { background: var(--theme-green); }
[data-theme-color="mocha"] { background: var(--theme-blue); }
/* Theme Switcher Styles */
.theme-switcher {
display: flex;
justify-content: center;
gap: 8px;
}
.theme-option {
width: 24px;
height: 24px;
border-radius: 50%;
cursor: pointer;
border: 2px solid transparent;
transition: transform 0.2s;
}
.theme-option:hover {
transform: scale(1.3);
}
.theme-option .active {
border-color: var(--theme-text);
}

224
html/css/style.css Normal file
View File

@@ -0,0 +1,224 @@
@charset "UTF-8";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
padding-top: 80px; /* Offset for fixed navbar */
background-color: var(--theme-base);
color: var(--theme-text);
}
a {
color: var(--theme-red);
text-decoration: none;
}
a:hover {
color: var(--theme-peach);
}
/* Navbar Styles */
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: var(--theme-base);
box-shadow: 0 2px 10px var(--theme-blue);
z-index: 1000;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
}
.logo {
font-size: 1.5rem;
font-weight: 700;
color: var(--theme-text);
text-decoration: none;
}
.logo:hover {
color: var(--theme-text);
}
.nav-links ul {
display: flex;
list-style: none;
}
.nav-links li {
margin-left: 2rem;
}
.nav-links a {
color: var(--theme-sky);
text-decoration: none;
font-weight: 500;
transition: color 0.3s;
}
.nav-links a:hover {
color: var(--theme-lavender);
}
/* Mobile Menu */
.hamburger {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
}
.hamburger span {
display: block;
width: 25px;
height: 2px;
background: var(--theme-blue);
margin: 5px 0;
transition: all 0.3s ease;
}
/* Hero Section */
.hero {
height: 80vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 2rem;
}
/* Responsive Design */
@media (max-width: 768px) {
.nav-links {
position: fixed;
top: 80px;
left: -100%;
width: 100%;
height: calc(100vh - 80px);
background-color: var(--theme-base);
transition: left 0.3s ease;
}
.nav-links.active {
left: 0;
}
.nav-links ul {
flex-direction: column;
padding: 2rem;
}
.nav-links li {
margin: 1rem 0;
}
.hamburger {
display: block;
}
.hamburger.active span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
}
/* Section Styles */
.section {
padding: 5rem 0;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
h2 {
font-size: 2.5rem;
margin-bottom: 2rem;
text-align: center;
}
/* Section Styling */
#games .container {
display: flex;
flex-direction: column;
gap: 2rem;
}
/* Server Card Styling */
.server-card {
width: 100%;
padding: 1.5rem;
background: var(--theme-base);
border-radius: 8px;
box-shadow: 0 2px 10px var(--theme-blue);
}
.server-card h3 {
color: var(--theme-text);
margin-bottom: 1rem;
font-size: 1.3rem;
}
/* Server Info Styling (keep your existing styles) */
.server-info {
font-family: 'Courier New', monospace;
line-height: 1.8;
}
.server-info p {
margin: 0.2rem 0;
}
.arrow {
margin: 0.3rem;
}
.highlight {
font-weight: bold;
}
.card-description {
margin: 12px 0;
color: var(--theme-subtext0);
font-size: 0.9rem;
line-height: 1.4;
}
/* Status indicators (keep your existing styles) */
.status.online {
color: var(--theme-green);
}
.status.offline {
color: var(--theme-red);
}
.status.unknown {
color: var(--theme-yellow);
}

151
html/index.html Normal file
View File

@@ -0,0 +1,151 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Garde Studios</title>
<link rel="stylesheet" href="css/catppuccin.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="navbar">
<div class="container">
<a href="/" class="logo">Garde Studios</a>
<nav class="nav-links">
<ul>
<li><a href="#games">Games</a></li>
<li>
<div class="theme-switcher">
<div class="theme-option active" data-theme-color="latte" data-theme="latte"></div>
<div class="theme-option" data-theme-color="frappe" data-theme="frappe"></div>
<div class="theme-option" data-theme-color="macchiato" data-theme="macchiato"></div>
<div class="theme-option" data-theme-color="mocha" data-theme="mocha"></div>
</div>
</li>
</ul>
</nav>
<button class="hamburger" aria-label="Menu">
<span></span>
<span></span>
<span></span>
</button>
</div>
</header>
<!-- Previous content remains until <main> -->
<main>
<!--<section class="hero">
<h1>Garde Studios</h1>
<p>Digital experiences reimagined</p>
</section>-->
<section id="games" class="section">
<div class="container">
<h2>Games @ Garde Studios</h2>
<div class="server-card" data-ip="garde-studios.de" data-port="1234">
<h3>OpenRA - Red Alert</h3>
<div class="card-description">
<p>Die Alliierten vertrauen auf fortschrittliche Technologie und schnelle Aufklärung, während die Sowjets mit roher Gewalt und überwältigenden Zahlen dominieren – in diesem zeitlosen Konflikt entscheiden Taktik und Ressourcenkontrolle über den Sieg.</p>
</div>
<div class="server-info">
<p><span class="arrow">>></span> Link: <span class="highlight"><a href="https://www.openra.net/">openra.net</a></span></p>
<p><span class="arrow">>></span> Domain/IP: <span class="highlight">garde-studios.de</span></p>
<p><span class="arrow">>></span> Port: <span class="highlight">1234</span></p>
<p><span class="arrow">>></span> Password: <span class="highlight">garde-studios</span></p>
<div class="server-info">
<p><span class="arrow">>></span> Status: <span class="status unknown">Unknown</span></p>
</div>
</div>
</div>
<div class="server-card" data-ip="garde-studios.de" data-port="1235">
<h3>OpenRA - Command & Conquer: Tiberian Dawn</h3>
<div class="card-description">
<p>Die GDI setzen auf hochwertige Technologie und schwere Panzerung, während die Bruderschaft von Nod mit Guerilla-Taktik und Tiberium-Waffen kämpft – doch beide Fraktionen müssen sich gegen die tödliche Verseuchung des Tiberiums behaupten.</p>
</div>
<div class="server-info">
<p><span class="arrow">>></span> Link: <span class="highlight"><a href="https://www.openra.net/">openra.net</a></span></p>
<p><span class="arrow">>></span> Domain/IP: <span class="highlight">garde-studios.de</span></p>
<p><span class="arrow">>></span> Port: <span class="highlight">1235</span></p>
<p><span class="arrow">>></span> Password: <span class="highlight">garde-studios</span></p>
<div class="server-info">
<p><span class="arrow">>></span> Status: <span class="status unknown">Unknown</span></p>
</div>
</div>
</div>
<div class="server-card" data-ip="garde-studios.de" data-port="1236">
<h3>OpenRA - Dune 2000</h3>
<div class="card-description">
<p>Die Atreides setzen auf Elite-Truppen und Präzision, die Harkonnen überrollen Feinde mit brutaler Feuerkraft, und die Ordos kämpfen mit hinterhältigen Söldnertaktiken – doch alle müssen um das Melange kämpfen, die Quelle der Macht auf Arrakis.</p>
</div>
<div class="server-info">
<p><span class="arrow">>></span> Link: <span class="highlight"><a href="https://www.openra.net/">openra.net</a></span></p>
<p><span class="arrow">>></span> Domain/IP: <span class="highlight">garde-studios.de</span></p>
<p><span class="arrow">>></span> Port: <span class="highlight">1236</span></p>
<p><span class="arrow">>></span> Password: <span class="highlight">garde-studios</span></p>
<div class="server-info">
<p><span class="arrow">>></span> Status: <span class="status unknown">Unknown</span></p>
</div>
</div>
</div>
<div class="server-card" data-ip="garde-studios.de" data-port="14004">
<h3>Veloren</h3>
<div class="card-description">
<p>Die Abenteurer erkunden eine pixelige Fantasy-Welt mit komplexen Kämpfen und tiefen Handwerkssystemen, während dunkele Kreaturen und tödliche Höhlen auf unvorsichtige Helden lauern – doch der größte Feind ist oft die eigene Gier nach legendärer Beute.</p>
</div>
<div class="server-info">
<p><span class="arrow">>></span> Link: <span class="highlight"><a href="https://www.veloren.net/">veloren.net</a></span></p>
<p><span class="arrow">>></span> Domain/IP: <span class="highlight">garde-studios.de</span></p>
<p><span class="arrow">>></span> Port: <span class="highlight">14004</span></p>
<div class="server-info">
<p><span class="arrow">>></span> Status: <span class="status unknown">Unknown</span></p>
</div>
</div>
</div>
<div class="server-card" data-ip="garde-studios.de" data-port="34197">
<h3>Factorio (No Space Age DLC)</h3>
<div class="card-description">
<p>Die Ingenieure optimieren Fabriken mit Präzision und Logistik, während die Biters mit schierer Zahl und evolutionärer Anpassung drohen – doch das wahre Chaos entsteht, wenn die Produktionsketten ins Stolpern geraten.</p>
</div>
<div class="server-info">
<p><span class="arrow">>></span> Link: <span class="highlight"><a href="https://factorio.com/">factorio.com</a></span></p>
<p><span class="arrow">>></span> Domain/IP: <span class="highlight">garde-studios.de</span></p>
<p><span class="arrow">>></span> Port: <span class="highlight">34197</span></p>
<p><span class="arrow">>></span> Password: <span class="highlight">garde-studios</span></p>
<div class="server-info">
<p><span class="arrow">>></span> Status: <span class="status unknown">Unknown</span></p>
</div>
</div>
</div>
<div class="server-card" data-ip="garde-studios.de" data-port="16261">
<h3>Project Zomboid</h3>
<div class="card-description">
<p>Die Überlebenden horten Vorräte und planen Fluchtwege, während die Horden durch Geräusche und Blutgeruch angelockt werden – doch der gefährlichste Feind bleibt die eigene Unvorsichtigkeit.</p>
</div>
<div class="server-info">
<p><span class="arrow">>></span> Link: <span class="highlight"><a href="https://projectzomboid.com/">projectzomboid.com</a></span></p>
<p><span class="arrow">>></span> Domain/IP: <span class="highlight">garde-studios.de</span></p>
<p><span class="arrow">>></span> Port: <span class="highlight">16261</span></p>
<div class="server-info">
<p><span class="arrow">>></span> Status: <span class="status unknown">Unknown</span></p>
</div>
</div>
</div>
</div>
</section>
</main>
<script src="js/main.js"></script>
<script src="js/theme-switcher.js"></script>
</body>
</html>

74
html/js/main.js Normal file
View File

@@ -0,0 +1,74 @@
document.addEventListener('DOMContentLoaded', function() {
// Mobile menu toggle
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
hamburger.addEventListener('click', function() {
this.classList.toggle('active');
navLinks.classList.toggle('active');
});
// Close menu when clicking a link (mobile)
document.querySelectorAll('.nav-links a').forEach(link => {
link.addEventListener('click', () => {
hamburger.classList.remove('active');
navLinks.classList.remove('active');
});
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80, // Adjusted for fixed header
behavior: 'smooth'
});
}
});
});
});
document.addEventListener('DOMContentLoaded', function() {
const serverCards = document.querySelectorAll('.server-card');
const API_URL = '/api/check-port'; // Change in production
async function checkServerStatus(card) {
const ip = card.dataset.ip;
const port = card.dataset.port;
const statusElement = card.querySelector('.status');
if (!ip || !port || !statusElement) return;
statusElement.textContent = 'Checking...';
statusElement.className = 'status unknown';
try {
const response = await fetch(`${API_URL}?host=${encodeURIComponent(ip)}&port=${port}`);
const data = await response.json();
statusElement.textContent = data.status.charAt(0).toUpperCase() + data.status.slice(1);
statusElement.className = `status ${data.status}`;
} catch (e) {
statusElement.textContent = 'Error';
statusElement.className = 'status unknown';
}
}
// Initial check
serverCards.forEach(checkServerStatus);
// Click handler for manual refresh
serverCards.forEach(card => {
card.addEventListener('click', () => checkServerStatus(card));
});
// Periodic checks every 5 minutes
setInterval(() => serverCards.forEach(checkServerStatus), 5 * 60 * 1000);
});

34
html/js/theme-switcher.js Normal file
View File

@@ -0,0 +1,34 @@
document.addEventListener('DOMContentLoaded', () => {
const themeOptions = document.querySelectorAll('.theme-option');
const html = document.documentElement;
// Set initial theme from localStorage or default to latte
const savedTheme = localStorage.getItem('catppuccin-theme') || 'latte';
html.setAttribute('data-theme', savedTheme);
updateActiveTheme(savedTheme);
// Theme switcher functionality
themeOptions.forEach(option => {
option.addEventListener('click', () => {
const theme = option.dataset.theme;
html.setAttribute('data-theme', theme);
localStorage.setItem('catppuccin-theme', theme);
updateActiveTheme(theme);
});
});
// Update active theme indicator
function updateActiveTheme(theme) {
themeOptions.forEach(opt => {
const isActive = opt.dataset.theme === theme;
opt.classList.toggle('active', isActive);
// Update border color immediately
if (isActive) {
opt.style.borderColor = `var(--theme-mantle)`;
} else {
opt.style.borderColor = 'transparent';
}
});
}
});