compare-simple.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 Comparison</title> 7 <style> 8 * { 9 margin: 0; 10 padding: 0; 11 box-sizing: border-box; 12 } 13 14 body { 15 background: #0a0a0a; 16 font-family: Verdana, sans-serif; 17 color: #fff; 18 overflow: hidden; 19 } 20 21 .header { 22 text-align: center; 23 padding: 1rem; 24 background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%); 25 border-bottom: 2px solid #ff6600; 26 } 27 28 h1 { 29 color: #ff6600; 30 font-size: 1.8rem; 31 text-shadow: 0 0 10px rgba(255, 102, 0, 0.5); 32 } 33 34 .comparison-container { 35 display: grid; 36 grid-template-columns: repeat(3, 1fr); 37 height: calc(100vh - 100px); 38 gap: 0; 39 } 40 41 .version-panel { 42 position: relative; 43 border-right: 1px solid #333; 44 display: flex; 45 flex-direction: column; 46 } 47 48 .version-panel:last-child { 49 border-right: none; 50 } 51 52 .version-header { 53 background: rgba(255, 102, 0, 0.1); 54 padding: 0.75rem; 55 text-align: center; 56 border-bottom: 1px solid rgba(255, 102, 0, 0.3); 57 } 58 59 .version-title { 60 color: #ff6600; 61 font-size: 1.1rem; 62 font-weight: bold; 63 margin-bottom: 0.25rem; 64 } 65 66 .version-tech { 67 color: #888; 68 font-size: 0.75rem; 69 font-family: 'Courier New', monospace; 70 } 71 72 .version-viewport { 73 flex: 1; 74 position: relative; 75 background: #000; 76 display: flex; 77 align-items: center; 78 justify-content: center; 79 } 80 81 iframe { 82 width: 100%; 83 height: 100%; 84 border: none; 85 background: transparent; 86 } 87 88 .version-viewport.canvas-2d { 89 background: #000; 90 display: flex; 91 align-items: center; 92 justify-content: center; 93 } 94 95 .version-viewport.canvas-2d iframe { 96 width: 100%; 97 height: 100%; 98 transform: none; 99 } 100 101 .instructions { 102 position: absolute; 103 bottom: 10px; 104 left: 50%; 105 transform: translateX(-50%); 106 background: rgba(0, 0, 0, 0.8); 107 padding: 0.5rem 1rem; 108 border-radius: 4px; 109 font-size: 0.75rem; 110 color: #aaa; 111 pointer-events: none; 112 white-space: nowrap; 113 } 114 115 @media (max-width: 1200px) { 116 .comparison-container { 117 grid-template-columns: 1fr; 118 grid-template-rows: repeat(3, 1fr); 119 } 120 121 .version-panel { 122 border-right: none; 123 border-bottom: 1px solid #333; 124 } 125 126 .version-panel:last-child { 127 border-bottom: none; 128 } 129 } 130 </style> 131 </head> 132 <body> 133 <div class="header"> 134 <h1>🔥 KAMAJI Technology Comparison</h1> 135 </div> 136 137 <div class="comparison-container"> 138 <!-- Canvas 2D --> 139 <div class="version-panel"> 140 <div class="version-header"> 141 <div class="version-title">Canvas 2D</div> 142 <div class="version-tech">HTML5 Canvas • anime.js</div> 143 </div> 144 <div class="version-viewport canvas-2d"> 145 <iframe src="./kamaji-canvas-only.html"></iframe> 146 </div> 147 </div> 148 149 <!-- PixiJS --> 150 <div class="version-panel"> 151 <div class="version-header"> 152 <div class="version-title">PixiJS Enhanced</div> 153 <div class="version-tech">WebGL • GPU Accelerated • Filters</div> 154 </div> 155 <div class="version-viewport"> 156 <iframe src="./kamaji-pixi.html"></iframe> 157 </div> 158 </div> 159 160 <!-- Three.js --> 161 <div class="version-panel"> 162 <div class="version-header"> 163 <div class="version-title">Three.js 3D</div> 164 <div class="version-tech">WebGL • 3D Lighting • Interactive</div> 165 </div> 166 <div class="version-viewport"> 167 <iframe src="./kamaji-threejs.html"></iframe> 168 <div class="instructions">Drag to rotate • Scroll to zoom</div> 169 </div> 170 </div> 171 </div> 172 </body> 173 </html>