File size: 4,877 Bytes
80c0783 | 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 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SquirrelVision 3D Playground</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/three@0.132.2/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/jsm/controls/PointerLockControls.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/jsm/loaders/GLTFLoader.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body class="bg-gray-900 text-white overflow-hidden">
<!-- Navigation -->
<script src="components/navigation.js"></script>
<custom-navigation></custom-navigation>
<!-- Game Container -->
<div id="gameContainer" class="w-full h-screen relative">
<!-- Loading Screen -->
<div id="loadingScreen" class="absolute inset-0 bg-gray-900 flex flex-col items-center justify-center z-50">
<div class="text-4xl font-bold mb-4 bg-gradient-to-r from-green-400 to-blue-500 bg-clip-text text-transparent">
SquirrelVision 3D Playground
</div>
<div class="text-xl text-gray-300 mb-8">Loading your adventure...</div>
<div class="w-64 h-2 bg-gray-700 rounded-full overflow-hidden">
<div id="progressBar" class="h-full bg-gradient-to-r from-green-500 to-blue-600 transition-all duration-300"></div>
</div>
<div class="mt-4 text-gray-400" id="loadingText">Initializing 3D engine...</div>
</div>
<!-- UI Overlay -->
<div id="uiOverlay" class="absolute inset-0 pointer-events-none z-40 hidden">
<!-- Crosshair -->
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-4 h-4">
<div class="absolute top-1/2 left-0 w-2 h-0.5 bg-white opacity-60"></div>
<div class="absolute top-1/2 right-0 w-2 h-0.5 bg-white opacity-60"></div>
<div class="absolute left-1/2 top-0 h-2 w-0.5 bg-white opacity-60"></div>
<div class="absolute left-1/2 bottom-0 h-2 w-0.5 bg-white opacity-60"></div>
</div>
<!-- Instructions -->
<div class="absolute bottom-4 left-4 bg-black bg-opacity-50 p-4 rounded-lg pointer-events-auto">
<div class="text-sm space-y-2">
<div class="flex items-center space-x-2">
<span class="bg-gray-700 px-2 py-1 rounded text-xs">WASD</span>
<span>Move around</span>
</div>
<div class="flex items-center space-x-2">
<span class="bg-gray-700 px-2 py-1 rounded text-xs">Mouse</span>
<span>Look around</span>
</div>
<div class="flex items-center space-x-2">
<span class="bg-gray-700 px-2 py-1 rounded text-xs">Space</span>
<span>Jump</span>
</div>
<div class="flex items-center space-x-2">
<span class="bg-gray-700 px-2 py-1 rounded text-xs">E</span>
<span>Interact</span>
</div>
</div>
</div>
<!-- Interaction Prompt -->
<div id="interactionPrompt" class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-8 bg-black bg-opacity-70 px-4 py-2 rounded-lg text-center hidden">
<div class="text-sm">Press <span class="bg-gray-700 px-2 py-1 rounded text-xs">E</span> to interact</div>
</div>
</div>
<!-- Start Screen -->
<div id="startScreen" class="absolute inset-0 bg-black bg-opacity-80 flex flex-col items-center justify-center z-30">
<div class="text-6xl font-bold mb-4 bg-gradient-to-r from-green-400 to-blue-500 bg-clip-text text-transparent">
SquirrelVision
</div>
<div class="text-2xl text-gray-300 mb-8">3D Playground Explorer</div>
<button id="startButton" class="bg-gradient-to-r from-green-500 to-blue-600 hover:from-green-600 hover:to-blue-700 px-8 py-4 rounded-lg font-bold text-xl transition-all transform hover:scale-105">
Enter Playground
</button>
<div class="mt-8 text-gray-400 text-center max-w-md">
Explore the 3D world, interact with objects, and experience the power of our sandbox environment.
</div>
</div>
</div>
<!-- Game Script -->
<script src="playground.js"></script>
<script src="components/navigation.js"></script>
</body>
</html> |