Hugging Face's logo

Spaces:
chichimedia
/
cubeplay-interactive-3d-red-cube-experience
Running

App Files Community
chichimedia commited on
Commit
76f1992
·
verified ·
1 Parent(s): 0c8ce47

Instead of drawing make it a 3D interactive canvas with a cube as the object

Browse files
Files changed (6) hide show
  1. README.md +7 -4
  2. components/footer.js +167 -0
  3. components/navbar.js +180 -0
  4. index.html +201 -19
  5. script.js +293 -0
  6. style.css +122 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Cubeplay Interactive 3d Red Cube Experience
3
- emoji: 💻
4
- colorFrom: gray
5
  colorTo: pink
 
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: CubePlay - Interactive 3D Red Cube Experience 🔴
3
+ colorFrom: yellow
 
4
  colorTo: pink
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
components/footer.js ADDED
@@ -0,0 +1,167 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomFooter extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ margin-top: 4rem;
9
+ border-top: 1px solid rgba(55, 65, 81, 0.5);
10
+ background: rgba(17, 24, 39, 0.8);
11
+ }
12
+
13
+ .footer {
14
+ max-width: 1200px;
15
+ margin: 0 auto;
16
+ padding: 2rem;
17
+ }
18
+
19
+ .footer-content {
20
+ display: flex;
21
+ flex-direction: column;
22
+ align-items: center;
23
+ gap: 1.5rem;
24
+ text-align: center;
25
+ }
26
+
27
+ .footer-logo {
28
+ display: flex;
29
+ align-items: center;
30
+ gap: 0.75rem;
31
+ font-weight: 700;
32
+ font-size: 1.25rem;
33
+ color: white;
34
+ }
35
+
36
+ .footer-links {
37
+ display: flex;
38
+ gap: 2rem;
39
+ flex-wrap: wrap;
40
+ justify-content: center;
41
+ }
42
+
43
+ .footer-link {
44
+ color: #9ca3af;
45
+ text-decoration: none;
46
+ transition: color 0.2s;
47
+ display: flex;
48
+ align-items: center;
49
+ gap: 0.5rem;
50
+ }
51
+
52
+ .footer-link:hover {
53
+ color: #ef4444;
54
+ }
55
+
56
+ .footer-copyright {
57
+ color: #6b7280;
58
+ font-size: 0.875rem;
59
+ margin-top: 1rem;
60
+ }
61
+
62
+ .tech-stack {
63
+ display: flex;
64
+ gap: 1rem;
65
+ align-items: center;
66
+ justify-content: center;
67
+ flex-wrap: wrap;
68
+ }
69
+
70
+ .tech-item {
71
+ background: rgba(55, 65, 81, 0.5);
72
+ padding: 0.5rem 1rem;
73
+ border-radius: 0.5rem;
74
+ font-size: 0.875rem;
75
+ color: #d1d5db;
76
+ display: flex;
77
+ align-items: center;
78
+ gap: 0.5rem;
79
+ }
80
+
81
+ @media (max-width: 768px) {
82
+ .footer {
83
+ padding: 1.5rem;
84
+ }
85
+
86
+ .footer-links {
87
+ flex-direction: column;
88
+ gap: 1rem;
89
+ }
90
+
91
+ .tech-stack {
92
+ flex-direction: column;
93
+ }
94
+ }
95
+ </style>
96
+
97
+ <footer class="footer">
98
+ <div class="footer-content">
99
+ <div class="footer-logo">
100
+ <i data-feather="cube"></i>
101
+ <span>CubePlay 3D</span>
102
+ </div>
103
+
104
+ <div class="tech-stack">
105
+ <span class="tech-item">
106
+ <i data-feather="zap"></i>
107
+ Three.js
108
+ </span>
109
+ <span class="tech-item">
110
+ <i data-feather="cpu"></i>
111
+ WebGL
112
+ </span>
113
+ <span class="tech-item">
114
+ <i data-feather="code"></i>
115
+ JavaScript
116
+ </span>
117
+ <span class="tech-item">
118
+ <i data-feather="layers"></i>
119
+ TailwindCSS
120
+ </span>
121
+ </div>
122
+
123
+ <div class="footer-links">
124
+ <a href="#" class="footer-link">
125
+ <i data-feather="info"></i>
126
+ About
127
+ </a>
128
+ <a href="#" class="footer-link">
129
+ <i data-feather="file-text"></i>
130
+ Documentation
131
+ </a>
132
+ <a href="#" class="footer-link">
133
+ <i data-feather="shield"></i>
134
+ Privacy
135
+ </a>
136
+ <a href="#" class="footer-link">
137
+ <i data-feather="mail"></i>
138
+ Contact
139
+ </a>
140
+ <a href="https://threejs.org" target="_blank" class="footer-link">
141
+ <i data-feather="external-link"></i>
142
+ Three.js
143
+ </a>
144
+ </div>
145
+
146
+ <div class="footer-copyright">
147
+ <p>© ${new Date().getFullYear()} CubePlay - Interactive 3D Experience. Built with passion for 3D graphics.</p>
148
+ <p class="mt-1">All cube interactions are processed client-side using WebGL.</p>
149
+ </div>
150
+ </div>
151
+ </footer>
152
+ `;
153
+
154
+ // Initialize feather icons in shadow DOM
155
+ const featherScript = document.createElement('script');
156
+ featherScript.src = 'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js';
157
+ this.shadowRoot.appendChild(featherScript);
158
+
159
+ featherScript.onload = () => {
160
+ if (window.feather) {
161
+ window.feather.replace();
162
+ }
163
+ };
164
+ }
165
+ }
166
+
167
+ customElements.define('custom-footer', CustomFooter);
components/navbar.js ADDED
@@ -0,0 +1,180 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ position: fixed;
9
+ top: 0;
10
+ left: 0;
11
+ right: 0;
12
+ z-index: 50;
13
+ backdrop-filter: blur(10px);
14
+ background: rgba(17, 24, 39, 0.8);
15
+ border-bottom: 1px solid rgba(55, 65, 81, 0.5);
16
+ }
17
+
18
+ .navbar {
19
+ display: flex;
20
+ justify-content: space-between;
21
+ align-items: center;
22
+ padding: 1rem 2rem;
23
+ max-width: 1200px;
24
+ margin: 0 auto;
25
+ }
26
+
27
+ .logo {
28
+ display: flex;
29
+ align-items: center;
30
+ gap: 0.75rem;
31
+ font-weight: 700;
32
+ font-size: 1.5rem;
33
+ color: white;
34
+ text-decoration: none;
35
+ }
36
+
37
+ .logo-icon {
38
+ background: linear-gradient(135deg, #ef4444, #dc2626);
39
+ padding: 0.5rem;
40
+ border-radius: 0.75rem;
41
+ display: flex;
42
+ align-items: center;
43
+ justify-content: center;
44
+ }
45
+
46
+ .logo-text {
47
+ background: linear-gradient(90deg, #ef4444, #f97316);
48
+ -webkit-background-clip: text;
49
+ -webkit-text-fill-color: transparent;
50
+ }
51
+
52
+ .nav-links {
53
+ display: flex;
54
+ gap: 2rem;
55
+ align-items: center;
56
+ }
57
+
58
+ .nav-link {
59
+ color: #d1d5db;
60
+ text-decoration: none;
61
+ font-weight: 500;
62
+ transition: color 0.2s;
63
+ display: flex;
64
+ align-items: center;
65
+ gap: 0.5rem;
66
+ }
67
+
68
+ .nav-link:hover {
69
+ color: #ef4444;
70
+ }
71
+
72
+ .github-btn {
73
+ background: #374151;
74
+ color: white;
75
+ padding: 0.5rem 1rem;
76
+ border-radius: 0.5rem;
77
+ text-decoration: none;
78
+ font-weight: 500;
79
+ transition: background 0.2s;
80
+ display: flex;
81
+ align-items: center;
82
+ gap: 0.5rem;
83
+ }
84
+
85
+ .github-btn:hover {
86
+ background: #4b5563;
87
+ }
88
+
89
+ .mobile-menu-btn {
90
+ display: none;
91
+ background: none;
92
+ border: none;
93
+ color: white;
94
+ cursor: pointer;
95
+ padding: 0.5rem;
96
+ }
97
+
98
+ @media (max-width: 768px) {
99
+ .navbar {
100
+ padding: 1rem;
101
+ }
102
+
103
+ .nav-links {
104
+ display: none;
105
+ }
106
+
107
+ .mobile-menu-btn {
108
+ display: block;
109
+ }
110
+ }
111
+ </style>
112
+
113
+ <nav class="navbar">
114
+ <a href="#" class="logo">
115
+ <div class="logo-icon">
116
+ <i data-feather="cube"></i>
117
+ </div>
118
+ <span class="logo-text">CubePlay</span>
119
+ </a>
120
+
121
+ <div class="nav-links">
122
+ <a href="#" class="nav-link">
123
+ <i data-feather="home"></i>
124
+ Home
125
+ </a>
126
+ <a href="#" class="nav-link">
127
+ <i data-feather="camera"></i>
128
+ Gallery
129
+ </a>
130
+ <a href="#" class="nav-link">
131
+ <i data-feather="settings"></i>
132
+ Settings
133
+ </a>
134
+ <a href="https://github.com/public-apis/public-apis" target="_blank" class="github-btn">
135
+ <i data-feather="github"></i>
136
+ APIs
137
+ </a>
138
+ </div>
139
+
140
+ <button class="mobile-menu-btn">
141
+ <i data-feather="menu"></i>
142
+ </button>
143
+ </nav>
144
+ `;
145
+
146
+ // Initialize feather icons in shadow DOM
147
+ const featherScript = document.createElement('script');
148
+ featherScript.src = 'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js';
149
+ this.shadowRoot.appendChild(featherScript);
150
+
151
+ featherScript.onload = () => {
152
+ if (window.feather) {
153
+ window.feather.replace();
154
+ }
155
+ };
156
+
157
+ // Mobile menu toggle
158
+ const mobileMenuBtn = this.shadowRoot.querySelector('.mobile-menu-btn');
159
+ const navLinks = this.shadowRoot.querySelector('.nav-links');
160
+
161
+ mobileMenuBtn.addEventListener('click', () => {
162
+ const isVisible = navLinks.style.display === 'flex';
163
+ navLinks.style.display = isVisible ? 'none' : 'flex';
164
+
165
+ if (!isVisible) {
166
+ navLinks.style.position = 'absolute';
167
+ navLinks.style.top = '100%';
168
+ navLinks.style.left = '0';
169
+ navLinks.style.right = '0';
170
+ navLinks.style.backgroundColor = 'rgba(17, 24, 39, 0.95)';
171
+ navLinks.style.flexDirection = 'column';
172
+ navLinks.style.padding = '1rem';
173
+ navLinks.style.gap = '1rem';
174
+ navLinks.style.borderBottom = '1px solid rgba(55, 65, 81, 0.5)';
175
+ }
176
+ });
177
+ }
178
+ }
179
+
180
+ customElements.define('custom-navbar', CustomNavbar);
index.html CHANGED
@@ -1,19 +1,201 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CubePlay - Interactive 3D Experience</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
13
+ <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script>
14
+ </head>
15
+ <body class="bg-gray-900 text-white">
16
+ <!-- Navigation Component -->
17
+ <script src="components/navbar.js"></script>
18
+ <custom-navbar></custom-navbar>
19
+
20
+ <!-- Hero Section -->
21
+ <main class="container mx-auto px-4 pt-24">
22
+ <div class="text-center mb-12">
23
+ <h1 class="text-4xl md:text-6xl font-bold mb-4 bg-gradient-to-r from-red-500 to-red-700 bg-clip-text text-transparent">
24
+ CubePlay <span class="text-white">3D</span>
25
+ </h1>
26
+ <p class="text-xl text-gray-300 max-w-2xl mx-auto">
27
+ Interact with a dynamic 3D cube in real-time. Rotate, scale, and customize your experience!
28
+ </p>
29
+ </div>
30
+
31
+ <div class="flex flex-col lg:flex-row gap-8">
32
+ <!-- 3D Canvas Container -->
33
+ <div class="lg:w-2/3">
34
+ <div class="bg-gray-800 rounded-2xl p-2 shadow-2xl">
35
+ <div id="canvas-container" class="w-full h-[500px] rounded-xl overflow-hidden relative">
36
+ <canvas id="3d-canvas"></canvas>
37
+ <div class="absolute bottom-4 left-4 bg-black/50 backdrop-blur-sm px-3 py-2 rounded-lg">
38
+ <p class="text-sm flex items-center">
39
+ <i data-feather="move" class="w-4 h-4 mr-2"></i>
40
+ Drag to rotate • Scroll to zoom
41
+ </p>
42
+ </div>
43
+ </div>
44
+ </div>
45
+
46
+ <!-- Cube Stats -->
47
+ <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
48
+ <div class="bg-gray-800 p-4 rounded-xl">
49
+ <div class="flex items-center">
50
+ <i data-feather="rotate-cw" class="w-5 h-5 text-red-500 mr-2"></i>
51
+ <h3 class="font-semibold">Rotation</h3>
52
+ </div>
53
+ <p class="text-2xl font-bold mt-2" id="rotation-values">0°, 0°, 0°</p>
54
+ </div>
55
+ <div class="bg-gray-800 p-4 rounded-xl">
56
+ <div class="flex items-center">
57
+ <i data-feather="maximize" class="w-5 h-5 text-red-500 mr-2"></i>
58
+ <h3 class="font-semibold">Scale</h3>
59
+ </div>
60
+ <p class="text-2xl font-bold mt-2" id="scale-value">1.0x</p>
61
+ </div>
62
+ <div class="bg-gray-800 p-4 rounded-xl">
63
+ <div class="flex items-center">
64
+ <i data-feather="activity" class="w-5 h-5 text-red-500 mr-2"></i>
65
+ <h3 class="font-semibold">FPS</h3>
66
+ </div>
67
+ <p class="text-2xl font-bold mt-2" id="fps-counter">60</p>
68
+ </div>
69
+ </div>
70
+ </div>
71
+
72
+ <!-- Controls Panel -->
73
+ <div class="lg:w-1/3">
74
+ <div class="bg-gray-800 rounded-2xl p-6 shadow-2xl">
75
+ <h2 class="text-2xl font-bold mb-6 flex items-center">
76
+ <i data-feather="sliders" class="w-6 h-6 text-red-500 mr-3"></i>
77
+ Cube Controls
78
+ </h2>
79
+
80
+ <!-- Rotation Controls -->
81
+ <div class="mb-8">
82
+ <h3 class="text-lg font-semibold mb-4 text-gray-300">Rotation</h3>
83
+ <div class="space-y-4">
84
+ <div>
85
+ <label class="flex justify-between mb-2">
86
+ <span>X-axis</span>
87
+ <span id="x-rotation-value">0°</span>
88
+ </label>
89
+ <input type="range" min="0" max="360" value="0"
90
+ class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer slider-red"
91
+ id="x-rotation">
92
+ </div>
93
+ <div>
94
+ <label class="flex justify-between mb-2">
95
+ <span>Y-axis</span>
96
+ <span id="y-rotation-value">0°</span>
97
+ </label>
98
+ <input type="range" min="0" max="360" value="0"
99
+ class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer slider-red"
100
+ id="y-rotation">
101
+ </div>
102
+ <div>
103
+ <label class="flex justify-between mb-2">
104
+ <span>Z-axis</span>
105
+ <span id="z-rotation-value">0°</span>
106
+ </label>
107
+ <input type="range" min="0" max="360" value="0"
108
+ class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer slider-red"
109
+ id="z-rotation">
110
+ </div>
111
+ </div>
112
+ </div>
113
+
114
+ <!-- Scale Control -->
115
+ <div class="mb-8">
116
+ <h3 class="text-lg font-semibold mb-4 text-gray-300">Scale</h3>
117
+ <div>
118
+ <label class="flex justify-between mb-2">
119
+ <span>Cube Size</span>
120
+ <span id="scale-display">1.0</span>
121
+ </label>
122
+ <input type="range" min="0.5" max="3" step="0.1" value="1"
123
+ class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer slider-red"
124
+ id="scale-control">
125
+ </div>
126
+ </div>
127
+
128
+ <!-- Color Presets -->
129
+ <div class="mb-8">
130
+ <h3 class="text-lg font-semibold mb-4 text-gray-300">Color Presets</h3>
131
+ <div class="grid grid-cols-3 gap-3">
132
+ <button class="color-preset bg-red-500 p-4 rounded-lg hover:opacity-90 transition" data-color="red">
133
+ <i data-feather="square" class="mx-auto"></i>
134
+ </button>
135
+ <button class="color-preset bg-blue-500 p-4 rounded-lg hover:opacity-90 transition" data-color="blue">
136
+ <i data-feather="square" class="mx-auto"></i>
137
+ </button>
138
+ <button class="color-preset bg-green-500 p-4 rounded-lg hover:opacity-90 transition" data-color="green">
139
+ <i data-feather="square" class="mx-auto"></i>
140
+ </button>
141
+ <button class="color-preset bg-purple-500 p-4 rounded-lg hover:opacity-90 transition" data-color="purple">
142
+ <i data-feather="square" class="mx-auto"></i>
143
+ </button>
144
+ <button class="color-preset bg-yellow-500 p-4 rounded-lg hover:opacity-90 transition" data-color="yellow">
145
+ <i data-feather="square" class="mx-auto"></i>
146
+ </button>
147
+ <button class="color-preset bg-pink-500 p-4 rounded-lg hover:opacity-90 transition" data-color="pink">
148
+ <i data-feather="square" class="mx-auto"></i>
149
+ </button>
150
+ </div>
151
+ </div>
152
+
153
+ <!-- Action Buttons -->
154
+ <div class="grid grid-cols-2 gap-4">
155
+ <button id="reset-btn" class="bg-gray-700 hover:bg-gray-600 py-3 rounded-lg font-medium transition flex items-center justify-center">
156
+ <i data-feather="refresh-cw" class="w-5 h-5 mr-2"></i>
157
+ Reset
158
+ </button>
159
+ <button id="auto-rotate-btn" class="bg-red-600 hover:bg-red-700 py-3 rounded-lg font-medium transition flex items-center justify-center">
160
+ <i data-feather="play" class="w-5 h-5 mr-2"></i>
161
+ Auto Rotate
162
+ </button>
163
+ </div>
164
+ </div>
165
+
166
+ <!-- Info Panel -->
167
+ <div class="mt-6 bg-gray-800 rounded-2xl p-6">
168
+ <h3 class="text-lg font-semibold mb-4 flex items-center">
169
+ <i data-feather="info" class="w-5 h-5 text-red-500 mr-2"></i>
170
+ About This Demo
171
+ </h3>
172
+ <p class="text-gray-300 mb-4">
173
+ This 3D interactive cube is built with Three.js. You can rotate it by dragging, zoom with scroll, and use the controls to customize its appearance.
174
+ </p>
175
+ <div class="text-sm text-gray-400">
176
+ <p class="flex items-center mb-2">
177
+ <i data-feather="cpu" class="w-4 h-4 mr-2"></i>
178
+ Powered by WebGL & Three.js
179
+ </p>
180
+ <p class="flex items-center">
181
+ <i data-feather="mouse-pointer" class="w-4 h-4 mr-2"></i>
182
+ Fully interactive with mouse/touch controls
183
+ </p>
184
+ </div>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </main>
189
+
190
+ <!-- Footer Component -->
191
+ <script src="components/footer.js"></script>
192
+ <custom-footer></custom-footer>
193
+
194
+ <!-- Scripts -->
195
+ <script src="script.js"></script>
196
+ <script>
197
+ feather.replace();
198
+ </script>
199
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
200
+ </body>
201
+ </html>
script.js ADDED
@@ -0,0 +1,293 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Main 3D Scene Setup
2
+ class CubeScene {
3
+ constructor() {
4
+ this.scene = null;
5
+ this.camera = null;
6
+ this.renderer = null;
7
+ this.cube = null;
8
+ this.controls = null;
9
+ this.autoRotate = false;
10
+ this.rotationSpeed = 0.01;
11
+ this.frameCount = 0;
12
+ this.fps = 60;
13
+ this.lastTimestamp = performance.now();
14
+ this.currentColor = 0xef4444; // Red-500 hex
15
+
16
+ this.init();
17
+ this.animate();
18
+ this.setupEventListeners();
19
+ this.setupFPSCounter();
20
+ }
21
+
22
+ init() {
23
+ // Create scene
24
+ this.scene = new THREE.Scene();
25
+ this.scene.background = new THREE.Color(0x111827); // gray-900
26
+
27
+ // Create camera
28
+ this.camera = new THREE.PerspectiveCamera(75, this.getAspectRatio(), 0.1, 1000);
29
+ this.camera.position.z = 5;
30
+
31
+ // Create renderer
32
+ const canvas = document.getElementById('3d-canvas');
33
+ this.renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
34
+ this.renderer.setSize(canvas.clientWidth, canvas.clientHeight);
35
+ this.renderer.setPixelRatio(window.devicePixelRatio);
36
+
37
+ // Add orbit controls
38
+ this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
39
+ this.controls.enableDamping = true;
40
+ this.controls.dampingFactor = 0.05;
41
+
42
+ // Create cube
43
+ const geometry = new THREE.BoxGeometry(2, 2, 2);
44
+ const material = new THREE.MeshPhongMaterial({
45
+ color: this.currentColor,
46
+ shininess: 100,
47
+ specular: 0x222222
48
+ });
49
+ this.cube = new THREE.Mesh(geometry, material);
50
+ this.scene.add(this.cube);
51
+
52
+ // Add lights
53
+ const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
54
+ this.scene.add(ambientLight);
55
+
56
+ const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
57
+ directionalLight.position.set(5, 5, 5);
58
+ this.scene.add(directionalLight);
59
+
60
+ const redLight = new THREE.PointLight(0xef4444, 0.5, 10);
61
+ redLight.position.set(-3, -3, 3);
62
+ this.scene.add(redLight);
63
+
64
+ // Add grid helper
65
+ const gridHelper = new THREE.GridHelper(10, 10, 0x444444, 0x222222);
66
+ this.scene.add(gridHelper);
67
+
68
+ // Handle window resize
69
+ window.addEventListener('resize', () => this.onWindowResize());
70
+ }
71
+
72
+ getAspectRatio() {
73
+ const container = document.getElementById('canvas-container');
74
+ return container.clientWidth / container.clientHeight;
75
+ }
76
+
77
+ onWindowResize() {
78
+ const container = document.getElementById('canvas-container');
79
+ this.camera.aspect = container.clientWidth / container.clientHeight;
80
+ this.camera.updateProjectionMatrix();
81
+ this.renderer.setSize(container.clientWidth, container.clientHeight);
82
+ }
83
+
84
+ animate() {
85
+ requestAnimationFrame(() => this.animate());
86
+
87
+ // Auto rotation
88
+ if (this.autoRotate) {
89
+ this.cube.rotation.x += this.rotationSpeed;
90
+ this.cube.rotation.y += this.rotationSpeed * 1.2;
91
+ }
92
+
93
+ // Update controls
94
+ this.controls.update();
95
+
96
+ // Update rotation display
97
+ this.updateRotationDisplay();
98
+
99
+ // Calculate FPS
100
+ this.calculateFPS();
101
+
102
+ // Render scene
103
+ this.renderer.render(this.scene, this.camera);
104
+ }
105
+
106
+ updateRotationDisplay() {
107
+ const x = ((this.cube.rotation.x * 180) / Math.PI).toFixed(1);
108
+ const y = ((this.cube.rotation.y * 180) / Math.PI).toFixed(1);
109
+ const z = ((this.cube.rotation.z * 180) / Math.PI).toFixed(1);
110
+
111
+ document.getElementById('rotation-values').textContent = `${x}°, ${y}°, ${z}°`;
112
+ document.getElementById('x-rotation-value').textContent = `${x}°`;
113
+ document.getElementById('y-rotation-value').textContent = `${y}°`;
114
+ document.getElementById('z-rotation-value').textContent = `${z}°`;
115
+ }
116
+
117
+ calculateFPS() {
118
+ this.frameCount++;
119
+ const now = performance.now();
120
+ const elapsed = now - this.lastTimestamp;
121
+
122
+ if (elapsed >= 1000) {
123
+ this.fps = Math.round((this.frameCount * 1000) / elapsed);
124
+ document.getElementById('fps-counter').textContent = this.fps;
125
+ this.frameCount = 0;
126
+ this.lastTimestamp = now;
127
+ }
128
+ }
129
+
130
+ setupEventListeners() {
131
+ // Rotation sliders
132
+ document.getElementById('x-rotation').addEventListener('input', (e) => {
133
+ this.cube.rotation.x = (e.target.value * Math.PI) / 180;
134
+ });
135
+
136
+ document.getElementById('y-rotation').addEventListener('input', (e) => {
137
+ this.cube.rotation.y = (e.target.value * Math.PI) / 180;
138
+ });
139
+
140
+ document.getElementById('z-rotation').addEventListener('input', (e) => {
141
+ this.cube.rotation.z = (e.target.value * Math.PI) / 180;
142
+ });
143
+
144
+ // Scale slider
145
+ document.getElementById('scale-control').addEventListener('input', (e) => {
146
+ const scale = parseFloat(e.target.value);
147
+ this.cube.scale.set(scale, scale, scale);
148
+ document.getElementById('scale-value').textContent = `${scale.toFixed(1)}x`;
149
+ document.getElementById('scale-display').textContent = scale.toFixed(1);
150
+ });
151
+
152
+ // Color presets
153
+ document.querySelectorAll('.color-preset').forEach(button => {
154
+ button.addEventListener('click', (e) => {
155
+ const color = e.currentTarget.dataset.color;
156
+ this.changeCubeColor(color);
157
+
158
+ // Update active state
159
+ document.querySelectorAll('.color-preset').forEach(btn => {
160
+ btn.classList.remove('active');
161
+ });
162
+ e.currentTarget.classList.add('active');
163
+ });
164
+ });
165
+
166
+ // Reset button
167
+ document.getElementById('reset-btn').addEventListener('click', () => {
168
+ this.resetCube();
169
+ });
170
+
171
+ // Auto rotate button
172
+ const autoRotateBtn = document.getElementById('auto-rotate-btn');
173
+ autoRotateBtn.addEventListener('click', () => {
174
+ this.toggleAutoRotate();
175
+ const icon = autoRotateBtn.querySelector('i');
176
+ if (this.autoRotate) {
177
+ autoRotateBtn.classList.add('pulse');
178
+ icon.setAttribute('data-feather', 'pause');
179
+ autoRotateBtn.innerHTML = '<i data-feather="pause" class="w-5 h-5 mr-2"></i>Pause Rotation';
180
+ } else {
181
+ autoRotateBtn.classList.remove('pulse');
182
+ icon.setAttribute('data-feather', 'play');
183
+ autoRotateBtn.innerHTML = '<i data-feather="play" class="w-5 h-5 mr-2"></i>Auto Rotate';
184
+ }
185
+ feather.replace();
186
+ });
187
+ }
188
+
189
+ setupFPSCounter() {
190
+ // Update FPS every second
191
+ setInterval(() => {
192
+ document.getElementById('fps-counter').textContent = this.fps;
193
+ }, 1000);
194
+ }
195
+
196
+ changeCubeColor(colorName) {
197
+ const colorMap = {
198
+ red: 0xef4444,
199
+ blue: 0x3b82f6,
200
+ green: 0x10b981,
201
+ purple: 0x8b5cf6,
202
+ yellow: 0xf59e0b,
203
+ pink: 0xec4899
204
+ };
205
+
206
+ this.currentColor = colorMap[colorName] || 0xef4444;
207
+ this.cube.material.color.setHex(this.currentColor);
208
+ }
209
+
210
+ resetCube() {
211
+ // Reset rotation
212
+ this.cube.rotation.set(0, 0, 0);
213
+
214
+ // Reset scale
215
+ this.cube.scale.set(1, 1, 1);
216
+ document.getElementById('scale-control').value = 1;
217
+ document.getElementById('scale-value').textContent = '1.0x';
218
+ document.getElementById('scale-display').textContent = '1.0';
219
+
220
+ // Reset sliders
221
+ document.getElementById('x-rotation').value = 0;
222
+ document.getElementById('y-rotation').value = 0;
223
+ document.getElementById('z-rotation').value = 0;
224
+
225
+ // Reset color to red
226
+ this.changeCubeColor('red');
227
+ document.querySelectorAll('.color-preset').forEach(btn => {
228
+ btn.classList.remove('active');
229
+ });
230
+ document.querySelector('.color-preset[data-color="red"]').classList.add('active');
231
+
232
+ // Reset camera position
233
+ this.camera.position.set(0, 0, 5);
234
+ this.controls.update();
235
+
236
+ // Stop auto rotation
237
+ if (this.autoRotate) {
238
+ this.toggleAutoRotate();
239
+ const autoRotateBtn = document.getElementById('auto-rotate-btn');
240
+ autoRotateBtn.classList.remove('pulse');
241
+ autoRotateBtn.innerHTML = '<i data-feather="play" class="w-5 h-5 mr-2"></i>Auto Rotate';
242
+ feather.replace();
243
+ }
244
+ }
245
+
246
+ toggleAutoRotate() {
247
+ this.autoRotate = !this.autoRotate;
248
+ }
249
+ }
250
+
251
+ // Initialize the scene when DOM is loaded
252
+ document.addEventListener('DOMContentLoaded', () => {
253
+ new CubeScene();
254
+
255
+ // Initialize feather icons
256
+ feather.replace();
257
+
258
+ // Add hover effect to color presets
259
+ document.querySelectorAll('.color-preset').forEach(button => {
260
+ button.addEventListener('mouseenter', () => {
261
+ button.style.transform = 'translateY(-2px)';
262
+ });
263
+ button.addEventListener('mouseleave', () => {
264
+ if (!button.classList.contains('active')) {
265
+ button.style.transform = 'translateY(0)';
266
+ }
267
+ });
268
+ });
269
+
270
+ // Set red as active color preset
271
+ document.querySelector('.color-preset[data-color="red"]').classList.add('active');
272
+ });
273
+
274
+ // Add keyboard controls
275
+ document.addEventListener('keydown', (e) => {
276
+ const scene = window.cubeScene;
277
+ if (!scene) return;
278
+
279
+ switch(e.key.toLowerCase()) {
280
+ case 'r':
281
+ scene.resetCube();
282
+ break;
283
+ case ' ':
284
+ scene.toggleAutoRotate();
285
+ break;
286
+ case 'arrowup':
287
+ scene.cube.scale.multiplyScalar(1.1);
288
+ break;
289
+ case 'arrowdown':
290
+ scene.cube.scale.multiplyScalar(0.9);
291
+ break;
292
+ }
293
+ });
style.css CHANGED
@@ -1,28 +1,132 @@
 
 
 
 
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
 
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
 
 
 
 
 
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
2
+
3
+ * {
4
+ margin: 0;
5
+ padding: 0;
6
+ box-sizing: border-box;
7
+ font-family: 'Inter', sans-serif;
8
+ }
9
+
10
  body {
11
+ overflow-x: hidden;
12
+ }
13
+
14
+ /* Custom scrollbar */
15
+ ::-webkit-scrollbar {
16
+ width: 10px;
17
+ }
18
+
19
+ ::-webkit-scrollbar-track {
20
+ background: #1f2937;
21
+ }
22
+
23
+ ::-webkit-scrollbar-thumb {
24
+ background: #ef4444;
25
+ border-radius: 5px;
26
+ }
27
+
28
+ ::-webkit-scrollbar-thumb:hover {
29
+ background: #dc2626;
30
+ }
31
+
32
+ /* Custom slider styling */
33
+ .slider-red::-webkit-slider-thumb {
34
+ appearance: none;
35
+ width: 22px;
36
+ height: 22px;
37
+ border-radius: 50%;
38
+ background: #ef4444;
39
+ cursor: pointer;
40
+ border: 3px solid #1f2937;
41
+ box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
42
  }
