mb672038 commited on
Commit
46428fd
·
verified ·
1 Parent(s): cc06fe5

در این فایلی که اتخاب کردم کی خوام یک سایت بنویسی برای تست گرافیک که سطحش بالا باشه و نتیجه هم بده

Browse files
Files changed (8) hide show
  1. benchmarks.html +264 -0
  2. compare.html +138 -0
  3. components/footer.js +121 -172
  4. components/navbar.js +107 -130
  5. index.html +0 -339
  6. script.js +66 -183
  7. style.css +172 -73
  8. visualizer.html +336 -0
benchmarks.html ADDED
@@ -0,0 +1,264 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Benchmarks | GraphicsLab</title>
7
+ <link rel="icon" type="image/x-icon" href="https://static.photos/technology/32x32/2">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
12
+ </head>
13
+ <body class="bg-gray-50 text-gray-900">
14
+ <custom-navbar></custom-navbar>
15
+
16
+ <main class="container mx-auto px-4 py-8">
17
+ <div class="mb-10">
18
+ <h1 class="text-4xl font-bold mb-4">Graphics Benchmarks</h1>
19
+ <p class="text-gray-600">Run high‑end graphics performance tests and compare results with global data.</p>
20
+ </div>
21
+
22
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
23
+ <div class="lg:col-span-2">
24
+ <div class="card mb-8">
25
+ <h2 class="text-2xl font-bold mb-4">Available Tests</h2>
26
+ <div class="space-y-6">
27
+ <div class="test-item p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition">
28
+ <div class="flex justify-between items-center">
29
+ <div>
30
+ <h3 class="text-xl font-bold">T‑Rex Shader</h3>
31
+ <p class="text-gray-600">Procedural dinosaur with dynamic lighting and shadows.</p>
32
+ <div class="mt-2 flex gap-2">
33
+ <span class="badge badge-webgl">WebGL 2</span>
34
+ <span class="badge badge-hard">High</span>
35
+ </div>
36
+ </div>
37
+ <button class="btn-primary" onclick="runBenchmark('trex')">
38
+ <i class="fas fa-play mr-2"></i> Run
39
+ </button>
40
+ </div>
41
+ <div class="mt-4">
42
+ <div class="flex justify-between text-sm text-gray-500">
43
+ <span>Estimated time: 5s</span>
44
+ <span>GPU‑intensive</span>
45
+ </div>
46
+ </div>
47
+ </div>
48
+
49
+ <div class="test-item p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition">
50
+ <div class="flex justify-between items-center">
51
+ <div>
52
+ <h3 class="text-xl font-bold">Fluid Simulation</h3>
53
+ <p class="text-gray-600">Real‑time fluid dynamics with 100k particles.</p>
54
+ <div class="mt-2 flex gap-2">
55
+ <span class="badge badge-canvas">Canvas 2D</span>
56
+ <span class="badge badge-medium">Medium</span>
57
+ </div>
58
+ </div>
59
+ <button class="btn-primary" onclick="runBenchmark('fluid')">
60
+ <i class="fas fa-play mr-2"></i> Run
61
+ </button>
62
+ </div>
63
+ <div class="mt-4">
64
+ <div class="flex justify-between text-sm text-gray-500">
65
+ <span>Estimated time: 8s</span>
66
+ <span>CPU‑intensive</span>
67
+ </div>
68
+ </div>
69
+ </div>
70
+
71
+ <div class="test-item p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition">
72
+ <div class="flex justify-between items-center">
73
+ <div>
74
+ <h3 class="text-xl font-bold">Ray Tracing</h3>
75
+ <p class="text-gray-600">Path‑traced scene with soft shadows and reflections.</p>
76
+ <div class="mt-2 flex gap-2">
77
+ <span class="badge badge-webgpu">WebGPU</span>
78
+ <span class="badge badge-hard">High</span>
79
+ </div>
80
+ </div>
81
+ <button class="btn-primary" onclick="runBenchmark('ray')">
82
+ <i class="fas fa-play mr-2"></i> Run
83
+ </button>
84
+ </div>
85
+ <div class="mt-4">
86
+ <div class="flex justify-between text-sm text-gray-500">
87
+ <span>Estimated time: 12s</span>
88
+ <span>GPU‑bound</span>
89
+ </div>
90
+ </div>
91
+ </div>
92
+
93
+ <div class="test-item p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition">
94
+ <div class="flex justify-between items-center">
95
+ <div>
96
+ <h3 class="text-xl font-bold">Texture Compression</h3>
97
+ <p class="text-gray-600">Batch compress 4K textures in‑browser.</p>
98
+ <div class="mt-2 flex gap-2">
99
+ <span class="badge badge-webgl">WebGL 1</span>
100
+ <span class="badge badge-easy">Low</span>
101
+ </div>
102
+ </div>
103
+ <button class="btn-primary" onclick="runBenchmark('texture')">
104
+ <i class="fas fa-play mr-2"></i> Run
105
+ </button>
106
+ </div>
107
+ <div class="mt-4">
108
+ <div class="flex justify-between text-sm text-gray-500">
109
+ <span>Estimated time: 3s</span>
110
+ <span>Memory‑intensive</span>
111
+ </div>
112
+ </div>
113
+ </div>
114
+ </div>
115
+ </div>
116
+
117
+ <div class="card">
118
+ <h2 class="text-2xl font-bold mb-4">Live Results</h2>
119
+ <div class="h-80">
120
+ <canvas id="resultsChart"></canvas>
121
+ </div>
122
+ </div>
123
+ </div>
124
+
125
+ <div>
126
+ <div class="card mb-8">
127
+ <h2 class="text-2xl font-bold mb-4">Your System</h2>
128
+ <div class="space-y-4">
129
+ <div class="flex justify-between">
130
+ <span class="text-gray-600">GPU Vendor</span>
131
+ <span class="font-semibold" id="gpuVendor">Detecting...</span>
132
+ </div>
133
+ <div class="flex justify-between">
134
+ <span class="text-gray-600">WebGL Support</span>
135
+ <span class="font-semibold" id="webglSupport">Checking...</span>
136
+ </div>
137
+ <div class="flex justify-between">
138
+ <span class="text-gray-600">Screen Resolution</span>
139
+ <span class="font-semibold" id="screenRes">—</span>
140
+ </div>
141
+ <div class="flex justify-between">
142
+ <span class="text-gray-600">Browser</span>
143
+ <span class="font-semibold" id="browserName">—</span>
144
+ </div>
145
+ <div class="flex justify-between">
146
+ <span class="text-gray-600">Memory</span>
147
+ <span class="font-semibold" id="memory">—</span>
148
+ </div>
149
+ </div>
150
+ <button class="btn-outline w-full mt-6" onclick="detectHardware()">
151
+ <i class="fas fa-sync-alt mr-2"></i> Re‑detect
152
+ </button>
153
+ </div>
154
+
155
+ <div class="card">
156
+ <h2 class="text-2xl font-bold mb-4">Global Ranking</h2>
157
+ <p class="text-gray-600 mb-4">Average scores from other users (simulated)</p>
158
+ <div class="space-y-3">
159
+ <div class="flex justify-between items-center p-3 bg-gray-50 rounded">
160
+ <div class="flex items-center">
161
+ <div class="w-8 h-8 rounded-full bg-purple-500 text-white flex items-center justify-center font-bold mr-3">1</div>
162
+ <div>
163
+ <div class="font-semibold">High‑End Desktop</div>
164
+ <div class="text-sm text-gray-500">RTX 4090, i9‑13900K</div>
165
+ </div>
166
+ </div>
167
+ <div class="text-2xl font-bold text-green-600">12,540</div>
168
+ </div>
169
+ <div class="flex justify-between items-center p-3 bg-gray-50 rounded">
170
+ <div class="flex items-center">
171
+ <div class="w-8 h-8 rounded-full bg-blue-500 text-white flex items-center justify-center font-bold mr-3">2</div>
172
+ <div>
173
+ <div class="font-semibold">Gaming Laptop</div>
174
+ <div class="text-sm text-gray-500">RTX 3070, Ryzen 7</div>
175
+ </div>
176
+ </div>
177
+ <div class="text-2xl font-bold text-blue-600">9,820</div>
178
+ </div>
179
+ <div class="flex justify-between items-center p-3 bg-gray-50 rounded">
180
+ <div class="flex items-center">
181
+ <div class="w-8 h-8 rounded-full bg-yellow-500 text-white flex items-center justify-center font-bold mr-3">3</div>
182
+ <div>
183
+ <div class="font-semibold">Integrated Graphics</div>
184
+ <div class="text-sm text-gray-500">Intel Iris Xe</div>
185
+ </div>
186
+ </div>
187
+ <div class="text-2xl font-bold text-yellow-600">4,310</div>
188
+ </div>
189
+ </div>
190
+ <a href="compare.html" class="btn-primary w-full mt-6">
191
+ <i class="fas fa-chart-bar mr-2"></i> Compare Your Results
192
+ </a>
193
+ </div>
194
+ </div>
195
+ </div>
196
+ </main>
197
+
198
+ <custom-footer></custom-footer>
199
+
200
+ <script src="components/navbar.js"></script>
201
+ <script src="components/footer.js"></script>
202
+ <script src="script.js"></script>
203
+ <script>
204
+ // Hardware detection
205
+ function detectHardware() {
206
+ const canvas = document.createElement('canvas');
207
+ const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
208
+ document.getElementById('gpuVendor').textContent = gl ? gl.getParameter(gl.VENDOR) || 'Unknown' : 'No WebGL';
209
+ document.getElementById('webglSupport').textContent = gl ? 'Yes' : 'No';
210
+ document.getElementById('screenRes').textContent = `${window.screen.width} × ${window.screen.height}`;
211
+ document.getElementById('browserName').textContent = navigator.userAgent.split(' ')[0];
212
+ document.getElementById('memory').textContent = navigator.deviceMemory ? `${navigator.deviceMemory} GB` : 'Unknown';
213
+ showNotification('Hardware detection completed', 'success');
214
+ }
215
+
216
+ // Run benchmark
217
+ async function runBenchmark(test) {
218
+ const button = event.target;
219
+ const originalText = button.innerHTML;
220
+ button.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Running...';
221
+ button.disabled = true;
222
+
223
+ const result = await simulateBenchmark(test);
224
+ showNotification(`Benchmark "${test}" completed! Score: ${result.score}`, 'success');
225
+
226
+ button.innerHTML = originalText;
227
+ button.disabled = false;
228
+ updateChart();
229
+ }
230
+
231
+ // Update results chart
232
+ function updateChart() {
233
+ const ctx = document.getElementById('resultsChart').getContext('2d');
234
+ const results = window.graphicsLab.results;
235
+ new Chart(ctx, {
236
+ type: 'bar',
237
+ data: {
238
+ labels: results.map(r => r.test),
239
+ datasets: [{
240
+ label: 'Score',
241
+ data: results.map(r => r.score),
242
+ backgroundColor: '#8b5cf6',
243
+ borderColor: '#7c3aed',
244
+ borderWidth: 2
245
+ }]
246
+ },
247
+ options: {
248
+ responsive: true,
249
+ maintainAspectRatio: false,
250
+ plugins: {
251
+ legend: { display: false }
252
+ }
253
+ }
254
+ });
255
+ }
256
+
257
+ // Initialize
258
+ document.addEventListener('DOMContentLoaded', () => {
259
+ detectHardware();
260
+ updateChart();
261
+ });
262
+ </script>
263
+ </body>
264
+ </html>
compare.html ADDED
@@ -0,0 +1,138 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ```html
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Compare Results | GraphicsLab</title>
8
+ <link rel="icon" type="image/x-icon" href="https://static.photos/technology/32x32/4">
9
+ <link rel="stylesheet" href="style.css">
10
+ <script src="https://cdn.tailwindcss.com"></script>
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
12
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
13
+ </head>
14
+ <body class="bg-gray-50 text-gray-900">
15
+ <custom-navbar></custom-navbar>
16
+
17
+ <main class="container mx-auto px-4 py-8">
18
+ <div class="mb-10">
19
+ <h1 class="text-4xl font-bold mb-4">Compare Performance</h1>
20
+ <p class="text-gray-600">Analyze your benchmark results against global averages and hardware categories.</p>
21
+ </div>
22
+
23
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
24
+ <div class="card">
25
+ <h2 class="text-2xl font-bold mb-4">Your Recent Scores</h2>
26
+ <div class="h-80">
27
+ <canvas id="userChart"></canvas>
28
+ </div>
29
+ <div class="mt-4 text-center">
30
+ <button class="btn-outline mr-2" onclick="addRandomResult()">
31
+ <i class="fas fa-plus mr-2"></i> Add Random Test
32
+ </button>
33
+ <button class="btn-outline" onclick="clearResults()">
34
+ <i class="fas fa-trash mr-2"></i> Clear
35
+ </button>
36
+ </div>
37
+ </div>
38
+ <div class="card">
39
+ <h2 class="text-2xl font-bold mb-4">Global Comparison</h2>
40
+ <div class="h-80">
41
+ <canvas id="globalChart"></canvas>
42
+ </div>
43
+ <div class="mt-4 text-center">
44
+ <button class="btn-primary" onclick="fetchGlobalData()">
45
+ <i class="fas fa-sync-alt mr-2"></i> Refresh Data
46
+ </button>
47
+ </div>
48
+ </div>
49
+ </div>
50
+
51
+ <div class="card mb-8">
52
+ <h2 class="text-2xl font-bold mb-6">Leaderboard</h2>
53
+ <div class="overflow-x-auto">
54
+ <table class="min-w-full">
55
+ <thead class="bg-gray-800 text-white">
56
+ <tr>
57
+ <th class="p-4 text-left">Rank</th>
58
+ <th class="p-4 text-left">User</th>
59
+ <th class="p-4 text-left">Device</th>
60
+ <th class="p-4 text-left">GPU</th>
61
+ <th class="p-4 text-left">T‑Rex Score</th>
62
+ <th class="p-4 text-left">Fluid Score</th>
63
+ <th class="p-4 text-left">Total</th>
64
+ </tr>
65
+ </thead>
66
+ <tbody>
67
+ <tr class="border-b hover:bg-gray-50">
68
+ <td class="p-4">
69
+ <div class="w-8 h-8 rounded-full bg-yellow-500 text-white flex items-center justify-center font-bold">1</div>
70
+ </td>
71
+ <td class="p-4 font-semibold">pro_gamer_42</td>
72
+ <td class="p-4">Desktop</td>
73
+ <td class="p-4">RTX 4090</td>
74
+ <td class="p-4 font-bold text-green-600">5,420</td>
75
+ <td class="p-4 font-bold text-green-600">7,120</td>
76
+ <td class="p-4 font-bold text-purple-600">12,540</td>
77
+ </tr>
78
+ <tr class="border-b hover:bg-gray-50">
79
+ <td class="p-4">
80
+ <div class="w-8 h-8 rounded-full bg-gray-400 text-white flex items-center justify-center font-bold">2</div>
81
+ </td>
82
+ <td class="p-4 font-semibold">graphics_wizard</td>
83
+ <td class="p-4">Desktop</td>
84
+ <td class="p-4">RX 7900 XTX</td>
85
+ <td class="p-4 font-bold text-green-600">5,100</td>
86
+ <td class="p-4 font-bold text-green-600">6,800</td>
87
+ <td class="p-4 font-bold text-blue-600">11,900</td>
88
+ </tr>
89
+ <tr class="border-b hover:bg-gray-50">
90
+ <td class="p-4">
91
+ <div class="w-8 h-8 rounded-full bg-orange-600 text-white flex items-center justify-center font-bold">3</div>
92
+ </td>
93
+ <td class="p-4 font-semibold">laptop_master</td>
94
+ <td class="p-4">Laptop</td>
95
+ <td class="p-4">RTX 4080 Mobile</td>
96
+ <td class="p-4 font-bold text-blue-600">4,850</td>
97
+ <td class="p-4 font-bold text-blue-600">5,970</td>
98
+ <td class="p-4 font-bold text-blue-600">10,820</td>
99
+ </tr>
100
+ <tr class="border-b hover:bg-gray-50">
101
+ <td class="p-4">
102
+ <div class="w-8 h-8 rounded-full bg-gray-300 text-gray-800 flex items-center justify-center font-bold">4</div>
103
+ </td>
104
+ <td class="p-4 font-semibold">integrated_hero</td>
105
+ <td class="p-4">Ultrabook</td>
106
+ <td class="p-4">Intel Iris Xe</td>
107
+ <td class="p-4 font-bold text-yellow-600">2,310</td>
108
+ <td class="p-4 font-bold text-yellow-600">2,000</td>
109
+ <td class="p-4 font-bold text-yellow-600">4,310</td>
110
+ </tr>
111
+ <tr class="hover:bg-gray-50">
112
+ <td class="p-4">
113
+ <div class="w-8 h-8 rounded-full bg-gray-300 text-gray-800 flex items-center justify-center font-bold">5</div>
114
+ </td>
115
+ <td class="p-4 font-semibold">mobile_user</td>
116
+ <td class="p-4">Smartphone</td>
117
+ <td class="p-4">Adreno 740</td>
118
+ <td class="p-4 font-bold text-red-600">1,800</td>
119
+ <td class="p-4 font-bold text-red-600">1,500</td>
120
+ <td class="p-4 font-bold text-red-600">3,300</td>
121
+ </tr>
122
+ </tbody>
123
+ </table>
124
+ </div>
125
+ <div class="mt-6 text-center">
126
+ <p class="text-gray-600 mb-4">Where do you stand? Run benchmarks to join the leaderboard.</p>
127
+ <a href="benchmarks.html" class="btn-primary">
128
+ <i class="fas fa-rocket mr-2"></i> Run Benchmarks Now
129
+ </a>
130
+ </div>
131
+ </div>
132
+
133
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
134
+ <div class="card">
135
+ <h3 class="
136
+ ___METADATA_START___
137
+ {"repoId":"mb672038/python-mastery-academy","isNew":false,"userName":"mb672038"}
138
+ ___METADATA_END___
components/footer.js CHANGED
@@ -1,176 +1,125 @@
1
  class CustomFooter extends HTMLElement {
2
- connectedCallback() {
3
- this.attachShadow({ mode: 'open' });
4
- this.shadowRoot.innerHTML = `
5
- <style>
6
- :host {
7
- display: block;
8
- background-color: #1F2937;
9
- color: white;
10
- padding: 3rem 1rem;
11
- }
12
-
13
- .footer-container {
14
- max-width: 1200px;
15
- margin: 0 auto;
16
- display: grid;
17
- grid-template-columns: repeat(1, 1fr);
18
- gap: 2rem;
19
- }
20
-
21
- .footer-logo {
22
- display: flex;
23
- align-items: center;
24
- gap: 0.5rem;
25
- font-size: 1.5rem;
26
- font-weight: 700;
27
- margin-bottom: 1rem;
28
- color: white;
29
- text-decoration: none;
30
- }
31
-
32
- .footer-description {
33
- color: #D1D5DB;
34
- margin-bottom: 1.5rem;
35
- line-height: 1.6;
36
- }
37
-
38
- .social-links {
39
- display: flex;
40
- gap: 1rem;
41
- }
42
-
43
- .social-link {
44
- display: flex;
45
- align-items: center;
46
- justify-content: center;
47
- width: 40px;
48
- height: 40px;
49
- border-radius: 50%;
50
- background-color: #374151;
51
- color: white;
52
- transition: background-color 0.2s;
53
- }
54
-
55
- .social-link:hover {
56
- background-color: #3B82F6;
57
- }
58
-
59
- .footer-section-title {
60
- font-size: 1.125rem;
61
- font-weight: 600;
62
- margin-bottom: 1.5rem;
63
- color: white;
64
- }
65
-
66
- .footer-links {
67
- display: flex;
68
- flex-direction: column;
69
- gap: 0.75rem;
70
- }
71
-
72
- .footer-link {
73
- color: #D1D5DB;
74
- text-decoration: none;
75
- transition: color 0.2s;
76
- }
77
-
78
- .footer-link:hover {
79
- color: #3B82F6;
80
- }
81
-
82
- .footer-bottom {
83
- margin-top: 3rem;
84
- padding-top: 1.5rem;
85
- border-top: 1px solid #374151;
86
- text-align: center;
87
- color: #9CA3AF;
88
- }
89
-
90
- @media (min-width: 640px) {
91
- .footer-container {
92
- grid-template-columns: repeat(2, 1fr);
93
- }
94
- }
95
-
96
- @media (min-width: 1024px) {
97
- .footer-container {
98
- grid-template-columns: repeat(4, 1fr);
99
- }
100
- }
101
- </style>
102
-
103
- <div class="footer-container">
104
- <div class="footer-about">
105
- <a href="/" class="footer-logo">
106
- <i data-feather="code"></i>
107
- پایتون مستری
108
- </a>
109
- <p class="footer-description">
110
- پلتفرم تخصصی آموزش برنامه‌نویسی پایتون با متدهای روز دنیا و مربیان حرفه‌ای
111
- </p>
112
- <div class="social-links">
113
- <a href="#" class="social-link">
114
- <i data-feather="instagram"></i>
115
- </a>
116
- <a href="#" class="social-link">
117
- <i data-feather="twitter"></i>
118
- </a>
119
- <a href="#" class="social-link">
120
- <i data-feather="linkedin"></i>
121
- </a>
122
- <a href="#" class="social-link">
123
- <i data-feather="youtube"></i>
124
- </a>
125
- </div>
126
- </div>
127
-
128
- <div class="footer-links-section">
129
- <h3 class="footer-section-title">لینک‌های سریع</h3>
130
- <div class="footer-links">
131
- <a href="/" class="footer-link">صفحه اصلی</a>
132
- <a href="/courses" class="footer-link">دوره‌ها</a>
133
- <a href="/about" class="footer-link">درباره ما</a>
134
- <a href="/blog" class="footer-link">بلاگ</a>
135
- <a href="/contact" class="footer-link">تماس با ما</a>
136
- </div>
137
- </div>
138
-
139
- <div class="footer-links-section">
140
- <h3 class="footer-section-title">دوره‌ها</h3>
141
- <div class="footer-links">
142
- <a href="/course/python-basics" class="footer-link">پایتون مقدماتی</a>
143
- <a href="/course/python-oop" class="footer-link">برنامه‌نویسی شی‌گرا</a>
144
- <a href="/course/python-web" class="footer-link">توسعه وب با پایتون</a>
145
- <a href="/course/data-science" class="footer-link">علم داده با پایتون</a>
146
- <a href="/course/automation" class="footer-link">اتوماسیون با پایتون</a>
147
- </div>
148
- </div>
149
-
150
- <div class="footer-contact">
151
- <h3 class="footer-section-title">تماس با ما</h3>
152
- <div class="footer-links">
153
- <a href="mailto:info@pythonmastery.com" class="footer-link flex items-center gap-2">
154
- <i data-feather="mail" class="w-4 h-4"></i>
155
- info@pythonmastery.com
156
- </a>
157
- <a href="tel:+982122345678" class="footer-link flex items-center gap-2">
158
- <i data-feather="phone" class="w-4 h-4"></i>
159
- 021-22345678
160
- </a>
161
- <div class="flex items-center gap-2 text-gray-300">
162
- <i data-feather="map-pin" class="w-4 h-4"></i>
163
- تهران، خیابان آزادی، دانشگاه صنعتی شریف
164
- </div>
165
- </div>
166
- </div>
167
  </div>
