-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
170 lines (170 loc) · 9.63 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
<title>Árboles</title>
<link rel="icon" href="./image/icon.png" type="image/x-icon" />
<link rel="stylesheet" href="./style/style.css" />
<link rel="stylesheet" href="./style/footer.css" />
<link rel="stylesheet" href="./style/button.css" />
<link rel="stylesheet" href="./style/button_add.css" />
<link rel="stylesheet" href="./style/particle.css" />
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
</head>
<body>
<div id="particles-js"></div>
<main>
<header>
<h1>Generador de Árboles</h1>
</header>
<section class="Info_Content">
<div class="Info">
<h2>
<strong>¿Qué es un árbol?</strong>
</h2>
<p>
Un árbol es una estructura de datos no lineal que se compone de nodos, los cuales se conectan
entre sí mediante aristas. Cada nodo tiene un valor asociado y puede tener cero o más nodos
hijos. El nodo que no tiene nodos padres se le conoce como raíz, y los nodos que no tienen nodos
hijos se les conoce como hojas.
</p>
</div>
<div class="funcionamiento">
<h3>
<strong>Funcionamiento</strong>
</h3>
<div class="steps">
<div>
<span>1</span>
<p>
Para agregar un nodo, escribe el nombre del nodo en el campo de texto y da clic en el
botón de agregar.
</p>
</div>
<div>
<span>2</span>
<p>
Para agregar una conexión entre dos nodos, escribe el nombre de los nodos en los campos
de texto y da clic en el botón de agregar.
</p>
</div>
<div>
<span>3</span>
<p>
Para eliminar el árbol, da clic en el botón de limpiar. Esto eliminará todos los nodos y
conexiones.
</p>
</div>
</div>
</div>
</section>
<div id="controls">
<div class="Add_node">
<div class="Name_node">
<p>Agregar Nodo</p>
<input type="text" id="nodeLabel" placeholder="Nombre del nodo" autocomplete="off" />
</div>
<div>
<button class="btn-class-name" onclick="addNode()">
<span class="back"></span>
<span class="front"></span>
</button>
</div>
</div>
<div class="Node_edge">
<p>
<strong>Agregar Conexión</strong>
</p>
<div>
<input class="node1" type="text" id="fromNode" placeholder="De nodo" autocomplete="off" />
<div class="arrow"></div>
<input class="node2" type="text" id="toNode" placeholder="A nodo" autocomplete="off" />
</div>
<div class="button_add">
<button class="noselect" onclick="addEdge()">
<span class="text">Agregar</span>
<span class="icon"
><svg
viewBox="0 0 24 24"
height="24"
width="24"
xmlns="http://www.w3.org/2000/svg"
></svg
><span class="buttonSpan">+</span>
</span>
</button>
</div>
</div>
</div>
<div id="treeInfo">
<div>
<p><strong>Raíz:</strong></p>
</div>
<div>
<p><strong>Ramas:</strong></p>
</div>
<div>
<p><strong>Hojas:</strong></p>
</div>
</div>
<div id="mynetwork"></div>
<div class="Clear_button">
<button class="button" onclick="clearTree()">
<svg viewBox="0 0 448 512" class="svgIcon">
<path
d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"
></path>
</svg>
</button>
</div>
<footer>
<ul class="icons-2">
<li class="icon-content">
<a href="https://www.github.com/c0d3hdz" aria-label="GitHub" data-social="github">
<div class="filled"></div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-github"
viewBox="0 0 16 16"
xml:space="preserve"
>
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"
fill="currentColor"
></path>
</svg>
</a>
<div class="tooltip">GitHub</div>
</li>
<li class="icon-content">
<a href="https://www.instagram.com/c0d3hdz_" aria-label="Instagram" data-social="instagram">
<div class="filled"></div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-instagram"
viewBox="0 0 16 16"
xml:space="preserve"
>
<path
d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334"
fill="currentColor"
></path>
</svg>
</a>
<div class="tooltip">Instagram</div>
</li>
</ul>
</footer>
</main>
</body>
<script src="./js/scrip.js"></script>
<script src="./js/particle.js"></script>
</html>