我的世界（1）
2025-10-07 09:59:31
发布于：安徽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minecraft Code Platform</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome -->
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- CodeMirror -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/dracula.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/javascript/javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/edit/matchbrackets.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/addon/edit/closebrackets.min.js"></script>
<!-- Tailwind Config -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'minecraft-green': '#71A95A',
'minecraft-brown': '#8B5A2B',
'minecraft-dark-green': '#2C6E18',
'minecraft-light-green': '#94C973',
'minecraft-gray': '#F5F5F5',
'minecraft-dark': '#333333'
},
fontFamily: {
'minecraft': ['Minecraft', 'Arial', 'sans-serif'],
'code': ['Consolas', 'Monaco', 'monospace']
},
animation: {
'float': 'float 3s ease-in-out infinite',
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite'
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-10px)' }
}
}
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.text-shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.blocky {
clip-path: polygon(0% 5%, 5% 0%, 95% 0%, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0% 95%);
}
.glass {
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.code-block {
font-family: 'Consolas', 'Monaco', monospace;
background-color: #282a36;
color: #f8f8f2;
border-radius: 0.5rem;
padding: 1rem;
overflow-x: auto;
}
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #71A95A;
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: #5a8a48;
}
/* Minecraft Font */
@font-face {
font-family: 'Minecraft';
src: url('https://fonts.cdnfonts.com/css/minecraft-4') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* CodeMirror Customization */
.CodeMirror {
height: 100%;
font-size: 14px;
border-radius: 0.5rem;
}
/* Blocky Button Hover Effect */
.blocky-btn {
transition: all 0.2s ease;
}
.blocky-btn:hover {
transform: scale(1.05);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.blocky-btn:active {
transform: scale(0.95);
}
/* Animated Background */
.animated-bg {
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
</style>
</head>
<body class="bg-minecraft-gray min-h-screen font-minecraft">
<!-- Header -->
<header class="bg-gradient-to-r from-minecraft-dark-green to-minecraft-green animated-bg text-white shadow-lg">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<div class="flex items-center space-x-4">
<img src="https://p9-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/e138f73c00bd473083d97e619a8a0c3b~tplv-a9rns2rl98-image.image?rcl=20251007095156DBD77A2F6AD28DB4BE00&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1762393949&x-signature=vvBTIUKX7jUSu1lLfM%2BR6fdxiQ8%3D" alt="Minecraft Code Platform Logo" class="h-16 w-16 animate-float">
<h1 class="text-3xl md:text-4xl font-bold text-shadow">Minecraft Code Platform</h1>
</div>
<div class="hidden md:flex items-center space-x-6">
<a href="#home" class="hover:text-yellow-300 transition-colors">Home</a>
<a href="#code-library" class="hover:text-yellow-300 transition-colors">Code Library</a>
<a href="#code-editor" class="hover:text-yellow-300 transition-colors">Code Editor</a>
<a href="#community" class="hover:text-yellow-300 transition-colors">Community</a>
<button class="bg-minecraft-brown hover:bg-amber-700 text-white py-2 px-4 rounded blocky-btn">
Sign In
</button>
</div>
<div class="md:hidden">
<button id="mobile-menu-button" class="text-white focus:outline-none">
<i class="fa fa-bars text-2xl"></i>
</button>
</div>
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="md:hidden hidden bg-minecraft-dark-green">
<div class="container mx-auto px-4 py-2 flex flex-col space-y-2">
<a href="#home" class="block py-2 hover:text-yellow-300 transition-colors">Home</a>
<a href="#code-library" class="block py-2 hover:text-yellow-300 transition-colors">Code Library</a>
<a href="#code-editor" class="block py-2 hover:text-yellow-300 transition-colors">Code Editor</a>
<a href="#community" class="block py-2 hover:text-yellow-300 transition-colors">Community</a>
<button class="bg-minecraft-brown hover:bg-amber-700 text-white py-2 px-4 rounded blocky-btn w-full">
Sign In
</button>
</div>
</div>
</header>
<!-- Hero Section -->
<section id="home" class="relative overflow-hidden py-16 md:py-24">
<div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0">
<h2 class="text-4xl md:text-5xl font-bold mb-6 text-minecraft-dark-green">
Learn to Code, <br>Build Your World
</h2>
<p class="text-lg md:text-xl mb-8 text-gray-700">
Discover the power of coding in Minecraft. Create custom mods, commands, and adventures with our easy-to-use tools and tutorials.
</p>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<button class="bg-minecraft-green hover:bg-minecraft-dark-green text-white py-3 px-6 rounded-lg text-lg font-bold blocky-btn">
Get Started
</button>
<button class="border-2 border-minecraft-green text-minecraft-green hover:bg-minecraft-green hover:text-white py-3 px-6 rounded-lg text-lg font-bold transition-colors">
Explore Library
</button>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/956a88b6c2b24b868713f784435fa5c1~tplv-a9rns2rl98-image.image?rcl=20251007095156DBD77A2F6AD28DB4BE00&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1762393959&x-signature=zaVDbPGQvuHH4LCpASamXKwMQSI%3D" alt="Minecraft Code Banner" class="rounded-lg shadow-xl max-w-full h-auto blocky animate-float">
</div>
</div>
<!-- Decorative Elements -->
<div class="absolute top-10 right-10 w-20 h-20 bg-minecraft-green opacity-20 rounded-full animate-pulse-slow"></div>
<div class="absolute bottom-10 left-10 w-32 h-32 bg-minecraft-brown opacity-20 rounded-full animate-pulse-slow"></div>
</section>
<!-- Features Section -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-12 text-minecraft-dark-green">
What You Can Do
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Feature 1 -->
<div class="bg-minecraft-gray p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow blocky">
<div class="w-16 h-16 bg-minecraft-green rounded-full flex items-center justify-center mb-4 mx-auto">
<i class="fa fa-code text-white text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-center mb-3 text-minecraft-dark">Code Library</h3>
<p class="text-gray-700 text-center">
Browse our collection of pre-written Minecraft code snippets. Find commands, mods, and scripts to enhance your gameplay.
</p>
</div>
<!-- Feature 2 -->
<div class="bg-minecraft-gray p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow blocky">
<div class="w-16 h-16 bg-minecraft-green rounded-full flex items-center justify-center mb-4 mx-auto">
<i class="fa fa-terminal text-white text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-center mb-3 text-minecraft-dark">Code Editor</h3>
<p class="text-gray-700 text-center">
Write and edit your own Minecraft code with our intuitive editor. Get real-time feedback and syntax highlighting.
</p>
</div>
<!-- Feature 3 -->
<div class="bg-minecraft-gray p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow blocky">
<div class="w-16 h-16 bg-minecraft-green rounded-full flex items-center justify-center mb-4 mx-auto">
<i class="fa fa-share-alt text-white text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-center mb-3 text-minecraft-dark">Community Share</h3>
<p class="text-gray-700 text-center">
Share your creations with the community. Get feedback, collaborate, and discover new ideas from other players.
</p>
</div>
</div>
</div>
</section>
<!-- Code Library Section -->
<section id="code-library" class="py-16 bg-minecraft-gray">
<div class="container mx-auto px-4">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4 text-minecraft-dark-green">
Code Library
</h2>
<p class="text-center text-gray-700 mb-12 max-w-2xl mx-auto">
Explore our collection of Minecraft code snippets. Filter by category or search for specific functionality.
</p>
<!-- Search and Filter -->
<div class="flex flex-col md:flex-row justify-between items-center mb-8 gap-4">
<div class="relative w-full md:w-1/2">
<input type="text" id="code-search" placeholder="Search code snippets..." class="w-full py-2 px-4 pr-10 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-minecraft-green">
<button class="absolute right-3 top-2.5 text-gray-400 hover:text-minecraft-green">
<i class="fa fa-search"></i>
</button>
</div>
<div class="flex flex-wrap gap-2 justify-center w-full md:w-1/2">
<button class="category-btn bg-minecraft-green text-white py-2 px-4 rounded-full text-sm font-medium blocky-btn">
All
</button>
<button class="category-btn bg-white text-minecraft-green hover:bg-minecraft-green hover:text-white py-2 px-4 rounded-full text-sm font-medium transition-colors">
Commands
</button>
<button class="category-btn bg-white text-minecraft-green hover:bg-minecraft-green hover:text-white py-2 px-4 rounded-full text-sm font-medium transition-colors">
Mods
</button>
<button class="category-btn bg-white text-minecraft-green hover:bg-minecraft-green hover:text-white py-2 px-4 rounded-full text-sm font-medium transition-colors">
Redstone
</button>
<button class="category-btn bg-white text-minecraft-green hover:bg-minecraft-green hover:text-white py-2 px-4 rounded-full text-sm font-medium transition-colors">
Datapacks
</button>
</div>
</div>
<!-- Code Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Code Card 1 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow blocky">
<div class="p-6">
<div class="flex justify-between items-center mb-3">
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Commands</span>
<div class="flex items-center">
<button class="text-gray-400 hover:text-yellow-500 mr-3">
<i class="fa fa-star"></i>
</button>
<span class="text-gray-500 text-sm">128 likes</span>
</div>
</div>
<h3 class="text-xl font-bold mb-2 text-minecraft-dark">Teleport Command</h3>
<p class="text-gray-600 mb-4">Teleport to any location in your Minecraft world with this simple command.</p>
<div class="code-block text-sm mb-4">
<pre>/tp [player] [x] [y] [z]</pre>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-500 text-sm">By Notch</span>
<button class="text-minecraft-green hover:text-minecraft-dark-green font-medium">
View Details
</button>
</div>
</div>
</div>
<!-- Code Card 2 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow blocky">
<div class="p-6">
<div class="flex justify-between items-center mb-3">
<span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">Mods</span>
<div class="flex items-center">
<button class="text-gray-400 hover:text-yellow-500 mr-3">
<i class="fa fa-star"></i>
</button>
<span class="text-gray-500 text-sm">256 likes</span>
</div>
</div>
<h3 class="text-xl font-bold mb-2 text-minecraft-dark">Custom Sword Mod</h3>
<p class="text-gray-600 mb-4">Create a powerful custom sword with unique abilities and enchantments.</p>
<div class="code-block text-sm mb-4 max-h-32 overflow-hidden">
<pre>function createCustomSword() {
const sword = new ItemStack(Material.DIAMOND_SWORD);
const meta = sword.getItemMeta();
meta.setDisplayName("Excalibur");
meta.addEnchant(Enchantment.DAMAGE_ALL, 10, true);
meta.addEnchant(Enchantment.FIRE_ASPECT, 5, true);
sword.setItemMeta(meta);
return sword;
}</pre>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-500 text-sm">By Herobrine</span>
<button class="text-minecraft-green hover:text-minecraft-dark-green font-medium">
View Details
</button>
</div>
</div>
</div>
<!-- Code Card 3 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow blocky">
<div class="p-6">
<div class="flex justify-between items-center mb-3">
<span class="bg-yellow-100 text-yellow-800 text-xs font-medium px-2.5 py-0.5 rounded">Redstone</span>
<div class="flex items-center">
<button class="text-gray-400 hover:text-yellow-500 mr-3">
<i class="fa fa-star"></i>
</button>
<span class="text-gray-500 text-sm">96 likes</span>
</div>
</div>
<h3 class="text-xl font-bold mb-2 text-minecraft-dark">Automatic Door</h3>
<p class="text-gray-600 mb-4">Build an automatic door that opens when a player approaches.</p>
<div class="code-block text-sm mb-4 max-h-32 overflow-hidden">
<pre>redstone.addCircuit({
type: "detector",
position: {x: 10, y: 5, z: 15},
onDetect: function(entity) {
if (entity.type === "player") {
redstone.setBlockPower({x: 12, y: 5, z: 15}, 15);
setTimeout(() => {
redstone.setBlockPower({x: 12, y: 5, z: 15}, 0);
}, 3000);
}
}
});</pre>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-500 text-sm">By Steve</span>
<button class="text-minecraft-green hover:text-minecraft-dark-green font-medium">
View Details
</button>
</div>
</div>
</div>
<!-- Code Card 4 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow blocky">
<div class="p-6">
<div class="flex justify-between items-center mb-3">
<span class="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded">Datapacks</span>
<div class="flex items-center">
<button class="text-gray-400 hover:text-yellow-500 mr-3">
<i class="fa fa-star"></i>
</button>
<span class="text-gray-500 text-sm">176 likes</span>
</div>
</div>
<h3 class="text-xl font-bold mb-2 text-minecraft-dark">Custom Biome</h3>
<p class="text-gray-600 mb-4">Create a custom biome with unique terrain generation and vegetation.</p>
<div class="code-block text-sm mb-4 max-h-32 overflow-hidden">
<pre>{
"type": "minecraft:biome",
"name": "crystal_caves",
"parameters": {
"depth": 0.1,
"scale": 0.2,
"temperature": 0.5,
"downfall": 0.7,
"category": "underground"
},
"surface_material": "minecraft:end_stone",
"ground_material": "minecraft:purpur_block"
}</pre>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-500 text-sm">By Alex</span>
<button class="text-minecraft-green hover:text-minecraft-dark-green font-medium">
View Details
</button>
</div>
</div>
</div>
<!-- Code Card 5 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow blocky">
<div class="p-6">
<div class="flex justify-between items-center mb-3">
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded">Commands</span>
<div class="flex items-center">
<button class="text-gray-400 hover:text-yellow-500 mr-3">
<i class="fa fa-star"></i>
</button>
<span class="text-gray-500 text-sm">208 likes</span>
</div>
</div>
<h3 class="text-xl font-bold mb-2 text-minecraft-dark">Give Item Command</h3>
<p class="text-gray-600 mb-4">Give players custom items with specific enchantments and properties.</p>
<div class="code-block text-sm mb-4">
<pre>/give [player] [item] [amount] [data] {ench:[{id:[enchantment],lvl:[level]}]}</pre>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-500 text-sm">By Notch</span>
<button class="text-minecraft-green hover:text-minecraft-dark-green font-medium">
View Details
</button>
</div>
</div>
</div>
<!-- Code Card 6 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow blocky">
<div class="p-6">
<div class="flex justify-between items-center mb-3">
<span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded">Mods</span>
<div class="flex items-center">
<button class="text-gray-400 hover:text-yellow-500 mr-3">
<i class="fa fa-star"></i>
</button>
<span class="text-gray-500 text-sm">144 likes</span>
</div>
</div>
<h3 class="text-xl font-bold mb-2 text-minecraft-dark">Weather Control</h3>
<p class="text-gray-600 mb-4">Create a device to control the weather in your Minecraft world.</p>
<div class="code-block text-sm mb-4 max-h-32 overflow-hidden">
<pre>class WeatherControl {
static setClear() {
world.setWeather(Weather.CLEAR, 6000);
}
static setRain() {
world.setWeather(Weather.RAIN, 6000);
}
static setThunder() {
world.setWeather(Weather.THUNDER, 6000);
}
static toggleStorm() {
const current = world.getWeather();
if (current === Weather.CLEAR) {
this.setThunder();
} else {
this.setClear();
}
}
}</pre>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-500 text-sm">By Herobrine</span>
<button class="text-minecraft-green hover:text-minecraft-dark-green font-medium">
View Details
</button>
</div>
</div>
</div>
</div>
<!-- Load More Button -->
<div class="text-center mt-10">
<button class="bg-white border border-minecraft-green text-minecraft-green hover:bg-minecraft-green hover:text-white py-3 px-6 rounded-lg font-bold transition-colors blocky-btn">
Load More
</button>
</div>
</div>
</section>
<!-- Code Editor Section -->
<section id="code-editor" class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4 text-minecraft-dark-green">
Code Editor
</h2>
<p class="text-center text-gray-700 mb-12 max-w-2xl mx-auto">
Write and edit your own Minecraft code with our intuitive editor. Get real-time feedback and syntax highlighting.
</p>
<div class="flex flex-col lg:flex-row gap-6">
<!-- Editor Panel -->
<div class="lg:w-1/2 bg-minecraft-gray p-4 rounded-lg shadow-lg blocky">
<div class="flex justify-between items-center mb-4">
<div class="flex items-center space-x-2">
<span class="text-sm font-medium text-gray-700">Language:</span>
<select id="language-select" class="bg-white border border-gray-300 rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-minecraft-green">
<option value="javascript">JavaScript</option>
<option value="json">JSON</option>
<option value="command">Minecraft Command</option>
</select>
</div>
<div class="flex space-x-2">
<button id="reset-editor" class="bg-gray-200 hover:bg-gray-300 text-gray-700 py-1 px-3 rounded text-sm transition-colors">
<i class="fa fa-refresh mr-1"></i> Reset
</button>
<button id="save-code" class="bg-minecraft-green hover:bg-minecraft-dark-green text-white py-1 px-3 rounded text-sm transition-colors">
<i class="fa fa-save mr-1"></i> Save
</button>
</div>
</div>
<div id="code-editor-container" class="h-96 rounded-lg overflow-hidden"></div>
</div>
<!-- Preview Panel -->
<div class="lg:w-1/2 flex flex-col gap-6">
<!-- Code Preview -->
<div class="bg-minecraft-gray p-4 rounded-lg shadow-lg blocky">
<h3 class="text-xl font-bold mb-4 text-minecraft-dark">Code Preview</h3>
<div id="code-preview" class="h-48 bg-white rounded-lg p-4 overflow-auto">
<p class="text-gray-500 text-center italic">Your code will be previewed here...</p>
</div>
</div>
<!-- 3D Preview -->
<div class="bg-minecraft-gray p-4 rounded-lg shadow-lg blocky">
<h3 class="text-xl font-bold mb-4 text-minecraft-dark">3D Preview</h3>
<div id="3d-preview" class="h-48 bg-[#87CEEB] rounded-lg relative overflow-hidden">
<canvas id="preview-canvas" class="w-full h-full"></canvas>
<div class="absolute bottom-2 right-2 flex space-x-2">
<button class="bg-white bg-opacity-70 hover:bg-opacity-100 p-2 rounded-full transition-colors">
<i class="fa fa-plus"></i>
</button>
<button class="bg-white bg-opacity-70 hover:bg-opacity-100 p-2 rounded-full transition-colors">
<i class="fa fa-minus"></i>
</button>
<button class="bg-white bg-opacity-70 hover:bg-opacity-100 p-2 rounded-full transition-colors">
<i class="fa fa-refresh"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Example Code Snippets -->
<div class="mt-12">
<h3 class="text-2xl font-bold mb-6 text-minecraft-dark-green">Example Code Snippets</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<button class="example-code bg-white border border-gray-300 hover:border-minecraft-green rounded-lg p-3 text-left transition-colors blocky-btn">
<h4 class="font-bold text-minecraft-dark">Teleport Command</h4>
<p class="text-sm text-gray-600">Teleport to any location in your world</p>
</button>
<button class="example-code bg-white border border-gray-300 hover:border-minecraft-green rounded-lg p-3 text-left transition-colors blocky-btn">
<h4 class="font-bold text-minecraft-dark">Custom Item</h4>
<p class="text-sm text-gray-600">Create a custom item with unique properties</p>
</button>
<button class="example-code bg-white border border-gray-300 hover:border-minecraft-green rounded-lg p-3 text-left transition-colors blocky-btn">
<h4 class="font-bold text-minecraft-dark">Mob Spawner</h4>
<p class="text-sm text-gray-600">Spawn custom mobs with specific attributes</p>
</button>
</div>
</div>
</div>
</section>
<!-- Community Section -->
<section id="community" class="py-16 bg-minecraft-gray">
<div class="container mx-auto px-4">
<h2 class="text-3xl md:text-4xl font-bold text-center mb-4 text-minecraft-dark-green">
Community Showcase
</h2>
<p class="text-center text-gray-700 mb-12 max-w-2xl mx-auto">
Discover amazing creations from our community of Minecraft coders. Share your own projects and get feedback.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Community Project 1 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow blocky">
<img src="https://p26-doubao-search-sign.byteimg.com/labis/bd3c960f7fa21ad8cbde364f4218133d~tplv-be4g95zd3a-image.jpeg?rk3s=542c0f93&x-expires=1764985936&x-signature=lTcJ%2FlX9DTkANSpoYiB77p6DJZ8%3D" alt="Minecraft Castle" class="w-full h-48 object-cover">
<div class="p-6">
<div class="flex justify-between items-center mb-3">
<span class="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded">Datapack</span>
<div class="flex items-center">
<button class="text-gray-400 hover:text-yellow-500 mr-2">
有帮助，赞一个