168
-
169
- <div class="footer-bottom">
170
- <p>© ۱۴۰۲ پایتون مستری. تمامی حقوق محفوظ است.</p>
171
- </div>
172
- `;
173
- }
 
 
174
  }
175
-
176
  customElements.define('custom-footer', CustomFooter);
 
1
  class CustomFooter extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
9
+ }
10
+ footer {
11
+ background: #1a202c;
12
+ color: #cbd5e0;
13
+ padding: 3rem 2rem 2rem;
14
+ margin-top: 4rem;
15
+ }
16
+ .footer-container {
17
+ max-width: 1200px;
18
+ margin: 0 auto;
19
+ display: grid;
20
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
21
+ gap: 2rem;
22
+ }
23
+ .footer-section h3 {
24
+ color: white;
25
+ font-size: 1.2rem;
26
+ margin-bottom: 1rem;
27
+ font-weight: 600;
28
+ }
29
+ .footer-section p {
30
+ line-height: 1.6;
31
+ font-size: 0.95rem;
32
+ }
33
+ .footer-links {
34
+ list-style: none;
35
+ padding: 0;
36
+ margin: 0;
37
+ }
38
+ .footer-links li {
39
+ margin-bottom: 0.5rem;
40
+ }
41
+ .footer-links a {
42
+ color: #a0aec0;
43
+ text-decoration: none;
44
+ transition: color 0.3s;
45
+ }
46
+ .footer-links a:hover {
47
+ color: #667eea;
48
+ }
49
+ .social-icons {
50
+ display: flex;
51
+ gap: 1rem;
52
+ margin-top: 1rem;
53
+ }
54
+ .social-icons a {
55
+ display: inline-flex;
56
+ align-items: center;
57
+ justify-content: center;
58
+ width: 36px;
59
+ height: 36px;
60
+ background: #2d3748;
61
+ border-radius: 50%;
62
+ color: white;
63
+ text-decoration: none;
64
+ transition: background 0.3s;
65
+ }
66
+ .social-icons a:hover {
67
+ background: #667eea;
68
+ }
69
+ .copyright {
70
+ text-align: center;
71
+ margin-top: 3rem;
72
+ padding-top: 1.5rem;
73
+ border-top: 1px solid #2d3748;
74
+ color: #718096;
75
+ font-size: 0.9rem;
76
+ }
77
+ @media (max-width: 768px) {
78
+ .footer-container {
79
+ grid-template-columns: 1fr;
80
+ }
81
+ }
82
+ </style>
83
+ <footer>
84
+ <div class="footer-container">
85
+ <div class="footer-section">
86
+ <h3>GraphicsLab</h3>
87
+ <p>A high‑end graphics testing platform for benchmarking, visualization, and performance analysis. Built with modern web technologies and real‑time APIs.</p>
88
+ </div>
89
+ <div class="footer-section">
90
+ <h3>Quick Links</h3>
91
+ <ul class="footer-links">
92
+ <li><a href="index.html">Home</a></li>
93
+ <li><a href="benchmarks.html">Benchmarks</a></li>
94
+ <li><a href="visualizer.html">Visualizer</a></li>
95
+ <li><a href="compare.html">Compare</a></li>
96
+ <li><a href="about.html">About</a></li>
97
+ </ul>
98
+ </div>
99
+ <div class="footer-section">
100
+ <h3>Resources</h3>
101
+ <ul class="footer-links">
102
+ <li><a href="https://developer.mozilla.org/en‑US/docs/Web/API/WebGL_API" target="_blank">WebGL Docs</a></li>
103
+ <li><a href="https://threejs.org/" target="_blank">Three.js</a></li>
104
+ <li><a href="https://public‑apis.dev/" target="_blank">Public APIs</a></li>
105
+ <li><a href="https://github.com/public‑apis/public‑apis" target="_blank">GitHub</a></li>
106
+ </ul>
107
+ </div>
108
+ <div class="footer-section">
109
+ <h3>Connect</h3>
110
+ <p>Stay updated with the latest graphics benchmarks and visualizations.</p>
111
+ <div class="social-icons">
112
+ <a href="#" aria-label="Twitter"><svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.213c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg></a>
113
+ <a href="#" aria-label="GitHub"><svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg></a>
114
+ <a href="#" aria-label="LinkedIn"><svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg></a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
115
  </div>
116
+ </div>
117
+ </div>
118
+ <div class="copyright">
119
+ &copy; 2023 GraphicsLab. All rights reserved. | Built with modern Web APIs.
120
+ </div>
121
+ </footer>
122
+ `;
123
+ }
124
  }
 