43
 
44
+ .slider-red::-moz-range-thumb {
45
+ width: 22px;
46
+ height: 22px;
47
+ border-radius: 50%;
48
+ background: #ef4444;
49
+ cursor: pointer;
50
+ border: 3px solid #1f2937;
51
+ box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
52
  }
53
 
54
+ /* Canvas container glow effect */
55
+ #canvas-container {
56
+ position: relative;
 
 
57
  }
58
 
59
+ #canvas-container::before {
60
+ content: '';
61
+ position: absolute;
62
+ top: 0;
63
+ left: 0;
64
+ right: 0;
65
+ bottom: 0;
66
+ border-radius: 0.75rem;
67
+ background: linear-gradient(45deg, rgba(239, 68, 68, 0.1), transparent);
68
+ pointer-events: none;
69
+ z-index: 1;
70
  }
71
 
72
+ /* Color preset hover effects */
73
+ .color-preset {
74
+ transition: all 0.2s ease;
75
+ position: relative;
76
+ overflow: hidden;
77
  }
78
+
79
+ .color-preset::after {
80
+ content: '';
81
+ position: absolute;
82
+ top: 0;
83
+ left: 0;
84
+ right: 0;
85
+ bottom: 0;
86
+ background: rgba(255, 255, 255, 0.1);
87
+ opacity: 0;
88
+ transition: opacity 0.2s ease;
89
+ }
90
+
91
+ .color-preset:hover::after {
92
+ opacity: 1;
93
+ }
94
+
95
+ .color-preset.active {
96
+ transform: scale(0.95);
97
+ box-shadow: inset 0 0 0 2px white;
98
+ }
99
+
100
+ /* Pulse animation for active auto-rotate */
101
+ @keyframes pulse {
102
+ 0% {
103
+ box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
104
+ }
105
+ 70% {
106
+ box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
107
+ }
108
+ 100% {
109
+ box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
110
+ }
111
+ }
112
+
113
+ .pulse {
114
+ animation: pulse 2s infinite;
115
+ }
116
+
117
+ /* Responsive adjustments */
118
+ @media (max-width: 768px) {
119
+ #canvas-container {
120
+ height: 400px !important;
121
+ }
122
+ }
123
+
124
+ @media (max-width: 640px) {
125
+ #canvas-container {
126
+ height: 350px !important;
127
+ }
128
+
129
+ .text-4xl {
130
+ font-size: 2rem;
131
+ }
132
+ }