|
|
| (31 intermediate revisions by 2 users not shown) |
| Line 231: |
Line 231: |
| | } | | } |
| | | | |
| − | /* CHATBOT WINDOW STYLES */ | + | @media only screen and (orientation: portrait) { |
| − | #chat-button {
| + | .snippet-header, .snippet-body { |
| − | position: fixed; | + | font-size: .75em; |
| − | right: 10px;
| + | } |
| − | bottom: 10px;
| |
| − | border-radius: 5px;
| |
| − | border: 1px solid var(--links-grey);
| |
| − | user-select: none;
| |
| − | cursor: pointer; | |
| − | background-color: #fff;
| |
| − | }
| |
| | | | |
| − | #chat-window {
| + | form.hp-search button { |
| − | position: fixed; | + | display: none; |
| − | 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 556: |
Line 509: |
| | </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 = 'http://192.168.100.172:443';
| |
| − | 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> |