Spaces:

RichardSocher
/

first-test-of-wikitechtree

Running

App Files Files Community

RichardSocher commited on Mar 30

Commit

1d2b7e9

verified ·

1 Parent(s): 1852304

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +653 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: First Test Of Wikitechtree
-emoji: 📚
-colorFrom: green
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: first-test-of-wikitechtree
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,653 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Technology Tree Evolution</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-color: #f0f2f5;
+            color: #333;
+            overflow-x: hidden;
+        }
+        header {
+            background: linear-gradient(135deg, #2c3e50, #4ca1af);
+            color: white;
+            padding: 2rem 0;
+            text-align: center;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        }
+        h1 {
+            font-size: 2.5rem;
+            margin-bottom: 0.5rem;
+        }
+        .subtitle {
+            font-size: 1.2rem;
+            opacity: 0.9;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 2rem auto;
+            padding: 0 1rem;
+        }
+        .era-navigation {
+            display: flex;
+            justify-content: center;
+            margin-bottom: 2rem;
+            flex-wrap: wrap;
+            gap: 0.5rem;
+        }
+        .era-button {
+            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;
+        }
+        .era-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+        }
+        .era-ancient {
+            background-color: #e9c46a;
+            color: #333;
+        }
+        .era-classical {
+            background-color: #f4a261;
+            color: white;
+        }
+        .era-medieval {
+            background-color: #e76f51;
+            color: white;
+        }
+        .era-industrial {
+            background-color: #2a9d8f;
+            color: white;
+        }
+        .era-modern {
+            background-color: #1d3557;
+            color: white;
+        }
+        .era-future {
+            background-color: #9d4edd;
+            color: white;
+        }
+        .tech-tree-container {
+            width: 100%;
+            overflow: auto;
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+            padding: 2rem;
+            position: relative;
+            min-height: 800px;
+            margin-bottom: 3rem;
+        }
+        .tech-tree {
+            position: relative;
+            width: 1200px;
+            height: 700px;
+            margin: 0 auto;
+        }
+        .tech-node {
+            position: absolute;
+            width: 100px;
+            height: 100px;
+            border-radius: 50%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            z-index: 10;
+            transform: scale(0.95);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        }
+        .tech-node:hover {
+            transform: scale(1.05);
+            z-index: 20;
+        }
+        .tech-icon {
+            font-size: 1.8rem;
+            margin-bottom: 0.3rem;
+        }
+        .tech-name {
+            font-weight: bold;
+            font-size: 0.7rem;
+        }
+        .tech-era {
+            font-size: 0.6rem;
+            opacity: 0.8;
+            margin-top: 2px;
+        }
+        /* Node colors based on era */
+        .ancient {
+            background-color: #e9c46a;
+            color: #333;
+        }
+        .classical {
+            background-color: #f4a261;
+            color: white;
+        }
+        .medieval {
+            background-color: #e76f51;
+            color: white;
+        }
+        .industrial {
+            background-color: #2a9d8f;
+            color: white;
+        }
+        .modern {
+            background-color: #1d3557;
+            color: white;
+        }
+        .future {
+            background-color: #9d4edd;
+            color: white;
+        }
+        /* Connection lines */
+        .connection {
+            position: absolute;
+            background-color: #aaa;
+            height: 2px;
+            z-index: 1;
+            transform-origin: 0 0;
+        }
+        /* Vertical era lines */
+        .era-line {
+            position: absolute;
+            width: 2px;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.1);
+            left: 50%;
+            z-index: 0;
+        }
+        .era-labels {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 40px;
+            display: flex;
+            justify-content: space-around;
+            z-index: 5;
+            font-weight: bold;
+            color: #555;
+            text-transform: uppercase;
+            font-size: 0.9rem;
+            letter-spacing: 1px;
+        }
+        .node-popup {
+            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;
+        }
+        .node-popup h3 {
+            margin-bottom: 0.5rem;
+            color: #444;
+        }
+        .node-popup .era {
+            font-size: 0.9rem;
+            margin-bottom: 1rem;
+            font-weight: bold;
+        }
+        .node-popup .description {
+            margin-bottom: 1.5rem;
+            line-height: 1.6;
+        }
+        .node-popup .prerequisites {
+            font-size: 0.9rem;
+            color: #666;
+        }
+        .close-popup {
+            position: absolute;
+            top: 10px;
+            right: 15px;
+            font-size: 1.5rem;
+            cursor: pointer;
+            color: #888;
+        }
+        footer {
+            text-align: center;
+            padding: 2rem 0;
+            background-color: #2c3e50;
+            color: white;
+        }
+        .timeline-bar {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 4px;
+            background: linear-gradient(90deg, #e9c46a, #f4a261, #e76f51, #2a9d8f, #1d3557, #9d4edd);
+            border-radius: 0 0 12px 12px;
+        }
+        .tech-path {
+            position: absolute;
+            width: 0;
+            height: 2px;
+            background-color: rgba(255, 255, 255, 0.8);
+            z-index: 2;
+            top: 50%;
+            left: 0;
+            transition: width 0.5s ease-in-out;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <h1>Technology Evolution Tree</h1>
+        <div class="subtitle">Visualizing humanity's technological progress</div>
+        <div class="timeline-bar">
+            <div class="tech-path" id="techPath"></div>
+        </div>
+    </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>
+        <div class="tech-tree-container">
+            <div class="era-labels">
+                <div>4000 BCE</div>
+                <div>500 BCE</div>
+                <div>500 CE</div>
+                <div>1700 CE</div>
+                <div>1900 CE</div>
+                <div>Future</div>
+            </div>
+            <div class="tech-tree" id="techTree">
+                <!-- Connections will be added via JavaScript -->
+            </div>
+        </div>
+    </div>
+    <div class="node-popup" id="nodePopup">
+        <span class="close-popup">&times;</span>
+        <h3 id="popupTitle">Technology Name</h3>
+        <div class="era" id="popupEra">Ancient Era</div>
+        <div class="description" id="popupDescription">Description of technology...</div>
+        <div class="prerequisites" id="popupPrereqs">Prerequisites: None</div>
+    </div>
+    <footer>
+        <p>Explore the technological advancements that shaped human civilization</p>
+    </footer>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const techTree = document.getElementById('techTree');
+            const nodePopup = document.getElementById('nodePopup');
+            const closePopup = document.querySelector('.close-popup');
+            const techPath = document.getElementById('techPath');
+            // 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
+                }
+            ];
+            // Draw the technology nodes
+            techData.forEach(tech => {
+                const node = document.createElement('div');
+                node.className = `tech-node ${tech.era}`;
+                node.style.left = `${tech.x}px`;
+                node.style.top = `${tech.y}px`;
+                node.dataset.id = tech.id;
+                node.innerHTML = `
+                    <div class="tech-icon">
+                        <i class="${tech.icon}"></i>
+                    </div>
+                    <div class="tech-name">${tech.name}</div>
+                    <div class="tech-era">${tech.era.charAt(0).toUpperCase() + tech.era.slice(1)}</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)';
+                    }
+                    nodePopup.style.display = 'block';
+                    // Animate the tech path
+                    animateTechPath(tech.era);
+                });
+                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
+                            );
+                        }
+                    });
+                }
+            });
+            // 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)`;
+                // Add a subtle glow effect
+                line.style.boxShadow = `0 0 10px 1px rgba(255, 255, 255, 0.3)`;
+                techTree.insertBefore(line, techTree.firstChild);
+            }
+            // Close popup when clicking the X
+            closePopup.addEventListener('click', () => {
+                nodePopup.style.display = 'none';
+            });
+            // Close popup when clicking outside
+            window.addEventListener('click', (e) => {
+                if (e.target === nodePopup) {
+                    nodePopup.style.display = 'none';
+                }
+            });
+            // 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({
+                        left: getScrollPositionForEra(era),
+                        behavior: 'smooth'
+                    });
+                });
+            });
+            function getScrollPositionForEra(era) {
+                const eraIndex = ['ancient', 'classical', 'medieval', 'industrial', 'modern', 'future'].indexOf(era);
+                return eraIndex * 200; // Adjust this based on your needs
+            }
+            function animateTechPath(era) {
+                let width = 0;
+                switch(era) {
+                    case 'ancient': width = 16; break;
+                    case 'classical': width = 32; break;
+                    case 'medieval': width = 48; break;
+                    case 'industrial': width = 64; break;
+                    case 'modern': width = 80; break;
+                    case 'future': width = 100; break;
+                }
+                techPath.style.width = `${width}%`;
+            }
+            // Initial load - set to ancient era
+            animateTechPath('ancient');
+        });
+    </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>
+</html>