Add 1 files

index.html

@@ -43,12 +43,45 @@
             padding: 0 1rem;
         }
 
+        .controls {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 2rem;
+            flex-wrap: wrap;
+            gap: 1rem;
+        }
+
         .era-navigation {
             display: flex;
             justify-content: center;
-            margin-bottom: 2rem;
             flex-wrap: wrap;
             gap: 0.5rem;
+            flex-grow: 1;
+        }
+
+        .add-tech-btn {
+            padding: 0.8rem 1.5rem;
+            border: none;
+            border-radius: 30px;
+            font-weight: bold;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+            background-color: #9d4edd;
+            color: white;
+            font-size: 0.9rem;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .add-tech-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+            background-color: #7b2cbf;
         }
 
         .era-button {
@@ -266,6 +299,124 @@
             color: #888;
         }
 
+        .add-node-form {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: white;
+            padding: 2rem;
+            border-radius: 12px;
+            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
+            z-index: 100;
+            max-width: 400px;
+            display: none;
+        }
+
+        .add-node-form h2 {
+            margin-bottom: 1.5rem;
+            color: #444;
+        }
+
+        .form-group {
+            margin-bottom: 1rem;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 0.5rem;
+            font-weight: bold;
+            color: #555;
+        }
+
+        .form-group input, 
+        .form-group select, 
+        .form-group textarea {
+            width: 100%;
+            padding: 0.8rem;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            font-family: inherit;
+        }
+
+        .form-group textarea {
+            min-height: 100px;
+            resize: vertical;
+        }
+
+        .form-actions {
+            display: flex;
+            justify-content: flex-end;
+            gap: 0.8rem;
+            margin-top: 1.5rem;
+        }
+
+        .form-actions button {
+            padding: 0.8rem 1.5rem;
+            border: none;
+            border-radius: 6px;
+            cursor: pointer;
+            font-weight: bold;
+        }
+
+        .form-cancel {
+            background-color: #f0f0f0;
+            color: #555;
+        }
+
+        .form-submit {
+            background-color: #9d4edd;
+            color: white;
+        }
+
+        .checkbox-group {
+            margin-top: 0.5rem;
+        }
+
+        .checkbox-item {
+            display: flex;
+            align-items: center;
+            margin-bottom: 0.5rem;
+        }
+
+        .checkbox-item input {
+            width: auto;
+            margin-right: 0.5rem;
+        }
+
+        .icon-selector {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 0.5rem;
+            margin-top: 0.5rem;
+        }
+
+        .icon-option {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 0.5rem;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .icon-option:hover {
+            border-color: #9d4edd;
+            background-color: #f9f0ff;
+        }
+
+        .icon-option.selected {
+            border-color: #9d4edd;
+            background-color: #f0d6ff;
+        }
+
+        .icon-option i {
+            font-size: 1.5rem;
+            margin-bottom: 0.3rem;
+        }
+
         footer {
             text-align: center;
             padding: 2rem 0;
@@ -293,6 +444,81 @@
             left: 0;
             transition: width 0.5s ease-in-out;
         }
+
+        /* Drag handle for nodes */
+        .drag-handle {
+            position: absolute;
+            top: -5px;
+            right: -5px;
+            width: 20px;
+            height: 20px;
+            background-color: rgba(255, 255, 255, 0.8);
+            border-radius: 50%;
+            border: 1px solid #ccc;
+            cursor: move;
+            display: none;
+            z-index: 30;
+            font-size: 0.7rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #555;
+        }
+
+        .tech-node.editable .drag-handle {
+            display: flex;
+        }
+
+        .delete-node {
+            position: absolute;
+            top: -5px;
+            left: -5px;
+            width: 20px;
+            height: 20px;
+            background-color: #ff6b6b;
+            border-radius: 50%;
+            cursor: pointer;
+            display: none;
+            z-index: 30;
+            font-size: 0.7rem;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            opacity: 0;
+            transition: opacity 0.2s;
+        }
+
+        .tech-node.editable:hover .delete-node {
+            opacity: 1;
+        }
+
+        .editable-mode {
+            border: 2px dashed #9d4edd;
+        }
+
+        .toggle-edit-mode {
+            padding: 0.8rem 1.5rem;
+            border: none;
+            border-radius: 30px;
+            font-weight: bold;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+            font-size: 0.9rem;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            background-color: #ff6b6b;
+            color: white;
+        }
+
+        .toggle-edit-mode:hover {
+            background-color: #ff5252;
+        }
+
+        .toggle-edit-mode.active {
+            background-color: #4CAF50;
+        }
     </style>
 </head>
 <body>
@@ -305,16 +531,24 @@
     </header>
 
     <div class="container">
-        <div class="era-navigation">
-            <button class="era-button era-ancient">Ancient</button>
-            <button class="era-button era-classical">Classical</button>
-            <button class="era-button era-medieval">Medieval</button>
-            <button class="era-button era-industrial">Industrial</button>
-            <button class="era-button era-modern">Modern</button>
-            <button class="era-button era-future">Future</button>
+        <div class="controls">
+            <div class="era-navigation">
+                <button class="era-button era-ancient">Ancient</button>
+                <button class="era-button era-classical">Classical</button>
+                <button class="era-button era-medieval">Medieval</button>
+                <button class="era-button era-industrial">Industrial</button>
+                <button class="era-button era-modern">Modern</button>
+                <button class="era-button era-future">Future</button>
+            </div>
+            <button class="add-tech-btn" id="addTechBtn">
+                <i class="fas fa-plus"></i> Add Technology
+            </button>
+            <button class="toggle-edit-mode" id="toggleEditMode">
+                Edit Mode: OFF
+            </button>
         </div>
 
-        <div class="tech-tree-container">
+        <div class="tech-tree-container" id="techTreeContainer">
             <div class="era-labels">
                 <div>4000 BCE</div>
                 <div>500 BCE</div>
@@ -324,11 +558,12 @@
                 <div>Future</div>
             </div>
             <div class="tech-tree" id="techTree">
-                <!-- Connections will be added via JavaScript -->
+                <!-- Connections and nodes will be added via JavaScript -->
             </div>
         </div>
     </div>
 
+    <!-- Technology Details Popup -->
     <div class="node-popup" id="nodePopup">
         <span class="close-popup">&times;</span>
         <h3 id="popupTitle">Technology Name</h3>
@@ -337,6 +572,53 @@
         <div class="prerequisites" id="popupPrereqs">Prerequisites: None</div>
     </div>
 
+    <!-- Add Technology Form -->
+    <div class="add-node-form" id="addNodeForm">
+        <h2>Add New Technology</h2>
+        <form id="techForm">
+            <div class="form-group">
+                <label for="techName">Technology Name</label>
+                <input type="text" id="techName" required placeholder="e.g., Quantum Computing">
+            </div>
+
+            <div class="form-group">
+                <label for="techEra">Era</label>
+                <select id="techEra" required>
+                    <option value="ancient">Ancient</option>
+                    <option value="classical">Classical</option>
+                    <option value="medieval">Medieval</option>
+                    <option value="industrial">Industrial</option>
+                    <option value="modern">Modern</option>
+                    <option value="future">Future</option>
+                </select>
+            </div>
+
+            <div class="form-group">
+                <label for="techIcon">Icon</label>
+                <div class="icon-selector" id="iconSelector">
+                    <!-- Icons will be added via JavaScript -->
+                </div>
+            </div>
+
+            <div class="form-group">
+                <label for="techDescription">Description</label>
+                <textarea id="techDescription" required placeholder="Describe the technology and its significance..."></textarea>
+            </div>
+
+            <div class="form-group">
+                <label>Prerequisites</label>
+                <div class="checkbox-group" id="prerequisiteCheckboxes">
+                    <!-- Checkboxes will be added via JavaScript -->
+                </div>
+            </div>
+
+            <div class="form-actions">
+                <button type="button" class="form-cancel" id="cancelForm">Cancel</button>
+                <button type="submit" class="form-submit">Add Technology</button>
+            </div>
+        </form>
+    </div>
+
     <footer>
         <p>Explore the technological advancements that shaped human civilization</p>
     </footer>
@@ -344,189 +626,141 @@
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             const techTree = document.getElementById('techTree');
+            const techTreeContainer = document.getElementById('techTreeContainer');
             const nodePopup = document.getElementById('nodePopup');
             const closePopup = document.querySelector('.close-popup');
             const techPath = document.getElementById('techPath');
+            const addTechBtn = document.getElementById('addTechBtn');
+            const addNodeForm = document.getElementById('addNodeForm');
+            const techForm = document.getElementById('techForm');
+            const cancelForm = document.getElementById('cancelForm');
+            const iconSelector = document.getElementById('iconSelector');
+            const prerequisiteCheckboxes = document.getElementById('prerequisiteCheckboxes');
+            const toggleEditMode = document.getElementById('toggleEditMode');
             
-            // Technology data
-            const techData = [
-                // Ancient Era
-                {
-                    id: 1,
-                    name: "Fire",
-                    era: "ancient",
-                    icon: "fas fa-fire",
-                    description: "Mastery of fire allowed for cooking, warmth, protection and became the foundation for later metallurgy and energy technologies.",
-                    x: 100,
-                    y: 100,
-                    prerequisites: []
-                },
-                {
-                    id: 2,
-                    name: "Wheel",
-                    era: "ancient",
-                    icon: "fas fa-wheel",
-                    description: "The invention of the wheel revolutionized transportation and mechanical applications, enabling carts, potter's wheels, and later complex machinery.",
-                    x: 300,
-                    y: 100,
-                    prerequisites: []
-                },
-                {
-                    id: 3,
-                    name: "Agriculture",
-                    era: "ancient",
-                    icon: "fas fa-seedling",
-                    description: "The domestication of plants led to settled communities, food surplus, and the development of complex societies and specialization.",
-                    x: 500,
-                    y: 100,
-                    prerequisites: [1] // Requires Fire
-                },
-                
-                // Classical Era
-                {
-                    id: 4,
-                    name: "Writing",
-                    era: "classical",
-                    icon: "fas fa-book",
-                    description: "The development of writing systems enabled permanent records, complex communication, and the accumulation of knowledge across generations.",
-                    x: 200,
-                    y: 220,
-                    prerequisites: [3] // Requires Agriculture
-                },
-                {
-                    id: 5,
-                    name: "Mathematics",
-                    era: "classical",
-                    icon: "fas fa-square-root-alt",
-                    description: "Abstract numerical systems allowed for calculations, engineering, astronomy, and became foundational for all future scientific progress.",
-                    x: 400,
-                    y: 220,
-                    prerequisites: [4] // Requires Writing
-                },
-                {
-                    id: 6,
-                    name: "Metalworking",
-                    era: "classical",
-                    icon: "fas fa-hammer",
-                    description: "Advanced techniques in smelting and forging enabled better tools, weapons, and the beginning of mechanical engineering principles.",
-                    x: 600,
-                    y: 220,
-                    prerequisites: [1] // Requires Fire
-                },
-                
-                // Medieval Era
-                {
-                    id: 7,
-                    name: "Printing Press",
-                    era: "medieval",
-                    icon: "fas fa-print",
-                    description: "Movable type printing revolutionized knowledge dissemination, making books affordable and enabling mass literacy and education.",
-                    x: 300,
-                    y: 340,
-                    prerequisites: [4] // Requires Writing
-                },
-                {
-                    id: 8,
-                    name: "Compass",
-                    era: "medieval",
-                    icon: "fas fa-compass",
-                    description: "Magnetic navigation enabled accurate long-distance sea travel, global exploration, and the connection of world civilizations.",
-                    x: 500,
-                    y: 340,
-                    prerequisites: [5, 6] // Requires Mathematics and Metalworking
-                },
-                
-                // Industrial Era
-                {
-                    id: 9,
-                    name: "Steam Engine",
-                    era: "industrial",
-                    icon: "fas fa-train",
-                    description: "The practical application of steam power drove the Industrial Revolution, transforming manufacturing and transportation.",
-                    x: 200,
-                    y: 460,
-                    prerequisites: [5, 6] // Requires Mathematics and Metalworking
-                },
-                {
-                    id: 10,
-                    name: "Electricity",
-                    era: "industrial",
-                    icon: "fas fa-bolt",
-                    description: "Harnessing electromagnetic energy revolutionized nearly every aspect of life from lighting to communication to manufacturing.",
-                    x: 400,
-                    y: 460,
-                    prerequisites: [5] // Requires Mathematics
-                },
-                {
-                    id: 11,
-                    name: "Telegraph",
-                    era: "industrial",
-                    icon: "fas fa-satellite-dish",
-                    description: "Electrical communication over distance shrank the world, enabling near-instant information transfer across continents.",
-                    x: 600,
-                    y: 460,
-                    prerequisites: [10] // Requires Electricity
-                },
-                
-                // Modern Era
-                {
-                    id: 12,
-                    name: "Automobile",
-                    era: "modern",
-                    icon: "fas fa-car",
-                    description: "Combustion-powered personal transportation reshaped cities, economies, and global mobility patterns.",
-                    x: 200,
-                    y: 580,
-                    prerequisites: [9, 10] // Requires Steam Engine and Electricity
-                },
-                {
-                    id: 13,
-                    name: "Aeroplane",
-                    era: "modern",
-                    icon: "fas fa-plane",
-                    description: "Powered flight revolutionized global travel, warfare, and connected the world in unprecedented ways.",
-                    x: 400,
-                    y: 580,
-                    prerequisites: [10, 11] // Requires Electricity and Telegraph
-                },
-                {
-                    id: 14,
-                    name: "Computers",
-                    era: "modern",
-                    icon: "fas fa-computer",
-                    description: "Digital computing machines automated complex calculations, information processing, and later became universal tools.",
-                    x: 600,
-                    y: 580,
-                    prerequisites: [5, 10] // Requires Mathematics and Electricity
-                },
-                
-                // Future Era
-                {
-                    id: 15,
-                    name: "Internet",
-                    era: "future",
-                    icon: "fas fa-network-wired",
-                    description: "Global digital communication network enabling instant access to information and connecting humanity like never before.",
-                    x: 400,
-                    y: 700,
-                    prerequisites: [13, 14] // Requires Aeroplane and Computers
-                },
-                {
-                    id: 16,
-                    name: "AI",
-                    era: "future",
-                    icon: "fas fa-robot",
-                    description: "Artificial intelligence systems capable of learning, pattern recognition, and performing tasks once requiring human intelligence.",
-                    x: 600,
-                    y: 700,
-                    prerequisites: [14] // Requires Computers
-                }
+            let editMode = false;
+            let selectedIcon = 'fas fa-question';
+            let techData = [];
+            let nextId = 1;
+            let draggingNode = null;
+            let offsetX, offsetY;
+
+            // Common Font Awesome icons for technologies
+            const commonIcons = [
+                'fas fa-fire', 'fas fa-wheel', 'fas fa-seedling', 'fas fa-book',
+                'fas fa-square-root-alt', 'fas fa-hammer', 'fas fa-print',
+                'fas fa-compass', 'fas fa-train', 'fas fa-bolt', 'fas fa-satellite-dish',
+                'fas fa-car', 'fas fa-plane', 'fas fa-computer', 'fas fa-network-wired',
+                'fas fa-robot', 'fas fa-atom', 'fas fa-dna', 'fas fa-rocket',
+                'fas fa-microchip', 'fas fa-brain', 'fas fa-vr-cardboard',
+                'fas fa-biohazard', 'fas fa-solar-panel', 'fas fa-wind', 'fas fa-eye'
             ];
 
-            // Draw the technology nodes
-            techData.forEach(tech => {
+            // Initialize with some default technologies
+            initializeTechData();
+
+            // Draw the initial technology tree
+            drawTechTree();
+
+            // Technology data initialization
+            function initializeTechData() {
+                techData = [
+                    // Ancient Era
+                    {
+                        id: nextId++,
+                        name: "Fire",
+                        era: "ancient",
+                        icon: "fas fa-fire",
+                        description: "Mastery of fire allowed for cooking, warmth, protection and became the foundation for later metallurgy and energy technologies.",
+                        x: 100,
+                        y: 100,
+                        prerequisites: []
+                    },
+                    {
+                        id: nextId++,
+                        name: "Wheel",
+                        era: "ancient",
+                        icon: "fas fa-wheel",
+                        description: "The invention of the wheel revolutionized transportation and mechanical applications, enabling carts, potter's wheels, and later complex machinery.",
+                        x: 300,
+                        y: 100,
+                        prerequisites: []
+                    },
+                    {
+                        id: nextId++,
+                        name: "Agriculture",
+                        era: "ancient",
+                        icon: "fas fa-seedling",
+                        description: "The domestication of plants led to settled communities, food surplus, and the development of complex societies and specialization.",
+                        x: 500,
+                        y: 100,
+                        prerequisites: [1] // Requires Fire
+                    },
+                    
+                    // Classical Era
+                    {
+                        id: nextId++,
+                        name: "Writing",
+                        era: "classical",
+                        icon: "fas fa-book",
+                        description: "The development of writing systems enabled permanent records, complex communication, and the accumulation of knowledge across generations.",
+                        x: 200,
+                        y: 220,
+                        prerequisites: [3] // Requires Agriculture
+                    },
+                    {
+                        id: nextId++,
+                        name: "Mathematics",
+                        era: "classical",
+                        icon: "fas fa-square-root-alt",
+                        description: "Abstract numerical systems allowed for calculations, engineering, astronomy, and became foundational for all future scientific progress.",
+                        x: 400,
+                        y: 220,
+                        prerequisites: [4] // Requires Writing
+                    },
+                    {
+                        id: nextId++,
+                        name: "Metalworking",
+                        era: "classical",
+                        icon: "fas fa-hammer",
+                        description: "Advanced techniques in smelting and forging enabled better tools, weapons, and the beginning of mechanical engineering principles.",
+                        x: 600,
+                        y: 220,
+                        prerequisites: [1] // Requires Fire
+                    }
+                ];
+            }
+
+            // Draw the entire technology tree
+            function drawTechTree() {
+                // Clear existing nodes and connections
+                techTree.innerHTML = '';
+                
+                // Draw connections first (so nodes appear on top)
+                techData.forEach(tech => {
+                    if (tech.prerequisites && tech.prerequisites.length) {
+                        tech.prerequisites.forEach(prereqId => {
+                            const prereqTech = techData.find(t => t.id === prereqId);
+                            if (prereqTech) {
+                                drawConnection(
+                                    prereqTech.x + 50, prereqTech.y + 50, // source (center of circle)
+                                    tech.x + 50, tech.y + 50 // target
+                                );
+                            }
+                        });
+                    }
+                });
+
+                // Draw the technology nodes
+                techData.forEach(tech => {
+                    createTechNode(tech);
+                });
+            }
+
+            // Create a single technology node
+            function createTechNode(tech) {
                 const node = document.createElement('div');
-                node.className = `tech-node ${tech.era}`;
+                node.className = `tech-node ${tech.era} ${editMode ? 'editable' : ''}`;
                 node.style.left = `${tech.x}px`;
                 node.style.top = `${tech.y}px`;
                 node.dataset.id = tech.id;
@@ -537,49 +771,135 @@
                     </div>
                     <div class="tech-name">${tech.name}</div>
                     <div class="tech-era">${tech.era.charAt(0).toUpperCase() + tech.era.slice(1)}</div>
+                    <div class="drag-handle">↔</div>
+                    <div class="delete-node" title="Delete technology">×</div>
                 `;
                 
                 // Add click event for popup
-                node.addEventListener('click', () => {
-                    document.getElementById('popupTitle').textContent = tech.name;
-                    document.getElementById('popupEra').textContent = 
-                        `${tech.era.charAt(0).toUpperCase() + tech.era.slice(1)} Era`;
-                    document.getElementById('popupDescription').textContent = tech.description;
-                    
-                    if (tech.prerequisites && tech.prerequisites.length) {
-                        const prereqNames = tech.prerequisites.map(id => 
-                            techData.find(t => t.id === id).name
-                        ).join(', ');
-                        document.getElementById('popupPrereqs').textContent = 
-                            `Prerequisites: ${prereqNames}`;
-                    } else {
-                        document.getElementById('popupPrereqs').textContent = 
-                            'Prerequisites: None (starting technology)';
+                node.addEventListener('click', (e) => {
+                    // If we're dragging or clicking on the drag handle, don't show the popup
+                    if (draggingNode || e.target.classList.contains('drag-handle') || e.target.classList.contains('delete-node')) {
+                        return;
                     }
                     
-                    nodePopup.style.display = 'block';
+                    showTechPopup(tech);
                     
                     // Animate the tech path
                     animateTechPath(tech.era);
                 });
                 
+                // Add delete functionality
+                const deleteBtn = node.querySelector('.delete-node');
+                deleteBtn.addEventListener('click', () => {
+                    if (confirm(`Are you sure you want to delete "${tech.name}"? This cannot be undone.`)) {
+                        // Remove this tech from any prerequisite lists
+                        techData.forEach(t => {
+                            if (t.prerequisites && t.prerequisites.includes(tech.id)) {
+                                t.prerequisites = t.prerequisites.filter(id => id !== tech.id);
+                            }
+                        });
+                        
+                        // Remove the tech
+                        techData = techData.filter(t => t.id !== tech.id);
+                        
+                        // Redraw the tree
+                        drawTechTree();
+                    }
+                });
+                
+                // Dragging functionality
+                const dragHandle = node.querySelector('.drag-handle');
+                
+                dragHandle.addEventListener('mousedown', startDrag);
+                node.addEventListener('mousedown', startDrag);
+                
+                function startDrag(e) {
+                    if (!editMode) return;
+                    
+                    // Don't drag if clicking on the delete button
+                    if (e.target.classList.contains('delete-node')) {
+                        return;
+                    }
+                    
+                    e.preventDefault();
+                    draggingNode = node;
+                    
+                    // Calculate offset from mouse to node position
+                    const rect = node.getBoundingClientRect();
+                    offsetX = e.clientX - rect.left;
+                    offsetY = e.clientY - rect.top;
+                    
+                    // Set the node to absolute positioning (if not already)
+                    node.style.position = 'absolute';
+                    
+                    // Move the node to the front
+                    node.style.zIndex = '1000';
+                    
+                    document.addEventListener('mousemove', dragNode);
+                    document.addEventListener('mouseup', stopDrag);
+                }
+                
+                function dragNode(e) {
+                    if (!draggingNode) return;
+                    
+                    // Calculate new position
+                    const containerRect = techTreeContainer.getBoundingClientRect();
+                    let newX = e.clientX - containerRect.left - offsetX;
+                    let newY = e.clientY - containerRect.top - offsetY;
+                    
+                    // Constrain movement within container
+                    newX = Math.max(0, Math.min(newX, techTreeContainer.scrollWidth - 100));
+                    newY = Math.max(0, Math.min(newY, techTreeContainer.scrollHeight - 100));
+                    
+                    // Update node position
+                    node.style.left = `${newX}px`;
+                    node.style.top = `${newY}px`;
+                    
+                    // Update position in the tech data
+                    const techId = parseInt(node.dataset.id);
+                    const tech = techData.find(t => t.id === techId);
+                    if (tech) {
+                        tech.x = newX;
+                        tech.y = newY;
+                    }
+                    
+                    // Redraw connections
+                    redrawConnections();
+                }
+                
+                function stopDrag() {
+                    if (!draggingNode) return;
+                    
+                    draggingNode.style.zIndex = '10';
+                    draggingNode = null;
+                    document.removeEventListener('mousemove', dragNode);
+                    document.removeEventListener('mouseup', stopDrag);
+                }
+                
                 techTree.appendChild(node);
-            });
+            }
 
-            // Draw connections between technologies
-            techData.forEach(tech => {
-                if (tech.prerequisites && tech.prerequisites.length) {
-                    tech.prerequisites.forEach(prereqId => {
-                        const prereqTech = techData.find(t => t.id === prereqId);
-                        if (prereqTech) {
-                            drawConnection(
-                                prereqTech.x + 50, prereqTech.y + 50, // source (center of circle)
-                                tech.x + 50, tech.y + 50 // target
-                            );
-                        }
-                    });
-                }
-            });
+            // Redraw just the connections (more efficient than redrawing the whole tree)
+            function redrawConnections() {
+                // Remove all connection elements
+                const connections = document.querySelectorAll('.connection');
+                connections.forEach(c => c.remove());
+                
+                // Redraw all connections
+                techData.forEach(tech => {
+                    if (tech.prerequisites && tech.prerequisites.length) {
+                        tech.prerequisites.forEach(prereqId => {
+                            const prereqTech = techData.find(t => t.id === prereqId);
+                            if (prereqTech) {
+                                drawConnection(
+                                    prereqTech.x + 50, prereqTech.y + 50,
+                                    tech.x + 50, tech.y + 50
+                                );
+                            }
+                        });
+                    }
+                });
+            }
 
             // Function to draw a connection line between two points
             function drawConnection(x1, y1, x2, y2) {
@@ -602,6 +922,28 @@
                 techTree.insertBefore(line, techTree.firstChild);
             }
 
+            // Show technology details popup
+            function showTechPopup(tech) {
+                document.getElementById('popupTitle').textContent = tech.name;
+                document.getElementById('popupEra').textContent = 
+                    `${tech.era.charAt(0).toUpperCase() + tech.era.slice(1)} Era`;
+                document.getElementById('popupDescription').textContent = tech.description;
+                
+                if (tech.prerequisites && tech.prerequisites.length) {
+                    const prereqNames = tech.prerequisites.map(id => {
+                        const prereq = techData.find(t => t.id === id);
+                        return prereq ? prereq.name : 'Unknown Technology';
+                    }).join(', ');
+                    document.getElementById('popupPrereqs').textContent = 
+                        `Prerequisites: ${prereqNames}`;
+                } else {
+                    document.getElementById('popupPrereqs').textContent = 
+                        'Prerequisites: None (starting technology)';
+                }
+                
+                nodePopup.style.display = 'block';
+            }
+
             // Close popup when clicking the X
             closePopup.addEventListener('click', () => {
                 nodePopup.style.display = 'none';
@@ -614,16 +956,138 @@
                 }
             });
 
+            // Show add technology form
+            addTechBtn.addEventListener('click', () => {
+                // Populate icon selector
+                iconSelector.innerHTML = '';
+                commonIcons.forEach(icon => {
+                    const iconOption = document.createElement('div');
+                    iconOption.className = `icon-option ${icon === selectedIcon ? 'selected' : ''}`;
+                    iconOption.dataset.icon = icon;
+                    iconOption.innerHTML = `<i class="${icon}"></i>`;
+                    
+                    iconOption.addEventListener('click', () => {
+                        selectedIcon = icon;
+                        document.querySelectorAll('.icon-option').forEach(opt => {
+                            opt.classList.remove('selected');
+                        });
+                        iconOption.classList.add('selected');
+                    });
+                    
+                    iconSelector.appendChild(iconOption);
+                });
+                
+                // Populate prerequisite checkboxes
+                prerequisiteCheckboxes.innerHTML = '';
+                techData.forEach(tech => {
+                    const checkboxItem = document.createElement('div');
+                    checkboxItem.className = 'checkbox-item';
+                    
+                    const checkbox = document.createElement('input');
+                    checkbox.type = 'checkbox';
+                    checkbox.id = `prereq-${tech.id}`;
+                    checkbox.value = tech.id;
+                    
+                    const label = document.createElement('label');
+                    label.htmlFor = `prereq-${tech.id}`;
+                    label.textContent = tech.name;
+                    
+                    checkboxItem.appendChild(checkbox);
+                    checkboxItem.appendChild(label);
+                    prerequisiteCheckboxes.appendChild(checkboxItem);
+                });
+                
+                // Show the form
+                addNodeForm.style.display = 'block';
+            });
+
+            // Close add technology form
+            cancelForm.addEventListener('click', () => {
+                addNodeForm.style.display = 'none';
+                techForm.reset();
+            });
+
+            // Submit new technology
+            techForm.addEventListener('submit', (e) => {
+                e.preventDefault();
+                
+                const name = document.getElementById('techName').value;
+                const era = document.getElementById('techEra').value;
+                const description = document.getElementById('techDescription').value;
+                
+                // Get selected prerequisites
+                const prerequisites = [];
+                document.querySelectorAll('#prerequisiteCheckboxes input:checked').forEach(checkbox => {
+                    prerequisites.push(parseInt(checkbox.value));
+                });
+                
+                // Determine default position based on era
+                let x, y;
+                switch(era) {
+                    case 'ancient':
+                        x = 100 + (techData.filter(t => t.era === 'ancient').length * 200);
+                        y = 100;
+                        break;
+                    case 'classical':
+                        x = 200 + (techData.filter(t => t.era === 'classical').length * 200);
+                        y = 220;
+                        break;
+                    case 'medieval':
+                        x = 300 + (techData.filter(t => t.era === 'medieval').length * 200);
+                        y = 340;
+                        break;
+                    case 'industrial':
+                        x = 200 + (techData.filter(t => t.era === 'industrial').length * 200);
+                        y = 460;
+                        break;
+                    case 'modern':
+                        x = 200 + (techData.filter(t => t.era === 'modern').length * 200);
+                        y = 580;
+                        break;
+                    case 'future':
+                        x = 400 + (techData.filter(t => t.era === 'future').length * 200);
+                        y = 700;
+                        break;
+                    default:
+                        x = 100;
+                        y = 100;
+                }
+                
+                // Create the new tech
+                const newTech = {
+                    id: nextId++,
+                    name,
+                    era,
+                    icon: selectedIcon,
+                    description,
+                    x,
+                    y,
+                    prerequisites
+                };
+                
+                // Add to our data
+                techData.push(newTech);
+                
+                // Redraw the tree
+                drawTechTree();
+                
+                // Close and reset the form
+                addNodeForm.style.display = 'none';
+                techForm.reset();
+            });
+
             // Era button functionality
             document.querySelectorAll('.era-button').forEach(button => {
                 button.addEventListener('click', () => {
                     const era = button.textContent.toLowerCase();
                     
                     // Simple animation - we could enhance this with smooth scrolling
-                    document.querySelector('.tech-tree-container').scrollTo({
+                    techTreeContainer.scrollTo({
                         left: getScrollPositionForEra(era),
                         behavior: 'smooth'
                     });
+                    
+                    animateTechPath(era);
                 });
             });
 
@@ -645,9 +1109,54 @@
                 techPath.style.width = `${width}%`;
             }
 
+            // Toggle edit mode
+            toggleEditMode.addEventListener('click', () => {
+                editMode = !editMode;
+                
+                if (editMode) {
+                    toggleEditMode.textContent = 'Edit Mode: ON';
+                    toggleEditMode.classList.add('active');
+                    techTreeContainer.classList.add('editable-mode');
+                    
+                    // Show all drag handles and delete buttons
+                    document.querySelectorAll('.tech-node').forEach(node => {
+                        node.classList.add('editable');
+                    });
+                } else {
+                    toggleEditMode.textContent = 'Edit Mode: OFF';
+                    toggleEditMode.classList.remove('active');
+                    techTreeContainer.classList.remove('editable-mode');
+                    
+                    // Hide all drag handles and delete buttons
+                    document.querySelectorAll('.tech-node').forEach(node => {
+                        node.classList.remove('editable');
+                    });
+                    
+                    // Stop any active dragging
+                    if (draggingNode) {
+                        draggingNode = null;
+                        document.removeEventListener('mousemove', dragNode);
+                        document.removeEventListener('mouseup', stopDrag);
+                    }
+                }
+            });
+
             // Initial load - set to ancient era
             animateTechPath('ancient');
+            
+            // Add mousemove and mouseup handlers for the document
+            document.addEventListener('mousemove', (e) => {
+                if (draggingNode) {
+                    dragNode(e);
+                }
+            });
+            
+            document.addEventListener('mouseup', () => {
+                if (draggingNode) {
+                    stopDrag();
+                }
+            });
         });
     </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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
+</body>
 </html>