90 lines
3.3 KiB
HTML
90 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="it">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>3a sviluppi agro-tech</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>
|
|
<header>
|
|
<h1>3a sviluppi agro-tech</h1>
|
|
<h2>Innovazione digitale per l'agricoltura</h2>
|
|
</header>
|
|
|
|
<div class="cards-row">
|
|
<div class="action-card" data-action="video" data-src="/resources/videos/video1.mp4">
|
|
<div class="card-icon"></div>
|
|
<h3 class="card-title">Quaderno di campagna digitale</h3>
|
|
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vehicula arcu vel ligula fermentum.</p>
|
|
</div>
|
|
<div class="action-card" data-action="video" data-src="/resources/videos/video2.mp4">
|
|
<div class="card-icon"></div>
|
|
<h3 class="card-title">Assistente virtuale per la difesa fitopatologica</h3>
|
|
<p class="card-text">Pellentesque habitant morbi tristique senectus et netus malesuada fames ac turpis egestas.</p>
|
|
</div>
|
|
<div class="action-card" data-action="iframe" data-src="http://localhost/viewer?userId=1398&lang=it-IT">
|
|
<div class="card-icon"></div>
|
|
<h3 class="card-title">Riconoscimento fenologico</h3>
|
|
<p class="card-text">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</p>
|
|
</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="Chiudi">×</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>
|