web-tags-debate-socialismo

<!DOCTYPE html>

<html lang="es">

<head>

  <meta charset="UTF-8">

  <title>Tag Cloud Ideológica</title>

  <style>

    body {

      font-family: Arial, sans-serif;

      padding: 20px;

    }

    .tag-cloud {

      display: flex;

      flex-wrap: wrap;

      gap: 10px;

    }

    .tag {

      padding: 5px 10px;

      border-radius: 5px;

      color: white;

      cursor: pointer;

      transition: transform 0.2s;

    }

    .tag:hover {

      transform: scale(1.2);

    }

  </style>

</head>

<body>

<h2>Nube de etiquetas ideológicas</h2>

<div class="tag-cloud" id="tagCloud"></div>

<script>

  const etiquetas = [

    { texto: "Maoísmo", peso: 5 },

    { texto: "Sindicalismo", peso: 4 },

    { texto: "Comunidad", peso: 5 },

    { texto: "Resistencia Civil", peso: 5 },

    { texto: "Pies Descalzos”, peso: 4 },

    { texto: "Colombia", peso: 3 },

    { texto: "Paneles Cívicos", peso: 2 },

    { texto: "Internacionalismo Obrero", peso: 4 },

    { texto: "Francisco Mosquera", peso: 5 },

    { texto: "Tribuna Roja", peso: 5 },

    { texto: "Frente por la Unidad del Pueblo - FUP", peso: 4 },

    { texto: "Protestas", peso: 3 }

    { texto: "MOIR Legado Mosquera", peso: 5 }

    { texto: "Electorales Colombia", peso: 3 }

    { texto: "Nueva Democracia", peso: 5 }

    { texto: "Socialismo", peso: 5 }

    { texto: "Comunismo", peso: 5 }

    { texto: "Comunas Populares", peso: 5 }

    { texto: "Hua Kuo Feng", peso: 5 }

    { texto: "Reformismo", peso: 4 }

    { texto: "Oportunismo", peso: 4 }

    { texto: "Revisionismo", peso: 5 }

    { texto: "Práctica Social", peso: 5 }

    { texto: "Practica Historica", peso: 5 }

    { texto: "Frente Unico", peso: 5 }

    { texto: "MOIR Legado Mosquera", peso: 5 }

    { texto: "MOIR", peso: 5 }

    { texto: "Marxismo", peso: 5 }

    { texto: "Leninismo", peso: 5 }

    { texto: "Stalinismo", peso: 5 }

    { texto: "Dialectica Materailista", peso: 5 }

    { texto: "Dialectica Historica", peso: 5 }

    { texto: “Pekin Informa ", peso: 4 }

    { texto: "Tesis Abril", peso: 5 }

    { texto: "Tesis Yenan", peso: 5 }

    { texto: "Gran Marcha", peso: 5 }

    { texto: "Sabados Comunistas", peso: 5 }

    { texto: "Dazibao", peso: 5 }

    { texto: "Dafong", peso: 5 }

    { texto: "Dabialum", peso: 5 }

    { texto: "Daming", peso: 5 }

    { texto: "Federico Engels", peso: 5 }

    { texto: "El Capital", peso: 5 }

    { texto: "Plusvalia", peso: 5 }

    { texto: "Modo de Produccion", peso: 5 }

    { texto: "Comunidad Primitiva", peso: 5 }

    { texto: "Esclavismo", peso: 5 }

    { texto: "Capitalismo", peso: 5 }

    { texto: "Espartaco", peso: 4

    { texto: "Tomas Muntzer", peso: 4 }

    { texto: "Comuna de París", peso: 5 }

    { texto: "Unión Sovietica", peso: 5 }

    { texto: "URSS", peso: 5 }

    { texto: "Planes Quinquenales", peso: 5 }

    { texto: "Emulacion", peso: 3 }

    { texto: "Jornada de Trabajo", peso: 3 }

    { texto: "Linea Internacional Comunista", peso: 5 }

    { texto: "Carta de los 25 Puntos”, peso: 5

    { texto: "Soberania, Autonomia, Autodeterminacion", peso: 5 }", peso: 5 }

    { texto: "Movimiento Obrero", peso: 5 }

    { texto: "Movimiento Campesino", peso: 5 }

    { texto: "Movimiento Jovenes", peso: 5 }

    { texto: "Movimiento Mujeres", peso: 5 }

    { texto: "Burguesia Nacional", peso: 5 }

    { texto: "Imperialismo", peso: 5 }

    { texto: "Colonialismo", peso: 5 }

    { texto: "Neocolonialismo", peso: 5 }

    { texto: "Campo Socialista", peso: 4 }

    { texto: "Fuerzas Productivas", peso: 4 }

    { texto: "Ideologia", peso: 4 }

    { texto: "Correlacion Fuerzas", peso: 5 }

  ];

  const colores = ["#e74c3c", "#3498db", "#2ecc71", "#9b59b6", "#f39c12"];

  const contenedor = document.getElementById("tagCloud");

  etiquetas.forEach(etiqueta => {

    const span = document.createElement("span");

    span.className = "tag";

    span.textContent = etiqueta.texto;

    span.style.fontSize = `${etiqueta.peso * 6 + 10}px`;

    span.style.backgroundColor = colores[Math.floor(Math.random() * colores.length)];

    span.onclick = () => alert(`Has seleccionado: ${etiqueta.texto}`);

    contenedor.appendChild(span);

  });

</script>

</body>

</html>