Add 1 files

index.html

@@ -273,35 +273,54 @@
             position: fixed;
             top: 50%;
             left: 50%;
-            transform: translate(-50%, -50%);
+            transform: translate(-50%, -50%) scale(0.9);
             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;
+            opacity: 0;
+            pointer-events: none;
+            transition: all 0.3s ease;
+        }
+
+        .node-popup.active {
+            transform: translate(-50%, -50%) scale(1);
+            opacity: 1;
+            pointer-events: auto;
         }
 
         .node-popup h3 {
             margin-bottom: 0.5rem;
             color: #444;
+            font-size: 1.5rem;
         }
 
         .node-popup .era {
             font-size: 0.9rem;
             margin-bottom: 1rem;
             font-weight: bold;
+            padding: 0.3rem 0.8rem;
+            background-color: #f0f0f0;
+            display: inline-block;
+            border-radius: 20px;
+            color: #555;
         }
 
         .node-popup .description {
             margin-bottom: 1.5rem;
             line-height: 1.6;
+            color: #555;
         }
 
         .node-popup .prerequisites {
             font-size: 0.9rem;
             color: #666;
+            padding: 0.8rem;
+            background-color: #f8f8f8;
+            border-radius: 6px;
+            border-left: 3px solid #9d4edd;
         }
 
         .close-popup {
@@ -311,66 +330,101 @@
             font-size: 1.5rem;
             cursor: pointer;
             color: #888;
+            transition: all 0.2s;
+        }
+
+        .close-popup:hover {
+            color: #333;
+            transform: rotate(90deg);
         }
 
         .add-node-form {
             position: fixed;
             top: 50%;
             left: 50%;
-            transform: translate(-50%, -50%);
+            transform: translate(-50%, -50%) scale(0.9);
             background: white;
-            padding: 2rem;
+            padding: 1rem;
             border-radius: 12px;
             box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
             z-index: 100;
-            max-width: 400px;
-            display: none;
+            width: 90%;
+            max-height: 80vh;
+            overflow-y: auto;
+            max-width: 320px;
+            opacity: 0;
+            pointer-events: none;
+            transition: all 0.3s ease;
+        }
+
+        .add-node-form.active {
+            transform: translate(-50%, -50%) scale(1);
+            opacity: 1;
+            pointer-events: auto;
         }
 
         .add-node-form h2 {
-            margin-bottom: 1.5rem;
+            margin-bottom: 0.8rem;
             color: #444;
+            font-size: 1.1rem;
+            padding-bottom: 0.5rem;
+            border-bottom: 1px solid #eee;
         }
 
         .form-group {
-            margin-bottom: 1rem;
+            margin-bottom: 0.6rem;
         }
 
         .form-group label {
             display: block;
-            margin-bottom: 0.5rem;
+            margin-bottom: 0.2rem;
             font-weight: bold;
             color: #555;
+            font-size: 0.8rem;
         }
 
         .form-group input, 
         .form-group select, 
         .form-group textarea {
             width: 100%;
-            padding: 0.8rem;
+            padding: 0.5rem;
             border: 1px solid #ddd;
             border-radius: 6px;
             font-family: inherit;
+            font-size: 0.8rem;
+            transition: all 0.2s;
+        }
+
+        .form-group input:focus, 
+        .form-group select:focus, 
+        .form-group textarea:focus {
+            border-color: #9d4edd;
+            outline: none;
+            box-shadow: 0 0 0 3px rgba(157, 78, 221, 0.2);
         }
 
         .form-group textarea {
-            min-height: 100px;
+            min-height: 60px;
             resize: vertical;
         }
 
         .form-actions {
             display: flex;
             justify-content: flex-end;
-            gap: 0.8rem;
-            margin-top: 1.5rem;
+            gap: 0.6rem;
+            margin-top: 0.8rem;
+            padding-top: 0.8rem;
+            border-top: 1px solid #eee;
         }
 
         .form-actions button {
-            padding: 0.8rem 1.5rem;
+            padding: 0.5rem 1rem;
             border: none;
             border-radius: 6px;
             cursor: pointer;
             font-weight: bold;
+            font-size: 0.8rem;
+            transition: all 0.2s;
         }
 
         .form-cancel {
@@ -378,42 +432,71 @@
             color: #555;
         }
 
