انشئ موقع تعليمي للرياضيات حيث يعتمد على تحويل المفاهيم النظرية الى تصور ويمكن عرض الريياضيات بطريقة حيوية والتلاعب بها لفهمها اكثر

README.md

@@ -1,10 +1,13 @@
 ---
-title: Mathmagic Visualizer
-emoji: 💻
-colorFrom: red
-colorTo: pink
+title: MathMagic Visualizer 🧮✨
+colorFrom: yellow
+colorTo: purple
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,83 @@
+class CustomFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .footer-link {
+          transition: all 0.2s ease;
+        }
+        .footer-link:hover {
+          color: #0ea5e9;
+          transform: translateX(4px);
+        }
+        .social-icon {
+          transition: all 0.2s ease;
+        }
+        .social-icon:hover {
+          transform: translateY(-4px);
+        }
+      </style>
+      <footer class="bg-gray-800 text-white py-12">
+        <div class="container mx-auto px-6">
+          <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+            <div class="md:col-span-2">
+              <div class="flex items-center space-x-2 mb-4">
+                <div class="w-8 h-8 rounded-full bg-gradient-to-r from-primary-500 to-secondary-500"></div>
+                <span class="text-xl font-bold">Chromatic Canvas</span>
+              </div>
+              <p class="text-gray-400 mb-4">Exploring the beauty of undefined design possibilities.</p>
+              <div class="flex space-x-4">
+                <a href="#" class="social-icon text-gray-400 hover:text-white">
+                  <i data-feather="twitter"></i>
+                </a>
+                <a href="#" class="social-icon text-gray-400 hover:text-white">
+                  <i data-feather="instagram"></i>
+                </a>
+                <a href="#" class="social-icon text-gray-400 hover:text-white">
+                  <i data-feather="github"></i>
+                </a>
+                <a href="#" class="social-icon text-gray-400 hover:text-white">
+                  <i data-feather="linkedin"></i>
+                </a>
+              </div>
+            </div>
+            
+            <div>
+              <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
+              <ul class="space-y-2">
+                <li><a href="#" class="footer-link text-gray-400">Home</a></li>
+                <li><a href="#" class="footer-link text-gray-400">Features</a></li>
+                <li><a href="#" class="footer-link text-gray-400">Gallery</a></li>
+                <li><a href="#" class="footer-link text-gray-400">About</a></li>
+              </ul>
+            </div>
+            
+            <div>
+              <h3 class="text-lg font-semibold mb-4">Contact</h3>
+              <ul class="space-y-2">
+                <li class="flex items-center space-x-2 text-gray-400">
+                  <i data-feather="mail"></i>
+                  <span>hello@chromatic.com</span>
+                </li>
+                <li class="flex items-center space-x-2 text-gray-400">
+                  <i data-feather="phone"></i>
+                  <span>+1 (555) 123-4567</span>
+                </li>
+                <li class="flex items-center space-x-2 text-gray-400">
+                  <i data-feather="map-pin"></i>
+                  <span>123 Design St, Creative City</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+          
+          <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
+            <p>© ${new Date().getFullYear()} Chromatic Canvas. All rights reserved.</p>
+          </div>
+        </div>
+      </footer>
+    `;
+  }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,50 @@
+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .navbar {
+          transition: all 0.3s ease;
+        }
+        .nav-link {
+          position: relative;
+        }
+        .nav-link:after {
+          content: '';
+          position: absolute;
+          width: 0;
+          height: 2px;
+          bottom: 0;
+          left: 0;
+          background-color: currentColor;
+          transition: width 0.3s ease;
+        }
+        .nav-link:hover:after {
+          width: 100%;
+        }
+      </style>
+      <nav class="navbar bg-white shadow-sm py-4 px-6">
+        <div class="container mx-auto flex justify-between items-center">
+          <a href="/" class="flex items-center space-x-2">
+            <div class="w-8 h-8 rounded-full bg-gradient-to-r from-primary-500 to-secondary-500"></div>
+            <span class="text-xl font-bold text-gray-800">Chromatic</span>
+          </a>
+          
+          <div class="hidden md:flex space-x-8">
+            <a href="/" class="nav-link text-gray-600 hover:text-primary-600">Home</a>
+            <a href="math-visualizer.html" class="nav-link text-gray-600 hover:text-primary-600">Math Visualizer</a>
+            <a href="#" class="nav-link text-gray-600 hover:text-primary-600">Algebra</a>
+            <a href="#" class="nav-link text-gray-600 hover:text-primary-600">Geometry</a>
+            <a href="#" class="nav-link text-gray-600 hover:text-primary-600">Calculus</a>
+</div>
+          
+          <button class="md:hidden focus:outline-none">
+            <i data-feather="menu"></i>
+          </button>
+        </div>
+      </nav>
+    `;
+  }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,100 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chromatic Canvas</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              primary: {
+                50: '#f0f9ff',
+                100: '#e0f2fe',
+                200: '#bae6fd',
+                300: '#7dd3fc',
+                400: '#38bdf8',
+                500: '#0ea5e9',
+                600: '#0284c7',
+                700: '#0369a1',
+                800: '#075985',
+                900: '#0c4a6e',
+              },
+              secondary: {
+                50: '#f5f3ff',
+                100: '#ede9fe',
+                200: '#ddd6fe',
+                300: '#c4b5fd',
+                400: '#a78bfa',
+                500: '#8b5cf6',
+                600: '#7c3aed',
+                700: '#6d28d9',
+                800: '#5b21b6',
+                900: '#4c1d95',
+              }
+            }
+          }
+        }
+      }
+    </script>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-12">
+        <section class="text-center mb-16">
+            <h1 class="text-5xl font-bold text-primary-700 mb-4">Chromatic Canvas</h1>
+            <p class="text-xl text-gray-600 max-w-2xl mx-auto">A vibrant playground of colors and design. Explore the beauty of undefined possibilities.</p>
+        </section>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            <div class="bg-white rounded-xl shadow-lg overflow-hidden transition-all hover:shadow-xl hover:-translate-y-1">
+                <div class="h-48 bg-gradient-to-r from-primary-400 to-secondary-500"></div>
+                <div class="p-6">
+                    <h3 class="text-xl font-semibold text-gray-800 mb-2">Color Exploration</h3>
+                    <p class="text-gray-600">Discover the endless combinations of our undefined color palette.</p>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl shadow-lg overflow-hidden transition-all hover:shadow-xl hover:-translate-y-1">
+                <div class="h-48 bg-gradient-to-r from-secondary-400 to-primary-500"></div>
+                <div class="p-6">
+                    <h3 class="text-xl font-semibold text-gray-800 mb-2">Design Freedom</h3>
+                    <p class="text-gray-600">Create without constraints in our undefined theme environment.</p>
+                </div>
+            </div>
+
+            <div class="bg-white rounded-xl shadow-lg overflow-hidden transition-all hover:shadow-xl hover:-translate-y-1">
+                <div class="h-48 bg-gradient-to-r from-primary-300 to-secondary-600"></div>
+                <div class="p-6">
+                    <h3 class="text-xl font-semibold text-gray-800 mb-2">Visual Harmony</h3>
+                    <p class="text-gray-600">Experience the perfect balance of undefined elements.</p>
+                </div>
+            </div>
+        </div>
+
+        <section class="mt-20 bg-gradient-to-r from-primary-100 to-secondary-100 rounded-2xl p-8 md:p-12">
+            <div class="max-w-4xl mx-auto text-center">
+                <h2 class="text-3xl font-bold text-gray-800 mb-6">Ready to Explore?</h2>
+                <p class="text-lg text-gray-700 mb-8">Dive into our undefined world of design possibilities and create something truly unique.</p>
+                <button class="bg-primary-600 hover:bg-primary-700 text-white font-medium py-3 px-8 rounded-full transition-all shadow-md hover:shadow-lg">
+                    Get Started
+                </button>
+            </div>
+        </section>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

