|
|
<!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"> |
|
|
|
|
|
<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(); |
|
|
|
|
|
|
|
|
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'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
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...'; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
spinner.classList.add('hidden'); |
|
|
submitText.textContent = 'Solve Math Problem'; |
|
|
|
|
|
|
|
|
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); |
|
|
}); |
|
|
|
|
|
|
|
|
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); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
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> |
