I have my own files for classes and lore I want to be able to upload

index.html

@@ -54,7 +54,6 @@
                     </div>
                 </div>
             </section>
-
             <!-- Lore Creation -->
             <section class="mb-12 bg-white rounded-xl shadow-lg p-6">
                 <h2 class="text-2xl font-bold text-primary-500 mb-4">
@@ -62,7 +61,17 @@
                     Craft Your Lore
                 </h2>
                 <div class="space-y-4">
-                    <div>
+                    <div class="flex items-center space-x-4 mb-4">
+                        <label class="relative cursor-pointer bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded-lg transition">
+                            <span class="flex items-center">
+                                <i data-feather="upload" class="mr-2 w-4 h-4"></i>
+                                Upload Lore File
+                            </span>
+                            <input type="file" id="lore-upload" accept=".json,.txt,.md" class="hidden">
+                        </label>
+                        <span class="text-sm text-gray-500">or create manually below</span>
+                    </div>
+<div>
                         <label class="block text-gray-700 mb-2">World Name</label>
                         <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500">
                     </div>
@@ -76,15 +85,24 @@
                     </div>
                 </div>
             </section>
-
             <!-- Character Classes -->
             <section class="mb-12 bg-white rounded-xl shadow-lg p-6">
                 <h2 class="text-2xl font-bold text-primary-500 mb-4">
                     <i data-feather="users" class="inline mr-2"></i>
                     Design Character Classes
                 </h2>
+                <div class="flex items-center space-x-4 mb-4">
+                    <label class="relative cursor-pointer bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded-lg transition">
+                        <span class="flex items-center">
+                            <i data-feather="upload" class="mr-2 w-4 h-4"></i>
+                            Upload Classes File
+                        </span>
+                        <input type="file" id="classes-upload" accept=".json,.txt,.md" class="hidden">
+                    </label>
+                    <span class="text-sm text-gray-500">or create manually below</span>
+                </div>
                 <div id="classes-container">
-                    <!-- Classes will be added here -->
+<!-- Classes will be added here -->
                 </div>
                 <button id="add-class-btn" class="mt-4 flex items-center text-secondary-500 font-medium hover:text-secondary-600">
                     <i data-feather="plus" class="mr-2"></i> Add New Class

script.js

