76 lines
2.6 KiB
HTML
76 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Bienvenido</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet" />
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" />
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<h1>Bienvenido</h1>
|
|
<div class="buttons">
|
|
<button data-action="video" data-src="/resources/videos/video1.mp4">Quaderno di campagna digitale</button>
|
|
<button data-action="video" data-src="/resources/videos/video2.mp4">Assistente virtuale</button>
|
|
<button data-action="iframe" data-src="http://localhost:3000/viewer?userId=1398&lang=it-IT">Reconoscimento fenologico</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Shared modal overlay -->
|
|
<div id="modal" class="modal hidden" role="dialog" aria-modal="true">
|
|
<div class="modal-box">
|
|
<button class="modal-close" id="modal-close" aria-label="Cerrar">×</button>
|
|
<video id="modal-video" controls></video>
|
|
<iframe id="modal-iframe" src="" allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const modal = document.getElementById('modal');
|
|
const modalVideo = document.getElementById('modal-video');
|
|
const modalIframe = document.getElementById('modal-iframe');
|
|
const closeBtn = document.getElementById('modal-close');
|
|
|
|
function openModal(action, src) {
|
|
if (action === 'video') {
|
|
modalVideo.src = src;
|
|
modalVideo.style.display = 'block';
|
|
modalIframe.style.display = 'none';
|
|
modalIframe.src = '';
|
|
} else {
|
|
modalIframe.src = src;
|
|
modalIframe.style.display = 'block';
|
|
modalVideo.style.display = 'none';
|
|
modalVideo.pause();
|
|
modalVideo.src = '';
|
|
}
|
|
modal.classList.remove('hidden');
|
|
}
|
|
|
|
function closeModal() {
|
|
modal.classList.add('hidden');
|
|
modalVideo.pause();
|
|
modalVideo.src = '';
|
|
modalIframe.src = '';
|
|
}
|
|
|
|
document.querySelectorAll('[data-action]').forEach(btn => {
|
|
btn.addEventListener('click', () => openModal(btn.dataset.action, btn.dataset.src));
|
|
});
|
|
|
|
closeBtn.addEventListener('click', closeModal);
|
|
|
|
modal.addEventListener('click', e => {
|
|
if (e.target === modal) closeModal();
|
|
});
|
|
|
|
document.addEventListener('keydown', e => {
|
|
if (e.key === 'Escape') closeModal();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|