+        .form-cancel:hover {
+            background-color: #e0e0e0;
+        }
+
         .form-submit {
             background-color: #9d4edd;
             color: white;
         }
 
+        .form-submit:hover {
+            background-color: #7b2cbf;
+        }
+
         .checkbox-group {
-            margin-top: 0.5rem;
+            margin-top: 0.3rem;
+            max-height: 100px;
+            overflow-y: auto;
+            border: 1px solid #eee;
+            padding: 0.3rem;
+            border-radius: 4px;
+            font-size: 0.75rem;
         }
 
         .checkbox-item {
             display: flex;
             align-items: center;
-            margin-bottom: 0.5rem;
+            margin-bottom: 0.2rem;
+            font-size: 0.75rem;
+            padding: 0.2rem;
+            border-radius: 3px;
+            transition: all 0.2s;
+        }
+
+        .checkbox-item:hover {
+            background-color: #f5f5f5;
         }
 
         .checkbox-item input {
             width: auto;
-            margin-right: 0.5rem;
+            margin-right: 0.3rem;
+            accent-color: #9d4edd;
         }
 
         .icon-selecter {
             display: grid;
             grid-template-columns: repeat(4, 1fr);
-            gap: 0.5rem;
-            margin-top: 0.5rem;
+            gap: 0.3rem;
+            margin-top: 0.3rem;
+            max-height: 120px;
+            overflow-y: auto;
+            padding: 0.3rem;
+            border: 1px solid #eee;
+            border-radius: 4px;
         }
 
         .icon-option {
             display: flex;
             flex-direction: column;
             align-items: center;
-            padding: 0.5rem;
+            padding: 0.3rem;
             border: 1px solid #ddd;
             border-radius: 4px;
             cursor: pointer;
             transition: all 0.2s;
+            font-size: 0.7rem;
         }
 
         .icon-option:hover {
@@ -427,8 +510,8 @@
         }
 
         .icon-option i {
-            font-size: 1.5rem;
-            margin-bottom: 0.3rem;
+            font-size: 1rem;
+            margin-bottom: 0.1rem;
         }
 
         footer {
@@ -534,50 +617,100 @@
         .toggle-edit-mode.active {
             background-color: #4CAF50;
         }
+
+        /* Additional styling for the controls section */
+        .controls-section {
+            background-color: white;
+            padding: 1rem;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            margin-bottom: 1rem;
+        }
+
+        .controls-title {
+            font-size: 0.9rem;
+            font-weight: bold;
+            color: #555;
+            margin-bottom: 0.5rem;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .controls-title i {
+            font-size: 1rem;
+        }
+
+        /* Animation for new nodes */
+        @keyframes nodeAppear {
+            0% {
+                transform: scale(0.5) rotate(0deg);
+                opacity: 0;
+            }
+            100% {
+                transform: scale(1) rotate(0deg);
+                opacity: 1;
+            }
+        }
+
+        .new-node {
+            animation: nodeAppear 0.3s ease-out forwards;
+        }
     </style>
 </head>
 <body>
     <header>
         <h1>Technology Evolution Tree</h1>
-        <div class="subtitle">Visualizing humanity's technological progress</div>
+        <div class="subtitle">Explore the progression of human innovation through history</div>
     </header>
 
     <div class="container">
         <div class="controls">
-            <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>
-            <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 class="controls-section">
+                <div class="controls-title"><i class="fas fa-clock"></i> Era Navigation</div>
+                <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>
+            </div>
+
+            <div class="controls-section">
+                <div class="controls-title"><i class="fas fa-cog"></i> Controls</div>
+                <button class="add-tech-btn" id="addTechBtn">
+                    <i class="fas fa-plus"></i> Add Technology
+                </button>
+                <button class="toggle-edit-mode" id="toggleEditMode">
+                    <i class="fas fa-edit"></i> Toggle Edit Mode
+                </button>
+            </div>
         </div>
 
         <div class="tech-tree-container" id="techTreeContainer">
-            <div class="timeline-bar">
-                <div class="tech-path" id="techPath"></div>
-            </div>
-            <div class="era-labels">
-                <div>Ancient (4000 BCE)</div>
-                <div>Classical (500 BCE)</div>
-                <div>Medieval (500 CE)</div>
-                <div>Industrial (1700 CE)</div>
-                <div>Modern (1900 CE)</div>
-                <div>Future</div>
-            </div>
-            <div class="era-line ancient-line"></div>
-            <div class="era-line classical-line"></div>
-            <div class="era-line medieval-line"></div>
-            <div class="era-line industrial-line"></div>
-            <div class="era-line modern-line"></div>
-            <div class="era-line future-line"></div>
             <div class="tech-tree" id="techTree">
-                <!-- Technology nodes and connections will be added via JavaScript -->
+                <!-- Era dividers -->
+                <div class="era-line ancient-line"></div>
+                <div class="era-line classical-line"></div>
+                <div class="era-line medieval-line"></div>
+                <div class="era-line industrial-line"></div>
+                <div class="era-line modern-line"></div>
+                <div class="era-line future-line"></div>
+
+                <div class="era-labels">
+                    <div>Ancient</div>
+                    <div>Classical</div>
+                    <div>Medieval</div>
+                    <div>Industrial</div>
+                    <div>Modern</div>
+                    <div>Future</div>
+                </div>
+
+                <div class="timeline-bar">
+                    <div class="tech-path"></div>
+                </div>
             </div>
         </div>
     </div>
@@ -614,7 +747,7 @@
 
             <div class="form-group">
                 <label for="techIcon">Icon</label>
-                <div class="icon-selector" id="iconSelector">
+                <div class="icon-selecter" id="iconSelector">
                     <!-- Icons will be added via JavaScript -->
                 </div>
             </div>
@@ -648,7 +781,7 @@
             const techTreeContainer = document.getElementById('techTreeContainer');
             const nodePopup = document.getElementById('nodePopup');
             const closePopup = document.querySelector('.close-popup');
-            const techPath = document.getElementById('techPath');
+            const techPath = document.querySelector('.tech-path');
             const addTechBtn = document.getElementById('addTechBtn');
             const addNodeForm = document.getElementById('addNodeForm');
             const techForm = document.getElementById('techForm');
@@ -657,14 +790,14 @@
             const prerequisiteCheckboxes = document.getElementById('prerequisiteCheckboxes');
             const toggleEditMode = document.getElementById('toggleEditMode');
             
-            let editMode = false;
             let selectedIcon = 'fas fa-question';
             let techData = [];
             let nextId = 1;
             let draggingNode = null;
             let offsetX, offsetY;
+            let isEditMode = false;
 
-            // Common Font Awesome icons for technologies
+            // Extended list of 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',
@@ -672,10 +805,16 @@
                 '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'
+                'fas fa-biohazard', 'fas fa-solar-panel', 'fas fa-wind', 'fas fa-eye',
+                'fas fa-bullseye', 'fas fa-tools', 'fas fa-flask', 'fas fa-microscope',
+                'fas fa-disease', 'fas fa-virus', 'fas fa-dove', 'fas fa-globe',
+                'fas fa-magnet', 'fas fa-lightbulb', 'fas fa-broadcast-tower',
+                'fas fa-satellite', 'fas fa-shield-alt', 'fas fa-cogs', 'fas fa-brain',
+                'fas fa-fan', 'fas fa-chart-line', 'fas fa-industry', 'fas fa-city',
+                'fas fa-battery-full', 'fas fa-cloud', 'fas fa-database'
             ];
 
-            // Initialize with some default technologies
+            // Initialize with robust technology data
             initializeTechData();
 
             // Draw the initial technology tree
@@ -684,14 +823,14 @@
             // Technology data initialization
             function initializeTechData() {
                 techData = [
-                    // Ancient Era (top: ~150px)
+                    // Ancient Era (4000 BCE - 500 BCE)
                     {
                         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: 200,
+                        x: 100,
                         y: 150,
                         prerequisites: []
                     },
@@ -701,7 +840,7 @@
                         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: 400,
+                        x: 300,
                         y: 150,
                         prerequisites: []
                     },
@@ -711,51 +850,71 @@
                         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: 600,
+                        x: 500,
                         y: 150,
                         prerequisites: [1] // Requires Fire
                     },
-                    
-                    // Classical Era (top: ~450px)
                     {
                         id: nextId++,
                         name: "Writing",
-                        era: "classical",
+                        era: "ancient",
                         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: 450,
+                        description: "Early writing systems like cuneiform and hieroglyphics emerged for record keeping, enabling complex administration and knowledge transmission.",
+                        x: 700,
+                        y: 150,
                         prerequisites: [3] // Requires Agriculture
                     },
+                    
+                    // Classical Era (500 BCE - 500 CE)
                     {
                         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,
+                        description: "Systematic development of mathematics including geometry, algebra, and number theory that became foundational for all sciences.",
+                        x: 100,
                         y: 450,
                         prerequisites: [4] // Requires Writing
                     },
+                    {
+                        id: nextId++,
+                        name: "Architecture",
+                        era: "classical",
+                        icon: "fas fa-archway",
+                        description: "Advanced techniques in construction enabled monumental buildings like temples, aqueducts and coliseums using arches, domes and concrete.",
+                        x: 300,
+                        y: 450,
+                        prerequisites: [5] // Requires Mathematics
+                    },
                     {
                         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,
+                        description: "Advanced techniques in smelting and forging enabled better tools, weapons, armor and the beginning of mechanical engineering.",
+                        x: 500,
                         y: 450,
                         prerequisites: [1] // Requires Fire
                     },
+                    {
+                        id: nextId++,
+                        name: "Currency",
+                        era: "classical",
+                        icon: "fas fa-coins",
+                        description: "Standardized coinage systems enabled complex trade networks and economic systems beyond simple barter.",
+                        x: 700,
+                        y: 450,
+                        prerequisites: [4, 3] // Requires Writing, Agriculture
+                    },
                     
-                    // Medieval Era (top: ~750px)
+                    // Medieval Era (500 CE - 1500 CE)
                     {
                         id: nextId++,
                         name: "Printing",
                         era: "medieval",
                         icon: "fas fa-print",
-                        description: "The printing press revolutionized information distribution, making books more accessible and enabling widespread literacy and education.",
-                        x: 300,
+                        description: "Movable type printing enabled mass production of books, spreading literacy and enabling the Renaissance and scientific revolution.",
+                        x: 100,
                         y: 750,
                         prerequisites: [4] // Requires Writing
                     },
@@ -764,66 +923,126 @@
                         name: "Compass",
                         era: "medieval",
                         icon: "fas fa-compass",
-                        description: "The magnetic compass enabled reliable navigation at sea, facilitating exploration, trade, and the exchange of ideas across continents.",
+                        description: "The magnetic compass enabled reliable navigation at sea, facilitating global exploration, trade and cultural exchange.",
+                        x: 300,
+                        y: 750,
+                        prerequisites: [7] // Requires Metalworking
+                    },
+                    {
+                        id: nextId++,
+                        name: "Gunpowder",
+                        era: "medieval",
+                        icon: "fas fa-bomb",
+                        description: "Revolutionized warfare and mining, leading to new military strategies and eventually industrial explosives.",
                         x: 500,
                         y: 750,
-                        prerequisites: [6] // Requires Metalworking
+                        prerequisites: [7] // Requires Metalworking
+                    },
+                    {
+                        id: nextId++,
+                        name: "Mechanical Clock",
+                        era: "medieval",
+                        icon: "fas fa-clock",
+                        description: "Accurate timekeeping enabled better navigation, scheduling of economic activities, and scientific measurements.",
+                        x: 700,
+                        y: 750,
+                        prerequisites: [7] // Requires Metalworking
                     },
                     
