Bot Discord - Commit completo con todos los cambios
This commit is contained in:
Admin
439
traducciones.php
Executable file
439
traducciones.php
Executable file
@@ -0,0 +1,439 @@
|
||||
<?php
|
||||
// Evitar caché del navegador
|
||||
header("Cache-Control: no-cache, must-revalidate");
|
||||
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); ?> <!DOCTYPE
|
||||
html> <html lang="es"> <head>
|
||||
<meta charset="UTF-8"> <meta name="viewport"
|
||||
content="width=device-width, initial-scale=1.0">
|
||||
<title>Opciones de Traducción - Telegram Bot</title> <style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box;
|
||||
}
|
||||
body { font-family: -apple-system, BlinkMacSystemFont,
|
||||
'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
|
||||
sans-serif; background: linear-gradient(135deg,
|
||||
#667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh; padding: 20px;
|
||||
}
|
||||
.container { max-width: 1200px; margin: 0 auto;
|
||||
}
|
||||
.header { text-align: center; color: white;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.header h1 { font-size: 2.5rem; margin-bottom: 10px;
|
||||
}
|
||||
.header p { font-size: 1.2rem; opacity: 0.9;
|
||||
}
|
||||
.options-grid { display: grid; grid-template-columns:
|
||||
repeat(auto-fit, minmax(300px, 1fr)); gap: 25px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.option-card { background: white; border-radius: 15px;
|
||||
padding: 25px; box-shadow: 0 10px 30px rgba(0, 0, 0,
|
||||
0.2); transition: transform 0.3s ease;
|
||||
}
|
||||
.option-card:hover { transform: translateY(-5px);
|
||||
}
|
||||
.option-header { display: flex; align-items: center;
|
||||
gap: 10px; margin-bottom: 15px;
|
||||
}
|
||||
.option-icon { font-size: 24px;
|
||||
}
|
||||
.option-title { font-size: 1.3rem; font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
.option-description { color: #666; font-size: 0.95rem;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.demo-area { background: #f5f5f5; border-radius: 10px;
|
||||
padding: 15px; border: 2px solid #e0e0e0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.message-bubble { display: flex; gap: 12px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.avatar { width: 40px; height: 40px; border-radius: 50%;
|
||||
display: flex; align-items: center; justify-content:
|
||||
center; color: white; font-weight: bold;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.message-content { flex: 1;
|
||||
}
|
||||
.username { font-weight: 600; font-size: 0.9rem;
|
||||
margin-bottom: 5px; color: #333;
|
||||
}
|
||||
.message-text { background: white; padding: 12px 15px;
|
||||
border-radius: 10px; border-top-left-radius: 0;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); color:
|
||||
#333;
|
||||
}
|
||||
.btn { padding: 10px 20px; border: none; border-radius:
|
||||
8px; font-weight: 600; cursor: pointer; font-size:
|
||||
0.9rem; display: inline-flex; align-items: center;
|
||||
gap: 8px; transition: all 0.3s ease; margin-top:
|
||||
10px;
|
||||
}
|
||||
.btn-primary { background: #667eea; color: white;
|
||||
}
|
||||
.btn-primary:hover { background: #5568d3;
|
||||
}
|
||||
.btn-success { background: #48bb78; color: white;
|
||||
}
|
||||
.btn-success:hover { background: #38a169;
|
||||
}
|
||||
.btn-warning { background: #ed8936; color: white;
|
||||
}
|
||||
.btn-warning:hover { background: #dd6b20;
|
||||
}
|
||||
.btn-info { background: #4299e1; color: white;
|
||||
}
|
||||
.btn-info:hover { background: #3182ce;
|
||||
}
|
||||
.pros-cons { margin-top: 15px;
|
||||
}
|
||||
.pros, .cons { padding: 12px; border-radius: 8px;
|
||||
margin-bottom: 10px; font-size: 0.9rem;
|
||||
}
|
||||
.pros { background: #f0fff4; border: 1px solid #9ae6b4;
|
||||
}
|
||||
.pros strong { color: #2f855a;
|
||||
}
|
||||
.pros ul { color: #276749; margin-left: 20px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.cons { background: #fffaf0; border: 1px solid #fbd38d;
|
||||
}
|
||||
.cons strong { color: #c05621;
|
||||
}
|
||||
.cons ul, .cons p { color: #7c2d12; margin-left: 20px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.modal { display: none; position: fixed; top: 0; left:
|
||||
0; width: 100%; height: 100%; background: rgba(0, 0,
|
||||
0, 0.6); z-index: 1000; align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.modal.active { display: flex;
|
||||
}
|
||||
.modal-content { background: white; padding: 30px;
|
||||
border-radius: 15px; max-width: 400px; width: 90%;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.modal-header { display: flex; align-items: center; gap:
|
||||
10px; color: #667eea; margin-bottom: 20px;
|
||||
}
|
||||
.modal-header h3 { font-size: 1.3rem;
|
||||
}
|
||||
.modal-text { color: #333; margin-bottom: 20px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.btn-close { width: 100%; background: #667eea; color:
|
||||
white; padding: 12px; border: none; border-radius:
|
||||
8px; font-weight: 600; cursor: pointer; font-size:
|
||||
1rem;
|
||||
}
|
||||
.btn-close:hover { background: #5568d3;
|
||||
}
|
||||
.recommendation { background: linear-gradient(135deg,
|
||||
#667eea 0%, #764ba2 100%);
|
||||
color: white; padding: 30px; border-radius: 15px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.recommendation h3 { font-size: 1.8rem; margin-bottom:
|
||||
15px;
|
||||
}
|
||||
.recommendation p { font-size: 1.1rem; margin-bottom:
|
||||
15px;
|
||||
}
|
||||
.recommendation ul { list-style: none; margin-top: 15px;
|
||||
}
|
||||
.recommendation li { padding: 8px 0; font-size: 1rem;
|
||||
}
|
||||
.translated-content { display: none; margin-top: 10px;
|
||||
padding-top: 10px; border-top: 2px solid #e0e0e0;
|
||||
}
|
||||
.translated-content.show { display: block;
|
||||
}
|
||||
.translation-label { color: #666; font-size: 0.85rem;
|
||||
font-weight: 600; display: flex; align-items:
|
||||
center; gap: 5px; margin-bottom: 5px;
|
||||
}
|
||||
.translation-text { color: #333; font-style: italic;
|
||||
margin-top: 5px;
|
||||
}
|
||||
@media (max-width: 768px) { .header h1 { font-size:
|
||||
2rem;
|
||||
}
|
||||
.options-grid { grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style> </head> <body> <div class="container"> <div
|
||||
class="header">
|
||||
<h1>🌐 Opciones de Traducción</h1> <p>Sistema de
|
||||
Traducción para Grupos Multiidioma</p>
|
||||
</div> <div class="options-grid"> <!-- Opción 1 --> <div
|
||||
class="option-card">
|
||||
<div class="option-header"> <span
|
||||
class="option-icon">🌍</span> <h2
|
||||
class="option-title">Opción 1: Botón con
|
||||
Popup</h2>
|
||||
</div> <p class="option-description"> Agrega un
|
||||
botón debajo de cada mensaje que muestra un
|
||||
popup con la traducción al hacer clic.
|
||||
</p> <div class="demo-area"> <div
|
||||
class="message-bubble">
|
||||
<div class="avatar" style="background:
|
||||
#667eea;">J</div>
|
||||
<div class="message-content"> <div
|
||||
class="username">Juan</div> <div
|
||||
class="message-text">
|
||||
Hello everyone! How are you
|
||||
today?
|
||||
</div> <button class="btn
|
||||
btn-primary"
|
||||
onclick="showPopup('popup1')">
|
||||
🌐 Traducir </button> </div>
|
||||
</div>
|
||||
</div> <div class="pros-cons"> <div
|
||||
class="pros">
|
||||
<strong>✅ Ventajas:</strong> <ul>
|
||||
<li>No satura el chat</li> <li>Popup
|
||||
nativo de Telegram</li> <li>Fácil de
|
||||
implementar</li>
|
||||
</ul> </div> <div class="cons">
|
||||
<strong>⚠️ Limitación:</strong> <p>Máximo
|
||||
~200 caracteres en el popup</p>
|
||||
</div> </div> </div> <!-- Opción 2 --> <div
|
||||
class="option-card">
|
||||
<div class="option-header"> <span
|
||||
class="option-icon">💬</span> <h2
|
||||
class="option-title">Opción 2: Callback
|
||||
Alert</h2>
|
||||
</div> <p class="option-description"> Similar a
|
||||
la opción 1, usa el sistema de alertas de
|
||||
Telegram con show_alert=True.
|
||||
</p> <div class="demo-area"> <div
|
||||
class="message-bubble">
|
||||
<div class="avatar" style="background:
|
||||
#9f7aea;">M</div>
|
||||
<div class="message-content"> <div
|
||||
class="username">María</div> <div
|
||||
class="message-text">
|
||||
Bonjour! Comment ça va? </div>
|
||||
<button class="btn btn-info"
|
||||
onclick="showPopup('popup2')">
|
||||
🌐 Ver traducción </button>
|
||||
</div>
|
||||
</div> </div> <div class="pros-cons"> <div
|
||||
class="pros">
|
||||
<strong>✅ Ventajas:</strong> <ul>
|
||||
<li>Mismas ventajas que opción
|
||||
1</li> <li>Integración nativa</li>
|
||||
<li>Experiencia fluida</li>
|
||||
</ul> </div> <div class="cons">
|
||||
<strong>💡 Nota:</strong>
|
||||
<p>Prácticamente igual a la opción 1,
|
||||
diferencia en implementación backend</p>
|
||||
</div> </div> </div> <!-- Opción 3 --> <div
|
||||
class="option-card">
|
||||
<div class="option-header"> <span
|
||||
class="option-icon">✏️</span> <h2
|
||||
class="option-title">Opción 3: Editar
|
||||
Mensaje</h2>
|
||||
</div> <p class="option-description"> Agrega la
|
||||
traducción directamente en el mismo mensaje,
|
||||
expandible y colapsable.
|
||||
</p> <div class="demo-area"> <div
|
||||
class="message-bubble">
|
||||
<div class="avatar" style="background:
|
||||
#f6ad55;">K</div>
|
||||
<div class="message-content"> <div
|
||||
class="username">Klaus</div> <div
|
||||
class="message-text" id="message3">
|
||||
Guten Tag! Wie geht es dir? <div
|
||||
class="translated-content"
|
||||
id="translation3">
|
||||
<div
|
||||
class="translation-label">
|
||||
🌐 Traducción (ES):
|
||||
</div> <div
|
||||
class="translation-text">
|
||||
¡Buen día! ¿Cómo estás?
|
||||
</div>
|
||||
</div> </div> <button class="btn
|
||||
btn-warning" id="btn3"
|
||||
onclick="toggleTranslation('translation3',
|
||||
'btn3')">
|
||||
✏️ Mostrar traducción </button>
|
||||
</div>
|
||||
</div> </div> <div class="pros-cons"> <div
|
||||
class="pros">
|
||||
<strong>✅ Ventajas:</strong> <ul>
|
||||
<li>Sin límite de caracteres</li>
|
||||
<li>Todo en un solo mensaje</li>
|
||||
<li>Fácil de leer</li>
|
||||
</ul> </div> <div class="cons">
|
||||
<strong>⚠️ Consideración:</strong>
|
||||
<p>Modifica visualmente el mensaje,
|
||||
puede ser confuso inicialmente</p>
|
||||
</div> </div> </div> <!-- Opción 4 --> <div
|
||||
class="option-card">
|
||||
<div class="option-header"> <span
|
||||
class="option-icon">🚀</span> <h2
|
||||
class="option-title">Opción 4: Web App</h2>
|
||||
</div> <p class="option-description"> Interfaz
|
||||
web personalizada con HTML/CSS/JS para
|
||||
experiencia premium.
|
||||
</p> <div class="demo-area"> <div
|
||||
class="message-bubble">
|
||||
<div class="avatar" style="background:
|
||||
#48bb78;">S</div>
|
||||
<div class="message-content"> <div
|
||||
class="username">Sofia</div> <div
|
||||
class="message-text">
|
||||
Ciao! Come stai? </div> <button
|
||||
class="btn btn-success"
|
||||
onclick="showPopup('webapp')">
|
||||
🚀 Abrir traductor </button>
|
||||
</div>
|
||||
</div> </div> <div class="pros-cons"> <div
|
||||
class="pros">
|
||||
<strong>✅ Ventajas:</strong> <ul>
|
||||
<li>Interfaz totalmente
|
||||
personalizable</li> <li>Sin límites
|
||||
de contenido</li> <li>Experiencia
|
||||
premium</li>
|
||||
</ul> </div> <div class="cons">
|
||||
<strong>⚠️ Desventajas:</strong> <ul>
|
||||
<li>Más complejo de implementar</li>
|
||||
<li>Requiere hosting web</li>
|
||||
</ul> </div> </div> </div> </div> <!--
|
||||
Recomendación --> <div class="recommendation">
|
||||
<h3>💡 Nuestra Recomendación</h3> <p> Para un grupo
|
||||
multiidioma, te recomendamos <strong>la Opción
|
||||
3</strong> por las siguientes razones:
|
||||
</p> <ul> <li>✅ Sin límite de caracteres para
|
||||
traducciones largas</li> <li>✅ Mantiene el chat
|
||||
organizado y limpio</li> <li>✅ Los usuarios
|
||||
eligen cuándo ver las traducciones</li> <li>✅
|
||||
Fácil de implementar y mantener</li> <li>✅
|
||||
Mejor experiencia de usuario</li>
|
||||
</ul> </div> </div> <!-- Modales --> <div
|
||||
class="modal" id="popup1">
|
||||
<div class="modal-content"> <div class="modal-header">
|
||||
<span style="font-size: 24px;">🌐</span>
|
||||
<h3>Traducción</h3>
|
||||
</div> <p class="modal-text"> <strong>Inglés →
|
||||
Español:</strong><br><br> ¡Hola a todos! ¿Cómo
|
||||
están hoy?
|
||||
</p> <button class="btn-close"
|
||||
onclick="closePopup('popup1')">Cerrar</button>
|
||||
</div> </div> <div class="modal" id="popup2"> <div
|
||||
class="modal-content">
|
||||
<div class="modal-header"> <span style="font-size:
|
||||
24px;">🌐</span> <h3>Traducción</h3>
|
||||
</div> <p class="modal-text"> <strong>Francés →
|
||||
Español:</strong><br><br> ¡Hola! ¿Cómo estás?
|
||||
</p> <button class="btn-close"
|
||||
onclick="closePopup('popup2')">Cerrar</button>
|
||||
</div> </div> <div class="modal" id="webapp"> <div
|
||||
class="modal-content" style="background:
|
||||
linear-gradient(135deg, #48bb78 0%, #38a169 100%);
|
||||
color: white; max-width: 500px;">
|
||||
<div style="display: flex; justify-content:
|
||||
space-between; align-items: center; margin-bottom:
|
||||
20px;">
|
||||
<h3 style="color: white;">🌐 Traductor
|
||||
Avanzado</h3> <button
|
||||
onclick="closePopup('webapp')"
|
||||
style="background: none; border: none; color:
|
||||
white; font-size: 24px; cursor:
|
||||
pointer;">×</button>
|
||||
</div>
|
||||
|
||||
<div style="background: white; border-radius: 10px;
|
||||
padding: 15px; margin-bottom: 15px;">
|
||||
<p style="color: #666; font-size: 0.9rem;
|
||||
margin-bottom: 8px;">Texto original (IT):</p> <p
|
||||
style="color: #333; font-weight: 600;">Ciao!
|
||||
Come stai?</p>
|
||||
</div>
|
||||
|
||||
<div style="background: white; border-radius: 10px;
|
||||
padding: 15px; margin-bottom: 15px;">
|
||||
<p style="color: #666; font-size: 0.9rem;
|
||||
margin-bottom: 8px;">Traducción (ES):</p> <p
|
||||
style="color: #333; font-weight: 600;">¡Hola!
|
||||
¿Cómo estás?</p>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns:
|
||||
repeat(3, 1fr); gap: 10px; margin-bottom: 20px;">
|
||||
<button style="background:
|
||||
rgba(255,255,255,0.2); border: none; padding:
|
||||
12px; border-radius: 8px; color: white; cursor:
|
||||
pointer; font-weight: 600;">
|
||||
🇪🇸 ES </button> <button style="background:
|
||||
rgba(255,255,255,0.2); border: none; padding:
|
||||
12px; border-radius: 8px; color: white; cursor:
|
||||
pointer; font-weight: 600;">
|
||||
🇬🇧 EN </button> <button style="background:
|
||||
rgba(255,255,255,0.2); border: none; padding:
|
||||
12px; border-radius: 8px; color: white; cursor:
|
||||
pointer; font-weight: 600;">
|
||||
🇫🇷 FR </button> </div>
|
||||
|
||||
<button class="btn-close" style="background: white;
|
||||
color: #48bb78;"
|
||||
onclick="closePopup('webapp')">Cerrar</button>
|
||||
</div> </div> <script type="text/javascript">
|
||||
// Esperar a que el DOM esté completamente cargado
|
||||
document.addEventListener('DOMContentLoaded', function()
|
||||
{
|
||||
console.log('JavaScript cargado correctamente');
|
||||
|
||||
// Cerrar modal al hacer clic fuera
|
||||
document.querySelectorAll('.modal').forEach(modal =>
|
||||
{
|
||||
modal.addEventListener('click', function(e) { if
|
||||
(e.target === this) {
|
||||
this.classList.remove('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
function showPopup(id) { console.log('Mostrando popup: '
|
||||
+ id); const popup = document.getElementById(id); if
|
||||
(popup) {
|
||||
popup.classList.add('active');
|
||||
} else {
|
||||
console.error('No se encontró el popup: ' + id);
|
||||
}
|
||||
}
|
||||
function closePopup(id) { console.log('Cerrando popup: '
|
||||
+ id); const popup = document.getElementById(id); if
|
||||
(popup) {
|
||||
popup.classList.remove('active');
|
||||
}
|
||||
}
|
||||
function toggleTranslation(translationId, btnId) {
|
||||
console.log('Toggle traducción: ' + translationId);
|
||||
const translation =
|
||||
document.getElementById(translationId); const btn =
|
||||
document.getElementById(btnId);
|
||||
|
||||
if (translation && btn) { if
|
||||
(translation.classList.contains('show')) {
|
||||
translation.classList.remove('show');
|
||||
btn.innerHTML = '✏️ Mostrar traducción';
|
||||
btn.className = 'btn btn-warning';
|
||||
} else {
|
||||
translation.classList.add('show');
|
||||
btn.innerHTML = '❌ Ocultar traducción';
|
||||
btn.className = 'btn btn-warning';
|
||||
}
|
||||
} else {
|
||||
console.error('No se encontraron elementos');
|
||||
}
|
||||
}
|
||||
</script> </body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user