<?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>
