File size: 7,730 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
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SquirrelView 3D Sandbox Explorer</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>
    <link rel="stylesheet" href="style.css">
</head>
<body class="bg-gradient-to-br from-gray-900 to-gray-800 min-h-screen text-white">
    <!-- Navigation Component -->
    <script src="components/navigation.js"></script>
    <custom-navigation></custom-navigation>

    <!-- Main Content -->
    <main class="container mx-auto px-4 py-8">
        <!-- Hero Section -->
        <section class="text-center mb-16">
            <h1 class="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-green-400 to-blue-500 bg-clip-text text-transparent">
                SquirrelView 3D Sandbox
            </h1>
            <p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl mx-auto">
                A powerful 3D model testing environment with full controller support. 
                Walk around, interact with assets, and test your models in real-time.
            </p>
            
            <!-- Quick Actions -->
            <div class="flex flex-wrap justify-center gap-4 mb-12">
                <button class="bg-green-600 hover:bg-green-700 px-6 py-3 rounded-lg font-semibold transition-all transform hover:scale-105">
                    <i data-feather="download" class="inline mr-2"></i>Download Python Script
                </button>
                <button class="bg-blue-600 hover:bg-blue-700 px-6 py-3 rounded-lg font-semibold transition-all transform hover:scale-105">
                    <i data-feather="book-open" class="inline mr-2"></i>View Documentation
                </button>
            </div>
        </section>

        <!-- Features Grid -->
        <section class="mb-16">
            <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Powerful Features</h2>
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Feature 1 -->
                <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition-all">
                    <div class="w-12 h-12 bg-green-500 rounded-lg flex items-center justify-center mb-4">
                        <i data-feather="box" class="text-white"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">Multi-Format Support</h3>
                    <p class="text-gray-300">Import .glb, .obj, and .stl files with seamless integration into your 3D world.</p>
                </div>

                <!-- Feature 2 -->
                <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition-all">
                    <div class="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center mb-4">
                        <i data-feather="gamepad" class="text-white"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">PS4 Controller Support</h3>
                    <p class="text-gray-300">Full analog stick support and button mapping for intuitive navigation.</p>
                </div>

                <!-- Feature 3 -->
                <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition-all">
                    <div class="w-12 h-12 bg-purple-500 rounded-lg flex items-center justify-center mb-4">
                        <i data-feather="eye" class="text-white"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">Real-time Inspection</h3>
                    <p class="text-gray-300">Toggle between first-person and free-fly modes for detailed model analysis.</p>
                </div>

                <!-- Feature 4 -->
                <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition-all">
                    <div class="w-12 h-12 bg-yellow-500 rounded-lg flex items-center justify-center mb-4">
                        <i data-feather="save" class="text-white"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">Save/Load Worlds</h3>
                    <p class="text-gray-300">Preserve your sandbox configurations and asset placements between sessions.</p>
                </div>

                <!-- Feature 5 -->
                <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition-all">
                    <div class="w-12 h-12 bg-red-500 rounded-lg flex items-center justify-center mb-4">
                        <i data-feather="cpu" class="text-white"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">Interactive NPCs</h3>
                    <p class="text-gray-300">Squirrel NPCs provide UI triggers and helpful guidance throughout your testing.</p>
                </div>

                <!-- Feature 6 -->
                <div class="bg-gray-800 rounded-xl p-6 hover:bg-gray-700 transition-all">
                    <div class="w-12 h-12 bg-indigo-500 rounded-lg flex items-center justify-center mb-4">
                        <i data-feather="sliders" class="text-white"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">Asset Inspector</h3>
                    <p class="text-gray-300">Real-time property editing including rotation, scale, and material toggles.</p>
                </div>
            </div>
        </section>

        <!-- Code Preview -->
        <section class="bg-gray-800 rounded-xl p-8 mb-16">
            <h2 class="text-3xl font-bold mb-6">Python Script Preview</h2>
            <div class="bg-gray-900 rounded-lg p-4 overflow-x-auto">
                <pre><code class="language-python">import ursina as u
from ursina.prefabs.first_person_controller import FirstPersonController

# Initialize Ursina application
app = u.Ursina()

# Create basic world geometry
ground = u.Entity(model='plane', scale=(100,1,100), color=u.color.green)
sky = u.Sky()

# Player controller with PS4 support
player = FirstPersonController()
player.speed = 8

# Squirrel NPC for UI interactions
squirrel = u.Entity(
    model='cube',
    color=u.color.orange,
    position=(5, 0.5, 5),
    scale=(1, 1, 1)
)

def update():
    # PS4 controller input handling
    if u.held_keys['gamepad left stick x']:
        player.x += u.time.dt * u.held_keys['gamepad left stick x'] * player.speed
    # Add more controller mappings...

app.run()</code></pre>
            </div>
        </section>

        <!-- Download Section -->
        <section class="text-center bg-gray-800 rounded-xl p-8">
            <h2 class="text-3xl font-bold mb-4">Ready to Explore?</h2>
            <p class="text-gray-300 mb-6">Download the complete Python script and start testing your 3D models today!</p>
            <button 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-lg transition-all transform hover:scale-105">
                <i data-feather="download" class="inline mr-2"></i>Download Full Script
            </button>
        </section>
    </main>

    <!-- Footer Component -->
    <script src="Can you finish the project to make the whole thing give me let me be able to walk around and feel what it's like to do this oPpcomponents/footer.js"></script>
    <custom-footer></custom-footer>

    <script src="script.js"></script>
    <script>feather.replace();</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>