<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0">
<title>Contenido Editable y Ventanas Emergentes</title>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js"></script>
<script>
tinymce.init({
selector: '#editableContent',
plugins: 'image link',
toolbar: 'undo redo | bold italic | link image',
});
function mostrarEmergente(id) {
document.getElementById('overlay').style.display = 'block';
document.getElementById(id).style.display = 'block';
}
function cerrarEmergente() {
document.getElementById('overlay').style.display = 'none';
document.querySelectorAll('.emergente').forEach(emergente => {
emergente.style.display = 'none';
});
}
</script>
<style>
.barra-botones {
display: flex;
justify-content: center;
background-color: rgba(255, 255, 255, 0.5); /* Fondo semitransparente de la barra */
padding: 10px 0;
}
.barra-botones button {
color: #f3c5d8; /* Color del texto */
background-color: transparent; /* Fondo transparente de los botones */
border: 2px solid #f3c5d8; /* Borde color rosa pastel */
padding: 10px 20px;
margin: 0 5px;
font-size: 14px;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease-in-out;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para dar efecto suspendido */
}
.barra-botones button:hover {
background-color: #f3c5d8; /* Rosa pastel al pasar el cursor */
color: white; /* Color blanco al pasar el cursor */
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Sombra más intensa al pasar el cursor */
}
.emergente {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
padding: 20px;
text-align: center;
z-index: 1000;
background-color: #f3e1f7; /* Fondo pastel */
width: 60%;
}
.emergente h3 {
color: #333;
}
.emergente p {
color: #555;
}
.emergente .cerrar {
margin-top: 10px;
padding: 8px 16px;
background-color: #333;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
}
</style>
</head>
<body>
<!-- Barra de Botones -->
<div class="barra-botones">
<button onclick="mostrarEmergente('sobre-nosotros')">Sobre Nosotros</button>
<button onclick="mostrarEmergente('politicas')">Políticas</button>
<button onclick="mostrarEmergente('soporte')">Soporte</button>
</div>
<!-- Ventanas Emergentes -->
<div class="overlay" onclick="cerrarEmergente()"></div>
<!-- Ventana de Sobre Nosotros -->
<div class="emergente">
<h3>Sobre Nosotros</h3>
<p>TV SUSSHI Love Edition, es la segunda edición de TV SUSSHI presentada para 2025.</p>
<button class="cerrar" onclick="cerrarEmergente()">Cerrar</button>
</div>
<!-- Ventana de Políticas -->
<div class="emergente">
<h3>Políticas</h3>
<p>Este es el contenido editado para las Políticas. Los usuarios verán este texto.</p>
<button class="cerrar" onclick="cerrarEmergente()">Cerrar</button>
</div>
<!-- Ventana de Soporte -->
<div class="emergente">
<h3>Soporte</h3>
<p>Para obtener asistencia técnica comuníquese a nuestro WhatsApp Center al +506 6365 4163 ó puede escribir a tvsusshi.soporte@gmail.com.</p>
<button class="cerrar" onclick="cerrarEmergente()">Cerrar</button>
</div>
<script>
// Modificar el contenido cuando tú lo edites
document.getElementById('contenido-sobre-nosotros').innerText = "Contenido actualizado sobre nosotros.";
document.getElementById('contenido-politicas').innerText = "Contenido actualizado de las políticas.";
document.getElementById('contenido-soporte').innerText = "Contenido actualizado de soporte.";
</script>
</body>
</html>