README.md
Changed around line 1
+ # 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.
index.html
Changed around line 1
+
+
+
+
+
+
+
+ MatrixFlow - Interactive Matrix Multiplication
+
+
+
+
+
Matrix Multiplication Simulator
+
Visualize how matrices multiply, step by step
+
+
+
+
+
+
Matrix A
+
+
+
+
+
+
+
+
+
×
+
+
+
Matrix B
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Click simulate to start the visualization
+
+
+
+
+
+
Created with passion for mathematics education
+
+
+
+
+
script.js
Changed around line 1
+ 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';
+ });
+ });
+ });
style.css
Changed around line 1
+ :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;
+ }
+ }