Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Quantum Tutor - AI Physics Learning Platform</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* Custom styles */ | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb, #a777e3); | |
| } | |
| .topic-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .chat-message.ai { | |
| background-color: #f0f4ff; | |
| border-radius: 18px 18px 18px 4px; | |
| } | |
| .chat-message.user { | |
| background-color: #e3f2fd; | |
| border-radius: 18px 18px 4px 18px; | |
| } | |
| .simulation-window { | |
| min-height: 300px; | |
| background-color: #f8fafc; | |
| border: 1px solid #e2e8f0; | |
| } | |
| .tab-active { | |
| border-bottom: 3px solid #4f46e5; | |
| color: #4f46e5; | |
| font-weight: 600; | |
| } | |
| .formula-box { | |
| background-color: #f5f3ff; | |
| border-left: 4px solid #8b5cf6; | |
| } | |
| .progress-ring { | |
| transition: stroke-dashoffset 0.5s; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| .dark .gradient-bg { | |
| background: linear-gradient(135deg, #4b6cb7, #182848); | |
| } | |
| .dark .chat-message.ai { | |
| background-color: #1e293b; | |
| } | |
| .dark .chat-message.user { | |
| background-color: #334155; | |
| } | |
| .dark .formula-box { | |
| background-color: #1e1b4b; | |
| border-left: 4px solid #7c3aed; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-200 transition-colors duration-200"> | |
| <!-- Navigation --> | |
| <nav class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-atom text-2xl"></i> | |
| <span class="text-xl font-bold">Quantum Tutor</span> | |
| </div> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="#features" class="hover:text-gray-200 transition">Features</a> | |
| <a href="#tutor" class="hover:text-gray-200 transition">Tutor</a> | |
| <a href="#practice" class="hover:text-gray-200 transition">Practice</a> | |
| <a href="#progress" class="hover:text-gray-200 transition">Progress</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button id="theme-toggle" class="p-2 rounded-full hover:bg-white/10"> | |
| <i class="fas fa-moon hidden dark:block"></i> | |
| <i class="fas fa-sun block dark:hidden"></i> | |
| </button> | |
| <button class="bg-white text-indigo-600 px-4 py-2 rounded-lg font-medium hover:bg-gray-100 transition"> | |
| Sign In | |
| </button> | |
| <button class="md:hidden" id="mobile-menu-button"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="md:hidden hidden bg-indigo-700 px-4 py-2" id="mobile-menu"> | |
| <div class="flex flex-col space-y-3"> | |
| <a href="#features" class="text-white hover:text-gray-200 transition">Features</a> | |
| <a href="#tutor" class="text-white hover:text-gray-200 transition">Tutor</a> | |
| <a href="#practice" class="text-white hover:text-gray-200 transition">Practice</a> | |
| <a href="#progress" class="text-white hover:text-gray-200 transition">Progress</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="gradient-bg text-white py-16"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Master Physics with AI</h1> | |
| <p class="text-xl mb-6">Your personalized AI tutor for all physics topics, from Newton's laws to quantum mechanics.</p> | |
| <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-bold hover:bg-gray-100 transition"> | |
| Start Learning Now | |
| </button> | |
| <button class="border-2 border-white text-white px-6 py-3 rounded-lg font-bold hover:bg-white/10 transition"> | |
| Take a Tour | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative w-full max-w-md"> | |
| <div class="absolute -top-6 -left-6 w-32 h-32 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div> | |
| <div class="absolute -bottom-8 -right-8 w-32 h-32 bg-blue-300 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div> | |
| <div class="relative bg-white/10 backdrop-blur-md rounded-2xl p-6 shadow-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div> | |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> | |
| <p class="text-sm ml-2">AI Physics Tutor</p> | |
| </div> | |
| <div class="chat-message ai mb-4 p-4"> | |
| <p>Hi! I'm your AI Physics Tutor. What would you like to learn today?</p> | |
| <p class="text-xs text-gray-300 mt-1">Just now</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="bg-white/20 text-xs px-3 py-1 rounded-full hover:bg-white/30 transition">Newton's Laws</button> | |
| <button class="bg-white/20 text-xs px-3 py-1 rounded-full hover:bg-white/30 transition">Quantum Physics</button> | |
| <button class="bg-white/20 text-xs px-3 py-1 rounded-full hover:bg-white/30 transition">Electromagnetism</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-16 bg-white dark:bg-gray-800"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Powerful Learning Tools</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="w-12 h-12 bg-indigo-100 dark:bg-indigo-900 rounded-lg flex items-center justify-center mb-4"> | |
| <i class="fas fa-robot text-indigo-600 dark:text-indigo-300 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Smart Teaching Engine</h3> | |
| <p class="text-gray-600 dark:text-gray-300">Adapts to your learning style with visual, auditory, or hands-on explanations tailored just for you.</p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mb-4"> | |
| <i class="fas fa-comments text-blue-600 dark:text-blue-300 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Physics Chatbot</h3> | |
| <p class="text-gray-600 dark:text-gray-300">Get instant answers to any physics question with clear explanations and relevant examples.</p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center mb-4"> | |
| <i class="fas fa-tasks text-purple-600 dark:text-purple-300 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Practice Generator</h3> | |
| <p class="text-gray-600 dark:text-gray-300">Customized practice problems with detailed solutions for every topic and difficulty level.</p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center mb-4"> | |
| <i class="fas fa-book text-green-600 dark:text-green-300 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Note Maker</h3> | |
| <p class="text-gray-600 dark:text-gray-300">Beautiful, organized notes with formulas, diagrams, and examples that you can export.</p> | |
| </div> | |
| <!-- Feature 5 --> | |
| <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="w-12 h-12 bg-yellow-100 dark:bg-yellow-900 rounded-lg flex items-center justify-center mb-4"> | |
| <i class="fas fa-layer-group text-yellow-600 dark:text-yellow-300 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Flashcards</h3> | |
| <p class="text-gray-600 dark:text-gray-300">Smart flashcards with spaced repetition to help you memorize key concepts effectively.</p> | |
| </div> | |
| <!-- Feature 6 --> | |
| <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="w-12 h-12 bg-red-100 dark:bg-red-900 rounded-lg flex items-center justify-center mb-4"> | |
| <i class="fas fa-chart-line text-red-600 dark:text-red-300 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Progress Tracking</h3> | |
| <p class="text-gray-600 dark:text-gray-300">Detailed analytics and personalized study plans based on your strengths and weaknesses.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- AI Tutor Section --> | |
| <section id="tutor" class="py-16 bg-gray-50 dark:bg-gray-900"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Interactive AI Physics Tutor</h2> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Topics List --> | |
| <div class="lg:w-1/3"> | |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 sticky top-4"> | |
| <h3 class="text-xl font-semibold mb-4">Physics Topics</h3> | |
| <div class="space-y-2"> | |
| <div class="accordion-group"> | |
| <button class="accordion-button flex justify-between items-center w-full py-2 font-medium text-left"> | |
| <span>Classical Mechanics</span> | |
| <i class="fas fa-chevron-down transition-transform duration-300"></i> | |
| </button> | |
| <div class="accordion-content hidden pl-4 mt-2"> | |
| <a href="#" class="block py-1 hover:text-indigo-600 dark:hover:text-indigo-300">Newton's Laws</a> | |
| <a href="#" class="block py-1 hover:text-indigo-600 dark:hover:text-indigo-300">Work & Energy</a> | |
| <a href="#" class="block py-1 hover:text-indigo-600 dark:hover:text-indigo-300">Momentum</a> | |
| <a href="#" class="block py-1 hover:text-indigo-600 dark:hover:text-indigo-300">Rotational Motion</a> | |
| <a href="#" class="block py-1 hover:text-indigo-600 dark:hover:text-indigo-300">Gravitation</a> | |
| </div> | |
| </div> | |
| <div class="accordion-group"> | |
| <button class="accordion-button flex justify-between items-center w-full py-2 font-medium text-left"> | |
| <span>Electromagnetism</span> | |
| <i class="fas fa-chevron-down transition-transform duration-300"></i> | |
| </button> | |
| <div class="accordion-content hidden pl-4 mt-2"> | |
| <a href="#" class="block py-1 hover:text-indigo-600 dark:hover:text-indigo-300">Electric Fields</a> | |
| <a href="#" class="block py-1 hover:text-indigo-600 dark:hover:text-indigo-300">Magnetism</a> | |
| <a href="#" class="block py-1 hover:text-indigo-600 dark:hover:text-indigo-300">Circuits</a> | |
| <a href="#" class="block py-1 hover:text-indigo-600 dark:hover:text-indigo-300">Electromagnetic Waves</a> | |
| </div> | |
| </div> | |
| <div class="accordion-group"> | |
| <button class="accordion-button flex justify-between items-center w-full py-2 font-medium text-left"> | |
| <span>Thermodynamics</span> | |
| <i class="fas fa-chevron-down transition-transform duration-300"></i> | |
| </button> | |
| <div class="accordion-content hidden pl-4 mt-2"> | |
| <a href="#" class="block py-1 hover:text-indigo-600 dark:hover:text-indigo-300">Laws of Thermodynamics</a> | |
| <a href="#" class="block py-1 hover:text-indigo-600 dark:hover:text-indigo-300">Heat Transfer</a> | |
| <a href="#" class="block py-1 hover:text-indigo-600 dark:hover:text-indigo-300">Entropy</a> | |
| </div> | |
| </div> | |
| <div class="accordion-group"> | |
| <button class="accordion-button flex justify-between items-center w-full py-2 font-medium text-left"> | |
| <span>Modern Physics</span> | |
| <i class="fas fa-chevron-down transition-transform duration-300"></i> | |
| </button> | |
| <div class="accordion-content hidden pl-4 mt-2"> | |
| <a href="#" class="block py-1 hover:text-indigo-600 dark:hover:text-indigo-300">Quantum Mechanics</a> | |
| <a href="#" class="block py-1 hover:text-indigo-600 dark:hover:text-indigo-300">Relativity</a> | |
| <a href="#" class="block py-1 hover:text-indigo-600 dark:hover:text-indigo-300">Nuclear Physics</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tutor Content --> | |
| <div class="lg:w-2/3"> | |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden"> | |
| <!-- Tutor Header --> | |
| <div class="bg-indigo-600 text-white p-4 flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold">AI Physics Tutor</h3> | |
| <p class="text-xs opacity-80">Teaching: Newton's Laws of Motion</p> | |
| </div> | |
| <div class="ml-auto flex space-x-2"> | |
| <button class="p-2 rounded-full hover:bg-indigo-500"> | |
| <i class="fas fa-volume-up"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-indigo-500"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Tutor Body --> | |
| <div class="p-4"> | |
| <div class="flex items-start mb-4"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 dark:bg-indigo-900 flex items-center justify-center mr-3 flex-shrink-0"> | |
| <i class="fas fa-robot text-indigo-600 dark:text-indigo-300"></i> | |
| </div> | |
| <div class="chat-message ai p-4 max-w-3xl"> | |
| <h4 class="font-bold mb-2">Newton's First Law (Law of Inertia)</h4> | |
| <p class="mb-3">An object at rest stays at rest and an object in motion stays in motion with the same speed and in the same direction unless acted upon by an unbalanced force.</p> | |
| <div class="formula-box p-3 mb-3 rounded"> | |
| <p class="font-mono">ΣF = 0 ⇒ a = 0</p> | |
| </div> | |
| <p class="mb-3">This means if the net force on an object is zero, its acceleration is zero, maintaining its current state of motion.</p> | |
| <div class="flex justify-center my-4"> | |
| <div class="w-full max-w-md bg-gray-100 dark:bg-gray-700 p-4 rounded-lg"> | |
| <div class="flex items-center justify-center mb-2"> | |
| <div class="w-16 h-16 bg-blue-500 rounded-lg flex items-center justify-center text-white mr-4"> | |
| <i class="fas fa-cube text-2xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm">Try pushing a heavy box on a frictionless surface. It would keep moving forever!</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex space-x-2 mt-4"> | |
| <button class="bg-indigo-100 dark:bg-indigo-900 text-indigo-600 dark:text-indigo-300 px-3 py-1 rounded-full text-sm hover:bg-indigo-200 dark:hover:bg-indigo-800 transition"> | |
| <i class="fas fa-question-circle mr-1"></i> Ask a Question | |
| </button> | |
| <button class="bg-indigo-100 dark:bg-indigo-900 text-indigo-600 dark:text-indigo-300 px-3 py-1 rounded-full text-sm hover:bg-indigo-200 dark:hover:bg-indigo-800 transition"> | |
| <i class="fas fa-lightbulb mr-1"></i> Real-world Example | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Simulation --> | |
| <div class="simulation-window rounded-lg p-4 mb-4"> | |
| <h4 class="font-semibold mb-3">Interactive Simulation: Inertia Demonstration</h4> | |
| <div class="flex flex-col md:flex-row items-center justify-between"> | |
| <div class="w-full md:w-1/2 mb-4 md:mb-0"> | |
| <div class="relative h-48 bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden"> | |
| <div id="cart" class="absolute bottom-4 left-4 w-24 h-12 bg-blue-500 rounded flex items-center justify-center transition-transform duration-300"> | |
| <div id="block" class="w-8 h-8 bg-red-500 rounded absolute -top-4 left-1/2 transform -translate-x-1/2 transition-transform duration-300"></div> | |
| </div> | |
| </div> | |
| <div class="mt-3 flex justify-center space-x-4"> | |
| <button id="start-sim" class="bg-indigo-600 text-white px-4 py-1 rounded hover:bg-indigo-700 transition"> | |
| Start | |
| </button> | |
| <button id="reset-sim" class="bg-gray-300 dark:bg-gray-600 px-4 py-1 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition"> | |
| Reset | |
| </button> | |
| </div> | |
| </div> | |
| <div class="w-full md:w-1/2 pl-0 md:pl-4"> | |
| <p class="text-sm mb-2">Observe how the block behaves when the cart suddenly stops:</p> | |
| <ul class="text-sm list-disc pl-5 space-y-1"> | |
| <li>When moving at constant velocity (no acceleration), the block stays centered</li> | |
| <li>When the cart stops suddenly, the block continues moving forward due to inertia</li> | |
| <li>This demonstrates Newton's First Law in action</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Learning Style Selector --> | |
| <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 mb-4"> | |
| <h4 class="font-semibold mb-2">How would you like to learn this concept?</h4> | |
| <div class="flex flex-wrap gap-2"> | |
| <button class="learning-style-btn px-3 py-1 rounded-full bg-indigo-100 dark:bg-indigo-900 text-indigo-600 dark:text-indigo-300 border border-indigo-300 dark:border-indigo-700 hover:bg-indigo-200 dark:hover:bg-indigo-800 transition"> | |
| <i class="fas fa-eye mr-1"></i> Visual | |
| </button> | |
| <button class="learning-style-btn px-3 py-1 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300 border border-blue-300 dark:border-blue-700 hover:bg-blue-200 dark:hover:bg-blue-800 transition"> | |
| <i class="fas fa-headphones mr-1"></i> Auditory | |
| </button> | |
| <button class="learning-style-btn px-3 py-1 rounded-full bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-300 border border-green-300 dark:border-green-700 hover:bg-green-200 dark:hover:bg-green-800 transition"> | |
| <i class="fas fa-hands mr-1"></i> Kinesthetic | |
| </button> | |
| <button class="learning-style-btn px-3 py-1 rounded-full bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-300 border border-purple-300 dark:border-purple-700 hover:bg-purple-200 dark:hover:bg-purple-800 transition"> | |
| <i class="fas fa-book mr-1"></i> Reading/Writing | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Chat Input --> | |
| <div class="mt-6"> | |
| <div class="flex"> | |
| <input type="text" placeholder="Ask a question about Newton's Laws..." class="flex-grow px-4 py-2 rounded-l-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700"> | |
| <button class="bg-indigo-600 text-white px-4 py-2 rounded-r-lg hover:bg-indigo-700 transition"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Practice Generator Section --> | |
| <section id="practice" class="py-16 bg-white dark:bg-gray-800"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Practice Problem Generator</h2> | |
| <div class="bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md p-6 max-w-4xl mx-auto"> | |
| <div class="flex flex-col md:flex-row gap-6"> | |
| <!-- Controls --> | |
| <div class="md:w-1/3"> | |
| <h3 class="text-xl font-semibold mb-4">Customize Your Practice</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Topic</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700"> | |
| <option>Classical Mechanics</option> | |
| <option>Electromagnetism</option> | |
| <option>Thermodynamics</option> | |
| <option>Waves & Optics</option> | |
| <option>Modern Physics</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Sub-topic</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700"> | |
| <option>Newton's Laws</option> | |
| <option>Work & Energy</option> | |
| <option>Momentum</option> | |
| <option>Rotational Motion</option> | |
| <option>Gravitation</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Difficulty</label> | |
| <div class="flex space-x-2"> | |
| <button class="difficulty-btn active px-3 py-1 rounded-full bg-indigo-600 text-white">Easy</button> | |
| <button class="difficulty-btn px-3 py-1 rounded-full bg-gray-200 dark:bg-gray-600">Medium</button> | |
| <button class="difficulty-btn px-3 py-1 rounded-full bg-gray-200 dark:bg-gray-600">Hard</button> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Question Type</label> | |
| <div class="flex flex-wrap gap-2"> | |
| <button class="type-btn active px-3 py-1 rounded-full bg-indigo-600 text-white">MCQ</button> | |
| <button class="type-btn px-3 py-1 rounded-full bg-gray-200 dark:bg-gray-600">Numerical</button> | |
| <button class="type-btn px-3 py-1 rounded-full bg-gray-200 dark:bg-gray-600">Conceptual</button> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Curriculum</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700"> | |
| <option>General Physics</option> | |
| <option>AP Physics</option> | |
| <option>IB Physics</option> | |
| <option>A-Level Physics</option> | |
| <option>SAT Physics</option> | |
| </select> | |
| </div> | |
| <button class="w-full bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700 transition flex items-center justify-center"> | |
| <i class="fas fa-bolt mr-2"></i> Generate Practice | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Problem Display --> | |
| <div class="md:w-2/3"> | |
| <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6 border border-gray-200 dark:border-gray-700"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div class="flex items-center"> | |
| <span class="bg-indigo-100 dark:bg-indigo-900 text-indigo-600 dark:text-indigo-300 px-2 py-1 rounded text-xs font-medium mr-2">MCQ</span> | |
| <span class="bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-300 px-2 py-1 rounded text-xs font-medium">Easy</span> | |
| </div> | |
| <div class="text-sm text-gray-500">Newton's Laws • Classical Mechanics</div> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="font-semibold mb-3">A 2 kg object is moving at a constant velocity of 5 m/s. What is the net force acting on the object?</h4> | |
| <div class="space-y-3"> | |
| <div class="flex items-center"> | |
| <input type="radio" id="option1" name="mcq" class="mr-3"> | |
| <label for="option1" class="select-none">0 N</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" id="option2" name="mcq" class="mr-3"> | |
| <label for="option2" class="select-none">2 N</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" id="option3" name="mcq" class="mr-3"> | |
| <label for="option3" class="select-none">5 N</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" id="option4" name="mcq" class="mr-3"> | |
| <label for="option4" class="select-none">10 N</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button class="text-indigo-600 dark:text-indigo-300 hover:text-indigo-800 dark:hover:text-indigo-200 flex items-center"> | |
| <i class="fas fa-lightbulb mr-1"></i> Hint | |
| </button> | |
| <button class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition"> | |
| Check Answer | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Solution (initially hidden) --> | |
| <div class="mt-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 hidden" id="solution"> | |
| <h4 class="font-semibold mb-2 flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Correct Answer: 0 N | |
| </h4> | |
| <div class="text-sm"> | |
| <p class="mb-2">According to Newton's First Law, an object moving at constant velocity has no net force acting on it.</p> | |
| <div class="formula-box p-3 mb-2 rounded"> | |
| <p class="font-mono">ΣF = ma</p> | |
| </div> | |
| <p class="mb-2">Since velocity is constant, acceleration (a) = 0, therefore:</p> | |
| <div class="formula-box p-3 rounded"> | |
| <p class="font-mono">ΣF = m × 0 = 0 N</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Progress Tracking Section --> | |
| <section id="progress" class="py-16 bg-gray-50 dark:bg-gray-900"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Your Learning Progress</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto"> | |
| <!-- Progress Overview --> | |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6 md:col-span-2"> | |
| <h3 class="text-xl font-semibold mb-4">Physics Mastery</h3> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6"> | |
| <div class="bg-indigo-50 dark:bg-indigo-900/20 rounded-lg p-4 text-center"> | |
| <div class="relative w-16 h-16 mx-auto mb-2"> | |
| <svg class="progress-ring w-full h-full" width="120" height="120"> | |
| <circle class="text-gray-200 dark:text-gray-700" stroke-width="8" stroke="currentColor" fill="transparent" r="52" cx="60" cy="60"/> | |
| <circle class="progress-ring__circle text-indigo-600" stroke-width="8" stroke-dasharray="326.56" stroke-dashoffset="65.312" stroke-linecap="round" stroke="currentColor" fill="transparent" r="52" cx="60" cy="60"/> | |
| </svg> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <span class="text-xl font-bold">80%</span> | |
| </div> | |
| </div> | |
| <p class="text-sm font-medium">Mechanics</p> | |
| </div> | |
| <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 text-center"> | |
| <div class="relative w-16 h-16 mx-auto mb-2"> | |
| <svg class="progress-ring w-full h-full" width="120" height="120"> | |
| <circle class="text-gray-200 dark:text-gray-700" stroke-width="8" stroke="currentColor" fill="transparent" r="52" cx="60" cy="60"/> | |
| <circle class="progress-ring__circle text-blue-600" stroke-width="8" stroke-dasharray="326.56" stroke-dashoffset="130.624" stroke-linecap="round" stroke="currentColor" fill="transparent" r="52" cx="60" cy="60"/> | |
| </svg> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <span class="text-xl font-bold">60%</span> | |
| </div> | |
| </div> | |
| <p class="text-sm font-medium">Electromagnetism</p> | |
| </div> | |
| <div class="bg-purple-50 dark:bg-purple-900/20 rounded-lg p-4 text-center"> | |
| <div class="relative w-16 h-16 mx-auto mb-2"> | |
| <svg class="progress-ring w-full h-full" width="120" height="120"> | |
| <circle class="text-gray-200 dark:text-gray-700" stroke-width="8" stroke="currentColor" fill="transparent" r="52" cx="60" cy="60"/> | |
| <circle class="progress-ring__circle text-purple-600" stroke-width="8" stroke-dasharray="326.56" stroke-dashoffset="195.936" stroke-linecap="round" stroke="currentColor" fill="transparent" r="52" cx="60" cy="60"/> | |
| </svg> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <span class="text-xl font-bold">40%</span> | |
| </div> | |
| </div> | |
| <p class="text-sm font-medium">Modern Physics</p> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <h4 class="font-semibold mb-2">Recent Activity</h4> | |
| <div class="space-y-3"> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center mr-3 mt-1"> | |
| <i class="fas fa-check text-green-600 dark:text-green-300"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Completed Newton's Laws practice</p> | |
| <p class="text-sm text-gray-500">10 problems • 90% accuracy • 15 mins ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mr-3 mt-1"> | |
| <i class="fas fa-book-open text-blue-600 dark:text-blue-300"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Studied Electromagnetic Induction</p> | |
| <p class="text-sm text-gray-500">25 minutes • 1 hour ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center mr-3 mt-1"> | |
| <i class="fas fa-flask text-yellow-600 dark:text-yellow-300"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Tried Quantum Mechanics simulation</p> | |
| <p class="text-sm text-gray-500">3 experiments • 2 hours ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Study Plan --> | |
| <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md p-6"> | |
| <h3 class="text-xl font-semibold mb-4">Recommended Study Plan</h3> | |
| <div class="mb-4"> | |
| <h4 class="font-medium mb-2">Today's Focus</h4> | |
| <div class="bg-indigo-50 dark:bg-indigo-900/20 rounded-lg p-3 mb-2"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="task1" class="mr-3"> | |
| <label for="task1" class="flex-1">Review Circular Motion concepts</label> | |
| </div> | |
| </div> | |
| <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-3 mb-2"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="task2" class="mr-3"> | |
| <label for="task2" class="flex-1">Practice 5 centripetal force problems</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h4 class="font-medium mb-2">Upcoming Topics</h4> | |
| <div class="space-y-2"> | |
| <div class="flex items-center justify-between p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> | |
| <span>Gravitational Fields</span> | |
| <span class="text-sm text-gray-500">Tomorrow</span> | |
| </div> | |
| <div class="flex items-center justify-between p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> | |
| <span>Electric Potential</span> | |
| <span class="text-sm text-gray-500">In 2 days</span> | |
| </div> | |
| <div class="flex items-center justify-between p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg"> | |
| <span>Wave-Particle Duality</span> | |
| <span class="text-sm text-gray-500">In 4 days</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full bg-indigo-600 text-white py-2 rounded-lg hover:bg-indigo-700 transition"> | |
| Generate New Study Plan | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Flashcards Section --> | |
| <section class="py-16 bg-white dark:bg-gray-800"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Smart Flashcards</h2> | |
| <div class="max-w-2xl mx-auto"> | |
| <div class="bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <div> | |
| <span class="bg-indigo-100 dark:bg-indigo-900 text-indigo-600 dark:text-indigo-300 px-2 py-1 rounded text-xs font-medium mr-2">Mechanics</span> | |
| <span class="text-sm text-gray-500">Card 12/25</span> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600"> | |
| <i class="fas fa-random"></i> | |
| </button> | |
| <button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flashcard-container relative h-64 mb-6"> | |
| <div class="flashcard absolute inset-0 bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 flex flex-col items-center justify-center border-2 border-indigo-200 dark:border-indigo-900 transition-all duration-300 transform preserve-3d" id="flashcard"> | |
| <div class="flashcard-front flex flex-col items-center justify-center text-center"> | |
| <div class="w-16 h-16 bg-indigo-100 dark:bg-indigo-900 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-bolt text-indigo-600 dark:text-indigo-300 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Newton's Second Law</h3> | |
| <p class="text-gray-600 dark:text-gray-300">What is the mathematical expression of Newton's Second Law?</p> | |
| </div> | |
| <div class="flashcard-back absolute inset-0 flex flex-col items-center justify-center text-center bg-indigo-50 dark:bg-indigo-900/20 rounded-lg p-6 transform rotate-y-180 backface-hidden"> | |
| <div class="formula-box w-full p-4 mb-4 rounded"> | |
| <p class="font-mono text-lg">F = ma</p> | |
| </div> | |
| <p class="mb-2"><span class="font-semibold">F</span> = net force (N)</p> | |
| <p class="mb-2"><span class="font-semibold">m</span> = mass (kg)</p> | |
| <p><span class="font-semibold">a</span> = acceleration (m/s²)</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <button class="bg-red-100 dark:bg-red-900/20 text-red-600 dark:text-red-300 px-4 py-2 rounded-lg hover:bg-red-200 dark:hover:bg-red-800 transition"> | |
| <i class="fas fa-times mr-1"></i> Hard | |
| </button> | |
| <button class="bg-green-100 dark:bg-green-900/20 text-green-600 dark:text-green-300 px-4 py-2 rounded-lg hover:bg-green-200 dark:hover:bg-green-800 transition"> | |
| <i class="fas fa-check mr-1"></i> Easy | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Note Maker Section --> | |
| <section class="py-16 bg-gray-50 dark:bg-gray-900"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Smart Note Maker</h2> | |
| <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-4 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-bold"></i> | |
| </button> | |
| <button class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-italic"></i> | |
| </button> | |
| <button class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-list-ul"></i> | |
| </button> | |
| <button class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-image"></i> | |
| </button> | |
| <button class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-square-root-alt"></i> | |
| </button> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-file-pdf"></i> | |
| </button> | |
| <button class="p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700"> | |
| <i class="fas fa-download"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <input type="text" placeholder="Note Title" class="w-full text-2xl font-bold mb-4 px-2 py-1 border-b border-gray-200 dark:border-gray-700 focus:outline-none focus:border-indigo-500 dark:bg-gray-800"> | |
| <div class="flex mb-4"> | |
| <select class="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg mr-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700"> | |
| <option>Physics</option> | |
| <option>Mechanics</option> | |
| <option>Electromagnetism</option> | |
| <option>Thermodynamics</option> | |
| <option>Modern Physics</option> | |
| </select> | |
| <select class="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700"> | |
| <option>Newton's Laws</option> | |
| <option>Work & Energy</option> | |
| <option>Momentum</option> | |
| <option>Rotational Motion</option> | |
| </select> | |
| </div> | |
| <div class="prose dark:prose-invert max-w-none"> | |
| <div contenteditable="true" class="min-h-64 p-2 focus:outline-none"> | |
| <h3>Newton's First Law (Law of Inertia)</h3> | |
| <p>An object at rest stays at rest and an object in motion stays in motion with the same speed and in the same direction unless acted upon by an unbalanced force.</p> | |
| <div class="formula-box p-3 my-2 rounded"> | |
| <p class="font-mono">ΣF = 0 ⇒ a = 0</p> | |
| </div> | |
| <h3>Key Points:</h3> | |
| <ul> | |
| <li>Also called the law of inertia</li> | |
| <li>Defines the concept of inertial reference frames</li> | |
| <li>Objects resist changes to their state of motion</li> | |
| </ul> | |
| <h3>Examples:</h3> | |
| <p><strong>1.</strong> A book on a table remains at rest until you push it.</p> | |
| <p><strong>2.</strong> Passengers in a car lurch forward when the car stops suddenly.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="gradient-bg text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Quantum Tutor</h3> | |
| <p class="mb-4">The most advanced AI Physics learning platform for students at all levels.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="hover:text-gray-200 transition"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="hover:text-gray-200 transition"><i class="fab fa-facebook"></i></a> | |
| <a href="#" class="hover:text-gray-200 transition"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="hover:text-gray-200 transition"><i class="fab fa-linkedin"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Features</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-gray-200 transition">AI Tutor</a></li> | |
| <li><a href="#" class="hover:text-gray-200 transition">Practice Problems</a></li> | |
| <li><a href="#" class="hover:text-gray-200 transition">Flashcards</a></li> | |
| <li><a href="#" class="hover:text-gray-200 transition">Progress Tracking</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Physics Topics</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-gray-200 transition">Classical Mechanics</a></li> | |
| <li><a href="#" class="hover:text-gray-200 transition">Electromagnetism</a></li> | |
| <li><a href="#" class="hover:text-gray-200 transition">Thermodynamics</a></li> | |
| <li><a href="#" class="hover:text-gray-200 transition">Quantum Physics</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Contact</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"><i class="fas fa-envelope mr-2"></i> support@quantumtutor.com</li> | |
| <li class="flex items-center"><i class="fas fa-phone mr-2"></i> +1 (555) 123-4567</li> | |
| <li class="flex items-center"><i class="fas fa-map-marker-alt mr-2"></i> San Francisco, CA</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-white/20 mt-8 pt-8 text-center"> | |
| <p>© 2023 Quantum Tutor. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Theme toggle | |
| const themeToggle = document.getElementById('theme-toggle'); | |
| const html = document.documentElement; | |
| themeToggle.addEventListener('click', () => { | |
| html.classList.toggle('dark'); | |
| localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light'); | |
| }); | |
| // Check for saved theme preference | |
| if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { | |
| html.classList.add('dark'); | |
| } else { | |
| html.classList.remove('dark'); | |
| } | |
| // Accordion functionality | |
| const accordionButtons = document.querySelectorAll('.accordion-button'); | |
| accordionButtons.forEach(button => { | |
| button.addEventListener('click', () => { | |
| const content = button.nextElementSibling; | |
| const icon = button.querySelector('i'); | |
| content.classList.toggle('hidden'); | |
| icon.classList.toggle('rotate-180'); | |
| }); | |
| }); | |
| // Practice difficulty buttons | |
| const difficultyBtns = document.querySelectorAll('.difficulty-btn'); | |
| difficultyBtns.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| difficultyBtns.forEach(b => b.classList.remove('active', 'bg-indigo-600', 'text-white')); | |
| btn.classList.add('active', 'bg-indigo-600', 'text-white'); | |
| }); | |
| }); | |
| // Practice type buttons | |
| const typeBtns = document.querySelectorAll('.type-btn'); | |
| typeBtns.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| typeBtns.forEach(b => b.classList.remove('active', 'bg-indigo-600', 'text-white')); | |
| btn.classList.add('active', 'bg-indigo-600', 'text-white'); | |
| }); | |
| }); | |
| // Learning style buttons | |
| const learningStyleBtns = document.querySelectorAll('.learning-style-btn'); | |
| learningStyleBtns.forEach(btn => { | |
| btn.addEventListener('click', () => { | |
| learningStyleBtns.forEach(b => { | |
| b.classList.remove('bg-indigo-200', 'dark:bg-indigo-800', 'border-indigo-300', 'dark:border-indigo-700'); | |
| b.classList.add('bg-indigo-100', 'dark:bg-indigo-900', 'border-indigo-300', 'dark:border-indigo-700'); | |
| }); | |
| btn.classList.remove('bg-indigo-100', 'dark:bg-indigo-900'); | |
| btn.classList.add('bg-indigo-200', 'dark:bg-indigo-800'); | |
| }); | |
| }); | |
| // Simulation | |
| const startSimBtn = document.getElementById('start-sim'); | |
| const resetSimBtn = document.getElementById('reset-sim'); | |
| const cart = document.getElementById('cart'); | |
| const block = document.getElementById('block'); | |
| startSimBtn.addEventListener('click', () => { | |
| cart.style.transform = 'translateX(200px)'; | |
| setTimeout(() => { | |
| cart.style.transform = 'translateX(180px)'; | |
| block.style.transform = 'translateX(20px) translateY(-20px)'; | |
| }, 1000); | |
| }); | |
| resetSimBtn.addEventListener('click', () => { | |
| cart.style.transform = 'translateX(0)'; | |
| block.style.transform = 'translateX(0) translateY(0)'; | |
| }); | |
| // Flashcard flip | |
| const flashcard = document.getElementById('flashcard'); | |
| flashcard.addEventListener('click', () => { | |
| flashcard.classList.toggle('flipped'); | |
| }); | |
| // Check answer button | |
| const checkAnswerBtn = document.querySelector('.bg-indigo-600.text-white.px-4.py-2.rounded-lg'); | |
| const solution = document.getElementById('solution'); | |
| if (checkAnswerBtn && solution) { | |
| checkAnswerBtn.addEventListener('click', () => { | |
| solution.classList.toggle('hidden'); | |
| }); | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=SHIMSHAM2009/quantum-tutor" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |