Update index.html

LetsWorkAround · Aug 21, 2024 · 59a5eb4 · 59a5eb4
1 parent 531e417
commit 59a5eb4
Showing 1 changed file with 105 additions and 14 deletions.
diff --git a/index.html b/index.html
@@ -216,6 +216,34 @@
             height: 100%;
             z-index: 1;
         }
+
+        .icam-features {
+            position: relative;
+            overflow: hidden;
+        }
+
+        .icam-features-content {
+            position: relative;
+            z-index: 2;
+            background-color: rgba(10, 10, 10, 0.7); /* 반투명한 배경 추가 */
+            padding: 20px;
+            border-radius: 10px;
+        }
+
+        #icam-features-canvas {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 1;
+        }
+
+        /* 기존의 section 스타일을 오버라이드 */
+        .icam-features.section:nth-of-type(odd),
+        .icam-features.section:nth-of-type(even) {
+            background-color: transparent;
+        }
     </style>
 </head>
 <body>
@@ -230,20 +258,23 @@ <h1>레드판다스 ICAM</h1>
     </div>
 
     <div class="container">
-        <section class="section">
-            <h2 class="section-title">ICAM의 핵심 기능</h2>
-            <div class="features">
-                <div class="feature">
-                    <h3><span class="material-icons">assignment</span> 종합 업무시스템</h3>
-                    <p>펀드회계, 펀드사 맞춤 데이터 정리 통합 솔루션</p>
-                </div>
-                <div class="feature">
-                    <h3><span class="material-icons">trending_up</span> Front Office (OMS)</h3>
-                    <p>다양한 엑셀 양식에 따른 편리한 자동화 툴</p>
-                </div>
-                <div class="feature">
-                    <h3><span class="material-icons">balance</span> Middle Office</h3>
-                    <p>데이터 관리 및 통계 분석 툴 개발 전문 기업</p>
+        <section class="section icam-features">
+            <canvas id="icam-features-canvas"></canvas>
+            <div class="icam-features-content">
+                <h2 class="section-title">ICAM의 핵심 기능</h2>
+                <div class="features">
+                    <div class="feature">
+                        <h3><span class="material-icons">assignment</span> 종합 업무시스템</h3>
+                        <p>펀드회계, 펀드사 맞춤 데이터 정리 통합 솔루션</p>
+                    </div>
+                    <div class="feature">
+                        <h3><span class="material-icons">trending_up</span> Front Office (OMS)</h3>
+                        <p>다양한 엑셀 양식에 따른 편리한 자동화 툴</p>
+                    </div>
+                    <div class="feature">
+                        <h3><span class="material-icons">balance</span> Middle Office</h3>
+                        <p>데이터 관리 및 통계 분석 툴 개발 전문 기업</p>
+                    </div>
                 </div>
             </div>
         </section>
@@ -466,5 +497,65 @@ <h3>레드판다스컴퍼니 주식회사 (Red Pandas Company)</h3>
             canvas.height = window.innerHeight;
         });
     </script>
+    <script>
+        // 기존의 Matrix Digital Rain 스크립트
+        function setupMatrixRain(canvasId) {
+            const canvas = document.getElementById(canvasId);
+            const ctx = canvas.getContext('2d');
+
+            canvas.width = canvas.offsetWidth;
+            canvas.height = canvas.offsetHeight;
+
+            const katakana = '19283286710293709127903871971987891203957097293716745985742815027399037796749076930';
+            const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+            const nums = '0123456789';
+            const alphabet = katakana + latin + nums;
+
+            const fontSize = 16;
+            const columns = canvas.width / fontSize;
+
+            const rainDrops = [];
+
+            for (let x = 0; x < columns; x++) {
+                rainDrops[x] = 1;
+            }
+
+            const draw = () => {
+                ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+                ctx.fillStyle = '#0F0';
+                ctx.font = fontSize + 'px monospace';
+
+                for (let i = 0; i < rainDrops.length; i++) {
+                    const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length));
+                    ctx.fillText(text, i * fontSize, rainDrops[i] * fontSize);
+
+                    if (rainDrops[i] * fontSize > canvas.height && Math.random() > 0.975) {
+                        rainDrops[i] = 0;
+                    }
+                    rainDrops[i]++;
+                }
+            };
+
+            return setInterval(draw, 30);
+        }
+
+        // 메인 히어로 섹션의 Matrix Rain 설정
+        setupMatrixRain('matrix-canvas');
+
+        // ICAM 핵심 기능 섹션의 Matrix Rain 설정
+        setupMatrixRain('icam-features-canvas');
+
+        // 화면 크기 변경 시 캔버스 크기 조정
+        window.addEventListener('resize', () => {
+            const canvases = ['matrix-canvas', 'icam-features-canvas'];
+            canvases.forEach(id => {
+                const canvas = document.getElementById(id);
+                canvas.width = canvas.offsetWidth;
+                canvas.height = canvas.offsetHeight;
+            });
+        });
+    </script>
 </body>
 </html>