Difference between revisions of "Widget:Homepage"

From LINKS Community Center
Jump to: navigation, search
Line 229: Line 229:
 
             background-color: var(--safe-color);
 
             background-color: var(--safe-color);
 
             border-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>
 
     </style>
Line 498: Line 553:
 
             }
 
             }
 
         </script>
 
         </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>
 
</includeonly>

Revision as of 17:28, 29 April 2024

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

Retrieved from "https://links.communitycenter.eu/index.php?title=Widget:Homepage&oldid=12666"