math-visualizer.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MathMagic Visualizer | Interactive Math Learning</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/11.6.0/math.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-12">
+        <section class="text-center mb-16">
+            <h1 class="text-5xl font-bold text-primary-700 mb-4">MathMagic Visualizer</h1>
+            <p class="text-xl text-gray-600 max-w-2xl mx-auto">Transform abstract math concepts into interactive visual experiences.</p>
+        </section>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
+            <div class="bg-white p-6 rounded-xl shadow-lg">
+                <h2 class="text-2xl font-bold text-gray-800 mb-4">Function Explorer</h2>
+                <div class="mb-4">
+                    <label class="block text-gray-700 mb-2">Enter function (e.g., sin(x), x^2):</label>
+                    <input type="text" id="functionInput" class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent" value="sin(x)">
+                </div>
+                <div class="h-64">
+                    <canvas id="functionGraph"></canvas>
+                </div>
+            </div>
+
+            <div class="bg-white p-6 rounded-xl shadow-lg">
+                <h2 class="text-2xl font-bold text-gray-800 mb-4">Geometry Playground</h2>
+                <div class="mb-4 grid grid-cols-2 gap-4">
+                    <button id="drawLine" class="bg-primary-100 hover:bg-primary-200 text-primary-700 py-2 px-4 rounded-lg transition">Line</button>
+                    <button id="drawCircle" class="bg-primary-100 hover:bg-primary-200 text-primary-700 py-2 px-4 rounded-lg transition">Circle</button>
+                    <button id="drawRectangle" class="bg-primary-100 hover:bg-primary-200 text-primary-700 py-2 px-4 rounded-lg transition">Rectangle</button>
+                    <button id="drawTriangle" class="bg-primary-100 hover:bg-primary-200 text-primary-700 py-2 px-4 rounded-lg transition">Triangle</button>
+                </div>
+                <div class="h-64 border-2 border-dashed border-gray-300 rounded-lg relative" id="geometryCanvas">
+                    <div class="absolute inset-0 flex items-center justify-center text-gray-400">Draw shapes here</div>
+                </div>
+            </div>
+        </div>
+
+        <section class="bg-white rounded-xl shadow-lg overflow-hidden">
+            <div class="grid grid-cols-1 md:grid-cols-2">
+                <div class="p-8">
+                    <h2 class="text-3xl font-bold text-gray-800 mb-4">Interactive Algebra</h2>
+                    <p class="text-gray-600 mb-6">Manipulate equations in real-time to see how changes affect the graph.</p>
+                    <div class="space-y-4">
+                        <div>
+                            <label class="block text-gray-700 mb-1">Equation: y = mx + b</label>
+                            <div class="flex items-center space-x-4">
+                                <div class="flex-1">
+                                    <label class="block text-sm text-gray-600 mb-1">Slope (m)</label>
+                                    <input type="range" id="sliderM" min="-5" max="5" step="0.1" value="1" class="w-full">
+                                </div>
+                                <div class="flex-1">
+                                    <label class="block text-sm text-gray-600 mb-1">Intercept (b)</label>
+                                    <input type="range" id="sliderB" min="-10" max="10" step="0.5" value="0" class="w-full">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-gray-50 p-8 flex items-center">
+                    <div class="h-64 w-full">
+                        <canvas id="algebraGraph"></canvas>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script src="math-visualizer.js"></script>
+    <script>feather.replace();</script>
+</body>
+</html>

