infinite-mathvid-studio

Running

App Files Files Community

4-r2d2 commited on Sep 26

Commit

369088b

verified ·

1 Parent(s): 31c75a3

Make it actually functional and useable https://math-gpt.org/ using this

Browse files

Files changed (2) hide show

index.html +10 -10
math-assistant.html +235 -0

index.html CHANGED Viewed

@@ -55,10 +55,10 @@
                 </div>
                 <div class="hidden md:block">
                     <div class="ml-10 flex items-center space-x-4">
-                        <a href="#" class="px-3 py-2 rounded-md text-sm font-medium bg-primary text-white">Home</a>
-                        <a href="#video-tool" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-200 dark:hover:bg-gray-700">Video Tool</a>
-                        <a href="#math-assistant" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-200 dark:hover:bg-gray-700">Math Assistant</a>
-                        <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
                             <i data-feather="moon" class="hidden dark:block"></i>
                             <i data-feather="sun" class="dark:hidden"></i>
                         </button>
@@ -86,13 +86,13 @@
                 Perfect for creators, students, and educators.
             </p>
             <div class="mt-10 flex flex-col sm:flex-row justify-center gap-4">
-                <a href="#video-tool" class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-primary/90 md:py-4 md:text-lg md:px-10">
                     Start Creating
                 </a>
-                <a href="#math-assistant" class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 md:py-4 md:text-lg md:px-10">
                     Solve Math Now
                 </a>
-            </div>
         </div>
     </div>
@@ -235,13 +235,13 @@
                 Join thousands of creators and students using MathVid Studio every day.
             </p>
             <div class="flex flex-col sm:flex-row justify-center gap-4">
-                <a href="#" class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-white hover:bg-gray-100 md:py-4 md:text-lg md:px-10">
                     Get Started Free
                 </a>
-                <a href="#" class="px-8 py-3 border border-white text-base font-medium rounded-md text-white hover:bg-white/10 md:py-4 md:text-lg md:px-10">
                     Learn More
                 </a>
-            </div>
         </div>
     </section>

                 </div>
                 <div class="hidden md:block">
                     <div class="ml-10 flex items-center space-x-4">
+                        <a href="index.html" class="px-3 py-2 rounded-md text-sm font-medium bg-primary text-white">Home</a>
+                        <a href="index.html#video-tool" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-200 dark:hover:bg-gray-700">Video Tool</a>
+                        <a href="math-assistant.html" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-200 dark:hover:bg-gray-700">Math Assistant</a>
+<button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
                             <i data-feather="moon" class="hidden dark:block"></i>
                             <i data-feather="sun" class="dark:hidden"></i>
                         </button>
                 Perfect for creators, students, and educators.
             </p>
             <div class="mt-10 flex flex-col sm:flex-row justify-center gap-4">
+                <a href="index.html#video-tool" class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-primary/90 md:py-4 md:text-lg md:px-10">
                     Start Creating
                 </a>
+                <a href="math-assistant.html" class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 md:py-4 md:text-lg md:px-10">
                     Solve Math Now
                 </a>
+</div>
         </div>
     </div>
                 Join thousands of creators and students using MathVid Studio every day.
             </p>
             <div class="flex flex-col sm:flex-row justify-center gap-4">
+                <a href="math-assistant.html" class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-primary bg-white hover:bg-gray-100 md:py-4 md:text-lg md:px-10">
                     Get Started Free
                 </a>
+                <a href="index.html#video-tool" class="px-8 py-3 border border-white text-base font-medium rounded-md text-white hover:bg-white/10 md:py-4 md:text-lg md:px-10">
                     Learn More
                 </a>
+</div>
         </div>
     </section>

math-assistant.html ADDED Viewed

	@@ -0,0 +1,235 @@

