Difference between revisions of "Widget:Homepage"
From LINKS Community Center
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">←</button> | ||
+ | <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: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!