Spaces:
Running
Running
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
<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> |