Commit inicial con archivos existentes
This commit is contained in:
209
discord/admin/discord_translation_options.php
Executable file
209
discord/admin/discord_translation_options.php
Executable file
@@ -0,0 +1,209 @@
|
||||
<?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 - Discord Bot</title>
|
||||
<style>
|
||||
:root {
|
||||
--discord-blurple: #5865F2;
|
||||
--discord-green: #57F287;
|
||||
--discord-yellow: #FEE75C;
|
||||
--discord-red: #ED4245;
|
||||
--discord-dark: #2c2f33;
|
||||
--discord-gray: #99aab5;
|
||||
--discord-light-gray: #f2f3f5;
|
||||
--discord-chat-bg: #36393f;
|
||||
}
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body {
|
||||
font-family: 'gg sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
background: var(--discord-dark);
|
||||
color: white;
|
||||
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; color: var(--discord-gray); }
|
||||
.options-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 25px; margin-bottom: 30px; }
|
||||
.option-card { background: var(--discord-chat-bg); border-radius: 8px; padding: 25px; box-shadow: 0 8px 20px rgba(0,0,0,0.3); transition: transform 0.3s ease; }
|
||||
.option-card:hover { transform: translateY(-5px); }
|
||||
.option-header { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
|
||||
.option-icon { font-size: 28px; }
|
||||
.option-title { font-size: 1.5rem; font-weight: bold; color: white; }
|
||||
.option-description { color: var(--discord-gray); font-size: 1rem; margin-bottom: 20px; }
|
||||
.demo-area { background: var(--discord-dark); border-radius: 8px; padding: 20px; border: 1px solid #40444b; }
|
||||
.discord-message { display: flex; gap: 15px; }
|
||||
.avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
|
||||
.message-content { display: flex; flex-direction: column; }
|
||||
.username { font-weight: 600; font-size: 1rem; margin-bottom: 5px; color: var(--discord-green); }
|
||||
.message-text { color: #dcddde; line-height: 1.4; }
|
||||
.discord-button { padding: 10px 16px; border: none; border-radius: 3px; font-weight: 600; cursor: pointer; font-size: 0.9rem; transition: background-color 0.2s; margin-top: 10px; background-color: #4f545c; color: white; }
|
||||
.discord-button:hover { background-color: #5d636b; }
|
||||
.pros-cons { margin-top: 20px; }
|
||||
.pros, .cons { padding: 12px; border-radius: 8px; margin-bottom: 10px; font-size: 0.9rem; }
|
||||
.pros { background: rgba(87, 242, 135, 0.1); border-left: 3px solid var(--discord-green); }
|
||||
.pros strong { color: var(--discord-green); }
|
||||
.cons { background: rgba(254, 231, 92, 0.1); border-left: 3px solid var(--discord-yellow); }
|
||||
.cons strong { color: var(--discord-yellow); }
|
||||
ul { color: var(--discord-gray); margin-left: 20px; margin-top: 5px; }
|
||||
.recommendation { background: var(--discord-blurple); color: white; padding: 30px; border-radius: 8px; text-align: center; }
|
||||
|
||||
/* Modal for Ephemeral Message */
|
||||
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1000; align-items: center; justify-content: center; }
|
||||
.modal.active { display: flex; }
|
||||
.modal-content { background: var(--discord-chat-bg); padding: 20px; border-radius: 8px; max-width: 450px; width: 90%; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
|
||||
.modal-header { color: var(--discord-green); font-weight: bold; margin-bottom: 15px; }
|
||||
.modal-body { color: #dcddde; }
|
||||
.modal-body .translation { margin-bottom: 10px; }
|
||||
.modal-body .translation strong { color: white; }
|
||||
.modal-footer { font-size: 0.8rem; color: var(--discord-gray); margin-top: 15px; text-align: center; }
|
||||
|
||||
/* Spoiler styles */
|
||||
.spoiler { background-color: #202225; color: transparent; border-radius: 3px; cursor: pointer; padding: 0 2px; }
|
||||
.spoiler.revealed { background-color: transparent; color: inherit; }
|
||||
|
||||
/* Thread styles */
|
||||
.thread-link { color: var(--discord-blurple); font-weight: 600; cursor: pointer; font-size: 0.9rem; margin-top: 8px; }
|
||||
.thread-view { display: none; margin-top: 15px; padding-top: 15px; border-top: 1px solid #40444b; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1><img src="https://discord.com/assets/f8389ca1a741a115313a74fbbd352562.svg" alt="Discord Logo" width="40" style="vertical-align: middle;"> Opciones de Traducción para Discord</h1>
|
||||
<p>Demostración visual de métodos no invasivos para mostrar traducciones.</p>
|
||||
</div>
|
||||
|
||||
<div class="options-grid">
|
||||
<!-- Opción 1: Botón con Respuesta Efímera -->
|
||||
<div class="option-card">
|
||||
<div class="option-header"><span class="option-icon">🤫</span> <h2 class="option-title">Botón Efímero</h2></div>
|
||||
<p class="option-description">Un botón "Traducir" bajo el mensaje original. Al pulsarlo, se muestra una traducción que sólo el usuario que ha hecho clic puede ver.</p>
|
||||
<div class="demo-area">
|
||||
<div class="discord-message">
|
||||
<img src="https://cdn.discordapp.com/embed/avatars/1.png" alt="avatar" class="avatar">
|
||||
<div class="message-content">
|
||||
<span class="username">UserFromFrance</span>
|
||||
<div class="message-text">Bonjour tout le monde! C'est une démo.</div>
|
||||
<button class="discord-button" onclick="showPopup('ephemeral-popup')">🌐 Traducir</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pros-cons">
|
||||
<div class="pros"><strong>✅ Ventajas:</strong><ul><li>No satura el chat general.</li><li>La traducción es bajo demanda.</li><li>Experiencia de usuario moderna y limpia.</li></ul></div>
|
||||
<div class="cons"><strong>⚠️ Consideración:</strong><p style="margin-left: 20px; color: var(--discord-gray);">Requiere manejar interacciones (clicks de botón) en el backend.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Opción 2: Hilos -->
|
||||
<div class="option-card">
|
||||
<div class="option-header"><span class="option-icon">🧵</span> <h2 class="option-title">Hilos (Threads)</h2></div>
|
||||
<p class="option-description">Se crea un hilo a partir del mensaje original, y la traducción se publica dentro de ese hilo, manteniendo el canal principal limpio.</p>
|
||||
<div class="demo-area">
|
||||
<div class="discord-message">
|
||||
<img src="https://cdn.discordapp.com/embed/avatars/2.png" alt="avatar" class="avatar">
|
||||
<div class="message-content">
|
||||
<span class="username" style="color: #f1c40f;">UserFromGermany</span>
|
||||
<div class="message-text">Guten Tag, dies ist eine weitere Demo.</div>
|
||||
<div class="thread-link" onclick="toggleThread('thread-view')">↪️ Ver Hilo (1 respuesta)</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="thread-view" id="thread-view">
|
||||
<div class="discord-message">
|
||||
<img src="https://www.google.com/s2/favicons?domain=discord.com" alt="avatar" class="avatar">
|
||||
<div class="message-content">
|
||||
<span class="username" style="color: #5865F2;">Translation Bot</span>
|
||||
<div class="message-text"><strong>Traducción (ES):</strong><br>Buenas tardes, esta es otra demo.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pros-cons">
|
||||
<div class="pros"><strong>✅ Ventajas:</strong><ul><li>Mantiene el canal principal 100% limpio.</li><li>Permite discusiones sobre la traducción en el hilo.</li><li>Ideal para mensajes largos.</li></ul></div>
|
||||
<div class="cons"><strong>⚠️ Consideración:</strong><p style="margin-left: 20px; color: var(--discord-gray);">Puede generar muchas notificaciones de hilos si hay mucha actividad.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Opción 3: Spoilers -->
|
||||
<div class="option-card">
|
||||
<div class="option-header"><span class="option-icon">⬛</span> <h2 class="option-title">Spoilers</h2></div>
|
||||
<p class="option-description">La traducción se añade al mensaje original o en una respuesta, pero oculta tras una etiqueta de spoiler que se revela al hacer clic.</p>
|
||||
<div class="demo-area">
|
||||
<div class="discord-message">
|
||||
<img src="https://cdn.discordapp.com/embed/avatars/3.png" alt="avatar" class="avatar">
|
||||
<div class="message-content">
|
||||
<span class="username" style="color: #e91e63;">UserFromItaly</span>
|
||||
<div class="message-text">
|
||||
Ciao! Benvenuto alla demo finale.<br>
|
||||
<strong>Traducción:</strong> <span class="spoiler" onclick="this.classList.toggle('revealed')">¡Hola! Bienvenido a la demo final.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pros-cons">
|
||||
<div class="pros"><strong>✅ Ventajas:</strong><ul><li>Muy fácil de implementar.</li><li>No requiere interacciones complejas.</li><li>La traducción está en el mismo contexto.</li></ul></div>
|
||||
<div class="cons"><strong>⚠️ Consideración:</strong><p style="margin-left: 20px; color: var(--discord-gray);">Añade "ruido" visual al chat, aunque esté oculto.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="recommendation">
|
||||
<h3>💡 Nuestra Recomendación</h3>
|
||||
<p>Para la mejor experiencia de usuario y mantener los canales limpios, la **Opción 1 (Botón Efímero)** es la más recomendada. Es moderna, eficiente y le da el control total al usuario sin interrumpir a los demás.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal para la demo efímera -->
|
||||
<div class="modal" id="ephemeral-popup" onclick="closePopup('ephemeral-popup')">
|
||||
<div class="modal-content" onclick="event.stopPropagation()">
|
||||
<div class="modal-header">Traducción del mensaje</div>
|
||||
<div class="modal-body">
|
||||
<div class="translation">
|
||||
<strong>Inglés:</strong><br>
|
||||
<span>Hello everyone! This is a demo.</span>
|
||||
</div>
|
||||
<div class="translation">
|
||||
<strong>Español:</strong><br>
|
||||
<span>¡Hola a todos! Esto es una demo.</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">Solo tú puedes ver este mensaje.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function showPopup(id) {
|
||||
document.getElementById(id).classList.add('active');
|
||||
}
|
||||
function closePopup(id) {
|
||||
document.getElementById(id).classList.remove('active');
|
||||
}
|
||||
function toggleThread(id) {
|
||||
const threadView = document.getElementById(id);
|
||||
if (threadView.style.display === 'block') {
|
||||
threadView.style.display = 'none';
|
||||
} else {
|
||||
threadView.style.display = 'block';
|
||||
}
|
||||
}
|
||||
// Cerrar modal con la tecla Escape
|
||||
document.addEventListener('keydown', function (event) {
|
||||
if (event.key === "Escape") {
|
||||
const activeModal = document.querySelector('.modal.active');
|
||||
if (activeModal) {
|
||||
closePopup(activeModal.id);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user