Re-linked PDF presentation to google slides

src/resources/css/style.css

@@ -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%;

src/templates/index.html

@@ -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));
     });