-                    // Industrial Era (top: ~1050px)
+                    // Industrial Era (1500 CE - 1900 CE)
                     {
                         id: nextId++,
                         name: "Steam Engine",
                         era: "industrial",
                         icon: "fas fa-train",
-                        description: "The steam engine powered the Industrial Revolution, mechanizing production and transportation on an unprecedented scale.",
-                        x: 300,
+                        description: "Powered the Industrial Revolution, transforming transportation, manufacturing and energy production.",
+                        x: 100,
                         y: 1050,
-                        prerequisites: [6] // Requires Metalworking
+                        prerequisites: [7] // Requires Metalworking
                     },
                     {
                         id: nextId++,
                         name: "Electricity",
                         era: "industrial",
                         icon: "fas fa-bolt",
-                        description: "Harnessing electricity transformed every aspect of life, from lighting and communication to industrial production and transportation.",
+                        description: "Harnessing electricity transformed every aspect of life from lighting and communication to industrial production.",
+                        x: 300,
+                        y: 1050,
+                        prerequisites: [13] // Requires Steam Engine
+                    },
+                    {
+                        id: nextId++,
+                        name: "Telegraph",
+                        era: "industrial",
+                        icon: "fas fa-broadcast-tower",
+                        description: "First rapid long-distance communication system that shrank the world and transformed business, news and diplomacy.",
                         x: 500,
                         y: 1050,
-                        prerequisites: [9] // Requires Steam Engine
+                        prerequisites: [14] // Requires Electricity
+                    },
+                    {
+                        id: nextId++,
+                        name: "Vaccination",
+                        era: "industrial",
+                        icon: "fas fa-syringe",
+                        description: "Scientific immunization methods dramatically reduced mortality from infectious diseases, increasing global population health.",
+                        x: 700,
+                        y: 1050,
+                        prerequisites: []
                     },
                     
