Spaces:
Running
Running
File size: 9,870 Bytes
59c2b00 6b4c73a 59c2b00 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CodeWizard Game Lab</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Fira Code', monospace;
}
.game-card {
background: rgba(15, 23, 42, 0.8);
backdrop-filter: blur(16px);
border: 1px solid rgba(124, 58, 237, 0.3);
transition: all 0.3s ease;
}
.game-card:hover {
border-color: rgba(124, 58, 237, 0.6);
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(124, 58, 237, 0.2);
}
.pixel-btn {
font-family: 'Fira Code', monospace;
background: linear-gradient(135deg, #6e8efb, #a777e3);
border: 2px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.pixel-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}
.game-pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
</style>
</head>
<body id="game-bg" class="min-h-screen text-white overflow-x-hidden">
<!-- Navigation -->
<nav class="relative z-10 py-6 px-6 md:px-12 flex justify-between items-center">
<div class="flex items-center space-x-2">
<i data-feather="cpu" class="text-purple-400"></i>
<span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-blue-500">Game Lab</span>
</div>
<div class="hidden md:flex space-x-8">
<a href="index.html" class="hover:text-purple-300 transition">Main</a>
<a href="quantum.html" class="hover:text-purple-300 transition">Quantum</a>
<a href="visual.html" class="hover:text-purple-300 transition">Visual</a>
<a href="hexa.html" class="hover:text-purple-300 transition">HEXA</a>
</div>
<button class="md:hidden">
<i data-feather="menu"></i>
</button>
</nav>
<!-- Main Content -->
<main class="relative z-10 container mx-auto px-6 md:px-12 py-16">
<div class="text-center mb-20">
<h1 class="text-4xl md:text-6xl font-bold mb-6">
<span class="bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-blue-500">Game</span> Development Lab
</h1>
<p class="text-xl text-gray-300 max-w-3xl mx-auto">
AI-powered game creation engine with real-time multi-agent collaboration
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
<!-- Game Builder -->
<div class="game-card rounded-xl p-8 game-pulse">
<div class="flex justify-center mb-6">
<div class="w-24 h-24 rounded-lg bg-gradient-to-br from-purple-900 to-blue-900 flex items-center justify-center">
<i data-feather="box" class="text-purple-400 w-12 h-12"></i>
</div>
</div>
<h3 class="text-2xl font-bold text-center mb-4">Game Builder</h3>
<p class="text-gray-300 mb-6">Visual interface to design your game world with AI assistance.</p>
<button class="w-full py-3 rounded-lg bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 transition font-medium pixel-btn">
Create Game
</button>
</div>
<!-- AI Agents -->
<div class="game-card rounded-xl p-8">
<div class="flex justify-center mb-6">
<div class="w-24 h-24 rounded-lg bg-gradient-to-br from-purple-900 to-blue-900 flex items-center justify-center">
<i data-feather="users" class="text-blue-400 w-12 h-12"></i>
</div>
</div>
<h3 class="text-2xl font-bold text-center mb-4">AI Agents</h3>
<p class="text-gray-300 mb-6">Specialized game development agents for every aspect of creation.</p>
<button class="w-full py-3 rounded-lg bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 transition font-medium pixel-btn">
Manage Agents
</button>
</div>
<!-- Asset Creator -->
<div class="game-card rounded-xl p-8">
<div class="flex justify-center mb-6">
<div class="w-24 h-24 rounded-lg bg-gradient-to-br from-purple-900 to-blue-900 flex items-center justify-center">
<i data-feather="image" class="text-pink-400 w-12 h-12"></i>
</div>
</div>
<h3 class="text-2xl font-bold text-center mb-4">Asset Creator</h3>
<p class="text-gray-300 mb-6">Generate game assets with AI-powered tools and templates.</p>
<button class="w-full py-3 rounded-lg bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 transition font-medium pixel-btn">
Create Assets
</button>
</div>
</div>
<!-- Game Console -->
<div class="game-card rounded-xl p-8 max-w-4xl mx-auto">
<div class="flex mb-6">
<div class="w-3 h-3 rounded-full bg-purple-500 mr-2"></div>
<div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div>
<div class="w-3 h-3 rounded-full bg-pink-500"></div>
</div>
<div class="font-mono">
<div class="flex items-center mb-4">
<span class="text-purple-400 mr-2">game></span>
<span class="text-white">init --template=platformer --agents=all</span>
</div>
<div class="text-blue-300 mb-2">> Initializing game project: Platform Adventure</div>
<div class="text-blue-300 mb-2">> Loading 5 specialized agents</div>
<div class="text-purple-300 mb-2">> Level Designer: Generating world map</div>
<div class="text-green-300 mb-4">> Asset Generator: Creating sprites and textures</div>
<div class="flex items-center">
<span class="text-purple-400 mr-2">game></span>
<span class="text-white flex-1 border-b border-purple-400">_</span>
</div>
</div>
</div>
<!-- Game Preview -->
<div class="game-card rounded-xl p-8 max-w-4xl mx-auto mt-12">
<h3 class="text-2xl font-bold mb-6 text-center">Live Game Preview</h3>
<div class="w-full h-64 bg-gradient-to-br from-purple-900 to-blue-900 rounded-lg flex items-center justify-center">
<div class="text-center">
<i data-feather="play" class="w-12 h-12 text-white mx-auto mb-4"></i>
<p class="text-gray-300">Game preview will appear here</p>
</div>
</div>
<div class="flex justify-center mt-6 space-x-4">
<button class="px-6 py-2 rounded-lg bg-green-500 hover:bg-green-600 transition">
Play Test
</button>
<button class="px-6 py-2 rounded-lg bg-purple-500 hover:bg-purple-600 transition">
Export
</button>
</div>
</div>
</main>
<footer class="relative z-10 py-12 px-6 md:px-12 bg-gray-900/50 mt-20">
<div class="container mx-auto text-center">
<p class="text-gray-400">© 2023 CodeWizard Game Lab. All agents are creative.</p>
</div>
</footer>
<script>
// Initialize Vanta.js background
VANTA.GLOBE({
el: "#game-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x7b5bfb,
backgroundColor: 0x0,
size: 0.8
});
// Initialize feather icons
document.addEventListener('DOMContentLoaded', () => {
feather.replace();
});
// Rotate game commands
const gameCommands = [
"generate assets --type=characters --count=5",
"build level --theme=forest --difficulty=medium",
"code mechanics --type=platformer --physics=2d",
"test --full --report=detailed"
];
let currentGameCmd = 0;
function rotateGameCommand() {
const terminal = document.querySelector('.game-card .font-mono div:last-child span:last-child');
terminal.textContent = gameCommands[currentGameCmd];
currentGameCmd = (currentGameCmd + 1) % gameCommands.length;
setTimeout(rotateGameCommand, 3000);
}
setTimeout(rotateGameCommand, 3000);
</script>
</body>
</html> |