I need to be able to add custom races as well and my files I have that I need to upload are .doc files

index.html

@@ -85,8 +85,32 @@
                     </div>
                 </div>
             </section>
-            <!-- Character Classes -->
+            <!-- Races -->
             <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>
+                    Define Races
+                </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 Races File
+                        </span>
+                        <input type="file" id="races-upload" accept=".doc,.docx,.json,.txt" class="hidden">
+                    </label>
+                    <span class="text-sm text-gray-500">or create manually below</span>
+                </div>
+                <div id="races-container">
+                    <!-- Races will be added here -->
+                </div>
+                <button id="add-race-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 Race
+                </button>
+            </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

script.js

@@ -1,9 +1,9 @@
 
 document.addEventListener('DOMContentLoaded', function() {
-    // Initialize class counter
+    // Initialize counters
     let classCount = 0;
-
-    // Handle lore file upload
+    let raceCount = 0;
+// Handle lore file upload
     document.getElementById('lore-upload').addEventListener('change', function(e) {
         const file = e.target.files[0];
         if (!file) return;
@@ -28,9 +28,105 @@ document.addEventListener('DOMContentLoaded', function() {
         };
         reader.readAsText(file);
     });
+    // Handle races file upload
+    document.getElementById('races-upload').addEventListener('change', function(e) {
+        const file = e.target.files[0];
+        if (!file) return;
+
+        const reader = new FileReader();
+        reader.onload = function(e) {
+            try {
+                let racesData;
+                if (file.name.endsWith('.doc') || file.name.endsWith('.docx')) {
+                    // For DOC files, we'll just display the raw text
+                    racesData = [{name: 'Imported DOC', description: e.target.result}];
+                } else {
+                    racesData = JSON.parse(e.target.result);
+                }
+                
+                const container = document.getElementById('races-container');
+                container.innerHTML = ''; // Clear existing races
+                
+                racesData.forEach((raceData, index) => {
+                    raceCount++;
+                    const raceCard = document.createElement('div');
+                    raceCard.className = 'race-card bg-gray-50 p-4 rounded-lg border border-gray-200 mb-4';
+                    raceCard.innerHTML = `
+                        <div class="flex justify-between items-start mb-2">
+                            <h3 class="font-semibold text-lg">${raceData.name || `New Race #${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 class="md:col-span-2">
+                                <label class="block text-gray-700 mb-1 text-sm">Race Description</label>
+                                <textarea rows="3" class="w-full px-3 py-1 border border-gray-300 rounded-md">${raceData.description || ''}</textarea>
+                            </div>
+                            <div>
+                                <label class="block text-gray-700 mb-1 text-sm">Size</label>
+                                <select class="w-full px-3 py-1 border border-gray-300 rounded-md">
+                                    <option ${raceData.size === 'Small' ? 'selected' : ''}>Small</option>
+                                    <option ${raceData.size === 'Medium' ? 'selected' : ''}>Medium</option>
+                                    <option ${raceData.size === 'Large' ? 'selected' : ''}>Large</option>
+                                </select>
+                            </div>
+                            <div>
+                                <label class="block text-gray-700 mb-1 text-sm">Speed</label>
+                                <input type="text" class="w-full px-3 py-1 border border-gray-300 rounded-md" value="${raceData.speed || '30'}">
+                            </div>
+                            <div class="md:col-span-2">
+                                <label class="block text-gray-700 mb-1 text-sm">Racial Traits</label>
+                                <div class="traits-container space-y-2">
+                                    ${raceData.traits ? raceData.traits.map(trait => `
+                                        <div class="flex items-center">
+                                            <input type="text" class="flex-1 px-2 py-1 border border-gray-300 rounded-md mr-2" value="${trait}">
+                                            <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 Trait
+                                </button>
+                            </div>
+                        </div>
+                    `;
+                    
+                    container.appendChild(raceCard);
+                    feather.replace();
+                    
+                    // Add event listener for delete button
+                    raceCard.querySelector('button').addEventListener('click', function() {
+                        container.removeChild(raceCard);
+                        raceCount--;
+                    });
+                    
+                    // Add event listener for add trait button
+                    const traitsBtn = raceCard.querySelector('.traits-container').nextElementSibling;
+                    traitsBtn.addEventListener('click', function() {
+                        addTraitField(this.previousElementSibling);
+                    });
+                });
+            } catch (error) {
+                alert('Error processing races file. Showing raw content.');
+                const container = document.getElementById('races-container');
+                container.innerHTML = `<div class="bg-gray-50 p-4 rounded-lg border border-gray-200">
+                    <h3 class="font-semibold text-lg mb-2">File Content</h3>
+                    <pre class="whitespace-pre-wrap">${e.target.result}</pre>
+                </div>`;
+            }
+        };
+        if (file.name.endsWith('.doc') || file.name.endsWith('.docx')) {
+            reader.readAsText(file);
+        } else {
+            reader.readAsText(file);
+        }
+    });
 
     // Handle classes file upload
-    document.getElementById('classes-upload').addEventListener('change', function(e) {
+document.getElementById('classes-upload').addEventListener('change', function(e) {
         const file = e.target.files[0];
         if (!file) return;
 
@@ -150,8 +246,80 @@ document.addEventListener('DOMContentLoaded', function() {
             container.removeChild(abilityDiv);
         });
     }
-// Add class button functionality
-    document.getElementById('add-class-btn').addEventListener('click', function() {
+    // Add race button functionality
+    document.getElementById('add-race-btn').addEventListener('click', function() {
+        raceCount++;
+        const container = document.getElementById('races-container');
+        
+        const raceCard = document.createElement('div');
+        raceCard.className = 'race-card bg-gray-50 p-4 rounded-lg border border-gray-200 mb-4';
+        raceCard.innerHTML = `
+            <div class="flex justify-between items-start mb-2">
+                <h3 class="font-semibold text-lg">New Race #${raceCount}</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 class="md:col-span-2">
+                    <label class="block text-gray-700 mb-1 text-sm">Race Description</label>
+                    <textarea rows="3" class="w-full px-3 py-1 border border-gray-300 rounded-md"></textarea>
+                </div>
+                <div>
+                    <label class="block text-gray-700 mb-1 text-sm">Size</label>
+                    <select class="w-full px-3 py-1 border border-gray-300 rounded-md">
+                        <option>Small</option>
+                        <option selected>Medium</option>
+                        <option>Large</option>
+                    </select>
+                </div>
+                <div>
+                    <label class="block text-gray-700 mb-1 text-sm">Speed</label>
+                    <input type="text" class="w-full px-3 py-1 border border-gray-300 rounded-md" value="30">
+                </div>
+                <div class="md:col-span-2">
+                    <label class="block text-gray-700 mb-1 text-sm">Racial Traits</label>
+                    <div class="traits-container space-y-2"></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 Trait
+                    </button>
+                </div>
+            </div>
+        `;
+        
+        container.appendChild(raceCard);
+        feather.replace();
+        
+        // Add event listener for delete button
+        raceCard.querySelector('button').addEventListener('click', function() {
+            container.removeChild(raceCard);
+            raceCount--;
+        });
+        
+        // Add event listener for add trait button
+        const traitsBtn = raceCard.querySelector('.traits-container').nextElementSibling;
+        traitsBtn.addEventListener('click', function() {
+            const traitsContainer = this.previousElementSibling;
+            const traitDiv = document.createElement('div');
+            traitDiv.className = 'flex items-center';
+            traitDiv.innerHTML = `
+                <input type="text" class="flex-1 px-2 py-1 border border-gray-300 rounded-md mr-2" placeholder="Trait name">
+                <button class="text-red-500 hover:text-red-600">
+                    <i data-feather="x" class="w-4 h-4"></i>
+                </button>
+            `;
+            traitsContainer.appendChild(traitDiv);
+            feather.replace();
+            
+            // Add event listener for delete trait button
+            traitDiv.querySelector('button').addEventListener('click', function() {
+                traitsContainer.removeChild(traitDiv);
+            });
+        });
+    });
+
+    // Add class button functionality
+document.getElementById('add-class-btn').addEventListener('click', function() {
         classCount++;
         const container = document.getElementById('classes-container');
         

style.css

@@ -38,12 +38,18 @@ input[type="file"] + span {
 input[type="file"]:hover + span {
     background-color: #e5e7eb;
 }
-
-/* Character class card styles */
-.class-card {
+/* Race and class card styles */
+.race-card, .class-card {
     transition: all 0.3s ease;
 }
-.class-card:hover {
+.race-card:hover, .class-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
-}
+}
+
+/* DOC file upload styling */
+input[type="file"][accept*=".doc"] + span::after {
+    content: " (DOC/DOCX)";
+    font-size: 0.8em;
+    color: #6b7280;
+}