Embed Just OS chatbot in website

content/just_os_chatbot/index.md

@@ -0,0 +1,6 @@
+---
+title: ""
+
+---
+
+{{< just_os_chat >}}

layouts/_default/baseof.html

@@ -38,5 +38,7 @@
 
   {{ partial "citation" . }}
 
+  {{ partial "chatbot" . }}
+
 </body>
 </html>

layouts/partials/chatbot.html

@@ -0,0 +1,211 @@
+<style>
+    #just-os-widget {
+        position: fixed;
+        top: 100px;
+        /* Below navbar */
+        right: 20px;
+        bottom: auto;
+        left: auto;
+        z-index: 9999;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        /* Right align */
+        font-family: sans-serif;
+    }
+
+    #just-os-btn {
+        background: none;
+        border: none;
+        cursor: pointer;
+        padding: 0;
+        transition: transform 0.3s ease;
+        position: relative;
+        outline: none;
+        z-index: 2;
+    }
+
+    #just-os-btn:hover {
+        transform: scale(1.05);
+    }
+
+    /* The icon */
+    #just-os-img {
+        width: 80px;
+        height: auto;
+        display: block;
+        filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
+    }
+
+    /* The speech bubble */
+    #just-os-bubble {
+        position: absolute;
+        right: 90px;
+        /* To the left of the button */
+        left: auto;
+        top: 20px;
+        background: white;
+        color: #333;
+        padding: 8px 12px;
+        border-radius: 20px;
+        border: 2px solid #333;
+        white-space: nowrap;
+        font-size: 0.9rem;
+        font-weight: bold;
+        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+        opacity: 0;
+        transform: translateX(-10px);
+        transition: all 0.3s ease;
+        pointer-events: none;
+    }
+
+    #just-os-btn:hover #just-os-bubble {
+        opacity: 1;
+        transform: translateX(0);
+    }
+
+    /* Initial state: User image shows it visible. */
+    .bubble-visible {
+        opacity: 1 !important;
+        transform: translateX(0) !important;
+    }
+
+    /* The chat window */
+    #just-os-window {
+        display: none;
+        width: 360px;
+        height: 500px;
+        background: white;
+        border: 2px solid #333;
+        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
+        border-radius: 12px;
+        overflow: hidden;
+        flex-direction: column;
+        margin-top: 15px;
+        /* space between button and window */
+        margin-bottom: 0;
+        animation: slideIn 0.3s ease-out forwards;
+    }
+
+    @keyframes slideIn {
+        from {
+            opacity: 0;
+            transform: translateY(-20px);
+        }
+
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    .chat-header {
+        background: #f8f9fa;
+        padding: 10px 15px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 1px solid #eee;
+    }
+
+    .chat-header span {
+        font-weight: bold;
+        color: #0d3c74;
+    }
+
+    .close-btn {
+        background: none;
+        border: none;
+        font-size: 1.5rem;
+        line-height: 1;
+        cursor: pointer;
+        color: #666;
+    }
+
+    .close-btn:hover {
+        color: #000;
+    }
+
+    /* Responsive tweak */
+    @media (max-width: 1100px) {
+        #just-os-widget {
+            top: 150px;
+        }
+
+        #just-os-window {
+            top: 150px;
+        }
+    }
+
+    @media (max-width: 768px) {
+        #just-os-widget {
+            top: 180px;
+        }
+
+        #just-os-window {
+            width: 90vw;
+            height: 60vh;
+            top: 180px;
+            right: 5vw;
+            left: auto;
+            position: fixed;
+        }
+    }
+</style>
+
+{{ if ne .RelPermalink "/just_os_chatbot/" }}
+<div id="just-os-widget">
+
+    <!-- Toggle Button (First) -->
+    <button id="just-os-btn" onclick="toggleJustOS()" aria-label="Open Chatbot">
+        <img id="just-os-img" src="/img/just_os_icon.webp" alt="Chat with us">
+        <div id="just-os-bubble">
+            How can I help you?
+        </div>
+    </button>
+
+    <!-- Chat Window (Second, appears below) -->
+    <div id="just-os-window">
+        <div class="chat-header">
+            <span>JUST-OS</span>
+            <a style="margin: auto; font-size: 16px; color: #666;" href="/just_os_chatbot/" target="_blank">Open in new
+                tab</a>
+            <button class="close-btn" onclick="toggleJustOS()">&times;</button>
+        </div>
+        <div class="chat-frame-wrapper" style="flex: 1; overflow: hidden; position: relative; width: 100%;">
+            <iframe src="https://just-os.web.rug.nl/"
+                style="width: 100%; height: 1250px; border: none; margin-top: -160px; " title="Just OS Chatbot">
+            </iframe>
+        </div>
+    </div>
+
+</div>
+{{ end }}
+
+<script>
+    function toggleJustOS() {
+        const win = document.getElementById('just-os-window');
+        const bubble = document.getElementById('just-os-bubble');
+
+        if (!win || !bubble) return;
+
+        if (win.style.display === 'flex') {
+            win.style.display = 'none';
+            bubble.classList.add('bubble-visible'); // Show bubble when closed
+        } else {
+            win.style.display = 'flex';
+            bubble.classList.remove('bubble-visible'); // Hide bubble when open
+        }
+    }
+
+    // Auto-toggle helper bubble every 3 seconds
+    setInterval(() => {
+        const bubble = document.getElementById('just-os-bubble');
+        const win = document.getElementById('just-os-window');
+
+        // Only toggle if the chat window is NOT open
+        if (bubble && win && win.style.display !== 'flex') {
+            bubble.classList.toggle('bubble-visible');
+        }
+    }, 10000);
+</script>

layouts/shortcodes/just_os_chat.html

@@ -0,0 +1,13 @@
+<!-- <style>
+    .article-container {
+        max-width: 90% !important;
+        padding: 20px !important;
+    }
+</style> -->
+
+<div class="just-os-chat-wrapper"
+    style="width: 100%; max-width: 1200px; height: 1150px; overflow: hidden; margin: 0 auto; border: 1px solid #eee; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
+    <iframe src="https://just-os.web.rug.nl/" style="width: 100%; height: 1400px; border: none; margin-top: -120px;"
+        title="Just OS Chatbot" scrolling="no">
+    </iframe>
+</div>