achmorrison/quantum-problem-bank
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Add New Problem | Quantum Problem Bank</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <script src="components/navbar.js"></script>12 <script src="components/footer.js"></script>13</head>14<body class="bg-gray-50 min-h-screen flex flex-col">15 <custom-navbar></custom-navbar>16 17 <main class="flex-grow container mx-auto px-4 py-8">18 <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md p-8">19 <div class="text-center mb-8">20 <h1 class="text-3xl font-bold text-indigo-700 mb-2">Add New Problem</h1>21 <p class="text-gray-600">Contribute to our growing database of physics problems</p>22 </div>23 24 <form id="problem-form" class="space-y-6">25 <div>26 <label for="title" class="block text-sm font-medium text-gray-700 mb-1">Problem Title</label>27 <input 28 type="text" 29 id="title" 30 required31 class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"32 placeholder="e.g., Newton's Laws: Inclined Plane"33 >34 </div>35 36 <div>37 <label for="description" class="block text-sm font-medium text-gray-700 mb-1">Problem Description</label>38 <textarea 39 id="description" 40 rows="5"41 required42 class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"43 placeholder="Describe the problem scenario..."44 ></textarea>45 </div>46 47 <div>48 <label for="topic" class="block text-sm font-medium text-gray-700 mb-1">Topic</label>49 <select 50 id="topic" 51 required52 class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"53 >54 <option value="">Select a topic</option>55 <option value="Classical Mechanics">Classical Mechanics</option>56 <option value="Electromagnetism">Electromagnetism</option>57 <option value="Quantum Mechanics">Quantum Mechanics</option>58 <option value="Thermodynamics">Thermodynamics</option>59 <option value="Optics">Optics</option>60 <option value="Other">Other</option>61 </select>62 </div>63 64 <div>65 <label class="block text-sm font-medium text-gray-700 mb-1">Difficulty</label>66 <div class="flex space-x-4">67 <label class="inline-flex items-center">68 <input type="radio" name="difficulty" value="Easy" class="text-indigo-600">69 <span class="ml-2">Easy</span>70 </label>71 <label class="inline-flex items-center">72 <input type="radio" name="difficulty" value="Medium" checked class="text-indigo-600">73 <span class="ml-2">Medium</span>74 </label>75 <label class="inline-flex items-center">76 <input type="radio" name="difficulty" value="Hard" class="text-indigo-600">77 <span class="ml-2">Hard</span>78 </label>79 </div>80 </div>81 82 <div class="space-y-4">83 <div>84 <label for="parameters" class="block text-sm font-medium text-gray-700 mb-1">Parameters</label>85 <div class="flex">86 <input 87 type="text" 88 id="new-parameter"89 class="flex-grow px-4 py-2 rounded-l-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"90 placeholder="e.g., mass, angle, friction"91 >92 <button 93 type="button" 94 id="add-parameter"95 class="px-4 py-2 bg-indigo-600 text-white rounded-r-lg hover:bg-indigo-700"96 >97 Add98 </button>99 </div>100 <p class="mt-1 text-sm text-gray-500">Separate multiple parameters with commas</p>101 </div>102 103 <div id="parameter-list" class="flex flex-wrap gap-2">104 <!-- Parameters will be added here -->105 </div>106 </div>107 108 <div>109 <label for="solution" class="block text-sm font-medium text-gray-700 mb-1">Solution</label>110 <textarea 111 id="solution" 112 rows="5"113 class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"114 placeholder="Provide the solution or solution approach..."115 ></textarea>116 </div>117 118 <div class="flex items-center justify-end space-x-4 pt-4">119 <button 120 type="button" 121 class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50"122 >123 Cancel124 </button>125 <button 126 type="submit" 127 class="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700"128 >129 Submit Problem130 </button>131 </div>132 </form>133 </div>134 </main>135 136 <custom-footer></custom-footer>137 138 <script>139 feather.replace();140 141 document.getElementById('add-parameter').addEventListener('click', () => {142 const input = document.getElementById('new-parameter');143 const value = input.value.trim();144 if (!value) return;145 146 const params = value.split(',').map(p => p.trim()).filter(p => p);147 const container = document.getElementById('parameter-list');148 149 params.forEach(param => {150 const chip = document.createElement('div');151 chip.className = 'flex items-center bg-gray-100 px-3 py-1 rounded-full';152 chip.innerHTML = `153 <span class="text-sm">${param}</span>154 <button type="button" class="ml-2 text-gray-500 hover:text-red-500" data-param="${param}">155 <i data-feather="x" class="w-3 h-3"></i>156 </button>157 `;158 container.appendChild(chip);159 chip.querySelector('button').addEventListener('click', () => chip.remove());160 });161 162 input.value = '';163 feather.replace();164 });165 166 document.getElementById('problem-form').addEventListener('submit', (e) => {167 e.preventDefault();168 // In a real app, you would submit the form data to your backend169 alert('Problem submitted successfully!');170 window.location.href = 'index.html';171 });172 </script>173 <script src="script.js"></script>174</body>175</html>