125
  customElements.define('custom-footer', CustomFooter);
components/navbar.js CHANGED
@@ -1,133 +1,110 @@
1
  class CustomNavbar extends HTMLElement {
2
- connectedCallback() {
3
- this.attachShadow({ mode: 'open' });
4
- this.shadowRoot.innerHTML = `
5
- <style>
6
- :host {
7
- display: block;
8
- width: 100%;
9
- position: sticky;
10
- top: 0;
11
- z-index: 50;
12
- background-color: white;
13
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
14
- }
15
-
16
- .navbar-container {
17
- display: flex;
18
- justify-content: space-between;
19
- align-items: center;
20
- padding: 1rem 2rem;
21
- max-width: 1400px;
22
- margin: 0 auto;
23
- }
24
-
25
- .logo {
26
- display: flex;
27
- align-items: center;
28
- gap: 0.5rem;
29
- font-weight: 700;
30
- font-size: 1.25rem;
31
- color: #3B82F6;
32
- text-decoration: none;
33
- }
34
-
35
- .nav-links {
36
- display: flex;
37
- gap: 1.5rem;
38
- align-items: center;
39
- }
40
-
41
- .nav-link {
42
- color: #4B5563;
43
- font-weight: 500;
44
- text-decoration: none;
45
- transition: color 0.2s;
46
- }
47
-
48
- .nav-link:hover {
49
- color: #3B82F6;
50
- }
51
-
52
- .auth-buttons {
53
- display: flex;
54
- gap: 1rem;
55
- }
56
-
57
- .login-btn {
58
- padding: 0.5rem 1rem;
59
- border-radius: 0.375rem;
60
- font-weight: 500;
61
- color: #3B82F6;
62
- border: 1px solid #3B82F6;
63
- text-decoration: none;
64
- transition: all 0.2s;
65
- }
66
-
67
- .login-btn:hover {
68
- background-color: #EFF6FF;
69
- }
70
-
71
- .register-btn {
72
- padding: 0.5rem 1rem;
73
- border-radius: 0.375rem;
74
- font-weight: 500;
75
- color: white;
76
- background-color: #3B82F6;
77
- text-decoration: none;
78
- transition: background-color 0.2s;
79
- }
80
-
81
- .register-btn:hover {
82
- background-color: #2563EB;
83
- }
84
-
85
- .mobile-menu-btn {
86
- display: none;
87
- background: none;
88
- border: none;
89
- cursor: pointer;
90
- }
91
-
92
- @media (max-width: 768px) {
93
- .nav-links, .auth-buttons {
94
- display: none;
95
- }
96
-
97
- .mobile-menu-btn {
98
- display: block;
99
- }
100
-
101
- .navbar-container {
102
- padding: 1rem;
103
- }
104
- }
105
- </style>
106
-
107
- <div class="navbar-container">
108
- <a href="/" class="logo">
109
- <i data-feather="code"></i>
110
- پایتون مستری
111
- </a>
112
-
113
- <div class="nav-links">
114
- <a href="/courses" class="nav-link">دوره‌ها</a>
115
- <a href="/about" class="nav-link">درباره ما</a>
116
- <a href="/blog" class="nav-link">بلاگ</a>
117
- <a href="/contact" class="nav-link">تماس با ما</a>
118
- </div>
119
-
120
- <div class="auth-buttons">
121
- <a href="/login" class="login-btn">ورود</a>
122
- <a href="/register" class="register-btn">ثبت‌نام</a>
123
- </div>
124
-
125
- <button class="mobile-menu-btn">
126
- <i data-feather="menu"></i>
127
- </button>
128
- </div>
129
- `;
130
- }
131
  }
132
-
133
  customElements.define('custom-navbar', CustomNavbar);
 
