miniblox-io / index.html
MaxHeadspace's picture
https://miniblox.io/ is the site it runs a mini minecraft clone... use this site but alter to be a chainsaw - Initial Deployment
5ec25e9 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Miniblox - Play Free Online Games!</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Poppins', sans-serif;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
color: #fff;
min-height: 100vh;
}
.game-card {
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.game-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.nav-link {
position: relative;
}
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -2px;
left: 0;
background-color: #4f46e5;
transition: width 0.3s ease;
}
.nav-link:hover::after {
width: 100%;
}
.play-btn {
background: linear-gradient(45deg, #4f46e5, #8b5cf6);
box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4);
transition: all 0.3s ease;
}
.play-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(79, 70, 229, 0.6);
}
.discord-btn {
background: linear-gradient(45deg, #5865F2, #7289da);
transition: all 0.3s ease;
}
.discord-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(88, 101, 242, 0.6);
}
</style>
</head>
<body class="antialiased">
<!-- Header -->
<header class="py-4 px-6 lg:px-12">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-2">
<img src="https://miniblox.io/assets/miniblox-Dj36hMhG.png" alt="Miniblox Logo" class="h-10 w-auto">
<span class="text-xl font-bold bg-gradient-to-r from-purple-400 to-blue-500 bg-clip-text text-transparent">MINIBLOX</span>
</div>
<div class="hidden md:flex space-x-6 items-center">
<a href="#" class="nav-link text-white hover:text-purple-300">Settings</a>
<a href="#" class="nav-link text-white hover:text-purple-300">Friends</a>
<a href="#" class="nav-link text-white hover:text-purple-300">Party</a>
<a href="#" class="nav-link text-white hover:text-purple-300">Shop</a>
<a href="#" class="nav-link text-white hover:text-purple-300">Rankings</a>
<a href="#" class="nav-link text-white hover:text-purple-300">Contact</a>
<button class="bg-white text-purple-600 px-4 py-2 rounded-full font-medium hover:bg-purple-100 transition">Sign In</button>
</div>
<button class="md:hidden text-white">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
</header>
<!-- Hero Section -->
<section class="py-16 px-6 lg:px-12">
<div class="container mx-auto flex flex-col lg:flex-row items-center">
<div class="lg:w-1/2 mb-12 lg:mb-0">
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
Play <span class="bg-gradient-to-r from-purple-400 to-blue-500 bg-clip-text text-transparent">Free Online</span> Games!
</h1>
<p class="text-lg text-gray-300 mb-8">
Join thousands of players in our massive multiplayer online gaming platform. No downloads required!
</p>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<button class="play-btn px-8 py-4 rounded-full text-white font-bold text-lg">
PLAY NOW <i class="fas fa-play ml-2"></i>
</button>
<button class="discord-btn px-6 py-4 rounded-full text-white font-medium flex items-center justify-center">
<i class="fab fa-discord mr-2 text-xl"></i> Join Discord
</button>
</div>
</div>
<div class="lg:w-1/2 flex justify-center">
<img src="https://miniblox.io/assets/default-DKNlYibk.png" alt="Game Screenshot" class="rounded-xl shadow-2xl max-w-full h-auto" style="max-height: 400px;">
</div>
</div>
</section>
<!-- Featured Games -->
<section class="py-12 px-6 lg:px-12 bg-gradient-to-b from-transparent to-black/20">
<div class="container mx-auto">
<h2 class="text-3xl font-bold mb-8 text-center">Featured Games</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Game Card 1 -->
<div class="game-card rounded-xl p-4 cursor-pointer">
<div class="relative overflow-hidden rounded-lg mb-4" style="padding-bottom: 56.25%;">
<img src="https://via.placeholder.com/600x400/4f46e5/ffffff?text=Survival" alt="Game" class="absolute h-full w-full object-cover">
<div class="absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 hover:opacity-100 transition">
<button class="play-btn px-6 py-3 rounded-full text-white font-medium">
PLAY <i class="fas fa-play ml-1"></i>
</button>
</div>
</div>
<h3 class="text-xl font-semibold mb-2">Survival World</h3>
<p class="text-gray-300 text-sm">Build, craft and survive in this open world adventure</p>
<div class="flex justify-between items-center mt-4">
<div class="flex items-center">
<i class="fas fa-users text-purple-400 mr-1"></i>
<span class="text-sm">1.2K playing</span>
</div>
<div class="text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
<!-- Game Card 2 -->
<div class="game-card rounded-xl p-4 cursor-pointer">
<div class="relative overflow-hidden rounded-lg mb-4" style="padding-bottom: 56.25%;">
<img src="https://via.placeholder.com/600x400/8b5cf6/ffffff?text=Racing" alt="Game" class="absolute h-full w-full object-cover">
<div class="absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 hover:opacity-100 transition">
<button class="play-btn px-6 py-3 rounded-full text-white font-medium">
PLAY <i class="fas fa-play ml-1"></i>
</button>
</div>
</div>
<h3 class="text-xl font-semibold mb-2">Extreme Racing</h3>
<p class="text-gray-300 text-sm">High-speed races with customizable vehicles</p>
<div class="flex justify-between items-center mt-4">
<div class="flex items-center">
<i class="fas fa-users text-purple-400 mr-1"></i>
<span class="text-sm">856 playing</span>
</div>
<div class="text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
</div>
</div>
<!-- Game Card 3 -->
<div class="game-card rounded-xl p-4 cursor-pointer">
<div class="relative overflow-hidden rounded-lg mb-4" style="padding-bottom: 56.25%;">
<img src="https://via.placeholder.com/600x400/6366f1/ffffff?text=Battle" alt="Game" class="absolute h-full w-full object-cover">
<div class="absolute inset-0 bg-black/30 flex items-center justify-center opacity-0 hover:opacity-100 transition">
<button class="play-btn px-6 py-3 rounded-full text-white font-medium">
PLAY <i class="fas fa-play ml-1"></i>
</button>
</div>
</div>
<h3 class="text-xl font-semibold mb-2">Battle Royale</h3>
<p class="text-gray-300 text-sm">Last player standing wins in this intense battle</p>
<div class="flex justify-between items-center mt-4">
<div class="flex items-center">
<i class="fas fa-users text-purple-400 mr-1"></i>
<span class="text-sm">2.4K playing</span>
</div>
<div class="text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
</div>
<div class="text-center mt-10">
<button class="px-6 py-3 border border-purple-500 text-purple-400 rounded-full hover:bg-purple-500 hover:text-white transition">
View All Games <i class="fas fa-arrow-right ml-2"></i>
</button>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="py-16 px-6 lg:px-12 bg-gradient-to-b from-black/20 to-transparent">
<div class="container mx-auto">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
<div class="p-6">
<div class="text-4xl font-bold text-purple-400 mb-2">10M+</div>
<div class="text-gray-300">Players</div>
</div>
<div class="p-6">
<div class="text-4xl font-bold text-blue-400 mb-2">500+</div>
<div class="text-gray-300">Games</div>
</div>
<div class="p-6">
<div class="text-4xl font-bold text-green-400 mb-2">24/7</div>
<div class="text-gray-300">Uptime</div>
</div>
<div class="p-6">
<div class="text-4xl font-bold text-yellow-400 mb-2">100%</div>
<div class="text-gray-300">Free</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-8 px-6 lg:px-12 border-t border-gray-800">
<div class="container mx-auto">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center space-x-2 mb-4 md:mb-0">
<img src="https://miniblox.io/assets/miniblox-Dj36hMhG.png" alt="Miniblox Logo" class="h-8 w-auto">
<span class="text-sm">Miniblox v3.41.33</span>
</div>
<div class="flex flex-wrap justify-center gap-4 md:gap-6">
<a href="https://miniblox.io/?path=/privacy" class="text-gray-400 hover:text-white text-sm">Privacy</a>
<a href="https://miniblox.io/?path=/eula" class="text-gray-400 hover:text-white text-sm">Terms</a>
<a href="#" class="text-gray-400 hover:text-white text-sm">Partner Sites</a>
<a href="https://miniblox.io/?path=/privacy" class="text-gray-400 hover:text-white text-sm">Cookies</a>
<a href="https://miniblox.io/?path=/rules" class="text-gray-400 hover:text-white text-sm">Game Rules</a>
<a href="https://miniblox.io/?path=/tutorial" class="text-gray-400 hover:text-white text-sm">How to Play</a>
</div>
<div class="flex space-x-4 mt-4 md:mt-0">
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter text-xl"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook text-xl"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram text-xl"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube text-xl"></i></a>
</div>
</div>
<div class="mt-8 text-center text-gray-500 text-xs">
© 2025 Miniblox. All rights reserved. All trademarks are property of their respective owners.
</div>
</div>
</footer>
<script>
// Mobile menu toggle functionality
document.addEventListener('DOMContentLoaded', function() {
const mobileMenuButton = document.querySelector('.md\\:hidden');
const navLinks = document.querySelector('.hidden.md\\:flex');
mobileMenuButton.addEventListener('click', function() {
navLinks.classList.toggle('hidden');
navLinks.classList.toggle('flex');
navLinks.classList.toggle('flex-col');
navLinks.classList.toggle('absolute');
navLinks.classList.toggle('top-16');
navLinks.classList.toggle('right-6');
navLinks.classList.toggle('bg-gray-900');
navLinks.classList.toggle('p-4');
navLinks.classList.toggle('rounded-lg');
navLinks.classList.toggle('shadow-lg');
navLinks.classList.toggle('space-y-4');
navLinks.classList.toggle('space-x-0');
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Animate elements on scroll
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-fadeIn');
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.game-card, .play-btn, .discord-btn').forEach(el => {
observer.observe(el);
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=MaxHeadspace/miniblox-io" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>