EJEMPLO:
HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Widget de Botones Dinámico</title>
<!-- Cargar la fuente Lobster desde Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<style>
.button-container {
padding: 10px 0;
display: flex;
flex-wrap: wrap;
gap: 5px;
background-color: transparent;
}
.button-item {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
padding: 3px 7px;
cursor: pointer;
font-family: 'Lobster', cursive;
font-size: 13px;
font-weight: normal;
transition: color 0.3s ease;
white-space: nowrap;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
.button-item:hover {
color: #ff0000;
}
#content {
display: none;
}
</style>
</head>
<body>
<div id="button-container" class="button-container"></div>
<div id="content" class="content"></div>
<script>
// URL del archivo JSON en GitHub
const jsonUrl = 'https://raw.githubusercontent.com/BRAYANROCKER/buttons-widget/refs/heads/main/buttons.json';
// Función para cargar y mostrar los botones
async function loadButtons() {
try {
const response = await fetch(jsonUrl);
if (!response.ok) {
throw new Error(`Error al cargar el JSON: ${response.statusText}`);
}
const data = await response.json();
const container = document.getElementById('button-container');
// Limpiar contenedor
container.innerHTML = '';
// Crear botones dinámicamente
data.buttons.forEach(button => {
const buttonElement = document.createElement('div');
buttonElement.className = 'button-item';
buttonElement.textContent = button.title;
// Redirigir a una nueva ventana
buttonElement.onclick = () => {
try {
console.log(`Abriendo en nueva ventana: ${button.url}`); // Depuración
window.open(button.url, '_blank');
} catch (error) {
console.error(`Error al abrir ${button.url}:`, error);
alert(`No se pudo abrir ${button.url}. Por favor, revisa la URL.`);
}
};
// Efecto hover
buttonElement.onmouseover = () => {
buttonElement.style.color = '#ff0000';
};
buttonElement.onmouseout = () => {
buttonElement.style.color = '#000000';
};
container.appendChild(buttonElement);
});
} catch (error) {
console.error('Error al cargar el JSON:', error);
document.getElementById('button-container').innerHTML = 'Error al cargar los botones. Revisa la URL del JSON.';
}
}
// Cargar botones al iniciar
loadButtons();
</script>
</body>
</html>
