82 lines
3.4 KiB
HTML
Executable file
82 lines
3.4 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Noticias de Guerras y Conflictos Políticos - Disposición Aleatoria</title>
|
|
<link rel="stylesheet" type="text/css" href="script_eco-corp.css">
|
|
</head>
|
|
<body>
|
|
<h1>Noticias de Guerras y Conflictos Políticos - Últimos 10 años</h1>
|
|
<div class="graph-container" id="graph-container">
|
|
<!-- Los cubos serán añadidos dinámicamente con JavaScript -->
|
|
<svg class="lines" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" id="svg-lines">
|
|
<!-- Las flechas también serán generadas dinámicamente -->
|
|
</svg>
|
|
</div>
|
|
|
|
<script>
|
|
const numCubes = 5; // Número de cubos
|
|
const graphContainer = document.getElementById('graph-container');
|
|
const svgLines = document.getElementById('svg-lines');
|
|
let cubePositions = [];
|
|
|
|
// Función para generar una posición aleatoria dentro del contenedor
|
|
function getRandomPosition(maxWidth, maxHeight) {
|
|
return {
|
|
x: Math.floor(Math.random() * (maxWidth - 100)),
|
|
y: Math.floor(Math.random() * (maxHeight - 100))
|
|
};
|
|
}
|
|
|
|
// Función para generar cubos aleatoriamente
|
|
function generateCubes(num) {
|
|
for (let i = 0; i < num; i++) {
|
|
const position = getRandomPosition(window.innerWidth, window.innerHeight);
|
|
const cubeContainer = document.createElement('div');
|
|
cubeContainer.classList.add('cube-container');
|
|
cubeContainer.style.top = position.y + 'px';
|
|
cubeContainer.style.left = position.x + 'px';
|
|
|
|
cubeContainer.innerHTML = `
|
|
<div class="cube">
|
|
<div class="face front">País ${i+1}</div>
|
|
<div class="face back">Detalle ${i+1}</div>
|
|
<div class="face left">Año ${2010 + i}</div>
|
|
<div class="face right">Muertos ${(i+1)*1000}</div>
|
|
<div class="face top">ONU</div>
|
|
<div class="face bottom">Fuente</div>
|
|
</div>
|
|
`;
|
|
|
|
cubePositions.push({x: position.x + 35, y: position.y + 35}); // Ajustar al centro del cubo
|
|
graphContainer.appendChild(cubeContainer);
|
|
}
|
|
}
|
|
|
|
// Función para generar las flechas que conectan los cubos
|
|
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 y flechas al cargar la página
|
|
generateCubes(numCubes);
|
|
generateLines();
|
|
</script>
|
|
</body>
|
|
</html>
|