Spaces:
Running
Running
در این فایلی که اتخاب کردم کی خوام یک سایت بنویسی برای تست گرافیک که سطحش بالا باشه و نتیجه هم بده
Browse files- benchmarks.html +264 -0
- compare.html +138 -0
- components/footer.js +121 -172
- components/navbar.js +107 -130
- index.html +0 -339
- script.js +66 -183
- style.css +172 -73
- 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 |
-
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
| 20 |
-
|
| 21 |
-
|
| 22 |
-
|
| 23 |
-
|
| 24 |
-
|
| 25 |
-
|
| 26 |
-
|
| 27 |
-
|
| 28 |
-
|
| 29 |
-
|
| 30 |
-
|
| 31 |
-
|
| 32 |
-
|
| 33 |
-
|
| 34 |
-
|
| 35 |
-
|
| 36 |
-
|
| 37 |
-
|
| 38 |
-
|
| 39 |
-
|
| 40 |
-
|
| 41 |
-
|
| 42 |
-
|
| 43 |
-
|
| 44 |
-
|
| 45 |
-
|
| 46 |
-
|
| 47 |
-
|
| 48 |
-
|
| 49 |
-
|
| 50 |
-
|
| 51 |
-
|
| 52 |
-
|
| 53 |
-
|
| 54 |
-
|
| 55 |
-
|
| 56 |
-
|
| 57 |
-
|
| 58 |
-
|
| 59 |
-
|
| 60 |
-
|
| 61 |
-
|
| 62 |
-
|
| 63 |
-
|
| 64 |
-
|
| 65 |
-
|
| 66 |
-
|
| 67 |
-
|
| 68 |
-
|
| 69 |
-
|
| 70 |
-
|
| 71 |
-
|
| 72 |
-
|
| 73 |
-
|
| 74 |
-
|
| 75 |
-
|
| 76 |
-
|
| 77 |
-
|
| 78 |
-
|
| 79 |
-
|
| 80 |
-
|
| 81 |
-
|
| 82 |
-
|
| 83 |
-
|
| 84 |
-
|
| 85 |
-
|
| 86 |
-
|
| 87 |
-
|
| 88 |
-
|
| 89 |
-
|
| 90 |
-
|
| 91 |
-
|
| 92 |
-
|
| 93 |
-
|
| 94 |
-
|
| 95 |
-
|
| 96 |
-
|
| 97 |
-
|
| 98 |
-
|
| 99 |
-
|
| 100 |
-
|
| 101 |
-
<
|
| 102 |
-
|
| 103 |
-
|
| 104 |
-
|
| 105 |
-
|
| 106 |
-
|
| 107 |
-
|
| 108 |
-
|
| 109 |
-
|
| 110 |
-
|
| 111 |
-
|
| 112 |
-
|
| 113 |
-
|
| 114 |
-
|
| 115 |
-
</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 |
-
|
| 170 |
-
|
| 171 |
-
|
| 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 |
+
© 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 |
-
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
| 20 |
-
|
| 21 |
-
|
| 22 |
-
|
| 23 |
-
|
| 24 |
-
|
| 25 |
-
|
| 26 |
-
|
| 27 |
-
|
| 28 |
-
|
| 29 |
-
|
| 30 |
-
|
| 31 |
-
|
| 32 |
-
|
| 33 |
-
|
| 34 |
-
|
| 35 |
-
|
| 36 |
-
|
| 37 |
-
|
| 38 |
-
|
| 39 |
-
|
| 40 |
-
|
| 41 |
-
|
| 42 |
-
|
| 43 |
-
|
| 44 |
-
|
| 45 |
-
|
| 46 |
-
|
| 47 |
-
|
| 48 |
-
|
| 49 |
-
|
| 50 |
-
|
| 51 |
-
|
| 52 |
-
|
| 53 |
-
|
| 54 |
-
|
| 55 |
-
|
| 56 |
-
|
| 57 |
-
|
| 58 |
-
|
| 59 |
-
|
| 60 |
-
|
| 61 |
-
|
| 62 |
-
|
| 63 |
-
|
| 64 |
-
|
| 65 |
-
|
| 66 |
-
|
| 67 |
-
|
| 68 |
-
|
| 69 |
-
|
| 70 |
-
|
| 71 |
-
|
| 72 |
-
|
| 73 |
-
|
| 74 |
-
|
| 75 |
-
|
| 76 |
-
|
| 77 |
-
|
| 78 |
-
|
| 79 |
-
|
| 80 |
-
|
| 81 |
-
|
| 82 |
-
|
| 83 |
-
|
| 84 |
-
|
| 85 |
-
|
| 86 |
-
|
| 87 |
-
|
| 88 |
-
|
| 89 |
-
|
| 90 |
-
|
| 91 |
-
|
| 92 |
-
|
| 93 |
-
|
| 94 |
-
|
| 95 |
-
|
| 96 |
-
|
| 97 |
-
|
| 98 |
-
|
| 99 |
-
|
| 100 |
-
|
| 101 |
-
|
| 102 |
-
|
| 103 |
-
|
| 104 |
-
|
| 105 |
-
|
| 106 |
-
|
| 107 |
-
|
| 108 |
-
|
| 109 |
-
<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 |
-
//
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 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 |
-
//
|
| 134 |
-
async function
|
| 135 |
try {
|
| 136 |
-
const
|
| 137 |
-
const data = await
|
| 138 |
-
|
| 139 |
-
|
| 140 |
-
|
| 141 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 142 |
}
|
| 143 |
}
|
| 144 |
|
| 145 |
-
//
|
| 146 |
-
function
|
| 147 |
-
|
| 148 |
-
|
| 149 |
-
|
| 150 |
-
|
| 151 |
-
|
| 152 |
-
|
| 153 |
-
|
| 154 |
-
|
| 155 |
-
|
| 156 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 157 |
});
|
| 158 |
-
|
| 159 |
-
return isValid;
|
| 160 |
}
|
| 161 |
|
| 162 |
-
//
|
| 163 |
-
function
|
| 164 |
-
const
|
| 165 |
-
|
| 166 |
-
|
| 167 |
-
|
| 168 |
-
|
| 169 |
-
|
| 170 |
-
|
| 171 |
-
|
| 172 |
-
|
| 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 |
-
//
|
| 194 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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 |
-
|
| 3 |
-
|
|
|
|
|
|
|
|
|
|
| 4 |
|
| 5 |
body {
|
| 6 |
-
font-family: '
|
|
|
|
|
|
|
|
|
|
| 7 |
overflow-x: hidden;
|
| 8 |
}
|
| 9 |
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
|
|
|
| 13 |
}
|
| 14 |
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
|
|
|
| 18 |
}
|
| 19 |
|
| 20 |
-
|
| 21 |
-
|
| 22 |
-
|
| 23 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 24 |
}
|
| 25 |
|
| 26 |
-
|
| 27 |
-
background: linear-gradient(
|
|
|
|
|
|
|
| 28 |
}
|
| 29 |
|
| 30 |
-
|
| 31 |
-
|
| 32 |
-
|
| 33 |
}
|
| 34 |
|
| 35 |
-
|
| 36 |
-
|
| 37 |
-
|
|
|
|
| 38 |
}
|
| 39 |
|
| 40 |
-
.
|
| 41 |
-
|
|
|
|
| 42 |
}
|
| 43 |
|
| 44 |
-
|
| 45 |
-
|
| 46 |
-
|
| 47 |
-
|
| 48 |
-
}
|
| 49 |
-
to {
|
| 50 |
-
opacity: 1;
|
| 51 |
-
transform: translateY(0);
|
| 52 |
-
}
|
| 53 |
}
|
| 54 |
|
| 55 |
-
|
| 56 |
-
|
| 57 |
-
|
| 58 |
-
backdrop-filter: blur(10px);
|
| 59 |
-
border: 1px solid rgba(255, 255, 255, 0.3);
|
| 60 |
}
|
| 61 |
|
| 62 |
-
|
| 63 |
-
|
| 64 |
-
|
| 65 |
-
|
| 66 |
-
|
| 67 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 68 |
}
|
| 69 |
|
| 70 |
-
|
| 71 |
-
|
| 72 |
-
|
| 73 |
-
50% { opacity: 0.7; }
|
| 74 |
}
|
| 75 |
|
| 76 |
-
.
|
| 77 |
-
|
|
|
|
| 78 |
}
|
| 79 |
|
| 80 |
-
|
| 81 |
-
|
| 82 |
-
|
| 83 |
-
50% { transform: translateY(-20px); }
|
| 84 |
}
|
| 85 |
|
| 86 |
-
.
|
| 87 |
-
|
|
|
|
| 88 |
}
|
| 89 |
|
| 90 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 91 |
@media (max-width: 768px) {
|
| 92 |
-
.
|
| 93 |
-
|
| 94 |
}
|
| 95 |
-
|
| 96 |
-
|
| 97 |
-
justify-content: center;
|
| 98 |
}
|
| 99 |
-
|
| 100 |
-
|
| 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>
|