This commit is contained in:
mowetentertainment1 2025-11-10 21:14:58 -05:00
parent 02aada90ef
commit 7a00eae8e7
6 changed files with 681 additions and 1 deletions

110
README.md
View File

@ -1,2 +1,110 @@
# SmithTechMC
# RujuxMC Free Ocean Minecraft Web Template
**This template is completely free, and it always will be.**
It is being developed by **Jallox** at the **SmartsHub Team**. SmartsHub reserves the right to take any necessary action regarding its use.
You are **not allowed to resell or redistribute** this resource — including any modified version — without the **explicit consent** of the SmartsHub Team.
> ✅ This web template is released under the **BuiltByBit.com** domain.
---
### 🙏 Thank You for Using RujuxMC
If you encounter any issues, please contact our support team **before leaving a review on BuiltByBit**, so we can help you directly.
- 💬 **Support**: [https://discord.smartshub.dev/](https://discord.smartshub.dev/)
- 📦 **More resources**: [https://store.smartshub.dev/](https://store.smartshub.dev/)
---
### 📁 How to Host
This template can be hosted using:
- **Apache Web Server**
- **Nginx Server**
No additional installation or configuration is required.
For hosting help, reach out on our [Discord Support Server](https://discord.smartshub.dev/).
---
### 🛠️ Setup Instructions
To make this template work with your own server and branding, edit the following:
#### 1. Replace Minecraft IP address:
In `index.html`, change:
```html
<span id="minecraftIpText">MC.SERVERNAME.COM</span>
````
to your real IP or domain, for example: `play.example.com`.
#### 2. Replace store URL:
Update this link:
```html
<a href="https://store.servername.com">Store</a>
```
with your own store link, like `https://store.example.com`.
#### 3. Update social media links:
Replace all `yourusername`, `yourdiscordlink`, etc. with your actual social media URLs in:
* Instagram
* Discord
* Telegram
* YouTube
* TikTok
#### 4. Set your logo:
Upload your server logo to `/img/logo.png`, or change the `src` path in:
```html
<img src="/img/logo.png" ... >
```
#### 5. Customize background image:
Replace `/img/background.png` with your own image, or update the CSS in `body { background-image: ... }`.
#### 6. Enable live player and Discord counters:
Edit the `DOMContentLoaded` script and replace with your own server/domain and Discord Guild ID:
```js
fetch('https://api.mcstatus.io/v2/status/java/play.example.com')
.then(res => res.json())
.then(data => {
document.getElementById('playerCount').textContent = `${data.players.online}/${data.players.max}`;
});
fetch('https://discord.com/api/guilds/YOUR_GUILD_ID/widget.json')
.then(res => res.json())
.then(data => {
document.getElementById('discordUsersCount').textContent = data.presence_count;
});
```
Make sure Discords *server widget* is enabled in your server settings.
---
### ⭐ Support Us
If you enjoy using this template, please consider leaving a **5-star rating** and a **review on our Discord**.
Your support helps us continue creating high-quality free content for the community!
---
© SmartsHub 2025 — All rights reserved.

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 MiB

BIN
img/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 81 KiB

319
index.html Normal file
View File

@ -0,0 +1,319 @@
<!--
RujuxMC Free Ocean Minecraft Template
This template is completely free and will remain free forever.
It is developed by Jallox from the SmartsHub Team. SmartsHub reserves
the right to take any necessary action to protect this resource.
You are NOT allowed to resell or redistribute this resource — including
any modified version — without explicit permission from the SmartsHub Team.
This web template is distributed under the BuiltByBit.com domain.
Thank you for using the RujuxMC Free Ocean Minecraft Template.
If possible, please keep this notice at the top of your index.html file.
It helps us a lot and prevents misunderstandings with users.
— The SmartsHub Team
Support: https://discord.smartshub.dev/
More resources: https://store.smartshub.dev/
(c) SmartsHub 2025
-->
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smith & Tech</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'marine-dark': '#0f172a',
'marine-medium': '#1e293b',
'marine-light': '#334155',
'marine-accent': '#0ea5e9',
'text-light': '#f8fafc',
'text-dark': '#cbd5e1',
'marine-darker': '#0a101e',
},
fontFamily: {
sans: ['Poppins', 'sans-serif'],
},
}
}
}
</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Poppins', sans-serif;
background-color: #0f172a;
color: #f8fafc;
background-image: url('/img/backgrounds/background1.png');
background-size: cover;
background-position: center center;
background-attachment: fixed;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: background-image 1s ease-in-out;
}
.overlay {
background-color: rgba(15, 23, 42, 0.7);
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.nav-button {
@apply border-marine-light backdrop-blur-sm bg-opacity-80;
padding-left: 26px;
padding-right: 26px;
padding-bottom: 13px;
padding-top: 13px;
border-radius: 100px;
}
.nav-button-secondary {
@apply bg-marine-dark bg-marine-medium hover:bg-marine-darker;
}
.nav-button-primary {
@apply bg-marine-accent hover:bg-sky-600 transform hover:scale-105 active:scale-95;
}
.clickable-text-copy {
@apply cursor-pointer hover:text-marine-accent transition-colors duration-200;
}
.social-icon {
@apply w-10 h-10 flex items-center justify-center rounded-full bg-marine-medium hover:bg-marine-darker transition-colors duration-300 shadow-md;
}
</style>
</head>
<body>
<div class="overlay">
<main class="flex-grow flex items-center justify-center p-4">
<div class="flex flex-col items-center space-y-8 max-w-5xl w-full">
<!-- Navigation -->
<nav class="flex flex-wrap justify-center gap-4 mt-8 mb-40">
<a href="#" class="nav-button nav-button-secondary bg-marine-dark border-[1px] border-marine-light backdrop-blur-sm bg-opacity-80">Support</a>
<a href="rules.html" class="nav-button nav-button-secondary bg-marine-dark border-[1px] border-marine-light backdrop-blur-sm bg-opacity-80">Rules</a>
<a href="https://pay.smithandtech.com" target="_blank" rel="noopener noreferrer"
class="nav-button nav-button-primary bg-marine-dark border-[1px] border-marine-light backdrop-blur-sm bg-opacity-80">Store</a>
<a href="staff.html" class="nav-button nav-button-secondary bg-marine-dark border-[1px] border-marine-light backdrop-blur-sm bg-opacity-80">Staff</a>
<a href="#" class="nav-button nav-button-secondary bg-marine-dark border-[1px] border-marine-light backdrop-blur-sm bg-opacity-80">Forum</a>
</nav>
<div
class="grid grid-cols-1 xl:grid-cols-3 items-center text-center gap-y-12 xl:gap-x-24 w-full px-4 mb-8">
<!-- Players -->
<div class="flex flex-col items-center space-y-2">
<span id="playerCount" class="text-4xl xl:text-5xl font-bold text-marine-accent">0/0</span>
<span class="text-text-light text-xl">Online Players</span>
<span id="minecraftIpText" class="text-text-dark text-lg clickable-text-copy"
onclick="copyToClipboard(this.textContent, 'Server ip copied to clipboard:')">MC.SERVERNAME.COM</span>
</div>
<!-- Logo -->
<div class="flex justify-center mb-[30px]">
<img src="/img/logo.png" alt="Server Logo"
class="rounded-lg shadow-inner">
</div>
<!-- Discord -->
<div class="flex flex-col items-center space-y-2">
<span id="discordUsersCount" class="text-4xl xl:text-5xl font-bold text-marine-accent">0</span>
<span class="text-text-light text-xl">Discord users</span>
<span id="discordLinkText" class="text-text-dark text-lg clickable-text-copy"
onclick="copyToClipboard(this.textContent, 'Discord url copied:')">discord.gg/QHRjtAVeg</span>
</div>
</div>
<!-- Social Media -->
<div class="flex justify-center gap-4 mt-8">
<a href="https://discord.gg/QHRjtAVeg" target="_blank" rel="noopener noreferrer"
class="social-icon">
<!-- Discord icon SVG -->
<svg class="w-10 h-10 text-text-light" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612"/>
</svg>
</a>
<a href="https://www.tiktok.com/@yourusername" target="_blank" rel="noopener noreferrer"
class="social-icon">
<!-- TikTok icon SVG -->
<svg class="w-10 h-10 text-text-light" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M9 0h1.98c.144.715.54 1.617 1.235 2.512C12.895 3.389 13.797 4 15 4v2c-1.753 0-3.07-.814-4-1.829V11a5 5 0 1 1-5-5v2a3 3 0 1 0 3 3z"/>
</svg>
</a>
<a href="https://t.me/yourtelegramchannel" target="_blank" rel="noopener noreferrer"
class="social-icon">
<!-- Telegram icon SVG -->
<svg class="w-10 h-10 text-text-light" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.287 5.906q-1.168.486-4.666 2.01-.567.225-.595.442c-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294q.39.01.868-.32 3.269-2.206 3.374-2.23c.05-.012.12-.026.166.016s.042.12.037.141c-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8 8 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629q.14.092.27.187c.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.4 1.4 0 0 0-.013-.315.34.34 0 0 0-.114-.217.53.53 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09"/>
</svg>
</a>
<a href="https://www.youtube.com/yourchannel" target="_blank" rel="noopener noreferrer"
class="social-icon">
<!-- YouTube icon SVG -->
<svg class="w-10 h-10 text-text-light" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z"/>
</svg>
</a>
<a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer"
class="social-icon">
<!-- Instagram icon SVG -->
<svg class="w-10 h-10 text-text-light" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334"/>
</svg>
</a>
</div>
</div>
</main>
<!-- Footer Section -->
<footer
class="p-4 xl:p-6 bg-marine-dark text-text-dark text-center text-sm rounded-t-xl mx-auto w-full max-w-7xl mb-4 border-t border-marine-light backdrop-blur-sm bg-opacity-80">
<p>&copy; 2025 RujuxMC. All right reserved. | Made with ❤️ by Jallox.</p>
<p class="mt-2">Alowed: <bold>Modify, Host, Commercial-Use</bold>. Not allowed: <bold>Resell / redistribute
</bold>
</p>
</footer>
</div>
<!-- Background changing script -->
<!--
Make sure all the images has the same aspect ratio (16:9 recommended)
Add your background images in the "backgrounds" array below
If you want to disable the background changing feature, remove this script
or comment it out.
-->
<script>
const backgrounds = [
'/img/backgrounds/background1.png',
// Add more backgrounds as needed,
];
let currentIndex = 0;
const body = document.body;
function changeBackground() {
currentIndex = (currentIndex + 1) % backgrounds.length;
body.style.backgroundImage = `url('${backgrounds[currentIndex]}')`;
}
setInterval(changeBackground, 15000);
</script>
<script>
function copyToClipboard(text, message) {
const textArea = document.createElement("textarea");
textArea.value = text;
textArea.style.position = "fixed";
textArea.style.left = "-9999px";
textArea.style.top = "-9999px";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
const successful = document.execCommand('copy');
const msg = successful ? 'Copied' : 'Error copying';
showNotification(message + " " + msg);
} catch (err) {
showNotification('Error al copiar: ' + err);
}
document.body.removeChild(textArea);
}
function showNotification(message) {
const notification = document.createElement('div');
notification.textContent = message;
notification.style.cssText = `
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background-color: #0ea5e9; /* marine-accent */
color: #f8fafc; /* text-light */
padding: 12px 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
z-index: 1000;
opacity: 0;
transition: opacity 0.5s ease-in-out;
`;
document.body.appendChild(notification);
setTimeout(() => {
notification.style.opacity = '1';
}, 10);
setTimeout(() => {
notification.style.opacity = '0';
notification.addEventListener('transitionend', () => notification.remove());
}, 3000);
}
document.addEventListener('DOMContentLoaded', async () => {
// Player Count
await fetch('https://api.mcstatus.io/v2/status/java/play.smithandtech.com:25566')
.then(res => res.json())
.then(data => {
const online = data.players.online;
const max = data.players.max;
document.getElementById('playerCount').textContent = `${online}/${max}`;
})
.catch(() => {
document.getElementById('playerCount').textContent = `0/0`;
});
// Discord Users Count
await fetch('https://discord.com/api/guilds/1436769115694956735/widget.json')
.then(res => res.json())
.then(data => {
document.getElementById('discordUsersCount').textContent = data.presence_count;
})
.catch(() => {
document.getElementById('discordUsersCount').textContent = `0`;
});
});
</script>
</body>
</html>