1
  class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ :host {
7
+ display: block;
8
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
9
+ }
10
+ nav {
11
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
12
+ padding: 1rem 2rem;
13
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
14
+ position: sticky;
15
+ top: 0;
16
+ z-index: 1000;
17
+ }
18
+ .container {
19
+ max-width: 1200px;
20
+ margin: 0 auto;
21
+ display: flex;
22
+ align-items: center;
23
+ justify-content: space-between;
24
+ }
25
+ .logo {
26
+ font-size: 1.8rem;
27
+ font-weight: 800;
28
+ color: white;
29
+ text-decoration: none;
30
+ display: flex;
31
+ align-items: center;
32
+ gap: 0.5rem;
33
+ }
34
+ .logo-icon {
35
+ width: 32px;
36
+ height: 32px;
37
+ background: white;
38
+ border-radius: 50%;
39
+ display: inline-block;
40
+ }
41
+ .nav-links {
42
+ display: flex;
43
+ gap: 2rem;
44
+ align-items: center;
45
+ }
46
+ .nav-links a {
47
+ color: rgba(255, 255, 255, 0.9);
48
+ text-decoration: none;
49
+ font-weight: 600;
50
+ font-size: 1rem;
51
+ transition: color 0.3s;
52
+ padding: 0.5rem 0.8rem;
53
+ border-radius: 6px;
54
+ }
55
+ .nav-links a:hover {
56
+ color: white;
57
+ background: rgba(255, 255, 255, 0.1);
58
+ }
59
+ .nav-links a.active {
60
+ color: white;
61
+ background: rgba(255, 255, 255, 0.2);
62
+ }
63
+ .github-link {
64
+ background: rgba(255, 255, 255, 0.15);
65
+ padding: 0.5rem 1rem;
66
+ border-radius: 20px;
67
+ display: flex;
68
+ align-items: center;
69
+ gap: 0.5rem;
70
+ }
71
+ .github-link:hover {
72
+ background: rgba(255, 255, 255, 0.25);
73
+ }
74
+ @media (max-width: 768px) {
75
+ .container {
76
+ flex-direction: column;
77
+ gap: 1rem;
78
+ }
79
+ .nav-links {
80
+ flex-wrap: wrap;
81
+ justify-content: center;
82
+ gap: 1rem;
83
+ }
84
+ }
85
+ </style>
86
+ <nav>
87
+ <div class="container">
88
+ <a href="index.html" class="logo">
89
+ <span class="logo-icon"></span>
90
+ <span>GraphicsLab</span>
91
+ </a>
92
+ <div class="nav-links">
93
+ <a href="index.html" class="active">Home</a>
94
+ <a href="benchmarks.html">Benchmarks</a>
95
+ <a href="visualizer.html">Visualizer</a>
96
+ <a href="compare.html">Compare</a>
97
+ <a href="about.html">About</a>
98
+ <a href="https://github.com/public-apis/public-apis" target="_blank" class="github-link">
99
+ <svg width="20" height="20" viewBox="0 0 24 24" fill="white">
100
+ <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
101
+ </svg>
102
+ API
103
+ </a>
104
+ </div>
105
+ </div>
106
+ </nav>
107
+ `;
108
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
109
  }
 
110
  customElements.define('custom-navbar', CustomNavbar);
index.html CHANGED
@@ -1,339 +0,0 @@
1
-
2
- <!DOCTYPE html>
3
- <html lang="fa" dir="rtl">
4
- <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Python Mastery Academy | یادگیری حرفه‌ای پایتون</title>
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>
12
- tailwind.config = {
13
- theme: {
14
- extend: {
15
- colors: {
16
- primary: '#3B82F6',
17
- secondary: '#10B981',
18
- }
19
- }
20
- }
21
- }
22
- </script>
23
- </head>
24
- <body class="bg-gray-50 font-sans">
25
- <particles-background></particles-background>
26
- <floating-elements></floating-elements>
27
- <glowing-cursor></glowing-cursor>
28
- <custom-navbar></custom-navbar>
29
-
30
- <animated-header></animated-header>
31
-
32
- <main class="container mx-auto px-4 py-8 relative z-10">
33
- <!-- Stats Section -->
34
- <section class="mb-16 slide-up">
35
- <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
36
- <div class="bg-white/80 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-white/20 text-center hover:scale-105 transition-transform duration-300">
37
- <div class="text-4xl font-bold text-primary mb-2">۲۵۰۰+</div>
38
- <div class="text-gray-600">دانشجو فعال</div>
39
- </div>
40
- <div class="bg-white/80 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-white/20 text-center hover:scale-105 transition-transform duration-300">
41
- <div class="text-4xl font-bold text-secondary mb-2">۵۰+</div>
42
- <div class="text-gray-600">دوره آموزشی</div>
43
- </div>
44
- <div class="bg-white/80 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-white/20 text-center hover:scale-105 transition-transform duration-300">
45
- <div class="text-4xl font-bold text-purple-600 mb-2">۹۸٪</div>
46
- <div class="text-gray-600">رضایت دانشجویان</div>
47
- </div>
48
- <div class="bg-white/80 backdrop-blur-sm p-6 rounded-2xl shadow-lg border border-white/20 text-center hover:scale-105 transition-transform duration-300">
49
- <div class="text-4xl font-bold text-pink-600 mb-2">۵۰۰+</div>
50
- <div class="text-gray-600">پروژه عملی</div>
51
- </div>
52
- </div>
53
- </section>
54
-
55
- <!-- Interactive Demo -->
56
- <section class="mb-16 slide-up">
57
- <div class="bg-gradient-to-br from-primary/10 to-secondary/10 rounded-3xl p-8 md:p-12 border border-white/30 backdrop-blur-sm">
58
- <div class="flex flex-col md:flex-row items-center justify-between gap-8">
59
- <div class="md:w-1/2">
60
- <h2 class="text-3xl font-bold text-gray-900 mb-4">تجربه تعاملی کدنویسی</h2>
61
- <p class="text-gray-600 mb-6">
62
- کد پایتون را مستقیماً در مرورگر خود اجرا کنید. محیطی زنده با قابلیت نمایش خروجی بلافاصله.
63
- </p>
64
- <div class="bg-gray-900 text-gray-100 p-4 rounded-xl font-mono text-sm mb-4">
65
- <div class="text-green-400"># کد نمونه</div>
66
- <div class="text-blue-400">def</div>
67
- <div class="ml-4"><span class="text-yellow-400">print</span>(<span class="text-green-400">"سلام دنیا!"</span>)</div>
68
- </div>
69
- <button id="run-code" class="bg-primary hover:bg-primary-600 text-white px-6 py-3 rounded-lg font-medium transition transform hover:scale-105">
70
- اجرای کد
71
- </button>
72
- </div>
73
- <div class="md:w-1/2">
74
- <div class="bg-white/90 backdrop-blur-sm p-6 rounded-2xl shadow-xl border border-gray-200">
75
- <div class="flex items-center gap-2 mb-4">
76
- <div class="w-3 h-3 rounded-full bg-red-500"></div>
77
- <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
78
- <div class="w-3 h-3 rounded-full bg-green-500"></div>
79
- <div class="text-gray-500 text-sm mr-2">خروجی</div>
80
- </div>
81
- <div id="code-output" class="font-mono text-gray-800 min-h-[100px] p-4 bg-gray-50 rounded-lg">
82
- خروجی کد اینجا نمایش داده می‌شود...
83
- </div>
84
- </div>
85
- </div>
86
- </div>
87
- </div>
88
- </section>
89
- <!-- Features Section -->
90
- <section class="mb-16 slide-up">
91
- <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">چرا پایتون مستری؟</h2>
92
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
93
- <div class="bg-white/80 backdrop-blur-sm p-8 rounded-2xl shadow-xl border border-white/30 hover:shadow-2xl transition-all duration-500 hover:-translate-y-2">
94
- <div class="relative">
95
- <div class="bg-gradient-to-r from-primary to-secondary w-16 h-16 rounded-2xl flex items-center justify-center mb-6 transform rotate-12 hover:rotate-0 transition-transform">
96
- <i data-feather="code" class="text-white w-8 h-8"></i>
97
- </div>
98
- <div class="absolute top-0 left-0 w-16 h-16 rounded-2xl bg-gradient-to-r from-primary/20 to-secondary/20 -z-10 animate-pulse"></div>
99
- </div>
100
- <h3 class="text-xl font-semibold mb-3">آموزش پروژه‌محور</h3>
101
- <p class="text-gray-600">یادگیری با انجام پروژه‌های واقعی و کاربردی در دنیای کار</p>
102
- </div>
103
- <div class="bg-white/80 backdrop-blur-sm p-8 rounded-2xl shadow-xl border border-white/30 hover:shadow-2xl transition-all duration-500 hover:-translate-y-2">
104
- <div class="relative">
105
- <div class="bg-gradient-to-r from-purple-500 to-pink-500 w-16 h-16 rounded-2xl flex items-center justify-center mb-6 transform -rotate-12 hover:rotate-0 transition-transform">
106
- <i data-feather="users" class="text-white w-8 h-8"></i>
107
- </div>
108
- <div class="absolute top-0 left-0 w-16 h-16 rounded-2xl bg-gradient-to-r from-purple-500/20 to-pink-500/20 -z-10 animate-pulse"></div>
109
- </div>
110
- <h3 class="text-xl font-semibold mb-3">مربیان حرفه‌ای</h3>
111
- <p class="text-gray-600">همراهی با بهترین مربیان صنعت در طول مسیر یادگیری</p>
112
- </div>
113
- <div class="bg-white/80 backdrop-blur-sm p-8 rounded-2xl shadow-xl border border-white/30 hover:shadow-2xl transition-all duration-500 hover:-translate-y-2">
114
- <div class="relative">
115
- <div class="bg-gradient-to-r from-yellow-500 to-orange-500 w-16 h-16 rounded-2xl flex items-center justify-center mb-6 transform rotate-12 hover:rotate-0 transition-transform">
116
- <i data-feather="award" class="text-white w-8 h-8"></i>
117
- </div>
118
- <div class="absolute top-0 left-0 w-16 h-16 rounded-2xl bg-gradient-to-r from-yellow-500/20 to-orange-500/20 -z-10 animate-pulse"></div>
119
- </div>
120
- <h3 class="text-xl font-semibold mb-3">گواهینامه معتبر</h3>
121
- <p class="text-gray-600">دریافت مدرک معتبر پس از اتمام هر دوره</p>
122
- </div>
123
- </div>
124
- </section>
125
- <!-- Courses Preview -->
126
- <section class="mb-16 slide-up">
127
- <div class="flex justify-between items-center mb-8">
128
- <h2 class="text-3xl font-bold text-gray-900">دوره‌های آموزشی</h2>
129
- <a href="/courses" class="text-primary hover:text-primary-600 font-medium flex items-center gap-2 group">
130
- مشاهده همه
131
- <i data-feather="arrow-left" class="w-4 h-4 group-hover:-translate-x-2 transition-transform"></i>
132
- </a>
133
- </div>
134
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
135
- <!-- Course Card 1 -->
136
- <div class="group bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl overflow-hidden hover:shadow-2xl transition-all duration-500 hover:-translate-y-3 border border-white/30">
137
- <div class="relative overflow-hidden">
138
- <img src="http://static.photos/technology/640x360/101" alt="Python Basics" class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-700">
139
- <div class="absolute top-4 left-4 bg-gradient-to-r from-primary to-secondary text-white px-3 py-1 rounded-full text-sm">
140
- جدید
141
- </div>
142
- </div>
143
- <div class="p-6">
144
- <div class="flex justify-between items-start mb-3">
145
- <h3 class="text-xl font-bold">پایتون مقدماتی</h3>
146
- <div class="flex items-center gap-1 text-yellow-500">
147
- <i data-feather="star" class="w-4 h-4 fill-current"></i>
148
- <span>4.9</span>
149
- </div>
150
- </div>
151
- <p class="text-gray-600 mb-6">آموزش اصول اولیه برنامه‌نویسی با پایتون برای شروع کار</p>
152
- <div class="flex justify-between items-center">
153
- <div class="text-lg font-bold text-primary">رایگان</div>
154
- <a href="/course/python-basics" class="text-primary hover:text-primary-600 font-medium flex items-center gap-1 group">
155
- مشاهده دوره
156
- <i data-feather="arrow-left" class="w-4 h-4 group-hover:-translate-x-1 transition-transform"></i>
157
- </a>
158
- </div>
159
- </div>
160
- </div>
161
-
162
- <!-- Course Card 2 -->
163
- <div class="group bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl overflow-hidden hover:shadow-2xl transition-all duration-500 hover:-translate-y-3 border border-white/30">
164
- <div class="relative overflow-hidden">
165
- <img src="http://static.photos/technology/640x360/102" alt="Python OOP" class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-700">
166
- <div class="absolute top-4 left-4 bg-gradient-to-r from-purple-500 to-pink-500 text-white px-3 py-1 rounded-full text-sm">
167
- پرفروش
168
- </div>
169
- </div>
170
- <div class="p-6">
171
- <div class="flex justify-between items-start mb-3">
172
- <h3 class="text-xl font-bold">برنامه‌نویسی شی‌گرا</h3>
173
- <div class="flex items-center gap-1 text-yellow-500">
174
- <i data-feather="star" class="w-4 h-4 fill-current"></i>
175
- <span>4.8</span>
176
- </div>
177
- </div>
178
- <p class="text-gray-600 mb-6">آموزش کامل مفاهیم شی‌گرایی در پایتون با مثال‌های عملی</p>
179
- <div class="flex justify-between items-center">
180
- <div class="text-lg font-bold text-primary">۱۹۰,۰۰۰ تومان</div>
181
- <a href="/course/python-oop" class="text-primary hover:text-primary-600 font-medium flex items-center gap-1 group">
182
- مشاهده دوره
183
- <i data-feather="arrow-left" class="w-4 h-4 group-hover:-translate-x-1 transition-transform"></i>
184
- </a>
185
- </div>
186
- </div>
187
- </div>
188
-
189
- <!-- Course Card 3 -->
190
- <div class="group bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl overflow-hidden hover:shadow-2xl transition-all duration-500 hover:-translate-y-3 border border-white/30">
191
- <div class="relative overflow-hidden">
192
- <img src="http://static.photos/technology/640x360/103" alt="Python Web" class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-700">
193
- <div class="absolute top-4 left-4 bg-gradient-to-r from-green-500 to-teal-500 text-white px-3 py-1 rounded-full text-sm">
194
- پرطرفدار
195
- </div>
196
- </div>
197
- <div class="p-6">
198
- <div class="flex justify-between items-start mb-3">
199
- <h3 class="text-xl font-bold">توسعه وب با پایتون</h3>
200
- <div class="flex items-center gap-1 text-yellow-500">
201
- <i data-feather="star" class="w-4 h-4 fill-current"></i>
202
- <span>4.7</span>
203
- </div>
204
- </div>
205
- <p class="text-gray-600 mb-6">یادگیری Django و Flask برای ساخت وب‌اپلیکیشن‌های حرفه‌ای</p>
206
- <div class="flex justify-between items-center">
207
- <div class="text-lg font-bold text-primary">۲۹۰,۰۰۰ تومان</div>
208
- <a href="/course/python-web" class="text-primary hover:text-primary-600 font-medium flex items-center gap-1 group">
209
- مشاهده دوره
210
- <i data-feather="arrow-left" class="w-4 h-4 group-hover:-translate-x-1 transition-transform"></i>
211
- </a>
212
- </div>
213
- </div>
214
- </div>
215
- </div>
216
- </section>
217
- <!-- Testimonials -->
218
- <section class="mb-16 slide-up">
219
- <h2 class="text-3xl font-bold text-center text-gray-900 mb-12">نظرات دانشجویان</h2>
220
- <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
221
- <div class="bg-gradient-to-br from-white/80 to-primary/5 backdrop-blur-sm p-8 rounded-2xl shadow-xl border border-white/30 hover:shadow-2xl transition-all duration-500">
222
- <div class="flex items-center gap-4 mb-6">
223
- <div class="relative">
224
- <img src="http://static.photos/people/200x200/1" alt="User" class="w-16 h-16 rounded-full object-cover border-4 border-white/50">
225
- <div class="absolute -bottom-1 -right-1 w-6 h-6 bg-green-500 rounded-full border-2 border-white"></div>
226
- </div>
227
- <div>
228
- <h4 class="font-bold text-lg">محمد رضایی</h4>
229
- <div class="flex items-center gap-1 text-yellow-500">
230
- <i data-feather="star" class="w-4 h-4 fill-current"></i>
231
- <i data-feather="star" class="w-4 h-4 fill-current"></i>
232
- <i data-feather="star" class="w-4 h-4 fill-current"></i>
233
- <i data-feather="star" class="w-4 h-4 fill-current"></i>
234
- <i data-feather="star" class="w-4 h-4 fill-current"></i>
235
- </div>
236
- </div>
237
- </div>
238
- <p class="text-gray-700 text-lg leading-relaxed">
239
- "بهترین پلتفرم برای یادگیری پایتون. دوره‌ها بسیار کامل و پروژه‌محور هستند. بعد از اتمام دوره مقدماتی توانستم در شرکت معتبری استخدام شوم."
240
- </p>
241
- </div>
242
- <div class="bg-gradient-to-br from-white/80 to-secondary/5 backdrop-blur-sm p-8 rounded-2xl shadow-xl border border-white/30 hover:shadow-2xl transition-all duration-500">
243
- <div class="flex items-center gap-4 mb-6">
244
- <div class="relative">
245
- <img src="http://static.photos/people/200x200/2" alt="User" class="w-16 h-16 rounded-full object-cover border-4 border-white/50">
246
- <div class="absolute -bottom-1 -right-1 w-6 h-6 bg-green-500 rounded-full border-2 border-white"></div>
247
- </div>
248
- <div>
249
- <h4 class="font-bold text-lg">فاطمه محمدی</h4>
250
- <div class="flex items-center gap-1 text-yellow-500">
251
- <i data-feather="star" class="w-4 h-4 fill-current"></i>
252
- <i data-feather="star" class="w-4 h-4 fill-current"></i>
253
- <i data-feather="star" class="w-4 h-4 fill-current"></i>
254
- <i data-feather="star" class="w-4 h-4 fill-current"></i>
255
- <i data-feather="star" class="w-4 h-4 fill-current"></i>
256
- </div>
257
- </div>
258
- </div>
259
- <p class="text-gray-700 text-lg leading-relaxed">
260
- "به عنوان کسی که هیچ پیشینه برنامه‌نویسی نداشتم، دوره‌های این سایت واقعا برای من مفید بود. پشتیبانی عالی و محتوای باکیفیت."
261
- </p>
262
- </div>
263
- </div>
264
- </section>
265
- <!-- CTA Section -->
266
- <section class="relative overflow-hidden bg-gradient-to-r from-primary via-purple-600 to-secondary text-white rounded-3xl p-8 md:p-12 mb-16 slide-up">
267
- <div class="absolute top-0 left-0 w-full h-full overflow-hidden">
268
- <div class="absolute -top-20 -left-20 w-64 h-64 bg-white/10 rounded-full"></div>
269
- <div class="absolute bottom-10 right-10 w-40 h-40 bg-white/5 rounded-full"></div>
270
- <div class="absolute top-1/2 left-1/2 w-80 h-80 bg-white/5 rounded-full -translate-x-1/2 -translate-y-1/2"></div>
271
- </div>
272
- <div class="relative z-10 max-w-3xl mx-auto text-center">
273
- <h2 class="text-3xl md:text-4xl font-bold mb-6">آماده شروع یادگیری هستید؟</h2>
274
- <p class="text-xl mb-10 opacity-95">
275
- همین حالا ثبت‌نام کنید و به جمع هزاران دانشجوی ما بپیوندید. اولین قدم برای تبدیل شدن به یک برنامه‌نویس حرفه‌ای را بردارید.
276
- </p>
277
- <a href="/register" class="group bg-white text-primary hover:bg-gray-100 px-10 py-4 rounded-2xl font-bold inline-block transition-all duration-300 transform hover:scale-105 shadow-2xl">
278
- <span class="flex items-center justify-center gap-3">
279
- ثبت‌نام رایگان
280
- <i data-feather="arrow-left" class="w-5 h-5 group-hover:-translate-x-2 transition-transform"></i>
281
- </span>
282
- </a>
283
- <p class="mt-6 opacity-80">اولین جلسه رایگان • پشتیبانی ۲۴ ساعته • گواهینامه معتبر</p>
284
- </div>
285
- </section>
286
- </main>
287
- </main>
288
-
289
- <custom-footer></custom-footer>
290
- <script src="components/navbar.js"></script>
291
- <script src="components/footer.js"></script>
292
- <script src="components/particles-bg.js"></script>
293
- <script src="components/floating-elements.js"></script>
294
- <script src="components/glowing-cursor.js"></script>
295
- <script src="components/animated-header.js"></script>
296
- <script src="script.js"></script>
297
- <script>
298
- feather.replace();
299
-
300
- // Interactive code runner
301
- document.getElementById('run-code')?.addEventListener('click', function() {
302
- const output = document.getElementById('code-output');
303
- output.innerHTML = '<div class="text-green-600">$ python hello.py</div><div class="mt-2">سلام دنیا!</div><div class="mt-2 text-gray-500">کد با موفقیت اجرا شد!</div>';
304
-
305
- // Add animation
306
- output.classList.add('animate-pulse');
307
- setTimeout(() => output.classList.remove('animate-pulse'), 500);
308
- });
309
- </script>
310
- <script type="module" src="/src/main.jsx"></script>
311
- <style>
312
- body {
313
- overflow-x: hidden;
314
- }
315
-
316
- .slide-up {
317
- animation: slideUp 0.8s ease-out;
318
- }
319
-
320
- @keyframes slideUp {
321
- from {
322
- opacity: 0;
323
- transform: translateY(40px);
324
- }
325
- to {
326
- opacity: 1;
327
- transform: translateY(0);
328
- }
329
- }
330
-
331
- /* Glass effect */
332
- .glass {
333
- background: rgba(255, 255, 255, 0.2);
334
- backdrop-filter: blur(10px);
335
- border: 1px solid rgba(255, 255, 255, 0.3);
336
- }
337
- </style>
338
- </body>
339
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
script.js CHANGED
@@ -1,194 +1,77 @@
 
 
1
 
2
- // Main JavaScript File
3
- document.addEventListener('DOMContentLoaded', function() {
4
- // Initialize animations
5
- const animateElements = document.querySelectorAll('.fade-in, .slide-up');
6
-
7
- animateElements.forEach((el, index) => {
8
- el.style.animationDelay = `${index * 0.1}s`;
9
- });
10
-
11
- // Language switcher functionality
12
- const langSwitcher = document.getElementById('lang-switcher');
13
- if (langSwitcher) {
14
- langSwitcher.addEventListener('change', function() {
15
- const selectedLang = this.value;
16
- // In a real app, this would redirect to the selected language version
17
- console.log(`Language changed to: ${selectedLang}`);
18
- });
19
- }
20
-
21
- // Theme switcher functionality
22
- const themeSwitcher = document.getElementById('theme-switcher');
23
- if (themeSwitcher) {
24
- themeSwitcher.addEventListener('change', function() {
25
- const selectedTheme = this.value;
26
- document.body.classList.toggle('dark', selectedTheme === 'dark');
27
- localStorage.setItem('theme', selectedTheme);
28
- });
29
-
30
- // Check for saved theme preference
31
- const savedTheme = localStorage.getItem('theme') || 'light';
32
- themeSwitcher.value = savedTheme;
33
- if (savedTheme === 'dark') {
34
- document.body.classList.add('dark');
35
- }
36
- }
37
-
38
- // Interactive code runner
39
- const runCodeBtn = document.getElementById('run-code');
40
- if (runCodeBtn) {
41
- runCodeBtn.addEventListener('click', function() {
42
- const output = document.getElementById('code-output');
43
- if (output) {
44
- output.innerHTML = `
45
- <div class="text-green-600 font-bold">$ python hello.py</div>
46
- <div class="mt-3 text-2xl font-bold text-primary">سلام دنیا!</div>
47
- <div class="mt-3 text-gray-600">✅ کد با موفقیت اجرا شد!</div>
48
- <div class="mt-4 text-sm text-gray-500">
49
- زمان اجرا: ۰.۰۰۲ ثانیه<br>
50
- حافظه مصرفی: ۲.۱ مگابایت
51
- </div>
52
- `;
53
-
54
- // Add animation
55
- output.classList.add('animate-pulse');
56
- setTimeout(() => output.classList.remove('animate-pulse'), 500);
57
-
58
- // Button feedback
59
- this.innerHTML = '<span>✅ اجرا شد!</span>';
60
- this.classList.add('bg-green-600', 'hover:bg-green-700');
61
- setTimeout(() => {
62
- this.innerHTML = '<span>اجرای کد</span>';
63
- this.classList.remove('bg-green-600', 'hover:bg-green-700');
64
- }, 2000);
65
- }
66
- });
67
- }
68
-
69
- // Add hover effects to cards
70
- const cards = document.querySelectorAll('.bg-white\\/80');
71
- cards.forEach(card => {
72
- card.addEventListener('mouseenter', function() {
73
- this.style.transform = 'translateY(-10px) scale(1.02)';
74
- });
75
-
76
- card.addEventListener('mouseleave', function() {
77
- this.style.transform = 'translateY(0) scale(1)';
78
- });
79
- });
80
-
81
- // Add parallax effect to floating elements
82
- window.addEventListener('mousemove', function(e) {
83
- const x = e.clientX / window.innerWidth;
84
- const y = e.clientY / window.innerHeight;
85
-
86
- document.querySelectorAll('.floating-element').forEach(el => {
87
- const speed = parseFloat(el.getAttribute('data-speed') || '0.5');
88
- const xMove = x * speed * 100;
89
- const yMove = y * speed * 100;
90
- el.style.transform = `translate(${xMove}px, ${yMove}px)`;
91
- });
92
- });
93
-
94
- // Initialize typing animation
95
- const typeWriter = document.getElementById('typewriter');
96
- if (typeWriter) {
97
- const texts = [
98
- 'یادگیری پایتون',
99
- 'ساخت پروژه‌های واقعی',
100
- 'تبدیل شدن به حرفه‌ای'
101
- ];
102
- let textIndex = 0;
103
- let charIndex = 0;
104
- let isDeleting = false;
105
-
106
- function type() {
107
- const currentText = texts[textIndex];
108
-
109
- if (isDeleting) {
110
- typeWriter.textContent = currentText.substring(0, charIndex - 1);
111
- charIndex--;
112
- } else {
113
- typeWriter.textContent = currentText.substring(0, charIndex + 1);
114
- charIndex++;
115
- }
116
-
117
- if (!isDeleting && charIndex === currentText.length) {
118
- isDeleting = true;
119
- setTimeout(type, 2000);
120
- } else if (isDeleting && charIndex === 0) {
121
- isDeleting = false;
122
- textIndex = (textIndex + 1) % texts.length;
123
- setTimeout(type, 500);
124
- } else {
125
- setTimeout(type, isDeleting ? 50 : 100);
126
- }
127
- }
128
-
129
- setTimeout(type, 1000);
130
- }
131
- });
132
 
133
- // API functions
134
- async function fetchCourses() {
135
  try {
136
- const response = await fetch('/api/courses');
137
- const data = await response.json();
138
- return data;
139
- } catch (error) {
140
- console.error('Error fetching courses:', error);
141
- return [];
 
 
 
 
 
142
  }
143
  }
144
 
145
- // Form validation
146
- function validateForm(form) {
147
- let isValid = true;
148
- const inputs = form.querySelectorAll('input[required], textarea[required]');
149
-
150
- inputs.forEach(input => {
151
- if (!input.value.trim()) {
152
- isValid = false;
153
- input.classList.add('border-red-500');
154
- } else {
155
- input.classList.remove('border-red-500');
156
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
157
  });
158
-
159
- return isValid;
160
  }
161
 
162
- // Create confetti effect
163
- function createConfetti() {
164
- const confettiCount = 100;
165
- const colors = ['#3B82F6', '#10B981', '#8B5CF6', '#EF4444', '#F59E0B'];
166
-
167
- for (let i = 0; i < confettiCount; i++) {
168
- const confetti = document.createElement('div');
169
- confetti.style.position = 'fixed';
170
- confetti.style.width = '10px';
171
- confetti.style.height = '10px';
172
- confetti.style.background = colors[Math.floor(Math.random() * colors.length)];
173
- confetti.style.borderRadius = '50%';
174
- confetti.style.left = `${Math.random() * 100}vw`;
175
- confetti.style.top = '-20px';
176
- confetti.style.zIndex = '9999';
177
- confetti.style.pointerEvents = 'none';
178
- document.body.appendChild(confetti);
179
-
180
- // Animation
181
- const animation = confetti.animate([
182
- { transform: 'translateY(0) rotate(0deg)', opacity: 1 },
183
- { transform: `translateY(${window.innerHeight + 100}px) rotate(${Math.random() * 360}deg)`, opacity: 0 }
184
- ], {
185
- duration: Math.random() * 3000 + 2000,
186
- easing: 'cubic-bezier(0.215, 0.610, 0.355, 1)'
187
- });
188
-
189
- animation.onfinish = () => confetti.remove();
190
- }
191
  }
192
 
193
- // Export for global use
194
- window.createConfetti = createConfetti;
 
 
 
 
 
 
 
1
+ // GraphicsLab Main Script
2
+ console.log('GraphicsLab loaded');
3
 
4
+ // Global state for benchmarks
5
+ window.graphicsLab = {
6
+ currentTest: null,
7
+ results: [],
8
+ apiBase: 'https://api.publicapis.org/entries?category=graphics&https=true'
9
+ };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
10
 
11
+ // Fetch available graphics APIs from public‑apis
12
+ async function fetchGraphicsAPIs() {
13
  try {
14
+ const res = await fetch('https://api.publicapis.org/entries?category=graphics&https=true');
15
+ const data = await res.json();
16
+ console.log('Graphics APIs:', data);
17
+ return data.entries || [];
18
+ } catch (err) {
19
+ console.warn('Could not fetch APIs, using fallback', err);
20
+ return [
21
+ { API: 'WebGL', Description: 'Web Graphics Library', Link: 'https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API' },
22
+ { API: 'Canvas', Description: '2D Drawing API', Link: 'https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API' },
23
+ { API: 'WebGPU', Description: 'Next‑gen GPU API', Link: 'https://gpuweb.github.io/gpuweb/' }
24
+ ];
25
  }
26
  }
27
 
28
+ // Simulate a benchmark
29
+ function simulateBenchmark(testName, duration = 3000) {
30
+ return new Promise((resolve) => {
31
+ console.log(`Starting benchmark: ${testName}`);
32
+ const start = performance.now();
33
+ // Simulate work
34
+ let progress = 0;
35
+ const interval = setInterval(() => {
36
+ progress += 10;
37
+ console.log(`${testName} progress: ${progress}%`);
38
+ if (progress >= 100) {
39
+ clearInterval(interval);
40
+ const end = performance.now();
41
+ const score = Math.floor(Math.random() * 5000) + 1000;
42
+ const result = {
43
+ test: testName,
44
+ score,
45
+ unit: 'points',
46
+ duration: end - start,
47
+ timestamp: new Date().toISOString()
48
+ };
49
+ window.graphicsLab.results.push(result);
50
+ console.log(`Benchmark ${testName} completed:`, result);
51
+ resolve(result);
52
+ }
53
+ }, duration / 10);
54
  });
 
 
55
  }
56
 
57
+ // Display notification
58
+ function showNotification(message, type = 'info') {
59
+ const toast = document.createElement('div');
60
+ toast.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg text-white font-semibold z-50 ${
61
+ type === 'success' ? 'bg-green-500' :
62
+ type === 'error' ? 'bg-red-500' :
63
+ 'bg-blue-500'
64
+ }`;
65
+ toast.textContent = message;
66
+ document.body.appendChild(toast);
67
+ setTimeout(() => toast.remove(), 4000);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
68
  }
