89 lines
3.3 KiB
Text
Executable file
89 lines
3.3 KiB
Text
Executable file
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="eco-corp.css">
|
|
<title>ECO-CORP</title>
|
|
<script type="module" src="output.js"></script>
|
|
</head>
|
|
<body>
|
|
<nav>
|
|
<ul class="nav-links">
|
|
<li><a href="eco-corp.html" class="eco-corp">ECO-CORP</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<main>
|
|
<div id="canvasContainer" style="position: absolute; width: 100%; height: 100%; opacity: 0.5;"></div>
|
|
<div class="background">
|
|
<img src="/images/flujos4.jpg">
|
|
<img src="/images/flujos4.jpg">
|
|
<img src="/images/flujos4.jpg">
|
|
<img src="/images/flujos4.jpg">
|
|
<img src="/images/flujos4.jpg">
|
|
<script>
|
|
setTimeout(function() {
|
|
var fondo = document.querySelector('.background');
|
|
fondo.classList.add('fade-out');
|
|
fondo.style.pointerEvents = 'none';
|
|
}, 1000);
|
|
</script>
|
|
</div>
|
|
|
|
<div id="contentDisplay" class="content-display"></div>
|
|
</main>
|
|
|
|
<div id="sidebar">
|
|
<h2>Parámetros</h2>
|
|
<form id="paramForm">
|
|
<label for="fecha_inicio">Fecha de inicio:</label>
|
|
<input type="date" id="fecha_inicio" name="fecha_inicio">
|
|
|
|
<label for="fecha_fin">Fecha de fin:</label>
|
|
<input type="date" id="fecha_fin" name="fecha_fin">
|
|
|
|
<label for="nodos">Número máximo de nodos:</label>
|
|
<input type="number" id="nodos" name="nodos" value="200" min="50" max="500">
|
|
|
|
<label for="complejidad">Complejidad:</label>
|
|
<input type="range" id="complejidad" name="complejidad" min="1" max="10">
|
|
|
|
<label for="param1">Búsqueda por palabra clave:</label>
|
|
<input type="text" id="param1" name="param1">
|
|
|
|
<label for="param2">Filtrar por subtemática:</label>
|
|
<input type="text" id="param2" name="param2">
|
|
|
|
<input type="submit" value="Aplicar">
|
|
</form>
|
|
</div>
|
|
|
|
<button id="sidebarToggle">Toggle Sidebar</button>
|
|
|
|
<footer>
|
|
<p><a href="#">GitHub</a> | <a href="#">Telegram</a> | <a href="#">Email</a> | <a href="#">Web de Tor</a></p>
|
|
</footer>
|
|
|
|
<script>
|
|
document.getElementById('sidebarToggle').addEventListener('click', function() {
|
|
var sidebar = document.getElementById('sidebar');
|
|
sidebar.classList.toggle('active');
|
|
});
|
|
|
|
document.getElementById('paramForm').addEventListener('submit', function(event) {
|
|
event.preventDefault();
|
|
const maxNodes = document.getElementById('nodos').value;
|
|
const subtematica = document.getElementById('param2').value;
|
|
const palabraClave = document.getElementById('param1').value;
|
|
const fechaInicio = document.getElementById('fecha_inicio').value;
|
|
const fechaFin = document.getElementById('fecha_fin').value;
|
|
|
|
// Ejecutar la lógica para actualizar el gráfico con los nuevos parámetros
|
|
myGraph.setMaxNodes(maxNodes);
|
|
myGraph.drawGraph(subtematica, palabraClave, fechaInicio, fechaFin);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|