|
|
(26 intermediate revisions by the same user not shown) |
Line 231: |
Line 231: |
| } | | } |
| | | |
− | /* 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;
| |
− | background-color: #fff;
| |
− | }
| |
− |
| |
− | #chat-window {
| |
− | z-index: 10000;
| |
− | position: fixed;
| |
− | right: 10px;
| |
− | bottom: 70px;
| |
− | background-color: #f8f9fa;
| |
− | width: 20vw;
| |
− | min-width: 12em;
| |
− | min-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> | | </style> |
| | | |
Line 557: |
Line 500: |
| </script> | | </script> |
| | | |
− | <!-- BEGIN CHAT BOT -->
| + | <!-- BEGIN SAFETY.WIDGET --> |
− | <div id="chat-wrapper">
| + | <link rel="stylesheet" href="https://www.safetyinnovation.center/widget/styles.css"> |
− | <div id="chat-window" class="closed-chat">
| + | <div id="safety-widget"></div> |
− | <div id="chat-window-controls">
| + | <script src="https://www.safetyinnovation.center/widget/script.js"></script> |
− | <button id="resize-chat" style="visibility:hidden">←</button>
| + | <!-- END SAFETY.WIDGET --> |
− | <button id="close-chat">×</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 = 'https://192.168.100.172';
| |
− | 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> | | </includeonly> |