flow like the river

2025-11-07 00:06:12 +01:00 · 2025-11-07 00:06:12 +01:00 · 013fe673f3
commit 013fe673f3
42435 changed files with 5764238 additions and 0 deletions
--- a/VISUALIZACION/public/3dscript_eco-corp.html
+++ b/VISUALIZACION/public/3dscript_eco-corp.html
@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Visualización 2D de Noticias Políticas</title>
+    <link rel="stylesheet" href="3dscript_eco-corp.css">
+    <style>
+        .popup {
+            display: none;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: white;
+            color: black;
+            padding: 20px;
+            border-radius: 10px;
+            z-index: 2;
+            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
+        }
+
+        .popup:focus,
+        .cube-container:focus + .popup {
+            display: block;
+        }
+
+        .popup button {
+            display: block;
+            margin: 10px auto;
+            padding: 10px;
+            background-color: #333;
+            color: white;
+            border: none;
+            cursor: pointer;
+        }
+
+        .popup button:hover {
+            background-color: #555;
+        }
+    </style>
+</head>
+<body>
+    <div class="graph-container" id="graph-container">
+        <svg class="lines" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" id="svg-lines">
+            <!-- Líneas generadas dinámicamente -->
+        </svg>
+    </div>
+
+    <script>
+        const numCubes = 9;  // Número total de cubos
+        const spacing = 150; // Espacio mínimo entre los cubos
+        const graphContainer = document.getElementById('graph-container');
+        const svgLines = document.getElementById('svg-lines');
+        let cubePositions = [];
+
+        // Función para detectar colisiones y asegurarse de que los cubos no se solapen
+        function detectCollision(newX, newY, positions) {
+            for (let pos of positions) {
+                const distance = Math.sqrt((newX - pos.x) ** 2 + (newY - pos.y) ** 2);
+                if (distance < spacing) {
+                    return true;  // Hay colisión
+                }
+            }
+            return false;  // No hay colisión
+        }
+
+        // Función para generar una posición aleatoria sin que los cubos se solapen
+        function getRandomPosition(maxWidth, maxHeight) {
+            let x, y;
+            do {
+                x = Math.random() * (maxWidth - spacing);
+                y = Math.random() * (maxHeight - spacing);
+            } while (detectCollision(x, y, cubePositions));
+            return { x, y };
+        }
+
+        // Función para generar cubos con posiciones aleatorias
+        function generateRandomCubes(cubeCount) {
+            for (let i = 0; i < cubeCount; i++) {
+                const position = getRandomPosition(window.innerWidth, window.innerHeight);
+                const cubeContainer = document.createElement('div');
+                cubeContainer.classList.add('cube-container');
+                cubeContainer.setAttribute('tabindex', '0');
+                cubeContainer.style.top = position.y + 'px';
+                cubeContainer.style.left = position.x + 'px';
+
+                cubeContainer.innerHTML = `
+                    <div class="cube">
+                        <div class="face front">País ${i}</div>
+                        <div class="face back">Detalle ${i}</div>
+                        <div class="face left">Año ${2000 + i}</div>
+                        <div class="face right">Muertos ${(i + 1) * 1000}</div>
+                        <div class="face top">ONU</div>
+                        <div class="face bottom">Fuente</div>
+                    </div>
+                `;
+
+                // Crear un popup para cada cubo
+                const popup = document.createElement('div');
+                popup.classList.add('popup');
+                popup.innerHTML = `
+                    <p>Noticia relacionada con País ${i}</p>
+                    <button>Close</button>
+                `;
+
+                popup.querySelector('button').addEventListener('click', () => {
+                    popup.style.display = 'none';
+                    cubeContainer.focus();  // Regresar el foco al cubo
+                });
+
+                cubeContainer.addEventListener('focus', () => {
+                    popup.style.display = 'block';
+                });
+
+                cubePositions.push({ x: position.x + 35, y: position.y + 35 }); // Guardar la posición
+                graphContainer.appendChild(cubeContainer);
+                graphContainer.appendChild(popup);  // Añadir el popup después del cubo
+            }
+        }
+
+        // Función para generar las líneas entre cubos relacionados
+        function generateLines() {
+            for (let i = 0; i < cubePositions.length - 1; i++) {
+                const x1 = cubePositions[i].x;
+                const y1 = cubePositions[i].y;
+                const x2 = cubePositions[i + 1].x;
+                const y2 = cubePositions[i + 1].y;
+
+                const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+                line.setAttribute('x1', x1);
+                line.setAttribute('y1', y1);
+                line.setAttribute('x2', x2);
+                line.setAttribute('y2', y2);
+                line.setAttribute('stroke', '#333');
+                line.setAttribute('stroke-width', '2');
+
+                svgLines.appendChild(line);
+            }
+        }
+
+        // Generar cubos aleatorios y las líneas de conexión
+        generateRandomCubes(numCubes);
+        generateLines();
+    </script>
+</body>
+</html>