commit 642ce0c3bf9b9d672cb7289ffe88124d7bab1e20
Author: root <root@hub.scroll.pub>
Date: 2024-12-24 00:58:56 +0000
Subject: Initial commit
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..11f2ff7
--- /dev/null
+++ b/README.md
@@ -0,0 +1,2 @@
+# matrixflow.scroll.pub
+Website generated from prompt: create a website with a matmul simulator. it shuold explain and be interactive animation about what is happening.
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..330d4a7
--- /dev/null
+++ b/index.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="description" content="Interactive matrix multiplication simulator with visual animations">
+ <meta name="keywords" content="matrix multiplication, linear algebra, educational, interactive math">
+ <title>MatrixFlow - Interactive Matrix Multiplication</title>
+ <link rel="stylesheet" href="style.css">
+</head>
+<body>
+ <header>
+ <h1>Matrix Multiplication Simulator</h1>
+ <p class="tagline">Visualize how matrices multiply, step by step</p>
+ </header>
+
+ <main>
+ <section class="controls">
+ <div class="matrix-input">
+ <h2>Matrix A</h2>
+ <div class="matrix-grid" id="matrixA">
+ <input type="number" value="1" aria-label="Matrix A (1,1)">
+ <input type="number" value="2" aria-label="Matrix A (1,2)">
+ <input type="number" value="3" aria-label="Matrix A (2,1)">
+ <input type="number" value="4" aria-label="Matrix A (2,2)">
+ </div>
+ </div>
+
+ <div class="multiply-symbol">×</div>
+
+ <div class="matrix-input">
+ <h2>Matrix B</h2>
+ <div class="matrix-grid" id="matrixB">
+ <input type="number" value="5" aria-label="Matrix B (1,1)">
+ <input type="number" value="6" aria-label="Matrix B (1,2)">
+ <input type="number" value="7" aria-label="Matrix B (2,1)">
+ <input type="number" value="8" aria-label="Matrix B (2,2)">
+ </div>
+ </div>
+ </section>
+
+ <button id="simulate" class="action-button">Simulate Multiplication</button>
+
+ <section class="visualization">
+ <div class="animation-container">
+ <div class="highlight-box"></div>
+ <div class="result-matrix"></div>
+ </div>
+ <div class="explanation">
+ <p id="step-text">Click simulate to start the visualization</p>
+ </div>
+ </section>
+ </main>
+
+ <footer>
+ <p>Created with passion for mathematics education</p>
+ </footer>
+
+ <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..92230f5
--- /dev/null
+++ b/script.js
@@ -0,0 +1,74 @@
+document.addEventListener('DOMContentLoaded', function() {
+ const simulateButton = document.getElementById('simulate');
+ const highlightBox = document.querySelector('.highlight-box');
+ const stepText = document.getElementById('step-text');
+ let isAnimating = false;
+
+ function getMatrixValues(matrixId) {
+ const inputs = document.querySelectorAll(`#${matrixId} input`);
+ return Array.from(inputs).map(input => parseFloat(input.value));
+ }
+
+ function createResultMatrix() {
+ const container = document.querySelector('.result-matrix');
+ container.innerHTML = '';
+ container.style.display = 'grid';
+ container.style.gridTemplateColumns = 'repeat(2, 1fr)';
+ container.style.gap = '0.5rem';
+
+ for (let i = 0; i < 4; i++) {
+ const cell = document.createElement('div');
+ cell.className = 'result-cell';
+ cell.style.width = '60px';
+ cell.style.height = '60px';
+ cell.style.border = '2px solid #3498db';
+ cell.style.borderRadius = '5px';
+ cell.style.display = 'flex';
+ cell.style.alignItems = 'center';
+ cell.style.justifyContent = 'center';
+ cell.style.fontSize = '1.2rem';
+ cell.style.background = 'white';
+ container.appendChild(cell);
+ }
+ }
+
+ async function animateMultiplication() {
+ if (isAnimating) return;
+ isAnimating = true;
+
+ const matrixA = getMatrixValues('matrixA');
+ const matrixB = getMatrixValues('matrixB');
+ createResultMatrix();
+ const resultCells = document.querySelectorAll('.result-cell');
+
+ for (let i = 0; i < 2; i++) {
+ for (let j = 0; j < 2; j++) {
+ // Highlight current calculation
+ highlightBox.style.opacity = '1';
+ const result = matrixA[i*2] * matrixB[j] + matrixA[i*2+1] * matrixB[j+2];
+
+ stepText.textContent = `Calculating position (${i+1},${j+1}):
+ (${matrixA[i*2]} × ${matrixB[j]}) +
+ (${matrixA[i*2+1]} × ${matrixB[j+2]}) = ${result}`;
+
+ await new Promise(resolve => setTimeout(resolve, 1000));
+
+ resultCells[i*2 + j].textContent = result;
+ resultCells[i*2 + j].style.animation = 'fadeIn 0.5s ease-out';
+ }
+ }
+
+ highlightBox.style.opacity = '0';
+ stepText.textContent = 'Multiplication complete!';
+ isAnimating = false;
+ }
+
+ simulateButton.addEventListener('click', animateMultiplication);
+
+ // Input validation
+ document.querySelectorAll('input[type="number"]').forEach(input => {
+ input.addEventListener('input', function() {
+ if (this.value === '') this.value = '0';
+ });
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..b340779
--- /dev/null
+++ b/style.css
@@ -0,0 +1,178 @@
+:root {
+ --primary-color: #2c3e50;
+ --accent-color: #3498db;
+ --bg-color: #ecf0f1;
+ --text-color: #2c3e50;
+ --highlight-color: #e74c3c;
+ --animation-duration: 0.3s;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ background: var(--bg-color);
+ color: var(--text-color);
+ line-height: 1.6;
+ padding: 2rem;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+}
+
+header {
+ text-align: center;
+ margin-bottom: 3rem;
+}
+
+h1 {
+ font-size: 2.5rem;
+ color: var(--primary-color);
+ margin-bottom: 0.5rem;
+ animation: fadeIn 1s ease-out;
+}
+
+.tagline {
+ color: var(--accent-color);
+ font-size: 1.2rem;
+}
+
+main {
+ max-width: 1200px;
+ margin: 0 auto;
+ flex-grow: 1;
+}
+
+.controls {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 2rem;
+ margin-bottom: 2rem;
+ flex-wrap: wrap;
+}
+
+.matrix-input {
+ background: white;
+ padding: 1.5rem;
+ border-radius: 10px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ transition: transform var(--animation-duration);
+}
+
+.matrix-input:hover {
+ transform: translateY(-5px);
+}
+
+.matrix-grid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 0.5rem;
+ padding: 1rem;
+}
+
+input[type="number"] {
+ width: 60px;
+ height: 60px;
+ text-align: center;
+ font-size: 1.2rem;
+ border: 2px solid var(--accent-color);
+ border-radius: 5px;
+ outline: none;
+ transition: all var(--animation-duration);
+}
+
+input[type="number"]:focus {
+ border-color: var(--highlight-color);
+ box-shadow: 0 0 10px rgba(231, 76, 60, 0.2);
+}
+
+.multiply-symbol {
+ font-size: 2rem;
+ font-weight: bold;
+ color: var(--accent-color);
+}
+
+.action-button {
+ display: block;
+ margin: 2rem auto;
+ padding: 1rem 2rem;
+ font-size: 1.2rem;
+ background: var(--accent-color);
+ color: white;
+ border: none;
+ border-radius: 25px;
+ cursor: pointer;
+ transition: all var(--animation-duration);
+}
+
+.action-button:hover {
+ background: var(--highlight-color);
+ transform: scale(1.05);
+}
+
+.visualization {
+ background: white;
+ padding: 2rem;
+ border-radius: 10px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ margin-top: 2rem;
+}
+
+.animation-container {
+ position: relative;
+ min-height: 200px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.highlight-box {
+ position: absolute;
+ background: rgba(231, 76, 60, 0.2);
+ border: 2px solid var(--highlight-color);
+ transition: all var(--animation-duration);
+}
+
+.explanation {
+ text-align: center;
+ margin-top: 1rem;
+ padding: 1rem;
+ background: var(--bg-color);
+ border-radius: 5px;
+}
+
+footer {
+ text-align: center;
+ margin-top: 2rem;
+ padding: 1rem;
+ color: var(--text-color);
+}
+
+@keyframes fadeIn {
+ from { opacity: 0; transform: translateY(-20px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+@media (max-width: 768px) {
+ body {
+ padding: 1rem;
+ }
+
+ .controls {
+ flex-direction: column;
+ }
+
+ .multiply-symbol {
+ transform: rotate(90deg);
+ }
+
+ input[type="number"] {
+ width: 50px;
+ height: 50px;
+ }
+}