Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ const mobileMenu = document.querySelector('.mobile-menu');
+ const navLinks = document.querySelector('.nav-links');
+ const stepsList = document.getElementById('stepsList');
+ const stepForm = document.getElementById('stepForm');
+ const addStepBtn = document.getElementById('addStep');
+
+ let steps = [];
+ let currentEditIndex = -1;
+
+ // Mobile menu toggle
+ mobileMenu.addEventListener('click', () => {
+ navLinks.classList.toggle('active');
+ });
+
+ // Add new step
+ addStepBtn.addEventListener('click', () => {
+ currentEditIndex = -1;
+ stepForm.reset();
+ });
+
+ // Save step
+ stepForm.addEventListener('submit', (e) => {
+ e.preventDefault();
+
+ const stepType = document.getElementById('stepType').value;
+ const stepValue = document.getElementById('stepValue').value;
+
+ const step = {
+ type: stepType,
+ value: stepValue
+ };
+
+ if (currentEditIndex === -1) {
+ steps.push(step);
+ } else {
+ steps[currentEditIndex] = step;
+ }
+
+ updateStepsList();
+ stepForm.reset();
+ currentEditIndex = -1;
+ });
+
+ function updateStepsList() {
+ stepsList.innerHTML = '';
+
+ steps.forEach((step, index) => {
+ const li = document.createElement('li');
+ li.style.display = 'flex';
+ li.style.justifyContent = 'space-between';
+ li.style.alignItems = 'center';
+ li.style.padding = '0.5rem';
+ li.style.borderBottom = '1px solid var(--border)';
+
+ li.innerHTML = `
+ ${index + 1}. ${step.type}: ${step.value}
+ `;
+
+ stepsList.appendChild(li);
+ });
+ }
+
+ // Make these functions globally available
+ window.editStep = (index) => {
+ currentEditIndex = index;
+ const step = steps[index];
+ document.getElementById('stepType').value = step.type;
+ document.getElementById('stepValue').value = step.value;
+ };
+
+ window.deleteStep = (index) => {
+ steps.splice(index, 1);
+ updateStepsList();
+ };
+ });