Widget: Homepage: Difference between revisions

Revision as of 16:28, 29 April 2024

Second version of the LINKS Community Center homepage.
Do not modify!

@@ Line 229: / Line 229: @@
              background-color: var(--safe-color);
              border-color: var(--safe-color);
+        }
+        /* CHATBOT WINDOW STYLES */
+        #chat-button {
+            position: fixed;
+            right: 10px;
+            bottom: 10px;
+            border-radius: 5px;
+            border: 1px solid var(--links-grey);
+            user-select: none;
+            cursor: pointer;
+        }
+        #chat-window {
+            position: fixed;
+            right: 10px;
+            bottom: 70px;
+            background-color: #f8f9fa;
+            width: 20vw;
+            height: 50vh;
+            border-radius: 15px;
+            border: 2px solid var(--links-blue);
+            overflow: hidden;
+            box-shadow: -5px 5px 5px 5px rgb(0 0 0 / 10%);
+        }
+        #chat-window-controls {
+            padding: 5px;
+            display: flex;
+            justify-content: space-between;
+        }
+        #chat-window-controls button {
+            font-size: 1.2rem;
+            border-radius: 2.5rem;
+            border: 1px solid var(--links-blue);
+            color: #fff;
+            background-color: var(--links-blue);
+            cursor: pointer;
+        }
+        .maximized-chat {
+            width: auto !important;
+            height: auto !important;
+            left: 10px;
+            top: 10px;
+        }
+        .closed-chat {
+            display: none;
+            pointer-events: none;
+        }
+        #chat-window.maximized-chat #resize-chat {
+            transform: rotate(180deg);
          }
      </style>
@@ Line 498: / Line 553: @@
              }
          </script>
+        <!-- BEGIN CHAT BOT -->
+        <div id="chat-wrapper">
+            <div id="chat-window">
+                <div id="chat-window-controls">
+                    <button id="resize-chat" style="visibility:hidden">&larr;</button>
+                    <button id="close-chat">&times;</button>
+                </div>
+                <div id="chat-window-content">
+                    <div style="padding: 1rem; text-align: center;">
+                        <img src="https://synergiesproject.eu/wp-content/uploads/2024/04/synergies_project_logo-600x204.png"
+                            style="height: 3rem;">
+                        <br><br>
+                        If you want to know more about the evolution of the LINKS Community Center,
+                        have a closer look at SYNERGIES.<br>
+                        <br>
+                        <a href="https://synergiesproject.eu/" target="_blank">synergiesproject.eu</a>
+                    </div>
+                </div>
+            </div>
+            <div id="chat-button">
+                <img src="https://synergiesproject.eu/wp-content/uploads/2024/04/synergies_project_logo-600x204.png"
+                    style="height: 50px; margin: 0;" alt="SYNERGIES">
+            </div>
+        </div>
+        <script>
+            const chatWindow = document.getElementById('chat-window');
+            const chatContent = document.getElementById('chat-window-content');
+            const resizeBtn = document.getElementById('resize-chat');
+            const closeBtn = document.getElementById('close-chat');
+            const chatBtn = document.getElementById('chat-button');
+            chatBtn.addEventListener('click', () => {
+                chatWindow.classList.toggle('closed-chat');
+            });
+            resizeBtn.addEventListener('click', () => {
+                chatWindow.classList.toggle('maximized-chat');
+            });
+            closeBtn.addEventListener('click', () => {
+                chatWindow.classList.add('closed-chat');
+            });
+            const url = 'http://192.168.100.172:4200';
+            fetch(url, { method: 'HEAD' })
+                .then(response => {
+                    if (response.ok) {
+                        resizeBtn.style.visibility = 'visible';
+                        chatContent.innerHTML = `
+                        <iframe id="embedded-page" src="${url}" frameborder="0"
+                        style="width:100%;aspect-ratio:16/9;"
+                        ></iframe>
+                        `;
+                    }
+                })
+                .catch(error => console.error('Error during URL check', error));
+        </script>
+        <!-- END CHAT BOT -->
 </includeonly>