129
rules.html Normal file
View File

@ -0,0 +1,129 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RujuxMC - Server Rules</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'marine-dark': '#0f172a',
'marine-medium': '#1e293b',
'marine-light': '#334155',
'marine-accent': '#0ea5e9',
'text-light': '#f8fafc',
'text-dark': '#cbd5e1',
'marine-darker': '#0a101e',
},
fontFamily: {
sans: ['Poppins', 'sans-serif'],
},
}
}
}
</script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
color: #f8fafc;
background: linear-gradient(to bottom right, #0f172a, #1a2333);
min-height: 100vh;
display: flex;
flex-direction: column;
}
.liquid-glass-container {
background-color: rgba(15, 23, 42, 0.7);
backdrop-filter: blur(8px);
border-radius: 1rem;
padding: 2rem;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(51, 65, 85, 0.5);
}
.rule-category {
@apply mb-8;
padding: 15px;
}
.rule-category h2 {
@apply text-3xl font-bold text-marine-accent mb-4 border-b-2 border-marine-light pb-2;
}
.rule-category ul {
@apply list-disc list-inside space-y-2;
}
.rule-category li {
@apply text-lg text-text-dark;
}
.rule-category li strong {
@apply text-text-light;
}
</style>
</head>
<body>
<div class="flex-grow flex items-center justify-center p-4">
<div class="flex flex-col items-center space-y-8 max-w-4xl w-full mx-auto">
<header class="w-full text-center mb-8">
<h1 class="text-5xl md:text-6xl font-extrabold text-marine-accent mb-4">
Server Rules
</h1>
<p class="text-xl text-text-light max-w-2xl mx-auto">
To ensure a fun and fair environment for everyone, please read and follow our server rules.
</p>
<a href="index.html" class="inline-block mt-6 px-6 py-3 rounded-full bg-marine-medium text-text-light text-lg font-semibold transition-colors duration-300 shadow-md hover:bg-marine-darker">
&larr; Back to Main Page
</a>
</header>
<section class="liquid-glass-container w-full">
<div class="rule-category">
<h2>General Conduct</h2>
<ul>
<li><strong>Be respectful:</strong> Treat all players and staff with respect. Harassment, discrimination, or hate speech will not be tolerated.</li>
<li><strong>No spamming:</strong> Do not spam the chat or use excessive caps.</li>
<li><strong>No advertising:</strong> Do not advertise other servers or websites.</li>
<li><strong>English only in global chat:</strong> Please use English in global chat for moderation purposes.</li>
</ul>
</div>
<div class="rule-category">
<h2>Gameplay Rules</h2>
<ul>
<li><strong>No cheating/hacks:</strong> Use of any unauthorized modifications or software (e.g., X-ray, flying, speed hacks) is strictly forbidden.</li>
<li><strong>No griefing/raiding:</strong> Do not destroy other players' builds or steal their items.</li>
<li><strong>Fair play:</strong> Do not exploit bugs or glitches for personal gain. Report them to staff immediately.</li>
<li><strong>No inappropriate builds/names:</strong> Builds, skins, or usernames that are offensive or inappropriate are not allowed.</li>
</ul>
</div>
<div class="rule-category">
<h2>Punishments</h2>
<ul>
<li>Violations of these rules may result in warnings, temporary bans, or permanent bans, depending on the severity and frequency of the offense.</li>
<li>Staff decisions are final.</li>
</ul>
</div>
</section>
</div>
</div>
<footer class="p-4 md:p-6 bg-marine-dark text-text-dark text-center text-sm rounded-t-xl mx-auto w-full max-w-7xl mb-4 border-t border-marine-light backdrop-blur-sm bg-opacity-80 mt-auto">
<p>&copy; 2025 RujuxMC. All right reserved. | Made with ❤️ by Jallox.</p>
<p class="mt-2">Allowed: <strong class="text-text-light">Modify, Host, Commercial-Use</strong>. Not allowed: <strong class="text-text-light">Resell / redistribute</strong></p>
</footer>
</body>
</html>