@@ -1,8 +1,156 @@
+
 document.addEventListener('DOMContentLoaded', function() {
     // Initialize class counter
     let classCount = 0;
-    
-    // Add class button functionality
+
+    // Handle lore file upload
+    document.getElementById('lore-upload').addEventListener('change', function(e) {
+        const file = e.target.files[0];
+        if (!file) return;
+
+        const reader = new FileReader();
+        reader.onload = function(e) {
+            try {
+                const loreData = JSON.parse(e.target.result);
+                // Populate lore fields with uploaded data
+                if (loreData.worldName) {
+                    document.querySelector('input[type="text"]').value = loreData.worldName;
+                }
+                if (loreData.backgroundStory) {
+                    document.querySelector('textarea').value = loreData.backgroundStory;
+                }
+                if (loreData.majorFactions) {
+                    document.querySelectorAll('input[type="text"]')[1].value = loreData.majorFactions;
+                }
+            } catch (error) {
+                alert('Error parsing lore file. Please check the format.');
+            }
+        };
+        reader.readAsText(file);
+    });
+
+    // Handle classes file upload
+    document.getElementById('classes-upload').addEventListener('change', function(e) {
+        const file = e.target.files[0];
+        if (!file) return;
+
+        const reader = new FileReader();
+        reader.onload = function(e) {
+            try {
+                const classesData = JSON.parse(e.target.result);
+                const container = document.getElementById('classes-container');
+                container.innerHTML = ''; // Clear existing classes
+                
+                classesData.forEach((classData, index) => {
+                    classCount++;
+                    const classCard = document.createElement('div');
+                    classCard.className = 'class-card bg-gray-50 p-4 rounded-lg border border-gray-200 mb-4';
+                    classCard.innerHTML = `
+                        <div class="flex justify-between items-start mb-2">
+                            <h3 class="font-semibold text-lg">${classData.name || `New Class #${index+1}`}</h3>
+                            <button class="text-red-500 hover:text-red-600">
+                                <i data-feather="trash-2"></i>
+                            </button>
+                        </div>
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <div>
+                                <label class="block text-gray-700 mb-1 text-sm">Class Name</label>
+                                <input type="text" class="w-full px-3 py-1 border border-gray-300 rounded-md" value="${classData.name || ''}">
+                            </div>
+                            <div>
+                                <label class="block text-gray-700 mb-1 text-sm">Primary Attribute</label>
+                                <select class="w-full px-3 py-1 border border-gray-300 rounded-md">
+                                    <option ${classData.attribute === 'Strength' ? 'selected' : ''}>Strength</option>
+                                    <option ${classData.attribute === 'Dexterity' ? 'selected' : ''}>Dexterity</option>
+                                    <option ${classData.attribute === 'Intelligence' ? 'selected' : ''}>Intelligence</option>
+                                    <option ${classData.attribute === 'Wisdom' ? 'selected' : ''}>Wisdom</option>
+                                    <option ${classData.attribute === 'Charisma' ? 'selected' : ''}>Charisma</option>
+                                    <option ${classData.attribute === 'Constitution' ? 'selected' : ''}>Constitution</option>
+                                </select>
+                            </div>
+                            <div>
+                                <label class="block text-gray-700 mb-1 text-sm">Hit Points</label>
+                                <input type="text" class="w-full px-3 py-1 border border-gray-300 rounded-md" value="${classData.hitPoints || '1d8'}">
+                            </div>
+                            <div>
+                                <label class="block text-gray-700 mb-1 text-sm">Armor Proficiency</label>
+                                <select class="w-full px-3 py-1 border border-gray-300 rounded-md">
+                                    <option ${classData.armor === 'Light' ? 'selected' : ''}>Light</option>
+                                    <option ${classData.armor === 'Medium' ? 'selected' : ''}>Medium</option>
+                                    <option ${classData.armor === 'Heavy' ? 'selected' : ''}>Heavy</option>
+                                    <option ${classData.armor === 'None' ? 'selected' : ''}>None</option>
+                                </select>
+                            </div>
+                            <div class="md:col-span-2">
+                                <label class="block text-gray-700 mb-1 text-sm">Class Description</label>
+                                <textarea rows="2" class="w-full px-3 py-1 border border-gray-300 rounded-md">${classData.description || ''}</textarea>
+                            </div>
+                            <div class="md:col-span-2">
+                                <label class="block text-gray-700 mb-1 text-sm">Special Abilities</label>
+                                <div class="abilities-container space-y-2">
+                                    ${classData.abilities ? classData.abilities.map(ability => `
+                                        <div class="flex items-center">
+                                            <input type="text" class="flex-1 px-2 py-1 border border-gray-300 rounded-md mr-2" value="${ability}">
+                                            <button class="text-red-500 hover:text-red-600">
+                                                <i data-feather="x" class="w-4 h-4"></i>
+                                            </button>
+                                        </div>
+                                    `).join('') : ''}
+                                </div>
+                                <button class="mt-2 text-sm text-secondary-500 hover:text-secondary-600 flex items-center">
+                                    <i data-feather="plus" class="w-4 h-4 mr-1"></i> Add Ability
+                                </button>
+                            </div>
+                        </div>
+                    `;
+                    
+                    container.appendChild(classCard);
+                    feather.replace();
+                    
+                    // Add event listener for delete button
+                    classCard.querySelector('button').addEventListener('click', function() {
+                        container.removeChild(classCard);
+                        classCount--;
+                    });
+                    
+                    // Add event listeners for abilities
+                    const abilitiesBtn = classCard.querySelector('.abilities-container').nextElementSibling;
+                    abilitiesBtn.addEventListener('click', function() {
+                        addAbilityField(this.previousElementSibling);
+                    });
+                    
+                    // Add event listeners for existing ability delete buttons
+                    classCard.querySelectorAll('.abilities-container button').forEach(btn => {
+                        btn.addEventListener('click', function() {
+                            this.parentElement.remove();
+                        });
+                    });
+                });
+            } catch (error) {
+                alert('Error parsing classes file. Please check the format.');
+            }
+        };
+        reader.readAsText(file);
+    });
+
+    function addAbilityField(container) {
+        const abilityDiv = document.createElement('div');
+        abilityDiv.className = 'flex items-center';
+        abilityDiv.innerHTML = `
+            <input type="text" class="flex-1 px-2 py-1 border border-gray-300 rounded-md mr-2" placeholder="Ability name">
+            <button class="text-red-500 hover:text-red-600">
+                <i data-feather="x" class="w-4 h-4"></i>
+            </button>
+        `;
+        container.appendChild(abilityDiv);
+        feather.replace();
+        
+        // Add event listener for delete ability button
+        abilityDiv.querySelector('button').addEventListener('click', function() {
+            container.removeChild(abilityDiv);
+        });
+    }
+// Add class button functionality
     document.getElementById('add-class-btn').addEventListener('click', function() {
         classCount++;
         const container = document.getElementById('classes-container');

style.css

@@ -30,12 +30,19 @@ button:hover {
 ::-webkit-scrollbar-thumb:hover {
     background: #555;
 }
+/* Upload button styles */
+input[type="file"] + span {
+    transition: all 0.2s ease;
+}
+
+input[type="file"]:hover + span {
+    background-color: #e5e7eb;
+}
 
 /* Character class card styles */
 .class-card {
     transition: all 0.3s ease;
 }
-
 .class-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);