Update index.html

index.html

@@ -137,6 +137,15 @@
         background-color: var(--analyze-button-hover-bg);
     }
 
+    #show-demo-btn { /* New style for demo button */
+        background-color: var(--info-color); /* Blue */
+        margin-left: 0.2rem; /* Consistent spacing */
+    }
+
+    #show-demo-btn:hover {
+        background-color: #1976d2; /* Darker Blue */
+    }
+
 
     .character-count {
         text-align: right;
@@ -615,6 +624,85 @@
         border: 2px solid var(--secondary-color); 
         flex-shrink: 0; 
     }
+
+    /* Modal for Demo Video */
+    .modal-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.7);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 1000;
+        visibility: hidden; /* Use visibility and opacity for smooth transitions */
+        opacity: 0;
+        transition: visibility 0s, opacity 0.3s ease;
+    }
+
+    .modal-overlay.active {
+        visibility: visible;
+        opacity: 1;
+    }
+
+    .modal-content {
+        background-color: var(--container-bg-color);
+        padding: 20px;
+        border-radius: 10px;
+        position: relative;
+        max-width: 90%;
+        max-height: 90%;
+        overflow: auto;
+        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .dark-mode .modal-content {
+        background-color: var(--container-bg-color); 
+    }
+
+    .modal-close-btn {
+        position: absolute;
+        top: 10px;
+        right: 15px;
+        font-size: 28px;
+        cursor: pointer;
+        color: var(--text-color);
+        transition: color 0.2s ease;
+    }
+
+    .modal-close-btn:hover {
+        color: var(--clear-button-bg); 
+    }
+
+    #demo-video {
+        width: 100%;
+        max-width: 700px; /* Limit video size for better presentation */
+        height: auto;
+        margin-top: 15px;
+        border-radius: 8px;
+    }
+
+    .modal-content h3 {
+        color: var(--primary-color);
+        margin-top: 0;
+        margin-bottom: 10px;
+    }
+
+    @media (max-width: 768px) {
+        .modal-content {
+            padding: 15px;
+        }
+        .modal-close-btn {
+            font-size: 24px;
+            top: 5px;
+            right: 10px;
+        }
+    }
 </style>
 
 </head>
@@ -692,6 +780,7 @@
             <div class="button-group">
                 <button id="clear-btn">Clear Input</button> <!-- NO onclick attribute here -->
                 <button id="predict-btn">Submit</button>   <!-- NO onclick attribute here -->
+                <button id="show-demo-btn"><i class="fas fa-video"></i> Show Demo</button> <!-- NEW DEMO BUTTON -->
             </div>
         </div>
 
@@ -858,7 +947,7 @@
                         <li><strong>Interpretation:</b> The model considers polarity, likely in balance with hydrophobicity. An optimal AMP efficacy is often linked to having both hydrophobic and polar residues to facilitate membrane interaction and solubility.</li>
                     </ul>
                 </li>
-                <li><strong>Solvent Accessibility (SolventAccessibilityD3001):</strong>
+                <li><strong>Solvent Accessibility (SolventAccessibilityD3001):</b>
                     <ul>
                         <li><strong>Description:</b> Reflects how exposed the residues are to the solvent (water).</li>
                         <li><strong>Interpretation:</b> Solvent-accessible residues positively contribute to AMP prediction. This might indicate that exposed residues facilitate interaction with bacterial membranes or the surrounding environment.</li>
@@ -886,7 +975,7 @@
                         <li><strong>Interpretation:<b> Higher values of hydrophobicity autocorrelation are positively associated with AMP prediction. This likely reflects the importance of hydrophobic clustering in forming amphipathic structures, such as α-helices, which are common and effective in AMPs.</b></b></li>
                     </ul>
                 </li>
-                <li><strong>GearyAuto_Steric30 & GearyAuto_Steric29:</strong>
+                <li><strong>GearyAuto_Steric30 & GearyAuto_Steric29:</b>
                     <ul>
                         <li><strong>Description:</b> Reflect peptide backbone flexibility and steric properties at spatial lags of 30 and 29.</li>
                         <li><strong>Interpretation:</b> These features have a positive SHAP impact, suggesting that a certain degree of peptide backbone flexibility may be beneficial for AMP action. Flexibility could enhance the peptide's ability to interact with and adapt to diverse bacterial membrane structures.</li>
@@ -983,6 +1072,19 @@
     </div>
 </div>
 
+<!-- NEW DEMO VIDEO MODAL -->
+<div id="demo-modal" class="modal-overlay">
+    <div class="modal-content">
+        <span class="modal-close-btn">&times;</span>
+        <h3>EPIC-AMP Demo</h3>
+        <video id="demo-video" controls autoplay loop muted>
+            <source src="demo.mp4" type="video/mp4">
+            Your browser does not support the video tag.
+        </video>
+    </div>
+</div>
+<!-- END NEW DEMO VIDEO MODAL -->
+
 <footer>
     <p>© 2025, Bioinformatics and Computational biology Unit, BCBU</p>
     <address>
@@ -1019,6 +1121,13 @@
     const emailErrorDiv = document.getElementById('email-error');
     const emailStatusDiv = document.getElementById('email-status');
 
+    // NEW DEMO VIDEO ELEMENTS
+    const showDemoBtn = document.getElementById('show-demo-btn');
+    const demoModal = document.getElementById('demo-modal');
+    const modalCloseBtn = document.getElementById('modal-close-btn');
+    const demoVideo = document.getElementById('demo-video');
+
+
     let clientInstancePrediction; // Only prediction client will be connected
     let clientInstanceEmail = null;    // Email client will NOT be connected (explicitly null)
     let debounceTimer;
@@ -1101,6 +1210,35 @@
         if (clearBtn) clearBtn.addEventListener('click', clearInput);
         if (predictBtn) predictBtn.addEventListener('click', classifySequenceDebounced);
 
+        // NEW: Attach event listeners for demo video
+        if (showDemoBtn) {
+            showDemoBtn.addEventListener('click', () => {
+                if (demoModal) demoModal.classList.add('active');
+                if (demoVideo) demoVideo.play();
+            });
+        }
+        if (modalCloseBtn) {
+            modalCloseBtn.addEventListener('click', () => {
+                if (demoModal) demoModal.classList.remove('active');
+                if (demoVideo) {
+                    demoVideo.pause();
+                    demoVideo.currentTime = 0; // Reset video to start
+                }
+            });
+        }
+        // Close modal if clicking outside the content
+        if (demoModal) {
+            demoModal.addEventListener('click', (e) => {
+                if (e.target === demoModal) {
+                    if (demoModal) demoModal.classList.remove('active');
+                    if (demoVideo) {
+                        demoVideo.pause();
+                        demoVideo.currentTime = 0;
+                    }
+                }
+            });
+        }
+
 
         clearInput(); 
     };