124
staff.html Normal file
View File

@ -0,0 +1,124 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RujuxMC - Equipo de Staff</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'marine-dark': '#0f172a',
'marine-medium': '#1e293b',
'marine-light': '#334155',
'marine-accent': '#0ea5e9',
'text-light': '#f8fafc',
'text-dark': '#cbd5e1',
'marine-darker': '#0a101e',
},
fontFamily: {
sans: ['Poppins', 'sans-serif'],
},
}
}
}
</script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
color: #f8fafc;
background: linear-gradient(to bottom right, #0f172a, #1a2333);
min-height: 100vh;
display: flex;
flex-direction: column;
}
.liquid-glass-container {
background-color: rgba(15, 23, 42, 0.7);
backdrop-filter: blur(8px);
border-radius: 1rem;
padding: 2rem;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(51, 65, 85, 0.5);
}
.staff-card {
@apply flex flex-col items-center p-6 bg-marine-medium rounded-xl shadow-lg border border-marine-light transition-transform duration-300 hover:scale-105 hover:bg-marine-darker;
}
.staff-skin {
@apply w-32 h-32 rounded-full border-4 border-marine-accent mb-4;
object-fit: cover;
object-position: center;
margin: auto;
}
</style>
</head>
<body>
<div class="flex-grow flex items-center justify-center p-4">
<div class="flex flex-col items-center space-y-8 max-w-7xl w-full mx-auto">
<header class="w-full text-center mb-8">
<h1 class="text-5xl md:text-6xl font-extrabold text-marine-accent mb-4">
Our staff team
</h1>
<p class="text-xl text-text-light max-w-2xl mx-auto">
Meet the people who make the best experience at RujuxMC possible.
</p>
<a href="index.html" class="inline-block mt-6 px-6 py-3 rounded-full bg-marine-medium text-text-light text-lg font-semibold transition-colors duration-300 shadow-md hover:bg-marine-darker">
&larr; Back to main page
</a>
</header>
<section class="liquid-glass-container grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 w-full">
<div class="staff-card">
<img src="https://crafatar.com/renders/head/069a79f4-44e9-4726-a5be-fca90e3ddaf5?size=128&overlay" alt="Notch skin" class="staff-skin" onerror="this.onerror=null;this.src='https://placehold.co/128x128/334155/ffffff?text=Error';">
<h2 class="text-2xl font-bold text-text-light mt-2 text-center">Notch</h2>
<p class="text-marine-accent text-lg text-center">Founder</p>
<p class="text-text-dark text-center mt-2">The creator of everything. Always looking for ways to innovate and attract new players.</p>
</div>
<div class="staff-card">
<img src="https://crafatar.com/renders/head/8e9f5e1f-6b7a-4c2f-b8c7-4d9e5f1a2b3c?size=128&overlay" alt="Mod skin" class="staff-skin" onerror="this.onerror=null;this.src='https://placehold.co/128x128/334155/ffffff?text=Error';">
<h2 class="text-2xl font-bold text-text-light mt-2 text-center">AventureroMC</h2>
<p class="text-marine-accent text-lg text-center">Main mod</p>
<p class="text-text-dark text-center mt-2">In charge of maintaining peace and resolving conflicts on the server.</p>
</div>
<div class="staff-card">
<img src="https://crafatar.com/renders/head/7e9f5e1f-6b7a-4c2f-b8c7-4d9e5f1a2b3d?size=128&overlay" alt="Builder skin" class="staff-skin" onerror="this.onerror=null;this.src='https://placehold.co/128x128/334155/ffffff?text=Error';">
<h2 class="text-2xl font-bold text-text-light mt-2 text-center">ConstructoraPro</h2>
<p class="text-marine-accent text-lg text-center">Building manager</p>
<p class="text-text-dark text-center mt-2">Design and build the impressive landscapes of the server.</p>
</div>
<div class="staff-card">
<img src="https://crafatar.com/renders/head/b8e0b67e-2e06-4b2e-9d2a-e2f6c0d8b31a?size=128&overlay" alt="Helper skin" class="staff-skin" onerror="this.onerror=null;this.src='https://placehold.co/128x128/334155/ffffff?text=Error';">
<h2 class="text-2xl font-bold text-text-light mt-2 text-center">PixelCraft</h2>
<p class="text-marine-accent text-lg text-center">Helper</p>
<p class="text-text-dark text-center mt-2">Always ready to help new players with their doubts.</p>
</div>
</section>
</div>
</div>
<footer class="p-4 md:p-6 bg-marine-dark text-text-dark text-center text-sm rounded-t-xl mx-auto w-full max-w-7xl mb-4 border-t border-marine-light backdrop-blur-sm bg-opacity-80">
<p>&copy; 2025 RujuxMC. All right reserved. | Made with ❤️ by Jallox.</p>
<p class="mt-2">Alowed: <bold>Modify, Host, Commercial-Use</bold>. Not allowed: <bold>Resell / redistribute</bold></p>
</footer>
</body>
</html>