compare.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Kamaji - Technology Comparison</title> 7 <style> 8 * { 9 margin: 0; 10 padding: 0; 11 box-sizing: border-box; 12 } 13 14 body { 15 font-family: Verdana, sans-serif; 16 background: linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #111111 100%); 17 color: #fff; 18 padding: 2rem; 19 } 20 21 h1 { 22 text-align: center; 23 color: #ff6600; 24 font-size: 2.5rem; 25 margin-bottom: 1rem; 26 text-shadow: 0 0 10px rgba(255, 102, 0, 0.5); 27 } 28 29 .subtitle { 30 text-align: center; 31 color: #aaa; 32 margin-bottom: 3rem; 33 font-size: 1.1rem; 34 } 35 36 .comparison-grid { 37 display: grid; 38 grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); 39 gap: 2rem; 40 max-width: 1800px; 41 margin: 0 auto; 42 } 43 44 .version-card { 45 background: rgba(255, 102, 0, 0.05); 46 border: 2px solid #ff6600; 47 border-radius: 12px; 48 padding: 1.5rem; 49 box-shadow: 0 4px 20px rgba(255, 102, 0, 0.2); 50 transition: all 0.3s ease; 51 } 52 53 .version-card:hover { 54 transform: translateY(-5px); 55 box-shadow: 0 8px 30px rgba(255, 102, 0, 0.4); 56 border-color: #ff8833; 57 } 58 59 .version-title { 60 color: #ff6600; 61 font-size: 1.5rem; 62 margin-bottom: 0.5rem; 63 font-weight: bold; 64 } 65 66 .tech-stack { 67 color: #aaa; 68 font-size: 0.9rem; 69 margin-bottom: 1rem; 70 font-family: 'Courier New', monospace; 71 } 72 73 .iframe-container { 74 position: relative; 75 width: 100%; 76 height: 400px; 77 border: 1px solid #333; 78 border-radius: 8px; 79 overflow: hidden; 80 background: #000; 81 margin-bottom: 1rem; 82 display: flex; 83 align-items: center; 84 justify-content: center; 85 } 86 87 iframe { 88 width: 100%; 89 height: 100%; 90 border: none; 91 } 92 93 .iframe-container.canvas-2d { 94 overflow: visible; 95 } 96 97 .iframe-container.canvas-2d iframe { 98 width: 280px; 99 height: 280px; 100 transform: scale(1.43); 101 } 102 103 .features { 104 list-style: none; 105 padding: 0; 106 } 107 108 .features li { 109 padding: 0.5rem 0; 110 padding-left: 1.5rem; 111 position: relative; 112 color: #ccc; 113 } 114 115 .features li::before { 116 content: '▸'; 117 position: absolute; 118 left: 0; 119 color: #ff6600; 120 } 121 122 .pros-cons { 123 display: grid; 124 grid-template-columns: 1fr 1fr; 125 gap: 1rem; 126 margin-top: 1rem; 127 } 128 129 .pros, .cons { 130 background: rgba(0, 0, 0, 0.3); 131 padding: 1rem; 132 border-radius: 6px; 133 } 134 135 .pros h4 { 136 color: #10b981; 137 margin-bottom: 0.5rem; 138 } 139 140 .cons h4 { 141 color: #ff3300; 142 margin-bottom: 0.5rem; 143 } 144 145 .pros ul, .cons ul { 146 list-style: none; 147 padding-left: 0; 148 font-size: 0.85rem; 149 } 150 151 .pros li::before { 152 content: '✓ '; 153 color: #10b981; 154 } 155 156 .cons li::before { 157 content: '✗ '; 158 color: #ff3300; 159 } 160 161 .action-button { 162 display: inline-block; 163 background: linear-gradient(135deg, rgba(255, 102, 0, 0.2), rgba(255, 51, 0, 0.15)); 164 border: 1px solid #ff6600; 165 border-radius: 6px; 166 color: #ff6600; 167 padding: 0.75rem 1.5rem; 168 text-decoration: none; 169 font-weight: bold; 170 transition: all 0.3s ease; 171 margin-top: 1rem; 172 display: block; 173 text-align: center; 174 } 175 176 .action-button:hover { 177 background: rgba(255, 102, 0, 0.3); 178 transform: scale(1.05); 179 } 180 181 .stats { 182 display: flex; 183 justify-content: space-around; 184 margin-top: 1rem; 185 padding-top: 1rem; 186 border-top: 1px solid rgba(255, 102, 0, 0.3); 187 } 188 189 .stat { 190 text-align: center; 191 } 192 193 .stat-value { 194 display: block; 195 font-size: 1.5rem; 196 color: #ff6600; 197 font-weight: bold; 198 } 199 200 .stat-label { 201 display: block; 202 font-size: 0.75rem; 203 color: #aaa; 204 margin-top: 0.25rem; 205 } 206 207 .recommendation { 208 background: linear-gradient(90deg, rgba(255, 102, 0, 0.15) 0%, transparent 100%); 209 border-left: 4px solid #ff6600; 210 padding: 1.5rem; 211 margin: 2rem auto; 212 max-width: 1200px; 213 border-radius: 8px; 214 } 215 216 .recommendation h3 { 217 color: #ff6600; 218 margin-bottom: 1rem; 219 } 220 221 .recommendation-grid { 222 display: grid; 223 grid-template-columns: repeat(3, 1fr); 224 gap: 1rem; 225 margin-top: 1rem; 226 } 227 228 .rec-card { 229 background: rgba(0, 0, 0, 0.3); 230 padding: 1rem; 231 border-radius: 6px; 232 border: 1px solid rgba(255, 102, 0, 0.2); 233 } 234 235 .rec-card h4 { 236 color: #ffcc00; 237 margin-bottom: 0.5rem; 238 font-size: 0.95rem; 239 } 240 241 @media (max-width: 1200px) { 242 .comparison-grid { 243 grid-template-columns: 1fr; 244 } 245 246 .recommendation-grid { 247 grid-template-columns: 1fr; 248 } 249 } 250 </style> 251 </head> 252 <body> 253 <h1>🔥 KAMAJI - Technology Comparison</h1> 254 <p class="subtitle">Three Rendering Approaches: Canvas 2D • PixiJS WebGL • Three.js 3D</p> 255 256 <div class="comparison-grid"> 257 <!-- Canvas 2D --> 258 <div class="version-card"> 259 <div class="version-title">Canvas 2D (Current)</div> 260 <div class="tech-stack">HTML5 Canvas API • anime.js</div> 261 262 <div class="iframe-container canvas-2d"> 263 <iframe src="./index.html"></iframe> 264 </div> 265 266 <ul class="features"> 267 <li>Native browser API</li> 268 <li>Simple, straightforward code</li> 269 <li>Good browser compatibility</li> 270 <li>Lightweight (~5KB)</li> 271 </ul> 272 273 <div class="stats"> 274 <div class="stat"> 275 <span class="stat-value">~30</span> 276 <span class="stat-label">FPS</span> 277 </div> 278 <div class="stat"> 279 <span class="stat-value">5KB</span> 280 <span class="stat-label">Size</span> 281 </div> 282 <div class="stat"> 283 <span class="stat-value">CPU</span> 284 <span class="stat-label">Rendered</span> 285 </div> 286 </div> 287 288 <div class="pros-cons"> 289 <div class="pros"> 290 <h4>Pros</h4> 291 <ul> 292 <li>No dependencies</li> 293 <li>Universal support</li> 294 <li>Easy to debug</li> 295 <li>Small file size</li> 296 </ul> 297 </div> 298 <div class="cons"> 299 <h4>Cons</h4> 300 <ul> 301 <li>CPU-bound</li> 302 <li>No filters/effects</li> 303 <li>Lower FPS</li> 304 <li>No 3D depth</li> 305 </ul> 306 </div> 307 </div> 308 309 <a href="./index.html" target="_blank" class="action-button">Open Fullscreen</a> 310 </div> 311 312 <!-- PixiJS --> 313 <div class="version-card"> 314 <div class="version-title">PixiJS Enhanced 2D</div> 315 <div class="tech-stack">PixiJS v7 • WebGL • Filters</div> 316 317 <div class="iframe-container"> 318 <iframe src="./kamaji-pixi.html"></iframe> 319 </div> 320 321 <ul class="features"> 322 <li>GPU-accelerated rendering</li> 323 <li>Shader-based filters</li> 324 <li>60fps smooth animation</li> 325 <li>Drop shadows & glow effects</li> 326 </ul> 327 328 <div class="stats"> 329 <div class="stat"> 330 <span class="stat-value">~60</span> 331 <span class="stat-label">FPS</span> 332 </div> 333 <div class="stat"> 334 <span class="stat-value">300KB</span> 335 <span class="stat-label">Size</span> 336 </div> 337 <div class="stat"> 338 <span class="stat-value">GPU</span> 339 <span class="stat-label">Rendered</span> 340 </div> 341 </div> 342 343 <div class="pros-cons"> 344 <div class="pros"> 345 <h4>Pros</h4> 346 <ul> 347 <li>60fps performance</li> 348 <li>Professional effects</li> 349 <li>Same 2D style</li> 350 <li>Easy upgrade</li> 351 </ul> 352 </div> 353 <div class="cons"> 354 <h4>Cons</h4> 355 <ul> 356 <li>300KB library</li> 357 <li>WebGL required</li> 358 <li>Still 2D only</li> 359 <li>Learning curve</li> 360 </ul> 361 </div> 362 </div> 363 364 <a href="./kamaji-pixi.html" target="_blank" class="action-button">Open Fullscreen</a> 365 </div> 366 367 <!-- Three.js 3D --> 368 <div class="version-card"> 369 <div class="version-title">Three.js 3D Model</div> 370 <div class="tech-stack">Three.js r158 • WebGL • 3D Rendering</div> 371 372 <div class="iframe-container"> 373 <iframe src="./kamaji-threejs.html"></iframe> 374 </div> 375 376 <ul class="features"> 377 <li>Full 3D with depth</li> 378 <li>Realistic lighting & shadows</li> 379 <li>Interactive rotation</li> 380 <li>Professional quality</li> 381 </ul> 382 383 <div class="stats"> 384 <div class="stat"> 385 <span class="stat-value">~60</span> 386 <span class="stat-label">FPS</span> 387 </div> 388 <div class="stat"> 389 <span class="stat-value">600KB</span> 390 <span class="stat-label">Size</span> 391 </div> 392 <div class="stat"> 393 <span class="stat-value">3D</span> 394 <span class="stat-label">Rendered</span> 395 </div> 396 </div> 397 398 <div class="pros-cons"> 399 <div class="pros"> 400 <h4>Pros</h4> 401 <ul> 402 <li>True 3D depth</li> 403 <li>Realistic lighting</li> 404 <li>Interactive</li> 405 <li>Professional</li> 406 </ul> 407 </div> 408 <div class="cons"> 409 <h4>Cons</h4> 410 <ul> 411 <li>600KB library</li> 412 <li>Complex code</li> 413 <li>Higher GPU usage</li> 414 <li>Longer dev time</li> 415 </ul> 416 </div> 417 </div> 418 419 <a href="./kamaji-threejs.html" target="_blank" class="action-button">Open Fullscreen</a> 420 </div> 421 </div> 422 423 <div class="recommendation"> 424 <h3>🎯 Recommendations</h3> 425 <div class="recommendation-grid"> 426 <div class="rec-card"> 427 <h4>Best for Sidebar Icon</h4> 428 <p style="color: #ccc; font-size: 0.85rem; margin-top: 0.5rem;"> 429 <strong style="color: #ff6600;">PixiJS 2D</strong><br> 430 Fast loading, 60fps smooth, drop shadows for depth, maintains 2D aesthetic 431 </p> 432 </div> 433 <div class="rec-card"> 434 <h4>Best for Hero/Landing</h4> 435 <p style="color: #ccc; font-size: 0.85rem; margin-top: 0.5rem;"> 436 <strong style="color: #ff6600;">Three.js 3D</strong><br> 437 Interactive rotation, impressive first impression, professional quality 438 </p> 439 </div> 440 <div class="rec-card"> 441 <h4>Best for Production</h4> 442 <p style="color: #ccc; font-size: 0.85rem; margin-top: 0.5rem;"> 443 <strong style="color: #ff6600;">PixiJS 2D</strong><br> 444 Balance of quality & performance, easy maintenance, smaller bundle 445 </p> 446 </div> 447 </div> 448 </div> 449 450 <script> 451 console.log('🔥 KAMAJI Technology Comparison Loaded'); 452 console.log('Canvas 2D: Simple, lightweight, CPU-rendered'); 453 console.log('PixiJS: GPU-accelerated 2D, filters, 60fps'); 454 console.log('Three.js: Full 3D, lighting, interactive'); 455 </script> 456 </body> 457 </html>