319 lines
17 KiB
HTML
319 lines
17 KiB
HTML
<!--
|
|
SmithTechMC Free Ocean Minecraft Template
|
|
|
|
This template is completely free and will remain free forever.
|
|
It is developed by SmithTechMC from the Smith & Tech Team. Smith & Tech 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 Smith & Tech Team.
|
|
|
|
This web template is distributed under the SmithTech.com domain.
|
|
|
|
Thank you for using the SmithTechMC 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 Smith & Tech Team
|
|
|
|
Support: https://discord.smartshub.dev/
|
|
More resources: https://store.smartshub.dev/
|
|
|
|
(c) Smith & Tech 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="https://www.smithandtech.com/wp-content/uploads/2025/11/shield-sword-outline-custom-2.png" 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/background6.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:')">play.smithandtech.com:25566</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/@SmithTech-MWE" 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/smithandtech_" 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>© 2025 Smith & Tech. All right reserved. | Made with ❤️ by MoWetTheDon.</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> |