-                    // Modern Era (top: ~1350px)
+                    // Modern Era (1900 CE - 2000 CE)
                     {
                         id: nextId++,
                         name: "Computing",
                         era: "modern",
                         icon: "fas fa-computer",
-                        description: "Digital computing revolutionized information processing, leading to the Information Age and transforming nearly every aspect of modern life.",
+                        description: "Digital computing revolutionized information processing, leading to the Information Age and transforming society.",
+                        x: 100,
+                        y: 1350,
+                        prerequisites: [14] // Requires Electricity
+                    },
+                    {
+                        id: nextId++,
+                        name: "Automobile",
+                        era: "modern",
+                        icon: "fas fa-car",
+                        description: "Mass production of affordable personal vehicles transformed transportation, urban design and modern lifestyles.",
                         x: 300,
                         y: 1350,
-                        prerequisites: [10] // Requires Electricity
+                        prerequisites: [13, 14] // Requires Steam Engine, Electricity
+                    },
+                    {
+                        id: nextId++,
+                        name: "Aviation",
+                        era: "modern",
+                        icon: "fas fa-plane",
+                        description: "Powered flight revolutionized global transportation, warfare and connected the world more tightly than ever before.",
+                        x: 500,
+                        y: 1350,
+                        prerequisites: [13, 14] // Requires Steam Engine, Electricity
                     },
                     {
                         id: nextId++,
                         name: "Internet",
                         era: "modern",
                         icon: "fas fa-network-wired",
-                        description: "The Internet created a globally interconnected digital network, revolutionizing communication, commerce, and access to information.",
-                        x: 500,
+                        description: "Global digital network revolutionized communication, commerce, education and access to information.",
+                        x: 700,
                         y: 1350,
-                        prerequisites: [11] // Requires Computing
+                        prerequisites: [17] // Requires Computing
                     },
                     