math-visualizer.js

@@ -0,0 +1,217 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Function Graph Visualization
+    const functionCtx = document.getElementById('functionGraph').getContext('2d');
+    const algebraCtx = document.getElementById('algebraGraph').getContext('2d');
+    
+    // Initialize function graph
+    const functionGraph = new Chart(functionCtx, {
+        type: 'line',
+        data: {
+            datasets: [{
+                label: 'Function',
+                borderColor: '#7c3aed',
+                backgroundColor: 'rgba(124, 58, 237, 0.1)',
+                borderWidth: 2,
+                pointRadius: 0,
+                fill: true
+            }]
+        },
+        options: {
+            responsive: true,
+            scales: {
+                x: {
+                    type: 'linear',
+                    position: 'center',
+                    min: -10,
+                    max: 10
+                },
+                y: {
+                    type: 'linear',
+                    position: 'center',
+                    min: -5,
+                    max: 5
+                }
+            }
+        }
+    });
+
+    // Initialize algebra graph
+    const algebraGraph = new Chart(algebraCtx, {
+        type: 'line',
+        data: {
+            datasets: [{
+                label: 'Linear Equation',
+                borderColor: '#0ea5e9',
+                backgroundColor: 'rgba(14, 165, 233, 0.1)',
+                borderWidth: 2,
+                pointRadius: 0
+            }]
+        },
+        options: {
+            responsive: true,
+            scales: {
+                x: {
+                    type: 'linear',
+                    position: 'center',
+                    min: -10,
+                    max: 10
+                },
+                y: {
+                    type: 'linear',
+                    position: 'center',
+                    min: -10,
+                    max: 10
+                }
+            }
+        }
+    });
+
+    // Update function graph when input changes
+    document.getElementById('functionInput').addEventListener('input', function() {
+        updateFunctionGraph();
+    });
+
+    function updateFunctionGraph() {
+        const func = document.getElementById('functionInput').value;
+        const data = [];
+        
+        for (let x = -10; x <= 10; x += 0.1) {
+            try {
+                const y = math.evaluate(func, {x: x});
+                data.push({x: x, y: y});
+            } catch (e) {
+                console.error("Error evaluating function:", e);
+            }
+        }
+        
+        functionGraph.data.datasets[0].data = data;
+        functionGraph.update();
+    }
+
+    // Update algebra graph with sliders
+    document.getElementById('sliderM').addEventListener('input', updateAlgebraGraph);
+    document.getElementById('sliderB').addEventListener('input', updateAlgebraGraph);
+
+    function updateAlgebraGraph() {
+        const m = parseFloat(document.getElementById('sliderM').value);
+        const b = parseFloat(document.getElementById('sliderB').value);
+        
+        const data = [
+            {x: -10, y: m*-10 + b},
+            {x: 10, y: m*10 + b}
+        ];
+        
+        algebraGraph.data.datasets[0].data = data;
+        algebraGraph.update();
+    }
+
+    // Initialize graphs
+    updateFunctionGraph();
+    updateAlgebraGraph();
+
+    // Geometry Canvas Interaction
+    const geometryCanvas = document.getElementById('geometryCanvas');
+    let isDrawing = false;
+    let currentShape = null;
+    let startX, startY;
+
+    document.getElementById('drawLine').addEventListener('click', () => setShapeMode('line'));
+    document.getElementById('drawCircle').addEventListener('click', () => setShapeMode('circle'));
+    document.getElementById('drawRectangle').addEventListener('click', () => setShapeMode('rectangle'));
+    document.getElementById('drawTriangle').addEventListener('click', () => setShapeMode('triangle'));
+
+    function setShapeMode(shape) {
+        currentShape = shape;
+        clearGeometryCanvas();
+    }
+
+    function clearGeometryCanvas() {
+        geometryCanvas.innerHTML = '<div class="absolute inset-0 flex items-center justify-center text-gray-400">Draw shapes here</div>';
+    }
+
+    geometryCanvas.addEventListener('mousedown', (e) => {
+        if (!currentShape) return;
+        
+        isDrawing = true;
+        const rect = geometryCanvas.getBoundingClientRect();
+        startX = e.clientX - rect.left;
+        startY = e.clientY - rect.top;
+        
+        // Clear instructions if present
+        if (geometryCanvas.querySelector('div')) {
+            geometryCanvas.innerHTML = '';
+        }
+    });
+
+    geometryCanvas.addEventListener('mousemove', (e) => {
+        if (!isDrawing || !currentShape) return;
+        
+        const rect = geometryCanvas.getBoundingClientRect();
+        const endX = e.clientX - rect.left;
+        const endY = e.clientY - rect.top;
+        
+        // Clear previous shape
+        geometryCanvas.innerHTML = '';
+        
+        // Draw new shape
+        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        svg.setAttribute('width', '100%');
+        svg.setAttribute('height', '100%');
+        svg.style.position = 'absolute';
+        
+        let shape;
+        switch (currentShape) {
+            case 'line':
+                shape = document.createElementNS("http://www.w3.org/2000/svg", "line");
+                shape.setAttribute('x1', startX);
+                shape.setAttribute('y1', startY);
+                shape.setAttribute('x2', endX);
+                shape.setAttribute('y2', endY);
+                shape.setAttribute('stroke', '#7c3aed');
+                shape.setAttribute('stroke-width', '2');
+                break;
+                
+            case 'circle':
+                const radius = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2));
+                shape = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+                shape.setAttribute('cx', startX);
+                shape.setAttribute('cy', startY);
+                shape.setAttribute('r', radius);
+                shape.setAttribute('fill', 'rgba(124, 58, 237, 0.2)');
+                shape.setAttribute('stroke', '#7c3aed');
+                shape.setAttribute('stroke-width', '2');
+                break;
+                
+            case 'rectangle':
+                shape = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+                shape.setAttribute('x', Math.min(startX, endX));
+                shape.setAttribute('y', Math.min(startY, endY));
+                shape.setAttribute('width', Math.abs(endX - startX));
+                shape.setAttribute('height', Math.abs(endY - startY));
+                shape.setAttribute('fill', 'rgba(124, 58, 237, 0.2)');
+                shape.setAttribute('stroke', '#7c3aed');
+                shape.setAttribute('stroke-width', '2');
+                break;
+                
+            case 'triangle':
+                shape = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
+                const points = `${startX},${startY} ${endX},${endY} ${startX},${endY}`;
+                shape.setAttribute('points', points);
+                shape.setAttribute('fill', 'rgba(124, 58, 237, 0.2)');
+                shape.setAttribute('stroke', '#7c3aed');
+                shape.setAttribute('stroke-width', '2');
+                break;
+        }
+        
+        svg.appendChild(shape);
+        geometryCanvas.appendChild(svg);
+    });
+
+    geometryCanvas.addEventListener('mouseup', () => {
+        isDrawing = false;
+    });
+
+    geometryCanvas.addEventListener('mouseleave', () => {
+        isDrawing = false;
+    });
+});

script.js

@@ -0,0 +1,26 @@
+
+document.addEventListener('DOMContentLoaded', () => {
+    // Add any global JavaScript functionality here
+    console.log('MathMagic Visualizer loaded!');
+    
+// Animate elements on scroll
+    const animateOnScroll = () => {
+        const elements = document.querySelectorAll('.fade-in, .slide-up');
+        
+        elements.forEach(element => {
+            const elementPosition = element.getBoundingClientRect().top;
+            const screenPosition = window.innerHeight / 1.3;
+            
+            if (elementPosition < screenPosition) {
+                element.style.opacity = '1';
+                element.style.transform = 'translateY(0)';
+            }
+        });
+    };
+    
+    // Initial check
+    animateOnScroll();
+    
+    // Check on scroll
+    window.addEventListener('scroll', animateOnScroll);
+});

style.css

@@ -1,28 +1,49 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 4px;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+::-webkit-scrollbar-thumb:hover {
+    background: #555;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* Animation classes */
+.fade-in {
+    animation: fadeIn 0.5s ease-in-out;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.slide-up {
+    animation: slideUp 0.5s ease-out;
 }
+
+@keyframes slideUp {
+    from { 
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to { 
+        opacity: 1;
+        transform: translateY(0);
+    }
+}