69
 
70
+ // Initialize on page load
71
+ document.addEventListener('DOMContentLoaded', () => {
72
+ console.log('GraphicsLab initialized');
73
+ // Any global initialization
74
+ if (typeof Chart !== 'undefined') {
75
+ console.log('Chart.js ready');
76
+ }
77
+ });
style.css CHANGED
@@ -1,111 +1,210 @@
 
 
1
 
2
- /* Custom Styles */
3
- @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;200;300;400;500;600;700;800;900&display=swap');
 
 
 
4
 
5
  body {
6
- font-family: 'Vazirmatn', sans-serif;
 
 
 
7
  overflow-x: hidden;
8
  }
9
 
10
- /* Custom Scrollbar */
11
- ::-webkit-scrollbar {
12
- width: 12px;
 
13
  }
14
 
15
- ::-webkit-scrollbar-track {
16
- background: rgba(0, 0, 0, 0.05);
17
- border-radius: 10px;
 
18
  }
19
 
20
- ::-webkit-scrollbar-thumb {
21
- background: linear-gradient(to bottom, #3B82F6, #8B5CF6);
22
- border-radius: 10px;
23
- border: 2px solid rgba(255, 255, 255, 0.8);
 
 
 
 
 
 
 
 
 
 
24
  }
25
 
26
- ::-webkit-scrollbar-thumb:hover {
27
- background: linear-gradient(to bottom, #2563EB, #7C3AED);
 
 
28
  }
29
 
30
- /* Animation Classes */
31
- .fade-in {
32
- animation: fadeIn 0.5s ease-in-out;
33
  }
34
 
35
- @keyframes fadeIn {
36
- from { opacity: 0; }
37
- to { opacity: 1; }
 
38
  }
39
 
40
- .slide-up {
41
- animation: slideUp 0.8s ease-out;
 
42
  }
43
 
44
- @keyframes slideUp {
45
- from {
46
- opacity: 0;
47
- transform: translateY(40px);
48
- }
49
- to {
50
- opacity: 1;
51
- transform: translateY(0);
52
- }
53
  }
54
 
55
- /* Glass effect */
56
- .glass {
57
- background: rgba(255, 255, 255, 0.2);
58
- backdrop-filter: blur(10px);
59
- border: 1px solid rgba(255, 255, 255, 0.3);
60
  }
61
 
62
- /* Gradient text */
63
- .gradient-text {
64
- background: linear-gradient(90deg, #3B82F6, #8B5CF6, #EC4899);
65
- -webkit-background-clip: text;
66
- -webkit-text-fill-color: transparent;
67
- background-clip: text;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
68
  }
69
 
70
- /* Pulse animation */
71
- @keyframes pulse-glow {
72
- 0%, 100% { opacity: 1; }
73
- 50% { opacity: 0.7; }
74
  }
75
 
76
- .pulse-glow {
77
- animation: pulse-glow 2s infinite;
 
78
  }
79
 
80
- /* Floating animation */
81
- @keyframes floating {
82
- 0%, 100% { transform: translateY(0); }
83
- 50% { transform: translateY(-20px); }
84
  }
85
 
86
- .floating {
87
- animation: floating 3s ease-in-out infinite;
 
88
  }
89
 
90
- /* Responsive Adjustments */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
91
  @media (max-width: 768px) {
92
- .hero-text {
93
- text-align: center;
94
  }
95
-
96
- .hero-buttons {
97
- justify-content: center;
98
  }
99
-
100
- .mobile-hide {
101
- display: none;
102
  }
103
- }
104
-
105
- /* Background patterns */
106
- .bg-grid {
107
- background-image:
108
- linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px),
109
- linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px);
110
- background-size: 50px 50px;
111
- }
 
1
+ /* GraphicsLab - High‑End Graphics Testing Styles */
2
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
3
 
4
+ * {
5
+ margin: 0;
6
+ padding: 0;
7
+ box-sizing: border-box;
8
+ }
9
 
10
  body {
11
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
12
+ background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
13
+ color: #1a202c;
14
+ min-height: 100dvh;
15
  overflow-x: hidden;
16
  }
17
 
18
+ .container {
19
+ max-width: 1200px;
20
+ margin: 0 auto;
21
+ padding: 0 1.5rem;
22
  }
23
 
24
+ /* Typography */
25
+ h1, h2, h3, h4, h5, h6 {
26
+ font-weight: 700;
27
+ line-height: 1.2;
28
  }
29
 
30
+ /* Buttons */
31
+ .btn-primary, .btn-secondary, .btn-outline, .btn-small {
32
+ display: inline-flex;
33
+ align-items: center;
34
+ justify-content: center;
35
+ padding: 0.75rem 1.5rem;
36
+ border-radius: 0.5rem;
37
+ font-weight: 600;
38
+ font-size: 1rem;
39
+ text-decoration: none;
40
+ cursor: pointer;
41
+ transition: all 0.3s ease;
42
+ border: 2px solid transparent;
43
+ outline: none;
44
  }
45
 
46
+ .btn-primary {
47
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
48
+ color: white;
49
+ box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
50
  }
51
 
52
+ .btn-primary:hover {
53
+ transform: translateY(-2px);
54
+ box-shadow: 0 6px 16px rgba(102, 126, 234, 0.6);
55
  }
56
 
57
+ .btn-secondary {
58
+ background: linear-gradient(135deg, #10b981 0%, #059669 100%);
59
+ color: white;
60
+ box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
61
  }
62
 
63
+ .btn-secondary:hover {
64
+ transform: translateY(-2px);
65
+ box-shadow: 0 6px 16px rgba(16, 185, 129, 0.6);
66
  }
67
 
68
+ .btn-outline {
69
+ background: transparent;
70
+ color: #667eea;
71
+ border-color: #667eea;
 
 
 
 
 
72
  }
73
 
74
+ .btn-outline:hover {
75
+ background: #667eea;
76
+ color: white;
 
 
77
  }
78
 
79
+ .btn-large {
80
+ padding: 1rem 2.5rem;
81
+ font-size: 1.125rem;
82
+ }
83
+
84
+ .btn-small {
85
+ padding: 0.5rem 1rem;
86
+ font-size: 0.875rem;
87
+ background: #4f46e5;
88
+ color: white;
89
+ border-radius: 0.375rem;
90
+ }
91
+
92
+ .btn-small:hover {
93
+ background: #4338ca;
94
+ }
95
+
96
+ /* Cards */
97
+ .card {
98
+ background: white;
99
+ border-radius: 1rem;
100
+ padding: 2rem;
101
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
102
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
103
+ border: 1px solid #e5e7eb;
104
+ }
105
+
106
+ .card:hover {
107
+ transform: translateY(-5px);
108
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
109
+ }
110
+
111
+ .hover-lift:hover {
112
+ transform: translateY(-8px);
113
+ }
114
+
115
+ .icon-circle {
116
+ width: 64px;
117
+ height: 64px;
118
+ border-radius: 50%;
119
+ display: flex;
120
+ align-items: center;
121
+ justify-content: center;
122
+ font-size: 1.8rem;
123
+ margin-bottom: 1.5rem;
124
+ }
125
+
126
+ /* Badges */
127
+ .badge {
128
+ display: inline-block;
129
+ padding: 0.25rem 0.75rem;
130
+ border-radius: 9999px;
131
+ font-size: 0.75rem;
132
+ font-weight: 600;
133
+ text-transform: uppercase;
134
+ letter-spacing: 0.05em;
135
  }
136
 
137
+ .badge-webgl {
138
+ background: #c7d2fe;
139
+ color: #3730a3;
 
140
  }
141
 
142
+ .badge-canvas {
143
+ background: #bbf7d0;
144
+ color: #166534;
145
  }
146
 
147
+ .badge-webgpu {
148
+ background: #fbcfe8;
149
+ color: #831843;
 
150
  }
151
 
152
+ .badge-easy {
153
+ background: #d1fae5;
154
+ color: #065f46;
155
  }
156
 
157
+ .badge-medium {
158
+ background: #fef3c7;
159
+ color: #92400e;
160
+ }
161
+
162
+ .badge-hard {
163
+ background: #fee2e2;
164
+ color: #991b1b;
165
+ }
166
+
167
+ /* Table */
168
+ table {
169
+ width: 100%;
170
+ border-collapse: collapse;
171
+ border-radius: 0.75rem;
172
+ overflow: hidden;
173
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
174
+ }
175
+
176
+ th, td {
177
+ padding: 1rem;
178
+ text-align: left;
179
+ border-bottom: 1px solid #e5e7eb;
180
+ }
181
+
182
+ thead {
183
+ background: #1f2937;
184
+ color: white;
185
+ }
186
+
187
+ tbody tr:last-child td {
188
+ border-bottom: none;
189
+ }
190
+
191
+ /* Utility */
192
+ .text-gradient {
193
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
194
+ -webkit-background-clip: text;
195
+ -webkit-text-fill-color: transparent;
196
+ background-clip: text;
197
+ }
198
+
199
+ /* Responsive */
200
  @media (max-width: 768px) {
201
+ .container {
202
+ padding: 0 1rem;
203
  }
204
+ h1 {
205
+ font-size: 2.5rem;
 
206
  }
207
+ .card {
208
+ padding: 1.5rem;
 
209
  }
210
+ }
 
 
 
 
 
 
 
 
visualizer.html ADDED
@@ -0,0 +1,336 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>3D Visualizer | GraphicsLab</title>
7
+ <link rel="icon" type="image/x-icon" href="https://static.photos/technology/32x32/3">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script>
13
+ </head>
14
+ <body class="bg-gray-50 text-gray-900">
15
+ <custom-navbar></custom-navbar>
16
+
17
+ <main class="container mx-auto px-4 py-8">
18
+ <div class="mb-10">
19
+ <h1 class="text-4xl font-bold mb-4">Interactive 3D Visualizer</h1>
20
+ <p class="text-gray-600">Load, manipulate, and visualize 3D models with real‑time lighting and effects.</p>
21
+ </div>
22
+
23
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
24
+ <div class="lg:col-span-2">
25
+ <div class="card p-0 overflow-hidden">
26
+ <div class="bg-gray-900 p-4 flex justify-between items-center">
27
+ <h2 class="text-xl font-bold text-white">WebGL Canvas</h2>
28
+ <div class="flex gap-2">
29
+ <button id="playBtn" class="btn-small bg-green-600">
30
+ <i class="fas fa-play mr-1"></i> Play
31
+ </button>
32
+ <button id="resetBtn" class="btn-small bg-gray-700">
33
+ <i class="fas fa-redo mr-1"></i> Reset
34
+ </button>
35
+ </div>
36
+ </div>
37
+ <div id="canvasContainer" class="relative w-full h-96 bg-gradient-to-br from-gray-900 to-black">
38
+ <canvas id="threeCanvas" class="w-full h-full"></canvas>
39
+ <div id="loading" class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-75 text-white text-xl">
40
+ <div class="text-center">
41
+ <i class="fas fa-spinner fa-spin text-4xl mb-4"></i>
42
+ <p>Loading WebGL scene...</p>
43
+ </div>
44
+ </div>
45
+ </div>
46
+ <div class="p-4 bg-gray-100 flex justify-between items-center">
47
+ <div class="text-sm text-gray-700">
48
+ <span id="fpsCounter">FPS: 60</span> |
49
+ <span id="triangleCount">Triangles: 0</span> |
50
+ <span id="renderTime">Render: 0ms</span>
51
+ </div>
52
+ <div class="flex gap-2">
53
+ <button class="text-sm bg-gray-300 hover:bg-gray-400 px-3 py-1 rounded" onclick="toggleWireframe()">
54
+ <i class="fas fa-th"></i> Wireframe
55
+ </button>
56
+ <button class="text-sm bg-gray-300 hover:bg-gray-400 px-3 py-1 rounded" onclick="toggleShadows()">
57
+ <i class="fas fa-sun"></i> Shadows
58
+ </button>
59
+ </div>
60
+ </div>
61
+ </div>
62
+
63
+ <div class="card mt-8">
64
+ <h2 class="text-2xl font-bold mb-4">Model Library</h2>
65
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
66
+ <div class="model-card p-4 border border-gray-300 rounded-lg text-center cursor-pointer hover:bg-gray-50" onclick="loadModel('sphere')">
67
+ <div class="text-4xl text-blue-500 mb-2">
68
+ <i class="fas fa-globe-americas"></i>
69
+ </div>
70
+ <div class="font-semibold">Sphere</div>
71
+ <div class="text-sm text-gray-500">1,280 triangles</div>
72
+ </div>
73
+ <div class="model-card p-4 border border-gray-300 rounded-lg text-center cursor-pointer hover:bg-gray-50" onclick="loadModel('cube')">
74
+ <div class="text-4xl text-purple-500 mb-2">
75
+ <i class="fas fa-cube"></i>
76
+ </div>
77
+ <div class="font-semibold">Cube</div>
78
+ <div class="text-sm text-gray-500">12 triangles</div>
79
+ </div>
80
+ <div class="model-card p-4 border border-gray-300 rounded-lg text-center cursor-pointer hover:bg-gray-50" onclick="loadModel('torus')">
81
+ <div class="text-4xl text-green-500 mb-2">
82
+ <i class="fas fa-ring"></i>
83
+ </div>
84
+ <div class="font-semibold">Torus</div>
85
+ <div class="text-sm text-gray-500">4,800 triangles</div>
86
+ </div>
87
+ <div class="model-card p-4 border border-gray-300 rounded-lg text-center cursor-pointer hover:bg-gray-50" onclick="loadModel('teapot')">
88
+ <div class="text-4xl text-red-500 mb-2">
89
+ <i class="fas fa-mug-hot"></i>
90
+ </div>
91
+ <div class="font-semibold">Teapot</div>
92
+ <div class="text-sm text-gray-500">6,324 triangles</div>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ </div>
97
+
98
+ <div>
99
+ <div class="card mb-8">
100
+ <h2 class="text-2xl font-bold mb-4">Controls</h2>
101
+ <div class="space-y-6">
102
+ <div>
103
+ <label class="block text-gray-700 mb-2">Rotation Speed</label>
104
+ <input type="range" min="0" max="10" value="2" class="w-full" id="rotationSpeed" oninput="updateRotation(this.value)">
105
+ <div class="flex justify-between text-sm text-gray-500">
106
+ <span>Slow</span>
107
+ <span id="speedValue">2</span>
108
+ <span>Fast</span>
109
+ </div>
110
+ </div>
111
+ <div>
112
+ <label class="block text-gray-700 mb-2">Light Intensity</label>
113
+ <input type="range" min="0" max="5" step="0.1" value="1.5" class="w-full" id="lightIntensity" oninput="updateLight(this.value)">
114
+ <div class="flex justify-between text-sm text-gray-500">
115
+ <span>Dim</span>
116
+ <span id="lightValue">1.5</span>
117
+ <span>Bright</span>
118
+ </div>
119
+ </div>
120
+ <div>
121
+ <label class="block text-gray-700 mb-2">Background Color</label>
122
+ <div class="flex gap-2">
123
+ <button class="flex-1 py-2 rounded bg-gray-800 text-white" onclick="setBackground('#1f2937')">Dark</button>
124
+ <button class="flex-1 py-2 rounded bg-gray-300" onclick="setBackground('#f3f4f6')">Light</button>
125
+ <button class="flex-1 py-2 rounded bg-blue-900 text-white" onclick="setBackground('#1e3a8a')">Blue</button>
126
+ </div>
127
+ </div>
128
+ <div>
129
+ <label class="block text-gray-700 mb-2">Post‑Processing</label>
130
+ <div class="space-y-2">
131
+ <label class="flex items-center">
132
+ <input type="checkbox" class="mr-2" id="bloom" onchange="toggleEffect('bloom')">
133
+ <span>Bloom</span>
134
+ </label>
135
+ <label class="flex items-center">
136
+ <input type="checkbox" class="mr-2" id="vignette" onchange="toggleEffect('vignette')">
137
+ <span>Vignette</span>
138
+ </label>
139
+ <label class="flex items-center">
140
+ <input type="checkbox" class="mr-2" id="ssao" onchange="toggleEffect('ssao')">
141
+ <span>SSAO</span>
142
+ </label>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </div>
147
+
148
+ <div class="card">
149
+ <h2 class="text-2xl font-bold mb-4">Scene Info</h2>
150
+ <div class="space-y-3">
151
+ <div class="flex justify-between">
152
+ <span class="text-gray-600">Renderer</span>
153
+ <span class="font-semibold" id="rendererInfo">WebGL 2</span>
154
+ </div>
155
+ <div class="flex justify-between">
156
+ <span class="text-gray-600">Draw Calls</span>
157
+ <span class="font-semibold" id="drawCalls">1</span>
158
+ </div>
159
+ <div class="flex justify-between">
160
+ <span class="text-gray-600">Textures</span>
161
+ <span class="font-semibold" id="textureCount">3</span>
162
+ </div>
163
+ <div class="flex justify-between">
164
+ <span class="text-gray-600">Lights</span>
165
+ <span class="font-semibold" id="lightCount">2</span>
166
+ </div>
167
+ <div class="flex justify-between">
168
+ <span class="text-gray-600">VRAM Usage</span>
169
+ <span class="font-semibold" id="vramUsage">~120 MB</span>
170
+ </div>
171
+ </div>
172
+ <button class="btn-primary w-full mt-6" onclick="exportScene()">
173
+ <i class="fas fa-download mr-2"></i> Export as GLB
174
+ </button>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ </main>
179
+
180
+ <custom-footer></custom-footer>
181
+
182
+ <script src="components/navbar.js"></script>
183
+ <script src="components/footer.js"></script>
184
+ <script src="script.js"></script>
185
+ <script>
186
+ // Three.js scene variables
187
+ let scene, camera, renderer, controls, cube;
188
+ let rotationSpeed = 2;
189
+ let lightIntensity = 1.5;
190
+ let frameCount = 0;
191
+ let lastTime = performance.now();
192
+ let fps = 60;
193
+
194
+ // Initialize Three.js scene
195
+ function initScene() {
196
+ const canvas = document.getElementById('threeCanvas');
197
+ const container = document.getElementById('canvasContainer');
198
+
199
+ scene = new THREE.Scene();
200
+ scene.background = new THREE.Color(0x1f2937);
201
+
202
+ camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
203
+ camera.position.z = 5;
204
+
205
+ renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
206
+ renderer.setSize(container.clientWidth, container.clientHeight);
207
+ renderer.shadowMap.enabled = true;
208
+ renderer.shadowMap.type = THREE.PCFSoftShadowMap;
209
+
210
+ // OrbitControls
211
+ controls = new THREE.OrbitControls(camera, renderer.domElement);
212
+ controls.enableDamping = true;
213
+ controls.dampingFactor = 0.05;
214
+
215
+ // Lighting
216
+ const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
217
+ scene.add(ambientLight);
218
+
219
+ const directionalLight = new THREE.DirectionalLight(0xffffff, lightIntensity);
220
+ directionalLight.position.set(5, 5, 5);
221
+ directionalLight.castShadow = true;
222
+ scene.add(directionalLight);
223
+
224
+ // Add a default cube
225
+ const geometry = new THREE.BoxGeometry();
226
+ const material = new THREE.MeshStandardMaterial({ color: 0x3b82f6, roughness: 0.3, metalness: 0.8 });
227
+ cube = new THREE.Mesh(geometry, material);
228
+ cube.castShadow = true;
229
+ cube.receiveShadow = true;
230
+ scene.add(cube);
231
+
232
+ // Add a ground plane
233
+ const planeGeometry = new THREE.PlaneGeometry(10, 10);
234
+ const planeMaterial = new THREE.MeshStandardMaterial({ color: 0x374151, side: THREE.DoubleSide });
235
+ const plane = new THREE.Mesh(planeGeometry, planeMaterial);
236
+ plane.rotation.x = Math.PI / 2;
237
+ plane.position.y = -2;
238
+ plane.receiveShadow = true;
239
+ scene.add(plane);
240
+
241
+ // Hide loading
242
+ document.getElementById('loading').style.display = 'none';
243
+
244
+ // Start animation loop
245
+ animate();
246
+
247
+ // Update info
248
+ updateInfo();
249
+ }
250
+
251
+ // Animation loop
252
+ function animate() {
253
+ requestAnimationFrame(animate);
254
+ cube.rotation.x += 0.01 * rotationSpeed;
255
+ cube.rotation.y += 0.01 * rotationSpeed;
256
+ controls.update();
257
+ renderer.render(scene, camera);
258
+
259
+ // FPS calculation
260
+ frameCount++;
261
+ const now = performance.now();
262
+ if (now >= lastTime + 1000) {
263
+ fps = Math.round((frameCount * 1000) / (now - lastTime));
264
+ frameCount = 0;
265
+ lastTime = now;
266
+ document.getElementById('fpsCounter').textContent = `FPS: ${fps}`;
267
+ }
268
+ }
269
+
270
+ // UI functions
271
+ function updateRotation(val) {
272
+ rotationSpeed = parseFloat(val);
273
+ document.getElementById('speedValue').textContent = val;
274
+ }
275
+
276
+ function updateLight(val) {
277
+ lightIntensity = parseFloat(val);
278
+ scene.children.forEach(child => {
279
+ if (child.isLight) child.intensity = lightIntensity;
280
+ });
281
+ document.getElementById('lightValue').textContent = val;
282
+ }
283
+
284
+ function setBackground(color) {
285
+ scene.background = new THREE.Color(color);
286
+ }
287
+
288
+ function toggleWireframe() {
289
+ cube.material.wireframe = !cube.material.wireframe;
290
+ }
291
+
292
+ function toggleShadows() {
293
+ renderer.shadowMap.enabled = !renderer.shadowMap.enabled;
294
+ }
295
+
296
+ function toggleEffect(effect) {
297
+ alert(`Effect ${effect} toggled (simulated)`);
298
+ }
299
+
300
+ function loadModel(model) {
301
+ alert(`Loading ${model} model (simulated)`);
302
+ // In a real app, load GLTF/OBJ here
303
+ document.getElementById('triangleCount').textContent = `Triangles: ${{
304
+ sphere: 1280,
305
+ cube: 12,
306
+ torus: 4800,
307
+ teapot: 6324
308
+ }[model]}`;
309
+ }
310
+
311
+ function exportScene() {
312
+ alert('Scene exported as GLB (simulated)');
313
+ }
314
+
315
+ function updateInfo() {
316
+ document.getElementById('rendererInfo').textContent = renderer.capabilities.isWebGL2 ? 'WebGL 2' : 'WebGL 1';
317
+ document.getElementById('drawCalls').textContent = renderer.info.render.calls;
318
+ document.getElementById('textureCount').textContent = renderer.info.memory.textures;
319
+ document.getElementById('lightCount').textContent = scene.children.filter(c => c.isLight).length;
320
+ }
321
+
322
+ // Resize handler
323
+ window.addEventListener('resize', () => {
324
+ const container = document.getElementById('canvasContainer');
325
+ camera.aspect = container.clientWidth / container.clientHeight;
326
+ camera.updateProjectionMatrix();
327
+ renderer.setSize(container.clientWidth, container.clientHeight);
328
+ });
329
+
330
+ // Initialize on load
331
+ window.addEventListener('DOMContentLoaded', () => {
332
+ initScene();
333
+ });
334
+ </script>
335
+ </body>
336
+ </html>