-                    // Future Era (top: ~1650px)
+                    // Future Era (2000 CE - beyond)
                     {
                         id: nextId++,
                         name: "AI",
                         era: "future",
                         icon: "fas fa-robot",
-                        description: "Artificial Intelligence promises to automate complex tasks, enhance human capabilities, and solve problems beyond human-scale processing.",
-                        x: 300,
+                        description: "Artificial Intelligence promises to automate complex tasks, enhance human capabilities and solve problems beyond human-scale processing.",
+                        x: 100,
                         y: 1650,
-                        prerequisites: [11, 12] // Requires Computing and Internet
+                        prerequisites: [17, 20] // Requires Computing, Internet
                     },
                     {
                         id: nextId++,
@@ -831,19 +1050,29 @@
                         era: "future",
                         icon: "fas fa-atom",
                         description: "Nuclear fusion could provide nearly limitless clean energy, solving humanity's energy needs while reducing environmental impact.",
+                        x: 300,
+                        y: 1650,
+                        prerequisites: [14, 17] // Requires Electricity, Computing
+                    },
+                    {
+                        id: nextId++,
+                        name: "Quantum Computing",
+                        era: "future",
+                        icon: "fas fa-brain",
+                        description: "Harnesses quantum mechanics to perform calculations impossible for classical computers, revolutionizing cryptography, simulation and optimization.",
                         x: 500,
                         y: 1650,
-                        prerequisites: [10] // Requires Electricity
+                        prerequisites: [17] // Requires Computing
                     },
                     {
                         id: nextId++,
                         name: "Space Colonization",
                         era: "future",
                         icon: "fas fa-rocket",
-                        description: "Establishing permanent human settlements beyond Earth would ensure the survival of our species and open new frontiers for exploration and resource utilization.",
+                        description: "Establishing permanent human settlements beyond Earth would ensure species survival and open new frontiers for exploration and resources.",
                         x: 700,
                         y: 1650,
-                        prerequisites: [10, 14] // Requires Electricity and Fusion Power
+                        prerequisites: [14, 22] // Requires Electricity, Fusion Power
                     }
                 ];
             }