+<!DOCTYPE html>
+<html lang="en" class="h-full">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Math Assistant | MathVid Studio</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#6366f1',
+                        secondary: '#8b5cf6',
+                    }
+                }
+            }
+        }
+    </script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        .gradient-text {
+            background-clip: text;
+            -webkit-background-clip: text;
+            color: transparent;
+            background-image: linear-gradient(90deg, #6366f1, #8b5cf6);
+        }
+        .glass-effect {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+        }
+    </style>
+</head>
+<body class="min-h-full bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 text-gray-900 dark:text-gray-100 transition-colors duration-300">
+    <!-- Navigation -->
+    <nav class="glass-effect fixed top-0 left-0 right-0 z-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16 items-center">
+                <div class="flex items-center">
+                    <div class="flex-shrink-0 flex items-center">
+                        <i data-feather="video" class="text-primary h-8 w-8"></i>
+                        <span class="ml-2 text-xl font-bold gradient-text">MathVid Studio</span>
+                    </div>
+                </div>
+                <div class="hidden md:block">
+                    <div class="ml-10 flex items-center space-x-4">
+                        <a href="index.html" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-200 dark:hover:bg-gray-700">Home</a>
+                        <a href="index.html#video-tool" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-200 dark:hover:bg-gray-700">Video Tool</a>
+                        <a href="math-assistant.html" class="px-3 py-2 rounded-md text-sm font-medium bg-primary text-white">Math Assistant</a>
+                        <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
+                            <i data-feather="moon" class="hidden dark:block"></i>
+                            <i data-feather="sun" class="dark:hidden"></i>
+                        </button>
+                    </div>
+                </div>
+                <div class="-mr-2 flex md:hidden">
+                    <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
+                        <i data-feather="menu"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </nav>
+    <main class="pt-24 pb-12 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
+        <div class="text-center mb-12">
+            <h1 class="text-3xl md:text-5xl font-bold mb-4 gradient-text">Math Problem Solver</h1>
+            <p class="text-lg text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
+                Upload your math problems and get step-by-step solutions instantly.
+            </p>
+        </div>
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6">
+                <h2 class="text-xl font-bold mb-4">Upload Your Math Problem</h2>
+                <form id="math-form" class="space-y-4">
+                    <div class="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-6 text-center">
+                        <i data-feather="upload" class="mx-auto h-12 w-12 text-gray-400"></i>
+                        <h4 class="mt-2 font-medium text-gray-900 dark:text-gray-100">Drag and drop files here</h4>
+                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">PDF, JPG, or PNG up to 10MB</p>
+                        <input type="file" id="math-file" accept=".pdf,.jpg,.jpeg,.png" class="hidden">
+                        <button type="button" id="file-select" class="mt-4 px-4 py-2 bg-gray-100 dark:bg-gray-700 rounded-md text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600">
+                            Select File
+                        </button>
+                        <div id="file-info" class="mt-2 text-sm hidden"></div>
+                    </div>
+                    <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400">
+                        <span>Handwritten equations supported</span>
+                        <i data-feather="check-circle" class="text-green-500"></i>
+                    </div>
+                    <button type="submit" class="w-full px-6 py-3 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors flex items-center justify-center">
+                        <span id="submit-text">Solve Math Problem</span>
+                        <i data-feather="loader" class="animate-spin h-5 w-5 ml-2 hidden" id="spinner"></i>
+                    </button>
+                </form>
+            </div>
+            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6">
+                <h2 class="text-xl font-bold mb-4">Solution</h2>
+                <div id="solution-container" class="min-h-64 bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
+                    <div id="solution-placeholder" class="flex flex-col items-center justify-center h-full text-gray-400">
+                        <i data-feather="file-text" class="h-12 w-12 mb-2"></i>
+                        <p>Your solution will appear here</p>
+                    </div>
+                    <div id="solution-content" class="hidden"></div>
+                </div>
+                <div class="mt-4 flex justify-end">
+                    <button id="copy-solution" class="px-4 py-2 bg-gray-100 dark:bg-gray-700 rounded-md text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600 hidden">
+                        <i data-feather="copy" class="w-4 h-4 mr-2"></i> Copy Solution
+                    </button>
+                </div>
+            </div>
+        </div>
+        <div class="mt-12 glass-effect p-6 rounded-xl">
+            <h2 class="text-xl font-bold mb-4">How it works</h2>
+            <ol class="space-y-4">
+                <li class="flex items-start">
+                    <span class="flex-shrink-0 flex items-center justify-center h-6 w-6 rounded-full bg-primary text-white text-sm font-medium">1</span>
+                    <span class="ml-3 text-gray-700 dark:text-gray-200">Upload your math problem (PDF or image)</span>
+                </li>
+                <li class="flex items-start">
+                    <span class="flex-shrink-0 flex items-center justify-center h-6 w-6 rounded-full bg-primary text-white text-sm font-medium">2</span>
+                    <span class="ml-3 text-gray-700 dark:text-gray-200">Our AI analyzes the problem and identifies the math concepts</span>
+                </li>
+                <li class="flex items-start">
+                    <span class="flex-shrink-0 flex items-center justify-center h-6 w-6 rounded-full bg-primary text-white text-sm font-medium">3</span>
+                    <span class="ml-3 text-gray-700 dark:text-gray-200">Get detailed, step-by-step solutions with explanations</span>
+                </li>
+            </ol>
+        </div>
+    </main>
+    <script>
+        feather.replace();
+        // File upload handling
+        document.getElementById('file-select').addEventListener('click', () => {
+            document.getElementById('math-file').click();
+        });
+        document.getElementById('math-file').addEventListener('change', (e) => {
+            const file = e.target.files[0];
+            if (file) {
+                const fileInfo = document.getElementById('file-info');
+                fileInfo.textContent = `${file.name} (${(file.size / 1024 / 1024).toFixed(2)} MB)`;
+                fileInfo.classList.remove('hidden');
+            }
+        });
+        // Form submission
+        document.getElementById('math-form').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const fileInput = document.getElementById('math-file');
+            const file = fileInput.files[0];
+            if (!file) {
+                alert('Please select a file first');
+                return;
+            }
+            const spinner = document.getElementById('spinner');
+            const submitText = document.getElementById('submit-text');
+            const solutionContent = document.getElementById('solution-content');
+            const solutionPlaceholder = document.getElementById('solution-placeholder');
+            const copyButton = document.getElementById('copy-solution');
+            spinner.classList.remove('hidden');
+            submitText.textContent = 'Processing...';
+            // Simulate API call (replace with actual API call to math-gpt.org)
+            setTimeout(() => {
+                spinner.classList.add('hidden');
+                submitText.textContent = 'Solve Math Problem';
+                // Sample solution (replace with actual API response)
+                solutionPlaceholder.classList.add('hidden');
+                solutionContent.innerHTML = `
+                    <div class="prose dark:prose-invert max-w-none">
+                        <h3 class="text-lg font-semibold">Problem:</h3>
+                        <p>Find the derivative of f(x) = 3x² + 2x - 5</p>
+                        <h3 class="text-lg font-semibold mt-4">Solution:</h3>
+                        <ol class="list-decimal pl-5 space-y-2">
+                            <li>Identify each term in the function: 3x², 2x, and -5</li>
+                            <li>Apply the power rule to each term:
+                                <ul class="list-disc pl-5 mt-1">
+                                    <li>For 3x²: derivative is 2*3x^(2-1) = 6x</li>
+                                    <li>For 2x: derivative is 1*2x^(1-1) = 2</li>
+                                    <li>For -5: derivative is 0 (constant term)</li>
+                                </ul>
+                            </li>
+                            <li>Combine the derivatives: f'(x) = 6x + 2</li>
+                        </ol>
+                        <h3 class="text-lg font-semibold mt-4">Final Answer:</h3>
+                        <p class="bg-gray-100 dark:bg-gray-700 p-3 rounded font-mono">f'(x) = 6x + 2</p>
+                    </div>
+                `;
+                solutionContent.classList.remove('hidden');
+                copyButton.classList.remove('hidden');
+            }, 2000);
+        });
+        // Copy solution
+        document.getElementById('copy-solution').addEventListener('click', () => {
+            const solutionText = document.getElementById('solution-content').textContent;
+            navigator.clipboard.writeText(solutionText).then(() => {
+                const button = document.getElementById('copy-solution');
+                const originalText = button.innerHTML;
+                button.innerHTML = '<i data-feather="check" class="w-4 h-4 mr-2"></i> Copied!';
+                feather.replace();
+                setTimeout(() => {
+                    button.innerHTML = originalText;
+                    feather.replace();
+                }, 2000);
+            });
+        });
+        // Theme toggle
+        document.getElementById('theme-toggle').addEventListener('click', () => {
+            document.documentElement.classList.toggle('dark');
+            localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
+            feather.replace();
+        });
+    </script>
+</body>
+</html>