juan/Fiera_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Re-linked PDF presentation to google slides

Browse Source
This commit is contained in:
Juan Pablo Corredor 2026-06-03 11:58:51 +02:00
parent 4b188f6079
commit 2d120a9d72
2 changed files with 56 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/resources/css/style.css
View File

@ -192,6 +192,45 @@ h2 {
background: rgba(255, 255, 255, 0.15);
}
.modal-fullscreen {
position: absolute;
top: -1.5rem;
right: 2.1rem;
background: transparent;
color: #fff;
font-size: 1.35rem;
line-height: 1;
padding: 0 0.4rem;
border-radius: 4px;
cursor: pointer;
border: none;
font-family: inherit;
}
.modal-fullscreen:hover {
background: rgba(255, 255, 255, 0.15);
}
/* Reposition controls inside the box when in fullscreen */
.modal-box:fullscreen,
.modal-box:-webkit-full-screen {
border-radius: 0;
width: 100vw;
height: 100vh;
}
.modal-box:fullscreen .modal-close,
.modal-box:-webkit-full-screen .modal-close {
top: 0.5rem;
right: 0.5rem;
}
.modal-box:fullscreen .modal-fullscreen,
.modal-box:-webkit-full-screen .modal-fullscreen {
top: 0.5rem;
right: 3rem;
}
#modal-video {
width: 100%;
height: 100%;

18
src/templates/index.html
View File

@ -52,7 +52,7 @@
<h3 class="card-title">{{ t.card3_title }}</h3>
<p class="card-text">{{ t.card3_text }}</p>
</div>
<div class="action-card" data-action="pdf" data-src="/resources/AI_Agro_Support.pdf">
<div class="action-card" data-action="iframe" data-src="https://docs.google.com/presentation/d/1YEIr3WEGZccl-NXYo-V3IWj8-fsljsBsEeBOBx_yESM/embed?start=false&loop=false">
<div class="card-icon">
<img src="/resources/assistente-virtuale.png" alt="Assistente Virtuale Icon" width="100%" height="100%"/>
</div>
@ -64,6 +64,7 @@
<!-- Shared modal overlay -->
<div id="modal" class="modal hidden" role="dialog" aria-modal="true">
<div class="modal-box">
<button class="modal-fullscreen" id="modal-fullscreen" aria-label="Toggle fullscreen">⛶</button>
<button class="modal-close" id="modal-close" aria-label="{{ t.close_label }}">&times;</button>
<video id="modal-video" controls></video>
<iframe id="modal-iframe" src="" allowfullscreen></iframe>
@ -77,6 +78,8 @@
const modalIframe = document.getElementById('modal-iframe');
const modalPdf = document.getElementById('modal-pdf');
const closeBtn = document.getElementById('modal-close');
const fullscreenBtn = document.getElementById('modal-fullscreen');
const modalBox = document.querySelector('.modal-box');
function openModal(action, src) {
if (action === 'video') {
@ -99,6 +102,7 @@
}
function closeModal() {
if (document.fullscreenElement) document.exitFullscreen();
modal.classList.add('hidden');
modalVideo.pause();
modalVideo.src = '';
@ -106,6 +110,18 @@
modalPdf.src = '';
}
fullscreenBtn.addEventListener('click', () => {
if (!document.fullscreenElement) {
modalBox.requestFullscreen();
} else {
document.exitFullscreen();
}
});
document.addEventListener('fullscreenchange', () => {
fullscreenBtn.textContent = document.fullscreenElement ? '⊡' : '⛶';
});
document.querySelectorAll('[data-action]').forEach(btn => {
btn.addEventListener('click', () => openModal(btn.dataset.action, btn.dataset.src));
});