@@ -853,6 +1082,25 @@
                 // Clear existing nodes and connections
                 techTree.innerHTML = '';
                 
+                // Add back the era dividers and labels
+                techTree.innerHTML += `
+                    <div class="era-line ancient-line"></div>
+                    <div class="era-line classical-line"></div>
+                    <div class="era-line medieval-line"></div>
+                    <div class="era-line industrial-line"></div>
+                    <div class="era-line modern-line"></div>
+                    <div class="era-line future-line"></div>
+                    
+                    <div class="era-labels">
+                        <div style="top: 150px;">Ancient</div>
+                        <div style="top: 450px;">Classical</div>
+                        <div style="top: 750px;">Medieval</div>
+                        <div style="top: 1050px;">Industrial</div>
+                        <div style="top: 1350px;">Modern</div>
+                        <div style="top: 1650px;">Future</div>
+                    </div>
+                `;
+                
                 // Draw connections first (so nodes appear on top)
                 techData.forEach(tech => {
                     if (tech.prerequisites && tech.prerequisites.length) {
@@ -877,7 +1125,7 @@
             // Create a single technology node
             function createTechNode(tech) {
                 const node = document.createElement('div');
-                node.className = `tech-node ${tech.era} ${editMode ? 'editable' : ''}`;
+                node.className = `tech-node ${tech.era}`;
                 node.style.left = `${tech.x}px`;
                 node.style.top = `${tech.y}px`;
                 node.dataset.id = tech.id;
@@ -889,49 +1137,22 @@
                     <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>
+                    <div class="delete-node">×</div>
                 `;
                 
-                // Add click event for popup
                 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')) {
+                    // Don't show popup if in edit mode or clicking on the delete button
+                    if (isEditMode || e.target.classList.contains('delete-node') || e.target.classList.contains('drag-handle')) {
                         return;
                     }
                     
                     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;
+                // Dragging functionality (only in edit mode)
+                node.addEventListener('mousedown', (e) => {
+                    if (!isEditMode) return;
                     
                     // Don't drag if clicking on the delete button
                     if (e.target.classList.contains('delete-node')) {
@@ -954,46 +1175,107 @@
                     
                     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`;
+                // Delete functionality (only in edit mode)
+                const deleteBtn = node.querySelector('.delete-node');
+                deleteBtn.addEventListener('click', (e) => {
+                    if (!isEditMode) return;
                     
-                    // 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;
+                    e.stopPropagation();
+                    if (confirm(`Delete "${tech.name}"?`)) {
+                        // Remove this tech from prerequisites of other techs
+                        techData.forEach(t => {
+                            t.prerequisites = t.prerequisites.filter(id => id !== tech.id);
+                        });
+                        
+                        // Remove the tech
+                        techData = techData.filter(t => t.id !== tech.id);
+                        
+                        // Reddraw the tree
+                        drawTechTree();
                     }
-                    
-                    // Redraw connections
-                    redrawConnections();
+                });
+                
+                // Show/hide edit controls based on mode
+                updateNodeEditControls(node);
+                
+                techTree.appendChild(node);
+                return node;
+            }
+
+            // Update node edit controls based on current mode
+            function updateNodeEditControls(node) {
+                const dragHandle = node.querySelector('.drag-handle');
+                const deleteBtn = node.querySelector('.delete-node');
+                
+                if (isEditMode) {
+                    node.classList.add('editable');
+                    dragHandle.style.display = 'flex';
+                    deleteBtn.style.display = 'flex';
+                } else {
+                    node.classList.remove('editable');
+                    dragHandle.style.display = 'none';
+                    deleteBtn.style.display = 'none';
                 }
+            }
+
+            // Function to draw a connection line between two points
+            function drawConnection(x1, y1, x2, y2) {
+                const line = document.createElement('div');
+                line.className = 'connection';
                 
-                function stopDrag() {
-                    if (!draggingNode) return;
-                    
-                    draggingNode.style.zIndex = '10';
-                    draggingNode = null;
-                    document.removeEventListener('mousemove', dragNode);
-                    document.removeEventListener('mouseup', stopDrag);
+                // Calculate length and angle of the line
+                const length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
+                const angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
+                
+                // Style the line
+                line.style.width = `${length}px`;
+                line.style.left = `${x1}px`;
+                line.style.top = `${y1}px`;
+                line.style.transform = `rotate(${angle}deg)`;
+                
+                techTree.appendChild(line);
+                return line;
+            }
+
+            // Drag node handler
+            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
+                draggingNode.style.left = `${newX}px`;
+                draggingNode.style.top = `${newY}px`;
+                
+                // Update position in the tech data
+                const techId = parseInt(draggingNode.dataset.id);
+                const tech = techData.find(t => t.id === techId);
+                if (tech) {
+                    tech.x = newX;
+                    tech.y = newY;
                 }
                 
-                techTree.appendChild(node);
+                // Redraw connections
+                redrawConnections();
+            }
+
+            // Stop dragging handler
+            function stopDrag() {
+                if (!draggingNode) return;
+                
+                draggingNode.style.zIndex = '10';
+                draggingNode = null;
+                document.removeEventListener('mousemove', dragNode);
+                document.removeEventListener('mouseup', stopDrag);
             }
 
             // Redraw just the connections (more efficient than redrawing the whole tree)
@@ -1018,29 +1300,15 @@
                 });
             }
 
-            // Function to draw a connection line between two points
-            function drawConnection(x1, y1, x2, y2) {
-                const line = document.createElement('div');
-                line.className = 'connection';
-                
-                // Calculate length and angle of the line
-                const length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
-                const angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
-                
-                // Style the line
-                line.style.width = `${length}px`;
-                line.style.left = `${x1}px`;
-                line.style.top = `${y1}px`;
-                line.style.transform = `rotate(${angle}deg)`;
-                
-                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`;
+                
+                // Format era with appropriate color
+                const eraElement = document.getElementById('popupEra');
+                eraElement.textContent = `${tech.era.charAt(0).toUpperCase() + tech.era.slice(1)} Era`;
+                eraElement.className = `era ${tech.era}`;
+                
                 document.getElementById('popupDescription').textContent = tech.description;
                 
                 if (tech.prerequisites && tech.prerequisites.length) {
@@ -1055,18 +1323,19 @@
                         'Prerequisites: None (starting technology)';
                 }
                 
-                nodePopup.style.display = 'block';
+                // Show the popup with animation
+                nodePopup.classList.add('active');
             }
 
             // Close popup when clicking the X
             closePopup.addEventListener('click', () => {
-                nodePopup.style.display = 'none';
+                nodePopup.classList.remove('active');
             });
 
             // Close popup when clicking outside
             window.addEventListener('click', (e) => {
                 if (e.target === nodePopup) {
-                    nodePopup.style.display = 'none';
+                    nodePopup.classList.remove('active');
                 }
             });
 
@@ -1111,13 +1380,14 @@
                     prerequisiteCheckboxes.appendChild(checkboxItem);
                 });
                 
-                // Show the form
-                addNodeForm.style.display = 'block';
+                // Show the form with animation
+                addNodeForm.classList.add('active');
+                techForm.reset();
             });
 
             // Close add technology form
             cancelForm.addEventListener('click', () => {
-                addNodeForm.style.display = 'none';
+                addNodeForm.classList.remove('active');
                 techForm.reset();
             });
 
@@ -1137,34 +1407,25 @@
                 
                 // Determine default position based on era
                 let x, y;
-                switch(era) {
-                    case 'ancient':
-                        x = 200 + (techData.filter(t => t.era === 'ancient').length * 200);
-                        y = 150;
-                        break;
-                    case 'classical':
-                        x = 200 + (techData.filter(t => t.era === 'classical').length * 200);
-                        y = 450;
-                        break;
-                    case 'medieval':
-                        x = 200 + (techData.filter(t => t.era === 'medieval').length * 200);
-                        y = 750;
-                        break;
-                    case 'industrial':
-                        x = 200 + (techData.filter(t => t.era === 'industrial').length * 200);
-                        y = 1050;
-                        break;
-                    case 'modern':
-                        x = 200 + (techData.filter(t => t.era === 'modern').length * 200);
-                        y = 1350;
-                        break;
-                    case 'future':
-                        x = 200 + (techData.filter(t => t.era === 'future').length * 200);
-                        y = 1650;
-                        break;
-                    default:
-                        x = 200;
-                        y = 150;
+                const eraTechs = techData.filter(t => t.era === era);
+                
+                if (eraTechs.length > 0) {
+                    // Position new node near others of the same era
+                    const lastTech = eraTechs[eraTechs.length - 1];
+                    x = lastTech.x + 200;
+                    y = lastTech.y;
+                } else {
+                    // First tech of this era - position appropriately
+                    switch(era) {
+                        case 'ancient': y = 150; break;
+                        case 'classical': y = 450; break;
+                        case 'medieval': y = 750; break;
+                        case 'industrial': y = 1050; break;
+                        case 'modern': y = 1350; break;
+                        case 'future': y = 1650; break;
+                        default: y = 150;
+                    }
+                    x = 100;
                 }
                 
                 // Create the new tech
@@ -1186,96 +1447,81 @@
                 drawTechTree();
                 
                 // Close and reset the form
-                addNodeForm.style.display = 'none';
+                addNodeForm.classList.remove('active');
                 techForm.reset();
+                
+                // Scroll to show the new node
+                techTreeContainer.scrollTo({
+                    top: y - 100,
+                    behavior: 'smooth'
+                });
             });
 
-            // Era button functionality
+            // Animate the timeline path to show current era
+            function animateTechPath(era) {
+                let height = 0;
+                switch(era) {
+                    case 'ancient': height = 7; break;
+                    case 'classical': height = 20; break;
+                    case 'medieval': height = 35; break;
+                    case 'industrial': height = 50; break;
+                    case 'modern': height = 70; break;
+                    case 'future': height = 100; break;
+                }
+                techPath.style.height = `${height}%`;
+            }
+
+            // Era navigation buttons
             document.querySelectorAll('.era-button').forEach(button => {
                 button.addEventListener('click', () => {
                     const era = button.textContent.toLowerCase();
-                    
-                    // Scroll to the appropriate era
-                    let scrollTop;
-                    switch(era) {
-                        case 'ancient': scrollTop = 0; break;
-                        case 'classical': scrollTop = 300; break;
-                        case 'medieval': scrollTop = 600; break;
-                        case 'industrial': scrollTop = 900; break;
-                        case 'modern': scrollTop = 1200; break;
-                        case 'future': scrollTop = 1500; break;
-                        default: scrollTop = 0;
-                    }
-                    
-                    techTreeContainer.scrollTo({
-                        top: scrollTop,
-                        behavior: 'smooth'
-                    });
-                    
+                    scrollToEra(era);
                     animateTechPath(era);
                 });
             });
 
-            function animateTechPath(era) {
-                let height = 0;
+            // Scroll to specific era
+            function scrollToEra(era) {
+                let scrollTop;
                 switch(era) {
-                    case 'ancient': height = 5; break;
-                    case 'classical': height = 18; break;
-                    case 'medieval': height = 32; break;
-                    case 'industrial': height = 46; break;
-                    case 'modern': height = 65; break;
-                    case 'future': height = 100; break;
+                    case 'ancient': scrollTop = 0; break;
+                    case 'classical': scrollTop = 300; break;
+                    case 'medieval': scrollTop = 600; break;
+                    case 'industrial': scrollTop = 900; break;
+                    case 'modern': scrollTop = 1200; break;
+                    case 'future': scrollTop = 1500; break;
+                    default: scrollTop = 0;
                 }
-                techPath.style.height = `${height}%`;
+                
+                techTreeContainer.scrollTo({
+                    top: scrollTop,
+                    behavior: 'smooth'
+                });
             }
 
             // Toggle edit mode
             toggleEditMode.addEventListener('click', () => {
-                editMode = !editMode;
+                isEditMode = !isEditMode;
                 
-                if (editMode) {
-                    toggleEditMode.textContent = 'Edit Mode: ON';
+                // Update button appearance
+                if (isEditMode) {
                     toggleEditMode.classList.add('active');
+                    toggleEditMode.innerHTML = '<i class="fas fa-check"></i> Edit Mode ON';
                     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');
+                    toggleEditMode.innerHTML = '<i class="fas fa-edit"></i> Toggle Edit Mode';
                     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);
-                    }
                 }
+                
+                // Update all nodes
+                document.querySelectorAll('.tech-node').forEach(node => {
+                    updateNodeEditControls(node);
+                });
             });
 
             // 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>
 </body>